feat: update import SRP UI #31098

vinnyhoward · 2025-03-18T22:08:41Z

Description

Cleaned up and simplified import SRP flow according to @yanrong-chen specifications:

Simplified import SRP UI by removing redundant "Type your Secret Recovery Phrase" title. The input boxes as well as page description already infer what the use needs to do
Removed extra margins
Left aligned section description
Extended SRP dropdown word amount dropdown length
Changed circle encompassing step 2 at the top from gray to black (tested in both light and dark mode)
Moved SRP on change handler into useCallback

Related issues

Fixes:

Manual testing steps

Install fresh app
Goto import flow
Observe updated UI changes for SRP import

Screenshots/Recordings

NA

Before

After

Dark Mode

Light Mode

With Errors

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 · 2025-03-18T22:08:54Z

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.

darkwing · 2025-03-18T22:27:15Z

ui/components/app/srp-input/srp-input.js

+        />
+        <Dropdown
+          className="import-srp__number-of-words-dropdown"
+          onChange={(newSelectedOption) => {


Can we move this out of an inline function into a useCallback usage?

Great suggestion! I'll do it now

metamaskbot · 2025-03-18T22:54:20Z

Builds ready [69602d9]

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, 8
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14
- ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
- content-script: 0
- offscreen: 0

Page Load Metrics (5600 ± 2553 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	312	21136	5243	5251	2521
		domContentLoaded	2041	20994	5004	5063	2431
		load	2072	21066	5600	5316	2553
		domInteractive	32	1107	152	234	112
		backgroundConnect	34	2036	564	549	264
		firstReactRender	27	240	102	52	25
		getState	18	848	222	234	112
		initialActions	0	17	1	4	2
		loadScripts	1548	20382	4223	4960	2382
		setupStore	15	532	135	135	65
		uiStartup	2453	23927	8485	6131	2944

Bundle size diffs [🚀 Bundle size reduced!]

background: 0 Bytes (0.00%)
ui: 78 Bytes (0.00%)
common: -57 Bytes (-0.00%)

…2 border to black

metamaskbot · 2025-03-18T23:49:27Z

Builds ready [ead672e]

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, 8
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14
- ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
- content-script: 0
- offscreen: 0

Page Load Metrics (2546 ± 315 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	378	3872	2234	699	336
		domContentLoaded	1511	3481	1992	446	214
		load	1691	4138	2546	655	315
		domInteractive	24	85	35	16	8
		backgroundConnect	171	1351	496	317	152
		firstReactRender	41	239	105	49	24
		getState	75	1128	304	259	124
		initialActions	0	1	0	0	0
		loadScripts	1102	2028	1353	228	110
		setupStore	30	314	123	91	44
		uiStartup	2809	11211	5306	2441	1172

Bundle size diffs [🚀 Bundle size reduced!]

background: 0 Bytes (0.00%)
ui: 115 Bytes (0.00%)
common: -57 Bytes (-0.00%)

metamaskbot · 2025-03-19T15:41:13Z

Builds ready [ead672e]

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, 8
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14
- ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
- content-script: 0
- offscreen: 0

Page Load Metrics (2546 ± 315 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	378	3872	2234	699	336
		domContentLoaded	1511	3481	1992	446	214
		load	1691	4138	2546	655	315
		domInteractive	24	85	35	16	8
		backgroundConnect	171	1351	496	317	152
		firstReactRender	41	239	105	49	24
		getState	75	1128	304	259	124
		initialActions	0	1	0	0	0
		loadScripts	1102	2028	1353	228	110
		setupStore	30	314	123	91	44
		uiStartup	2809	11211	5306	2441	1172

Bundle size diffs [🚀 Bundle size reduced!]

background: 0 Bytes (0.00%)
ui: 115 Bytes (0.00%)
common: -57 Bytes (-0.00%)

metamaskbot · 2025-03-19T16:27:49Z

Builds ready [fa2714c]

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, 8
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14
- ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
- content-script: 0
- offscreen: 0

Page Load Metrics (2545 ± 324 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1630	3767	2292	513	246
		domContentLoaded	1526	3065	1930	367	176
		load	1675	4320	2545	675	324
		domInteractive	25	182	65	42	20
		backgroundConnect	148	1300	554	324	155
		firstReactRender	79	271	120	44	21
		getState	74	872	303	217	104
		initialActions	0	1	0	0	0
		loadScripts	1118	1810	1323	198	95
		setupStore	35	317	153	74	36
		uiStartup	2661	13872	5716	2861	1374

Bundle size diffs [🚀 Bundle size reduced!]

background: 0 Bytes (0.00%)
ui: 115 Bytes (0.00%)
common: -57 Bytes (-0.00%)

feat: update SRP UI and removed typeYourSRP title

b3fa0e0

vinnyhoward added the team-wallet-ux label Mar 18, 2025

vinnyhoward requested a review from a team as a code owner March 18, 2025 22:08

fix: update class name that is causing conflicts

69602d9

darkwing reviewed Mar 18, 2025

View reviewed changes

feat: moved srp on change handler into use callback and changed step …

ead672e

…2 border to black

fix: css lint issues

fa2714c

darkwing approved these changes Mar 19, 2025

View reviewed changes

NidhiKJha approved these changes Mar 19, 2025

View reviewed changes

vinnyhoward added this pull request to the merge queue Mar 19, 2025

Merged via the queue into main with commit 01b57c9 Mar 19, 2025
76 checks passed

vinnyhoward deleted the feat-update-import-srp-ui branch March 19, 2025 18:43

github-actions bot locked and limited conversation to collaborators Mar 19, 2025

metamaskbot added the release-12.16.0 Issue or pull request that will be included in release 12.16.0 label Mar 19, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: update import SRP UI #31098

feat: update import SRP UI #31098

vinnyhoward commented Mar 18, 2025 •

edited

Loading

github-actions bot commented Mar 18, 2025

darkwing Mar 18, 2025

vinnyhoward Mar 18, 2025

vinnyhoward Mar 18, 2025

metamaskbot commented Mar 18, 2025

metamaskbot commented Mar 18, 2025

metamaskbot commented Mar 19, 2025

metamaskbot commented Mar 19, 2025

feat: update import SRP UI #31098

feat: update import SRP UI #31098

Conversation

vinnyhoward commented Mar 18, 2025 • edited Loading

Description

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Dark Mode

Light Mode

With Errors

Pre-merge author checklist

Pre-merge reviewer checklist

github-actions bot commented Mar 18, 2025

darkwing Mar 18, 2025

Choose a reason for hiding this comment

vinnyhoward Mar 18, 2025

Choose a reason for hiding this comment

vinnyhoward Mar 18, 2025

Choose a reason for hiding this comment

metamaskbot commented Mar 18, 2025

metamaskbot commented Mar 18, 2025

metamaskbot commented Mar 19, 2025

metamaskbot commented Mar 19, 2025

vinnyhoward commented Mar 18, 2025 •

edited

Loading