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)