feat: New metametrics design #33286

lionellbriones · 2025-05-29T16:23:30Z

Description

Updated metametrics UI

Related issues

Fixes:

Manual testing steps

Go to this page...

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.

…tametrics

…feat/srp-flow-metametrics

…' into feat/srp-flow-metametrics

…tametrics

github-actions · 2025-05-29T16:23:45Z

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-05-29T16:25:40Z

✨ Files requiring CODEOWNER review ✨

🖥️ @MetaMask/wallet-ux (4 files, +192 -195)

📁 ui/
- 📁 pages/
  - 📁 onboarding-flow/
    - 📁 metametrics/
      - 📁 __snapshots__/
        
        📄 metametrics.test.js.snap +118 -122
        
        📄 index.scss +6 -24
        
        📄 metametrics.js +67 -48
    - 📁 onboarding-app-header/
      - 📄 onboarding-app-header.js +1 -1

metamaskbot · 2025-05-29T16:46:12Z

Builds ready [7f96db4]

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
- content-script: 0
- offscreen: 0

UI Startup Metrics (1219 ± 60 ms)

Platform	BuildType	Page	Metric	Mean (ms)	Min (ms)	Max (ms)	Std Dev (ms)	P 75 (ms)	P 95 (ms)
Chrome	Browserify	Home	uiStartup	1219	1103	1382	60	1256	1327
			load	1054	953	1178	54	1090	1135
			domContentLoaded	1047	942	1173	56	1085	1128
			domInteractive	16	13	33	4	16	29
			firstPaint	719	139	1186	414	1070	1129
			backgroundConnect	8	4	45	5	8	22
			firstReactRender	20	16	32	3	21	26
			getState	16	6	56	9	23	30
			initialActions	0	0	1	0	0	1
			loadScripts	803	700	913	55	838	895
			setupStore	8	5	18	2	8	13
	Webpack	Home	uiStartup	2100	1672	2581	229	2252	2484
			load	1618	1309	1989	169	1731	1911
			domContentLoaded	1612	1305	1974	167	1722	1898
			domInteractive	15	11	77	10	13	44
			firstPaint	182	64	1369	137	227	302
			backgroundConnect	22	10	63	8	27	37
			firstReactRender	141	43	350	107	232	338
			getState	21	4	340	53	14	28
			initialActions	3	1	7	1	3	5
			loadScripts	1608	1304	1963	166	1719	1887
			setupStore	36	7	307	73	18	294
Firefox	Browserify	Home	uiStartup	1335	1147	1641	105	1392	1571
			load	1183	1019	1492	103	1253	1418
			domContentLoaded	1183	1019	1492	103	1253	1417
			domInteractive	99	38	304	33	108	153
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	19	12	53	7	20	33
			firstReactRender	24	20	71	7	23	27
			getState	11	4	170	18	8	37
			initialActions	0	0	2	0	0	1
			loadScripts	1166	1009	1474	102	1232	1401
			setupStore	7	4	75	9	6	11
	Webpack	Home	uiStartup	1675	1459	2446	186	1777	1995
			load	1434	1236	2081	161	1511	1782
			domContentLoaded	1433	1236	2081	161	1511	1782
			domInteractive	86	36	584	54	89	132
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	25	16	67	8	26	42
			firstReactRender	46	32	75	6	50	56
			getState	12	5	70	9	11	29
			initialActions	1	0	2	1	1	1
			loadScripts	1412	1212	2061	161	1488	1763
			setupStore	16	6	269	39	9	23

Benchmark value 16 exceeds gate value 15 for chrome browserify home mean getState
Benchmark value 22 exceeds gate value 18 for chrome browserify home p95 backgroundConnect
Benchmark value 36 exceeds gate value 32 for chrome webpack home mean setupStore
Benchmark value 2484 exceeds gate value 2454 for chrome webpack home p95 uiStartup
Benchmark value 294 exceeds gate value 65 for chrome webpack home p95 setupStore
Benchmark value 37 exceeds gate value 24 for firefox browserify home p95 getState
Benchmark value 1676 exceeds gate value 1615 for firefox webpack home mean uiStartup
Benchmark value 1434 exceeds gate value 1380 for firefox webpack home mean load
Benchmark value 1434 exceeds gate value 1380 for firefox webpack home mean domContentLoaded
Benchmark value 47 exceeds gate value 38 for firefox webpack home mean firstReactRender
Benchmark value 1413 exceeds gate value 1360 for firefox webpack home mean loadScripts
Benchmark value 16 exceeds gate value 13 for firefox webpack home mean setupStore
Benchmark value 1995 exceeds gate value 1935 for firefox webpack home p95 uiStartup
Benchmark value 1782 exceeds gate value 1660 for firefox webpack home p95 load
Benchmark value 1782 exceeds gate value 1660 for firefox webpack home p95 domContentLoaded
Benchmark value 56 exceeds gate value 50 for firefox webpack home p95 firstReactRender
Benchmark value 1763 exceeds gate value 1630 for firefox webpack home p95 loadScripts
Sum of mean exceeds: 239ms | Sum of p95 exceeds: 719ms
Sum of all benchmark exceeds: 958ms

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

background: 465 Bytes (0.01%)
ui: 16.21 KiB (0.23%)
common: 39.34 KiB (0.48%)

…et' into feat/srp-flow-metametrics

metamaskbot · 2025-05-30T08:06:44Z

Builds ready [41e113c]

builds: chrome, firefox
builds (beta): chrome
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 CircleCI 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
- content-script: 0
- offscreen: 0

UI Startup Metrics (1241 ± 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	1241	1090	1417	70	1287	1369
			load	1073	945	1258	72	1130	1209
			domContentLoaded	1066	935	1249	72	1122	1203
			domInteractive	17	13	40	5	16	31
			firstPaint	779	143	1354	420	1098	1216
			backgroundConnect	9	4	28	5	9	24
			firstReactRender	20	16	56	5	20	29
			getState	14	5	34	7	20	24
			initialActions	0	0	1	0	0	1
			loadScripts	823	698	1000	70	877	955
			setupStore	8	5	32	4	8	13
	Webpack	Home	uiStartup	2152	1750	2642	225	2336	2545
			load	1674	1350	2020	171	1802	1948
			domContentLoaded	1667	1346	2006	169	1796	1922
			domInteractive	16	12	58	11	13	46
			firstPaint	180	71	1561	150	193	298
			backgroundConnect	29	10	251	30	30	57
			firstReactRender	140	44	356	108	228	344
			getState	26	4	351	61	14	235
			initialActions	3	1	12	1	3	5
			loadScripts	1663	1345	1995	168	1792	1910
			setupStore	36	7	314	71	21	298
Firefox	Browserify	Home	uiStartup	1292	1130	1616	108	1377	1488
			load	1142	996	1469	104	1199	1357
			domContentLoaded	1141	996	1469	104	1199	1357
			domInteractive	92	39	212	29	97	153
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	21	13	78	10	22	46
			firstReactRender	24	19	55	7	23	50
			getState	7	4	29	3	8	9
			initialActions	0	0	1	0	0	1
			loadScripts	1124	984	1445	104	1181	1340
			setupStore	8	4	47	7	6	23
	Webpack	Home	uiStartup	1584	1370	2189	166	1649	1945
			load	1370	1193	1984	158	1454	1679
			domContentLoaded	1369	1192	1983	158	1454	1679
			domInteractive	81	41	256	25	87	117
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	24	16	229	21	23	39
			firstReactRender	42	28	53	5	44	50
			getState	11	5	147	15	10	30
			initialActions	0	0	2	1	1	1
			loadScripts	1348	1176	1961	156	1434	1660
			setupStore	9	5	72	10	8	24

Benchmark value 1241 exceeds gate value 1234 for chrome browserify home mean uiStartup
Benchmark value 1074 exceeds gate value 1070 for chrome browserify home mean load
Benchmark value 1066 exceeds gate value 1061 for chrome browserify home mean domContentLoaded
Benchmark value 1369 exceeds gate value 1365 for chrome browserify home p95 uiStartup
Benchmark value 1209 exceeds gate value 1190 for chrome browserify home p95 load
Benchmark value 1204 exceeds gate value 1180 for chrome browserify home p95 domContentLoaded
Benchmark value 1216 exceeds gate value 1180 for chrome browserify home p95 firstPaint
Benchmark value 25 exceeds gate value 18 for chrome browserify home p95 backgroundConnect
Benchmark value 955 exceeds gate value 940 for chrome browserify home p95 loadScripts
Benchmark value 36 exceeds gate value 32 for chrome webpack home mean setupStore
Benchmark value 2546 exceeds gate value 2454 for chrome webpack home p95 uiStartup
Benchmark value 235 exceeds gate value 195 for chrome webpack home p95 getState
Benchmark value 298 exceeds gate value 65 for chrome webpack home p95 setupStore
Benchmark value 42 exceeds gate value 38 for firefox webpack home mean firstReactRender
Benchmark value 1945 exceeds gate value 1935 for firefox webpack home p95 uiStartup
Benchmark value 1679 exceeds gate value 1660 for firefox webpack home p95 load
Benchmark value 1679 exceeds gate value 1660 for firefox webpack home p95 domContentLoaded
Benchmark value 1660 exceeds gate value 1630 for firefox webpack home p95 loadScripts
Sum of mean exceeds: 24ms | Sum of p95 exceeds: 548ms
Sum of all benchmark exceeds: 572ms

metamaskbot · 2025-05-30T10:00:47Z

Builds ready [415fca8]

builds: chrome, firefox
builds (beta): chrome
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 CircleCI 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
- content-script: 0
- offscreen: 0

UI Startup Metrics (1297 ± 81 ms)

Platform	BuildType	Page	Metric	Mean (ms)	Min (ms)	Max (ms)	Std Dev (ms)	P 75 (ms)	P 95 (ms)
Chrome	Browserify	Home	uiStartup	1297	1128	1560	81	1349	1453
			load	1118	977	1372	78	1168	1256
			domContentLoaded	1109	972	1363	77	1154	1249
			domInteractive	18	14	94	9	18	31
			firstPaint	874	92	1371	416	1160	1255
			backgroundConnect	10	4	38	7	10	29
			firstReactRender	21	16	57	6	22	34
			getState	15	6	33	8	21	30
			initialActions	0	0	1	0	0	1
			loadScripts	851	728	1118	75	893	999
			setupStore	8	5	22	2	9	12
	Webpack	Home	uiStartup	2125	1663	2655	202	2257	2514
			load	1643	1288	1989	147	1750	1899
			domContentLoaded	1636	1284	1980	146	1742	1890
			domInteractive	16	11	66	11	13	48
			firstPaint	157	63	348	63	188	282
			backgroundConnect	23	11	71	9	25	42
			firstReactRender	140	43	347	106	271	329
			getState	11	4	65	8	12	21
			initialActions	8	1	301	41	3	6
			loadScripts	1633	1282	1969	144	1738	1879
			setupStore	47	7	314	89	21	309
Firefox	Browserify	Home	uiStartup	1330	1131	1815	129	1418	1555
			load	1177	1010	1646	122	1239	1386
			domContentLoaded	1177	1010	1645	122	1238	1385
			domInteractive	98	35	421	44	107	151
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	22	13	187	20	21	47
			firstReactRender	25	20	59	8	23	52
			getState	10	5	190	19	9	31
			initialActions	0	0	1	0	0	1
			loadScripts	1158	997	1623	119	1223	1372
			setupStore	7	4	35	4	6	12
	Webpack	Home	uiStartup	1594	1373	2098	165	1686	1965
			load	1375	1191	1860	155	1476	1724
			domContentLoaded	1375	1191	1860	155	1475	1724
			domInteractive	81	40	139	19	91	126
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	22	16	53	6	23	34
			firstReactRender	44	35	76	5	46	51
			getState	9	5	76	8	9	22
			initialActions	0	0	2	1	1	2
			loadScripts	1356	1169	1842	155	1458	1706
			setupStore	11	5	273	27	9	18

Benchmark value 1298 exceeds gate value 1234 for chrome browserify home mean uiStartup
Benchmark value 1118 exceeds gate value 1070 for chrome browserify home mean load
Benchmark value 1109 exceeds gate value 1061 for chrome browserify home mean domContentLoaded
Benchmark value 874 exceeds gate value 800 for chrome browserify home mean firstPaint
Benchmark value 11 exceeds gate value 10 for chrome browserify home mean backgroundConnect
Benchmark value 16 exceeds gate value 15 for chrome browserify home mean getState
Benchmark value 852 exceeds gate value 830 for chrome browserify home mean loadScripts
Benchmark value 1453 exceeds gate value 1365 for chrome browserify home p95 uiStartup
Benchmark value 1257 exceeds gate value 1190 for chrome browserify home p95 load
Benchmark value 1249 exceeds gate value 1180 for chrome browserify home p95 domContentLoaded
Benchmark value 1256 exceeds gate value 1180 for chrome browserify home p95 firstPaint
Benchmark value 30 exceeds gate value 18 for chrome browserify home p95 backgroundConnect
Benchmark value 999 exceeds gate value 940 for chrome browserify home p95 loadScripts
Benchmark value 9 exceeds gate value 7 for chrome webpack home mean initialActions
Benchmark value 47 exceeds gate value 32 for chrome webpack home mean setupStore
Benchmark value 2514 exceeds gate value 2454 for chrome webpack home p95 uiStartup
Benchmark value 309 exceeds gate value 65 for chrome webpack home p95 setupStore
Benchmark value 31 exceeds gate value 24 for firefox browserify home p95 getState
Benchmark value 44 exceeds gate value 38 for firefox webpack home mean firstReactRender
Benchmark value 1965 exceeds gate value 1935 for firefox webpack home p95 uiStartup
Benchmark value 1724 exceeds gate value 1660 for firefox webpack home p95 load
Benchmark value 1724 exceeds gate value 1660 for firefox webpack home p95 domContentLoaded
Benchmark value 51 exceeds gate value 50 for firefox webpack home p95 firstReactRender
Benchmark value 1706 exceeds gate value 1630 for firefox webpack home p95 loadScripts
Sum of mean exceeds: 281ms | Sum of p95 exceeds: 917ms
Sum of all benchmark exceeds: 1198ms

…o feat/srp-flow-metametrics

metamaskbot · 2025-05-30T10:39:20Z

Builds ready [a4a1d79]

builds: chrome, firefox
builds (beta): chrome
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 CircleCI 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
- content-script: 0
- offscreen: 0

UI Startup Metrics (1215 ± 67 ms)

Platform	BuildType	Page	Metric	Mean (ms)	Min (ms)	Max (ms)	Std Dev (ms)	P 75 (ms)	P 95 (ms)
Chrome	Browserify	Home	uiStartup	1215	1098	1379	67	1259	1325
			load	1053	923	1223	66	1100	1165
			domContentLoaded	1046	918	1216	66	1094	1157
			domInteractive	16	13	41	5	16	31
			firstPaint	715	94	1179	425	1091	1161
			backgroundConnect	8	4	29	5	8	25
			firstReactRender	20	15	31	3	21	26
			getState	13	5	30	7	19	27
			initialActions	0	0	1	0	0	0
			loadScripts	808	693	969	65	856	921
			setupStore	8	5	20	3	8	14
	Webpack	Home	uiStartup	2079	1682	2464	215	2252	2407
			load	1614	1199	1886	157	1735	1846
			domContentLoaded	1607	1193	1877	156	1727	1832
			domInteractive	15	11	51	9	13	42
			firstPaint	183	60	449	71	226	316
			backgroundConnect	26	10	427	41	25	42
			firstReactRender	128	43	349	108	145	331
			getState	18	4	312	48	11	20
			initialActions	2	1	6	1	3	4
			loadScripts	1604	1191	1866	155	1723	1822
			setupStore	46	6	311	90	18	302
Firefox	Browserify	Home	uiStartup	1318	1139	1706	123	1367	1608
			load	1162	1015	1492	105	1211	1428
			domContentLoaded	1161	1015	1492	105	1210	1428
			domInteractive	88	36	146	22	101	127
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	23	13	352	34	21	39
			firstReactRender	23	19	51	4	23	27
			getState	12	4	214	27	8	21
			initialActions	0	0	1	0	0	1
			loadScripts	1141	1003	1473	101	1185	1373
			setupStore	10	4	212	26	6	20
	Webpack	Home	uiStartup	1569	1337	2167	158	1694	1833
			load	1351	1157	1963	146	1481	1602
			domContentLoaded	1350	1157	1963	146	1480	1601
			domInteractive	84	36	284	35	87	142
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	23	15	58	8	23	41
			firstReactRender	41	30	58	5	44	49
			getState	10	5	32	6	9	30
			initialActions	0	0	2	1	1	1
			loadScripts	1331	1139	1949	146	1461	1580
			setupStore	16	5	257	42	8	24

Benchmark value 25 exceeds gate value 18 for chrome browserify home p95 backgroundConnect
Benchmark value 46 exceeds gate value 32 for chrome webpack home mean setupStore
Benchmark value 302 exceeds gate value 65 for chrome webpack home p95 setupStore
Benchmark value 12 exceeds gate value 11 for firefox browserify home mean getState
Benchmark value 11 exceeds gate value 9 for firefox browserify home mean setupStore
Benchmark value 42 exceeds gate value 38 for firefox webpack home mean firstReactRender
Benchmark value 16 exceeds gate value 13 for firefox webpack home mean setupStore
Sum of mean exceeds: 24ms | Sum of p95 exceeds: 244ms
Sum of all benchmark exceeds: 268ms

metamaskbot · 2025-05-30T14:02:30Z

Builds ready [7db9f0c]

builds: chrome, firefox
builds (beta): chrome
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 CircleCI 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
- content-script: 0
- offscreen: 0

UI Startup Metrics (1206 ± 57 ms)

Platform	BuildType	Page	Metric	Mean (ms)	Min (ms)	Max (ms)	Std Dev (ms)	P 75 (ms)	P 95 (ms)
Chrome	Browserify	Home	uiStartup	1206	1084	1360	57	1246	1288
			load	1044	942	1152	56	1086	1141
			domContentLoaded	1036	925	1146	57	1079	1133
			domInteractive	16	13	33	4	15	29
			firstPaint	776	141	1164	388	1079	1118
			backgroundConnect	8	4	27	5	8	25
			firstReactRender	22	15	49	7	21	39
			getState	15	6	41	8	21	27
			initialActions	0	0	1	0	0	0
			loadScripts	799	693	911	56	841	897
			setupStore	8	4	22	2	8	12
	Webpack	Home	uiStartup	2095	1658	2718	231	2265	2447
			load	1616	1286	2077	160	1734	1829
			domContentLoaded	1609	1282	2065	158	1728	1821
			domInteractive	14	11	56	7	13	37
			firstPaint	164	60	402	59	198	289
			backgroundConnect	24	10	89	13	25	47
			firstReactRender	153	42	343	115	305	329
			getState	12	4	114	12	12	31
			initialActions	3	1	8	1	3	5
			loadScripts	1606	1281	2055	156	1722	1810
			setupStore	49	6	325	89	22	308
Firefox	Browserify	Home	uiStartup	1347	1158	1714	121	1441	1591
			load	1187	1007	1544	110	1250	1410
			domContentLoaded	1186	1005	1544	110	1249	1410
			domInteractive	98	36	332	35	108	151
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	22	13	181	19	21	53
			firstReactRender	24	20	59	7	23	31
			getState	10	5	225	23	8	23
			initialActions	0	0	1	0	0	1
			loadScripts	1167	993	1531	109	1228	1396
			setupStore	12	4	217	28	6	50
	Webpack	Home	uiStartup	1581	1354	2153	174	1661	1935
			load	1360	1164	1915	160	1447	1712
			domContentLoaded	1359	1164	1915	160	1447	1711
			domInteractive	77	35	148	18	85	116
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	25	15	187	20	24	48
			firstReactRender	42	27	57	5	44	51
			getState	12	5	202	25	9	13
			initialActions	0	0	2	1	1	1
			loadScripts	1337	1150	1864	155	1419	1691
			setupStore	13	5	241	31	9	22

Benchmark value 16 exceeds gate value 15 for chrome browserify home mean getState
Benchmark value 25 exceeds gate value 18 for chrome browserify home p95 backgroundConnect
Benchmark value 49 exceeds gate value 32 for chrome webpack home mean setupStore
Benchmark value 308 exceeds gate value 65 for chrome webpack home p95 setupStore
Benchmark value 12 exceeds gate value 9 for firefox browserify home mean setupStore
Benchmark value 50 exceeds gate value 27 for firefox browserify home p95 setupStore
Benchmark value 42 exceeds gate value 38 for firefox webpack home mean firstReactRender
Benchmark value 1712 exceeds gate value 1660 for firefox webpack home p95 load
Benchmark value 1711 exceeds gate value 1660 for firefox webpack home p95 domContentLoaded
Benchmark value 51 exceeds gate value 50 for firefox webpack home p95 firstReactRender
Benchmark value 1691 exceeds gate value 1630 for firefox webpack home p95 loadScripts
Sum of mean exceeds: 25ms | Sum of p95 exceeds: 438ms
Sum of all benchmark exceeds: 463ms

…tametrics

metamaskbot · 2025-05-30T15:08:26Z

Builds ready [799a2c6]

builds: chrome, firefox
builds (beta): chrome
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 CircleCI 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
- content-script: 0
- offscreen: 0

UI Startup Metrics (1223 ± 76 ms)

Platform	BuildType	Page	Metric	Mean (ms)	Min (ms)	Max (ms)	Std Dev (ms)	P 75 (ms)	P 95 (ms)
Chrome	Browserify	Home	uiStartup	1223	1071	1486	76	1276	1354
			load	1057	936	1298	73	1111	1180
			domContentLoaded	1050	932	1291	73	1102	1172
			domInteractive	17	13	110	11	16	30
			firstPaint	792	133	1314	415	1108	1177
			backgroundConnect	8	4	33	5	8	23
			firstReactRender	20	16	40	5	21	33
			getState	13	6	37	7	19	24
			initialActions	0	0	3	0	0	1
			loadScripts	811	693	1046	72	861	930
			setupStore	8	5	25	3	8	12
	Webpack	Home	uiStartup	2226	1599	2766	227	2399	2609
			load	1704	1245	2157	178	1845	1979
			domContentLoaded	1697	1240	2142	177	1838	1969
			domInteractive	16	12	62	10	14	47
			firstPaint	172	64	712	81	192	296
			backgroundConnect	27	10	78	11	31	50
			firstReactRender	157	44	432	113	283	355
			getState	19	4	329	42	17	29
			initialActions	6	2	241	24	4	7
			loadScripts	1693	1238	2131	175	1835	1958
			setupStore	56	7	338	94	29	301
Firefox	Browserify	Home	uiStartup	1319	1140	1845	136	1372	1663
			load	1173	990	1692	136	1220	1515
			domContentLoaded	1173	989	1691	136	1219	1514
			domInteractive	100	38	336	36	108	165
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	20	13	82	9	21	35
			firstReactRender	24	20	59	7	23	31
			getState	7	5	18	2	8	9
			initialActions	0	0	1	0	0	1
			loadScripts	1155	975	1679	136	1202	1492
			setupStore	7	4	35	5	6	14
	Webpack	Home	uiStartup	1587	1368	2204	171	1634	2015
			load	1376	1158	1979	165	1433	1785
			domContentLoaded	1376	1158	1979	165	1432	1785
			domInteractive	81	37	136	17	88	120
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	22	15	46	6	24	40
			firstReactRender	42	29	55	5	46	52
			getState	9	5	30	4	9	20
			initialActions	1	0	2	1	1	1
			loadScripts	1357	1141	1963	166	1412	1769
			setupStore	9	5	79	8	8	24

Benchmark value 23 exceeds gate value 18 for chrome browserify home p95 backgroundConnect
Benchmark value 2227 exceeds gate value 2192 for chrome webpack home mean uiStartup
Benchmark value 56 exceeds gate value 32 for chrome webpack home mean setupStore
Benchmark value 2610 exceeds gate value 2454 for chrome webpack home p95 uiStartup
Benchmark value 301 exceeds gate value 65 for chrome webpack home p95 setupStore
Benchmark value 1663 exceeds gate value 1660 for firefox browserify home p95 uiStartup
Benchmark value 1515 exceeds gate value 1495 for firefox browserify home p95 load
Benchmark value 1514 exceeds gate value 1495 for firefox browserify home p95 domContentLoaded
Benchmark value 1492 exceeds gate value 1475 for firefox browserify home p95 loadScripts
Benchmark value 43 exceeds gate value 38 for firefox webpack home mean firstReactRender
Benchmark value 2015 exceeds gate value 1935 for firefox webpack home p95 uiStartup
Benchmark value 1785 exceeds gate value 1660 for firefox webpack home p95 load
Benchmark value 1785 exceeds gate value 1660 for firefox webpack home p95 domContentLoaded
Benchmark value 52 exceeds gate value 50 for firefox webpack home p95 firstReactRender
Benchmark value 1769 exceeds gate value 1630 for firefox webpack home p95 loadScripts
Sum of mean exceeds: 64ms | Sum of p95 exceeds: 927ms
Sum of all benchmark exceeds: 991ms

…tametrics

metamaskbot · 2025-05-30T15:44:13Z

Builds ready [1f920f5]

builds: chrome, firefox
builds (beta): chrome
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 CircleCI 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
- content-script: 0
- offscreen: 0

UI Startup Metrics (1197 ± 69 ms)

Platform	BuildType	Page	Metric	Mean (ms)	Min (ms)	Max (ms)	Std Dev (ms)	P 75 (ms)	P 95 (ms)
Chrome	Browserify	Home	uiStartup	1197	1076	1536	69	1231	1300
			load	1036	911	1288	61	1071	1134
			domContentLoaded	1029	907	1283	62	1066	1128
			domInteractive	16	13	93	9	15	29
			firstPaint	691	128	1290	415	1053	1130
			backgroundConnect	8	4	44	6	8	25
			firstReactRender	20	15	42	4	20	28
			getState	14	5	38	8	19	29
			initialActions	0	0	1	0	0	1
			loadScripts	790	677	1037	60	831	889
			setupStore	8	5	21	2	8	12
	Webpack	Home	uiStartup	2076	1669	2538	225	2247	2466
			load	1599	1301	1934	158	1711	1879
			domContentLoaded	1592	1297	1924	157	1704	1868
			domInteractive	15	11	54	8	13	40
			firstPaint	161	62	360	61	196	279
			backgroundConnect	22	12	51	8	27	39
			firstReactRender	131	43	360	105	142	327
			getState	20	4	313	51	13	32
			initialActions	3	1	6	1	3	5
			loadScripts	1589	1295	1914	155	1702	1857
			setupStore	49	6	312	92	22	303
Firefox	Browserify	Home	uiStartup	1294	1115	1978	134	1344	1571
			load	1139	988	1547	109	1204	1372
			domContentLoaded	1139	988	1547	110	1204	1372
			domInteractive	93	36	298	33	99	158
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	20	12	73	10	20	47
			firstReactRender	23	20	51	5	23	29
			getState	14	4	248	35	8	37
			initialActions	0	0	1	0	0	1
			loadScripts	1121	975	1531	108	1188	1351
			setupStore	8	4	191	19	6	11
	Webpack	Home	uiStartup	1523	1336	2050	150	1600	1871
			load	1315	1148	1798	144	1385	1643
			domContentLoaded	1315	1147	1798	144	1384	1643
			domInteractive	85	33	315	37	88	157
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	22	15	54	7	23	39
			firstReactRender	40	28	52	4	42	47
			getState	11	5	220	22	9	28
			initialActions	0	0	2	1	1	1
			loadScripts	1296	1132	1776	143	1367	1625
			setupStore	8	5	29	4	8	20

Benchmark value 26 exceeds gate value 18 for chrome browserify home p95 backgroundConnect
Benchmark value 49 exceeds gate value 32 for chrome webpack home mean setupStore
Benchmark value 2467 exceeds gate value 2454 for chrome webpack home p95 uiStartup
Benchmark value 303 exceeds gate value 65 for chrome webpack home p95 setupStore
Benchmark value 15 exceeds gate value 11 for firefox browserify home mean getState
Benchmark value 37 exceeds gate value 24 for firefox browserify home p95 getState
Benchmark value 41 exceeds gate value 38 for firefox webpack home mean firstReactRender
Benchmark value 157 exceeds gate value 156 for firefox webpack home p95 domInteractive
Sum of mean exceeds: 24ms | Sum of p95 exceeds: 273ms
Sum of all benchmark exceeds: 297ms

…et' into feat/srp-flow-metametrics

metamaskbot · 2025-05-31T03:09:16Z

Builds ready [8fdd607]

builds: chrome, firefox
builds (beta): chrome
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 CircleCI 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
- content-script: 0
- offscreen: 0

UI Startup Metrics (1205 ± 69 ms)

Platform	BuildType	Page	Metric	Mean (ms)	Min (ms)	Max (ms)	Std Dev (ms)	P 75 (ms)	P 95 (ms)
Chrome	Browserify	Home	uiStartup	1205	1061	1392	69	1243	1338
			load	1043	919	1230	68	1068	1177
			domContentLoaded	1035	912	1222	68	1063	1172
			domInteractive	17	13	97	9	16	30
			firstPaint	758	119	1230	403	1055	1144
			backgroundConnect	8	4	31	6	8	25
			firstReactRender	19	15	36	3	20	24
			getState	14	5	51	8	19	30
			initialActions	0	0	1	0	0	1
			loadScripts	796	666	984	67	821	934
			setupStore	8	5	32	3	8	12
	Webpack	Home	uiStartup	2065	1678	2537	226	2232	2457
			load	1593	1297	1932	160	1713	1865
			domContentLoaded	1587	1294	1921	159	1706	1856
			domInteractive	15	11	50	8	13	39
			firstPaint	163	63	345	55	201	270
			backgroundConnect	22	8	54	9	26	46
			firstReactRender	125	43	359	99	123	328
			getState	15	4	325	32	14	26
			initialActions	3	1	6	1	3	4
			loadScripts	1584	1293	1910	157	1701	1845
			setupStore	41	6	311	83	18	304
Firefox	Browserify	Home	uiStartup	1296	1130	1724	131	1333	1584
			load	1153	978	1553	126	1179	1449
			domContentLoaded	1152	978	1553	126	1179	1449
			domInteractive	96	37	349	36	103	153
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	19	13	134	13	19	32
			firstReactRender	23	20	54	6	23	31
			getState	8	4	35	5	8	18
			initialActions	0	0	2	0	0	1
			loadScripts	1136	969	1535	125	1164	1431
			setupStore	6	4	33	4	6	11
	Webpack	Home	uiStartup	1600	1395	2141	183	1684	1992
			load	1362	1198	1864	153	1440	1710
			domContentLoaded	1362	1197	1864	153	1439	1710
			domInteractive	79	38	168	19	85	103
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	24	16	52	8	25	45
			firstReactRender	43	36	52	4	45	51
			getState	18	5	472	50	11	31
			initialActions	1	0	2	1	1	1
			loadScripts	1342	1178	1849	153	1420	1689
			setupStore	11	5	259	25	9	12

Benchmark value 26 exceeds gate value 18 for chrome browserify home p95 backgroundConnect
Benchmark value 41 exceeds gate value 32 for chrome webpack home mean setupStore
Benchmark value 2458 exceeds gate value 2454 for chrome webpack home p95 uiStartup
Benchmark value 304 exceeds gate value 65 for chrome webpack home p95 setupStore
Benchmark value 43 exceeds gate value 38 for firefox webpack home mean firstReactRender
Benchmark value 18 exceeds gate value 15 for firefox webpack home mean getState
Benchmark value 1992 exceeds gate value 1935 for firefox webpack home p95 uiStartup
Benchmark value 1710 exceeds gate value 1660 for firefox webpack home p95 load
Benchmark value 1710 exceeds gate value 1660 for firefox webpack home p95 domContentLoaded
Benchmark value 51 exceeds gate value 50 for firefox webpack home p95 firstReactRender
Benchmark value 1689 exceeds gate value 1630 for firefox webpack home p95 loadScripts
Sum of mean exceeds: 17ms | Sum of p95 exceeds: 468ms
Sum of all benchmark exceeds: 485ms

chaitanyapotti

lgtm

lionellbriones and others added 19 commits May 10, 2025 00:31

feat: updated metametrics UI

8b0a295

Merge branch 'feat/srp-flow-secure-your-wallet' into feat/srp-flow-me…

5497706

…tametrics

Merge remote-tracking branch 'origin/feat/srp-flow-metametrics' into …

72e0b53

…feat/srp-flow-metametrics

Merge remote-tracking branch 'origin/feat/srp-flow-secure-your-wallet…

aac57d4

…' into feat/srp-flow-metametrics

Merge remote-tracking branch 'origin/feat/srp-flow-secure-your-wallet…

669e82f

…' into feat/srp-flow-metametrics

fix: updated onboarding metametrics snapshot

769cc3c

Merge branch 'feat/srp-flow-secure-your-wallet' into feat/srp-flow-me…

16fdea5

…tametrics

Merge branch 'feat/srp-flow-secure-your-wallet' into feat/srp-flow-me…

228088c

…tametrics

feat: add back privacy description

d8feef9

feat: move some css styles to props

9cca5af

Merge branch 'feat/srp-flow-secure-your-wallet' into feat/srp-flow-me…

203a67a

…tametrics

feat: update en_gb

213580b

Merge branch 'feat/srp-flow-secure-your-wallet' into feat/srp-flow-me…

1e8e319

…tametrics

fix: remove privacy description, not part of new design

90e6d94

fix: update disclaimer note at bottom

f649ff2

Merge branch 'feat/srp-flow-secure-your-wallet' into feat/srp-flow-me…

37d3868

…tametrics

Merge branch 'feat/srp-flow-secure-your-wallet' into feat/srp-flow-me…

79b984c

…tametrics

feat: keep existing metametrics flow

f52b1e3

Merge branch 'feat/srp-flow-secure-your-wallet' into feat/srp-flow-me…

7f96db4

…tametrics

lionellbriones requested review from a team as code owners May 29, 2025 16:23

metamaskbot added the team-web3auth prs related to web3auth team label May 29, 2025

lionellbriones changed the base branch from main to feat/srp-flow-secure-your-wallet May 29, 2025 16:23

feat: use metametrics old flow

073c9e6

lionellbriones changed the title ~~Feat: New metametrics design~~ feat: New metametrics design May 30, 2025

lwin-kyaw added 2 commits May 30, 2025 15:18

Merge remote-tracking branch 'upstream/feat/srp-flow-secure-your-wall…

7c0482e

…et' into feat/srp-flow-metametrics

fix: fixed lint and unittests

41e113c

lionellbriones added 3 commits May 30, 2025 17:07

fix: remove @types/zxcvbn and change pageState to be optional

f6bf694

fix: install @types/zxcvbn and removed zxcvbn dts

8cbe0cd

Merge branch 'feat/srp-flow-header' into feat/srp-flow-metametrics

415fca8

Merge remote-tracking branch 'upstream/feat/srp-flow-metametrics' int…

a4a1d79

…o feat/srp-flow-metametrics

test: update data-test-id

7db9f0c

Merge branch 'feat/srp-flow-secure-your-wallet' into feat/srp-flow-me…

799a2c6

…tametrics

chaitanyapotti added this to PR review queue May 30, 2025

github-project-automation bot moved this to Needs dev review in PR review queue May 30, 2025

chaitanyapotti added the area-onboarding label May 30, 2025

chaitanyapotti assigned lionellbriones May 30, 2025

Merge branch 'feat/srp-flow-secure-your-wallet' into feat/srp-flow-me…

1f920f5

…tametrics

lwin-kyaw added 2 commits May 31, 2025 10:33

Merge remote-tracking branch 'upstream/feat/srp-flow-secure-your-wall…

4abd35c

…et' into feat/srp-flow-metametrics

fix: fixed metametric next route in unittests

8fdd607

chaitanyapotti approved these changes May 31, 2025

View reviewed changes

github-project-automation bot moved this from Needs dev review to Review finalised - Ready to be merged in PR review queue May 31, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: New metametrics design #33286

feat: New metametrics design #33286

lionellbriones commented May 29, 2025 •

edited by chaitanyapotti

Loading

Uh oh!

github-actions bot commented May 29, 2025

Uh oh!

metamaskbot commented May 29, 2025 •

edited

Loading

Uh oh!

metamaskbot commented May 29, 2025

Uh oh!

metamaskbot commented May 30, 2025

Uh oh!

metamaskbot commented May 30, 2025

Uh oh!

metamaskbot commented May 30, 2025

Uh oh!

metamaskbot commented May 30, 2025

Uh oh!

metamaskbot commented May 30, 2025

Uh oh!

metamaskbot commented May 30, 2025

Uh oh!

metamaskbot commented May 31, 2025

Uh oh!

chaitanyapotti left a comment

Uh oh!

Uh oh!

feat: New metametrics design #33286

Are you sure you want to change the base?

feat: New metametrics design #33286

Conversation

lionellbriones commented May 29, 2025 • edited by chaitanyapotti Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

Uh oh!

github-actions bot commented May 29, 2025

Uh oh!

metamaskbot commented May 29, 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 May 29, 2025

Uh oh!

metamaskbot commented May 30, 2025

Uh oh!

metamaskbot commented May 30, 2025

Uh oh!

metamaskbot commented May 30, 2025

Uh oh!

metamaskbot commented May 30, 2025

Uh oh!

metamaskbot commented May 30, 2025

Uh oh!

metamaskbot commented May 30, 2025

Uh oh!

metamaskbot commented May 31, 2025

Uh oh!

chaitanyapotti left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

lionellbriones commented May 29, 2025 •

edited by chaitanyapotti

Loading

metamaskbot commented May 29, 2025 •

edited

Loading