diff --git a/ui/app/components/app/token-cell/token-cell.component.js b/ui/app/components/app/token-cell/token-cell.component.js index c4a537d9f..a64c4952e 100644 --- a/ui/app/components/app/token-cell/token-cell.component.js +++ b/ui/app/components/app/token-cell/token-cell.component.js @@ -4,14 +4,15 @@ import React, { Component } from 'react' import Identicon from '../../ui/identicon' import { conversionUtil, multiplyCurrencies } from '../../../helpers/utils/conversion-util' import TokenMenuDropdown from '../dropdowns/token-menu-dropdown.js' +import Tooltip from '../../ui/tooltip-v2' +import { I18nContext } from '../../../contexts/i18n' export default class TokenCell extends Component { - static contextTypes = { - metricsEvent: PropTypes.func, - } + static contextType = I18nContext static propTypes = { address: PropTypes.string, + outdatedBalance: PropTypes.bool, symbol: PropTypes.string, string: PropTypes.string, selectedTokenAddress: PropTypes.string, @@ -20,6 +21,11 @@ export default class TokenCell extends Component { currentCurrency: PropTypes.string, image: PropTypes.string, onClick: PropTypes.func.isRequired, + userAddress: PropTypes.string.isRequired, + } + + static defaultProps = { + outdatedBalance: false, } state = { @@ -27,6 +33,7 @@ export default class TokenCell extends Component { } render () { + const t = this.context const { tokenMenuOpen } = this.state const { address, @@ -38,6 +45,8 @@ export default class TokenCell extends Component { onClick, currentCurrency, image, + outdatedBalance, + userAddress, } = this.props let currentTokenToFiatRate let currentTokenInFiat @@ -66,6 +75,7 @@ export default class TokenCell extends Component {
@@ -85,6 +95,32 @@ export default class TokenCell extends Component {
)} + + { + outdatedBalance && ( + + { t('troubleTokenBalances') } + + { t('here') } + + + )} + > + + + ) + } + +
{ diff --git a/ui/app/components/app/token-cell/token-cell.container.js b/ui/app/components/app/token-cell/token-cell.container.js index f237e30d2..cc29a941e 100644 --- a/ui/app/components/app/token-cell/token-cell.container.js +++ b/ui/app/components/app/token-cell/token-cell.container.js @@ -1,5 +1,6 @@ import { connect } from 'react-redux' import TokenCell from './token-cell.component' +import { getSelectedAddress } from '../../../selectors/selectors' function mapStateToProps (state) { return { @@ -7,6 +8,7 @@ function mapStateToProps (state) { conversionRate: state.metamask.conversionRate, currentCurrency: state.metamask.currentCurrency, selectedTokenAddress: state.metamask.selectedTokenAddress, + userAddress: getSelectedAddress(state), } } diff --git a/ui/app/components/app/token-cell/token-cell.scss b/ui/app/components/app/token-cell/token-cell.scss index 6b0ad83a1..4b50158fb 100644 --- a/ui/app/components/app/token-cell/token-cell.scss +++ b/ui/app/components/app/token-cell/token-cell.scss @@ -61,6 +61,10 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and ( } } + &--outdated > &__identicon { + opacity: 0.5 + } + &__balance-ellipsis { display: flex; align-items: center; @@ -68,9 +72,12 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and ( flex: 1; } + &--outdated > &__balance-ellipsis { + opacity: 0.5 + } + &__ellipsis { line-height: 45px; - margin-left: 5px; } &__balance-wrapper { @@ -79,6 +86,16 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and ( display: flex; min-width: 0; } + + &__outdated-icon { + color: $warning-yellow; + display: block; + padding: 0 10px; + } + + &__outdated-tooltip { + width: 260px; + } } .token-menu-dropdown { diff --git a/ui/app/components/app/token-list/token-list.component.js b/ui/app/components/app/token-list/token-list.component.js index 3dd8cb84a..9dbc4b6ef 100644 --- a/ui/app/components/app/token-list/token-list.component.js +++ b/ui/app/components/app/token-list/token-list.component.js @@ -110,7 +110,7 @@ class TokenList extends Component { render () { const t = this.context const { error, tokensLoading, tokensWithBalances } = this.state - const { assetImages, network, onTokenClick, userAddress } = this.props + const { assetImages, network, onTokenClick } = this.props if (network === 'loading' || tokensLoading) { return (
- {t('troubleTokenBalances')} - { - global.platform.openWindow({ - url: `https://ethplorer.io/address/${userAddress}`, - }) - }} - > - {t('here')} - -
- ) - } - return (
{tokensWithBalances.map((tokenData, index) => { tokenData.image = assetImages[tokenData.address] return ( - + ) })}