From 3c3546a324fde340c245196d6d069f6f29a278b9 Mon Sep 17 00:00:00 2001 From: Dan Miller Date: Thu, 29 Nov 2018 12:32:02 -0330 Subject: [PATCH] Add visual indicator when displaying a cached balance. --- app/_locales/en/messages.json | 3 ++ .../account-list-item.component.js | 9 +++++ .../account-list-item.container.js | 4 ++ .../tests/account-list-item-container.test.js | 4 ++ .../transaction-view-balance/index.scss | 12 ++++++ .../transaction-view-balance.component.js | 38 +++++++++++-------- .../transaction-view-balance.container.js | 2 + .../itcss/components/account-dropdown.scss | 7 ++++ ui/app/selectors.js | 15 ++++++++ 9 files changed, 79 insertions(+), 15 deletions(-) diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 0fe8e81cdb2f..f112e5b8d3a0 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -121,6 +121,9 @@ "balance": { "message": "Balance" }, + "balanceOutdated": { + "message": "Balance may be outdated" + }, "balances": { "message": "Token balance(s)" }, 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 14bb7471f65d..aeb7c4ed147f 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 @@ -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 && (
+ { balanceIsCached + ? +
*
+ + : null + } `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/transaction-view-balance/index.scss b/ui/app/components/transaction-view-balance/index.scss index 43e87459bfeb..2d8d9dc9c074 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,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; 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 a24b9747813f..ad67d7448f6d 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 @@ -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 { />
) : ( -
- - -
+
+ { balanceIsCached + ? +
*
+ + : null + } + + +
) } 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 f9f05b0ae808..354db5ae13de 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), } } diff --git a/ui/app/css/itcss/components/account-dropdown.scss b/ui/app/css/itcss/components/account-dropdown.scss index b29afdc8cee1..8bde71c355ce 100644 --- a/ui/app/css/itcss/components/account-dropdown.scss +++ b/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; diff --git a/ui/app/selectors.js b/ui/app/selectors.js index f99f14aa8141..912c6c0b7b8e 100644 --- a/ui/app/selectors.js +++ b/ui/app/selectors.js @@ -35,6 +35,7 @@ const selectors = { getTotalUnapprovedCount, preferencesSelector, getMetaMaskAccounts, + isBalanceCached, } module.exports = selectors @@ -71,6 +72,20 @@ function getMetaMaskAccounts (state) { return selectedAccounts } +function isBalanceCached (state) { + const selectedAccountBalance = getSelectedAccount(state) + const cachedBalance = getSelectedAccountCachedBalance(state) + + return Boolean(!selectedAccountBalance && cachedBalance) +} + +function getSelectedAccountCachedBalance (state) { + const cachedBalances = state.metamask.cachedAccountBalances + const selectedAddress = getSelectedAddress(state) + + return cachedBalances[selectedAddress] +} + function getSelectedAccount (state) { const accounts = getMetaMaskAccounts(state) const selectedAddress = getSelectedAddress(state)