refactor: network-list-menu component

app/scripts/controller-init/confirmations/transaction-controller-init.test.ts

@@ -39,8 +39,7 @@
 
 function buildInitRequestMock(): jest.Mocked<
   ControllerInitRequest<
-    // @ts-expect-error TODO: Resolve mismatch between base-controller versions.
     TransactionControllerMessenger,
     TransactionControllerInitMessenger
   >
 > {

app/scripts/controller-init/confirmations/transaction-controller-init.ts

@@ -48,8 +48,7 @@
 
 export const TransactionControllerInit: ControllerInitFunction<
   TransactionController,
-  // @ts-expect-error TODO: Resolve mismatch between base-controller versions.
   TransactionControllerMessenger,
   TransactionControllerInitMessenger
 > = (request) => {
   const {
@@ -189,8 +188,7 @@
 
 function getControllers(
   request: ControllerInitRequest<
-    // @ts-expect-error TODO: Resolve mismatch between base-controller versions.
     TransactionControllerMessenger,
     TransactionControllerInitMessenger
   >,
 ) {

app/scripts/controller-init/controller-list.ts

@@ -16,6 +16,7 @@ import {
   MultiChainAssetsRatesController,
   MultichainBalancesController,
 } from '@metamask/assets-controllers';
+import { MultichainNetworkController } from '@metamask/multichain-network-controller';
 import { MultichainTransactionsController } from '@metamask/multichain-transactions-controller';
 import {
   CronjobController,
@@ -46,6 +47,7 @@ export type Controller =
   | MultiChainAssetsRatesController
   | MultichainBalancesController
   | MultichainTransactionsController
+  | MultichainNetworkController
   | NetworkController
   | OnboardingController
   | PermissionController<
@@ -78,6 +80,7 @@ export type ControllerFlatState = AccountsController['state'] &
   MultiChainAssetsRatesController['state'] &
   MultichainBalancesController['state'] &
   MultichainTransactionsController['state'] &
+  MultichainNetworkController['state'] &
   NetworkController['state'] &
   OnboardingController['state'] &
   PermissionController<

app/scripts/controller-init/messengers/index.ts

@@ -22,6 +22,7 @@ import {
   getMultichainBalancesControllerMessenger,
   getMultichainTransactionsControllerMessenger,
   getMultichainAssetsControllerMessenger,
+  getMultichainNetworkControllerMessenger,
   getMultiChainAssetsRatesControllerMessenger,
 } from './multichain';
 
@@ -50,6 +51,9 @@ export const CONTROLLER_MESSENGERS = {
     getMessenger: getMultichainTransactionsControllerMessenger,
     getInitMessenger: noop,
   },
+  MultichainNetworkController: {
+    getMessenger: getMultichainNetworkControllerMessenger,
+  },
   RateLimitController: {
     getMessenger: getRateLimitControllerMessenger,
     getInitMessenger: getRateLimitControllerInitMessenger,

app/scripts/controller-init/messengers/multichain/index.ts

@@ -2,8 +2,10 @@ export { getMultichainAssetsControllerMessenger } from './multichain-assets-cont
 export { getMultiChainAssetsRatesControllerMessenger } from './multichain-assets-rates-controller-messenger';
 export { getMultichainBalancesControllerMessenger } from './multichain-balances-controller-messenger';
 export { getMultichainTransactionsControllerMessenger } from './multichain-transactions-controller-messenger';
+export { getMultichainNetworkControllerMessenger } from './multichain-network-controller-messenger';
 
 export type { MultichainAssetsControllerMessenger } from './multichain-assets-controller-messenger';
 export type { MultiChainAssetsRatesControllerMessenger } from './multichain-assets-rates-controller-messenger';
 export type { MultichainBalancesControllerMessenger } from './multichain-balances-controller-messenger';
 export type { MultichainTransactionsControllerMessenger } from './multichain-transactions-controller-messenger';
+export type { MultichainNetworkControllerMessenger } from './multichain-network-controller-messenger';

app/scripts/controller-init/messengers/multichain/multichain-network-controller-messenger.test.ts

@@ -0,0 +1,14 @@
+import { Messenger, RestrictedMessenger } from '@metamask/base-controller';
+import { getMultichainNetworkControllerMessenger } from './multichain-network-controller-messenger';
+
+describe('getMultichainNetworkControllerMessenger', () => {
+  it('returns a restricted messenger', () => {
+    const messenger = new Messenger<never, never>();
+    const multichainNetworkControllerMessenger =
+      getMultichainNetworkControllerMessenger(messenger);
+
+    expect(multichainNetworkControllerMessenger).toBeInstanceOf(
+      RestrictedMessenger,
+    );
+  });
+});

app/scripts/controller-init/messengers/multichain/multichain-network-controller-messenger.ts

@@ -0,0 +1,36 @@
+import { Messenger } from '@metamask/base-controller';
+import { AccountsControllerSelectedAccountChangeEvent } from '@metamask/accounts-controller';
+import {
+  type NetworkControllerSetActiveNetworkAction,
+  type NetworkControllerGetStateAction,
+} from '@metamask/network-controller';
+
+type Actions =
+  | NetworkControllerSetActiveNetworkAction
+  | NetworkControllerGetStateAction;
+
+type Events = AccountsControllerSelectedAccountChangeEvent;
+
+export type MultichainNetworkControllerMessenger = ReturnType<
+  typeof getMultichainNetworkControllerMessenger
+>;
+
+/**
+ * Get a restricted messenger for the Multichain Network controller. This is scoped to the
+ * actions and events that the Multichain Network controller is allowed to handle.
+ *
+ * @param messenger - The controller messenger to restrict.
+ * @returns The restricted controller messenger.
+ */
+export function getMultichainNetworkControllerMessenger(
+  messenger: Messenger<Actions, Events>,
+) {
+  return messenger.getRestricted({
+    name: 'MultichainNetworkController',
+    allowedActions: [
+      'NetworkController:setActiveNetwork',
+      'NetworkController:getState',
+    ],
+    allowedEvents: ['AccountsController:selectedAccountChange'],
+  });
+}

app/scripts/controller-init/messengers/transaction-controller-messenger.ts

@@ -56,8 +56,7 @@
 export function getTransactionControllerMessenger(
   messenger: Messenger<MessengerActions, MessengerEvents>,
 ): TransactionControllerMessenger {
-  // @ts-expect-error TODO: Resolve mismatch between base-controller versions.
   return messenger.getRestricted({
     name: 'TransactionController',
     allowedActions: [
       'AccountsController:getSelectedAccount',

app/scripts/controller-init/multichain/index.ts

@@ -1,4 +1,5 @@
 export { MultichainAssetsControllerInit } from './multichain-assets-controller-init';
 export { MultichainBalancesControllerInit } from './multichain-balances-controller-init';
 export { MultichainTransactionsControllerInit } from './multichain-transactions-controller-init';
+export { MultichainNetworkControllerInit } from './multichain-network-controller-init';
 export { MultiChainAssetsRatesControllerInit } from './multichain-rates-assets-controller-init';

app/scripts/controller-init/multichain/multichain-network-controller-init.test.ts

@@ -0,0 +1,52 @@
+import { MultichainNetworkController } from '@metamask/multichain-network-controller';
+import { Messenger } from '@metamask/base-controller';
+import { buildControllerInitRequestMock } from '../test/utils';
+import { ControllerInitRequest } from '../types';
+import {
+  MultichainNetworkControllerMessenger,
+  getMultichainNetworkControllerMessenger,
+} from '../messengers/multichain';
+import { MultichainNetworkControllerInit } from './multichain-network-controller-init';
+
+jest.mock('@metamask/multichain-network-controller');
+
+const buildInitRequestMock = (): jest.Mocked<
+  ControllerInitRequest<MultichainNetworkControllerMessenger>
+> => {
+  const baseControllerMessenger = new Messenger();
+
+  return {
+    ...buildControllerInitRequestMock(),
+    controllerMessenger: getMultichainNetworkControllerMessenger(
+      baseControllerMessenger,
+    ),
+    initMessenger: undefined,
+  };
+};
+
+describe('MultichainNetworkControllerInit', () => {
+  const multichainNetworkControllerClassMock = jest.mocked(
+    MultichainNetworkController,
+  );
+
+  beforeEach(() => {
+    jest.resetAllMocks();
+  });
+
+  it('returns controller instance', () => {
+    const requestMock = buildInitRequestMock();
+    expect(
+      MultichainNetworkControllerInit(requestMock).controller,
+    ).toBeInstanceOf(MultichainNetworkController);
+  });
+
+  it('initializes with correct messenger and state', () => {
+    const requestMock = buildInitRequestMock();
+    MultichainNetworkControllerInit(requestMock);
+
+    expect(multichainNetworkControllerClassMock).toHaveBeenCalledWith({
+      messenger: requestMock.controllerMessenger,
+      state: requestMock.persistedState.MultichainNetworkController,
+    });
+  });
+});

app/scripts/controller-init/multichain/multichain-network-controller-init.ts

@@ -0,0 +1,31 @@
+import {
+  MultichainNetworkController,
+  getDefaultMultichainNetworkControllerState,
+} from '@metamask/multichain-network-controller';
+import { ControllerInitFunction } from '../types';
+import { MultichainNetworkControllerMessenger } from '../messengers/multichain';
+
+/**
+ * Initialize the Multichain Network controller.
+ *
+ * @param request - The request object.
+ * @param request.controllerMessenger - The messenger to use for the controller.
+ * @param request.persistedState - The persisted state of the extension.
+ * @returns The initialized controller.
+ */
+export const MultichainNetworkControllerInit: ControllerInitFunction<
+  MultichainNetworkController,
+  MultichainNetworkControllerMessenger
+> = ({ controllerMessenger, persistedState }) => {
+  const controller = new MultichainNetworkController({
+    messenger: controllerMessenger,
+    state: {
+      ...persistedState.MultichainNetworkController,
+      ...getDefaultMultichainNetworkControllerState(),
+    },
+  });
+
+  return {
+    controller,
+  };
+};

app/scripts/controllers/mmi-controller.test.ts

@@ -117,6 +117,7 @@ describe('MMIController', function () {
           'SnapKeyring:accountAssetListUpdated',
           'SnapKeyring:accountBalancesUpdated',
           'SnapKeyring:accountTransactionsUpdated',
+          'MultichainNetworkController:networkDidChange',
         ],
         allowedActions: [
           'AccountsController:setCurrentAccount',

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,11 @@ 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 newNetworks = chainIds
         .filter(
@@ -128,7 +131,15 @@ 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.
+            // TO DO: Update this logic to @metamask/multichain-network-controller once all networks are migrated.
+            // @ts-expect-error - BtcScope.Mainnet and SolScope.Mainnet are of type '`${string}:${string}`'
+            [BtcScope.Mainnet, SolScope.Mainnet].includes(networkId),
+        )
         // Append new networks to the end
         .concat(newNetworks);
     });
@@ -140,7 +151,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/controllers/preferences-controller.test.ts

@@ -4,6 +4,7 @@
 import { Messenger } from '@metamask/base-controller';
 import { AccountsController } from '@metamask/accounts-controller';
 import { KeyringControllerStateChangeEvent } from '@metamask/keyring-controller';
+import type { MultichainNetworkControllerNetworkDidChangeEvent } from '@metamask/multichain-network-controller';
 import { SnapControllerStateChangeEvent } from '@metamask/snaps-controllers';
 import { Hex } from '@metamask/utils';
 import {
@@ -52,6 +53,7 @@ const setupController = ({
     | SnapKeyringAccountAssetListUpdatedEvent
     | SnapKeyringAccountBalancesUpdatedEvent
     | SnapKeyringAccountTransactionsUpdatedEvent
+    | MultichainNetworkControllerNetworkDidChangeEvent
   >();
   const preferencesControllerMessenger: PreferencesControllerMessenger =
     messenger.getRestricted({
@@ -85,6 +87,7 @@ const setupController = ({
       'SnapKeyring:accountAssetListUpdated',
       'SnapKeyring:accountBalancesUpdated',
       'SnapKeyring:accountTransactionsUpdated',
+      'MultichainNetworkController:networkDidChange',
     ],
     allowedActions: [],
   });

app/scripts/metamask-controller.js

@@ -351,14 +351,15 @@ import {
   handleBridgeTransactionFailed,
   handleTransactionFailedTypeBridge,
 } from './lib/bridge-status/metrics';
-///: BEGIN:ONLY_INCLUDE_IF(build-flask)
 import {
+  ///: BEGIN:ONLY_INCLUDE_IF(build-flask)
   MultichainAssetsControllerInit,
   MultichainTransactionsControllerInit,
   MultichainBalancesControllerInit,
   MultiChainAssetsRatesControllerInit,
+  ///: END:ONLY_INCLUDE_IF
+  MultichainNetworkControllerInit,
 } from './controller-init/multichain';
-///: END:ONLY_INCLUDE_IF
 import { TransactionControllerInit } from './controller-init/confirmations/transaction-controller-init';
 import { PPOMControllerInit } from './controller-init/confirmations/ppom-controller-init';
 import { initControllers } from './controller-init/utils';
@@ -626,6 +627,7 @@ export default class MetamaskController extends EventEmitter {
         'SnapKeyring:accountAssetListUpdated',
         'SnapKeyring:accountBalancesUpdated',
         'SnapKeyring:accountTransactionsUpdated',
+        'MultichainNetworkController:networkDidChange',
       ],
       allowedActions: [
         'KeyringController:getAccounts',
@@ -2021,6 +2023,7 @@ export default class MetamaskController extends EventEmitter {
       MultichainBalancesController: MultichainBalancesControllerInit,
       MultichainTransactionsController: MultichainTransactionsControllerInit,
       ///: END:ONLY_INCLUDE_IF
+      MultichainNetworkController: MultichainNetworkControllerInit,
     };
 
     const {
@@ -2058,6 +2061,8 @@ export default class MetamaskController extends EventEmitter {
     this.multiChainAssetsRatesController =
       controllersByName.MultiChainAssetsRatesController;
     ///: END:ONLY_INCLUDE_IF
+    this.multichainNetworkController =
+      controllersByName.MultichainNetworkController;
 
     this.controllerMessenger.subscribe(
       'TransactionController:transactionStatusUpdated',
@@ -2185,6 +2190,7 @@ export default class MetamaskController extends EventEmitter {
       MetaMetricsDataDeletionController: this.metaMetricsDataDeletionController,
       AddressBookController: this.addressBookController,
       CurrencyController: this.currencyRateController,
+      MultichainNetworkController: this.multichainNetworkController,
       NetworkController: this.networkController,
       AlertController: this.alertController,
       OnboardingController: this.onboardingController,
@@ -2234,6 +2240,7 @@ export default class MetamaskController extends EventEmitter {
         MultichainTransactionsController: this.multichainTransactionsController,
         MultiChainAssetsRatesController: this.multiChainAssetsRatesController,
         ///: END:ONLY_INCLUDE_IF
+        MultichainNetworkController: this.multichainNetworkController,
         NetworkController: this.networkController,
         KeyringController: this.keyringController,
         PreferencesController: this.preferencesController,