feat: Editing flow

[NidhiKJha]

This PR is to add editing flow while switching networks via dapp
NOTE: This PR doesn't include tests

Related issues

Fixes:

1. https://github.com/MetaMask/MetaMask-planning/issues/2683
2. https://github.com/MetaMask/MetaMask-planning/issues/2684
3. https://github.com/MetaMask/MetaMask-planning/issues/2697
4. https://github.com/MetaMask/MetaMask-planning/issues/2698
5. https://github.com/MetaMask/MetaMask-planning/issues/2663

Manual testing steps

1. run the extension with CHAIN_PERMISSIONS flag
2. Connect to a dapp
3. Switch network via metamask
4. toast should show up
5. Then click on edit permissions, it should route to new permissions screen
6. We have edit networks and edit accounts modal there

Screenshots/Recordings

Before

NA

After

Screen.Recording.2024-09-04.at.5.05.21.PM.mov

Screen.Recording.2024-09-04.at.5.27.57.PM.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.

[NidhiKJha]

Overall looks pretty good. I have a few questions before giving the go-ahead to merge. There are also some comments from myself and Jony that went unanswered.

I have addressed all your comments in the commits but my bad forgot to reply, apologies for that. Had addressed Jony's comment in this message #26635 (comment) but addressed them separately as well.

Lastly, I'm wondering if some of the data management that's appearing inside components should either be moved to a helper function or a selector.

I have tried to create selectors for most of the functions that are used in multiple components. But can take a look and move the data management to selectors

[metamaskbot]

Builds ready [d065a0c]

• 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 (1826 ± 74 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1633	2327	1810	143	68
		domContentLoaded	1622	2116	1775	111	53
		load	1631	2352	1826	153	74
		domInteractive	13	255	63	69	33

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

• background: 1.17 KiB (0.03%)
• ui: 28.06 KiB (0.39%)
• common: 5.68 KiB (0.07%)

[metamaskbot]

Builds ready [5eff06e]

• 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 (1939 ± 90 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1635	2386	1942	186	89
		domContentLoaded	1626	2381	1910	190	91
		load	1635	2386	1939	188	90
		domInteractive	20	80	44	18	9

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

• background: 1.17 KiB (0.03%)
• ui: 28.37 KiB (0.39%)
• common: 5.76 KiB (0.07%)

[sonarcloud]

Quality Gate failed

Failed conditions
24.9% Coverage on New Code (required ≥ 80%)
C Reliability Rating on New Code (required ≥ A)

See analysis details on SonarCloud

Catch issues before they fail your Quality Gate with our IDE extension SonarLint