1 files changed, 32 insertions, 10 deletions
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
index a61467bb3..665383e58 100644
--- 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
@@ -1,9 +1,11 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
+import classnames from 'classnames'
 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 +18,7 @@ export default class AccountListItem extends Component {
     displayBalance: PropTypes.bool,
     handleClick: PropTypes.func,
     icon: PropTypes.node,
+    balanceIsCached: PropTypes.bool,
   };
 
   static contextTypes = {
@@ -30,6 +33,7 @@ export default class AccountListItem extends Component {
       displayBalance = true,
       handleClick,
       icon = null,
+      balanceIsCached,
     } = this.props
 
     const { name, address, balance } = account || {}
@@ -58,16 +62,34 @@ export default class AccountListItem extends Component {
 
       {
         displayBalance && (
-          <div className="account-list-item__account-balances">
-            <UserPreferencedCurrencyDisplay
-              type={PRIMARY}
-              value={balance}
-            />
-            <UserPreferencedCurrencyDisplay
-              type={SECONDARY}
-              value={balance}
-            />
-          </div>
+          <Tooltip
+            position="left"
+            title={this.context.t('balanceOutdated')}
+            disabled={!balanceIsCached}
+            style={{
+              left: '-20px !important',
+            }}
+          >
+            <div className={classnames('account-list-item__account-balances', {
+              'account-list-item__cached-balances': balanceIsCached,
+            })}>
+              <div className="account-list-item__primary-cached-container">
+                <UserPreferencedCurrencyDisplay
+                  type={PRIMARY}
+                  value={balance}
+                  hideTitle={true}
+                />
+                {
+                  balanceIsCached ? <span className="account-list-item__cached-star">*</span> : null
+                }
+              </div>
+              <UserPreferencedCurrencyDisplay
+                type={SECONDARY}
+                value={balance}
+                hideTitle={true}
+              />
+            </div>
+          </Tooltip>
         )
       }