Add visual indicator when displaying a cached balance.

MetaMask · Nov 30, 2018 · 3c3546a · 3c3546a
1 parent c132f89
commit 3c3546a
Show file tree

Hide file tree

Showing 9 changed files with 79 additions and 15 deletions.
diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
@@ -121,6 +121,9 @@
   "balance": {
     "message": "Balance"
   },
+  "balanceOutdated": {
+    "message": "Balance may be outdated"
+  },
   "balances": {
     "message": "Token balance(s)"
   },

diff --git a/ui/app/components/send/account-list-item/account-list-item.component.js b/ui/app/components/send/account-list-item/account-list-item.component.js
@@ -4,6 +4,7 @@ import { checksumAddress } from '../../../util'
 import Identicon from '../../identicon'
 import UserPreferencedCurrencyDisplay from '../../user-preferenced-currency-display'
 import { PRIMARY, SECONDARY } from '../../../constants/common'
+import Tooltip from '../../tooltip-v2'
 
 export default class AccountListItem extends Component {
 
@@ -16,6 +17,7 @@ export default class AccountListItem extends Component {
     displayBalance: PropTypes.bool,
     handleClick: PropTypes.func,
     icon: PropTypes.node,
+    balanceIsCached: PropTypes.bool,
   };
 
   static contextTypes = {
@@ -30,6 +32,7 @@ export default class AccountListItem extends Component {
       displayBalance = true,
       handleClick,
       icon = null,
+      balanceIsCached,
     } = this.props
 
     const { name, address, balance } = account || {}
@@ -59,6 +62,12 @@ export default class AccountListItem extends Component {
       {
         displayBalance && (
           <div className="account-list-item__account-balances">
+            { balanceIsCached
+              ? <Tooltip position="top" title={this.context.t('balanceOutdated')}>
+                <div className="account-list-item__balance-flag">*</div>
+              </Tooltip>
+              : null
+            }
             <UserPreferencedCurrencyDisplay
               type={PRIMARY}
               value={balance}

diff --git a/ui/app/components/send/account-list-item/account-list-item.container.js b/ui/app/components/send/account-list-item/account-list-item.container.js
@@ -4,6 +4,9 @@ import {
     getCurrentCurrency,
     getNativeCurrency,
 } from '../send.selectors.js'
+import {
+  isBalanceCached,
+} from '../../../selectors'
 import AccountListItem from './account-list-item.component'
 
 export default connect(mapStateToProps)(AccountListItem)
@@ -13,5 +16,6 @@ function mapStateToProps (state) {
     conversionRate: getConversionRate(state),
     currentCurrency: getCurrentCurrency(state),
     nativeCurrency: getNativeCurrency(state),
+    balanceIsCached: isBalanceCached(state),
   }
 }
diff --git a/ui/app/components/send/account-list-item/tests/account-list-item-container.test.js b/ui/app/components/send/account-list-item/tests/account-list-item-container.test.js
@@ -15,6 +15,9 @@ proxyquire('../account-list-item.container.js', {
     getCurrentCurrency: (s) => `mockCurrentCurrency:${s}`,
     getNativeCurrency: (s) => `mockNativeCurrency:${s}`,
   },
+  '../../../selectors.js': {
+    isBalanceCached: (s) => `mockBalanceIsCached:${s}`,
+  }
 })
 
 describe('account-list-item container', () => {
@@ -26,6 +29,7 @@ describe('account-list-item container', () => {
         conversionRate: 'mockConversionRate:mockState',
         currentCurrency: 'mockCurrentCurrency:mockState',
         nativeCurrency: 'mockNativeCurrency:mockState',
+        balanceIsCached: 'mockBalanceIsCached:mockState',
       })
     })
 

diff --git a/ui/app/components/transaction-view-balance/index.scss b/ui/app/components/transaction-view-balance/index.scss
@@ -17,6 +17,7 @@
     display: flex;
     flex-direction: column;
     min-width: 0;
+    position: relative;
 
     @media screen and (max-width: $break-small) {
       align-items: center;
@@ -26,6 +27,17 @@
     }
   }
 
+  &__balance-flag {
+    position: absolute;
+    top: 3px;
+    left: -8px;
+    color: $curious-blue;
+
+    @media screen and (max-width: $break-small) {
+      left: 7px;
+    }
+  }
+
   &__primary-balance {
     font-size: 1.5rem;
 

diff --git a/ui/app/components/transaction-view-balance/transaction-view-balance.component.js b/ui/app/components/transaction-view-balance/transaction-view-balance.component.js
@@ -6,6 +6,7 @@ import TokenBalance from '../token-balance'
 import UserPreferencedCurrencyDisplay from '../user-preferenced-currency-display'
 import { SEND_ROUTE } from '../../routes'
 import { PRIMARY, SECONDARY } from '../../constants/common'
+import Tooltip from '../tooltip-v2'
 
 export default class TransactionViewBalance extends PureComponent {
   static contextTypes = {
@@ -19,10 +20,11 @@ export default class TransactionViewBalance extends PureComponent {
     network: PropTypes.string,
     balance: PropTypes.string,
     assetImage: PropTypes.string,
+    balanceIsCached: PropTypes.bool,
   }
 
   renderBalance () {
-    const { selectedToken, balance } = this.props
+    const { selectedToken, balance, balanceIsCached } = this.props
 
     return selectedToken
       ? (
@@ -34,20 +36,26 @@ export default class TransactionViewBalance extends PureComponent {
           />
         </div>
       ) : (
-        <div className="transaction-view-balance__balance">
-          <UserPreferencedCurrencyDisplay
-            className="transaction-view-balance__primary-balance"
-            value={balance}
-            type={PRIMARY}
-            ethNumberOfDecimals={4}
-          />
-          <UserPreferencedCurrencyDisplay
-            className="transaction-view-balance__secondary-balance"
-            value={balance}
-            type={SECONDARY}
-            ethNumberOfDecimals={4}
-          />
-        </div>
+          <div className="transaction-view-balance__balance">
+            { balanceIsCached
+              ? <Tooltip position="top" title={this.context.t('balanceOutdated')}>
+                <div className="transaction-view-balance__balance-flag">*</div>
+              </Tooltip>
+              : null
+            }
+            <UserPreferencedCurrencyDisplay
+              className="transaction-view-balance__primary-balance"
+              value={balance}
+              type={PRIMARY}
+              ethNumberOfDecimals={4}
+            />
+            <UserPreferencedCurrencyDisplay
+              className="transaction-view-balance__secondary-balance"
+              value={balance}
+              type={SECONDARY}
+              ethNumberOfDecimals={4}
+            />
+          </div>
       )
   }
 

diff --git a/ui/app/components/transaction-view-balance/transaction-view-balance.container.js b/ui/app/components/transaction-view-balance/transaction-view-balance.container.js
@@ -8,6 +8,7 @@ import {
   getNativeCurrency,
   getSelectedTokenAssetImage,
   getMetaMaskAccounts,
+  isBalanceCached,
 } from '../../selectors'
 import { showModal } from '../../actions'
 
@@ -24,6 +25,7 @@ const mapStateToProps = state => {
     balance,
     nativeCurrency: getNativeCurrency(state),
     assetImage: getSelectedTokenAssetImage(state),
+    balanceIsCached: isBalanceCached(state),
   }
 }
 

diff --git a/ui/app/css/itcss/components/account-dropdown.scss b/ui/app/css/itcss/components/account-dropdown.scss
@@ -52,6 +52,13 @@
     font-size: 12px;
   }
 
+  &__balance-flag {
+    position: absolute;
+    top: 3px;
+    left: -8px;
+    color: $curious-blue;
+  }
+
   &__account-primary-balance {
     color: $scorpion;
     border: none;

diff --git a/ui/app/selectors.js b/ui/app/selectors.js
@@ -35,6 +35,7 @@ const selectors = {
   getTotalUnapprovedCount,
   preferencesSelector,
   getMetaMaskAccounts,
+  isBalanceCached,
 }
 
 module.exports = selectors
@@ -71,6 +72,20 @@ function getMetaMaskAccounts (state) {
   return selectedAccounts
 }
 
+function isBalanceCached (state) {
+  const selectedAccountBalance = getSelectedAccount(state)
+  const cachedBalance = getSelectedAccountCachedBalance(state)
+
+  return Boolean(!selectedAccountBalance && cachedBalance)
+}
+
+function getSelectedAccountCachedBalance (state) {
+  const cachedBalances = state.metamask.cachedAccountBalances
+  const selectedAddress = getSelectedAddress(state)
+
+  return cachedBalances[selectedAddress]
+}
+
 function getSelectedAccount (state) {
   const accounts = getMetaMaskAccounts(state)
   const selectedAddress = getSelectedAddress(state)