fix: fix aggregated balances for the new network filter

Author: salimtb

ui/hooks/useAccountTotalCrossChainFiatBalance.test.ts

@@ -6,6 +6,7 @@ import {
 import {
   getCrossChainTokenExchangeRates,
   getCrossChainMetaMaskCachedBalances,
+  getEnabledNetworksByNamespace,
 } from '../selectors';
 import {
   getCurrentCurrency,
@@ -25,6 +26,7 @@ jest.mock('react-redux', () => ({
 jest.mock('../selectors', () => ({
   getCrossChainTokenExchangeRates: jest.fn(),
   getCrossChainMetaMaskCachedBalances: jest.fn(),
+  getEnabledNetworksByNamespace: jest.fn(),
 }));
 jest.mock('../ducks/metamask/metamask', () => ({
   getCurrentCurrency: jest.fn(),
@@ -49,6 +51,9 @@ const mockGetCrossChainTokenExchangeRates = jest.mocked(
 const mockGetCrossChainMetaMaskCachedBalances = jest.mocked(
   getCrossChainMetaMaskCachedBalances,
 );
+const mockGetEnabledNetworksByNamespace = jest.mocked(
+  getEnabledNetworksByNamespace,
+);
 
 const mockUseTokenBalances = jest.fn().mockReturnValue({
   tokenBalances: {
@@ -193,6 +198,11 @@ describe('useAccountTotalCrossChainFiatBalance', () => {
       mockCachedBalances(),
     );
 
+    mockGetEnabledNetworksByNamespace.mockReturnValue({
+      '0x1': {},
+      '0xe708': {},
+    });
+
     jest.clearAllMocks();
   });
 

ui/hooks/useAccountTotalCrossChainFiatBalance.ts

@@ -8,6 +8,7 @@ import {
 import {
   getCrossChainTokenExchangeRates,
   getCrossChainMetaMaskCachedBalances,
+  getEnabledNetworksByNamespace,
 } from '../selectors';
 import {
   getValueFromWeiHex,
@@ -36,6 +37,9 @@ export const useAccountTotalCrossChainFiatBalance = (
   formattedTokensWithBalancesPerChain: FormattedTokensWithBalances[],
 ) => {
   const allNetworks = useSelector(getNetworkConfigurationsByChainId);
+
+  const enabledNetworksByNamespace = useSelector(getEnabledNetworksByNamespace);
+
   const currencyRates = useSelector(getCurrencyRates);
   const currentCurrency = useSelector(getCurrentCurrency);
 
@@ -53,9 +57,24 @@ export const useAccountTotalCrossChainFiatBalance = (
     [crossChainContractRates],
   );
 
+  const filteredBalances = useMemo(() => {
+    return formattedTokensWithBalancesPerChain
+      .map((balances) => {
+        if (
+          Object.keys(enabledNetworksByNamespace).includes(
+            balances.chainId.toString(),
+          )
+        ) {
+          return balances;
+        }
+        return null;
+      })
+      .filter((balance) => balance !== null);
+  }, [formattedTokensWithBalancesPerChain, enabledNetworksByNamespace]);
+
   const tokenFiatBalancesCrossChains = useMemo(
     () =>
-      formattedTokensWithBalancesPerChain.map((singleChainTokenBalances) => {
+      filteredBalances.map((singleChainTokenBalances) => {
         const { tokensWithBalances } = singleChainTokenBalances;
         // Attempt to use known currency symbols in map
         // Otherwise fallback to user defined currency