diff --git a/ui/app/components/app/token-list/token-list.js b/ui/app/components/app/token-list/token-list.js index 3fcc71d38..9d0fdc77e 100644 --- a/ui/app/components/app/token-list/token-list.js +++ b/ui/app/components/app/token-list/token-list.js @@ -10,10 +10,7 @@ import { getAssetImages, getShouldHideZeroBalanceTokens, } from '../../../selectors'; -import { - getTokens, - getTokensWithBalance, -} from '../../../ducks/metamask/metamask'; +import { getTokens } from '../../../ducks/metamask/metamask'; export default function TokenList({ onTokenClick }) { const t = useI18nContext(); @@ -25,13 +22,11 @@ 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 tokensWithBalance = useSelector(getTokensWithBalance, isEqual); - const { loading, tokensWithBalances } = useTokenTracker( - shouldHideZeroBalanceTokens ? tokensWithBalance : tokens, + tokens, true, + shouldHideZeroBalanceTokens, ); - if (loading) { return (
state.metamask.unconnectedAccountAlertShownOrigins; export const getTokens = (state) => state.metamask.tokens; - -export const getTokensWithBalance = (state) => - state.metamask.tokens.filter((token) => Number(token.balance) > 0); diff --git a/ui/app/hooks/useTokenTracker.js b/ui/app/hooks/useTokenTracker.js index ea7892b08..2b2411d1e 100644 --- a/ui/app/hooks/useTokenTracker.js +++ b/ui/app/hooks/useTokenTracker.js @@ -4,21 +4,30 @@ import { useSelector } from 'react-redux'; import { getCurrentNetwork, getSelectedAddress } from '../selectors'; import { useEqualityCheck } from './useEqualityCheck'; -export function useTokenTracker(tokens, includeFailedTokens = false) { +export function useTokenTracker( + tokens, + includeFailedTokens = false, + hideZeroBalanceTokens = false, +) { const network = useSelector(getCurrentNetwork); const userAddress = useSelector(getSelectedAddress); - const [loading, setLoading] = useState(() => tokens?.length >= 0); const [tokensWithBalances, setTokensWithBalances] = useState([]); const [error, setError] = useState(null); const tokenTracker = useRef(null); const memoizedTokens = useEqualityCheck(tokens); - const updateBalances = useCallback((tokenWithBalances) => { - setTokensWithBalances(tokenWithBalances); - setLoading(false); - setError(null); - }, []); + const updateBalances = useCallback( + (tokenWithBalances) => { + const matchingTokens = hideZeroBalanceTokens + ? tokenWithBalances.filter((token) => Number(token.balance) > 0) + : tokenWithBalances; + setTokensWithBalances(matchingTokens); + setLoading(false); + setError(null); + }, + [hideZeroBalanceTokens], + ); const showError = useCallback((err) => { setError(err);