chore: cherry-pick #9993 (#10006)

This PR cherry-picks #9993

Co-authored-by: Cal Leung <[email protected]>

Author: github-actions[bot]

app/selectors/accountsController.test.ts

@@ -1,6 +1,7 @@
 import { AccountsControllerState } from '@metamask/accounts-controller';
 import { captureException } from '@sentry/react-native';
 import { Hex, isValidChecksumAddress } from '@metamask/utils';
+import { InternalAccount } from '@metamask/keyring-api';
 import DefaultPreference from 'react-native-default-preference';
 import {
   selectSelectedInternalAccount,
@@ -13,9 +14,48 @@ import {
   expectedUuid2,
   internalAccount1,
   MOCK_ADDRESS_2,
+  createMockInternalAccount,
+  createMockUuidFromAddress,
 } from '../util/test/accountsControllerTestUtils';
 import { RootState } from '../reducers';
 import { AGREED } from '../constants/storage';
+import {
+  MOCK_KEYRINGS,
+  MOCK_KEYRING_CONTROLLER,
+} from './keyringController/testUtils';
+
+/**
+ * Generates a mocked AccountsController state
+ * The internal accounts are generated in reverse order relative to the mock keyrings that are used for generation
+ *
+ * @returns - A mocked state of AccountsController
+ */
+const MOCK_GENERATED_ACCOUNTS_CONTROLLER_REVERSED =
+  (): AccountsControllerState => {
+    const reversedKeyringAccounts = [...MOCK_KEYRINGS]
+      .reverse()
+      .flatMap((keyring) => [...keyring.accounts].reverse());
+    const accountsForInternalAccounts = reversedKeyringAccounts.reduce(
+      (record, keyringAccount, index) => {
+        const lowercasedKeyringAccount = keyringAccount.toLowerCase();
+        const accountName = `Account ${index}`;
+        const uuid = createMockUuidFromAddress(lowercasedKeyringAccount);
+        const internalAccount = createMockInternalAccount(
+          lowercasedKeyringAccount,
+          accountName,
+        );
+        record[uuid] = internalAccount;
+        return record;
+      },
+      {} as Record<string, InternalAccount>,
+    );
+    return {
+      internalAccounts: {
+        accounts: accountsForInternalAccounts,
+        selectedAccount: Object.values(accountsForInternalAccounts)[0].id,
+      },
+    };
+  };
 
 jest.mock('@sentry/react-native', () => ({
   captureException: jest.fn(),
@@ -84,47 +124,35 @@ describe('Accounts Controller Selectors', () => {
     });
   });
   describe('selectInternalAccounts', () => {
-    it('returns all internal accounts in the accounts controller state', () => {
-      expect(
-        selectInternalAccounts({
-          engine: {
-            backgroundState: {
-              AccountsController: MOCK_ACCOUNTS_CONTROLLER_STATE,
-            },
+    it(`returns internal accounts of the accounts controller sorted by the keyring controller's accounts`, () => {
+      const mockAccountsControllerReversed =
+        MOCK_GENERATED_ACCOUNTS_CONTROLLER_REVERSED();
+      const internalAccountsResult = selectInternalAccounts({
+        engine: {
+          backgroundState: {
+            KeyringController: MOCK_KEYRING_CONTROLLER,
+            AccountsController: mockAccountsControllerReversed,
           },
-        } as RootState),
-      ).toEqual([
-        {
-          address: '0xc4955c0d639d99699bfd7ec54d9fafee40e4d272',
-          id: expectedUuid,
-          metadata: { name: 'Account 1', keyring: { type: 'HD Key Tree' } },
-          options: {},
-          methods: [
-            'personal_sign',
-            'eth_sign',
-            'eth_signTransaction',
-            'eth_signTypedData_v1',
-            'eth_signTypedData_v3',
-            'eth_signTypedData_v4',
-          ],
-          type: 'eip155:eoa',
-        },
-        {
-          address: '0xc4966c0d659d99699bfd7eb54d8fafee40e4a756',
-          id: expectedUuid2,
-          metadata: { name: 'Account 2', keyring: { type: 'HD Key Tree' } },
-          options: {},
-          methods: [
-            'personal_sign',
-            'eth_sign',
-            'eth_signTransaction',
-            'eth_signTypedData_v1',
-            'eth_signTypedData_v3',
-            'eth_signTypedData_v4',
-          ],
-          type: 'eip155:eoa',
         },
-      ]);
+      } as RootState);
+      const expectedInteralAccountsResult = Object.values(
+        mockAccountsControllerReversed.internalAccounts.accounts,
+      ).reverse();
+
+      const internalAccountAddressesResult = internalAccountsResult.map(
+        (account) => account.address,
+      );
+      const expectedAccountAddressesResult = [...MOCK_KEYRINGS].flatMap(
+        (keyring) => keyring.accounts,
+      );
+
+      // Ensure accounts are correct
+      expect(internalAccountsResult).toEqual(expectedInteralAccountsResult);
+
+      // Ensure that order of internal accounts match order of keyring accounts
+      expect(internalAccountAddressesResult).toEqual(
+        expectedAccountAddressesResult,
+      );
     });
   });
   describe('selectSelectedInternalAccountChecksummedAddress', () => {

app/selectors/accountsController.ts

@@ -4,16 +4,43 @@ import { captureException } from '@sentry/react-native';
 import { createSelector } from 'reselect';
 import { RootState } from '../reducers';
 import { createDeepEqualSelector } from './util';
+import { selectFlattenedKeyringAccounts } from './keyringController';
 
+/**
+ *
+ * @param state - Root redux state
+ * @returns - AccountsController state
+ */
 const selectAccountsControllerState = (state: RootState) =>
   state.engine.backgroundState.AccountsController;
 
+/**
+ * A memoized selector that returns internal accounts from the AccountsController, sorted by the order of KeyringController's keyring accounts
+ */
 export const selectInternalAccounts = createDeepEqualSelector(
   selectAccountsControllerState,
-  (accountControllerState) =>
-    Object.values(accountControllerState.internalAccounts.accounts),
+  selectFlattenedKeyringAccounts,
+  (accountControllerState, orderedKeyringAccounts) => {
+    const keyringAccountsMap = new Map(
+      orderedKeyringAccounts.map((account, index) => [
+        account.toLowerCase(),
+        index,
+      ]),
+    );
+    const sortedAccounts = Object.values(
+      accountControllerState.internalAccounts.accounts,
+    ).sort(
+      (a, b) =>
+        (keyringAccountsMap.get(a.address.toLowerCase()) || 0) -
+        (keyringAccountsMap.get(b.address.toLowerCase()) || 0),
+    );
+    return sortedAccounts;
+  },
 );
 
+/**
+ * A memoized selector that returns the selected internal account from the AccountsController
+ */
 export const selectSelectedInternalAccount = createDeepEqualSelector(
   selectAccountsControllerState,
   (accountsControllerState: AccountsControllerState) => {
@@ -31,6 +58,9 @@ export const selectSelectedInternalAccount = createDeepEqualSelector(
   },
 );
 
+/**
+ * A memoized selector that returns the selected internal account address in checksum format
+ */
 export const selectSelectedInternalAccountChecksummedAddress = createSelector(
   selectSelectedInternalAccount,
   (account) => {

app/selectors/keyringController/index.test.ts

@@ -0,0 +1,43 @@
+import { selectKeyrings, selectFlattenedKeyringAccounts } from './index';
+import { RootState } from '../../reducers';
+import {
+  MOCK_SIMPLE_ACCOUNTS,
+  MOCK_QR_ACCOUNTS,
+  MOCK_HD_ACCOUNTS,
+  MOCK_KEYRINGS,
+  MOCK_KEYRING_CONTROLLER,
+} from './testUtils';
+
+describe('KeyringController Selectors', () => {
+  describe('selectKeyrings', () => {
+    it('returns keyrings', () => {
+      expect(
+        selectKeyrings({
+          engine: {
+            backgroundState: {
+              KeyringController: MOCK_KEYRING_CONTROLLER,
+            },
+          },
+        } as RootState),
+      ).toEqual(MOCK_KEYRINGS);
+    });
+  });
+  describe('selectFlattenedKeyringAccounts', () => {
+    it('returns flattened keyring accounts', () => {
+      const expectedOrderedKeyringAccounts = [
+        ...MOCK_SIMPLE_ACCOUNTS,
+        ...MOCK_QR_ACCOUNTS,
+        ...MOCK_HD_ACCOUNTS,
+      ];
+      expect(
+        selectFlattenedKeyringAccounts({
+          engine: {
+            backgroundState: {
+              KeyringController: MOCK_KEYRING_CONTROLLER,
+            },
+          },
+        } as RootState),
+      ).toEqual(expectedOrderedKeyringAccounts);
+    });
+  });
+});

app/selectors/keyringController/index.ts

@@ -0,0 +1,31 @@
+import { RootState } from '../../reducers';
+import { createDeepEqualSelector } from '../util';
+
+/**
+ *
+ * @param state - Root Redux state
+ * @returns - KeyringController state
+ */
+const selectKeyringControllerState = (state: RootState) =>
+  state.engine.backgroundState.KeyringController;
+
+/**
+ * A memoized selector that retrieves keyrings from the KeyringController
+ */
+export const selectKeyrings = createDeepEqualSelector(
+  selectKeyringControllerState,
+  (keyringControllerState) => keyringControllerState.keyrings,
+);
+
+/**
+ * A memoized selector that returns the list of accounts from all keyrings in the form of a flattened array of strings.
+ */
+export const selectFlattenedKeyringAccounts = createDeepEqualSelector(
+  selectKeyrings,
+  (keyrings) => {
+    const flattenedKeyringAccounts = keyrings.flatMap(
+      (keyring) => keyring.accounts,
+    );
+    return flattenedKeyringAccounts;
+  },
+);

app/selectors/keyringController/testUtils.ts

@@ -0,0 +1,18 @@
+import {
+  KeyringControllerState,
+  KeyringObject,
+  KeyringTypes,
+} from '@metamask/keyring-controller';
+
+export const MOCK_SIMPLE_ACCOUNTS = ['0x1', '0x2'];
+export const MOCK_QR_ACCOUNTS = ['0x3', '0x4'];
+export const MOCK_HD_ACCOUNTS = ['0x5', '0x6'];
+export const MOCK_KEYRINGS: KeyringObject[] = [
+  { accounts: MOCK_SIMPLE_ACCOUNTS, type: KeyringTypes.simple },
+  { accounts: MOCK_QR_ACCOUNTS, type: KeyringTypes.qr },
+  { accounts: MOCK_HD_ACCOUNTS, type: KeyringTypes.hd },
+];
+export const MOCK_KEYRING_CONTROLLER: KeyringControllerState = {
+  isUnlocked: true,
+  keyrings: MOCK_KEYRINGS,
+};