[PWN-5934] react router 6 migration

packages/web/.env.development.example

@@ -19,3 +19,4 @@ REACT_APP_FIREBASE_API_KEY=
 REACT_APP_FIREBASE_APP_ID=
 REACT_APP_RPCPOOL_API_KEY=
 REACT_APP_NAME_SERVICE_URL=
+REACT_APP_ORCA_CACHE_URL=

packages/web/package.json

@@ -78,7 +78,6 @@
     "flagged": "^2.0.1",
     "fuse.js": "^6.5.3",
     "highcharts": "^9.0.0",
-    "history": "4.9.0",
     "idb": "^7.1.0",
     "jsbi": "^4.1.0",
     "lodash.throttle": "^4.1.1",
@@ -99,8 +98,7 @@
     "react-laag": "2.0.3",
     "react-loading-skeleton": "^3.0.1",
     "react-query": "^3.34.6",
-    "react-router": "^5.2.0",
-    "react-router-dom": "^5.2.0",
+    "react-router-dom": "^6.4.3",
     "react-solana-jazzicon": "^0.1.5",
     "react-spring": "^8.0.27",
     "react-stickynode": "^3.1.0",
@@ -142,8 +140,6 @@
     "@types/react-dom": "^17.0.11",
     "@types/react-helmet": "^6.1.1",
     "@types/react-highcharts": "^16.0.2",
-    "@types/react-router": "^5.1.8",
-    "@types/react-router-dom": "^5.1.6",
     "@types/react-stickynode": "^3.0.1",
     "@types/webpack-env": "^1.16.0",
     "assert": "^2.0.0",

packages/web/src/App.tsx

@@ -1,16 +1,14 @@
 import 'new/services/Defaults';
 
 import * as React from 'react';
-import { BrowserRouter, HashRouter, Route, Switch } from 'react-router-dom';
+import { BrowserRouter, HashRouter, Route, Routes } from 'react-router-dom';
 
 import * as Sentry from '@sentry/react';
 import dayjs from 'dayjs';
 import localizedFormat from 'dayjs/plugin/localizedFormat';
 import { observer } from 'mobx-react-lite';
 
 import { Intercom } from 'components/common/Intercom';
-import { NotifyToast } from 'components/common/NotifyToast';
-import { ToastManager } from 'components/common/ToastManager';
 import {
   Buy,
   Home,
@@ -31,41 +29,46 @@ import {
   NotificationManager,
 } from 'new/ui/managers';
 import { Landing } from 'pages/Landing';
-import { AuthRequiredRoute } from 'utils/routes/UserRequiredRoute';
+import { AuthRequiredRoute } from 'utils/routes';
 
 import { Providers } from './Providers';
 
 dayjs.extend(localizedFormat);
 
 const App: React.FC = observer(() => {
   const Router: React.ElementType = process.env.REACT_APP_STAGING ? HashRouter : BrowserRouter;
+  // const Router: React.ElementType = BrowserRouter;
 
   return (
     <>
+      Какой то текст
       <Sentry.ErrorBoundary>
         <Router basename={process.env.REACT_APP_BASENAME}>
+          <LocationManager />
           <Providers>
             <Root>
-              <LocationManager />
-              <Switch>
-                <Route path="/" exact component={Landing} />
-                <Route path="/onboard" exact component={Auth} />
-                <Main>
-                  <AuthRequiredRoute path="/wallets" component={Home} />
-                  <AuthRequiredRoute path="/wallet/:publicKey" exact component={WalletDetail} />
-                  <AuthRequiredRoute path="/buy/:symbol?" component={Buy} />
-                  <AuthRequiredRoute path="/receive/(tokens)?" component={Receive} />
-                  <AuthRequiredRoute path="/send/:publicKey/:status(result)" component={Send} />
-                  <AuthRequiredRoute path="/send/:publicKey?" component={Send} />
-                  <AuthRequiredRoute path="/swap/(settings)?/:publicKey?" component={SwapPage} />
-                  <AuthRequiredRoute path="/settings/network" component={SettingsNetwork} />
-                  <AuthRequiredRoute path="/settings" component={Settings} exact />
-                  <ModalManager />
-                </Main>
-              </Switch>
+              <Routes>
+                <Route path="/" element={<Landing />} />
+                <Route path="/onboard" element={<Auth />} />
+
+                <Route element={<Main />}>
+                  <Route element={<AuthRequiredRoute />}>
+                    <Route path="/wallets" element={<Home />} />
+                    <Route path="/wallet/:publicKey" element={<WalletDetail />} />
+                    <Route path="/buy/*" element={<Buy />} />
+                    <Route path="/receive/*" element={<Receive />} />
+                    <Route path="/send/*" element={<Send />} />
+                    <Route path="/swap/*" element={<SwapPage />} />
+                    <Route path="/settings/network" element={<SettingsNetwork />} />
+                    <Route path="/settings" element={<Settings />} />
+                  </Route>
+                </Route>
+              </Routes>
+
               <Intercom />
-              <ToastManager anchor="left" renderToast={(props) => <NotifyToast {...props} />} />
+              <ModalManager />
               <NotificationManager />
+
               {__DEVELOPMENT__ || process.env.REACT_APP_STAGING ? (
                 <DebugFeatureFlagsManager />
               ) : null}

packages/web/src/components/common/Intercom/Intercom.tsx

@@ -1,6 +1,6 @@
 import type { FC } from 'react';
 import { useEffect } from 'react';
-import { useLocation } from 'react-router';
+import { useLocation } from 'react-router-dom';
 import { useIntercom } from 'react-use-intercom';
 
 import { useIsMobile } from '@p2p-wallet-web/ui';

packages/web/src/components/common/Layout/DesktopLayout/ColumnLeft/LeftNavMenu/LeftNavMenu.tsx

@@ -1,6 +1,5 @@
 import type { FunctionComponent } from 'react';
-import { useLocation } from 'react-router';
-import { Link, NavLink } from 'react-router-dom';
+import { Link, NavLink, useLocation } from 'react-router-dom';
 
 import { styled } from '@linaria/react';
 import { borders, shadows, theme, up } from '@p2p-wallet-web/ui';

packages/web/src/components/ui/Modal/Modal.tsx

@@ -1,7 +1,7 @@
 import type { FunctionComponent } from 'react';
 import * as React from 'react';
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { useLocation } from 'react-router';
+import { useLocation } from 'react-router-dom';
 import { animated, useSpring, useTransition } from 'react-spring';
 
 import { styled } from '@linaria/react';

packages/web/src/new/scenes/Main/Auth/Auth.tsx

@@ -1,5 +1,5 @@
 import type { FC } from 'react';
-import { Redirect, useLocation } from 'react-router-dom';
+import { Navigate, useLocation } from 'react-router-dom';
 
 import { observer } from 'mobx-react-lite';
 
@@ -17,7 +17,7 @@ export const Auth: FC = observer(() => {
   const fromPage = (location.state as RedirectState)?.fromPage || '/wallets';
 
   if (authViewModel.connected) {
-    return <Redirect to={fromPage} />;
+    return <Navigate to={fromPage} />;
   }
 
   return <Wizard authViewModel={authViewModel} />;

packages/web/src/new/scenes/Main/Auth/Subviews/Wizard.tsx

@@ -1,6 +1,5 @@
 import type { FC } from 'react';
-import { useHistory } from 'react-router';
-import { useLocation } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 
 import { observer } from 'mobx-react-lite';
 
@@ -16,17 +15,17 @@ import { RestoreOptions } from './Restore/RestoreOptions';
 
 export const Wizard: FC<ViewModelProps> = observer(({ authViewModel }) => {
   const location = useLocation();
-  const history = useHistory();
+  const navigate = useNavigate();
 
   // @FIXME remove and replace with react-router
   if (location.search === '?restore') {
     authViewModel.setRestoreStart();
-    history.replace({});
+    navigate({}, { replace: true });
   }
 
   if (location.search === '?create') {
     authViewModel.setCreateStart();
-    history.replace({});
+    navigate({}, { replace: true });
   }
 
   const VIEW_MAP: ViewMap = {

packages/web/src/new/scenes/Main/Buy/Buy.ViewModel.ts

@@ -144,10 +144,8 @@ export class BuyViewModel extends ViewModel {
   }
 
   private _getSymbolFromParams(): CryptoCurrencySymbol {
-    return (
-      this._locationService.getParams<{ symbol?: CryptoCurrencySymbol }>('/buy/:symbol?').symbol ||
-      'SOL'
-    );
+    const symbol = this._locationService.getParams<'symbol'>('/buy/:symbol').symbol || 'SOL';
+    return symbol as CryptoCurrencySymbol;
   }
 
   private _startUpdating(): void {

packages/web/src/new/scenes/Main/Buy/Subviews/Moonpay/CurrencySelector/CurrencySelector.tsx

@@ -1,6 +1,6 @@
 import type { FC } from 'react';
 import { useCallback } from 'react';
-import { useHistory } from 'react-router';
+import { useNavigate } from 'react-router-dom';
 
 import { styled } from '@linaria/react';
 import { theme } from '@p2p-wallet-web/ui';
@@ -52,7 +52,7 @@ const Normal = styled.span`
 `;
 
 export const CurrencySelect: FC<BuyViewModelProps> = observer(({ viewModel }) => {
-  const history = useHistory();
+  const navigate = useNavigate();
 
   const handleItemClick = useCallback(
     (nextCurrency: CryptoCurrency) => () => {
@@ -73,7 +73,7 @@ export const CurrencySelect: FC<BuyViewModelProps> = observer(({ viewModel }) =>
       });
 
       // change coin
-      history.push(`/buy/${nextCurrency.symbol}`);
+      navigate(`/buy/${nextCurrency.symbol}`);
     },
     [],
   );

packages/web/src/new/scenes/Main/Home/Subviews/EmptyWalletView/EmptyWalletView.tsx

@@ -1,5 +1,5 @@
 import type { FC } from 'react';
-import { useHistory, useLocation } from 'react-router';
+import { useLocation, useNavigate } from 'react-router-dom';
 
 import { styled } from '@linaria/react';
 import { theme, up, useIsMobile } from '@p2p-wallet-web/ui';
@@ -70,7 +70,7 @@ type Props = {
 };
 
 export const EmptyWalletView: FC<Props> = ({ viewModel }) => {
-  const history = useHistory();
+  const navigate = useNavigate();
   const location = useLocation();
   const isMobile = useIsMobile();
 
@@ -91,7 +91,7 @@ export const EmptyWalletView: FC<Props> = ({ viewModel }) => {
   };
 
   const goToRoute = (route: string) => () => {
-    history.push(route, { fromPage: location.pathname });
+    navigate(route, { state: { fromPage: location.pathname } });
   };
 
   return (

packages/web/src/new/scenes/Main/Home/Subviews/NavButtonsMenu/NavButtonsMenu.tsx

@@ -1,6 +1,6 @@
 import type { FC } from 'react';
 import { useEffect, useRef, useState } from 'react';
-import { useHistory, useLocation } from 'react-router';
+import { useLocation, useNavigate } from 'react-router-dom';
 
 import { styled } from '@linaria/react';
 import classNames from 'classnames';
@@ -32,7 +32,7 @@ interface Props {
 }
 
 export const NavButtonsMenu: FC<Props> = ({ viewModel }) => {
-  const history = useHistory();
+  const navigate = useNavigate();
   const location = useLocation();
 
   const menuRef = useRef<HTMLDivElement>(null);
@@ -58,8 +58,8 @@ export const NavButtonsMenu: FC<Props> = ({ viewModel }) => {
     };
   }, []);
 
-  const handleButtonClick = (route: string) => () => {
-    history.push(route, { fromPage: location.pathname });
+  const handleButtonClick = (to: string) => () => {
+    navigate(to, { state: { fromPage: location.pathname } });
   };
 
   return (

packages/web/src/new/scenes/Main/Home/Subviews/WalletsCollectionView/common/BaseWalletCell/TokenMenu/TokenMenu.tsx

@@ -1,6 +1,6 @@
 import type { FC, HTMLAttributes } from 'react';
 import { useCallback } from 'react';
-import { useHistory, useLocation } from 'react-router';
+import { useLocation, useNavigate } from 'react-router-dom';
 
 import { styled } from '@linaria/react';
 import { observer } from 'mobx-react-lite';
@@ -24,14 +24,14 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
 
 export const TokenMenu: FC<Props> = observer(
   ({ wallet, isHidden = false, onToggleClick, className }) => {
-    const history = useHistory();
+    const navigate = useNavigate();
     const location = useLocation();
 
     const handleButtonClick = useCallback(
       (route: string) => () => {
-        history.push(route, { fromPage: location.pathname });
+        navigate(route, { state: { fromPage: location.pathname } });
       },
-      [history, location.pathname],
+      [navigate, location.pathname],
     );
 
     return (
@@ -46,7 +46,7 @@ export const TokenMenu: FC<Props> = observer(
             Send {wallet.token.symbol}
           </MenuItem>
           {wallet.token.symbol ? (
-            <MenuItem icon="swap" onItemClick={handleButtonClick(`/swap/${wallet.token.symbol}`)}>
+            <MenuItem icon="swap" onItemClick={handleButtonClick(`/swap/${wallet.pubkey}`)}>
               Swap {wallet.token.symbol}
             </MenuItem>
           ) : undefined}

packages/web/src/new/scenes/Main/Main.tsx

@@ -1,19 +1,15 @@
 import type { FC } from 'react';
-import React from 'react';
+import { Outlet } from 'react-router-dom';
 
 import { observer } from 'mobx-react-lite';
 
 import { useViewModel } from 'new/core/viewmodels/useViewModel';
 
 import { MainViewModel } from './Main.ViewModel';
 
-interface Props {
-  children: React.ReactNode;
-}
-
-export const Main: FC<Props> = observer(({ children }) => {
+export const Main: FC = observer(() => {
   // resolve viewModel
   useViewModel<MainViewModel>(MainViewModel);
 
-  return <>{children}</>;
+  return <Outlet />;
 });

packages/web/src/new/scenes/Main/Receive/Receive.tsx

@@ -1,6 +1,5 @@
 import type { FC } from 'react';
-import { Route, useRouteMatch } from 'react-router';
-import { Switch } from 'react-router-dom';
+import { Route, Routes } from 'react-router-dom';
 
 import { useTrackOpenPageAction } from 'new/sdk/Analytics';
 
@@ -10,16 +9,10 @@ import { SupportedTokens } from './SupportedTokens';
 export const Receive: FC = () => {
   useTrackOpenPageAction('Receive_Start_Screen');
 
-  const match = useRouteMatch();
-
   return (
-    <Switch>
-      <Route path={`${match.path}/tokens`}>
-        <SupportedTokens />
-      </Route>
-      <Route path={match.path} exact>
-        <ReceiveToken />
-      </Route>
-    </Switch>
+    <Routes>
+      <Route index element={<ReceiveToken />} />
+      <Route path="tokens" element={<SupportedTokens />} />
+    </Routes>
   );
 };