Hide zero balance tokens at useTokenTracker layer (#10630)

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 (
       <div

ui/app/ducks/metamask/metamask.js

@@ -386,6 +386,3 @@ export const getUnconnectedAccountAlertShown = (state) =>
   state.metamask.unconnectedAccountAlertShownOrigins;
 
 export const getTokens = (state) => state.metamask.tokens;
-
-export const getTokensWithBalance = (state) =>
-  state.metamask.tokens.filter((token) => Number(token.balance) > 0);

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