refactor: refactor network picker

.storybook/test-data.js

@@ -1,7 +1,7 @@
 import { draftTransactionInitialState } from '../ui/ducks/send';
 import { KeyringType } from '../shared/constants/keyring';
 import { NetworkStatus } from '@metamask/network-controller';
-import { EthAccountType } from '@metamask/keyring-api';
+import { EthAccountType, EthScope } from '@metamask/keyring-api';
 import {
   CHAIN_IDS,
   LINEA_MAINNET_DISPLAY_NAME,
@@ -10,7 +10,7 @@ import { copyable, divider, heading, panel, text } from '@metamask/snaps-sdk';
 import { getJsxElementFromComponent } from '@metamask/snaps-utils';
 import { FirstTimeFlowType } from '../shared/constants/onboarding';
 import { ETH_EOA_METHODS } from '../shared/constants/eth-methods';
-import { mockNetworkState } from '../test/stub/networks';
+import { mockNetworkState, mockMultichainNetworkState } from '../test/stub/networks';
 
 const state = {
   invalidCustomNetwork: {
@@ -325,6 +325,7 @@ const state = {
           options: {},
           methods: ETH_EOA_METHODS,
           type: EthAccountType.Eoa,
+          scopes: [EthScope.Eoa],
         },
         '07c2cfec-36c9-46c4-8115-3836d3ac9047': {
           address: '0xb19ac54efa18cc3a14a5b821bfec73d284bf0c5e',
@@ -338,6 +339,7 @@ const state = {
           options: {},
           methods: ETH_EOA_METHODS,
           type: EthAccountType.Eoa,
+          scopes: [EthScope.Eoa],
         },
         '15e69915-2a1a-4019-93b3-916e11fd432f': {
           address: '0x9d0ba4ddac06032527b140912ec808ab9451b788',
@@ -351,6 +353,7 @@ const state = {
           options: {},
           methods: ETH_EOA_METHODS,
           type: EthAccountType.Eoa,
+          scopes: [EthScope.Eoa],
         },
         '784225f4-d30b-4e77-a900-c8bbce735b88': {
           address: '0xeb9e64b93097bc15f01f13eae97015c57ab64823',
@@ -364,6 +367,7 @@ const state = {
           options: {},
           methods: ETH_EOA_METHODS,
           type: EthAccountType.Eoa,
+          scopes: [EthScope.Eoa],
         },
         'b990b846-b384-4508-93d9-587461f1123e': {
           address: '0x71C7656EC7ab88b098defB751B7401B5f6d8976F',
@@ -377,6 +381,7 @@ const state = {
           options: {},
           methods: ETH_EOA_METHODS,
           type: EthAccountType.Eoa,
+          scopes: [EthScope.Eoa],
         },
       },
       selectedAccount: 'cf8dace4-9439-4bd4-b3a8-88c821c8fcb3',
@@ -1283,6 +1288,7 @@ const state = {
         nickname: 'Localhost 8545',
       },
     ),
+    ...mockMultichainNetworkState(),
     accountTokens: {
       '0x64a845a5b02460acf8a3d84503b0d68d028b4bb4': {
         '0x1': [

app/scripts/controllers/network-order.ts

@@ -1,9 +1,11 @@
+import { BtcScope, SolScope } from '@metamask/keyring-api';
 import { BaseController, RestrictedMessenger } from '@metamask/base-controller';
 import {
   NetworkControllerStateChangeEvent,
   NetworkState,
 } from '@metamask/network-controller';
-import { Hex } from '@metamask/utils';
+import { toEvmCaipChainId } from '@metamask/multichain-network-controller';
+import type { CaipChainId, Hex } from '@metamask/utils';
 import type { Patch } from 'immer';
 import { TEST_CHAINS } from '../../../shared/constants/network';
 
@@ -14,7 +16,7 @@ const controllerName = 'NetworkOrderController';
  * Information about an ordered network.
  */
 export type NetworksInfo = {
-  networkId: Hex; // The network's chain id
+  networkId: CaipChainId; // The network's chain id
 };
 
 // State shape for NetworkOrderController
@@ -112,10 +114,15 @@ export class NetworkOrderController extends BaseController<
   }: NetworkState) {
     this.update((state) => {
       // Filter out testnets, which are in the state but not orderable
-      const chainIds = Object.keys(networkConfigurationsByChainId).filter(
+      const hexChainIds = Object.keys(networkConfigurationsByChainId).filter(
         (chainId) =>
           !TEST_CHAINS.includes(chainId as (typeof TEST_CHAINS)[number]),
       ) as Hex[];
+      const chainIds: CaipChainId[] = hexChainIds.map(toEvmCaipChainId);
+      const nonEvmChainIds: CaipChainId[] = [
+        BtcScope.Mainnet,
+        SolScope.Mainnet,
+      ];
 
       const newNetworks = chainIds
         .filter(
@@ -128,7 +135,14 @@ export class NetworkOrderController extends BaseController<
 
       state.orderedNetworkList = state.orderedNetworkList
         // Filter out deleted networks
-        .filter(({ networkId }) => chainIds.includes(networkId))
+        .filter(
+          ({ networkId }) =>
+            chainIds.includes(networkId) ||
+            // Since Bitcoin and Solana are not part of the @metamask/network-controller, we have
+            // to add a second check to make sure it is not filtered out.
+            // TODO: Update this logic to @metamask/multichain-network-controller once all networks are migrated.
+            nonEvmChainIds.includes(networkId),
+        )
         // Append new networks to the end
         .concat(newNetworks);
     });
@@ -140,7 +154,7 @@ export class NetworkOrderController extends BaseController<
    * @param networkList - The list of networks to update in the state.
    */
 
-  updateNetworksList(chainIds: Hex[]) {
+  updateNetworksList(chainIds: CaipChainId[]) {
     this.update((state) => {
       state.orderedNetworkList = chainIds.map((chainId) => ({
         networkId: chainId,

app/scripts/metamask-controller.js

@@ -3324,8 +3324,10 @@ export default class MetamaskController extends EventEmitter {
       verifyPassword: this.verifyPassword.bind(this),
 
       // network management
-      setActiveNetwork: (networkConfigurationId) => {
-        return this.networkController.setActiveNetwork(networkConfigurationId);
+      setActiveNetwork: async (id) => {
+        // The multichain network controller will proxy the call to the network controller
+        // in the case that the ID is an EVM network client ID.
+        return await this.multichainNetworkController.setActiveNetwork(id);
       },
       // Avoids returning the promise so that initial call to switch network
       // doesn't block on the network lookup step

app/scripts/migrations/145.test.ts

@@ -0,0 +1,77 @@
+import { migrate, version } from './145';
+
+const oldVersion = 144;
+
+describe(`migration #${version}`, () => {
+  it('updates the version metadata', async () => {
+    const oldStorage = {
+      meta: { version: oldVersion },
+      data: {},
+    };
+    const newStorage = await migrate(oldStorage);
+    expect(newStorage.meta).toStrictEqual({ version });
+  });
+
+  describe(`migration #${version}`, () => {
+    it('does nothing if NetworkOrderController is missing', async () => {
+      const oldStorage = {
+        meta: { version: oldVersion },
+        data: {},
+      };
+      const newStorage = await migrate(oldStorage);
+      expect(newStorage.data).toStrictEqual({});
+    });
+
+    it('does nothing if NetworkOrderController is not an object', async () => {
+      const oldStorage = {
+        meta: { version: oldVersion },
+        data: {
+          NetworkOrderController: 'invalidData',
+        },
+      };
+      const newStorage = await migrate(oldStorage);
+      expect(newStorage.data).toStrictEqual(oldStorage.data);
+    });
+
+    it('changes network IDs from hex to caip', async () => {
+      const oldStorage = {
+        meta: { version: oldVersion },
+        data: {
+          NetworkOrderController: {
+            orderedNetworkList: [
+              { networkId: '0x1' },
+              { networkId: '0x5' },
+              { networkId: '0x38' },
+              { networkId: '0x2105' },
+            ],
+          },
+        },
+      };
+      const expectedData = {
+        NetworkOrderController: {
+          orderedNetworkList: [
+            { networkId: 'eip155:1' },
+            { networkId: 'eip155:5' },
+            { networkId: 'eip155:56' },
+            { networkId: 'eip155:8453' },
+          ],
+        },
+      };
+      const newStorage = await migrate(oldStorage);
+      expect(newStorage.data).toStrictEqual(expectedData);
+    });
+
+    it('does nothing if NetworkOrderController.orderedNetworkList is not an array', async () => {
+      const oldStorage = {
+        meta: { version: oldVersion },
+        data: {
+          NetworkOrderController: {
+            orderedNetworkList: 'not an array',
+          },
+        },
+      };
+      const newStorage = await migrate(oldStorage);
+      expect(newStorage.data).toStrictEqual(oldStorage.data);
+    });
+  });
+});

app/scripts/migrations/145.ts

@@ -0,0 +1,45 @@
+import { toEvmCaipChainId } from '@metamask/multichain-network-controller';
+import { type Hex, hasProperty, isObject } from '@metamask/utils';
+import { cloneDeep } from 'lodash';
+
+type VersionedData = {
+  meta: { version: number };
+  data: Record<string, unknown>;
+};
+
+export const version = 145;
+
+/**
+ * This migration updates the values of the chain IDs in the NetworkOrderController
+ * from Hex to CaipChainId format (CAIP-19).
+ *
+ * @param originalVersionedData - Versioned MetaMask extension state, exactly
+ * what we persist to disk.
+ * @returns Updated versioned MetaMask extension state.
+ */
+export async function migrate(
+  originalVersionedData: VersionedData,
+): Promise<VersionedData> {
+  const versionedData = cloneDeep(originalVersionedData);
+  versionedData.meta.version = version;
+  transformState(versionedData.data);
+  return versionedData;
+}
+
+function transformState(
+  state: Record<string, unknown>,
+): Record<string, unknown> {
+  // Migrate the user's drag + drop preference order for the network menu
+  if (
+    hasProperty(state, 'NetworkOrderController') &&
+    isObject(state.NetworkOrderController) &&
+    Array.isArray(state.NetworkOrderController.orderedNetworkList)
+  ) {
+    state.NetworkOrderController.orderedNetworkList =
+      state.NetworkOrderController.orderedNetworkList.map(({ networkId }) => ({
+        networkId: toEvmCaipChainId(networkId as Hex),
+      }));
+  }
+
+  return state;
+}

app/scripts/migrations/index.js

@@ -169,6 +169,7 @@ const migrations = [
   require('./142'),
   require('./143'),
   require('./144'),
+  require('./145'),
 ];
 
 export default migrations;

shared/constants/multichain/networks.ts

@@ -46,6 +46,14 @@ export const MULTICHAIN_ACCOUNT_TYPE_TO_MAINNET = {
   [SolAccountType.DataAccount]: MultichainNetworks.SOLANA,
 } as const;
 
+export const MULTICHAIN_NETWORK_TO_NICKNAME: Record<CaipChainId, string> = {
+  [MultichainNetworks.BITCOIN]: 'Bitcoin',
+  [MultichainNetworks.BITCOIN_TESTNET]: 'Bitcoin (testnet)',
+  [MultichainNetworks.SOLANA]: 'Solana',
+  [MultichainNetworks.SOLANA_DEVNET]: 'Solana (devnet)',
+  [MultichainNetworks.SOLANA_TESTNET]: 'Solana (testnet)',
+};
+
 export const BITCOIN_TOKEN_IMAGE_URL = './images/bitcoin-logo.svg';
 export const SOLANA_TOKEN_IMAGE_URL = './images/solana-logo.svg';
 
@@ -81,7 +89,7 @@ export const MULTICHAIN_NETWORK_BLOCK_EXPLORER_FORMAT_URLS_MAP: Record<
   },
 } as const;
 
-export const MULTICHAIN_TOKEN_IMAGE_MAP = {
+export const MULTICHAIN_TOKEN_IMAGE_MAP: Record<CaipChainId, string> = {
   [MultichainNetworks.BITCOIN]: BITCOIN_TOKEN_IMAGE_URL,
   [MultichainNetworks.SOLANA]: SOLANA_TOKEN_IMAGE_URL,
 } as const;

shared/constants/network.ts

@@ -3,6 +3,8 @@ import {
   RpcEndpointType,
 } from '@metamask/network-controller';
 import { capitalize, pick } from 'lodash';
+import { Hex } from '@metamask/utils';
+
 /**
  * A type representing built-in network types, used as an identifier.
  */
@@ -529,7 +531,7 @@ export const INFURA_PROVIDER_TYPES = [
   NETWORK_TYPES.LINEA_MAINNET,
 ] as const;
 
-export const TEST_CHAINS = [
+export const TEST_CHAINS: Hex[] = [
   CHAIN_IDS.SEPOLIA,
   CHAIN_IDS.LINEA_SEPOLIA,
   CHAIN_IDS.LOCALHOST,
@@ -797,7 +799,7 @@ export const CHAIN_ID_TO_RPC_URL_MAP = {
   [CHAIN_IDS.LOCALHOST]: LOCALHOST_RPC_URL,
 } as const;
 
-export const CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP = {
+export const CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP: Record<Hex, string> = {
   [CHAIN_IDS.MAINNET]: ETH_TOKEN_IMAGE_URL,
   [CHAIN_IDS.LINEA_GOERLI]: LINEA_GOERLI_TOKEN_IMAGE_URL,
   [CHAIN_IDS.LINEA_SEPOLIA]: LINEA_SEPOLIA_TOKEN_IMAGE_URL,