fix: Aggregated balance for enabled networks (#33967)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/33967?quickstart=1)

## **Related issues**

Fixes: #33936 

## **Manual testing steps**

1. Go to this page...
2.
3.

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

Author: salimtb

ui/components/app/wallet-overview/aggregated-percentage-overview-cross-chains.tsx

@@ -113,7 +113,9 @@ export const AggregatedPercentageOverviewCrossChains = () => {
   const amountChangeCrossChains =
     totalCrossChainBalance - crossChainTotalBalance1dAgo;
   const percentageChangeCrossChains =
-    (amountChangeCrossChains / crossChainTotalBalance1dAgo) * 100 || 0;
+    crossChainTotalBalance1dAgo === 0
+      ? 0
+      : (amountChangeCrossChains / crossChainTotalBalance1dAgo) * 100;
 
   const formattedPercentChangeCrossChains = formatValue(
     amountChangeCrossChains === 0 ? 0 : percentageChangeCrossChains,

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,26 @@ 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 is FormattedTokensWithBalances => 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
@@ -67,23 +88,25 @@ export const useAccountTotalCrossChainFiatBalance = (
             .nativeCurrency;
         const conversionRate =
           currencyRates?.[matchedChainSymbol]?.conversionRate;
-        const tokenFiatBalances = tokensWithBalances.map((token) => {
-          const tokenExchangeRate =
-            mergedCrossChainRates?.[singleChainTokenBalances.chainId]?.[
-              toChecksumAddress(token.address)
-            ];
-          const totalFiatValue = getTokenFiatAmount(
-            tokenExchangeRate,
-            conversionRate,
-            currentCurrency,
-            token.string,
-            token.symbol,
-            false,
-            false,
-          );
+        const tokenFiatBalances = tokensWithBalances.map(
+          (token: TokenWithBalance) => {
+            const tokenExchangeRate =
+              mergedCrossChainRates?.[singleChainTokenBalances.chainId]?.[
+                toChecksumAddress(token.address)
+              ];
+            const totalFiatValue = getTokenFiatAmount(
+              tokenExchangeRate,
+              conversionRate,
+              currentCurrency,
+              token.string,
+              token.symbol,
+              false,
+              false,
+            );
 
-          return totalFiatValue;
-        });
+            return totalFiatValue;
+          },
+        );
 
         const balanceCached =
           crossChainCachedBalances?.[singleChainTokenBalances.chainId]?.[
@@ -102,7 +125,7 @@ export const useAccountTotalCrossChainFiatBalance = (
         };
       }),
     [
-      formattedTokensWithBalancesPerChain,
+      filteredBalances,
       allNetworks,
       currencyRates,
       mergedCrossChainRates,
@@ -117,7 +140,7 @@ export const useAccountTotalCrossChainFiatBalance = (
       tokenFiatBalancesCrossChains.reduce((accumulator, currentValue) => {
         const tmpCurrentValueFiatBalances: string[] =
           currentValue.tokenFiatBalances.filter(
-            (value): value is string => value !== undefined,
+            (value: string | undefined): value is string => value !== undefined,
           );
         const totalFiatBalance = sumDecimals(
           currentValue.nativeFiatValue,