feat: Aggregated multichain balance (Flask)

ui/components/app/wallet-overview/coin-overview.tsx

@@ -77,6 +77,7 @@ import { useAccountTotalCrossChainFiatBalance } from '../../../hooks/useAccountT
 
 import { useGetFormattedTokensPerChain } from '../../../hooks/useGetFormattedTokensPerChain';
 import { useMultichainSelector } from '../../../hooks/useMultichainSelector';
+import { AggregatedBalance } from '../../ui/aggregated-balance/aggregated-balance';
 import WalletOverview from './wallet-overview';
 import CoinButtons from './coin-buttons';
 import { AggregatedPercentageOverview } from './aggregated-percentage-overview';
@@ -99,6 +100,92 @@ export type CoinOverviewProps = {
   isSigningEnabled: boolean;
 };
 
+export const LegacyAggregatedBalance = ({
+  classPrefix,
+  account,
+  balance,
+  balanceIsCached,
+  handleSensitiveToggle,
+}: {
+  classPrefix: string;
+  account: InternalAccount;
+  balance: string;
+  balanceIsCached: boolean;
+  handleSensitiveToggle: () => void;
+}) => {
+  const isTokenNetworkFilterEqualCurrentNetwork = useSelector(
+    getIsTokenNetworkFilterEqualCurrentNetwork,
+  );
+  const shouldHideZeroBalanceTokens = useSelector(
+    getShouldHideZeroBalanceTokens,
+  );
+  const allChainIDs = useSelector(getChainIdsToPoll) as string[];
+  const shouldShowFiat = useMultichainSelector(
+    getMultichainShouldShowFiat,
+    account,
+  );
+  const { privacyMode, showNativeTokenAsMainBalance } =
+    useSelector(getPreferences);
+  const isTestnet = useSelector(getIsTestnet);
+
+  const { formattedTokensWithBalancesPerChain } = useGetFormattedTokensPerChain(
+    account,
+    shouldHideZeroBalanceTokens,
+    isTokenNetworkFilterEqualCurrentNetwork,
+    allChainIDs,
+  );
+
+  const { totalFiatBalance } = useAccountTotalCrossChainFiatBalance(
+    account,
+    formattedTokensWithBalancesPerChain,
+  );
+
+  const isNotAggregatedFiatBalance =
+    !shouldShowFiat || showNativeTokenAsMainBalance || isTestnet;
+
+  let balanceToDisplay;
+  if (isNotAggregatedFiatBalance) {
+    balanceToDisplay = balance;
+  } else {
+    balanceToDisplay = totalFiatBalance;
+  }
+
+  if (!balanceToDisplay) {
+    return <Spinner className="loading-overlay__spinner" />;
+  }
+  return (
+    <>
+      <UserPreferencedCurrencyDisplay
+        style={{ display: 'contents' }}
+        account={account}
+        className={classnames(`${classPrefix}-overview__primary-balance`, {
+          [`${classPrefix}-overview__cached-balance`]: balanceIsCached,
+        })}
+        data-testid={`${classPrefix}-overview__primary-currency`}
+        value={balanceToDisplay}
+        type={PRIMARY}
+        ethNumberOfDecimals={4}
+        hideTitle
+        shouldCheckShowNativeToken
+        isAggregatedFiatOverviewBalance={
+          !showNativeTokenAsMainBalance && !isTestnet && shouldShowFiat
+        }
+        privacyMode={privacyMode}
+      />
+      <ButtonIcon
+        color={IconColor.iconAlternative}
+        marginLeft={2}
+        size={ButtonIconSize.Md}
+        onClick={handleSensitiveToggle}
+        iconName={privacyMode ? IconName.EyeSlash : IconName.Eye}
+        justifyContent={JustifyContent.center}
+        ariaLabel="Sensitive toggle"
+        data-testid="sensitive-toggle"
+      />
+    </>
+  );
+};
+
 export const CoinOverview = ({
   account,
   balance,
@@ -149,36 +236,7 @@ export const CoinOverview = ({
     getIsTokenNetworkFilterEqualCurrentNetwork,
   );
 
-  const shouldHideZeroBalanceTokens = useSelector(
-    getShouldHideZeroBalanceTokens,
-  );
-  const allChainIDs = useSelector(getChainIdsToPoll);
-  const { formattedTokensWithBalancesPerChain } = useGetFormattedTokensPerChain(
-    account,
-    shouldHideZeroBalanceTokens,
-    isTokenNetworkFilterEqualCurrentNetwork,
-    allChainIDs,
-  );
-  const { totalFiatBalance } = useAccountTotalCrossChainFiatBalance(
-    account,
-    formattedTokensWithBalancesPerChain,
-  );
-
-  const shouldShowFiat = useMultichainSelector(
-    getMultichainShouldShowFiat,
-    account,
-  );
-
   const isEvm = useSelector(getMultichainIsEvm);
-  const isNotAggregatedFiatBalance =
-    !shouldShowFiat || showNativeTokenAsMainBalance || isTestnet || !isEvm;
-
-  let balanceToDisplay;
-  if (isNotAggregatedFiatBalance) {
-    balanceToDisplay = balance;
-  } else {
-    balanceToDisplay = totalFiatBalance;
-  }
 
   const tokensMarketData = useSelector(getTokensMarketData);
   const [isOpen, setIsOpen] = useState(true);
@@ -296,44 +354,20 @@ export const CoinOverview = ({
               onMouseEnter={handleMouseEnter}
               ref={setBoxRef}
             >
-              {balanceToDisplay ? (
-                <>
-                  <UserPreferencedCurrencyDisplay
-                    style={{ display: 'contents' }}
-                    account={account}
-                    className={classnames(
-                      `${classPrefix}-overview__primary-balance`,
-                      {
-                        [`${classPrefix}-overview__cached-balance`]:
-                          balanceIsCached,
-                      },
-                    )}
-                    data-testid={`${classPrefix}-overview__primary-currency`}
-                    value={balanceToDisplay}
-                    type={PRIMARY}
-                    ethNumberOfDecimals={4}
-                    hideTitle
-                    shouldCheckShowNativeToken
-                    isAggregatedFiatOverviewBalance={
-                      !showNativeTokenAsMainBalance &&
-                      !isTestnet &&
-                      shouldShowFiat
-                    }
-                    privacyMode={privacyMode}
-                  />
-                  <ButtonIcon
-                    color={IconColor.iconAlternative}
-                    marginLeft={2}
-                    size={ButtonIconSize.Md}
-                    onClick={handleSensitiveToggle}
-                    iconName={privacyMode ? IconName.EyeSlash : IconName.Eye}
-                    justifyContent={JustifyContent.center}
-                    ariaLabel="Sensitive toggle"
-                    data-testid="sensitive-toggle"
-                  />
-                </>
+              {isEvm ? (
+                <LegacyAggregatedBalance
+                  classPrefix={classPrefix}
+                  account={account}
+                  balance={balance}
+                  balanceIsCached={balanceIsCached}
+                  handleSensitiveToggle={handleSensitiveToggle}
+                />
               ) : (
-                <Spinner className="loading-overlay__spinner" />
+                <AggregatedBalance
+                  classPrefix={classPrefix}
+                  balanceIsCached={balanceIsCached}
+                  handleSensitiveToggle={handleSensitiveToggle}
+                />
               )}
               {balanceIsCached && (
                 <span className={`${classPrefix}-overview__cached-star`}>

ui/components/app/wallet-overview/non-evm-overview.test.tsx

@@ -86,6 +86,9 @@ const mockBuyableChainsWithBtc = [...mockBuyableChainsWithoutBtc, mockBtcChain];
 
 const mockMetamaskStore = {
   ...mockState.metamask,
+  accountsAssets: {
+    [mockNonEvmAccount.id]: [MultichainNativeAssets.BITCOIN],
+  },
   internalAccounts: {
     accounts: {
       [mockNonEvmAccount.id]: mockNonEvmAccount,
@@ -103,7 +106,7 @@ const mockMetamaskStore = {
   },
   // (Multichain) RatesController
   fiatCurrency: 'usd',
-  rates: {
+  conversionRates: {
     [Cryptocurrency.Btc]: {
       conversionRate: '1.000',
       conversionDate: 0,
@@ -125,6 +128,9 @@ const mockRampsStore = {
 function getStore(state?: Record<string, unknown>) {
   return configureMockStore([thunk])({
     metamask: mockMetamaskStore,
+    localeMessages: {
+      currentLocale: 'en',
+    },
     ramps: mockRampsStore,
     ...state,
   });
@@ -178,7 +184,9 @@ describe('NonEvmOverview', () => {
           preferences: {
             showNativeTokenAsMainBalance: false,
             tokenNetworkFilter: {},
+            privacyMode: false,
           },
+          currentCurrency: 'usd',
           conversionRates: {
             [MultichainNativeAssets.BITCOIN]: {
               rate: '1',
@@ -201,6 +209,9 @@ describe('NonEvmOverview', () => {
           ...mockMetamaskStore,
           // The balances won't be available
           balances: {},
+          accountsAssets: {
+            [mockNonEvmAccount.id]: [],
+          },
         },
       }),
     );

ui/components/ui/aggregated-balance/aggregated-balance.tsx

@@ -0,0 +1,124 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import classnames from 'classnames';
+import {
+  AlignItems,
+  Display,
+  FlexWrap,
+  IconColor,
+  JustifyContent,
+  TextVariant,
+} from '../../../helpers/constants/design-system';
+import {
+  Box,
+  ButtonIcon,
+  ButtonIconSize,
+  IconName,
+  SensitiveText,
+} from '../../component-library';
+import {
+  getCurrentCurrency,
+  getTokenBalances,
+} from '../../../ducks/metamask/metamask';
+import {
+  getAccountAssets,
+  getMultichainAggregatedBalance,
+  getMultichainNativeTokenBalance,
+} from '../../../selectors/assets';
+import { getPreferences, getSelectedInternalAccount } from '../../../selectors';
+import { formatWithThreshold } from '../../app/assets/util/formatWithThreshold';
+import { getIntlLocale } from '../../../ducks/locale/locale';
+import Spinner from '../spinner';
+
+export const AggregatedBalance = ({
+  classPrefix,
+  balanceIsCached,
+  handleSensitiveToggle,
+}: {
+  classPrefix: string;
+  balanceIsCached: boolean;
+  handleSensitiveToggle: () => void;
+}) => {
+  const { privacyMode, showNativeTokenAsMainBalance } =
+    useSelector(getPreferences);
+  const locale = useSelector(getIntlLocale);
+  const balances = useSelector(getTokenBalances);
+  const assets = useSelector(getAccountAssets);
+  const selectedAccount = useSelector(getSelectedInternalAccount);
+  const currentCurrency = useSelector(getCurrentCurrency);
+  const multichainAggregatedBalance = useSelector((state) =>
+    getMultichainAggregatedBalance(state, selectedAccount),
+  );
+  const multichainNativeTokenBalance = useSelector((state) =>
+    getMultichainNativeTokenBalance(state, selectedAccount),
+  );
+
+  const formattedFiatDisplay = formatWithThreshold(
+    multichainAggregatedBalance,
+    0.01,
+    locale,
+    {
+      style: 'currency',
+      currency: currentCurrency.toUpperCase(),
+    },
+  );
+
+  const formattedTokenDisplay = formatWithThreshold(
+    multichainNativeTokenBalance.amount,
+    0.00001,
+    locale,
+    {
+      minimumFractionDigits: 5,
+      maximumFractionDigits: 5,
+    },
+  ).replace(/(\.0+|(?<=\.\d+)0+)$/u, ''); // strip trailing zeros
+
+  if (!balances || !assets[selectedAccount.id]?.length) {
+    return <Spinner className="loading-overlay__spinner" />;
+  }
+
+  return (
+    <>
+      <Box
+        className={classnames(`${classPrefix}-overview__primary-balance`, {
+          [`${classPrefix}-overview__cached-balance`]: balanceIsCached,
+        })}
+        data-testid={`${classPrefix}-overview__primary-currency`}
+        display={Display.Flex}
+        alignItems={AlignItems.center}
+        flexWrap={FlexWrap.Wrap}
+      >
+        <SensitiveText
+          ellipsis
+          variant={TextVariant.inherit}
+          isHidden={privacyMode}
+          data-testid="account-value-and-suffix"
+        >
+          {showNativeTokenAsMainBalance
+            ? formattedTokenDisplay
+            : formattedFiatDisplay}
+        </SensitiveText>
+        <SensitiveText
+          marginInlineStart={privacyMode ? 0 : 1}
+          variant={TextVariant.inherit}
+          isHidden={privacyMode}
+        >
+          {showNativeTokenAsMainBalance
+            ? multichainNativeTokenBalance.unit
+            : currentCurrency.toUpperCase()}
+        </SensitiveText>
+
+        <ButtonIcon
+          color={IconColor.iconAlternative}
+          marginLeft={2}
+          size={ButtonIconSize.Md}
+          onClick={handleSensitiveToggle}
+          iconName={privacyMode ? IconName.EyeSlash : IconName.Eye}
+          justifyContent={JustifyContent.center}
+          ariaLabel="Sensitive toggle"
+          data-testid="sensitive-toggle"
+        />
+      </Box>
+    </>
+  );
+};

ui/pages/routes/routes.component.test.js

@@ -277,6 +277,9 @@ describe('toast display', () => {
         },
         selectedAccount: selectedAccountId ?? mockAccount.id,
       },
+      accountsAssets: {
+        [selectedAccountId ?? mockAccount.id]: [],
+      },
       subjects: {
         [mockOrigin]: {
           permissions: {