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);