Merge branch 'timeago-display' into develop

Author: gabmontes

package-lock.json

@@ -45,7 +45,7 @@
     "lodash": "4.17.11",
     "metronome-contracts": "2.0.0",
     "metronome-wallet-core": "2.0.1",
-    "metronome-wallet-ui-logic": "2.0.1",
+    "metronome-wallet-ui-logic": "2.1.0",
     "nedb": "1.8.0",
     "p-timeout": "2.0.1",
     "qrcode.react": "0.7.2",

package.json

@@ -19,6 +19,6 @@ module.exports = {
   requiredPasswordEntropy: parseInt(process.env.REQUIRED_PASSWORD_ENTROPY || 72, 10),
   scanTransactionTimeout: 240000,
   sentryDsn: process.env.SENTRY_DSN,
-  statePersistanceDebounce: 15000,
+  statePersistanceDebounce: 2000,
   trackingId: process.env.TRACKING_ID
 }

public/config/index.js

@@ -18,9 +18,13 @@ function createClient(createStore) {
   window.ipcRenderer.on('ui-ready', (ev, payload) => {
     const debounceTime = get(payload, 'data.config.statePersistanceDebounce', 0)
     store.subscribe(
-      debounce(function() {
-        utils.forwardToMainProcess('persist-state')(store.getState())
-      }, debounceTime)
+      debounce(
+        function() {
+          utils.forwardToMainProcess('persist-state')(store.getState())
+        },
+        debounceTime,
+        { maxWait: 2 * debounceTime }
+      )
     )
   })
 
@@ -112,6 +116,7 @@ function createClient(createStore) {
     getStringEntropy,
     copyToClipboard,
     onHelpLinkClick,
+    getAppVersion: window.getAppVersion,
     onInit,
     store
   }

src/client/index.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import React from 'react'
 
-import { DarkLayout, LoadingBar, Text, Btn, Sp } from '../common'
+import { DarkLayout, LastUpdated, LoadingBar, Text, Btn, Sp } from '../common'
 import BuyMETDrawer from './BuyMETDrawer'
 import CountDown from './CountDown'
 import Stats from './Stats'
@@ -54,6 +54,7 @@ class Auction extends React.Component {
     auctionPriceUSD: PropTypes.string.isRequired,
     auctionStatus: PropTypes.object,
     buyDisabled: PropTypes.bool.isRequired,
+    lastUpdated: PropTypes.number,
     title: PropTypes.string
   }
 
@@ -107,6 +108,9 @@ class Auction extends React.Component {
             </LoadingContainer>
           </Sp>
         )}
+        <Sp px={6}>
+          <LastUpdated timestamp={this.props.lastUpdated} />
+        </Sp>
       </DarkLayout>
     )
   }

src/components/auction/Auction.js

@@ -0,0 +1,39 @@
+import PropTypes from 'prop-types'
+import TimeAgo from 'metronome-wallet-ui-logic/src/components/TimeAgo'
+import styled from 'styled-components'
+import React from 'react'
+
+export const Label = styled.div`
+  transition: color 0.5s;
+  font-size: 1.3rem;
+  color: ${p =>
+    p.diff > 60
+      ? p.theme.colors.danger
+      : p.diff > 15
+      ? p.theme.colors.warning
+      : p.theme.colors.weak};
+`
+
+function defaultRender({ diff, timeAgo }) {
+  return <Label diff={diff}>Last updated {timeAgo}</Label>
+}
+
+defaultRender.propTypes = {
+  timeAgo: PropTypes.string,
+  diff: PropTypes.number
+}
+
+export default function LastUpdated({ timestamp, render }) {
+  return (
+    <TimeAgo
+      updateInterval={1000}
+      timestamp={timestamp}
+      render={typeof render === 'function' ? render : defaultRender}
+    />
+  )
+}
+
+LastUpdated.propTypes = {
+  timestamp: PropTypes.number,
+  render: PropTypes.func
+}

src/components/common/LastUpdated.js

@@ -3,6 +3,7 @@ import TextInput, { Label } from './TextInput'
 import ConfirmationWizard from './ConfirmationWizard'
 import DisplayValue from './DisplayValue'
 import AmountFields from './AmountFields'
+import LastUpdated from './LastUpdated'
 import ItemFilter from './ItemFilter'
 import DarkLayout from './DarkLayout'
 import LoadingBar from './LoadingBar'
@@ -21,6 +22,7 @@ export {
   ConfirmationWizard,
   DisplayValue,
   AmountFields,
+  LastUpdated,
   ItemFilter,
   DarkLayout,
   LoadingBar,

src/components/common/index.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import React from 'react'
 
-import { DarkLayout, LoadingBar, Text, Btn, Sp } from '../common'
+import { DarkLayout, LastUpdated, LoadingBar, Text, Btn, Sp } from '../common'
 import ConvertDrawer from './ConvertDrawer'
 import Stats from './Stats'
 
@@ -42,6 +42,7 @@ class Converter extends React.Component {
     converterPriceUSD: PropTypes.string.isRequired,
     convertDisabled: PropTypes.bool.isRequired,
     converterStatus: PropTypes.object,
+    lastUpdated: PropTypes.number,
     coinSymbol: PropTypes.string.isRequired
   }
 
@@ -94,6 +95,9 @@ class Converter extends React.Component {
             </LoadingContainer>
           </Sp>
         )}
+        <Sp px={6}>
+          <LastUpdated timestamp={this.props.lastUpdated} />
+        </Sp>
       </DarkLayout>
     )
   }

src/components/converter/Converter.js

@@ -5,6 +5,7 @@ import styled from 'styled-components'
 import React from 'react'
 
 import ConfirmModal from './ConfirmModal'
+import WalletStatus from './WalletStatus'
 import {
   ConfirmationWizard,
   DarkLayout,
@@ -116,6 +117,11 @@ class Tools extends React.Component {
             isOpen={this.state.activeModal === 'confirm-rescan'}
           />
         </Sp>
+        <Sp mt={5}>
+          <hr />
+          <h4>Wallet Information</h4>
+          <WalletStatus />
+        </Sp>
       </Sp>
     )
   }

src/components/tools/Tools.js

@@ -0,0 +1,95 @@
+import { withClient } from 'metronome-wallet-ui-logic/src/hocs/clientContext'
+import * as selectors from 'metronome-wallet-ui-logic/src/selectors'
+import { connect } from 'react-redux'
+import PropTypes from 'prop-types'
+import styled from 'styled-components'
+import React from 'react'
+
+import { Flex, Sp } from '../common'
+import LastUpdated, { Label } from '../common/LastUpdated'
+
+const Text = styled.div`
+  font-size: 1.3rem;
+  margin: 0.8rem 0;
+  display: flex;
+  align-items: center;
+`
+
+const MinedAgo = styled(Label)`
+  margin-left: 0.8rem;
+`
+
+const IndicatorLed = styled.div`
+  width: 10px;
+  height: 10px;
+  background-color: ${({ isOnline, isConnected, theme }) =>
+    isOnline
+      ? isConnected
+        ? theme.colors.success
+        : theme.colors.danger
+      : 'rgba(119, 132, 125, 0.68)'};
+  border: 1px solid white;
+  border-radius: 10px;
+  margin: 5px 8px 2px 1px;
+`
+
+function WalletStatus(props) {
+  return (
+    <div>
+      <Text>Version {props.appVersion}</Text>
+      <Flex.Row align="center">
+        <Text>Connected to {props.chainName} chain</Text>
+        <Sp px={2} />
+        <LastUpdated
+          timestamp={props.bestBlockTimestamp}
+          render={({ timeAgo, diff }) => (
+            <Text>
+              Best Block {props.height}
+              <MinedAgo diff={diff} as="span">
+                mined {timeAgo}
+              </MinedAgo>
+            </Text>
+          )}
+        />
+      </Flex.Row>
+      <Flex.Row align="center">
+        <Text>
+          <IndicatorLed
+            isConnected={props.isIndexerConnected}
+            isOnline={props.isOnline}
+          />
+          Indexer connection
+        </Text>
+        <Sp px={2} />
+        <Text>
+          <IndicatorLed
+            isConnected={props.isWeb3Connected}
+            isOnline={props.isOnline}
+          />
+          Web3 connection
+        </Text>
+      </Flex.Row>
+    </div>
+  )
+}
+
+WalletStatus.propTypes = {
+  bestBlockTimestamp: PropTypes.number,
+  isIndexerConnected: PropTypes.bool,
+  isWeb3Connected: PropTypes.bool,
+  appVersion: PropTypes.string.isRequired,
+  chainName: PropTypes.string.isRequired,
+  isOnline: PropTypes.bool,
+  height: PropTypes.number
+}
+
+const mapStateToProps = (state, props) => ({
+  isIndexerConnected: selectors.getIndexerConnectionStatus(state),
+  isWeb3Connected: selectors.getChainConnectionStatus(state),
+  appVersion: props.client.getAppVersion(),
+  chainName: selectors.getActiveChainDisplayName(state),
+  isOnline: selectors.getIsOnline(state),
+  ...selectors.getChainMeta(state)
+})
+
+export default withClient(connect(mapStateToProps)(WalletStatus))