fix: Polish onboarding UI #36570

amandaye0h · 2025-10-03T13:32:59Z

Description

Changelog

CHANGELOG entry:

Related issues

Fixes:

Manual testing steps

Go to this page...

Screenshots/Recordings

Before

After

Screen.Recording.2025-10-03.at.9.20.10.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.

…eadability

github-actions · 2025-10-03T13:33:08Z

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.

metamaskbot · 2025-10-03T13:35:15Z

✨ Files requiring CODEOWNER review ✨

🔐 @MetaMask/web3auth (14 files, +350 -310)

📁 ui/
- 📁 pages/
  - 📁 onboarding-flow/
    - 📁 create-password/
      - 📄 create-password.js +45 -34
    - 📁 creation-successful/
      - 📄 creation-successful.js +1 -1
    - 📁 import-srp/
      - 📄 import-srp.js +46 -37
    - 📁 metametrics/
      - 📁 __snapshots__/
        
        📄 metametrics.test.js.snap +2 -2
        
        📄 metametrics.js +49 -32
        
        📄 metametrics.test.js +1 -1
    - 📁 onboarding-app-header/
      - 📄 index.scss +3 -3
      - 📄 onboarding-app-header.js +6 -3
    - 📁 privacy-settings/
      - 📄 privacy-settings.js +25 -47
    - 📁 recovery-phrase/
      - 📄 confirm-recovery-phrase.js +53 -52
      - 📄 review-recovery-phrase.js +64 -54
    - 📁 welcome/
      - 📄 login-options.tsx +52 -39
      - 📄 index.scss +1 -1
      - 📄 onboarding-flow.js +2 -4

metamaskbot · 2025-10-03T13:59:27Z

📊 Page Load Benchmark Results

Current Commit: c5fb720 | Date: 10/3/2025

📄 Localhost MetaMask Test Dapp

Samples: 100

Summary

pageLoadTime-> current mean value: 1.06s (±71ms) 🟡 | historical mean value: 1.06s ⬇️ (historical data)
domContentLoaded-> current mean value: 740ms (±68ms) 🟢 | historical mean value: 741ms ⬇️ (historical data)
firstContentfulPaint-> current mean value: 77ms (±11ms) 🟢 | historical mean value: 81ms ⬇️ (historical data)

📈 Detailed Results

Metric	Mean	Std Dev	Min	Max	P95	P99
pageLoadTime	1.06s	71ms	1.01s	1.33s	1.27s	1.33s
domContentLoaded	740ms	68ms	699ms	1.01s	941ms	1.01s
firstPaint	77ms	11ms	60ms	168ms	88ms	168ms
firstContentfulPaint	77ms	11ms	60ms	168ms	88ms	168ms
largestContentfulPaint	0ms	0ms	0ms	0ms	0ms	0ms

Results generated automatically by MetaMask CI

metamaskbot · 2025-10-03T13:59:34Z

Builds ready [c5fb720]

builds: chrome, firefox
builds (beta): chrome, firefox
builds (flask): chrome, firefox
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
bundle size: Bundle Size Stats
user-actions-benchmark: User 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
- ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14
- content-script: 0
- offscreen: 0

UI Startup Metrics (1251 ± 78 ms)

Platform	BuildType	Page	Metric	Mean (ms)	Min (ms)	Max (ms)	Std Dev (ms)	P 75 (ms)	P 95 (ms)
Chrome	Browserify	Home	uiStartup	1251	1110	1442	78	1298	1412
			load	1080	955	1273	73	1120	1232
			domContentLoaded	1072	914	1266	75	1113	1224
			domInteractive	18	13	51	7	18	36
			firstPaint	577	77	1276	432	1080	1152
			backgroundConnect	253	240	369	14	257	267
			firstReactRender	24	15	92	8	25	37
			getState	14	5	86	11	18	26
			initialActions	4	0	20	4	5	12
			loadScripts	826	668	1019	74	871	978
			setupStore	9	6	24	3	10	17
	Webpack	Home	uiStartup	1937	1485	2577	284	2144	2439
			load	1558	1196	1976	224	1726	1914
			domContentLoaded	1550	1183	1971	224	1720	1901
			domInteractive	18	12	111	16	15	67
			firstPaint	163	64	453	63	181	290
			backgroundConnect	32	16	323	40	31	56
			firstReactRender	73	36	335	47	74	127
			getState	35	4	296	77	13	275
			initialActions	5	2	24	4	5	14
			loadScripts	1547	1181	1960	222	1718	1898
			setupStore	18	5	278	45	11	25
Firefox	Browserify	Home	uiStartup	1394	1190	1779	116	1455	1646
			load	1210	1040	1485	92	1283	1361
			domContentLoaded	1210	1040	1484	92	1283	1361
			domInteractive	108	33	364	63	108	272
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	29	18	117	13	32	49
			firstReactRender	27	23	43	3	28	33
			getState	7	3	68	8	6	15
			initialActions	3	1	10	1	3	5
			loadScripts	1188	1023	1468	91	1262	1336
			setupStore	8	5	42	5	8	13
	Webpack	Home	uiStartup	1559	1383	2247	184	1627	1955
			load	1315	1157	1735	138	1406	1614
			domContentLoaded	1315	1157	1735	138	1406	1614
			domInteractive	104	34	337	65	100	323
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	34	21	122	11	38	43
			firstReactRender	37	32	52	4	40	46
			getState	11	3	228	31	6	18
			initialActions	6	1	191	21	3	12
			loadScripts	1291	1132	1674	137	1380	1587
			setupStore	10	6	108	11	9	21

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

background: 58 Bytes (0%)
ui: 555 Bytes (0.01%)
common: -34 Bytes (0%)

metamaskbot · 2025-10-04T05:12:45Z

📊 Page Load Benchmark Results

Current Commit: e5a772f | Date: 10/4/2025

📄 Localhost MetaMask Test Dapp

Samples: 100

Summary

pageLoadTime-> current mean value: 1.04s (±71ms) 🟡 | historical mean value: 1.05s ⬇️ (historical data)
domContentLoaded-> current mean value: 732ms (±69ms) 🟢 | historical mean value: 738ms ⬇️ (historical data)
firstContentfulPaint-> current mean value: 76ms (±12ms) 🟢 | historical mean value: 80ms ⬇️ (historical data)

📈 Detailed Results

Metric	Mean	Std Dev	Min	Max	P95	P99
pageLoadTime	1.04s	71ms	1.01s	1.33s	1.29s	1.33s
domContentLoaded	732ms	69ms	695ms	1.01s	965ms	1.01s
firstPaint	76ms	12ms	56ms	176ms	88ms	176ms
firstContentfulPaint	76ms	12ms	56ms	176ms	88ms	176ms
largestContentfulPaint	0ms	0ms	0ms	0ms	0ms	0ms

Results generated automatically by MetaMask CI

metamaskbot · 2025-10-04T05:12:58Z

Builds ready [e5a772f]

builds: chrome, firefox
builds (beta): chrome, firefox
builds (flask): chrome, firefox
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
bundle size: Bundle Size Stats
user-actions-benchmark: User 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
- ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14
- content-script: 0
- offscreen: 0

UI Startup Metrics (1256 ± 70 ms)

Platform	BuildType	Page	Metric	Mean (ms)	Min (ms)	Max (ms)	Std Dev (ms)	P 75 (ms)	P 95 (ms)
Chrome	Browserify	Home	uiStartup	1256	1132	1395	70	1307	1385
			load	1082	972	1218	64	1135	1181
			domContentLoaded	1075	959	1212	64	1129	1174
			domInteractive	18	13	120	12	16	36
			firstPaint	659	65	1207	444	1099	1158
			backgroundConnect	254	240	277	7	260	265
			firstReactRender	24	18	50	5	24	36
			getState	12	5	69	8	15	25
			initialActions	6	1	86	11	5	24
			loadScripts	827	709	966	64	881	936
			setupStore	9	6	28	3	9	14
	Webpack	Home	uiStartup	1819	1562	2179	152	1956	2095
			load	1503	1359	1775	87	1556	1660
			domContentLoaded	1490	1354	1760	84	1543	1624
			domInteractive	17	11	114	15	13	51
			firstPaint	293	52	1732	456	192	1541
			backgroundConnect	33	16	140	15	38	54
			firstReactRender	46	18	169	21	52	68
			getState	12	4	44	6	14	23
			initialActions	4	0	28	6	3	22
			loadScripts	1486	1351	1755	82	1541	1618
			setupStore	13	4	119	13	14	38
Firefox	Browserify	Home	uiStartup	1367	1213	2050	141	1401	1720
			load	1171	1059	1364	80	1224	1327
			domContentLoaded	1171	1059	1364	80	1224	1327
			domInteractive	99	32	321	58	94	249
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	29	19	75	11	33	51
			firstReactRender	28	24	49	4	29	38
			getState	12	4	160	30	6	93
			initialActions	3	1	54	5	3	7
			loadScripts	1150	1043	1341	77	1198	1297
			setupStore	11	5	186	19	8	27
	Webpack	Home	uiStartup	1497	1324	2105	130	1552	1716
			load	1304	1170	1605	85	1372	1456
			domContentLoaded	1304	1170	1604	85	1371	1456
			domInteractive	95	31	374	60	92	226
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	31	18	111	16	34	77
			firstReactRender	32	24	73	10	33	64
			getState	6	3	57	7	6	14
			initialActions	4	0	54	8	3	18
			loadScripts	1280	1152	1589	83	1343	1427
			setupStore	12	4	71	14	8	58

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

background: 2.73 KiB (0.06%)
ui: 1.22 KiB (0.02%)
common: -60 Bytes (0%)

amandaye0h added 9 commits October 3, 2025 21:22

fix: polish login modal

a3b063f

fix: modify container width to improve balance

34bf26b

fix: add margin bottom to improve spacing on scroll

50b63bd

fix: polish srp spacing, text and colors to improve balance

d815517

fix: polish password styling to match srp, refine copy

be23156

fix: polish wallet created to match flow

2a00061

fix: polish metametrics screens, update checkbox spacing to improve r…

06f892d

…eadability

fix: polish pin metamask banner to align styling

a26cdcb

fix: polish default privacy settings screen

c5fb720

metamaskbot added the team-assets label Oct 3, 2025

amandaye0h added the team-design-system All issues relating to design system in Extension label Oct 3, 2025

github-actions bot added the size-M label Oct 3, 2025

fix: polish recovery phrase screens

e5a772f

github-actions bot added size-L and removed size-M labels Oct 4, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix: Polish onboarding UI #36570

fix: Polish onboarding UI #36570

amandaye0h commented Oct 3, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Oct 3, 2025

Uh oh!

metamaskbot commented Oct 3, 2025 •

edited

Loading

Uh oh!

metamaskbot commented Oct 3, 2025

Uh oh!

metamaskbot commented Oct 3, 2025

Uh oh!

metamaskbot commented Oct 4, 2025

Uh oh!

metamaskbot commented Oct 4, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

fix: Polish onboarding UI #36570

Are you sure you want to change the base?

fix: Polish onboarding UI #36570

Conversation

amandaye0h commented Oct 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Changelog

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

Uh oh!

github-actions bot commented Oct 3, 2025

Uh oh!

metamaskbot commented Oct 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✨ Files requiring CODEOWNER review ✨

Uh oh!

metamaskbot commented Oct 3, 2025

📊 Page Load Benchmark Results

📄 Localhost MetaMask Test Dapp

Summary

Uh oh!

metamaskbot commented Oct 3, 2025

Uh oh!

metamaskbot commented Oct 4, 2025

📊 Page Load Benchmark Results

📄 Localhost MetaMask Test Dapp

Summary

Uh oh!

metamaskbot commented Oct 4, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

amandaye0h commented Oct 3, 2025 •

edited

Loading

metamaskbot commented Oct 3, 2025 •

edited

Loading