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

[bergeron]

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.

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

Before

After

Screen.Recording.2024-08-20.at.10.42.23.AM.mov

Pre-merge author checklist

• I've followed MetaMask Contributor Docs and MetaMask Extension Coding Standards.
• 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 format if applicable
• I’ve applied the right labels on the PR (see labeling guidelines). 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.

[github-actions]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[socket-security]

New and removed dependencies detected. Learn more about Socket for GitHub ↗︎

Package	New capabilities	Transitives	Size	Publisher
npm/@metamask/[email protected]	None	0	133 kB	metamaskbot

🚮 Removed packages: npm/@metamask/[email protected]

View full report↗︎

[socket-security]

👍 Dependency issues cleared. Learn more about Socket for GitHub ↗︎

This PR previously contained dependency changes with security issues that have been resolved, removed, or ignored.

View full report↗︎

[bergeron]

@metamaskbot update-policies

[metamaskbot]

Policies updated

[bergeron]

@metamaskbot update-policies

[metamaskbot]

Policies updated

[salimtb]

@metamaskbot update-policies

[metamaskbot]

Policies updated

[bergeron]

@metamaskbot update-policies

[metamaskbot]

No policy changes

[bergeron]

@metamaskbot update-policies

[metamaskbot]

Policies updated

[salimtb]

@metamaskbot update-policies

[sonarcloud]

Quality Gate failed

Failed conditions
74.7% Coverage on New Code (required ≥ 80%)

See analysis details on SonarCloud

[bergeron]

e2e ci is flakier today despite no real changes here. Some failures have happened recently on develop and I don't think are related, like Cannot destructure property 'metamask' of 'notificationWindowState' as it is null and New hosts found: user-storage.api.cx.metamask.io

[metamaskbot]

Builds ready [9107a7b]

• builds: chrome, firefox
• builds (beta): chrome
• builds (flask): chrome, firefox
• builds (MMI): chrome, firefox
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Background Module Init Stats
• mv3: UI Init Stats
• mv3: Module Load Stats
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• code coverage: Report
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4, 5, 6
  • common: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9
  • content-script: 0
  • offscreen: 0
  • ui: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1626 ± 102 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1446	2401	1631	226	108
		domContentLoaded	1410	2278	1603	204	98
		load	1454	2320	1626	212	102
		domInteractive	14	134	33	26	12

Bundle size diffs [🚨 Warning! Bundle size has increased!]

• background: -1.63 KiB (-0.04%)
• ui: 15.42 KiB (0.21%)
• common: 9.2 KiB (0.11%)

[metamaskbot]

Missing release label release-12.5.0 on PR. Adding release label release-12.5.0 on PR and removing other release labels(release-12.6.0), as PR was added to branch 12.5.0 when release was cut.