show failed token balance updates (#9896)

ui/app/components/app/token-cell/token-cell.js

@@ -10,7 +10,7 @@ import { useTokenFiatAmount } from '../../../hooks/useTokenFiatAmount'
 export default function TokenCell({
   address,
   decimals,
-  outdatedBalance,
+  balanceError,
   symbol,
   string,
   image,
@@ -21,13 +21,14 @@ export default function TokenCell({
 
   const formattedFiat = useTokenFiatAmount(address, string, symbol)
 
-  const warning = outdatedBalance ? (
+  const warning = balanceError ? (
     <span>
       {t('troubleTokenBalances')}
       <a
         href={`https://ethplorer.io/address/${userAddress}`}
         rel="noopener noreferrer"
         target="_blank"
+        onClick={(event) => event.stopPropagation()}
         style={{ color: '#F7861C' }}
       >
         {t('here')}
@@ -38,7 +39,7 @@ export default function TokenCell({
   return (
     <AssetListItem
       className={classnames('token-cell', {
-        'token-cell--outdated': outdatedBalance,
+        'token-cell--outdated': Boolean(balanceError),
       })}
       iconClassName="token-cell__icon"
       onClick={onClick.bind(null, address)}
@@ -55,7 +56,7 @@ export default function TokenCell({
 
 TokenCell.propTypes = {
   address: PropTypes.string,
-  outdatedBalance: PropTypes.bool,
+  balanceError: PropTypes.object,
   symbol: PropTypes.string,
   decimals: PropTypes.number,
   string: PropTypes.string,
@@ -64,5 +65,5 @@ TokenCell.propTypes = {
 }
 
 TokenCell.defaultProps = {
-  outdatedBalance: false,
+  balanceError: null,
 }

ui/app/components/app/token-list/token-list.js

@@ -16,7 +16,7 @@ export default function TokenList({ onTokenClick }) {
   // from the background so it has a new reference with each background update,
   // even if the tokens haven't changed
   const tokens = useSelector(getTokens, isEqual)
-  const { loading, error, tokensWithBalances } = useTokenTracker(tokens)
+  const { loading, tokensWithBalances } = useTokenTracker(tokens, true)
 
   if (loading) {
     return (
@@ -38,14 +38,7 @@ export default function TokenList({ onTokenClick }) {
     <div>
       {tokensWithBalances.map((tokenData, index) => {
         tokenData.image = assetImages[tokenData.address]
-        return (
-          <TokenCell
-            key={index}
-            {...tokenData}
-            outdatedBalance={Boolean(error)}
-            onClick={onTokenClick}
-          />
-        )
+        return <TokenCell key={index} {...tokenData} onClick={onTokenClick} />
       })}
     </div>
   )

ui/app/hooks/useTokenTracker.js

@@ -4,7 +4,7 @@ import { useSelector } from 'react-redux'
 import { getCurrentNetwork, getSelectedAddress } from '../selectors'
 import { useEqualityCheck } from './useEqualityCheck'
 
-export function useTokenTracker(tokens) {
+export function useTokenTracker(tokens, includeFailedTokens = false) {
   const network = useSelector(getCurrentNetwork)
   const userAddress = useSelector(getSelectedAddress)
 
@@ -42,6 +42,7 @@ export function useTokenTracker(tokens) {
         userAddress: address,
         provider: global.ethereumProvider,
         tokens: tokenList,
+        includeFailedTokens,
         pollingInterval: 8000,
       })
 
@@ -49,7 +50,7 @@ export function useTokenTracker(tokens) {
       tokenTracker.current.on('error', showError)
       tokenTracker.current.updateBalances()
     },
-    [updateBalances, showError, teardownTracker],
+    [updateBalances, includeFailedTokens, showError, teardownTracker],
   )
 
   // Effect to remove the tracker when the component is removed from DOM