[Sentry] feat: network controller upgrade + network editing UI

.storybook/test-data.js

@@ -2,7 +2,10 @@ 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 { CHAIN_IDS } from '../shared/constants/network';
+import {
+  CHAIN_IDS,
+  LINEA_MAINNET_DISPLAY_NAME,
+} from '../shared/constants/network';
 import { copyable, divider, heading, panel, text } from '@metamask/snaps-sdk';
 import { getJsxElementFromComponent } from '@metamask/snaps-utils';
 import { FirstTimeFlowType } from '../shared/constants/onboarding';
@@ -1218,23 +1221,37 @@ const state = {
         accounts: ['0x9d0ba4ddac06032527b140912ec808ab9451b788'],
       },
     ],
-    ...mockNetworkState({
+    ...mockNetworkState(
+      {
         id: 'test-networkConfigurationId-1',
         rpcUrl: 'https://testrpc.com',
         chainId: '0x1',
         nickname: 'mainnet',
+        name: 'mainnet',
         blockExplorerUrl: 'https://etherscan.io',
         metadata: {
           EIPS: { 1559: true },
           status: NetworkStatus.Available,
-        }
-      }, {
+        },
+      },
+      {
         id: 'test-networkConfigurationId-2',
+        rpcUrl: 'https://testrpc2.com',
+        chainId: '0xe708',
+        nickname: LINEA_MAINNET_DISPLAY_NAME,
+        name: LINEA_MAINNET_DISPLAY_NAME,
+        blockExplorerUrl: 'https://lineascan.build',
+        metadata: { EIPS: { 1559: true }, status: NetworkStatus.Available },
+      },
+      {
+        id: 'test-networkConfigurationId-3',
         rpcUrl: 'http://localhost:8545',
         chainId: '0x539',
+        name: 'test network',
         ticker: 'ETH',
         nickname: 'Localhost 8545',
-      }),
+      },
+    ),
     accountTokens: {
       '0x64a845a5b02460acf8a3d84503b0d68d028b4bb4': {
         '0x1': [
@@ -1278,6 +1295,7 @@ const state = {
     ipfsGateway: 'dweb.link',
     migratedPrivacyMode: false,
     selectedAddress: '0x9d0ba4ddac06032527b140912ec808ab9451b788',
+    selectedNetworkClientId: 'test-networkConfigurationId-1',
     metaMetricsId:
       '0xc2377d11fec1c3b7dd88c4854240ee5e3ed0d9f63b00456d98d80320337b827f',
     currentCurrency: 'usd',

app/scripts/controllers/metametrics.js

@@ -795,12 +795,12 @@ export default class MetaMetricsController {
       [MetaMetricsUserTrait.LedgerConnectionType]:
         metamaskState.ledgerTransportType,
       [MetaMetricsUserTrait.NetworksAdded]: Object.values(
-        metamaskState.networkConfigurations,
+        metamaskState.networkConfigurationsByChainId,
       ).map((networkConfiguration) => networkConfiguration.chainId),
       [MetaMetricsUserTrait.NetworksWithoutTicker]: Object.values(
-        metamaskState.networkConfigurations,
+        metamaskState.networkConfigurationsByChainId,
       )
-        .filter(({ ticker }) => !ticker)
+        .filter(({ nativeCurrency }) => !nativeCurrency)
         .map(({ chainId }) => chainId),
       [MetaMetricsUserTrait.NftAutodetectionEnabled]:
         metamaskState.useNftDetection,

app/scripts/controllers/mmi-controller.ts

@@ -26,8 +26,8 @@ import {
 } from '@metamask/message-manager';
 import { NetworkController } from '@metamask/network-controller';
 import { InternalAccount } from '@metamask/keyring-api';
+import { toHex } from '@metamask/controller-utils';
 import { toChecksumHexAddress } from '../../../shared/modules/hexstring-utils';
-import { CHAIN_IDS } from '../../../shared/constants/network';
 import { CONNECT_HARDWARE_ROUTE } from '../../../ui/helpers/constants/routes';
 import {
   MMIControllerOptions,
@@ -759,15 +759,9 @@ export default class MMIController extends EventEmitter {
       this.custodyController.getAccountDetails(address);
     const extensionId = this.extension.runtime.id;
 
-    const { networkConfigurations: networkConfigurationsById } =
-      this.networkController.state;
-    const networkConfigurations = Object.values(networkConfigurationsById);
-
-    const networks = [
-      ...networkConfigurations,
-      { chainId: CHAIN_IDS.MAINNET },
-      { chainId: CHAIN_IDS.SEPOLIA },
-    ];
+    const networks = Object.values(
+      this.networkController.state.networkConfigurationsByChainId,
+    );
 
     return handleMmiPortfolio({
       keyringAccounts,
@@ -853,26 +847,24 @@ export default class MMIController extends EventEmitter {
         internalAccount.id,
       );
     }
-    const selectedChainId = parseInt(
-      getCurrentChainId({ metamask: this.networkController.state }),
-      16,
-    );
-    if (selectedChainId !== chainId && chainId === 1) {
-      await this.networkController.setActiveNetwork('mainnet');
-    } else if (selectedChainId !== chainId) {
-      const { networkConfigurations } = this.networkController.state;
-
-      const foundNetworkConfiguration = Object.values(
-        networkConfigurations,
-      ).find(
-        (networkConfiguration) =>
-          parseInt(networkConfiguration.chainId, 16) === chainId,
-      );
 
-      if (foundNetworkConfiguration !== undefined) {
-        await this.networkController.setActiveNetwork(
-          foundNetworkConfiguration.id,
-        );
+    const selectedChainId = getCurrentChainId({
+      metamask: this.networkController.state,
+    });
+
+    if (selectedChainId !== toHex(chainId)) {
+      const networkConfiguration =
+        this.networkController.state.networkConfigurationsByChainId[
+          toHex(chainId)
+        ];
+
+      const { networkClientId } =
+        networkConfiguration?.rpcEndpoints?.[
+          networkConfiguration.defaultRpcEndpointIndex
+        ] ?? {};
+
+      if (networkClientId) {
+        await this.networkController.setActiveNetwork(networkClientId);
       }
     }