diff options
Diffstat (limited to 'ui/app/components/send')
5 files changed, 42 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> ) } 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 index f8e73d923..03a60be67 100644 --- 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-component.test.js b/ui/app/components/send/account-list-item/tests/account-list-item-component.test.js index 6ffc0b1c6..f2ddb73c0 100644 --- a/ui/app/components/send/account-list-item/tests/account-list-item-component.test.js +++ b/ui/app/components/send/account-list-item/tests/account-list-item-component.test.js @@ -121,6 +121,7 @@ describe('AccountListItem Component', function () { { type: 'PRIMARY', value: 'mockBalance', + hideTitle: true, } ) }) 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 index 7c2f5fcb2..8c22bc8f8 100644 --- 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/send/tests/send-selectors-test-data.js b/ui/app/components/send/tests/send-selectors-test-data.js index 30a2666cf..66c0da229 100644 --- a/ui/app/components/send/tests/send-selectors-test-data.js +++ b/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, |