fix: address list selector (#35592)

<!--
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/35592?quickstart=1)

This PR introduces some changes to the address list code to fix minor
bugs like crossing data between the accounts-controller and networks,
update the network icons, and the address count.

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry: Fixed minor bugs related to address list

## **Related issues**

Fixes:

## **Manual testing steps**

Pre-requisite: Enable Multichain Account State 2

1. Go to account details
2. Check that the networks number is correct according to the number of
networks in the wallet
3. Go to address list
4. Check that the number of addresses are corresponding with the number
of networks
5. Check that the network icons are correct

## **Screenshots/Recordings**


https://github.com/user-attachments/assets/15ebb89d-412f-4931-be5f-8d76987d1235

## **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: gantunesr

ui/components/multichain-accounts/multichain-address-row/multichain-address-row.tsx

@@ -1,4 +1,6 @@
 import React from 'react';
+import { CaipChainId, KnownCaipNamespace } from '@metamask/utils';
+
 import {
   AlignItems,
   BlockSize,
@@ -22,6 +24,7 @@ import {
 import { shortenAddress } from '../../../helpers/utils/util';
 import { useCopyToClipboard } from '../../../hooks/useCopyToClipboard';
 import { getImageForChainId } from '../../../selectors/multichain';
+import { convertCaipToHexChainId } from '../../../../shared/modules/network.utils';
 
 type MultichainAddressRowProps = {
   /**
@@ -50,7 +53,13 @@ export const MultichainAddressRow = ({
 }: MultichainAddressRowProps) => {
   const [copied, handleCopy] = useCopyToClipboard();
 
-  const networkImageSrc = getImageForChainId(chainId);
+  // We're mixing hex with caip chain ids so its necessary
+  // to use the hex format for EVMs and caip for non EVMs.
+  const networkImageSrc = getImageForChainId(
+    chainId.startsWith(KnownCaipNamespace.Eip155)
+      ? convertCaipToHexChainId(chainId as CaipChainId)
+      : chainId,
+  );
   const truncatedAddress = shortenAddress(address);
 
   const handleCopyClick = () => {

ui/components/multichain-accounts/multichain-address-rows-list/multichain-address-rows-list.test.tsx

@@ -3,13 +3,21 @@ import { render, screen, fireEvent } from '@testing-library/react';
 import { Provider } from 'react-redux';
 import configureStore from 'redux-mock-store';
 import { InternalAccount } from '@metamask/keyring-internal-api';
+import { AccountGroupId } from '@metamask/account-api';
 import { MultichainAddressRowsList } from './multichain-address-rows-list';
 
 const mockStore = configureStore([]);
 
-const accounts: InternalAccount[] = [
-  {
-    id: '1',
+const WALLET_ID_MOCK = 'entropy:01K437Z7EJ0VCMFDE9TQKRV60A';
+
+const GROUP_ID_MOCK = `${WALLET_ID_MOCK}/0`;
+
+const ACCOUNT_ONE_ID_MOCK = 'account-one-id';
+const ACCOUNT_TWO_ID_MOCK = 'account-two-id';
+
+const INTERNAL_ACCOUNTS_MOCK: Record<string, InternalAccount> = {
+  [ACCOUNT_ONE_ID_MOCK]: {
+    id: ACCOUNT_ONE_ID_MOCK,
     address: '0x1234567890abcdef1234567890abcdef12345678',
     metadata: {
       name: 'Ethereum Account',
@@ -19,10 +27,10 @@ const accounts: InternalAccount[] = [
     options: {},
     methods: [],
     type: 'eip155:eoa',
-    scopes: ['eip155:*'],
+    scopes: ['eip155:0'],
   },
-  {
-    id: '2',
+  [ACCOUNT_TWO_ID_MOCK]: {
+    id: ACCOUNT_TWO_ID_MOCK,
     address: 'DRpbCBMxVnDK7maPM5tGv6MvB3v1sRMC86PZ8okm21hy',
     metadata: {
       name: 'Solana Account',
@@ -32,20 +40,36 @@ const accounts: InternalAccount[] = [
     options: {},
     methods: [],
     type: 'solana:data-account',
-    scopes: ['solana:*'],
+    scopes: ['solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp'],
+  },
+};
+
+const ACCOUNT_TREE_MOCK = {
+  wallets: {
+    [WALLET_ID_MOCK]: {
+      type: 'entropy',
+      id: WALLET_ID_MOCK,
+      metadata: {},
+      groups: {
+        [GROUP_ID_MOCK]: {
+          type: 'multichain-account',
+          id: GROUP_ID_MOCK,
+          metadata: {},
+          accounts: [ACCOUNT_ONE_ID_MOCK, ACCOUNT_TWO_ID_MOCK],
+        },
+      },
+    },
   },
-];
+};
 
 const createMockState = () => ({
   metamask: {
     completedOnboarding: true,
     internalAccounts: {
-      accounts: {
-        '1': accounts[0],
-        '2': accounts[1],
-      },
-      selectedAccount: '1',
+      accounts: INTERNAL_ACCOUNTS_MOCK,
+      selectedAccount: ACCOUNT_ONE_ID_MOCK,
     },
+    accountTree: ACCOUNT_TREE_MOCK,
     // EVM network configurations
     networkConfigurationsByChainId: {
       '0x1': {
@@ -144,11 +168,11 @@ const createMockState = () => ({
   },
 });
 
-const renderComponent = (accountsList = accounts) => {
+const renderComponent = (groupId: AccountGroupId = GROUP_ID_MOCK) => {
   const store = mockStore(createMockState());
   return render(
     <Provider store={store}>
-      <MultichainAddressRowsList accounts={accountsList} />
+      <MultichainAddressRowsList groupId={groupId} />
     </Provider>,
   );
 };
@@ -208,8 +232,8 @@ describe('MultichainAddressRowsList', () => {
     expect(searchInput).toHaveValue('');
   });
 
-  it('handles empty accounts list', () => {
-    renderComponent([]);
+  it('handles invalid group', () => {
+    renderComponent('invalid-group-id' as AccountGroupId);
 
     expect(
       screen.getByTestId('multichain-address-rows-list'),

ui/components/multichain-accounts/multichain-address-rows-list/multichain-address-rows-list.tsx

@@ -1,7 +1,6 @@
 import React, { useMemo } from 'react';
 import { useSelector } from 'react-redux';
-import { InternalAccount } from '@metamask/keyring-internal-api';
-import { CaipChainId } from '@metamask/utils';
+import { type AccountGroupId } from '@metamask/account-api';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import {
   BackgroundColor,
@@ -20,79 +19,42 @@ import {
   TextFieldSearchSize,
 } from '../../component-library';
 import { MultichainAddressRow } from '../multichain-address-row/multichain-address-row';
-import { getMultichainNetworkConfigurationsByChainId } from '../../../selectors/multichain/networks';
-import {
-  NetworkAddressItem,
-  sortNetworkAddressItems,
-  getCompatibleNetworksForAccount,
-} from './utils';
+import { getInternalAccountListSpreadByScopesByGroupId } from '../../../selectors/multichain-accounts/account-tree';
 
 export type MultichainAddressRowsListProps = {
   /**
-   * Array of InternalAccount objects to determine compatible networks for
+   * The account group ID.
    */
-  accounts?: InternalAccount[];
+  groupId: AccountGroupId;
 };
 
 export const MultichainAddressRowsList = ({
-  accounts = [],
+  groupId,
 }: MultichainAddressRowsListProps) => {
   const t = useI18nContext();
   const [searchPattern, setSearchPattern] = React.useState<string>('');
 
-  const [multichainNetworks] = useSelector(
-    getMultichainNetworkConfigurationsByChainId,
+  const getAccountsSpreadByNetworkByGroupId = useSelector((state) =>
+    getInternalAccountListSpreadByScopesByGroupId(state, groupId),
   );
 
-  const allNetworks = useMemo(() => {
-    const networks: Record<string, { name: string; chainId: CaipChainId }> = {};
-
-    if (!multichainNetworks) {
-      return networks;
-    }
-
-    Object.entries(multichainNetworks).forEach(([chainId, networkConfig]) => {
-      if (networkConfig && networkConfig.name) {
-        networks[chainId] = {
-          name: networkConfig.name,
-          chainId: chainId as CaipChainId,
-        };
-      }
-    });
-
-    return networks;
-  }, [multichainNetworks]);
-
-  // Generate network address items for all accounts and their compatible networks
-  const networkAddressItems = useMemo(() => {
-    const items: NetworkAddressItem[] = [];
-
-    accounts.forEach((account) => {
-      const compatibleItems = getCompatibleNetworksForAccount(
-        account,
-        allNetworks,
-      );
-      items.push(...compatibleItems);
-    });
-
-    return items;
-  }, [accounts, allNetworks]);
-
   const filteredItems = useMemo(() => {
     if (!searchPattern.trim()) {
-      return sortNetworkAddressItems(networkAddressItems);
+      return getAccountsSpreadByNetworkByGroupId;
     }
 
     const pattern = searchPattern.toLowerCase();
-    const filtered = networkAddressItems.filter((item) => {
-      return (
-        item.networkName.toLowerCase().includes(pattern) ||
-        item.address.toLowerCase().includes(pattern)
-      );
-    });
-
-    return sortNetworkAddressItems(filtered);
-  }, [networkAddressItems, searchPattern]);
+    const filtered = getAccountsSpreadByNetworkByGroupId.filter(
+      ({ networkName, account }) => {
+        return (
+          networkName.toLowerCase().includes(pattern) ||
+          account.address.toLowerCase().includes(pattern)
+        );
+      },
+    );
+
+    return filtered;
+  }, [getAccountsSpreadByNetworkByGroupId, searchPattern]);
 
   const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setSearchPattern(event.target.value);
@@ -105,10 +67,10 @@ export const MultichainAddressRowsList = ({
   const renderedRows = useMemo(() => {
     return filteredItems.map((item, index) => (
       <MultichainAddressRow
-        key={`${item.address}-${item.chainId}-${index}`}
-        chainId={item.chainId}
+        key={`${item.account.address}-${item.scope}-${index}`}
+        chainId={item.scope}
         networkName={item.networkName}
-        address={item.address}
+        address={item.account.address}
       />
     ));
   }, [filteredItems]);

ui/helpers/utils/network-helper.ts

@@ -1,3 +1,8 @@
+import { NON_EVM_TESTNET_IDS } from '@metamask/multichain-network-controller';
+import { CaipChainId, type Hex, isCaipChainId } from '@metamask/utils';
+import { TEST_CHAINS } from '../../../shared/constants/network';
+import { convertCaipToHexChainId } from '../../../shared/modules/network.utils';
+
 export const getMatchedChain = (
   decimalChainId: string,
   safeChainsList: {
@@ -42,3 +47,21 @@ export const getMatchedNames = (
     return accumulator;
   }, []);
 };
+
+/**
+ * Checks if the given chain ID is a test network.
+ *
+ * @param chainId - The chain ID to check.
+ * @returns True if the chain ID is a test network, false otherwise.
+ */
+export const isTestNetwork = (chainId: CaipChainId | Hex) => {
+  if (!isCaipChainId(chainId)) {
+    return TEST_CHAINS.includes(chainId);
+  }
+
+  if (chainId.startsWith('eip155:')) {
+    return TEST_CHAINS.includes(convertCaipToHexChainId(chainId));
+  }
+
+  return NON_EVM_TESTNET_IDS.includes(chainId);
+};

ui/pages/multichain-accounts/multichain-account-address-list-page/multichain-account-address-list-page.tsx

@@ -18,10 +18,7 @@ import {
 import { TextVariant } from '../../../helpers/constants/design-system';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import { MultichainAddressRowsList } from '../../../components/multichain-accounts/multichain-address-rows-list';
-import {
-  getInternalAccountsFromGroupById,
-  getMultichainAccountGroupById,
-} from '../../../selectors/multichain-accounts/account-tree';
+import { getMultichainAccountGroupById } from '../../../selectors/multichain-accounts/account-tree';
 import {
   AddressListQueryParams,
   AddressListSource,
@@ -37,12 +34,6 @@ export const MultichainAccountAddressListPage = () => {
     ? (decodeURIComponent(accountGroupId) as AccountGroupId)
     : null;
 
-  const accounts = useSelector((state) =>
-    decodedAccountGroupId
-      ? getInternalAccountsFromGroupById(state, decodedAccountGroupId)
-      : [],
-  );
-
   const accountGroup = useSelector((state) =>
     decodedAccountGroupId
       ? getMultichainAccountGroupById(state, decodedAccountGroupId)
@@ -78,7 +69,9 @@ export const MultichainAccountAddressListPage = () => {
       </Header>
       <Content>
         <Box flexDirection={BoxFlexDirection.Column}>
-          <MultichainAddressRowsList accounts={accounts} />
+          {decodedAccountGroupId ? (
+            <MultichainAddressRowsList groupId={decodedAccountGroupId} />
+          ) : null}
         </Box>
       </Content>
     </Page>

ui/pages/multichain-accounts/multichain-account-details-page/multichain-account-details-page.test.tsx

@@ -75,7 +75,7 @@ describe('MultichainAccountDetailsPage', () => {
   it('displays the address count from the selector', () => {
     renderComponent();
 
-    expect(screen.getByText(/2 addresses/iu)).toBeInTheDocument();
+    expect(screen.getByText(/10 addresses/iu)).toBeInTheDocument();
   });
 
   it('calls history.goBack when back button is clicked', () => {

ui/selectors/multichain-accounts/account-tree.test.ts

@@ -31,6 +31,7 @@ import {
   getNetworkAddressCount,
   getWallet,
   getAccountGroupsByAddress,
+  getInternalAccountListSpreadByScopesByGroupId,
 } from './account-tree';
 import { MultichainAccountsState } from './account-tree.types';
 import {
@@ -1019,7 +1020,7 @@ describe('Multichain Accounts Selectors', () => {
         ENTROPY_GROUP_1_ID as AccountGroupId,
       );
 
-      expect(result).toBe(2);
+      expect(result).toBe(10);
     });
 
     it('returns 0 when the group does not exist', () => {
@@ -1233,4 +1234,43 @@ describe('Multichain Accounts Selectors', () => {
       expect(result[1].id).toBe(LEDGER_GROUP_ID);
     });
   });
+
+  describe('getInternalAccountListSpreadByScopesByGroupId', () => {
+    it('returns internal accounts spread by scopes for a specific multichain group ID', () => {
+      const result = getInternalAccountListSpreadByScopesByGroupId(
+        typedMockState,
+        ENTROPY_GROUP_2_ID,
+      );
+
+      expect(result).toHaveLength(5);
+      expect(result[0]).toHaveProperty('scope', 'eip155:1');
+      expect(result[1]).toHaveProperty('scope', 'eip155:5');
+      expect(result[2]).toHaveProperty('scope', 'eip155:56');
+      expect(result[3]).toHaveProperty('scope', 'eip155:137');
+      expect(result[4]).toHaveProperty('scope', 'eip155:42161');
+    });
+
+    it('returns internal accounts spread by scopes for a specific single group ID', () => {
+      const result = getInternalAccountListSpreadByScopesByGroupId(
+        typedMockState,
+        LEDGER_GROUP_ID,
+      );
+
+      expect(result).toHaveLength(5);
+      expect(result[0]).toHaveProperty('scope', 'eip155:1');
+      expect(result[1]).toHaveProperty('scope', 'eip155:5');
+      expect(result[2]).toHaveProperty('scope', 'eip155:56');
+      expect(result[3]).toHaveProperty('scope', 'eip155:137');
+      expect(result[4]).toHaveProperty('scope', 'eip155:42161');
+    });
+
+    it('returns empty array when group ID does not exist', () => {
+      const result = getInternalAccountListSpreadByScopesByGroupId(
+        typedMockState,
+        'nonExistentGroupId' as AccountGroupId,
+      );
+
+      expect(result).toEqual([]);
+    });
+  });
 });