fix: Token list should respect hideZeroBalance setting

ui/components/app/assets/token-list/token-list.tsx

@@ -8,6 +8,7 @@ import {
   getCurrencyRates,
   getCurrentNetwork,
   getIsTestnet,
+  getIsTokenNetworkFilterEqualCurrentNetwork,
   getMarketData,
   getNetworkConfigurationIdByChainId,
   getNewTokensImported,
@@ -86,8 +87,12 @@ export default function TokenList({
   const dispatch = useDispatch();
   const currentNetwork = useSelector(getCurrentNetwork);
   const allNetworks = useSelector(getNetworkConfigurationIdByChainId);
-  const { tokenSortConfig, tokenNetworkFilter, privacyMode } =
-    useSelector(getPreferences);
+  const {
+    tokenSortConfig,
+    tokenNetworkFilter,
+    privacyMode,
+    hideZeroBalanceTokens,
+  } = useSelector(getPreferences);
   const selectedAccount = useSelector(getSelectedAccount);
   const conversionRate = useSelector(getConversionRate);
   const contractExchangeRates = useSelector(
@@ -96,6 +101,9 @@ export default function TokenList({
   );
   const newTokensImported = useSelector(getNewTokensImported);
   const selectedAccountTokensChains = useFilteredAccountTokens(currentNetwork);
+  const isOnCurrentNetwork = useSelector(
+    getIsTokenNetworkFilterEqualCurrentNetwork,
+  );
 
   const { tokenBalances } = useTokenBalances();
   const selectedAccountTokenBalancesAcrossChains =
@@ -109,7 +117,7 @@ export default function TokenList({
   const nativeBalances: Record<Hex, Hex> = useSelector(
     getSelectedAccountNativeTokenCachedBalanceByChainId,
   ) as Record<Hex, Hex>;
-
+  const isTestnet = useSelector(getIsTestnet);
   // Ensure newly added networks are included in the tokenNetworkFilter
   useEffect(() => {
     if (process.env.PORTFOLIO_VIEW) {
@@ -147,14 +155,28 @@ export default function TokenList({
             currencyRates,
           });
 
-          // Append processed token with balance and fiat amount
-          tokensWithBalance.push({
-            ...token,
-            balance,
-            tokenFiatAmount,
-            chainId,
-            string: String(balance),
-          });
+          // Respect the "hide zero balance" setting (when true):
+          // - Native tokens should always display with zero balance when on the current network filter.
+          // - Native tokens should not display with zero balance when on all networks filter
+          // - ERC20 tokens with zero balances should respect the setting on both the current and all networks.
+
+          // Respect the "hide zero balance" setting (when false):
+          // - Native tokens should always display with zero balance when on the current network filter.
+          // - Native tokens should always display with zero balance when on all networks filter
+          // - ERC20 tokens always display with zero balance on both the current and all networks filter.
+          if (
+            !hideZeroBalanceTokens ||
+            balance !== '0' ||
+            (token.isNative && isOnCurrentNetwork)
+          ) {
+            tokensWithBalance.push({
+              ...token,
+              balance,
+              tokenFiatAmount,
+              chainId,
+              string: String(balance),
+            });
+          }
         });
       },
     );
@@ -216,8 +238,6 @@ export default function TokenList({
     console.log(t('loadingTokens'));
   }
 
-  // Check if testnet
-  const isTestnet = useSelector(getIsTestnet);
   const shouldShowFiat = useMultichainSelector(
     getMultichainShouldShowFiat,
     selectedAccount,