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 (
-
+
)
})}