refactor(5566): migrate from v5 &v5-compat to react-router-dom-v6

.storybook/preview.js

@@ -12,8 +12,7 @@ import localeList from '../app/_locales/index.json';
 import * as allLocales from './locales';
 import { I18nProvider, LegacyI18nProvider } from './i18n';
 import testData from './test-data.js';
-import { MemoryRouter } from 'react-router-dom';
-import { CompatRouter, Routes, Route } from 'react-router-dom-v5-compat';
+import { MemoryRouter, Routes, Route } from 'react-router-dom';
 import { setBackgroundConnection } from '../ui/store/background-connection';
 import { metamaskStorybookTheme } from './metamask-storybook-theme';
 import { DocsContainer } from '@storybook/addon-docs';
@@ -154,27 +153,25 @@ const metamaskDecorator = (story, context) => {
   return (
     <Provider store={store}>
       <MemoryRouter initialEntries={initialEntries}>
-        <CompatRouter>
-          <AlertMetricsProvider
-            metrics={{
-              trackAlertActionClicked: () => undefined,
-              trackAlertRender: () => undefined,
-              trackInlineAlertClicked: () => undefined,
-            }}
+        <AlertMetricsProvider
+          metrics={{
+            trackAlertActionClicked: () => undefined,
+            trackAlertRender: () => undefined,
+            trackInlineAlertClicked: () => undefined,
+          }}
+        >
+          <I18nProvider
+            currentLocale={currentLocale}
+            current={current}
+            en={allLocales.en}
           >
-            <I18nProvider
-              currentLocale={currentLocale}
-              current={current}
-              en={allLocales.en}
-            >
-              <LegacyI18nProvider>
-                <Routes>
-                  <Route path={path} element={<StoryComponent />} />
-                </Routes>
-              </LegacyI18nProvider>
-            </I18nProvider>
-          </AlertMetricsProvider>
-        </CompatRouter>
+            <LegacyI18nProvider>
+              <Routes>
+                <Route path={path} element={<StoryComponent />} />
+              </Routes>
+            </LegacyI18nProvider>
+          </I18nProvider>
+        </AlertMetricsProvider>
       </MemoryRouter>
     </Provider>
   );

development/build/index.js

@@ -107,6 +107,7 @@ async function defineAndRunBuildTasks() {
       'HTMLElement',
       'HTMLFormElement',
       'Element',
+      'history', // needed by react-router-dom v6 HashRouter
       'pageXOffset',
       'pageYOffset',
       'visualViewport',

development/webpack/utils/plugins/LavamoatPlugin/index.ts

@@ -84,6 +84,7 @@ export const lavamoatPlugin = (args: Args) =>
         'HTMLElement',
         'HTMLFormElement',
         'Element',
+        'history', // needed by react-router-dom v6 HashRouter
         'pageXOffset',
         'pageYOffset',
         'visualViewport',

lavamoat/browserify/beta/policy.json

@@ -2264,7 +2264,7 @@
         "@reduxjs/toolkit>reselect": true
       }
     },
-    "react-router-dom-v5-compat>@remix-run/router": {
+    "react-router-dom>@remix-run/router": {
       "globals": {
         "AbortController": true,
         "DOMException": true,
@@ -2275,7 +2275,8 @@
         "URL": true,
         "URLSearchParams": true,
         "console": true,
-        "document.defaultView": true
+        "document.defaultView": true,
+        "history": true
       }
     },
     "@rive-app/react-canvas>@rive-app/canvas": {
@@ -3292,7 +3293,7 @@
         "pageYOffset": true
       },
       "packages": {
-        "react-router-dom>tiny-invariant": true
+        "react-beautiful-dnd>css-box-model>tiny-invariant": true
       }
     },
     "@material-ui/core>@material-ui/styles>jss-plugin-vendor-prefixer>css-vendor": {
@@ -3787,27 +3788,7 @@
     },
     "history": {
       "globals": {
-        "console": true,
-        "define": true,
-        "document.defaultView": true,
-        "document.querySelector": true
-      }
-    },
-    "react-router-dom>history": {
-      "globals": {
-        "addEventListener": true,
-        "confirm": true,
-        "document": true,
-        "history": true,
-        "location": true,
-        "navigator.userAgent": true,
-        "removeEventListener": true
-      },
-      "packages": {
-        "react-router-dom>history>resolve-pathname": true,
-        "react-router-dom>tiny-invariant": true,
-        "react-router-dom>tiny-warning": true,
-        "react-router-dom>history>value-equal": true
+        "history": true
       }
     },
     "@toruslabs/eccrypto>elliptic>hmac-drbg": {
@@ -4016,13 +3997,13 @@
     "@material-ui/core>@material-ui/styles>jss-plugin-nested": {
       "packages": {
         "@babel/runtime": true,
-        "react-router-dom>tiny-warning": true
+        "@material-ui/core>@material-ui/styles>jss>tiny-warning": true
       }
     },
     "@material-ui/core>@material-ui/styles>jss-plugin-rule-value-function": {
       "packages": {
         "@material-ui/core>@material-ui/styles>jss": true,
-        "react-router-dom>tiny-warning": true
+        "@material-ui/core>@material-ui/styles>jss>tiny-warning": true
       }
     },
     "@material-ui/core>@material-ui/styles>jss-plugin-vendor-prefixer": {
@@ -4040,7 +4021,7 @@
       "packages": {
         "@babel/runtime": true,
         "@material-ui/core>@material-ui/styles>jss>is-in-browser": true,
-        "react-router-dom>tiny-warning": true
+        "@material-ui/core>@material-ui/styles>jss>tiny-warning": true
       }
     },
     "ethereumjs-util>ethereum-cryptography>keccak": {
@@ -4320,11 +4301,6 @@
         "process": true
       }
     },
-    "serve-handler>path-to-regexp": {
-      "packages": {
-        "serve-handler>path-to-regexp>isarray": true
-      }
-    },
     "crypto-browserify>pbkdf2": {
       "globals": {
         "crypto": true,
@@ -4660,11 +4636,6 @@
         "console": true
       }
     },
-    "react-router-dom>react-router>react-is": {
-      "globals": {
-        "console": true
-      }
-    },
     "react-markdown": {
       "globals": {
         "console.warn": true
@@ -4728,16 +4699,6 @@
       }
     },
     "react-router-dom": {
-      "packages": {
-        "react-router-dom>history": true,
-        "prop-types": true,
-        "react": true,
-        "react-router-dom>react-router": true,
-        "react-router-dom>tiny-invariant": true,
-        "react-router-dom>tiny-warning": true
-      }
-    },
-    "react-router-dom-v5-compat": {
       "globals": {
         "FormData": true,
         "URL": true,
@@ -4747,7 +4708,7 @@
         "confirm": true,
         "define": true,
         "document": true,
-        "history.scrollRestoration": true,
+        "history": true,
         "location.href": true,
         "removeEventListener": true,
         "scrollTo": true,
@@ -4757,33 +4718,20 @@
         "setTimeout": true
       },
       "packages": {
-        "react-router-dom-v5-compat>@remix-run/router": true,
-        "history": true,
+        "react-router-dom>@remix-run/router": true,
         "react": true,
         "react-dom": true,
-        "react-router-dom": true,
-        "react-router-dom-v5-compat>react-router": true
+        "react-router-dom>react-router": true
       }
     },
     "react-router-dom>react-router": {
-      "packages": {
-        "react-router-dom>history": true,
-        "react-redux>hoist-non-react-statics": true,
-        "serve-handler>path-to-regexp": true,
-        "prop-types": true,
-        "react": true,
-        "react-router-dom>react-router>react-is": true,
-        "react-router-dom>tiny-invariant": true,
-        "react-router-dom>tiny-warning": true
-      }
-    },
-    "react-router-dom-v5-compat>react-router": {
       "globals": {
         "console.error": true,
+        "console.warn": true,
         "define": true
       },
       "packages": {
-        "react-router-dom-v5-compat>@remix-run/router": true,
+        "react-router-dom>@remix-run/router": true,
         "react": true
       }
     },
@@ -5336,7 +5284,7 @@
         "process": true
       }
     },
-    "react-router-dom>tiny-warning": {
+    "@material-ui/core>@material-ui/styles>jss>tiny-warning": {
       "globals": {
         "console": true
       }