feat: 1.12 new srp import UI

[lionellbriones]

Description

New srp import UI
https://www.figma.com/design/pViOUcmjwhEzFsdrwknpNc/Onboarding-redesign?node-id=2552-59203&t=KttJt1lvkqwslaMK-4

Screen.Recording.2025-06-11.at.6.17.46.PM.mov

Related issues

Fixes:

Manual testing steps

1. 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.

[metamaskbot]

Builds ready [531b824]

• 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, 9
  • 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, 13
  • content-script: 0
  • offscreen: 0

UI Startup Metrics (1214 ± 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	1214	1109	1389	60	1258	1326
			load	1055	962	1215	58	1091	1155
			domContentLoaded	1048	945	1187	58	1085	1148
			domInteractive	17	14	35	4	16	30
			firstPaint	748	73	1199	415	1073	1156
			backgroundConnect	7	4	27	4	7	21
			firstReactRender	20	16	41	5	20	35
			getState	14	6	46	8	19	28
			initialActions	0	0	1	0	0	1
			loadScripts	801	703	941	57	835	897
			setupStore	8	5	34	3	8	12
	Webpack	Home	uiStartup	2045	1612	2498	204	2138	2445
			load	1586	1264	1896	164	1710	1864
			domContentLoaded	1580	1260	1886	164	1706	1855
			domInteractive	16	11	54	10	13	46
			firstPaint	152	66	396	51	179	235
			backgroundConnect	20	10	34	5	23	33
			firstReactRender	132	45	375	112	107	357
			getState	10	4	28	4	11	18
			initialActions	2	1	6	1	3	4
			loadScripts	1577	1259	1875	163	1704	1844
			setupStore	71	6	321	117	19	315
Firefox	Browserify	Home	uiStartup	1342	1205	1648	81	1390	1497
			load	1191	1068	1489	82	1243	1362
			domContentLoaded	1190	1067	1489	82	1242	1362
			domInteractive	103	36	258	32	117	164
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	20	13	102	9	21	27
			firstReactRender	24	21	40	3	24	29
			getState	8	5	38	5	8	10
			initialActions	0	0	2	0	0	1
			loadScripts	1172	1052	1474	80	1220	1312
			setupStore	7	4	37	6	7	12
	Webpack	Home	uiStartup	1454	1314	1711	101	1531	1640
			load	1271	1132	1532	101	1337	1462
			domContentLoaded	1271	1132	1531	101	1337	1462
			domInteractive	75	30	165	20	81	119
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	20	14	41	4	21	26
			firstReactRender	39	28	45	3	41	44
			getState	7	5	28	2	8	10
			initialActions	0	0	2	1	1	1
			loadScripts	1253	1114	1514	101	1320	1443
			setupStore	7	5	28	2	7	8

Benchmark value 22 exceeds gate value 18 for chrome browserify home p95 backgroundConnect
Benchmark value 71 exceeds gate value 32 for chrome webpack home mean setupStore
Benchmark value 315 exceeds gate value 65 for chrome webpack home p95 setupStore
Benchmark value 39 exceeds gate value 38 for firefox webpack home mean firstReactRender
Sum of mean exceeds: 40ms | Sum of p95 exceeds: 254ms
Sum of all benchmark exceeds: 294ms

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

• background: 0 Bytes (0%)
• ui: 4.67 KiB (0.07%)
• common: 76 Bytes (0%)

[metamaskbot]

Builds ready [a6191b4]

• 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, 9
  • 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, 13
  • content-script: 0
  • offscreen: 0

UI Startup Metrics (1182 ± 55 ms)

Platform	BuildType	Page	Metric	Mean (ms)	Min (ms)	Max (ms)	Std Dev (ms)	P 75 (ms)	P 95 (ms)
Chrome	Browserify	Home	uiStartup	1182	1086	1364	55	1209	1297
			load	1026	940	1178	51	1055	1145
			domContentLoaded	1020	927	1164	52	1048	1137
			domInteractive	16	14	35	4	16	27
			firstPaint	692	77	1174	406	1041	1088
			backgroundConnect	8	4	33	6	7	25
			firstReactRender	20	15	31	3	20	27
			getState	14	6	34	7	19	28
			initialActions	0	0	1	0	0	0
			loadScripts	777	691	908	50	802	886
			setupStore	7	4	17	2	8	13
	Webpack	Home	uiStartup	2088	1620	2497	200	2212	2480
			load	1619	1253	1913	157	1722	1888
			domContentLoaded	1613	1249	1902	156	1718	1877
			domInteractive	16	11	62	11	13	48
			firstPaint	152	62	306	48	167	255
			backgroundConnect	21	10	43	7	24	36
			firstReactRender	133	46	366	104	144	342
			getState	20	4	322	53	13	21
			initialActions	3	1	6	1	3	4
			loadScripts	1610	1247	1891	155	1716	1866
			setupStore	41	7	320	85	19	313
Firefox	Browserify	Home	uiStartup	1292	1188	1468	61	1337	1400
			load	1151	1043	1311	64	1205	1272
			domContentLoaded	1151	1043	1311	64	1205	1271
			domInteractive	95	33	188	27	109	133
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	20	12	56	8	20	47
			firstReactRender	22	20	27	2	22	27
			getState	7	4	37	4	8	9
			initialActions	0	0	1	0	0	1
			loadScripts	1134	1030	1298	63	1186	1254
			setupStore	5	3	11	1	6	7
	Webpack	Home	uiStartup	1494	1348	1728	93	1573	1672
			load	1301	1173	1547	95	1396	1485
			domContentLoaded	1300	1173	1546	95	1396	1484
			domInteractive	79	32	124	15	91	106
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	20	16	45	5	21	29
			firstReactRender	39	31	48	3	42	45
			getState	8	4	31	4	8	10
			initialActions	1	0	2	1	1	1
			loadScripts	1282	1153	1529	96	1378	1467
			setupStore	8	5	29	3	8	10

Benchmark value 26 exceeds gate value 18 for chrome browserify home p95 backgroundConnect
Benchmark value 42 exceeds gate value 32 for chrome webpack home mean setupStore
Benchmark value 2480 exceeds gate value 2454 for chrome webpack home p95 uiStartup
Benchmark value 313 exceeds gate value 65 for chrome webpack home p95 setupStore
Benchmark value 40 exceeds gate value 38 for firefox webpack home mean firstReactRender
Sum of mean exceeds: 12ms | Sum of p95 exceeds: 282ms
Sum of all benchmark exceeds: 294ms

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

• background: 0 Bytes (0%)
• ui: 4.67 KiB (0.07%)
• common: 76 Bytes (0%)

[chaitanyapotti]

lgtm

[metamaskbot]

Builds ready [f1fa829]

• 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, 9
  • 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, 13
  • content-script: 0
  • offscreen: 0

UI Startup Metrics (1212 ± 68 ms)

Platform	BuildType	Page	Metric	Mean (ms)	Min (ms)	Max (ms)	Std Dev (ms)	P 75 (ms)	P 95 (ms)
Chrome	Browserify	Home	uiStartup	1212	1097	1369	68	1262	1332
			load	1056	944	1179	65	1107	1173
			domContentLoaded	1049	933	1170	65	1102	1164
			domInteractive	17	13	63	6	16	32
			firstPaint	859	126	1185	372	1097	1172
			backgroundConnect	8	4	30	5	7	23
			firstReactRender	20	14	52	4	20	22
			getState	15	6	41	7	20	28
			initialActions	0	0	1	0	0	1
			loadScripts	806	694	933	65	857	921
			setupStore	7	5	14	2	8	12
	Webpack	Home	uiStartup	2055	1482	2503	223	2191	2439
			load	1594	1140	1923	177	1720	1849
			domContentLoaded	1589	1136	1914	176	1715	1841
			domInteractive	17	11	189	20	13	48
			firstPaint	159	64	482	59	187	271
			backgroundConnect	20	10	60	7	22	33
			firstReactRender	132	46	368	105	124	351
			getState	10	4	23	4	12	19
			initialActions	5	1	296	29	3	5
			loadScripts	1586	1135	1904	175	1714	1830
			setupStore	58	6	321	105	20	312
Firefox	Browserify	Home	uiStartup	1363	1197	1553	81	1426	1517
			load	1212	1069	1414	78	1271	1362
			domContentLoaded	1212	1069	1413	78	1271	1362
			domInteractive	104	36	172	31	124	165
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	25	15	128	17	23	52
			firstReactRender	24	21	61	4	24	27
			getState	8	4	37	3	8	11
			initialActions	0	0	1	0	0	1
			loadScripts	1189	1054	1395	78	1249	1346
			setupStore	6	4	39	4	6	11
	Webpack	Home	uiStartup	1493	1297	1789	107	1581	1679
			load	1301	1138	1606	109	1389	1499
			domContentLoaded	1301	1137	1605	109	1389	1499
			domInteractive	77	33	167	16	82	100
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	20	15	44	5	21	31
			firstReactRender	40	27	69	5	42	46
			getState	9	5	30	5	8	28
			initialActions	0	0	1	0	1	1
			loadScripts	1283	1123	1584	109	1360	1485
			setupStore	8	5	45	6	8	25

Benchmark value 859 exceeds gate value 800 for chrome browserify home mean firstPaint
Benchmark value 24 exceeds gate value 18 for chrome browserify home p95 backgroundConnect
Benchmark value 58 exceeds gate value 32 for chrome webpack home mean setupStore
Benchmark value 312 exceeds gate value 65 for chrome webpack home p95 setupStore
Benchmark value 40 exceeds gate value 38 for firefox webpack home mean firstReactRender
Sum of mean exceeds: 87ms | Sum of p95 exceeds: 253ms
Sum of all benchmark exceeds: 340ms

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

• background: 0 Bytes (0%)
• ui: 4.71 KiB (0.07%)
• common: 76 Bytes (0%)