chore: start upgrade to React Router v6 #27185

HowardBraham · 2024-09-17T03:23:39Z

Description

Following the Incremental Migration guide for React Router v6: remix-run/react-router#8753

All code changes are to fix lint:tsc errors.

Related issues

Part of: https://github.com/MetaMask/MetaMask-planning/issues/2898
Part of: https://github.com/MetaMask/MetaMask-planning/issues/3302

Manual testing steps

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 · 2024-09-17T03:23:54Z

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.

socket-security · 2024-09-17T03:24:43Z

New and removed dependencies detected. Learn more about Socket for GitHub ↗︎

Package	New capabilities	Transitives	Size	Publisher
npm/@remix-run/[email protected]	network	`0`	2.72 MB	mjackson
npm/[email protected]	None	`0`	2.1 MB	caniuse-lite
npm/[email protected]	environment	`0`	121 kB	mjackson
npm/[email protected]	environment	`0`	588 kB	mjackson
npm/[email protected]	environment	`0`	640 kB	mjackson
npm/[email protected]	environment	`0`	719 kB	mjackson

🚮 Removed packages: npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected]

View full report↗︎

socket-security · 2024-09-17T03:24:45Z

🚨 Potential security issues detected. Learn more about Socket for GitHub ↗︎

To accept the risk, merge this PR and you will not be notified again.

Alert	Package	Note	Source	CI
Network access	npm/@remix-run/[email protected]	Module: globalThis["fetch"] Location: Package overview	`yarn.lock`	🚫

View full report↗︎

Next steps

What is network access?

This module accesses the network.

Packages should remove all network access that is functionally unnecessary. Consumers should audit network access to ensure legitimate use.

Take a deeper look at the dependency

Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support [AT] socket [DOT] dev.

Remove the package

If you happen to install a dependency that Socket reports as Known Malware you should immediately remove it and select a different dependency. For other alert types, you may may wish to investigate alternative packages or consider if there are other ways to mitigate the specific risk posed by the dependency.

Mark a package as acceptable risk

To ignore an alert, reply with a comment starting with @SocketSecurity ignore followed by a space separated list of ecosystem/package-name@version specifiers. e.g. @SocketSecurity ignore npm/[email protected] or ignore all packages with @SocketSecurity ignore-all

@SocketSecurity ignore npm/@remix-run/[email protected]

metamaskbot · 2024-09-17T03:57:25Z

Builds ready [532f6c1]

builds: chrome, firefox
builds (beta): chrome
builds (flask): chrome, firefox
builds (MMI): chrome, firefox
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Background Module Init Stats
mv3: UI Init Stats
mv3: Module Load Stats
mv3: Bundle Size Stats
mv2: E2e Actions Stats
code coverage: Report
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5
- common: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9
- content-script: 0
- offscreen: 0
- ui: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1714 ± 83 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	235	2121	1582	470	226
		domContentLoaded	1520	2114	1693	171	82
		load	1529	2123	1714	173	83
		domInteractive	15	213	53	43	21

Bundle size diffs

background: 0 Bytes (0.00%)
ui: 150.75 KiB (2.10%)
common: 0 Bytes (0.00%)

sonarcloud · 2024-09-17T04:47:30Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud

metamaskbot · 2024-09-17T05:14:52Z

Builds ready [c477a4d]

builds: chrome, firefox
builds (beta): chrome
builds (flask): chrome, firefox
builds (MMI): chrome, firefox
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Background Module Init Stats
mv3: UI Init Stats
mv3: Module Load Stats
mv3: Bundle Size Stats
mv2: E2e Actions Stats
code coverage: Report
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5
- common: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9
- content-script: 0
- offscreen: 0
- ui: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1833 ± 112 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	272	2455	1527	616	296
		domContentLoaded	1542	2447	1816	229	110
		load	1571	2458	1833	232	112
		domInteractive	15	208	53	54	26

Bundle size diffs

background: 0 Bytes (0.00%)
ui: 150.75 KiB (2.10%)
common: 0 Bytes (0.00%)

codecov · 2024-09-17T05:15:00Z

Codecov Report

Attention: Patch coverage is 18.18182% with 9 lines in your changes missing coverage. Please review.

Project coverage is 70.00%. Comparing base (33f430a) to head (c477a4d).

Files with missing lines	Patch %	Lines
ui/pages/asset/asset.tsx	0.00%	5 Missing ⚠️
...nts/app/assets/nfts/nft-details/nft-full-image.tsx	0.00%	4 Missing ⚠️

Additional details and impacted files

@@             Coverage Diff             @@
##           develop   #27185      +/-   ##
===========================================
- Coverage    70.00%   70.00%   -0.01%     
===========================================
  Files         1445     1445              
  Lines        50195    50199       +4     
  Branches     14041    14048       +7     
===========================================
- Hits         35139    35138       -1     
- Misses       15056    15061       +5

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

metamaskbot · 2024-09-20T03:13:44Z

Builds ready [058ecc7]

builds: chrome, firefox
builds (beta): chrome
builds (flask): chrome, firefox
builds (MMI): chrome, firefox
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Background Module Init Stats
mv3: UI Init Stats
mv3: Module Load Stats
mv3: Bundle Size Stats
mv2: E2e Actions Stats
code coverage: Report
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6
- common: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9
- content-script: 0
- offscreen: 0
- ui: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1811 ± 97 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1499	2309	1806	199	95
		domContentLoaded	1490	2298	1787	195	94
		load	1497	2321	1811	202	97
		domInteractive	14	79	36	19	9

Bundle size diffs

background: 0 Bytes (0.00%)
ui: 150.72 KiB (2.07%)
common: 0 Bytes (0.00%)

matthewwalsh0 · 2024-09-27T21:58:00Z

ui/components/app/assets/nfts/nft-details/nft-full-image.tsx

-      isEqualCaseInsensitive(address, asset) && id === tokenId.toString(),
+      address &&
+      asset &&
+      isEqualCaseInsensitive(address, asset) &&


Since this is our util, could we update it to accept optional arguments and check both internally?

The route problem was basically that the newer version of useParams started returning string | undefined

I did some research and found a better solution that removes the undefined

ui/components/multichain/pages/connections/connections.tsx

Gudahtt

Found a few unnecessary type casts

ui/components/app/assets/nfts/nft-details/nft-full-image.tsx

ui/components/multichain/pages/connections/connections.tsx

ui/components/multichain/pages/review-permissions-page/review-permissions-page.tsx

ui/pages/asset/asset.tsx

metamaskbot · 2024-10-01T08:24:05Z

Builds ready [80ac2ea]

builds: chrome, firefox
builds (beta): chrome
builds (flask): chrome, firefox
builds (MMI): chrome, firefox
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Background Module Init Stats
mv3: UI Init Stats
mv3: Module Load Stats
mv3: Bundle Size Stats
mv2: E2e Actions Stats
code coverage: Report
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6
- common: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9
- content-script: 0
- offscreen: 0
- ui: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1840 ± 73 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1591	2091	1836	156	75
		domContentLoaded	1578	2037	1799	149	72
		load	1591	2075	1840	153	73
		domInteractive	19	151	51	32	15

Bundle size diffs

background: 0 Bytes (0.00%)
ui: 150.7 KiB (2.06%)
common: 0 Bytes (0.00%)

Gudahtt

LGTM!

sonarcloud · 2024-10-01T20:29:42Z

Quality Gate passed

Issues
5 New issues
0 Accepted issues

Measures
0 Security Hotspots
100.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud

metamaskbot · 2024-10-01T20:49:13Z

Builds ready [e5b062e]

builds: chrome, firefox
builds (beta): chrome
builds (flask): chrome, firefox
builds (MMI): chrome, firefox
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Background Module Init Stats
mv3: UI Init Stats
mv3: Module Load Stats
mv3: Bundle Size Stats
mv2: E2e Actions Stats
code coverage: Report
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6
- common: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9
- content-script: 0
- offscreen: 0
- ui: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1774 ± 114 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1534	2453	1773	225	108
		domContentLoaded	1525	2323	1739	208	100
		load	1532	2463	1774	237	114
		domInteractive	23	68	39	17	8

Bundle size diffs

background: 0 Bytes (0.00%)
ui: 150.7 KiB (2.05%)
common: 0 Bytes (0.00%)

darkwing

Everything appears to be working as expected! Thank you!

HowardBraham added the team-tiger Tiger team (for tech debt reduction + performance improvements) label Sep 17, 2024

HowardBraham requested a review from danjm September 17, 2024 03:23

HowardBraham self-assigned this Sep 17, 2024

HowardBraham requested review from a team as code owners September 17, 2024 03:23

github-actions bot added the team-contributor-experience MetaMask Contributor Experience Group label Sep 17, 2024

HowardBraham removed the team-contributor-experience MetaMask Contributor Experience Group label Sep 17, 2024

HowardBraham force-pushed the start-upgrade-to-react-router-v6 branch 2 times, most recently from de7cd6a to c477a4d Compare September 17, 2024 04:45

HowardBraham requested review from davidmurdoch and matthewwalsh0 September 17, 2024 04:46

HowardBraham force-pushed the start-upgrade-to-react-router-v6 branch from a820d31 to 058ecc7 Compare September 20, 2024 02:26

HowardBraham force-pushed the start-upgrade-to-react-router-v6 branch from 058ecc7 to 4ee8ade Compare September 26, 2024 15:48

matthewwalsh0 previously approved these changes Sep 27, 2024

View reviewed changes

HowardBraham dismissed matthewwalsh0’s stale review via f2c54dd September 30, 2024 18:16

HowardBraham force-pushed the start-upgrade-to-react-router-v6 branch from 4ee8ade to f2c54dd Compare September 30, 2024 18:16

Gudahtt reviewed Sep 30, 2024

View reviewed changes

ui/components/multichain/pages/connections/connections.tsx Outdated Show resolved Hide resolved

Gudahtt requested changes Sep 30, 2024

View reviewed changes

HowardBraham force-pushed the start-upgrade-to-react-router-v6 branch from 3013805 to 80ac2ea Compare October 1, 2024 07:52

Gudahtt approved these changes Oct 1, 2024

View reviewed changes

HowardBraham requested a review from matthewwalsh0 October 1, 2024 20:16

HowardBraham added 5 commits October 1, 2024 13:17

react-router-dom-v5-compat

9b6c22c

policy

a7fd088

fix lint:tsc

c45b703

urlParams.origin

39b1cb9

@ts-expect-error TODO

e5b062e

HowardBraham force-pushed the start-upgrade-to-react-router-v6 branch from 80ac2ea to e5b062e Compare October 1, 2024 20:17

darkwing approved these changes Oct 2, 2024

View reviewed changes

matthewwalsh0 approved these changes Oct 2, 2024

View reviewed changes

HowardBraham added this pull request to the merge queue Oct 2, 2024

Merged via the queue into develop with commit 9e4c648 Oct 2, 2024
79 of 80 checks passed

HowardBraham deleted the start-upgrade-to-react-router-v6 branch October 2, 2024 16:39

github-actions bot locked and limited conversation to collaborators Oct 2, 2024

metamaskbot added the release-12.6.0 Issue or pull request that will be included in release 12.6.0 label Oct 2, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore: start upgrade to React Router v6 #27185

chore: start upgrade to React Router v6 #27185

HowardBraham commented Sep 17, 2024 •

edited

Loading

github-actions bot commented Sep 17, 2024

socket-security bot commented Sep 17, 2024 •

edited

Loading

socket-security bot commented Sep 17, 2024 •

edited

Loading

metamaskbot commented Sep 17, 2024

sonarcloud bot commented Sep 17, 2024

metamaskbot commented Sep 17, 2024

codecov bot commented Sep 17, 2024

metamaskbot commented Sep 20, 2024

matthewwalsh0 Sep 27, 2024

HowardBraham Sep 30, 2024

Gudahtt left a comment

metamaskbot commented Oct 1, 2024

Gudahtt left a comment

sonarcloud bot commented Oct 1, 2024

metamaskbot commented Oct 1, 2024

darkwing left a comment

chore: start upgrade to React Router v6 #27185

chore: start upgrade to React Router v6 #27185

Conversation

HowardBraham commented Sep 17, 2024 • edited Loading

Description

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

github-actions bot commented Sep 17, 2024

socket-security bot commented Sep 17, 2024 • edited Loading

socket-security bot commented Sep 17, 2024 • edited Loading

Next steps

metamaskbot commented Sep 17, 2024

sonarcloud bot commented Sep 17, 2024

Quality Gate passed

metamaskbot commented Sep 17, 2024

codecov bot commented Sep 17, 2024

Codecov Report

metamaskbot commented Sep 20, 2024

matthewwalsh0 Sep 27, 2024

Choose a reason for hiding this comment

HowardBraham Sep 30, 2024

Choose a reason for hiding this comment

Gudahtt left a comment

Choose a reason for hiding this comment

metamaskbot commented Oct 1, 2024

Gudahtt left a comment

Choose a reason for hiding this comment

sonarcloud bot commented Oct 1, 2024

Quality Gate passed

metamaskbot commented Oct 1, 2024

darkwing left a comment

Choose a reason for hiding this comment

HowardBraham commented Sep 17, 2024 •

edited

Loading

socket-security bot commented Sep 17, 2024 •

edited

Loading

socket-security bot commented Sep 17, 2024 •

edited

Loading