Skip to content

Conversation

@DDDDDanica
Copy link
Contributor

@DDDDDanica DDDDDanica commented Nov 6, 2025

Description

Migrate migrate unlock, deeplink, defi page and MetaMetricsContext to react-router-dom-v5-compat

Open in GitHub Codespaces

Changelog

CHANGELOG entry: null

Related issues

Fixes: part of https://github.com/MetaMask/MetaMask-planning/issues/3261

Manual testing steps

  1. Go to this page...

Screenshots/Recordings

Before

After

Pre-merge author checklist

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 multiple pages to react-router-dom-v5-compat, adds InitializedV5Compat, adapts routing to pass navigate/params, updates MetaMetrics page matching, and refreshes tests/stories accordingly.

  • Routing/Navigation:
    • Replace react-router-dom v5 usages with react-router-dom-v5-compat across pages; use Navigate instead of Redirect.
    • In ui/pages/routes/routes.component.tsx, bridge v5 history to v5-compat navigate via createV5CompatNavigate, render components via Route children, and pass navigate/params/location as needed. Render ToastMaster with explicit location prop.
    • Add InitializedV5Compat HOC to guard routes needing onboarding completion.
  • MetaMetrics:
    • In ui/contexts/metametrics.js, switch to react-router-dom-v5-compat and loop getPaths() with matchPath (v6-style signature) to find the first match for page tracking.
  • Component updates:
    • ui/pages/unlock-page/*: Replace history with navigate; read redirect from location.state.from or navState.from; containers use withRouterHooks and useNavState; docs/stories updated.
    • ui/pages/deep-link/deep-link.tsx: Accept location via props (from Route) instead of useLocation.
    • ui/pages/defi/components/defi-details-page.tsx: Accept navigate/params; replace Redirect/history.push with Navigate/navigate.
    • ui/pages/keychains/reveal-seed.js: Accept navigate/keyringId; replace history.goBack with navigate(-1); add PropTypes.
    • ui/pages/lock/*: Use navigate (+ withRouterHooks) in component/container.
  • Tests:
    • Update to render-helpers-navigate, mock react-router-dom-v5-compat hooks, pass new props (navigate, params, location), and adjust snapshots/behaviors accordingly.

Written by Cursor Bugbot for commit 0f8e39b. This will update automatically on new commits. Configure here.

@DDDDDanica DDDDDanica self-assigned this Nov 6, 2025
@DDDDDanica DDDDDanica added the no-changelog no-changelog Indicates no external facing user changes, therefore no changelog documentation needed label Nov 6, 2025
@github-actions
Copy link
Contributor

github-actions bot commented Nov 6, 2025

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.

@DDDDDanica DDDDDanica marked this pull request as ready for review November 6, 2025 16:26
@metamaskbot metamaskbot added the team-extension-platform Extension Platform team label Nov 6, 2025
@github-actions github-actions bot added the size-L label Nov 6, 2025
Copy link

@cursor cursor bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bug: Migration break: use navigate instead of history.replace

The onResetWallet method references this.props.history.replace(DEFAULT_ROUTE) on line 472, but the history prop was removed and replaced with navigate in this migration. This will cause a runtime error when the method is invoked. It should be changed to this.props.navigate(DEFAULT_ROUTE, { replace: true }).

ui/pages/unlock-page/unlock-page.component.js#L467-L473

onResetWallet = async () => {
this.setState({ showLoginErrorModal: false });
await this.props.resetWallet();
await this.props.forceUpdateMetamaskState();
this.props.history.replace(DEFAULT_ROUTE);
};

Fix in Cursor Fix in Web


@DDDDDanica DDDDDanica force-pushed the refactor/unlock-deep-defi-v5-compat branch 2 times, most recently from e8431e9 to ac5edda Compare November 6, 2025 16:29
@DDDDDanica DDDDDanica requested review from a team as code owners November 6, 2025 16:29
@metamaskbot
Copy link
Collaborator

Builds ready [6503e55]
📊 Page Load Benchmark Results

Current Commit: 6503e55 | Date: 11/6/2025

📄 Localhost MetaMask Test Dapp

Samples: 100

Summary

  • pageLoadTime-> current mean value: 1.04s (±39ms) 🟡 | historical mean value: 1.05s ⬇️ (historical data)
  • domContentLoaded-> current mean value: 723ms (±35ms) 🟢 | historical mean value: 736ms ⬇️ (historical data)
  • firstContentfulPaint-> current mean value: 77ms (±13ms) 🟢 | historical mean value: 78ms ⬇️ (historical data)

📈 Detailed Results

Metric Mean Std Dev Min Max P95 P99
pageLoadTime 1.04s 39ms 1.01s 1.34s 1.07s 1.34s
domContentLoaded 723ms 35ms 701ms 982ms 752ms 982ms
firstPaint 77ms 13ms 60ms 200ms 84ms 200ms
firstContentfulPaint 77ms 13ms 60ms 200ms 84ms 200ms
largestContentfulPaint 0ms 0ms 0ms 0ms 0ms 0ms
Bundle size diffs [🚨 Warning! Bundle size has increased!]
  • background: 58 Bytes (0%)
  • ui: 2.17 KiB (0.03%)
  • common: 25 Bytes (0%)

</Router>,
<UnlockPage forceUpdateMetamaskState={mockForceUpdateMetamaskState} />,
store,
{ pathname },
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bug: Duplicate Test Names Confuse Test Runner

Duplicate test case with identical name should show login error modal when authentication error is thrown exists at lines 258-297 and 299-335. The tests have the same name and nearly identical implementation, which will cause test runner confusion and makes one test unreachable.

Fix in Cursor Fix in Web

@DDDDDanica DDDDDanica force-pushed the refactor/unlock-deep-defi-v5-compat branch from aef7c41 to 47ba5a0 Compare November 7, 2025 07:07
@DDDDDanica DDDDDanica removed request for a team November 7, 2025 07:09
@DDDDDanica DDDDDanica removed request for a team November 7, 2025 07:09
/>
)}
/>
);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bug: Nested Routes Created by Authenticated HOC Wrapping

Nested Route components created by wrapping Authenticated inside a Route render prop. The Authenticated HOC returns a Route component when authenticated, creating a Route inside a Route. This should use AuthenticatedV5Compat instead, which returns children directly without wrapping in a Route, or the outer Route render prop should be removed.

Fix in Cursor Fix in Web

params={match.params}
/>
)}
/>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bug: Nested Routes Created by Authenticated Wrapper

Nested Route components created by wrapping Authenticated inside a Route render prop. The Authenticated HOC returns a Route component when authenticated, creating a Route inside a Route. This should use AuthenticatedV5Compat instead, which returns children directly without wrapping in a Route, or the outer Route render prop should be removed.

Fix in Cursor Fix in Web

@metamaskbot
Copy link
Collaborator

Builds ready [47ba5a0]
📊 Page Load Benchmark Results

Current Commit: 47ba5a0 | Date: 11/7/2025

📄 Localhost MetaMask Test Dapp

Samples: 100

Summary

  • pageLoadTime-> current mean value: 1.06s (±41ms) 🟡 | historical mean value: 1.04s ⬆️ (historical data)
  • domContentLoaded-> current mean value: 744ms (±39ms) 🟢 | historical mean value: 723ms ⬆️ (historical data)
  • firstContentfulPaint-> current mean value: 79ms (±11ms) 🟢 | historical mean value: 77ms ⬆️ (historical data)

📈 Detailed Results

Metric Mean Std Dev Min Max P95 P99
pageLoadTime 1.06s 41ms 1.03s 1.36s 1.10s 1.36s
domContentLoaded 744ms 39ms 709ms 1.03s 775ms 1.03s
firstPaint 79ms 11ms 60ms 176ms 92ms 176ms
firstContentfulPaint 79ms 11ms 60ms 176ms 92ms 176ms
largestContentfulPaint 0ms 0ms 0ms 0ms 0ms 0ms
Bundle size diffs [🚨 Warning! Bundle size has increased!]
  • background: 58 Bytes (0%)
  • ui: 2.18 KiB (0.03%)
  • common: 24 Bytes (0%)

@metamaskbot
Copy link
Collaborator

Builds ready [33daab7]
UI Startup Metrics (1166 ± 88 ms)
PlatformBuildTypePageMetricMean (ms)Min (ms)Max (ms)Std Dev (ms)P 75 (ms)P 95 (ms)
ChromeBrowserifyStandard HomeuiStartup1166100913738812311320
load99985212128410661121
domContentLoaded99384712068410601115
domInteractive201467102043
firstPaint59891121139910231126
backgroundConnect1901772157193203
firstReactRender22173942428
getState1964072334
initialActions003001
loadScripts810674102882871934
setupStore962021012
numNetworkReqs1367619673
BrowserifyPower User HomeuiStartup19581721288631022142886
load1047891167421011881674
domContentLoaded1038885166620811671666
domInteractive311593235193
firstPaint687115167350411961673
backgroundConnect24322226212251262
firstReactRender27243222832
getState17615425226194252
initialActions001011
loadScripts80866914192039301419
setupStore13103261232
numNetworkReqs1187325471221254
WebpackStandard HomeuiStartup8377071225908491080
load61255399976607815
domContentLoaded60454896472601802
domInteractive16125381537
firstPaint18360971176173583
backgroundConnect2510101152858
firstReactRender3218296273538
getState1153641316
initialActions001001
loadScripts60154695169599792
setupStore1263551324
numNetworkReqs1367219871
WebpackPower User HomeuiStartup12641139170716814451707
load62856288991716889
domContentLoaded60955285581678855
domInteractive221354153954
firstPaint401111755231596755
backgroundConnect601624371142243
firstReactRender26233022730
getState14510118326165183
initialActions001011
loadScripts60555084578667845
setupStore1462992529
numNetworkReqs1126922453166224
FirefoxBrowserifyStandard HomeuiStartup15111321201514215561840
load1267113815569513111481
domContentLoaded1267113715559513111481
domInteractive1113138249116222
firstPaint------
backgroundConnect50271812656121
firstReactRender27234842831
getState9421821717
initialActions001011
loadScripts1237111915108512821429
setupStore1483651529
numNetworkReqs1266715759
BrowserifyPower User HomeuiStartup24032118295120225402951
load13991191177718515931777
domContentLoaded13991191177618515931776
domInteractive22475543175493543
firstPaint------
backgroundConnect882624862113248
firstReactRender443073115073
getState1096115420120154
initialActions001011
loadScripts13581159170417815561704
setupStore26691284991
numNetworkReqs1336723060200230
WebpackStandard HomeuiStartup16311479213714316631972
load13931250180110714351647
domContentLoaded13931249180110714351647
domInteractive983022831114153
firstPaint------
backgroundConnect48201322254106
firstReactRender302279123068
getState84577715
initialActions001011
loadScripts13621223176010514011617
setupStore14771121338
numNetworkReqs1366917865
WebpackPower User HomeuiStartup23612104290522524572905
load14481263178614316131786
domContentLoaded14471262178514316121785
domInteractive1304046699153466
firstPaint------
backgroundConnect80302095577209
firstReactRender39306894368
getState1226824547153245
initialActions20287128
loadScripts14161236172913415621729
setupStore21659182959
numNetworkReqs1336531682213316
📊 Page Load Benchmark Results

Current Commit: 33daab7 | Date: 11/7/2025

📄 Localhost MetaMask Test Dapp

Samples: 100

Summary

  • pageLoadTime-> current mean value: 1.03s (±37ms) 🟡 | historical mean value: 1.03s ⬇️ (historical data)
  • domContentLoaded-> current mean value: 716ms (±34ms) 🟢 | historical mean value: 718ms ⬇️ (historical data)
  • firstContentfulPaint-> current mean value: 76ms (±13ms) 🟢 | historical mean value: 76ms ⬇️ (historical data)

📈 Detailed Results

Metric Mean Std Dev Min Max P95 P99
pageLoadTime 1.03s 37ms 1.01s 1.31s 1.05s 1.31s
domContentLoaded 716ms 34ms 695ms 977ms 731ms 977ms
firstPaint 76ms 13ms 60ms 188ms 84ms 188ms
firstContentfulPaint 76ms 13ms 60ms 188ms 84ms 188ms
largestContentfulPaint 0ms 0ms 0ms 0ms 0ms 0ms
Bundle size diffs [🚨 Warning! Bundle size has increased!]
  • background: 369 Bytes (0.01%)
  • ui: 2.83 KiB (0.04%)
  • common: 487 Bytes (0.01%)

@DDDDDanica DDDDDanica force-pushed the refactor/unlock-deep-defi-v5-compat branch from d68edca to 0f8e39b Compare November 7, 2025 16:31
@metamaskbot
Copy link
Collaborator

Builds ready [0f8e39b]
UI Startup Metrics (1265 ± 111 ms)
PlatformBuildTypePageMetricMean (ms)Min (ms)Max (ms)Std Dev (ms)P 75 (ms)P 95 (ms)
ChromeBrowserifyStandard HomeuiStartup12651101191811113201416
load1090952171310611421248
domContentLoaded1084946170710611361241
domInteractive2314141192064
firstPaint688103130342210891178
backgroundConnect2362242707240253
firstReactRender28185073341
getState2375182837
initialActions003101
loadScripts85371314781059151017
setupStore1162841218
numNetworkReqs1367619671
BrowserifyPower User HomeuiStartup19721744291531821422915
load1073921167522413321675
domContentLoaded1065916166822413271668
domInteractive39151804161180
firstPaint50118013963739331396
backgroundConnect24121827717252277
firstReactRender30255363053
getState17515721015182210
initialActions001011
loadScripts835684140321410861403
setupStore1394481344
numNetworkReqs1197225167171251
WebpackStandard HomeuiStartup8227031241908261030
load604557100179599765
domContentLoaded59655297675593749
domInteractive16115691438
firstPaint22158928206205709
backgroundConnect251276142560
firstReactRender291791103437
getState1061831216
initialActions001001
loadScripts59354996673591739
setupStore1252851326
numNetworkReqs1467419872
WebpackPower User HomeuiStartup1244989184522014071845
load66656910171576931017
domContentLoaded648557981141678981
domInteractive28131333143133
firstPaint39260986338681986
backgroundConnect49112165651216
firstReactRender26232812728
getState1389216523152165
initialActions001001
loadScripts644555971138667971
setupStore1363182431
numNetworkReqs996718540136185
FirefoxBrowserifyStandard HomeuiStartup14181277185210714551644
load1206108314278112531383
domContentLoaded1206108314278112521382
domInteractive1133533155113228
firstPaint------
backgroundConnect402592134967
firstReactRender25214042639
getState73495713
initialActions001001
loadScripts1183106614018112311362
setupStore147120141333
numNetworkReqs1266515757
BrowserifyPower User HomeuiStartup24162052322833226423228
load13691121179619115451796
domContentLoaded13681121179619115451796
domInteractive19352485154411485
firstPaint------
backgroundConnect982638591109385
firstReactRender463283125183
getState1233628052146280
initialActions001011
loadScripts13291105161616715191616
setupStore21674202874
numNetworkReqs1346730683201306
WebpackStandard HomeuiStartup17021461223516417442064
load14371253177811814751705
domContentLoaded14361252177811814741705
domInteractive1063536148116172
firstPaint------
backgroundConnect56282093060122
firstReactRender322481113372
getState12419822846
initialActions001001
loadScripts14011235174710814431633
setupStore195253271645
numNetworkReqs1366817763
WebpackPower User HomeuiStartup24552129290626426852906
load15121255201122016552011
domContentLoaded15111255201021916542010
domInteractive15738611165221611
firstPaint------
backgroundConnect1073429282160292
firstReactRender39305884458
getState1076317729110177
initialActions001011
loadScripts14771237194820916191948
setupStore3251684257168
numNetworkReqs1305827373212273
📊 Page Load Benchmark Results

Current Commit: 0f8e39b | Date: 11/7/2025

📄 Localhost MetaMask Test Dapp

Samples: 100

Summary

  • pageLoadTime-> current mean value: 1.04s (±36ms) 🟡 | historical mean value: 1.03s ⬆️ (historical data)
  • domContentLoaded-> current mean value: 723ms (±35ms) 🟢 | historical mean value: 718ms ⬆️ (historical data)
  • firstContentfulPaint-> current mean value: 77ms (±10ms) 🟢 | historical mean value: 76ms ⬆️ (historical data)

📈 Detailed Results

Metric Mean Std Dev Min Max P95 P99
pageLoadTime 1.04s 36ms 1.00s 1.30s 1.08s 1.30s
domContentLoaded 723ms 35ms 694ms 977ms 760ms 977ms
firstPaint 77ms 10ms 64ms 160ms 88ms 160ms
firstContentfulPaint 77ms 10ms 64ms 160ms 88ms 160ms
largestContentfulPaint 0ms 0ms 0ms 0ms 0ms 0ms
Bundle size diffs [🚨 Warning! Bundle size has increased!]
  • background: 369 Bytes (0.01%)
  • ui: 2.77 KiB (0.04%)
  • common: 487 Bytes (0.01%)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

no-changelog no-changelog Indicates no external facing user changes, therefore no changelog documentation needed size-L team-extension-platform Extension Platform team

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants