diff options
Diffstat (limited to 'ui/app/components/transaction-view-balance')
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), } } |