feat: cross chain aggregated balance

privacy-snapshot.json

@@ -52,12 +52,13 @@
   "security-alerts.api.cx.metamask.io",
   "security-alerts.dev-api.cx.metamask.io",
   "sentry.io",
+  "sepolia.infura.io",
   "snaps.metamask.io",
   "sourcify.dev",
   "start.metamask.io",
   "static.cx.metamask.io",
-  "support.metamask.io",
   "support.metamask-institutional.io",
+  "support.metamask.io",
   "swap.api.cx.metamask.io",
   "test.metamask-phishing.io",
   "token.api.cx.metamask.io",

test/data/mock-send-state.json

@@ -63,6 +63,7 @@
     "currentLocale": "en"
   },
   "metamask": {
+    "accountsByChainId": {},
     "ipfsGateway": "",
     "dismissSeedBackUpReminder": false,
     "usePhishDetect": true,
@@ -131,7 +132,8 @@
     "preferences": {
       "hideZeroBalanceTokens": false,
       "showFiatInTestnets": false,
-      "showTestNetworks": true
+      "showTestNetworks": true,
+      "tokenNetworkFilter": {}
     },
     "seedPhraseBackedUp": null,
     "ensResolutionsByAddress": {},

test/data/mock-state.json

@@ -379,6 +379,7 @@
       "showNativeTokenAsMainBalance": true,
       "showTestNetworks": true,
       "smartTransactionsOptInStatus": true,
+      "tokenNetworkFilter": {},
       "tokenSortConfig": {
         "key": "tokenFiatAmount",
         "order": "dsc",

test/e2e/default-fixture.js

@@ -225,6 +225,7 @@ function defaultFixture(inputChainId = CHAIN_IDS.LOCALHOST) {
             sortCallback: 'stringNumeric',
           },
           shouldShowAggregatedBalancePopover: true,
+          tokenNetworkFilter: {},
         },
         selectedAddress: '0x5cfe73b6021e818b776b421b1c4db2474086a7e1',
         theme: 'light',

test/e2e/tests/metrics/state-snapshots/errors-after-init-opt-in-background-state.json

@@ -237,6 +237,7 @@
       "redesignedConfirmationsEnabled": true,
       "redesignedTransactionsEnabled": "boolean",
       "tokenSortConfig": "object",
+      "tokenNetworkFilter": "object",
       "shouldShowAggregatedBalancePopover": "boolean"
     },
     "ipfsGateway": "string",

test/e2e/tests/metrics/state-snapshots/errors-after-init-opt-in-ui-state.json

@@ -38,7 +38,7 @@
       "redesignedConfirmationsEnabled": true,
       "redesignedTransactionsEnabled": "boolean",
       "tokenSortConfig": "object",
-      "showMultiRpcModal": "boolean",
+      "tokenNetworkFilter": "object",
       "shouldShowAggregatedBalancePopover": "boolean"
     },
     "firstTimeFlowType": "import",

test/e2e/tests/metrics/state-snapshots/errors-before-init-opt-in-background-state.json

@@ -119,7 +119,8 @@
         "showConfirmationAdvancedDetails": false,
         "tokenSortConfig": "object",
         "showMultiRpcModal": "boolean",
-        "shouldShowAggregatedBalancePopover": "boolean"
+        "shouldShowAggregatedBalancePopover": "boolean",
+        "tokenNetworkFilter": "object"
       },
       "selectedAddress": "string",
       "theme": "light",

test/e2e/tests/metrics/state-snapshots/errors-before-init-opt-in-ui-state.json

@@ -135,6 +135,7 @@
         "isRedesignedConfirmationsDeveloperEnabled": "boolean",
         "showConfirmationAdvancedDetails": false,
         "tokenSortConfig": "object",
+        "tokenNetworkFilter": "object",
         "showMultiRpcModal": "boolean",
         "shouldShowAggregatedBalancePopover": "boolean"
       },

test/e2e/tests/settings/account-token-list.spec.js

@@ -5,9 +5,38 @@ const {
   logInWithBalanceValidation,
   unlockWallet,
 } = require('../../helpers');
+const {
+  switchToNetworkFlow,
+} = require('../../page-objects/flows/network.flow');
 
+const { mockServerJsonRpc } = require('../ppom/mocks/mock-server-json-rpc');
 const FixtureBuilder = require('../../fixture-builder');
 
+const infuraSepoliaUrl =
+  'https://sepolia.infura.io/v3/00000000000000000000000000000000';
+
+async function mockInfura(mockServer) {
+  await mockServerJsonRpc(mockServer, [
+    ['eth_blockNumber'],
+    ['eth_getBlockByNumber'],
+  ]);
+  await mockServer
+    .forPost(infuraSepoliaUrl)
+    .withJsonBodyIncluding({ method: 'eth_getBalance' })
+    .thenCallback(() => ({
+      statusCode: 200,
+      json: {
+        jsonrpc: '2.0',
+        id: '6857940763865360',
+        result: '0x15af1d78b58c40000',
+      },
+    }));
+}
+
+async function mockInfuraResponses(mockServer) {
+  await mockInfura(mockServer);
+}
+
 describe('Settings', function () {
   it('Should match the value of token list item and account list item for eth conversion', async function () {
     await withFixtures(
@@ -49,6 +78,7 @@ describe('Settings', function () {
           .build(),
         ganacheOptions: defaultGanacheOptions,
         title: this.test.fullTitle(),
+        testSpecificMock: mockInfuraResponses,
       },
       async ({ driver }) => {
         await unlockWallet(driver);
@@ -63,6 +93,20 @@ describe('Settings', function () {
         );
         await driver.delay(1000);
         assert.equal(await tokenListAmount.getText(), '$42,500.00\nUSD');
+
+        // switch to Sepolia
+        // the account list item used to always show account.balance as long as its EVM network.
+        // Now we are showing aggregated fiat balance on non testnetworks; but if it is a testnetwork we will show account.balance.
+        // The current test was running initially on localhost
+        // which is not a testnetwork resulting in the code trying to calculate the aggregated total fiat balance which shows 0.00$
+        // If this test switches to mainnet then switches back to localhost; the test will pass because switching to mainnet
+        // will make the code calculate the aggregate fiat balance on mainnet+Linea mainnet and because this account in this test
+        // has 42,500.00 native Eth on mainnet then the aggregated total fiat would be 42,500.00. When the user switches back to localhost
+        // it will show the total that the test is expecting.
+
+        // I think we can slightly modify this test to switch to Sepolia network before checking the account List item value
+        await switchToNetworkFlow(driver, 'Sepolia');
+
         await driver.clickElement('[data-testid="account-menu-icon"]');
         const accountTokenValue = await driver.waitForSelector(
           '.multichain-account-list-item .multichain-account-list-item__asset',

test/integration/data/integration-init-state.json

@@ -784,7 +784,8 @@
     "smartTransactionsOptInStatus": true,
     "petnamesEnabled": false,
     "showConfirmationAdvancedDetails": false,
-    "showMultiRpcModal": false
+    "showMultiRpcModal": false,
+    "tokenNetworkFilter": {}
   },
   "preventPollingOnNetworkRestart": true,
   "previousAppVersion": "11.14.4",

ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react';
+import React, { useMemo, useRef, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { getCurrentNetwork, getPreferences } from '../../../../../selectors';
 import {
@@ -28,6 +28,7 @@ import {
   ENVIRONMENT_TYPE_POPUP,
 } from '../../../../../../shared/constants/app';
 import NetworkFilter from '../network-filter';
+import { TEST_CHAINS } from '../../../../../../shared/constants/network';
 
 type AssetListControlBarProps = {
   showTokensLinks?: boolean;
@@ -43,6 +44,9 @@ const AssetListControlBar = ({ showTokensLinks }: AssetListControlBarProps) => {
     useState(false);
 
   const allNetworksFilterShown = Object.keys(tokenNetworkFilter ?? {}).length;
+  const isTestNetwork = useMemo(() => {
+    return (TEST_CHAINS as string[]).includes(currentNetwork.chainId);
+  }, [currentNetwork.chainId, TEST_CHAINS]);
 
   const windowType = getEnvironmentType();
   const isFullScreen =
@@ -84,6 +88,7 @@ const AssetListControlBar = ({ showTokensLinks }: AssetListControlBarProps) => {
             className="asset-list-control-bar__button"
             onClick={toggleNetworkFilterPopover}
             size={ButtonBaseSize.Sm}
+            disabled={isTestNetwork}
             endIconName={IconName.ArrowDown}
             backgroundColor={
               isNetworkFilterPopoverOpen

ui/components/app/assets/asset-list/network-filter/network-filter.tsx

@@ -4,15 +4,14 @@ import { setTokenNetworkFilter } from '../../../../../store/actions';
 import {
   getCurrentChainId,
   getCurrentNetwork,
-  getIsTestnet,
   getPreferences,
   getSelectedInternalAccount,
   getShouldHideZeroBalanceTokens,
   getNetworkConfigurationsByChainId,
+  getChainIdsToPoll,
 } from '../../../../../selectors';
 import { useI18nContext } from '../../../../../hooks/useI18nContext';
 import { SelectableListItem } from '../sort-control/sort-control';
-import { useAccountTotalFiatBalance } from '../../../../../hooks/useAccountTotalFiatBalance';
 import { Text } from '../../../../component-library/text/text';
 import {
   Display,
@@ -24,6 +23,8 @@ import { Box } from '../../../../component-library/box/box';
 import { AvatarNetwork } from '../../../../component-library';
 import UserPreferencedCurrencyDisplay from '../../../user-preferenced-currency-display';
 import { CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP } from '../../../../../../shared/constants/network';
+import { useGetFormattedTokensPerChain } from '../../../../../hooks/useGetFormattedTokensPerChain';
+import { useAccountTotalCrossChainFiatBalance } from '../../../../../hooks/useAccountTotalCrossChainFiatBalance';
 
 type SortControlProps = {
   handleClose: () => void;
@@ -36,15 +37,35 @@ const NetworkFilter = ({ handleClose }: SortControlProps) => {
   const selectedAccount = useSelector(getSelectedInternalAccount);
   const currentNetwork = useSelector(getCurrentNetwork);
   const allNetworks = useSelector(getNetworkConfigurationsByChainId);
-  const isTestnet = useSelector(getIsTestnet);
-  const { tokenNetworkFilter, showNativeTokenAsMainBalance } =
-    useSelector(getPreferences);
+  const { tokenNetworkFilter } = useSelector(getPreferences);
   const shouldHideZeroBalanceTokens = useSelector(
     getShouldHideZeroBalanceTokens,
   );
-
+  const allChainIDs = useSelector(getChainIdsToPoll);
+  const { formattedTokensWithBalancesPerChain } = useGetFormattedTokensPerChain(
+    selectedAccount,
+    shouldHideZeroBalanceTokens,
+    true, // true to get formattedTokensWithBalancesPerChain for the current chain
+    allChainIDs,
+  );
   const { totalFiatBalance: selectedAccountBalance } =
-    useAccountTotalFiatBalance(selectedAccount, shouldHideZeroBalanceTokens);
+    useAccountTotalCrossChainFiatBalance(
+      selectedAccount,
+      formattedTokensWithBalancesPerChain,
+    );
+
+  const { formattedTokensWithBalancesPerChain: formattedTokensForAllNetworks } =
+    useGetFormattedTokensPerChain(
+      selectedAccount,
+      shouldHideZeroBalanceTokens,
+      false, // false to get the value for all networks
+      allChainIDs,
+    );
+  const { totalFiatBalance: selectedAccountBalanceForAllNetworks } =
+    useAccountTotalCrossChainFiatBalance(
+      selectedAccount,
+      formattedTokensForAllNetworks,
+    );
 
   // TODO: fetch balances across networks
   // const multiNetworkAccountBalance = useMultichainAccountBalance()
@@ -78,7 +99,15 @@ const NetworkFilter = ({ handleClose }: SortControlProps) => {
               color={TextColor.textDefault}
             >
               {/* TODO: Should query cross chain account balance */}
-              $1,000.00
+
+              <UserPreferencedCurrencyDisplay
+                value={selectedAccountBalanceForAllNetworks}
+                type="PRIMARY"
+                ethNumberOfDecimals={4}
+                hideTitle
+                showFiat
+                isAggregatedFiatOverviewBalance
+              />
             </Text>
           </Box>
           <Box display={Display.Flex}>
@@ -120,16 +149,19 @@ const NetworkFilter = ({ handleClose }: SortControlProps) => {
             >
               {t('currentNetwork')}
             </Text>
-            <UserPreferencedCurrencyDisplay
-              value={selectedAccountBalance}
-              type="PRIMARY"
-              ethNumberOfDecimals={4}
-              hideTitle
-              shouldCheckShowNativeToken
-              isAggregatedFiatOverviewBalance={
-                !showNativeTokenAsMainBalance && !isTestnet
-              }
-            />
+            <Text
+              variant={TextVariant.bodySmMedium}
+              color={TextColor.textAlternative}
+            >
+              <UserPreferencedCurrencyDisplay
+                value={selectedAccountBalance}
+                type="PRIMARY"
+                ethNumberOfDecimals={4}
+                hideTitle
+                showFiat
+                isAggregatedFiatOverviewBalance
+              />
+            </Text>
           </Box>
           <AvatarNetwork
             name="Current"

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

@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AggregatedPercentageOverviewCrossChains render renders correctly 1`] = `
+<div>
+  <div
+    class="mm-box mm-box--display-flex"
+  >
+    <p
+      class="mm-box mm-text mm-text--body-md-medium mm-text--ellipsis mm-box--color-success-default"
+      data-testid="aggregated-value-change"
+      style="white-space: pre;"
+    >
+      +$0.22 
+    </p>
+    <p
+      class="mm-box mm-text mm-text--body-md-medium mm-text--ellipsis mm-box--color-success-default"
+      data-testid="aggregated-percentage-change"
+    >
+      (+0.08%)
+    </p>
+  </div>
+</div>
+`;