refactor: refactor network picker

[gantunesr]

Description

Related issues

Fixes: https://github.com/MetaMask/accounts-planning/issues/833
Fixes: https://github.com/MetaMask/accounts-planning/issues/811

Manual testing steps

Note: UX changes should only be present in Flask/Beta

1. Go to the experimental settings view and enable Solana
2. See that the Solana network is now added to the network picker
3. Select the network
4. An account creation flow should be displayed
5. Complete the flow and add a Solana account
6. Change multiple times between accounts and networks
7. Verify that the relation network-account is always correct
   • Solana Account <> Solana Network
   • EVM Account <> EVM Network

Screenshots/Recordings

Before

Screen.Recording.2025-02-24.at.9.55.07.AM.mov

After

Screen.Recording.2025-02-24.at.10.01.45.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.

[metamaskbot]

Builds ready [edf1786]

• builds: chrome, firefox
• builds (flask): chrome, firefox
• builds (MMI): chrome
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

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

Page Load Metrics (2008 ± 96 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1635	2324	2011	209	100
		domContentLoaded	1629	2255	1977	192	92
		load	1634	2325	2008	201	96
		domInteractive	27	124	48	26	13
		backgroundConnect	10	140	36	32	15
		firstReactRender	15	77	29	19	9
		getState	5	64	19	18	8
		initialActions	0	1	0	0	0
		loadScripts	1210	1776	1502	161	77
		setupStore	8	58	26	20	10
		uiStartup	1903	2635	2308	215	103

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

• background: 2.24 KiB (0.04%)
• ui: 1.6 MiB (21.56%)
• common: 4.41 KiB (0.05%)

[metamaskbot]

Builds ready [27c0a3d]

• builds: chrome, firefox
• builds (flask): chrome, firefox
• builds (MMI): chrome
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

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

Page Load Metrics (1716 ± 66 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	344	2019	1643	324	155
		domContentLoaded	1466	1989	1694	135	65
		load	1512	2024	1716	138	66
		domInteractive	25	129	47	29	14
		backgroundConnect	9	59	21	14	7
		firstReactRender	14	76	37	23	11
		getState	4	59	17	20	10
		initialActions	0	48	5	14	7
		loadScripts	1051	1539	1248	124	60
		setupStore	7	76	12	15	7
		uiStartup	1719	2274	1940	144	69

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

• background: 2.26 KiB (0.04%)
• ui: 1.6 MiB (21.55%)
• common: 4.41 KiB (0.05%)

[NidhiKJha]

Great work! Before I approve:

1. UX bug: I believe, this is not a network picker bug but while creating Solana accounts from settings page, the modal appears behind the page which seems confusing.

Screen.Recording.2025-02-25.at.10.05.07.AM.mov

2. Are we not adding the support to edit RPC URL for Solana network like other EVM networks?

[gantunesr]

Good catch @NidhiKJha!

UX bug: I believe, this is not a network picker bug but while creating Solana accounts from settings page, the modal appears behind the page which seems confusing.

Indeed this is not a bug introduced in this PR, I'll open a ticket for us to fix it

Are we not adding the support to edit RPC URL for Solana network like other EVM networks?

No, since the snap abstracts this away from the client and there is no snap API that allows the client to get/update this information

[ccharly]

Code LGTM (thanks for all the changes).

Here are some screenshots from my testing:

• The migration
  

• Enabling bitcoin support (needs to enable this in the builds.yml)
  

• Logic works fine when selecting an account/network (the other part is switching automatically)

---

Warning

Small issue with the Bitcoin testnet support (which is OK for now, since we've disabled Bitcoin support temporarily)

Now, the only issue I have found so far, is with "Bitcoin testnet". We don't have this network yet (and the logic to associate accounts and their networks is a bit incorrect on the AccountsController: https://github.com/MetaMask/core/blob/main/packages/accounts-controller/src/AccountsController.ts#L1017-L1019, I'm currently fixing this now).

Back to the problem, if we use an account that uses a scopes that is not associated with one of our non-EVM network, the wallet will be kinda blocked with this screen:

We can fix this issue in another PR, cause I think part of the MultichainNetworkController logic might have to be updated for this.

[metamaskbot]

Builds ready [40cd6de]

• builds: chrome, firefox
• builds (flask): chrome, firefox
• builds (MMI): chrome
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

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

Page Load Metrics (1753 ± 118 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	272	2260	1516	545	262
		domContentLoaded	1422	2163	1722	250	120
		load	1465	2178	1753	245	118
		domInteractive	24	119	44	24	12
		backgroundConnect	12	82	36	20	10
		firstReactRender	14	88	30	21	10
		getState	5	78	25	23	11
		initialActions	0	1	0	0	0
		loadScripts	1018	1643	1293	211	101
		setupStore	7	59	14	13	6
		uiStartup	1670	2849	2034	338	163

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

• background: 2.26 KiB (0.04%)
• ui: 9.1 KiB (0.12%)
• common: 4.41 KiB (0.04%)

[NidhiKJha]

Solana setting is missing in experimental settings. By default it's being added in the network list.
https://github.com/user-attachments/assets/fd77cedc-061b-407c-bf87-1092c80f6748

[NidhiKJha]

LGTM