fix: updates transaction details page with router v6 hooks

[ghgoodreau]

Description

The swap/bridge transaction details page was broken after the React Router v5 → v6 migration. Clicking on a swap transaction in the activity list would show an empty details page with a broken back button.

Root cause: The CrossChainSwapTxDetails component was still expecting params, location, and navigate as props (v5 pattern), but the router migration in e14532f7bf changed how route components receive these - they now need to use hooks (useParams, useLocation, useNavigate).

Fix: Updated the component to use React Router v6 hooks instead of props, and updated the corresponding tests to mock the hooks.

Changelog

CHANGELOG entry: Fixed swap/bridge transaction details page not loading when clicking on a transaction from the activity list

Related issues

Fixes: https://github.com/MetaMask/metamask-extension/issues/38682

Manual testing steps

1. Go to the Bridge page and perform a swap (e.g., ETH to USDC)
2. Wait for the transaction to complete
3. Go to the Activity tab
4. Click on the completed swap transaction
5. Verify the transaction details page loads correctly with all info (status, amounts, gas fee, nonce, etc.)
6. Verify the back button works

Screenshots/Recordings

Before

After

Pre-merge author checklist

• [x] I've followed MetaMask Contributor Docs and MetaMask Extension Coding Standards.
• [x] I've completed the PR template to the best of my ability
• [x] I’ve included tests if applicable
• [x] I’ve documented my code using JSDoc format if applicable
• [x] 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.

---

[!NOTE] Migrates CrossChainSwapTxDetails to use React Router v6 hooks and updates tests, restoring correct rendering and navigation for bridge/swap transaction details.

• UI (Bridge Transaction Details):
  • Refactor ui/pages/bridge/transaction-details/transaction-details.tsx to use useParams, useLocation, and useNavigate (remove props-based location, navigate, params).
  • Read transactionGroup and isEarliestNonce from location.state; use navigate(PREVIOUS_ROUTE) for back action.
• Tests:
  • Update transaction-details.test.tsx to mock useNavigate, useLocation, useParams and render <CrossChainSwapTxDetails /> without props.
  • Maintain snapshot/row assertions across completed, pending, confirmed, and failed states.

^{Written by Cursor Bugbot for commit c2460f3d218506a62347629701071b5c993edb6e. This will update automatically on new commits. Configure here.}

[github-actions[bot]]

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, +37 -63)

• 📁 ui/
  • 📁 pages/
    • 📁 bridge/
      • 📁 transaction-details/
        • 📄 transaction-details.test.tsx +32 -47
        • 📄 transaction-details.tsx +5 -16

[metamaskbot]

Builds ready [3c58f95]

• builds: chrome, firefox
• builds (beta): chrome, firefox
• builds (flask): chrome, firefox
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• 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, 15
  • ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18
  • content-script: 0
  • offscreen: 0

UI Startup Metrics (1269 ± 121 ms)

Platform	BuildType	Page	Metric	Mean (ms)	Min (ms)	Max (ms)	Std Dev (ms)	P 75 (ms)	P 95 (ms)
Chrome	Browserify	Standard Home	uiStartup	1269	1033	1676	121	1333	1463
			load	1039	856	1342	102	1103	1240
			domContentLoaded	1032	852	1326	101	1098	1234
			domInteractive	26	16	99	20	22	87
			firstPaint	478	91	1344	382	989	1172
			backgroundConnect	213	194	250	12	220	239
			firstReactRender	44	31	151	15	49	67
			getState	38	17	144	20	42	69
			initialActions	1	0	3	1	1	2
			loadScripts	826	656	1123	97	880	1030
			setupStore	12	6	36	5	13	21
			numNetworkReqs	13	6	75	19	6	69
	Browserify	Power User Home	uiStartup	1914	1543	2553	161	1979	2197
			load	1074	870	1556	131	1188	1250
			domContentLoaded	1063	862	1549	131	1173	1242
			domInteractive	32	17	236	30	27	96
			firstPaint	535	95	1250	398	1001	1214
			backgroundConnect	245	198	611	89	232	539
			firstReactRender	46	36	63	5	48	54
			getState	190	142	725	77	189	255
			initialActions	1	0	2	1	1	2
			loadScripts	853	665	1315	128	967	1039
			setupStore	16	8	40	7	14	34
			numNetworkReqs	72	59	146	19	68	128
	Webpack	Standard Home	uiStartup	829	687	1228	91	873	990
			load	669	576	1033	82	708	816
			domContentLoaded	663	571	1015	80	702	808
			domInteractive	28	15	122	22	23	99
			firstPaint	245	81	821	171	224	690
			backgroundConnect	12	5	56	8	13	30
			firstReactRender	53	34	169	29	57	140
			getState	28	14	68	10	37	45
			initialActions	1	0	2	1	1	2
			loadScripts	659	569	1006	79	700	805
			setupStore	11	6	27	4	14	19
			numNetworkReqs	14	6	83	20	6	74
	Webpack	Power User Home	uiStartup	1430	1091	2037	190	1606	1734
			load	736	601	1029	106	838	904
			domContentLoaded	729	593	1022	105	829	896
			domInteractive	32	17	162	28	26	109
			firstPaint	321	99	1031	250	342	901
			backgroundConnect	89	6	672	172	49	569
			firstReactRender	50	42	81	6	52	62
			getState	188	143	333	37	204	267
			initialActions	1	0	2	1	1	2
			loadScripts	726	590	1013	104	825	894
			setupStore	18	7	40	10	19	37
			numNetworkReqs	72	58	222	25	68	134
Firefox	Browserify	Standard Home	uiStartup	1327	1060	2194	212	1433	1719
			load	1069	900	1971	167	1128	1249
			domContentLoaded	1068	899	1971	167	1128	1249
			domInteractive	78	31	980	133	84	150
			firstPaint	-	-	-	-	-	-
			backgroundConnect	57	21	307	54	70	190
			firstReactRender	37	30	93	9	39	54
			getState	15	7	155	21	11	36
			initialActions	1	0	2	0	1	2
			loadScripts	1041	884	1926	159	1101	1190
			setupStore	16	5	97	18	11	61
			numNetworkReqs	16	6	89	22	8	75
	Browserify	Power User Home	uiStartup	2653	1665	3819	530	3081	3372
			load	1631	986	2469	494	2135	2383
			domContentLoaded	1630	986	2469	494	2135	2382
			domInteractive	222	32	1072	329	230	975
			firstPaint	-	-	-	-	-	-
			backgroundConnect	205	25	1069	228	232	930
			firstReactRender	54	36	100	12	59	83
			getState	129	71	272	42	159	215
			initialActions	2	0	42	4	2	3
			loadScripts	1546	970	2448	463	1984	2309
			setupStore	51	5	1042	146	38	147
			numNetworkReqs	74	53	134	21	70	126
	Webpack	Standard Home	uiStartup	1595	1336	2372	203	1703	1943
			load	1308	1118	1830	127	1371	1556
			domContentLoaded	1308	1118	1830	127	1371	1556
			domInteractive	70	29	167	35	90	132
			firstPaint	-	-	-	-	-	-
			backgroundConnect	62	20	333	47	73	147
			firstReactRender	44	33	94	10	49	61
			getState	17	7	196	24	17	48
			initialActions	1	0	3	1	2	2
			loadScripts	1276	1099	1765	119	1339	1514
			setupStore	20	6	153	27	14	95
			numNetworkReqs	16	6	85	22	8	78
	Webpack	Power User Home	uiStartup	2620	1712	4021	590	3064	3529
			load	1864	1165	3500	525	2300	2526
			domContentLoaded	1863	1158	3500	525	2300	2525
			domInteractive	251	29	1288	370	230	997
			firstPaint	-	-	-	-	-	-
			backgroundConnect	159	20	1106	203	204	434
			firstReactRender	54	35	121	13	59	80
			getState	129	64	255	44	150	231
			initialActions	2	0	36	4	2	7
			loadScripts	1788	1107	2717	484	2245	2495
			setupStore	26	4	191	32	27	116
			numNetworkReqs	76	57	137	21	84	129

📊 Page Load Benchmark Results

Current Commit: 3c58f95 | Date: 12/9/2025

📄 Localhost MetaMask Test Dapp

Samples: 100

Summary

• pageLoadTime-> current mean value: 1.05s (±52ms) 🟡 | historical mean value: 1.04s ⬆️ (historical data)
• domContentLoaded-> current mean value: 731ms (±50ms) 🟢 | historical mean value: 727ms ⬆️ (historical data)
• firstContentfulPaint-> current mean value: 78ms (±12ms) 🟢 | historical mean value: 83ms ⬇️ (historical data)

📈 Detailed Results

Metric	Mean	Std Dev	Min	Max	P95	P99
pageLoadTime	1.05s	52ms	1.02s	1.34s	1.09s	1.34s
domContentLoaded	731ms	50ms	701ms	996ms	761ms	996ms
firstPaint	78ms	12ms	60ms	188ms	88ms	188ms
firstContentfulPaint	78ms	12ms	60ms	188ms	88ms	188ms
largestContentfulPaint	0ms	0ms	0ms	0ms	0ms	0ms

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

• background: 79 Bytes (0%)
• ui: 44 Bytes (0%)
• common: 44 Bytes (0%)

[metamaskbot]

Builds ready [c2460f3]

• builds: chrome, firefox
• builds (beta): chrome, firefox
• builds (flask): chrome, firefox
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• 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, 15
  • ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18
  • content-script: 0
  • offscreen: 0

UI Startup Metrics (1247 ± 106 ms)

Platform	BuildType	Page	Metric	Mean (ms)	Min (ms)	Max (ms)	Std Dev (ms)	P 75 (ms)	P 95 (ms)
Chrome	Browserify	Standard Home	uiStartup	1247	1026	1608	106	1299	1434
			load	1028	862	1333	92	1072	1204
			domContentLoaded	1021	853	1327	92	1066	1197
			domInteractive	25	15	103	18	22	73
			firstPaint	452	78	1213	376	966	1121
			backgroundConnect	212	193	268	14	215	246
			firstReactRender	45	31	74	11	51	69
			getState	39	19	143	16	48	61
			initialActions	1	0	4	1	1	2
			loadScripts	818	655	1091	87	854	998
			setupStore	13	6	48	6	14	25
			numNetworkReqs	13	6	79	18	6	71
	Browserify	Power User Home	uiStartup	1893	1468	2432	187	2010	2225
			load	1021	857	1635	131	1102	1245
			domContentLoaded	1009	849	1623	129	1076	1238
			domInteractive	29	16	123	23	25	95
			firstPaint	671	85	1643	422	1043	1202
			backgroundConnect	249	181	727	111	228	582
			firstReactRender	49	38	93	9	53	75
			getState	195	70	726	64	208	258
			initialActions	1	0	3	1	1	2
			loadScripts	809	656	1402	125	876	1029
			setupStore	14	8	61	7	14	33
			numNetworkReqs	70	50	137	18	67	121
	Webpack	Standard Home	uiStartup	834	680	1160	83	901	964
			load	667	568	860	76	719	821
			domContentLoaded	662	562	850	76	715	809
			domInteractive	26	16	99	19	23	79
			firstPaint	228	86	798	145	236	612
			backgroundConnect	12	6	43	8	13	32
			firstReactRender	57	34	245	38	55	135
			getState	31	14	93	14	41	53
			initialActions	1	0	3	1	1	2
			loadScripts	658	557	847	75	713	806
			setupStore	12	7	30	5	14	21
			numNetworkReqs	14	6	85	20	6	73
	Webpack	Power User Home	uiStartup	1454	1055	2075	207	1637	1758
			load	746	591	979	110	864	923
			domContentLoaded	738	585	970	109	856	913
			domInteractive	31	17	139	26	26	109
			firstPaint	295	96	918	222	291	870
			backgroundConnect	114	7	648	193	109	584
			firstReactRender	50	41	89	7	52	62
			getState	187	143	305	35	194	263
			initialActions	1	0	3	1	1	2
			loadScripts	735	583	957	108	853	910
			setupStore	16	6	46	10	16	38
			numNetworkReqs	71	57	143	22	67	137
Firefox	Browserify	Standard Home	uiStartup	1361	1095	2527	219	1455	1667
			load	1097	905	2223	172	1144	1304
			domContentLoaded	1097	900	2223	172	1144	1304
			domInteractive	75	31	1275	126	86	136
			firstPaint	-	-	-	-	-	-
			backgroundConnect	52	22	179	34	69	117
			firstReactRender	38	31	65	7	40	56
			getState	13	7	131	15	12	26
			initialActions	1	0	3	1	1	2
			loadScripts	1067	890	2207	168	1112	1244
			setupStore	15	6	109	19	11	63
			numNetworkReqs	15	6	85	21	8	74
	Browserify	Power User Home	uiStartup	2659	1627	3803	544	3098	3361
			load	1676	980	2596	502	2127	2386
			domContentLoaded	1676	979	2595	502	2127	2386
			domInteractive	134	33	1367	222	92	897
			firstPaint	-	-	-	-	-	-
			backgroundConnect	190	26	1151	225	193	970
			firstReactRender	57	35	186	18	60	92
			getState	134	79	323	43	157	220
			initialActions	2	0	36	4	2	3
			loadScripts	1580	959	2542	470	2011	2281
			setupStore	47	5	1038	113	46	206
			numNetworkReqs	74	52	135	20	84	123
	Webpack	Standard Home	uiStartup	1582	1288	2180	198	1660	2048
			load	1308	1113	1952	131	1389	1519
			domContentLoaded	1307	1113	1952	131	1389	1519
			domInteractive	78	22	180	37	107	133
			firstPaint	-	-	-	-	-	-
			backgroundConnect	57	19	225	41	74	134
			firstReactRender	41	33	99	9	44	53
			getState	18	6	202	28	15	51
			initialActions	1	0	2	1	2	2
			loadScripts	1276	1082	1926	123	1354	1485
			setupStore	18	5	128	22	15	75
			numNetworkReqs	15	6	89	21	8	76
	Webpack	Power User Home	uiStartup	2599	1738	3931	504	2973	3305
			load	1830	1134	2695	441	2218	2443
			domContentLoaded	1830	1134	2695	441	2218	2443
			domInteractive	152	26	999	259	88	945
			firstPaint	-	-	-	-	-	-
			backgroundConnect	145	24	981	158	184	282
			firstReactRender	54	35	88	10	59	77
			getState	138	75	951	93	158	230
			initialActions	2	0	37	4	2	7
			loadScripts	1754	1117	2594	424	2120	2372
			setupStore	40	5	1049	112	28	120
			numNetworkReqs	75	53	139	22	82	129

📊 Page Load Benchmark Results

Current Commit: c2460f3 | Date: 12/10/2025

📄 Localhost MetaMask Test Dapp

Samples: 100

Summary

• pageLoadTime-> current mean value: 1.03s (±41ms) 🟡 | historical mean value: 1.04s ⬇️ (historical data)
• domContentLoaded-> current mean value: 718ms (±38ms) 🟢 | historical mean value: 727ms ⬇️ (historical data)
• firstContentfulPaint-> current mean value: 76ms (±13ms) 🟢 | historical mean value: 83ms ⬇️ (historical data)

📈 Detailed Results

Metric	Mean	Std Dev	Min	Max	P95	P99
pageLoadTime	1.03s	41ms	1.01s	1.33s	1.06s	1.33s
domContentLoaded	718ms	38ms	699ms	995ms	736ms	995ms
firstPaint	76ms	13ms	60ms	192ms	84ms	192ms
firstContentfulPaint	76ms	13ms	60ms	192ms	84ms	192ms
largestContentfulPaint	0ms	0ms	0ms	0ms	0ms	0ms

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

• background: 79 Bytes (0%)
• ui: 44 Bytes (0%)
• common: 44 Bytes (0%)