Add visual indicator when displaying a cached balance (#5854)

3 files changed, 52 insertions, 15 deletions

diff --git a/ui/app/components/transaction-view-balance/index.scss b/ui/app/components/transaction-view-balance/index.scss
index f3fd580d7..bdcd536b0 100644
--- 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,10 @@
     }
   }
 
+  &__primary-container {
+    display: flex;
+  }
+
   &__primary-balance {
     font-size: 1.5rem;
 
@@ -36,6 +41,19 @@
     }
   }
 
+  &__cached-star {
+    margin-left: 4px;
+  }
+
+  &__cached-balance, &__cached-star {
+    color: $web-orange;
+  }
+
+  &__cached-secondary-balance {
+    color: rgba(220, 153, 18, 0.6901960784313725);
+    font-size: 1.15rem;
+  }
+
   &__secondary-balance {
     font-size: 1.15rem;
     color: #a0a0a0;
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
index a24b97478..bd6b4bdb6 100644
--- a/ui/app/components/transaction-view-balance/transaction-view-balance.component.js
+++ b/ui/app/components/transaction-view-balance/transaction-view-balance.component.js
@@ -1,11 +1,13 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
+import classnames from 'classnames'
 import Button from '../button'
 import Identicon from '../identicon'
 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 +21,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 +37,34 @@ 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>
+          <Tooltip position="top" title={this.context.t('balanceOutdated')} disabled={!balanceIsCached}>
+            <div className="transaction-view-balance__balance">
+                <div className="transaction-view-balance__primary-container">
+                  <UserPreferencedCurrencyDisplay
+                    className={classnames('transaction-view-balance__primary-balance', {
+                      'transaction-view-balance__cached-balance': balanceIsCached,
+                    })}
+                    value={balance}
+                    type={PRIMARY}
+                    ethNumberOfDecimals={4}
+                    hideTitle={true}
+                  />
+                  {
+                    balanceIsCached ? <span className="transaction-view-balance__cached-star">*</span> : null
+                  }
+                </div>
+                <UserPreferencedCurrencyDisplay
+                  className={classnames({
+                    'transaction-view-balance__cached-secondary-balance': balanceIsCached,
+                    'transaction-view-balance__secondary-balance': !balanceIsCached,
+                  })}
+                  value={balance}
+                  type={SECONDARY}
+                  ethNumberOfDecimals={4}
+                  hideTitle={true}
+                />
+            </div>
+          </Tooltip>
       )
   }
 
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
index f9f05b0ae..354db5ae1 100644
--- 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),
   }
 }