feat: network controller upgrade + network editing UI (#26433)

## **Description**

This PR upgrades the network controller, and enables a new UI for adding
and editing networks.

The network controller changes are described in full in
MetaMask/core#4286

In short, there's now a single network per chain id. Multiple RPC
endpoints for a chain are now represented as an array under the single
network configuration, instead of being separate networks. Each network
has some RPC endpoint chosen as the default. Also the built in Infura
networks are now represented in state, where they were not before.

A migration is added to transform the network controller state to this
new format.

For the UI, networks are now added, edited, and deleted directly in the
network list. Networks are no longer edited via the settings page.

Users with multiple RPC endpoints per chain are shown a modal upon
upgrade, allowing them to select a different endpoint as the default.

The UI for `wallet_addEthereumChain` is changed, to message that users
may be adding an additional endpoint to an existing network, rather than
adding a new network.

This PR contains both the controller upgrade and UI, because it's not
possible to perfectly recrate the old UI with the new state or vice
versa.

To minimize changes, some selectors are shimmed to return equivalent
data. This includes `getProviderConfig` and `getCurrentNetwork`.

Other selectors have been removed in favor of selecting the new state,
as there was no behavior that satisfied every caller. This includes
`getNetworkConfigurations` and its dependents like `getNonTestNetworks`
`getTestNetworks`. Places listing networks now go through the new
`getNetworkConfigurationsByChainId`.


[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/26433?quickstart=1)

## **Related issues**

Fixes:

## **Manual testing steps**


1. Upgrade from an older build with custom networks
2. Verify they all still appear in the network dropdown
- Verify multiple endpoints for the same chain have been merged into 1
network with multiple RPC endponits
3. Click the network dropdown
4. Try:
   - Adding popular networks
   - Adding a custom network
   - Editing an existing network
   - Deleting an existing network
5. Try adding a new network via a dapp
6. Try adding a new RPC endpoint to an existing network via a dapp

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**



https://github.com/user-attachments/assets/dd215f30-9c83-4490-83c3-8aaf39412763



## **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/develop/.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/develop/.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.

---------

Co-authored-by: salimtb <[email protected]>
Co-authored-by: MetaMask Bot <[email protected]>
Co-authored-by: David Walsh <[email protected]>
Co-authored-by: Howard Braham <[email protected]>
Co-authored-by: Maarten Zuidhoorn <[email protected]>

.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',

.yarn/patches/@metamask-network-controller-npm-20.2.0-98b1a5ae59.patch → .yarn/patches/@metamask-network-controller-npm-21.0.0-559aa8e395.patch

@@ -7,26 +7,26 @@ index 0000000000000000000000000000000000000000..78b9156dc2b0bf7c33dadf325cb3ec0b
 +We remove `lookupNetwork` from `initializeProvider` in the network controller to prevent network requests before user onboarding is completed.
 +The network lookup is done after onboarding is completed, and when the extension reloads if onboarding has been completed.
 +This patch is part of a temporary fix that will be reverted soon to make way for a more permanent solution. https://github.com/MetaMask/metamask-extension/pull/23005
-diff --git a/dist/chunk-BEL2VMHN.js b/dist/chunk-BEL2VMHN.js
-index fcf6c5ad51d0db75cf0e3219a569e17437a55486..751447609c924e626c0f442931eb77687b160e42 100644
---- a/dist/chunk-BEL2VMHN.js
-+++ b/dist/chunk-BEL2VMHN.js
-@@ -315,7 +315,6 @@ var NetworkController = class extends _basecontroller.BaseController {
+diff --git a/dist/chunk-BV3ZGWII.mjs b/dist/chunk-BV3ZGWII.mjs
+index 0d1bf3b6348ad4ec7a799083fcadf36f9fc74851..48a09c6e474da9c18115bec88130a88888337044 100644
+--- a/dist/chunk-BV3ZGWII.mjs
++++ b/dist/chunk-BV3ZGWII.mjs
+@@ -468,7 +468,6 @@ var NetworkController = class extends BaseController {
     */
    async initializeProvider() {
-     _chunkZ4BLTVTBjs.__privateMethod.call(void 0, this, _applyNetworkSelection, applyNetworkSelection_fn).call(this, this.state.selectedNetworkClientId);
+     __privateMethod(this, _applyNetworkSelection, applyNetworkSelection_fn).call(this, this.state.selectedNetworkClientId);
 -    await this.lookupNetwork();
    }
    /**
     * Refreshes the network meta with EIP-1559 support and the network status
-diff --git a/dist/chunk-RTMQACMX.mjs b/dist/chunk-RTMQACMX.mjs
-index fc6ae58a396aaa062e8d9a8de2cddd5ef073a5a4..2a6f811c10a0ed3fc943f4672b21a5d1c195c7cd 100644
---- a/dist/chunk-RTMQACMX.mjs
-+++ b/dist/chunk-RTMQACMX.mjs
-@@ -315,7 +315,6 @@ var NetworkController = class extends BaseController {
+diff --git a/dist/chunk-YOHMQPGM.js b/dist/chunk-YOHMQPGM.js
+index ff15cd78ef90b35f86aae9dc64d17d1d2efe352d..14a8bba39c204585164dfb252d0a183844a58d63 100644
+--- a/dist/chunk-YOHMQPGM.js
++++ b/dist/chunk-YOHMQPGM.js
+@@ -468,7 +468,6 @@ var NetworkController = class extends _basecontroller.BaseController {
     */
    async initializeProvider() {
-     __privateMethod(this, _applyNetworkSelection, applyNetworkSelection_fn).call(this, this.state.selectedNetworkClientId);
+     _chunkZ4BLTVTBjs.__privateMethod.call(void 0, this, _applyNetworkSelection, applyNetworkSelection_fn).call(this, this.state.selectedNetworkClientId);
 -    await this.lookupNetwork();
    }
    /**