deps: update react-router-dom from v6.3.0 to v6.4.1

package.json

@@ -40,7 +40,7 @@
     "react-dom": "^17.0.2",
     "react-i18next": "^11.18.6",
     "react-router-bootstrap": "^0.26.2",
-    "react-router-dom": "^6.3.0",
+    "react-router-dom": "^6.4.1",
     "react-scripts": "^5.0.1",
     "typescript": "^4.7.2"
   },

src/components/App.tsx

@@ -1,7 +1,7 @@
 import { useCallback } from 'react'
 import * as rb from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
-import { Navigate, Route, Routes } from 'react-router-dom'
+import { createBrowserRouter, createRoutesFromElements, Navigate, Route, RouterProvider } from 'react-router-dom'
 import { routes } from '../constants/routes'
 import { useSessionConnectionError } from '../context/ServiceInfoContext'
 import { useSettings } from '../context/SettingsContext'
@@ -40,6 +40,62 @@ export default function App() {
     setCurrentWallet(null)
   }, [setCurrentWallet])
 
+  const router = createBrowserRouter(
+    createRoutesFromElements(
+      <Route
+        id="base"
+        element={
+          <>
+            <Navbar />
+            <rb.Container as="main" className="py-4 py-sm-5">
+              {sessionConnectionError && (
+                <rb.Alert variant="danger">
+                  {t('app.alert_no_connection', { connectionError: sessionConnectionError.message })}.
+                </rb.Alert>
+              )}
+
+              <Layout />
+            </rb.Container>
+            <Footer />
+          </>
+        }
+      >
+        {/**
+         * This sections defines all routes that can be displayed, even if the connection
+         * to the backend is down, e.g. "create-wallet" shows the seed quiz and it is important
+         * that it stays visible in case the backend becomes unavailable.
+         */}
+        <Route id="create-wallet" path={routes.createWallet} element={<CreateWallet startWallet={startWallet} />} />
+        {/**
+         * This section defines all routes that are displayed only if the backend is reachable.
+         */}
+        {!sessionConnectionError && (
+          <>
+            <Route
+              id="wallets"
+              path={routes.home}
+              element={<Wallets currentWallet={currentWallet} startWallet={startWallet} stopWallet={stopWallet} />}
+            />
+            {currentWallet && (
+              <>
+                <Route id="wallet" path={routes.wallet} element={<MainWalletView />} />
+                <Route id="jam" path={routes.jam} element={<Jam />} />
+                <Route id="send" path={routes.send} element={<Send />} />
+                <Route id="earn" path={routes.earn} element={<Earn />} />
+                <Route id="receive" path={routes.receive} element={<Receive />} />
+                <Route id="settings" path={routes.settings} element={<Settings stopWallet={stopWallet} />} />
+              </>
+            )}
+            <Route id="404" path="*" element={<Navigate to={routes.home} replace={true} />} />
+          </>
+        )}
+      </Route>
+    ),
+    {
+      basename: window.JM.PUBLIC_PATH,
+    }
+  )
+
   if (settings.showOnboarding === true) {
     return (
       <rb.Container className="onboarding my-5">
@@ -52,51 +108,5 @@ export default function App() {
     )
   }
 
-  return (
-    <>
-      <Navbar />
-      <rb.Container as="main" className="py-4 py-sm-5">
-        {sessionConnectionError && (
-          <rb.Alert variant="danger">
-            {t('app.alert_no_connection', { connectionError: sessionConnectionError.message })}.
-          </rb.Alert>
-        )}
-        <Routes>
-          {/**
-           * This sections defines all routes that can be displayed, even if the connection
-           * to the backend is down, e.g. "create-wallet" shows the seed quiz and it is important
-           * that it stays visible in case the backend becomes unavailable.
-           */}
-          <Route element={<Layout />}>
-            <Route path={routes.createWallet} element={<CreateWallet startWallet={startWallet} />} />
-          </Route>
-          {/**
-           * This section defines all routes that are displayed only if the backend is reachable.
-           */}
-          {!sessionConnectionError && (
-            <>
-              <Route element={<Layout />}>
-                <Route
-                  path={routes.home}
-                  element={<Wallets currentWallet={currentWallet} startWallet={startWallet} stopWallet={stopWallet} />}
-                />
-                {currentWallet && (
-                  <>
-                    <Route path={routes.wallet} element={<MainWalletView />} />
-                    <Route path={routes.jam} element={<Jam />} />
-                    <Route path={routes.send} element={<Send />} />
-                    <Route path={routes.earn} element={<Earn />} />
-                    <Route path={routes.receive} element={<Receive />} />
-                    <Route path={routes.settings} element={<Settings stopWallet={stopWallet} />} />
-                  </>
-                )}
-              </Route>
-              <Route path="*" element={<Navigate to={routes.home} replace={true} />} />
-            </>
-          )}
-        </Routes>
-      </rb.Container>
-      <Footer />
-    </>
-  )
+  return <RouterProvider router={router} />
 }

src/components/CreateWallet.test.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import { BrowserRouter } from 'react-router-dom'
 import user from '@testing-library/user-event'
 import { render, screen, waitFor } from '../testUtils'
 import { act } from 'react-dom/test-utils'
@@ -22,7 +22,11 @@ describe('<CreateWallet />', () => {
 
   const setup = (props) => {
     const startWallet = props?.startWallet || NOOP
-    render(<CreateWallet startWallet={startWallet} />)
+    render(
+      <BrowserRouter>
+        <CreateWallet startWallet={startWallet} />
+      </BrowserRouter>
+    )
   }
 
   beforeEach(() => {

src/components/MainWalletView.jsx

@@ -1,17 +1,17 @@
-import React, { useEffect, useState, useMemo } from 'react'
+import { useEffect, useState, useMemo } from 'react'
 import * as rb from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router-dom'
 import { useSettings, useSettingsDispatch } from '../context/SettingsContext'
 import { useCurrentWallet, useCurrentWalletInfo, useReloadCurrentWalletInfo } from '../context/WalletContext'
+import { walletDisplayName } from '../utils'
+import { routes } from '../constants/routes'
 import Balance from './Balance'
 import Sprite from './Sprite'
-import { walletDisplayName } from '../utils'
-import styles from './MainWalletView.module.css'
 import { ExtendedLink } from './ExtendedLink'
-import { routes } from '../constants/routes'
 import { JarDetailsOverlay } from './jar_details/JarDetailsOverlay'
 import { Jars } from './Jars'
+import styles from './MainWalletView.module.css'
 
 const WalletHeader = ({ name, balance, unit, showBalance, loading }) => {
   return (

src/components/Receive.jsx

@@ -1,8 +1,7 @@
-import React, { useState, useEffect, useMemo } from 'react'
-import { useLocation } from 'react-router-dom'
+import { useState, useEffect, useMemo } from 'react'
 import * as rb from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
-
+import { useLocation } from 'react-router-dom'
 import { useSettings } from '../context/SettingsContext'
 import { useCurrentWallet, useCurrentWalletInfo } from '../context/WalletContext'
 import * as Api from '../libs/JmWalletApi'

src/components/Settings.test.jsx

@@ -1,12 +1,17 @@
-import React from 'react'
+import { BrowserRouter } from 'react-router-dom'
+
 import { render, screen } from '../testUtils'
 import { act } from 'react-dom/test-utils'
 
 import Settings from './Settings'
 
 describe('<Settings />', () => {
   const setup = () => {
-    render(<Settings />)
+    render(
+      <BrowserRouter>
+        <Settings />
+      </BrowserRouter>
+    )
   }
 
   it('should render settings without errors', () => {

src/components/Wallet.test.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import { BrowserRouter } from 'react-router-dom'
 import { render, screen, waitFor } from '../testUtils'
 import { act } from 'react-dom/test-utils'
 import user from '@testing-library/user-event'
@@ -28,14 +28,16 @@ describe('<Wallet />', () => {
     coinjoinInProgress = false,
   }) => {
     render(
-      <Wallet
-        name={name}
-        lockWallet={lockWallet}
-        unlockWallet={unlockWallet}
-        isActive={isActive}
-        coinjoinInProgress={coinjoinInProgress}
-        makerRunning={makerRunning}
-      />
+      <BrowserRouter>
+        <Wallet
+          name={name}
+          lockWallet={lockWallet}
+          unlockWallet={unlockWallet}
+          isActive={isActive}
+          coinjoinInProgress={coinjoinInProgress}
+          makerRunning={makerRunning}
+        />
+      </BrowserRouter>
     )
   }
 

src/components/Wallets.test.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import { BrowserRouter } from 'react-router-dom'
 import { render, screen, waitFor, waitForElementToBeRemoved } from '../testUtils'
 import { act } from 'react-dom/test-utils'
 import user from '@testing-library/user-event'
@@ -28,7 +28,11 @@ describe('<Wallets />', () => {
   const mockStopWallet = jest.fn()
 
   const setup = ({ currentWallet = null }) => {
-    render(<Wallets currentWallet={currentWallet} startWallet={mockStartWallet} stopWallet={mockStopWallet} />)
+    render(
+      <BrowserRouter>
+        <Wallets currentWallet={currentWallet} startWallet={mockStartWallet} stopWallet={mockStopWallet} />
+      </BrowserRouter>
+    )
   }
 
   beforeEach(() => {

src/index.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import { BrowserRouter } from 'react-router-dom'
 // @ts-ignore
 import App from './components/App'
 // @ts-ignore
@@ -17,19 +16,17 @@ import './i18n/config'
 
 ReactDOM.render(
   <React.StrictMode>
-    <BrowserRouter basename={window.JM.PUBLIC_PATH}>
-      <SettingsProvider>
-        <WalletProvider>
-          <ServiceConfigProvider>
-            <WebsocketProvider>
-              <ServiceInfoProvider>
-                <App />
-              </ServiceInfoProvider>
-            </WebsocketProvider>
-          </ServiceConfigProvider>
-        </WalletProvider>
-      </SettingsProvider>
-    </BrowserRouter>
+    <SettingsProvider>
+      <WalletProvider>
+        <ServiceConfigProvider>
+          <WebsocketProvider>
+            <ServiceInfoProvider>
+              <App />
+            </ServiceInfoProvider>
+          </WebsocketProvider>
+        </ServiceConfigProvider>
+      </WalletProvider>
+    </SettingsProvider>
   </React.StrictMode>,
   document.getElementById('root')
 )