chore: start upgrade to React Router v6 (#27185)

## **Description** Following the Incremental Migration guide for React Router v6: remix-run/react-router#8753 All code changes are to fix `lint:tsc` errors. [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/27185?quickstart=1) ## **Related issues** Part of: MetaMask/MetaMask-planning#2898 Part of: MetaMask/MetaMask-planning#3302 ## **Manual testing steps** ## **Screenshots/Recordings** ### **Before** ### **After** ## **Pre-merge author checklist** - [x] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Extension Coding Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md). - [x] 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](https://jsdoc.app/) format if applicable - [x] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)). 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.
MetaMask · Oct 2, 2024 · 9e4c648 · 9e4c648
1 parent 4fa502b
commit 9e4c648
Show file tree

Hide file tree

Showing 15 changed files with 321 additions and 175 deletions.
diff --git a/lavamoat/browserify/beta/policy.json b/lavamoat/browserify/beta/policy.json
@@ -4509,6 +4509,14 @@
         "define": true
       }
     },
+    "history": {
+      "globals": {
+        "console": true,
+        "define": true,
+        "document.defaultView": true,
+        "document.querySelector": true
+      }
+    },
     "https-browserify": {
       "packages": {
         "browserify>url": true,
@@ -5086,37 +5094,59 @@
         "react-router-dom>tiny-warning": true
       }
     },
-    "react-router-dom>history": {
+    "react-router-dom-v5-compat": {
       "globals": {
+        "FormData": true,
+        "URL": true,
+        "URLSearchParams": true,
+        "__reactRouterVersion": "write",
         "addEventListener": true,
         "confirm": true,
+        "define": true,
         "document": true,
-        "history": true,
-        "location": true,
-        "navigator.userAgent": true,
-        "removeEventListener": true
+        "history.scrollRestoration": true,
+        "location.href": true,
+        "removeEventListener": true,
+        "scrollTo": true,
+        "scrollY": true,
+        "sessionStorage.getItem": true,
+        "sessionStorage.setItem": true,
+        "setTimeout": true
       },
       "packages": {
-        "react-router-dom>history>resolve-pathname": true,
-        "react-router-dom>history>value-equal": true,
-        "react-router-dom>tiny-invariant": true,
-        "react-router-dom>tiny-warning": true
+        "history": true,
+        "react": true,
+        "react-dom": true,
+        "react-router-dom": true,
+        "react-router-dom-v5-compat>@remix-run/router": true,
+        "react-router-dom-v5-compat>react-router": true
       }
     },
-    "react-router-dom>react-router": {
+    "react-router-dom-v5-compat>@remix-run/router": {
+      "globals": {
+        "AbortController": true,
+        "DOMException": true,
+        "FormData": true,
+        "Headers": true,
+        "Request": true,
+        "Response": true,
+        "URL": true,
+        "URLSearchParams": true,
+        "console": true,
+        "document.defaultView": true
+      }
+    },
+    "react-router-dom-v5-compat>react-router": {
+      "globals": {
+        "console.error": true,
+        "define": true
+      },
       "packages": {
-        "prop-types": true,
-        "prop-types>react-is": true,
         "react": true,
-        "react-redux>hoist-non-react-statics": true,
-        "react-router-dom>react-router>history": true,
-        "react-router-dom>react-router>mini-create-react-context": true,
-        "react-router-dom>tiny-invariant": true,
-        "react-router-dom>tiny-warning": true,
-        "serve-handler>path-to-regexp": true
+        "react-router-dom-v5-compat>@remix-run/router": true
       }
     },
-    "react-router-dom>react-router>history": {
+    "react-router-dom>history": {
       "globals": {
         "addEventListener": true,
         "confirm": true,
@@ -5133,13 +5163,16 @@
         "react-router-dom>tiny-warning": true
       }
     },
-    "react-router-dom>react-router>mini-create-react-context": {
+    "react-router-dom>react-router": {
       "packages": {
-        "@babel/runtime": true,
         "prop-types": true,
+        "prop-types>react-is": true,
         "react": true,
-        "react-router-dom>react-router>mini-create-react-context>gud": true,
-        "react-router-dom>tiny-warning": true
+        "react-redux>hoist-non-react-statics": true,
+        "react-router-dom>history": true,
+        "react-router-dom>tiny-invariant": true,
+        "react-router-dom>tiny-warning": true,
+        "serve-handler>path-to-regexp": true
       }
     },
     "react-router-dom>tiny-warning": {

diff --git a/lavamoat/browserify/flask/policy.json b/lavamoat/browserify/flask/policy.json
@@ -4509,6 +4509,14 @@
         "define": true
       }
     },
+    "history": {
+      "globals": {
+        "console": true,
+        "define": true,
+        "document.defaultView": true,
+        "document.querySelector": true
+      }
+    },
     "https-browserify": {
       "packages": {
         "browserify>url": true,
@@ -5086,37 +5094,59 @@
         "react-router-dom>tiny-warning": true
       }
     },
-    "react-router-dom>history": {
+    "react-router-dom-v5-compat": {
       "globals": {
+        "FormData": true,
+        "URL": true,
+        "URLSearchParams": true,
+        "__reactRouterVersion": "write",
         "addEventListener": true,
         "confirm": true,
+        "define": true,
         "document": true,
-        "history": true,
-        "location": true,
-        "navigator.userAgent": true,
-        "removeEventListener": true
+        "history.scrollRestoration": true,
+        "location.href": true,
+        "removeEventListener": true,
+        "scrollTo": true,
+        "scrollY": true,
+        "sessionStorage.getItem": true,
+        "sessionStorage.setItem": true,
+        "setTimeout": true
       },
       "packages": {
-        "react-router-dom>history>resolve-pathname": true,
-        "react-router-dom>history>value-equal": true,
-        "react-router-dom>tiny-invariant": true,
-        "react-router-dom>tiny-warning": true
+        "history": true,
+        "react": true,
+        "react-dom": true,
+        "react-router-dom": true,
+        "react-router-dom-v5-compat>@remix-run/router": true,
+        "react-router-dom-v5-compat>react-router": true
       }
     },
-    "react-router-dom>react-router": {
+    "react-router-dom-v5-compat>@remix-run/router": {
+      "globals": {
+        "AbortController": true,
+        "DOMException": true,
+        "FormData": true,
+        "Headers": true,
+        "Request": true,
+        "Response": true,
+        "URL": true,
+        "URLSearchParams": true,
+        "console": true,
+        "document.defaultView": true
+      }
+    },
+    "react-router-dom-v5-compat>react-router": {
+      "globals": {
+        "console.error": true,
+        "define": true
+      },
       "packages": {
-        "prop-types": true,
-        "prop-types>react-is": true,
         "react": true,
-        "react-redux>hoist-non-react-statics": true,
-        "react-router-dom>react-router>history": true,
-        "react-router-dom>react-router>mini-create-react-context": true,
-        "react-router-dom>tiny-invariant": true,
-        "react-router-dom>tiny-warning": true,
-        "serve-handler>path-to-regexp": true
+        "react-router-dom-v5-compat>@remix-run/router": true
       }
     },
-    "react-router-dom>react-router>history": {
+    "react-router-dom>history": {
       "globals": {
         "addEventListener": true,
         "confirm": true,
@@ -5133,13 +5163,16 @@
         "react-router-dom>tiny-warning": true
       }
     },
-    "react-router-dom>react-router>mini-create-react-context": {
+    "react-router-dom>react-router": {
       "packages": {
-        "@babel/runtime": true,
         "prop-types": true,
+        "prop-types>react-is": true,
         "react": true,
-        "react-router-dom>react-router>mini-create-react-context>gud": true,
-        "react-router-dom>tiny-warning": true
+        "react-redux>hoist-non-react-statics": true,
+        "react-router-dom>history": true,
+        "react-router-dom>tiny-invariant": true,
+        "react-router-dom>tiny-warning": true,
+        "serve-handler>path-to-regexp": true
       }
     },
     "react-router-dom>tiny-warning": {

diff --git a/lavamoat/browserify/main/policy.json b/lavamoat/browserify/main/policy.json
@@ -4509,6 +4509,14 @@
         "define": true
       }
     },
+    "history": {
+      "globals": {
+        "console": true,
+        "define": true,
+        "document.defaultView": true,
+        "document.querySelector": true
+      }
+    },
     "https-browserify": {
       "packages": {
         "browserify>url": true,
@@ -5086,37 +5094,59 @@
         "react-router-dom>tiny-warning": true
       }
     },
-    "react-router-dom>history": {
+    "react-router-dom-v5-compat": {
       "globals": {
+        "FormData": true,
+        "URL": true,
+        "URLSearchParams": true,
+        "__reactRouterVersion": "write",
         "addEventListener": true,
         "confirm": true,
+        "define": true,
         "document": true,
-        "history": true,
-        "location": true,
-        "navigator.userAgent": true,
-        "removeEventListener": true
+        "history.scrollRestoration": true,
+        "location.href": true,
+        "removeEventListener": true,
+        "scrollTo": true,
+        "scrollY": true,
+        "sessionStorage.getItem": true,
+        "sessionStorage.setItem": true,
+        "setTimeout": true
       },
       "packages": {
-        "react-router-dom>history>resolve-pathname": true,
-        "react-router-dom>history>value-equal": true,
-        "react-router-dom>tiny-invariant": true,
-        "react-router-dom>tiny-warning": true
+        "history": true,
+        "react": true,
+        "react-dom": true,
+        "react-router-dom": true,
+        "react-router-dom-v5-compat>@remix-run/router": true,
+        "react-router-dom-v5-compat>react-router": true
       }
     },
-    "react-router-dom>react-router": {
+    "react-router-dom-v5-compat>@remix-run/router": {
+      "globals": {
+        "AbortController": true,
+        "DOMException": true,
+        "FormData": true,
+        "Headers": true,
+        "Request": true,
+        "Response": true,
+        "URL": true,
+        "URLSearchParams": true,
+        "console": true,
+        "document.defaultView": true
+      }
+    },
+    "react-router-dom-v5-compat>react-router": {
+      "globals": {
+        "console.error": true,
+        "define": true
+      },
       "packages": {
-        "prop-types": true,
-        "prop-types>react-is": true,
         "react": true,
-        "react-redux>hoist-non-react-statics": true,
-        "react-router-dom>react-router>history": true,
-        "react-router-dom>react-router>mini-create-react-context": true,
-        "react-router-dom>tiny-invariant": true,
-        "react-router-dom>tiny-warning": true,
-        "serve-handler>path-to-regexp": true
+        "react-router-dom-v5-compat>@remix-run/router": true
       }
     },
-    "react-router-dom>react-router>history": {
+    "react-router-dom>history": {
       "globals": {
         "addEventListener": true,
         "confirm": true,
@@ -5133,13 +5163,16 @@
         "react-router-dom>tiny-warning": true
       }
     },
-    "react-router-dom>react-router>mini-create-react-context": {
+    "react-router-dom>react-router": {
       "packages": {
-        "@babel/runtime": true,
         "prop-types": true,
+        "prop-types>react-is": true,
         "react": true,
-        "react-router-dom>react-router>mini-create-react-context>gud": true,
-        "react-router-dom>tiny-warning": true
+        "react-redux>hoist-non-react-statics": true,
+        "react-router-dom>history": true,
+        "react-router-dom>tiny-invariant": true,
+        "react-router-dom>tiny-warning": true,
+        "serve-handler>path-to-regexp": true
       }
     },
     "react-router-dom>tiny-warning": {