(DRAFT) feat: MMS-2553 unified UI for swaps and bridges

[ghgoodreau]

Description

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/swaps-engineers (2 files, +74 -31)

• 📁 ui/
  • 📁 hooks/
    • 📁 bridge/
      • 📄 useTokensWithFiltering.ts +3 -2
  • 📁 pages/
    • 📁 bridge/
      • 📁 prepare/
        • 📄 prepare-bridge-page.tsx +71 -29

[metamaskbot]

Builds ready [27b891d]

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

UI Startup Metrics (1231 ± 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	1231	1104	1439	76	1284	1354
			load	1066	934	1267	72	1121	1201
			domContentLoaded	1060	930	1259	72	1114	1196
			domInteractive	16	13	31	3	16	26
			firstPaint	766	136	1229	412	1100	1174
			backgroundConnect	8	4	32	4	8	20
			firstReactRender	21	16	46	5	22	34
			getState	14	5	49	8	20	30
			initialActions	0	0	1	0	0	1
			loadScripts	813	694	1012	71	865	953
			setupStore	8	5	21	2	8	12
	Webpack	Home	uiStartup	2087	1644	2583	238	2260	2471
			load	1630	1273	2035	191	1760	1919
			domContentLoaded	1624	1269	2031	189	1756	1908
			domInteractive	16	11	87	13	13	44
			firstPaint	160	63	355	57	180	298
			backgroundConnect	23	12	49	7	27	37
			firstReactRender	143	43	366	109	288	340
			getState	13	4	323	32	11	20
			initialActions	5	1	283	28	3	4
			loadScripts	1621	1267	2022	188	1755	1897
			setupStore	20	6	307	41	17	42
Firefox	Browserify	Home	uiStartup	1355	1157	1696	124	1422	1596
			load	1202	1017	1570	113	1272	1443
			domContentLoaded	1201	1017	1569	113	1272	1443
			domInteractive	99	38	331	40	102	163
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	19	13	55	5	20	27
			firstReactRender	23	20	32	2	24	28
			getState	12	4	185	28	8	11
			initialActions	0	0	5	1	0	1
			loadScripts	1185	1003	1555	113	1255	1423
			setupStore	7	4	72	9	6	12
	Webpack	Home	uiStartup	1606	1337	2193	170	1701	1986
			load	1395	1155	1963	154	1501	1744
			domContentLoaded	1394	1154	1962	154	1501	1744
			domInteractive	80	40	243	24	88	108
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	24	15	259	24	22	42
			firstReactRender	42	28	54	5	45	50
			getState	13	4	243	26	9	30
			initialActions	1	0	2	1	1	1
			loadScripts	1374	1137	1943	152	1480	1723
			setupStore	8	5	66	7	8	15

Benchmark value 1202 exceeds gate value 1190 for chrome browserify home p95 load
Benchmark value 1197 exceeds gate value 1180 for chrome browserify home p95 domContentLoaded
Benchmark value 21 exceeds gate value 18 for chrome browserify home p95 backgroundConnect
Benchmark value 953 exceeds gate value 940 for chrome browserify home p95 loadScripts
Benchmark value 2471 exceeds gate value 2454 for chrome webpack home p95 uiStartup
Benchmark value 12 exceeds gate value 11 for firefox browserify home mean getState
Benchmark value 1395 exceeds gate value 1380 for firefox webpack home mean load
Benchmark value 1395 exceeds gate value 1380 for firefox webpack home mean domContentLoaded
Benchmark value 42 exceeds gate value 38 for firefox webpack home mean firstReactRender
Benchmark value 1375 exceeds gate value 1360 for firefox webpack home mean loadScripts
Benchmark value 1986 exceeds gate value 1935 for firefox webpack home p95 uiStartup
Benchmark value 1744 exceeds gate value 1660 for firefox webpack home p95 load
Benchmark value 1744 exceeds gate value 1660 for firefox webpack home p95 domContentLoaded
Benchmark value 1723 exceeds gate value 1630 for firefox webpack home p95 loadScripts
Sum of mean exceeds: 50ms | Sum of p95 exceeds: 374ms
Sum of all benchmark exceeds: 424ms

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

• background: 984 Bytes (0.02%)
• ui: 1.28 KiB (0.02%)
• common: -112 Bytes (0%)