feat(4057): replace asset avatars with network avatars

app/component-library/components/Avatars/AvatarGroup/AvatarGroup.styles.ts

@@ -34,6 +34,12 @@ const styleSheet = (params: {
     textStyle: {
       marginLeft: OVERFLOWTEXTMARGIN_BY_AVATARSIZE[size],
     },
+    avatarGroup: {
+      borderRadius: 4,
+      borderWidth: 2,
+      height: 16,
+      width: 16,
+    },
   });
 };
 

app/component-library/components/Avatars/AvatarGroup/AvatarGroup.test.tsx

@@ -72,4 +72,82 @@ describe('AvatarGroup', () => {
       spaceBetweenAvatars,
     );
   });
+  it('should render the last maxStackedAvatars avatars when renderOverflowCounter is false', () => {
+    const avatarPropsList = [
+      ...SAMPLE_AVATARGROUP_PROPS.avatarPropsList,
+
+      {
+        variant: 'Account',
+        type: 'JazzIcon',
+        accountAddress: '0xLastAddress1',
+      },
+      {
+        variant: 'Account',
+        type: 'JazzIcon',
+        accountAddress: '0xLastAddress2',
+      },
+      {
+        variant: 'Account',
+        type: 'JazzIcon',
+        accountAddress: '0xLastAddress3',
+      },
+    ];
+
+    const maxStackedAvatars = 4;
+
+    const { getAllByTestId, queryByTestId } = renderComponent({
+      avatarPropsList,
+      maxStackedAvatars,
+      renderOverflowCounter: false,
+    });
+
+    const overflowCounter = queryByTestId(AVATARGROUP_OVERFLOWCOUNTER_TESTID);
+    expect(overflowCounter).toBeNull();
+
+    const avatars = getAllByTestId(AVATARGROUP_AVATAR_TESTID);
+
+    expect(avatars.length).toBe(maxStackedAvatars);
+    const lastAvatarProps = avatarPropsList.slice(-maxStackedAvatars);
+
+    expect(avatars.length).toBe(lastAvatarProps.length);
+  });
+
+  it('should render the first maxStackedAvatars avatars when renderOverflowCounter is true', () => {
+    const avatarPropsList = [
+      {
+        variant: 'Account',
+        type: 'JazzIcon',
+        accountAddress: '0xFirstAddress1',
+      },
+      {
+        variant: 'Account',
+        type: 'JazzIcon',
+        accountAddress: '0xFirstAddress2',
+      },
+      {
+        variant: 'Account',
+        type: 'JazzIcon',
+        accountAddress: '0xFirstAddress3',
+      },
+      ...SAMPLE_AVATARGROUP_PROPS.avatarPropsList,
+    ];
+
+    const maxStackedAvatars = 3;
+
+    const { getAllByTestId, getByTestId } = renderComponent({
+      avatarPropsList,
+      maxStackedAvatars,
+      renderOverflowCounter: true,
+    });
+
+    const overflowCounter = getByTestId(AVATARGROUP_OVERFLOWCOUNTER_TESTID);
+    expect(overflowCounter).toBeDefined();
+
+    const avatars = getAllByTestId(AVATARGROUP_AVATAR_TESTID);
+
+    expect(avatars.length).toBe(maxStackedAvatars);
+
+    const overflowCounterNumber = avatarPropsList.length - maxStackedAvatars;
+    expect(overflowCounter.props.children).toBe(`+${overflowCounterNumber}`);
+  });
 });

app/component-library/components/Avatars/AvatarGroup/AvatarGroup.tsx

@@ -27,51 +27,55 @@ const AvatarGroup = ({
   maxStackedAvatars = DEFAULT_AVATARGROUP_MAXSTACKEDAVATARS,
   includesBorder = true,
   spaceBetweenAvatars,
+  renderOverflowCounter = true,
   style,
 }: AvatarGroupProps) => {
   const overflowCounter = avatarPropsList.length - maxStackedAvatars;
   const avatarNegativeSpacing =
     spaceBetweenAvatars || SPACEBETWEENAVATARS_BY_AVATARSIZE[size];
-  const shouldRenderOverflowCounter = overflowCounter > 0;
-
+  const doesOverflowCountExist = overflowCounter > 0;
   const { styles } = useStyles(styleSheet, {
     size,
     style,
   });
 
-  const renderAvatarList = useCallback(
-    () =>
-      avatarPropsList.slice(0, maxStackedAvatars).map((avatarProps, index) => {
-        const marginLeft = index === 0 ? 0 : avatarNegativeSpacing;
+  const renderAvatarList = useCallback(() => {
+    const avatarsToRender = renderOverflowCounter
+      ? avatarPropsList.slice(0, maxStackedAvatars)
+      : avatarPropsList.slice(-maxStackedAvatars);
+    return avatarsToRender.map((avatarProps, index) => {
+      const marginLeft = index === 0 ? 0 : avatarNegativeSpacing;
 
-        return (
-          <View
-            key={`avatar-${index}`}
-            testID={`${AVATARGROUP_AVATAR_CONTAINER_TESTID}-${index}`}
-            style={{ marginLeft }}
-          >
-            <Avatar
-              {...avatarProps}
-              size={size}
-              includesBorder={includesBorder}
-              testID={AVATARGROUP_AVATAR_TESTID}
-            />
-          </View>
-        );
-      }),
-    [
-      avatarPropsList,
-      avatarNegativeSpacing,
-      includesBorder,
-      maxStackedAvatars,
-      size,
-    ],
-  );
+      return (
+        <View
+          key={`avatar-${index}`}
+          testID={`${AVATARGROUP_AVATAR_CONTAINER_TESTID}-${index}`}
+          style={{ marginLeft }}
+        >
+          <Avatar
+            {...avatarProps}
+            size={size}
+            includesBorder={includesBorder}
+            testID={AVATARGROUP_AVATAR_TESTID}
+            style={styles.avatarGroup}
+          />
+        </View>
+      );
+    });
+  }, [
+    avatarPropsList,
+    avatarNegativeSpacing,
+    includesBorder,
+    maxStackedAvatars,
+    renderOverflowCounter,
+    size,
+    styles.avatarGroup,
+  ]);
 
   return (
     <View style={styles.base}>
       {renderAvatarList()}
-      {shouldRenderOverflowCounter && (
+      {renderOverflowCounter && doesOverflowCountExist && (
         <Text
           variant={TEXTVARIANT_BY_AVATARSIZE[size]}
           color={DEFAULT_AVATARGROUP_COUNTER_TEXTCOLOR}

app/component-library/components/Avatars/AvatarGroup/AvatarGroup.types.ts

@@ -62,6 +62,11 @@ export interface AvatarGroupProps extends ViewProps {
    * - Please refer to the constants file for the mappings.
    */
   spaceBetweenAvatars?: number;
+  /**
+   * Optional boolean to render the overflow counter.
+   * @default true
+   */
+  renderOverflowCounter?: boolean;
 }
 export interface AvatarGroupStyleSheetVars
   extends Pick<AvatarGroupProps, 'style'> {

app/component-library/components/Avatars/AvatarGroup/__snapshots__/AvatarGroup.test.tsx.snap

@@ -22,7 +22,8 @@ exports[`AvatarGroup should render AvatarGroup component 1`] = `
         {
           "alignItems": "center",
           "backgroundColor": "#ffffff",
-          "borderRadius": 8,
+          "borderRadius": 4,
+          "borderWidth": 2,
           "height": 16,
           "justifyContent": "center",
           "overflow": "hidden",
@@ -57,7 +58,8 @@ exports[`AvatarGroup should render AvatarGroup component 1`] = `
       style={
         {
           "backgroundColor": "#ffffff",
-          "borderRadius": 8,
+          "borderRadius": 4,
+          "borderWidth": 2,
           "height": 16,
           "overflow": "hidden",
           "width": 16,
@@ -96,7 +98,8 @@ exports[`AvatarGroup should render AvatarGroup component 1`] = `
       style={
         {
           "backgroundColor": "#ffffff",
-          "borderRadius": 8,
+          "borderRadius": 4,
+          "borderWidth": 2,
           "height": 16,
           "overflow": "hidden",
           "width": 16,
@@ -135,7 +138,8 @@ exports[`AvatarGroup should render AvatarGroup component 1`] = `
       style={
         {
           "backgroundColor": "#ffffff",
-          "borderRadius": 8,
+          "borderRadius": 4,
+          "borderWidth": 2,
           "height": 16,
           "overflow": "hidden",
           "width": 16,

app/components/UI/AccountSelectorList/AccountSelector.test.tsx

@@ -17,6 +17,7 @@ import {
 import { mockNetworkState } from '../../../util/test/network';
 import { CHAIN_IDS } from '@metamask/transaction-controller';
 import { AccountSelectorListProps } from './AccountSelectorList.types';
+import { AVATARGROUP_AVATAR_CONTAINER_TESTID } from '../../../component-library/components/Avatars/AvatarGroup/AvatarGroup.constants';
 
 // eslint-disable-next-line import/no-namespace
 import * as Utils from '../../hooks/useAccounts/utils';
@@ -159,12 +160,10 @@ describe('AccountSelectorList', () => {
         `${AccountListBottomSheetSelectorsIDs.ACCOUNT_BALANCE_BY_ADDRESS_TEST_ID}-${PERSONAL_ACCOUNT}`,
       );
 
-      expect(within(businessAccountItem).getByText(regex.eth(1))).toBeDefined();
       expect(
         within(businessAccountItem).getByText(regex.usd(3200)),
       ).toBeDefined();
 
-      expect(within(personalAccountItem).getByText(regex.eth(2))).toBeDefined();
       expect(
         within(personalAccountItem).getByText(regex.usd(6400)),
       ).toBeDefined();
@@ -199,7 +198,6 @@ describe('AccountSelectorList', () => {
         `${AccountListBottomSheetSelectorsIDs.ACCOUNT_BALANCE_BY_ADDRESS_TEST_ID}-${BUSINESS_ACCOUNT}`,
       );
 
-      expect(within(businessAccountItem).getByText(regex.eth(1))).toBeDefined();
       expect(
         within(businessAccountItem).getByText(regex.usd(3200)),
       ).toBeDefined();
@@ -267,33 +265,21 @@ describe('AccountSelectorList', () => {
         `${AccountListBottomSheetSelectorsIDs.ACCOUNT_BALANCE_BY_ADDRESS_TEST_ID}-${BUSINESS_ACCOUNT}`,
       );
 
-      expect(within(businessAccountItem).getByText(regex.eth(1))).toBeDefined();
       expect(
         within(businessAccountItem).getByText(regex.usd(3200)),
       ).toBeDefined();
 
       expect(within(businessAccountItem).queryByText('••••••')).toBeNull();
     });
   });
-  it('Text is hidden when privacy mode is on', async () => {
-    const state = {
-      ...initialState,
-      privacyMode: true,
-    };
-
-    const { queryByTestId } = renderComponent(state);
+  it('should render AvatarGroup', async () => {
+    const { queryByTestId } = renderComponent(initialState);
 
     await waitFor(() => {
-      const businessAccountItem = queryByTestId(
-        `${AccountListBottomSheetSelectorsIDs.ACCOUNT_BALANCE_BY_ADDRESS_TEST_ID}-${BUSINESS_ACCOUNT}`,
+      const avatarGroup = queryByTestId(
+        `${AVATARGROUP_AVATAR_CONTAINER_TESTID}-0`,
       );
-
-      expect(within(businessAccountItem).queryByText(regex.eth(1))).toBeNull();
-      expect(
-        within(businessAccountItem).queryByText(regex.usd(3200)),
-      ).toBeNull();
-
-      expect(within(businessAccountItem).getByText('••••••')).toBeDefined();
+      expect(avatarGroup).toBeDefined();
     });
   });
 });

app/components/UI/AccountSelectorList/AccountSelectorList.styles.ts

@@ -15,7 +15,12 @@ const styleSheet = () =>
       alignItems: 'flex-end',
       flexDirection: 'column',
     },
-    balanceLabel: { textAlign: 'right' },
+    balanceLabel: {
+      textAlign: 'right',
+    },
+    networkTokensContainer: {
+      marginTop: 4,
+    },
   });
 
 export default styleSheet;

app/components/UI/AccountSelectorList/AccountSelectorList.tsx

@@ -1,6 +1,12 @@
 // Third party dependencies.
-import React, { useCallback, useRef } from 'react';
-import { Alert, ListRenderItem, View, ViewStyle } from 'react-native';
+import React, { useCallback, useRef, useMemo } from 'react';
+import {
+  Alert,
+  ListRenderItem,
+  View,
+  ViewStyle,
+  ImageSourcePropType,
+} from 'react-native';
 import { FlatList } from 'react-native-gesture-handler';
 import { useSelector } from 'react-redux';
 import { useNavigation } from '@react-navigation/native';
@@ -13,11 +19,11 @@ import Cell, {
 } from '../../../component-library/components/Cells/Cell';
 import { InternalAccount } from '@metamask/keyring-internal-api';
 import { useStyles } from '../../../component-library/hooks';
-import { TextColor } from '../../../component-library/components/Texts/Text';
 import SensitiveText, {
   SensitiveTextLength,
 } from '../../../component-library/components/Texts/SensitiveText';
 import AvatarGroup from '../../../component-library/components/Avatars/AvatarGroup';
+import { AvatarNetworkProps } from '../../../component-library/components/Avatars/Avatar/variants/AvatarNetwork/AvatarNetwork.types';
 import {
   formatAddress,
   getLabelTextByAddress,
@@ -37,6 +43,15 @@ import { AccountSelectorListProps } from './AccountSelectorList.types';
 import styleSheet from './AccountSelectorList.styles';
 import { AccountListBottomSheetSelectorsIDs } from '../../../../e2e/selectors/wallet/AccountListBottomSheet.selectors';
 import { WalletViewSelectorsIDs } from '../../../../e2e/selectors/wallet/WalletView.selectors';
+import { getNetworkImageSource } from '../../../util/networks';
+import { PopularList } from '../../../util/networks/customNetworks';
+import { useMultiAccountChainBalances } from '../../hooks/useMultiAccountChainBalances';
+interface AvatarNetworksInfoProps extends AvatarNetworkProps {
+  name: string;
+  imageSource: ImageSourcePropType;
+  chainId: string;
+  totalFiatBalance: number | undefined;
+}
 
 const AccountSelectorList = ({
   onSelectAccount,
@@ -71,13 +86,19 @@ const AccountSelectorList = ({
   );
 
   const internalAccounts = useSelector(selectInternalAccounts);
+
+  const multichainBalances = useMultiAccountChainBalances();
   const getKeyExtractor = ({ address }: Account) => address;
 
   const renderAccountBalances = useCallback(
-    ({ fiatBalance, tokens }: Assets, address: string) => {
+    (
+      { fiatBalance }: Assets,
+      address: string,
+      networksInfo: AvatarNetworksInfoProps[],
+    ) => {
       const fiatBalanceStrSplit = fiatBalance.split('\n');
       const fiatBalanceAmount = fiatBalanceStrSplit[0] || '';
-      const tokenTicker = fiatBalanceStrSplit[1] || '';
+
       return (
         <View
           style={styles.balancesContainer}
@@ -90,28 +111,68 @@ const AccountSelectorList = ({
           >
             {fiatBalanceAmount}
           </SensitiveText>
-          <SensitiveText
-            length={SensitiveTextLength.Short}
-            style={styles.balanceLabel}
-            isHidden={privacyMode}
-            color={privacyMode ? TextColor.Alternative : TextColor.Default}
-          >
-            {tokenTicker}
-          </SensitiveText>
-          {tokens && (
-            <AvatarGroup
-              avatarPropsList={tokens.map((tokenObj) => ({
-                ...tokenObj,
-                variant: AvatarVariant.Token,
-              }))}
-            />
+
+          {networksInfo && (
+            <View style={styles.networkTokensContainer}>
+              <AvatarGroup
+                avatarPropsList={networksInfo.map(
+                  (networkInfo: AvatarNetworksInfoProps, index: number) => ({
+                    ...networkInfo,
+                    variant: AvatarVariant.Network,
+                    imageSource: networkInfo.imageSource,
+                    testID: `avatar-group-${index}`,
+                  }),
+                )}
+                maxStackedAvatars={4}
+                renderOverflowCounter={false}
+              />
+            </View>
           )}
         </View>
       );
     },
-    [styles.balancesContainer, styles.balanceLabel, privacyMode],
+    [
+      styles.balancesContainer,
+      styles.balanceLabel,
+      styles.networkTokensContainer,
+      privacyMode,
+    ],
   );
 
+  const accountsWithNetworkInfo = useMemo(() => {
+    if (!accounts || !Array.isArray(accounts)) {
+      return [];
+    }
+
+    return accounts.map((account) => {
+      const accountBalances =
+        multichainBalances?.[account?.address?.toLowerCase()] || {};
+      const chainIds = Object.keys(accountBalances);
+
+      const networksInfo = chainIds
+        .map((chainId) => {
+          const networkBalanceInfo = accountBalances[chainId];
+          if (!networkBalanceInfo) return null;
+          const networkInfo = PopularList.find((n) => n.chainId === chainId);
+
+          return {
+            name: networkInfo?.nickname || `Chain ${chainId}`,
+            //@ts-expect-error - The utils/network file is still JS and this function expects a networkType, and should be optional
+            imageSource: getNetworkImageSource({
+              chainId: chainId.toString(),
+            }),
+            chainId,
+            totalFiatBalance: networkBalanceInfo?.totalFiatBalance ?? 0,
+          };
+        })
+        .filter((item): item is NonNullable<typeof item> => item !== null)
+        .filter((network) => network.totalFiatBalance > 0)
+        .sort((a, b) => a.totalFiatBalance - b.totalFiatBalance);
+
+      return { ...account, networksInfo };
+    });
+  }, [accounts, multichainBalances]);
+
   const onLongPress = useCallback(
     ({
       address,
@@ -193,9 +254,19 @@ const AccountSelectorList = ({
     [navigate, internalAccounts],
   );
 
-  const renderAccountItem: ListRenderItem<Account> = useCallback(
+  const renderAccountItem: ListRenderItem<
+    Account & { networksInfo: AvatarNetworksInfoProps[] }
+  > = useCallback(
     ({
-      item: { name, address, assets, type, isSelected, balanceError },
+      item: {
+        name,
+        address,
+        assets,
+        type,
+        isSelected,
+        balanceError,
+        networksInfo,
+      },
       index,
     }) => {
       const shortAddress = formatAddress(address, 'short');
@@ -256,7 +327,7 @@ const AccountSelectorList = ({
           }}
         >
           {renderRightAccessory?.(address, accountName) ||
-            (assets && renderAccountBalances(assets, address))}
+            (assets && renderAccountBalances(assets, address, networksInfo))}
         </Cell>
       );
     },
@@ -298,7 +369,7 @@ const AccountSelectorList = ({
     <FlatList
       ref={accountListRef}
       onContentSizeChange={onContentSizeChanged}
-      data={accounts}
+      data={accountsWithNetworkInfo}
       keyExtractor={getKeyExtractor}
       renderItem={renderAccountItem}
       // Increasing number of items at initial render fixes scroll issue.

app/components/UI/AccountSelectorList/__snapshots__/AccountSelector.test.tsx.snap

@@ -14,6 +14,7 @@ exports[`AccountSelectorList renders all accounts with balances 1`] = `
         "balanceError": undefined,
         "isSelected": true,
         "name": "Account 1",
+        "networksInfo": [],
         "type": "HD Key Tree",
         "yOffset": 0,
       },
@@ -26,6 +27,7 @@ exports[`AccountSelectorList renders all accounts with balances 1`] = `
         "balanceError": undefined,
         "isSelected": false,
         "name": "Account 2",
+        "networksInfo": [],
         "type": "HD Key Tree",
         "yOffset": 78,
       },
@@ -359,22 +361,22 @@ exports[`AccountSelectorList renders all accounts with balances 1`] = `
                     >
                       $3200.00
                     </Text>
-                    <Text
-                      accessibilityRole="text"
+                    <View
                       style={
                         {
-                          "color": "#141618",
-                          "fontFamily": "EuclidCircularB-Regular",
-                          "fontSize": 14,
-                          "fontWeight": "400",
-                          "letterSpacing": 0,
-                          "lineHeight": 22,
-                          "textAlign": "right",
+                          "marginTop": 4,
                         }
                       }
                     >
-                      1 ETH
-                    </Text>
+                      <View
+                        style={
+                          {
+                            "alignItems": "center",
+                            "flexDirection": "row",
+                          }
+                        }
+                      />
+                    </View>
                   </View>
                 </View>
               </View>
@@ -759,22 +761,22 @@ exports[`AccountSelectorList renders all accounts with balances 1`] = `
                     >
                       $6400.00
                     </Text>
-                    <Text
-                      accessibilityRole="text"
+                    <View
                       style={
                         {
-                          "color": "#141618",
-                          "fontFamily": "EuclidCircularB-Regular",
-                          "fontSize": 14,
-                          "fontWeight": "400",
-                          "letterSpacing": 0,
-                          "lineHeight": 22,
-                          "textAlign": "right",
+                          "marginTop": 4,
                         }
                       }
                     >
-                      2 ETH
-                    </Text>
+                      <View
+                        style={
+                          {
+                            "alignItems": "center",
+                            "flexDirection": "row",
+                          }
+                        }
+                      />
+                    </View>
                   </View>
                 </View>
               </View>
@@ -842,6 +844,7 @@ exports[`AccountSelectorList renders all accounts with right accessory 1`] = `
         "balanceError": undefined,
         "isSelected": true,
         "name": "Account 1",
+        "networksInfo": [],
         "type": "HD Key Tree",
         "yOffset": 0,
       },
@@ -854,6 +857,7 @@ exports[`AccountSelectorList renders all accounts with right accessory 1`] = `
         "balanceError": undefined,
         "isSelected": false,
         "name": "Account 2",
+        "networksInfo": [],
         "type": "HD Key Tree",
         "yOffset": 78,
       },
@@ -1570,6 +1574,7 @@ exports[`AccountSelectorList renders correctly 1`] = `
         "balanceError": undefined,
         "isSelected": true,
         "name": "Account 1",
+        "networksInfo": [],
         "type": "HD Key Tree",
         "yOffset": 0,
       },
@@ -1582,6 +1587,7 @@ exports[`AccountSelectorList renders correctly 1`] = `
         "balanceError": undefined,
         "isSelected": false,
         "name": "Account 2",
+        "networksInfo": [],
         "type": "HD Key Tree",
         "yOffset": 78,
       },
@@ -1915,22 +1921,22 @@ exports[`AccountSelectorList renders correctly 1`] = `
                     >
                       $3200.00
                     </Text>
-                    <Text
-                      accessibilityRole="text"
+                    <View
                       style={
                         {
-                          "color": "#141618",
-                          "fontFamily": "EuclidCircularB-Regular",
-                          "fontSize": 14,
-                          "fontWeight": "400",
-                          "letterSpacing": 0,
-                          "lineHeight": 22,
-                          "textAlign": "right",
+                          "marginTop": 4,
                         }
                       }
                     >
-                      1 ETH
-                    </Text>
+                      <View
+                        style={
+                          {
+                            "alignItems": "center",
+                            "flexDirection": "row",
+                          }
+                        }
+                      />
+                    </View>
                   </View>
                 </View>
               </View>
@@ -2315,22 +2321,22 @@ exports[`AccountSelectorList renders correctly 1`] = `
                     >
                       $6400.00
                     </Text>
-                    <Text
-                      accessibilityRole="text"
+                    <View
                       style={
                         {
-                          "color": "#141618",
-                          "fontFamily": "EuclidCircularB-Regular",
-                          "fontSize": 14,
-                          "fontWeight": "400",
-                          "letterSpacing": 0,
-                          "lineHeight": 22,
-                          "textAlign": "right",
+                          "marginTop": 4,
                         }
                       }
                     >
-                      2 ETH
-                    </Text>
+                      <View
+                        style={
+                          {
+                            "alignItems": "center",
+                            "flexDirection": "row",
+                          }
+                        }
+                      />
+                    </View>
                   </View>
                 </View>
               </View>
@@ -2398,6 +2404,7 @@ exports[`AccountSelectorList should render all accounts but only the balance for
         "balanceError": undefined,
         "isSelected": true,
         "name": "Account 1",
+        "networksInfo": [],
         "type": "HD Key Tree",
         "yOffset": 0,
       },
@@ -2407,6 +2414,7 @@ exports[`AccountSelectorList should render all accounts but only the balance for
         "balanceError": undefined,
         "isSelected": false,
         "name": "Account 2",
+        "networksInfo": [],
         "type": "HD Key Tree",
         "yOffset": 78,
       },
@@ -2624,22 +2632,22 @@ exports[`AccountSelectorList should render all accounts but only the balance for
                     >
                       $3200.00
                     </Text>
-                    <Text
-                      accessibilityRole="text"
+                    <View
                       style={
                         {
-                          "color": "#141618",
-                          "fontFamily": "EuclidCircularB-Regular",
-                          "fontSize": 14,
-                          "fontWeight": "400",
-                          "letterSpacing": 0,
-                          "lineHeight": 22,
-                          "textAlign": "right",
+                          "marginTop": 4,
                         }
                       }
                     >
-                      1 ETH
-                    </Text>
+                      <View
+                        style={
+                          {
+                            "alignItems": "center",
+                            "flexDirection": "row",
+                          }
+                        }
+                      />
+                    </View>
                   </View>
                 </View>
               </View>

app/components/Views/AccountConnect/AccountConnectMultiSelector/__snapshots__/AccountConnectMultiSelector.test.tsx.snap

@@ -189,6 +189,7 @@ exports[`AccountConnectMultiSelector renders correctly 1`] = `
             "balance": "0x1",
             "isSelected": false,
             "name": "Account 1",
+            "networksInfo": [],
             "type": "Simple Key Pair",
             "yOffset": 0,
           },
@@ -197,6 +198,7 @@ exports[`AccountConnectMultiSelector renders correctly 1`] = `
             "balance": "0x2",
             "isSelected": false,
             "name": "Account 2",
+            "networksInfo": [],
             "type": "Simple Key Pair",
             "yOffset": 0,
           },

app/components/Views/AccountConnect/__snapshots__/AccountConnect.test.tsx.snap

@@ -550,8 +550,8 @@ exports[`AccountConnect renders correctly 1`] = `
                                 "alignItems": "center",
                                 "backgroundColor": "#ffffff",
                                 "borderColor": "#ffffff",
-                                "borderRadius": 8,
-                                "borderWidth": 1.5,
+                                "borderRadius": 4,
+                                "borderWidth": 2,
                                 "height": 16,
                                 "justifyContent": "center",
                                 "overflow": "hidden",
@@ -588,8 +588,8 @@ exports[`AccountConnect renders correctly 1`] = `
                                 "alignItems": "center",
                                 "backgroundColor": "#ffffff",
                                 "borderColor": "#ffffff",
-                                "borderRadius": 8,
-                                "borderWidth": 1.5,
+                                "borderRadius": 4,
+                                "borderWidth": 2,
                                 "height": 16,
                                 "justifyContent": "center",
                                 "overflow": "hidden",
@@ -626,8 +626,8 @@ exports[`AccountConnect renders correctly 1`] = `
                                 "alignItems": "center",
                                 "backgroundColor": "#ffffff",
                                 "borderColor": "#ffffff",
-                                "borderRadius": 8,
-                                "borderWidth": 1.5,
+                                "borderRadius": 4,
+                                "borderWidth": 2,
                                 "height": 16,
                                 "justifyContent": "center",
                                 "overflow": "hidden",
@@ -664,8 +664,8 @@ exports[`AccountConnect renders correctly 1`] = `
                                 "alignItems": "center",
                                 "backgroundColor": "#ffffff",
                                 "borderColor": "#ffffff",
-                                "borderRadius": 8,
-                                "borderWidth": 1.5,
+                                "borderRadius": 4,
+                                "borderWidth": 2,
                                 "height": 16,
                                 "justifyContent": "center",
                                 "overflow": "hidden",

app/components/Views/AccountSelector/AccountSelector.test.tsx

@@ -1,33 +1,102 @@
+// Third party dependencies.
 import React from 'react';
 import { screen } from '@testing-library/react-native';
-import AccountSelector from './AccountSelector';
+import {
+  NetworkConfiguration,
+  NetworkStatus,
+  RpcEndpointType,
+} from '@metamask/network-controller';
+import { KeyringTypes } from '@metamask/keyring-controller';
+import { Hex } from '@metamask/utils';
+
+// External dependencies.
 import { renderScreen } from '../../../util/test/renderWithProvider';
 import { AccountListBottomSheetSelectorsIDs } from '../../../../e2e/selectors/wallet/AccountListBottomSheet.selectors';
 import Routes from '../../../constants/navigation/Routes';
+import {
+  MOCK_ACCOUNTS_CONTROLLER_STATE,
+  MOCK_ADDRESS_1,
+  MOCK_ADDRESS_2,
+} from '../../../util/test/accountsControllerTestUtils';
+import { NETWORK_CHAIN_ID } from '../../../util/networks/customNetworks';
+
+// Internal dependencies.
 import {
   AccountSelectorParams,
   AccountSelectorProps,
 } from './AccountSelector.types';
-import {
-  MOCK_ACCOUNTS_CONTROLLER_STATE,
-  expectedUuid2,
-} from '../../../util/test/accountsControllerTestUtils';
+import AccountSelector from './AccountSelector';
 
 const mockAccounts = [
   {
-    address: '0xc4966c0d659d99699bfd7eb54d8fafee40e4a756',
+    address: MOCK_ADDRESS_1,
     balance: '0x0',
     name: 'Account 1',
+    type: KeyringTypes.hd,
+    yOffset: 0,
+    isSelected: false,
+    assets: {
+      fiatBalance: '$0\nETH',
+    },
+    balanceError: undefined,
   },
   {
-    address: '0x2B5634C42055806a59e9107ED44D43c426E58258',
+    address: MOCK_ADDRESS_2,
     balance: '0x0',
     name: 'Account 2',
+    type: KeyringTypes.hd,
+    yOffset: 78,
+    isSelected: true,
+    assets: {
+      fiatBalance: '$0.01\nETH',
+    },
+    balanceError: undefined,
   },
 ];
 
+const MOCK_TOKEN_ADDRESS_1 = '0x378afc9a77b47a30';
+const MOCK_TOKEN_ADDRESS_2 = '0x2f18e6';
+const MOCK_TOKEN_ADDRESS_3 = '0x5d512b2498936';
+const MOCK_TOKEN_ADDRESS_4 = '0x0D1E753a25eBda689453309112904807625bEFBe';
+
 const mockEnsByAccountAddress = {
-  '0xc4966c0d659d99699bfd7eb54d8fafee40e4a756': 'test.eth',
+  [MOCK_ADDRESS_1]: 'test_1.eth',
+  [MOCK_ADDRESS_2]: 'test_2.eth',
+};
+
+const mockNetworkConfigurations: Record<Hex, NetworkConfiguration> = {
+  [NETWORK_CHAIN_ID.MAINNET]: {
+    chainId: NETWORK_CHAIN_ID.MAINNET,
+    nativeCurrency: 'ETH',
+    name: 'Ethereum Mainnet',
+    defaultBlockExplorerUrlIndex: 0,
+    defaultRpcEndpointIndex: 0,
+    rpcEndpoints: [
+      {
+        networkClientId: 'infura-mainnet',
+        type: RpcEndpointType.Custom,
+        url: 'https://mainnet.infura.io/v3/{infuraProjectId}',
+        name: 'Infura',
+      },
+    ],
+    blockExplorerUrls: ['https://etherscan.io'],
+  },
+  [NETWORK_CHAIN_ID.POLYGON]: {
+    chainId: NETWORK_CHAIN_ID.POLYGON,
+    nativeCurrency: 'MATIC',
+    name: 'Polygon',
+    defaultBlockExplorerUrlIndex: 0,
+    defaultRpcEndpointIndex: 0,
+    rpcEndpoints: [
+      {
+        networkClientId: 'custom-network',
+        type: RpcEndpointType.Custom,
+        url: 'https://polygon-rpc.com',
+        name: 'Polygon RPC',
+      },
+    ],
+    blockExplorerUrls: ['https://polygonscan.com'],
+  },
 };
 
 const mockInitialState = {
@@ -37,30 +106,92 @@ const mockInitialState = {
         keyrings: [
           {
             type: 'HD Key Tree',
-            accounts: [
-              '0xc4966c0d659d99699bfd7eb54d8fafee40e4a756',
-              '0x2B5634C42055806a59e9107ED44D43c426E58258',
-            ],
+            accounts: [MOCK_ADDRESS_1, MOCK_ADDRESS_2],
           },
         ],
       },
-      AccountsController: {
-        ...MOCK_ACCOUNTS_CONTROLLER_STATE,
-        internalAccounts: {
-          ...MOCK_ACCOUNTS_CONTROLLER_STATE.internalAccounts,
-          accounts: {
-            ...MOCK_ACCOUNTS_CONTROLLER_STATE.internalAccounts.accounts,
-            [expectedUuid2]: {
-              ...MOCK_ACCOUNTS_CONTROLLER_STATE.internalAccounts.accounts[
-                expectedUuid2
-              ],
-              methods: [],
+      MultichainNetworkController: {
+        isEvmSelected: true,
+        selectedMultichainNetworkChainId: undefined,
+        multichainNetworkConfigurationsByChainId: {},
+      },
+      TokenRatesController: {
+        contractExchangeRates: {},
+        marketData: {
+          '0x1': {
+            [MOCK_TOKEN_ADDRESS_1]: {
+              price: 3000,
+            },
+            [MOCK_TOKEN_ADDRESS_2]: {
+              price: 1000,
+            },
+          },
+          '0x89': {
+            [MOCK_TOKEN_ADDRESS_3]: {
+              price: 5000,
+            },
+            [MOCK_TOKEN_ADDRESS_4]: {
+              price: 2000,
+            },
+          },
+        },
+      },
+      AccountsController: MOCK_ACCOUNTS_CONTROLLER_STATE,
+      AccountTrackerController: {
+        accountsByChainId: {
+          [NETWORK_CHAIN_ID.MAINNET]: {},
+          [NETWORK_CHAIN_ID.POLYGON]: {},
+        },
+        accounts: {
+          [MOCK_ADDRESS_1]: {
+            balance: '0x0',
+            stakedBalance: '0x0',
+          },
+          [MOCK_ADDRESS_2]: {
+            balance: '0x5',
+          },
+        },
+      },
+      NetworkController: {
+        selectedNetworkClientId: 'custom-network',
+        networkConfigurationsByChainId: mockNetworkConfigurations,
+        networksMetadata: {
+          'custom-network': {
+            status: NetworkStatus.Available,
+            EIPS: {},
+          },
+        },
+      },
+      TokenBalancesController: {
+        tokenBalances: {
+          [MOCK_ADDRESS_1.toLowerCase() as Hex]: {
+            [NETWORK_CHAIN_ID.MAINNET]: {
+              [MOCK_TOKEN_ADDRESS_1]: '0x378afc9a77b47a30' as Hex,
+              [MOCK_TOKEN_ADDRESS_2]: '0x2f18e6' as Hex,
+            },
+            [NETWORK_CHAIN_ID.POLYGON]: {
+              [MOCK_TOKEN_ADDRESS_3]: '0x5d512b2498936' as Hex,
+              [MOCK_TOKEN_ADDRESS_4]: '0x5d512b2498936' as Hex,
+            },
+          },
+          [MOCK_ADDRESS_2.toLowerCase() as Hex]: {
+            [NETWORK_CHAIN_ID.MAINNET]: {
+              [MOCK_TOKEN_ADDRESS_1]: '0x378afc9a77b47a30' as Hex,
+              [MOCK_TOKEN_ADDRESS_2]: '0x2f18e6' as Hex,
+            },
+            [NETWORK_CHAIN_ID.POLYGON]: {
+              [MOCK_TOKEN_ADDRESS_3]: '0x5d512b2498936' as Hex,
+              [MOCK_TOKEN_ADDRESS_4]: '0x5d512b2498936' as Hex,
             },
           },
         },
       },
       PreferencesController: {
         privacyMode: false,
+        tokenNetworkFilter: {
+          [NETWORK_CHAIN_ID.MAINNET]: 'true',
+          [NETWORK_CHAIN_ID.POLYGON]: 'true',
+        },
       },
     },
   },
@@ -72,6 +203,35 @@ const mockInitialState = {
   },
 };
 
+jest.mock('../../../components/hooks/useMultiAccountChainBalances', () => ({
+  useMultiAccountChainBalances: jest.fn().mockReturnValue({
+    ['0xC4955C0d639D99699Bfd7Ec54d9FaFEe40e4D272'.toLowerCase()]: {
+      ['0x1' as Hex]: {
+        totalNativeFiatBalance: 100,
+        totalImportedTokenFiatBalance: 50,
+        totalFiatBalance: 150,
+      },
+      ['0x89' as Hex]: {
+        totalNativeFiatBalance: 20,
+        totalImportedTokenFiatBalance: 10,
+        totalFiatBalance: 30,
+      },
+    },
+    ['0xC4966c0D659D99699BFD7EB54D8fafEE40e4a756'.toLowerCase()]: {
+      ['0x1' as Hex]: {
+        totalNativeFiatBalance: 200,
+        totalImportedTokenFiatBalance: 100,
+        totalFiatBalance: 300,
+      },
+      ['0x89' as Hex]: {
+        totalNativeFiatBalance: 40,
+        totalImportedTokenFiatBalance: 20,
+        totalFiatBalance: 60,
+      },
+    },
+  }),
+}));
+
 // Mock the Redux dispatch
 const mockDispatch = jest.fn();
 jest.mock('react-redux', () => ({

app/components/Views/AccountSelector/AccountSelector.tsx

@@ -58,6 +58,7 @@ const AccountSelector = ({ route }: AccountSelectorProps) => {
   const { accounts, ensByAccountAddress } = useAccounts({
     checkBalanceError,
     isLoading: reloadAccounts,
+    shouldAggregateAcrossChains: true,
   });
   const [screen, setScreen] = useState<AccountSelectorScreens>(
     navigateToAddAccountActions ?? AccountSelectorScreens.AccountSelector,

app/components/Views/AccountSelector/__snapshots__/AccountSelector.test.tsx.snap

@@ -461,6 +461,7 @@ exports[`AccountSelector should render correctly 1`] = `
                           </View>
                           <RCTScrollView
                             collapsable={false}
+                            data={[]}
                             getItem={[Function]}
                             getItemCount={[Function]}
                             initialNumToRender={999}

app/components/hooks/useAccounts/useAccounts.ts

@@ -44,11 +44,16 @@ import { getAccountBalances } from './utils';
 /**
  * Hook that returns both wallet accounts and ens name information.
  *
+ * @param checkBalanceErrorFn - Function to check balance error.
+ * @param isLoading - Whether the accounts are loading.
+ * @param shouldAggregateAcrossChains - Whether to aggregate across chains.
+ *
  * @returns Object that contains both wallet accounts and ens name information.
  */
 const useAccounts = ({
   checkBalanceError: checkBalanceErrorFn,
   isLoading = false,
+  shouldAggregateAcrossChains = false,
 }: UseAccountsParams = {}): UseAccounts => {
   const isMountedRef = useRef(false);
   const [accounts, setAccounts] = useState<Account[]>([]);
@@ -73,7 +78,7 @@ const useAccounts = ({
   );
   const formattedTokensWithBalancesPerChain = useGetFormattedTokensPerChain(
     internalAccounts,
-    !isTokenNetworkFilterEqualCurrentNetwork,
+    shouldAggregateAcrossChains || !isTokenNetworkFilterEqualCurrentNetwork,
     allChainIDs,
   );
   const totalFiatBalancesCrossChain = useGetTotalFiatBalanceCrossChains(

app/components/hooks/useAccounts/useAccounts.types.ts

@@ -72,6 +72,11 @@ export interface UseAccountsParams {
    * @default false
    */
   isLoading?: boolean;
+  /**
+   * Optional boolean that indicates if the accounts should be aggregated across chains.
+   * @default true
+   */
+  shouldAggregateAcrossChains?: boolean;
 }
 
 /**

app/components/hooks/useGetFormattedTokensPerChain.tsx

@@ -20,7 +20,7 @@ import { InternalAccount } from '@metamask/keyring-internal-api';
 import { isTestNet } from '../../util/networks';
 import { selectShowFiatInTestnets } from '../../selectors/settings';
 
-interface AllTokens {
+export interface AllTokens {
   [chainId: string]: {
     [tokenAddress: string]: Token[];
   };
@@ -34,13 +34,13 @@ export interface TokensWithBalances {
   tokenBalanceFiat: number;
 }
 
-interface AddressMapping {
+export interface AddressMapping {
   [chainId: string]: {
     [tokenAddress: string]: string;
   };
 }
 
-interface TokenBalancesMapping {
+export interface TokenBalancesMapping {
   [address: string]: AddressMapping;
 }
 

app/components/hooks/useMultiAccountChainBalances/index.ts

@@ -0,0 +1,137 @@
+// Third party dependencies
+import { useSelector } from 'react-redux';
+import { Token } from '@metamask/assets-controllers';
+import { hexToBN, toChecksumHexAddress } from '@metamask/controller-utils';
+
+// External dependencies
+import { selectAllTokens } from '../../../selectors/tokensController';
+import { selectTokenMarketData } from '../../../selectors/tokenRatesController';
+import { selectAllTokenBalances } from '../../../selectors/tokenBalancesController';
+import { selectAccountsByChainId } from '../../../selectors/accountTrackerController';
+import { selectNetworkConfigurations } from '../../../selectors/networkController';
+import {
+  selectCurrentCurrency,
+  selectCurrencyRates,
+} from '../../../selectors/currencyRateController';
+import { selectShowFiatInTestnets } from '../../../selectors/settings';
+import {
+  MarketDataMapping,
+  TokenBalancesMapping,
+  AllTokens,
+} from '../../hooks/useGetFormattedTokensPerChain';
+import {
+  balanceToFiatNumber,
+  renderFromTokenMinimalUnit,
+  toHexadecimal,
+  weiToFiatNumber,
+} from '../../../util/number';
+import { isTestNet } from '../../../util/networks';
+
+// Internal dependencies
+import { ChainFiatBalances } from './index.types';
+
+/**
+ * Hook to view portfolio balance data for each chain for all accounts.
+ *
+ * @returns Portfolio balance data for each chain for all accounts
+ */
+export const useMultiAccountChainBalances = (): ChainFiatBalances => {
+  const allTokenBalances: TokenBalancesMapping = useSelector(
+    selectAllTokenBalances,
+  );
+  const importedTokens: AllTokens = useSelector(selectAllTokens);
+  const allNetworks: Record<
+    string,
+    {
+      name: string;
+      nativeCurrency: string;
+    }
+  > = useSelector(selectNetworkConfigurations);
+  const marketData: MarketDataMapping = useSelector(selectTokenMarketData);
+  const currentCurrency = useSelector(selectCurrentCurrency);
+  const currencyRates = useSelector(selectCurrencyRates);
+  const accountsByChainId = useSelector(selectAccountsByChainId);
+  const showFiatOnTestnets = useSelector(selectShowFiatInTestnets);
+
+  const result: ChainFiatBalances = {};
+  for (const [accountAddress, tokenBalances] of Object.entries(
+    allTokenBalances,
+  )) {
+    let currentChainId = '';
+
+    result[accountAddress] = {};
+    for (const [chainId, tokenBalance] of Object.entries(tokenBalances)) {
+      if (isTestNet(chainId) && showFiatOnTestnets) {
+        return {};
+      }
+
+      currentChainId = chainId;
+      result[accountAddress][chainId] = {
+        totalNativeFiatBalance: 0,
+        totalImportedTokenFiatBalance: 0,
+        totalFiatBalance: 0,
+      };
+
+      // Calculate the imported token balance
+      const tokens: Token[] = importedTokens?.[chainId]?.[accountAddress] ?? [];
+      const matchedChainSymbol = allNetworks[chainId].nativeCurrency;
+      const conversionRate =
+        currencyRates?.[matchedChainSymbol]?.conversionRate ?? 0;
+      const tokenExchangeRates = marketData?.[toHexadecimal(chainId)];
+      const decimalsToShow = (currentCurrency === 'usd' && 2) || undefined;
+
+      for (const token of tokens) {
+        const hexBalance = tokenBalance?.[token.address] ?? '0x0';
+
+        const decimalBalance = renderFromTokenMinimalUnit(
+          hexBalance,
+          token.decimals,
+        );
+        const exchangeRate = tokenExchangeRates?.[token.address]?.price;
+
+        const tokenBalanceFiat = balanceToFiatNumber(
+          decimalBalance,
+          conversionRate,
+          exchangeRate,
+          decimalsToShow,
+        );
+
+        result[accountAddress][chainId].totalImportedTokenFiatBalance +=
+          tokenBalanceFiat;
+
+        // Calculate the native token balance
+        const balanceBN = hexToBN(
+          accountsByChainId[toHexadecimal(chainId)][
+            toChecksumHexAddress(accountAddress)
+          ].balance,
+        );
+
+        const stakedBalanceBN = hexToBN(
+          accountsByChainId[toHexadecimal(chainId)][
+            toChecksumHexAddress(accountAddress)
+          ].stakedBalance || '0x00',
+        );
+        const totalAccountBalance = balanceBN
+          .add(stakedBalanceBN)
+          .toString('hex');
+        const ethFiat = weiToFiatNumber(
+          totalAccountBalance,
+          conversionRate,
+          decimalsToShow,
+        );
+
+        result[accountAddress][chainId].totalNativeFiatBalance = ethFiat;
+      }
+
+      const currentChainNativeFiatBalance =
+        result[accountAddress][currentChainId].totalNativeFiatBalance;
+      const currentChainImportedTokenFiatBalance =
+        result[accountAddress][currentChainId].totalImportedTokenFiatBalance;
+
+      result[accountAddress][currentChainId].totalFiatBalance =
+        currentChainNativeFiatBalance + currentChainImportedTokenFiatBalance;
+    }
+  }
+
+  return result;
+};

app/components/hooks/useMultiAccountChainBalances/index.types.ts

@@ -0,0 +1,9 @@
+export interface ChainFiatBalances {
+  [address: string]: {
+    [chainId: string]: {
+      totalNativeFiatBalance: number;
+      totalImportedTokenFiatBalance: number;
+      totalFiatBalance: number;
+    };
+  };
+}

app/components/hooks/useMultichainBalances/useMultichainBalances.ts

@@ -31,7 +31,7 @@ import { selectIsEvmNetworkSelected } from '../../../selectors/multichainNetwork
 import I18n from 'i18n-js';
 
 /**
- * Hook to manage portfolio balance data across chains.
+ * Hook to manage portfolio balance data across chains for a single account.
  *
  * @returns Portfolio balance data
  */