Add visual indicator when displaying a cached balance.

app/_locales/en/messages.json

@@ -139,6 +139,9 @@
   "balance": {
     "message": "Balance"
   },
+  "balanceOutdated": {
+    "message": "Balance may be outdated"
+  },
   "balances": {
     "message": "Token balance(s)"
   },

test/data/mock-state.json

@@ -11,6 +11,7 @@
         "name": "Test Account 2"
       }
     },
+    "cachedBalances": {},
     "unapprovedTxs": {
       "8393540981007587": {
         "id": 8393540981007587,

test/unit/ui/app/selectors.spec.js

@@ -19,6 +19,7 @@ describe('Selectors', function () {
               'address': '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc',
             },
           },
+          cachedBalances: {},
         },
       }
     })

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}

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),
   }
 }

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',
       })
     })
 

ui/app/components/send/tests/send-selectors-test-data.js

@@ -22,6 +22,7 @@ module.exports = {
         'name': 'Send Account 4',
       },
     },
+    'cachedBalances': {},
     'currentBlockGasLimit': '0x4c1878',
     'currentCurrency': 'USD',
     'conversionRate': 1200.88200327,

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;
 

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>
       )
   }
 

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),
   }
 }
 

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;

ui/app/selectors.js

@@ -36,6 +36,7 @@ const selectors = {
   preferencesSelector,
   getMetaMaskAccounts,
   getCurrentEthBalance,
+  isBalanceCached,
 }
 
 module.exports = selectors
@@ -55,15 +56,15 @@ function getSelectedIdentity (state) {
 
 function getMetaMaskAccounts (state) {
   const currentAccounts = state.metamask.accounts
-  const cachedBalances = state.metamask.cachedBalances
+  const cachedBalances = state.metamask.cachedBalances[state.metamask.network]
   const selectedAccounts = {}
 
   Object.keys(currentAccounts).forEach(accountID => {
     const account = currentAccounts[accountID]
     if (account && account.balance === null || account.balance === undefined) {
       selectedAccounts[accountID] = {
         ...account,
-        balance: cachedBalances[accountID],
+        balance: cachedBalances && cachedBalances[accountID],
       }
     } else {
       selectedAccounts[accountID] = account
@@ -72,6 +73,20 @@ function getMetaMaskAccounts (state) {
   return selectedAccounts
 }
 
+function isBalanceCached (state) {
+  const selectedAccountBalance = state.metamask.accounts[getSelectedAddress(state)].balance
+  const cachedBalance = getSelectedAccountCachedBalance(state)
+
+  return Boolean(!selectedAccountBalance && cachedBalance)
+}
+
+function getSelectedAccountCachedBalance (state) {
+  const cachedBalances = state.metamask.cachedBalances[state.metamask.network]
+  const selectedAddress = getSelectedAddress(state)
+
+  return cachedBalances[selectedAddress]
+}
+
 function getSelectedAccount (state) {
   const accounts = getMetaMaskAccounts(state)
   const selectedAddress = getSelectedAddress(state)