feat: New SRP confirm UI

[lionellbriones]

Description

New SRP confirm UI

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.

[github-actions]

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]

✨ Files requiring CODEOWNER review ✨

🖥️ @MetaMask/wallet-ux (5 files, +363 -164)

• 📁 ui/
  • 📁 pages/
    • 📁 onboarding-flow/
      • 📁 recovery-phrase/
        • 📄 confirm-recovery-phrase.js +159 -87
        • 📄 confirm-recovery-phrase.test.js +46 -31
        • 📄 confirm-srp-modal.stories.tsx +61 -0
        • 📄 confirm-srp-modal.tsx +97 -0
        • 📄 index.scss +0 -46

[metamaskbot]

Builds ready [b095803]

• 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 (1213 ± 64 ms)

Platform	BuildType	Page	Metric	Mean (ms)	Min (ms)	Max (ms)	Std Dev (ms)	P 75 (ms)	P 95 (ms)
Chrome	Browserify	Home	uiStartup	1213	1096	1357	64	1265	1318
			load	1045	935	1162	60	1100	1147
			domContentLoaded	1037	914	1153	61	1094	1142
			domInteractive	17	13	113	11	16	31
			firstPaint	683	103	1161	424	1057	1147
			backgroundConnect	9	4	30	5	9	25
			firstReactRender	20	15	55	6	20	27
			getState	14	6	36	7	20	26
			initialActions	0	0	1	0	0	1
			loadScripts	797	687	912	59	849	899
			setupStore	8	5	19	2	8	11
	Webpack	Home	uiStartup	2090	1705	2555	215	2243	2476
			load	1617	1301	1924	151	1717	1866
			domContentLoaded	1610	1295	1914	149	1710	1856
			domInteractive	15	11	45	8	13	43
			firstPaint	174	63	453	75	216	334
			backgroundConnect	22	9	86	10	27	38
			firstReactRender	134	43	358	97	157	327
			getState	14	4	319	31	13	19
			initialActions	3	1	6	1	3	5
			loadScripts	1607	1294	1903	148	1708	1845
			setupStore	42	7	310	81	19	304
Firefox	Browserify	Home	uiStartup	1349	1149	1745	135	1406	1630
			load	1192	1024	1587	125	1256	1478
			domContentLoaded	1192	1024	1587	125	1255	1477
			domInteractive	99	37	252	33	110	166
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	24	13	222	23	21	52
			firstReactRender	24	20	64	7	23	31
			getState	11	3	168	19	8	37
			initialActions	0	0	1	0	0	1
			loadScripts	1170	991	1564	123	1237	1457
			setupStore	9	4	182	19	6	30
	Webpack	Home	uiStartup	1560	1330	2156	170	1655	1922
			load	1350	1154	1873	157	1447	1675
			domContentLoaded	1350	1153	1872	157	1446	1674
			domInteractive	81	50	233	23	87	112
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	22	15	91	9	24	41
			firstReactRender	41	28	56	5	44	51
			getState	12	4	264	26	9	29
			initialActions	0	0	1	0	1	1
			loadScripts	1332	1140	1855	155	1430	1654
			setupStore	8	5	24	3	8	13

Benchmark value 26 exceeds gate value 18 for chrome browserify home p95 backgroundConnect
Benchmark value 43 exceeds gate value 32 for chrome webpack home mean setupStore
Benchmark value 2476 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 12 exceeds gate value 11 for firefox browserify home mean getState
Benchmark value 10 exceeds gate value 9 for firefox browserify home mean setupStore
Benchmark value 37 exceeds gate value 24 for firefox browserify home p95 getState
Benchmark value 30 exceeds gate value 27 for firefox browserify home p95 setupStore
Benchmark value 41 exceeds gate value 38 for firefox webpack home mean firstReactRender
Benchmark value 1675 exceeds gate value 1660 for firefox webpack home p95 load
Benchmark value 1674 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 1654 exceeds gate value 1630 for firefox webpack home p95 loadScripts
Sum of mean exceeds: 16ms | Sum of p95 exceeds: 339ms
Sum of all benchmark exceeds: 355ms

[metamaskbot]

Builds ready [aa991ae]

• 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 (1219 ± 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	1219	1092	1442	69	1265	1345
			load	1055	932	1260	65	1100	1180
			domContentLoaded	1048	924	1254	65	1092	1172
			domInteractive	18	13	96	10	16	33
			firstPaint	793	133	1204	392	1093	1136
			backgroundConnect	8	5	24	4	8	23
			firstReactRender	21	15	46	5	21	32
			getState	15	6	37	7	20	29
			initialActions	0	0	1	0	0	1
			loadScripts	809	694	990	63	853	919
			setupStore	8	5	26	3	8	12
	Webpack	Home	uiStartup	2171	1714	2627	229	2353	2531
			load	1679	1335	2006	176	1823	1939
			domContentLoaded	1669	1331	1996	174	1810	1930
			domInteractive	16	11	60	10	13	44
			firstPaint	179	64	543	80	211	324
			backgroundConnect	32	9	344	46	29	54
			firstReactRender	148	44	392	112	301	335
			getState	26	5	316	63	13	242
			initialActions	3	1	8	1	3	5
			loadScripts	1665	1329	1984	173	1807	1919
			setupStore	40	7	318	77	21	274
Firefox	Browserify	Home	uiStartup	1332	1143	1711	118	1403	1555
			load	1178	1015	1512	108	1249	1416
			domContentLoaded	1178	1015	1512	108	1249	1415
			domInteractive	96	39	235	31	114	150
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	21	13	110	13	20	36
			firstReactRender	25	20	73	8	24	51
			getState	10	4	206	20	8	12
			initialActions	0	0	1	0	0	1
			loadScripts	1160	1002	1477	107	1229	1395
			setupStore	6	4	21	3	6	10
	Webpack	Home	uiStartup	1549	1358	2043	143	1641	1858
			load	1335	1166	1809	134	1422	1580
			domContentLoaded	1335	1166	1808	134	1422	1580
			domInteractive	83	48	267	31	84	145
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	22	15	63	9	23	46
			firstReactRender	41	27	52	5	44	51
			getState	9	4	31	5	9	22
			initialActions	1	0	2	1	1	1
			loadScripts	1316	1151	1790	134	1400	1563
			setupStore	11	5	243	25	8	25

Benchmark value 23 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 2531 exceeds gate value 2454 for chrome webpack home p95 uiStartup
Benchmark value 242 exceeds gate value 195 for chrome webpack home p95 getState
Benchmark value 274 exceeds gate value 65 for chrome webpack home p95 setupStore
Benchmark value 26 exceeds gate value 25 for firefox browserify home mean firstReactRender
Benchmark value 42 exceeds gate value 38 for firefox webpack home mean firstReactRender
Benchmark value 51 exceeds gate value 50 for firefox webpack home p95 firstReactRender
Sum of mean exceeds: 14ms | Sum of p95 exceeds: 339ms
Sum of all benchmark exceeds: 353ms