feat: Design parity improvements (splash screen and swap setup)

[kevinbluer]

Description

• Increases parity with designs for both the splash screen and swap setup flow
• Includes a number of minor refactors

Related issues

Fixes: #32133

Manual testing steps

1. Create the build (yarn webpack)
2. Go to #remote and #remote/setup-swaps and go through the setup flow
3. Designs for reference

• Note to override the vaultRemoteMode feature flag (which will implicitly default to disabled), the configuration steps are available here. Example.manifest-overrides.json:

{
  "_flags": {
    "remoteFeatureFlags": {
      "vaultRemoteMode": true
    }
  }
}

Screenshots/Recordings

Before

NA

After

NA

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.

[matallui]

LGTM

[metamaskbot]

Builds ready [5dd1a48]

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

UI Startup Metrics (1191 ± 58 ms)

Platform	BuildType	Page	Metric	Mean (ms)	Min (ms)	Max (ms)	Std Dev (ms)	P 75 (ms)	P 95 (ms)
Chrome	Browserify	Home	uiStartup	1191	1084	1391	58	1224	1301
			load	1030	947	1219	49	1058	1131
			domContentLoaded	1024	942	1215	49	1049	1124
			domInteractive	17	13	61	8	16	29
			firstPaint	661	134	1225	409	1043	1109
			backgroundConnect	7	4	22	2	7	11
			firstReactRender	20	16	44	5	20	28
			getState	13	4	43	8	19	28
			initialActions	0	0	1	0	0	1
			loadScripts	790	710	965	47	819	877
			setupStore	7	5	27	3	8	12
	Webpack	Home	uiStartup	2125	1744	2490	167	2247	2363
			load	1643	1353	1923	123	1757	1795
			domContentLoaded	1636	1349	1899	122	1751	1788
			domInteractive	16	11	66	12	13	47
			firstPaint	183	68	336	60	232	300
			backgroundConnect	26	10	82	13	29	57
			firstReactRender	215	56	376	121	337	359
			getState	14	4	289	28	14	23
			initialActions	3	1	6	1	4	5
			loadScripts	1631	1347	1876	123	1748	1786
			setupStore	25	6	275	43	21	34
Firefox	Browserify	Home	uiStartup	1341	1170	1700	123	1389	1636
			load	1199	992	1565	124	1250	1476
			domContentLoaded	1199	992	1564	124	1250	1476
			domInteractive	105	39	266	36	114	187
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	22	13	187	21	19	38
			firstReactRender	22	18	49	5	22	33
			getState	7	4	26	3	8	11
			initialActions	0	0	1	0	0	1
			loadScripts	1179	978	1548	124	1229	1458
			setupStore	5	4	31	3	6	7
	Webpack	Home	uiStartup	1500	1366	1834	109	1569	1746
			load	1277	1164	1539	90	1324	1506
			domContentLoaded	1277	1164	1539	90	1324	1505
			domInteractive	77	47	158	19	80	124
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	24	14	111	13	24	51
			firstReactRender	35	28	65	5	36	42
			getState	9	5	30	5	9	21
			initialActions	1	0	2	1	1	1
			loadScripts	1256	1136	1518	91	1303	1489
			setupStore	8	5	56	6	8	15

Benchmark value 183 exceeds gate value 175 for chrome webpack home mean firstPaint
Benchmark value 51 exceeds gate value 45 for firefox webpack home p95 backgroundConnect
Sum of mean exceeds: 8ms | Sum of p95 exceeds: 6ms
Sum of all benchmark exceeds: 14ms

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

• background: -32 Bytes (0%)
• ui: 5.58 KiB (0.08%)
• common: 276 Bytes (0%)

[caieu]

LGTM

[metamaskbot]

Builds ready [a0d8db0]

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

UI Startup Metrics (1211 ± 65 ms)

Platform	BuildType	Page	Metric	Mean (ms)	Min (ms)	Max (ms)	Std Dev (ms)	P 75 (ms)	P 95 (ms)
Chrome	Browserify	Home	uiStartup	1211	1102	1420	65	1252	1343
			load	1047	953	1239	59	1080	1163
			domContentLoaded	1042	948	1232	58	1073	1157
			domInteractive	17	13	64	6	16	28
			firstPaint	686	132	1248	420	1054	1114
			backgroundConnect	6	4	10	1	7	8
			firstReactRender	22	16	47	7	22	39
			getState	13	4	33	8	20	29
			initialActions	0	0	4	0	0	1
			loadScripts	806	716	982	56	841	923
			setupStore	7	5	24	2	8	11
	Webpack	Home	uiStartup	2105	1731	2610	166	2206	2369
			load	1632	1346	2037	129	1717	1822
			domContentLoaded	1625	1342	2026	128	1714	1819
			domInteractive	15	11	67	10	13	41
			firstPaint	187	72	330	57	228	300
			backgroundConnect	24	9	75	15	25	66
			firstReactRender	199	56	380	125	330	367
			getState	12	4	169	16	13	19
			initialActions	3	1	8	1	3	5
			loadScripts	1620	1341	2002	127	1712	1817
			setupStore	24	7	290	47	19	39
Firefox	Browserify	Home	uiStartup	1354	1171	1775	112	1415	1607
			load	1211	1036	1649	120	1272	1466
			domContentLoaded	1211	1035	1649	120	1272	1465
			domInteractive	108	39	251	39	125	191
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	21	13	112	13	20	44
			firstReactRender	22	19	56	4	23	27
			getState	7	4	26	3	8	11
			initialActions	0	0	2	0	0	1
			loadScripts	1192	1024	1632	120	1256	1449
			setupStore	6	4	28	3	6	8
	Webpack	Home	uiStartup	1498	1296	1810	107	1560	1719
			load	1283	1124	1538	95	1352	1479
			domContentLoaded	1283	1124	1538	95	1351	1479
			domInteractive	80	37	146	21	86	127
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	21	14	102	10	21	32
			firstReactRender	34	29	46	4	36	42
			getState	8	4	32	6	8	29
			initialActions	0	0	2	1	1	1
			loadScripts	1264	1109	1523	95	1336	1462
			setupStore	9	5	77	9	8	21

Bundle size diffs

• background: 0 Bytes (0%)
• ui: 1.82 KiB (0.03%)
• common: 0 Bytes (0%)

[caieu]

LGTM

[caieu]

LGTM

[metamaskbot]

Builds ready [4b8c6df]

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

UI Startup Metrics (1213 ± 52 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	1123	1388	52	1244	1326
			load	1042	916	1188	50	1075	1138
			domContentLoaded	1036	911	1181	49	1071	1133
			domInteractive	18	13	63	9	17	33
			firstPaint	668	137	1157	413	1051	1101
			backgroundConnect	7	4	12	1	7	9
			firstReactRender	22	15	91	9	21	39
			getState	14	4	33	7	19	26
			initialActions	0	0	1	0	0	1
			loadScripts	799	674	951	48	831	895
			setupStore	8	5	23	3	8	15
	Webpack	Home	uiStartup	2050	1711	2579	184	2159	2304
			load	1593	1329	1995	136	1698	1775
			domContentLoaded	1587	1325	1984	135	1691	1765
			domInteractive	16	11	68	11	13	49
			firstPaint	183	68	440	61	233	292
			backgroundConnect	23	9	65	12	27	53
			firstReactRender	187	54	467	123	328	364
			getState	12	4	153	16	13	29
			initialActions	3	1	7	1	3	4
			loadScripts	1582	1324	1960	134	1688	1759
			setupStore	15	6	44	7	19	30
Firefox	Browserify	Home	uiStartup	1338	1170	1694	117	1397	1586
			load	1193	1010	1572	121	1251	1439
			domContentLoaded	1193	1010	1572	121	1250	1439
			domInteractive	110	36	257	41	121	208
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	21	13	97	12	20	40
			firstReactRender	23	19	52	6	23	32
			getState	9	4	164	16	7	19
			initialActions	0	0	1	0	0	1
			loadScripts	1174	997	1557	121	1236	1423
			setupStore	8	4	193	19	6	9
	Webpack	Home	uiStartup	1551	1348	1895	132	1647	1822
			load	1325	1176	1624	111	1417	1569
			domContentLoaded	1325	1175	1624	111	1417	1568
			domInteractive	84	34	184	24	86	132
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	24	13	86	11	24	53
			firstReactRender	35	30	50	4	37	45
			getState	12	4	282	28	9	28
			initialActions	0	0	1	0	1	1
			loadScripts	1304	1162	1608	109	1398	1526
			setupStore	10	5	77	10	8	23

Benchmark value 208 exceeds gate value 195 for firefox browserify home p95 domInteractive
Benchmark value 53 exceeds gate value 49 for firefox webpack home p95 backgroundConnect
Sum of mean exceeds: 0ms | Sum of p95 exceeds: 17ms
Sum of all benchmark exceeds: 17ms

Bundle size diffs

• background: 0 Bytes (0%)
• ui: 1.82 KiB (0.03%)
• common: 0 Bytes (0%)