feat: multi RPC editor #25219

bergeron · 2024-06-11T15:19:36Z

Description

Initial UI for a multi rpc editor in the network form.

Screen.Recording.2024-06-12.at.10.50.27.PM.mov

Related issues

Manual testing steps

build with yarn; ENABLE_NETWORK_UI_REDESIGN=1 yarn start
Settings -> networks
Should see multi rpc dropdown on ethereum network

Screenshots/Recordings

Before

After

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 · 2024-06-11T15:19:51Z

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.

bergeron · 2024-06-11T15:47:56Z

ui/pages/settings/networks-tab/networks-form/rpc-url-editor.tsx

+        <Text variant={TextVariant.bodySm}>{dummyRpcEndpoints[0]}</Text>
+        <Icon name={isOpen ? IconName.ArrowUp : IconName.ArrowDown} />
+      </Box>
+      <Popover


The width of this popover is just based on contents for now. Will need to be constrained once this form becomes a fullscreen/modal.

ui/pages/settings/networks-tab/networks-form/rpc-url-editor.tsx

darkwing · 2024-06-11T22:36:01Z

Good start here!

… brian/multi-rpc-editor

codecov · 2024-06-13T16:52:38Z

Codecov Report

Attention: Patch coverage is 28.57143% with 15 lines in your changes missing coverage. Please review.

Project coverage is 65.67%. Comparing base (743f5ec) to head (8dfde99).
Report is 1 commits behind head on develop.

Files	Patch %	Lines
...ings/networks-tab/networks-form/rpc-url-editor.tsx	6.67%	14 Missing ⚠️
...ttings/networks-tab/networks-form/networks-form.js	83.33%	1 Missing ⚠️

Additional details and impacted files

@@             Coverage Diff             @@
##           develop   #25219      +/-   ##
===========================================
- Coverage    65.68%   65.67%   -0.02%     
===========================================
  Files         1377     1378       +1     
  Lines        54623    54640      +17     
  Branches     14320    14325       +5     
===========================================
+ Hits         35879    35881       +2     
- Misses       18744    18759      +15

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

metamaskbot · 2024-06-13T17:06:30Z

Builds ready [18e2b99]

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, 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 (52 ± 4 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	71	100	84	7	3
		domContentLoaded	9	13	11	1	1
		load	40	71	52	7	4
		domInteractive	9	13	11	1	1

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

background: 1 Bytes (0.00%)
ui: 4.04 KiB (0.06%)
common: 76 Bytes (0.00%)

ui/pages/settings/networks-tab/networks-form/rpc-url-editor.tsx

salimtb · 2024-06-14T14:17:44Z

LGTM , works as expected ✅

metamaskbot · 2024-06-14T18:02:22Z

Builds ready [8dfde99]

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, 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 (134 ± 182 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	57	210	84	30	14
		domContentLoaded	8	18	11	2	1
		load	38	1786	134	379	182
		domInteractive	8	18	11	2	1

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

background: 0 Bytes (0.00%)
ui: 4.17 KiB (0.06%)
common: 76 Bytes (0.00%)

bergeron · 2024-06-18T15:50:09Z

I've got pending improvements on top of this, but think this PR is a good checkpoint

darkwing

PR looks good overall; only issue is that a current RPC isn't provided but since we're dealing with dummy RPCs this is fine for now.

multi rpc url editor

54f2ec4

bergeron added the team-assets label Jun 11, 2024

bergeron requested a review from a team as a code owner June 11, 2024 15:19

Merge branch 'develop' into brian/multi-rpc-editor

34c61c6

bergeron commented Jun 11, 2024

View reviewed changes

ui/pages/settings/networks-tab/networks-form/rpc-url-editor.tsx Outdated Show resolved Hide resolved

bergeron commented Jun 11, 2024

View reviewed changes

ui/pages/settings/networks-tab/networks-form/rpc-url-editor.tsx Outdated Show resolved Hide resolved

bergeron commented Jun 11, 2024

View reviewed changes

ui/pages/settings/networks-tab/networks-form/rpc-url-editor.tsx Show resolved Hide resolved

darkwing reviewed Jun 11, 2024

View reviewed changes

ui/pages/settings/networks-tab/networks-form/rpc-url-editor.tsx Outdated Show resolved Hide resolved

bergeron added 3 commits June 12, 2024 14:43

Merge branch 'develop' of github.com:MetaMask/metamask-extension into…

ea4df16

… brian/multi-rpc-editor

localize + lint

78d89b0

make clickable things accessible, add blue pill for selected one

abcddff

bergeron requested a review from salimtb June 13, 2024 05:55

bergeron added the needs-assets-ux-review A shared label between the Assets and UX team to flag PRs ready for consolidated team review. label Jun 13, 2024

use 1 real rpc endpoint

18e2b99

darkwing reviewed Jun 13, 2024

View reviewed changes

ui/pages/settings/networks-tab/networks-form/rpc-url-editor.tsx Show resolved Hide resolved

salimtb previously approved these changes Jun 14, 2024

View reviewed changes

Text as button instead of ButtonLink

4203a38

bergeron dismissed salimtb’s stale review via 4203a38 June 14, 2024 17:08

bergeron added 2 commits June 14, 2024 10:14

Merge branch 'develop' into brian/multi-rpc-editor

bcd6d3a

lint

8dfde99

salimtb approved these changes Jun 18, 2024

View reviewed changes

darkwing approved these changes Jun 18, 2024

View reviewed changes

bergeron merged commit 906f7d3 into develop Jun 18, 2024
74 checks passed

bergeron deleted the brian/multi-rpc-editor branch June 18, 2024 19:56

github-actions bot locked and limited conversation to collaborators Jun 18, 2024

metamaskbot added the release-12.1.0 Issue or pull request that will be included in release 12.1.0 label Jun 18, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: multi RPC editor #25219

feat: multi RPC editor #25219

bergeron commented Jun 11, 2024 •

edited

Loading

github-actions bot commented Jun 11, 2024

bergeron Jun 11, 2024

darkwing commented Jun 11, 2024

codecov bot commented Jun 13, 2024 •

edited

Loading

metamaskbot commented Jun 13, 2024

salimtb commented Jun 14, 2024

metamaskbot commented Jun 14, 2024

bergeron commented Jun 18, 2024

darkwing left a comment •

edited

Loading

feat: multi RPC editor #25219

feat: multi RPC editor #25219

Conversation

bergeron commented Jun 11, 2024 • edited Loading

Description

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

github-actions bot commented Jun 11, 2024

bergeron Jun 11, 2024

Choose a reason for hiding this comment

darkwing commented Jun 11, 2024

codecov bot commented Jun 13, 2024 • edited Loading

Codecov Report

metamaskbot commented Jun 13, 2024

salimtb commented Jun 14, 2024

metamaskbot commented Jun 14, 2024

bergeron commented Jun 18, 2024

darkwing left a comment • edited Loading

Choose a reason for hiding this comment

bergeron commented Jun 11, 2024 •

edited

Loading

codecov bot commented Jun 13, 2024 •

edited

Loading

darkwing left a comment •

edited

Loading