feat: Added UI for switching via dapp for custom chain id

[NidhiKJha]

This PR is to update the UI when the dapp tries to add custom Chain Id network in MetaMask

Related issues

Fixes: https://github.com/MetaMask/MetaMask-planning/issues/2661

Manual testing steps

1. Connect MetaMask to Uniswap
2. Go to Uniswap console.
3. Make an add ethereum chain call, the new popup should appear on confirmations screen

Screenshots/Recordings

Before

NA

After

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

[bergeron]

Hmmmm I got this error.

I didn't built with any env vars, just yarn; yarn webpack

Screen.Recording.2024-09-04.at.10.22.10.AM.mov

[gambinish]

Hmmmm I got this error.

I didn't built with any env vars, just yarn; yarn webpack

Screen.Recording.2024-09-04.at.10.22.10.AM.mov

I got this same error, but after setting CHAIN_PERMISSIONS env var to true in .metamaskrc I saw the expected popup behavior as expected.

Should we handle the case where this flag is not set, rather than dumping a generic error?

[gambinish]

What is the expected behavior if this feature flag is not set?

[jonybur]

Similarly to @gambinish, I get an error when not using the flag, but when the flag is on, everything works well.


If this is desired then we can move forward

[NidhiKJha]

Nice catch @bergeron . @jonybur @gambinish without feature flag it should not crash. Here is the expected behaviour in both the cases

With feature flag

Screen.Recording.2024-09-09.at.3.45.24.AM.mov

Without feature flag

Screen.Recording.2024-09-09.at.3.47.48.AM.mov

[metamaskbot]

Builds ready [1786235]

• 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
  • 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 (1641 ± 60 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	215	2155	1366	586	281
		domContentLoaded	1522	2098	1622	119	57
		load	1540	2144	1641	126	60
		domInteractive	16	70	35	16	8

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

• background: 0 Bytes (0.00%)
• ui: 23 Bytes (0.00%)
• common: 323 Bytes (0.00%)

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud

[metamaskbot]

Builds ready [c0a13ad]

• 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
  • 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 (1665 ± 123 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	210	2668	1536	498	239
		domContentLoaded	1408	2617	1650	245	118
		load	1416	2673	1665	255	123
		domInteractive	13	95	36	21	10

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

• background: 0 Bytes (0.00%)
• ui: 23 Bytes (0.00%)
• common: 323 Bytes (0.00%)

[codecov]

Codecov Report

Attention: Patch coverage is 75.00000% with 1 line in your changes missing coverage. Please review.

Project coverage is 70.17%. Comparing base (838ad26) to head (c0a13ad).

Files with missing lines	Patch %	Lines
...tions/confirmation/templates/add-ethereum-chain.js	66.67%	1 Missing ⚠️

Additional details and impacted files

@@             Coverage Diff             @@
##           develop   #26905      +/-   ##
===========================================
- Coverage    70.17%   70.17%   -0.00%     
===========================================
  Files         1425     1425              
  Lines        49659    49662       +3     
  Branches     13891    13893       +2     
===========================================
+ Hits         34846    34848       +2     
- Misses       14813    14814       +1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.