fix: react dom errors

package.json

@@ -1,16 +1,16 @@
 {
   "name": "reef-app",
-  "version": "4.0.0",
+  "version": "4.0.1",
   "private": true,
   "type": "commonjs",
   "dependencies": {
     "@fortawesome/free-regular-svg-icons": "^6.1.0",
     "@fortawesome/free-solid-svg-icons": "^6.1.0",
     "@popperjs/core": "^2.11.5",
     "@reef-chain/evm-provider": "^3.0.0",
-    "@reef-chain/react-lib": "^5.0.1",
+    "@reef-chain/react-lib": "^5.0.4",
     "@reef-chain/ui-kit": "^4.0.0",
-    "@reef-chain/util-lib": "^3.0.0",
+    "@reef-chain/util-lib": "^3.0.3",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
@@ -33,7 +33,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-localization": "^1.0.19",
-    "react-router-dom": "^5.3.0",
+    "react-router-dom": "6",
     "react-scripts": "^5.0.1",
     "react-toastify": "^8.2.0",
     "react-transition-group": "^4.4.2",
@@ -76,8 +76,7 @@
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.16.7",
     "@types/d3-dsv": "^3.0.0",
-    "@types/react": "^18.2.25",
-    "@types/react-router-dom": "^5.1.8",
+    "@types/react": "^18.2.0",
     "@types/react-transition-group": "^4.4.3",
     "@typescript-eslint/eslint-plugin": "^4.28.0",
     "@typescript-eslint/parser": "^4.28.0",

src/App.tsx

@@ -1,6 +1,6 @@
 import { ReefSigner, defaultOptions, hooks } from '@reef-chain/react-lib';
 import React, { useEffect, useState } from 'react';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { toast, ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import Uik from '@reef-chain/ui-kit';
@@ -103,7 +103,7 @@ const App = (): JSX.Element => {
     }
   },[selectedReefSigner,signers])
 
-  const history = useHistory();
+  const navigate = useNavigate();
   const [isBalanceHidden, setBalanceHidden] = useState(getStoredPref());
   const hideBalance = {
     isHidden: isBalanceHidden,
@@ -123,7 +123,7 @@ const App = (): JSX.Element => {
 
   useEffect(() => {
     if (selExtensionName === reefExt.REEF_SNAP_IDENT && error?.code === 2) {
-      history.push(SNAP_URL);
+      navigate(SNAP_URL);
     }
   }, [extension, error]);
 
@@ -232,7 +232,7 @@ useEffect(()=>{
         )
         : (
         <>
-          <OptionContext.Provider value={{ ...defaultOptions, back: history.goBack, notify }}>
+          <OptionContext.Provider value={{ ...defaultOptions, back: ()=>navigate(-1), notify }}>
             <ReefSignersContext.Provider value={{
               accounts,
               selectedSigner,

src/common/Nav.tsx

@@ -1,7 +1,7 @@
 import React, { useContext, useEffect, useMemo, useState } from 'react';
 import { Components } from '@reef-chain/react-lib';
 import { network as nw, extension as reefExt } from '@reef-chain/util-lib';
-import { Link, useHistory, useLocation } from 'react-router-dom';
+import { Link, useNavigate, useLocation } from 'react-router-dom';
 import Uik from '@reef-chain/ui-kit';
 import { AccountCreationData, Extension } from '@reef-chain/ui-kit/dist/ui-kit/components/organisms/AccountSelector/AccountSelector';
 import { saveAs } from 'file-saver';
@@ -26,7 +26,7 @@ export interface Nav {
 }
 
 const Nav = ({ selectExtension }: Nav): JSX.Element => {
-  const history = useHistory();
+  const navigate = useNavigate();
   const { pathname } = useLocation();
   const { accounts, provider, selectedSigner, network, reefState, selExtName, extension } = useContext(ReefSigners);
   const mainnetSelected = network == null || network?.rpcUrl === nw.AVAILABLE_NETWORKS.mainnet.rpcUrl;
@@ -75,7 +75,7 @@ const Nav = ({ selectExtension }: Nav): JSX.Element => {
   const selectNetwork = (key: 'mainnet' | 'testnet'): void => {
     const toSelect = appAvailableNetworks.find((item) => item.name === key);
     networkSwitch.setSwitching(true);
-    history.push(DASHBOARD_URL);
+    navigate(DASHBOARD_URL);
 
     if (toSelect) {
       reefState.setSelectedNetwork(toSelect);
@@ -85,7 +85,7 @@ const Nav = ({ selectExtension }: Nav): JSX.Element => {
   const selectLanguage = (key: 'en'|'hi'):void => {
     localizedStrings.setLanguage(key);
     localStorage.setItem('app-language', key);
-    history.push(DASHBOARD_URL);
+    navigate(DASHBOARD_URL);
   };
 
   const menuItemsView = menuItems
@@ -169,7 +169,7 @@ const Nav = ({ selectExtension }: Nav): JSX.Element => {
   return (
     <div className="nav-content navigation d-flex d-flex-space-between">
       <div className="navigation__wrapper">
-        <button type="button" className="logo-btn" onClick={() => { history.push('/'); }}>
+        <button type="button" className="logo-btn" onClick={() => { navigate('/'); }}>
           {mainnetSelected ? <Uik.ReefLogo className="navigation__logo" /> : <Uik.ReefTestnetLogo className="navigation__logo" />}
           {isReefswapUI && <span className="navigation__logo-suffix">swap</span>}
         </button>

src/context/AccountSelectorContext.tsx

@@ -1,5 +1,5 @@
 import React,{ ReactNode, createContext, useState } from "react";
-import { useHistory } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 import { SNAP_URL } from "../urls";
 
 interface AccountSelectorContextProps {
@@ -11,8 +11,8 @@ const AccountSelectorContext = createContext<AccountSelectorContextProps | undef
 
 
 export const AccountSelectorProvider = ({ children }: { children: ReactNode }) => {  
-    const history = useHistory();
-    const [isAccountSelectorOpen, setIsAccountSelectorOpen] = useState<boolean>(history.location.pathname !== SNAP_URL);
+    const location = useLocation();
+    const [isAccountSelectorOpen, setIsAccountSelectorOpen] = useState<boolean>(location.pathname !== SNAP_URL);
 
     return (
       <AccountSelectorContext.Provider value={{isAccountSelectorOpen, setIsAccountSelectorOpen}}>

src/pages/ContentRouter.tsx

@@ -1,6 +1,6 @@
 import { AddressToNumber, hooks, TokenWithAmount } from '@reef-chain/react-lib';
 import React, { useContext} from 'react';
-import { Redirect, Route, Switch } from 'react-router-dom';
+import { Routes, Route, Navigate } from "react-router-dom";
 import axios from 'axios';
 import NftContext from '../context/NftContext';
 import PoolContext from '../context/PoolContext';
@@ -70,45 +70,45 @@ const ContentRouter = (): JSX.Element => {
             <PoolContext.Provider value={pools}>
               <TokenPrices.Provider value={tokenPrices as AddressToNumber<number>}>
                 {!isReefswapUI && (
-                <Switch>
-                  <Route path={SPECIFIED_SWAP_URL} component={Swap} />
+                <Routes>
+                  <Route path={SPECIFIED_SWAP_URL} element={<Swap/>} />
                   {/* <Route exact path={POOLS_URL} component={Pools} /> */}
-                  <Route exact path={DASHBOARD_URL} component={Dashboard} />
+                  <Route path={DASHBOARD_URL} element={<Dashboard/>} />
                   {/* <Route path={ADD_LIQUIDITY_URL} component={AddPoolLiquidity} /> */}
                   {/* <Route exact path={ADD_LIQUIDITY_URL} component={AddPoolLiquidity} /> */}
                   {/* <Route path={POOL_CHART_URL} component={Pool} /> */}
                   {/* <Route path={REMOVE_LIQUIDITY_URL} component={RemoveLiquidity} /> */}
-                  <Route exact path={TRANSFER_TOKEN} component={Transfer} />
-                  <Route exact path={CREATE_ERC20_TOKEN_URL} component={Creator} />
-                  <Route exact path={BONDS_URL} component={Bonds} />
-                  <Route path={BIND_URL} component={Bind} />
+                  <Route  path={TRANSFER_TOKEN} element={<Transfer/>} />
+                  <Route  path={CREATE_ERC20_TOKEN_URL} element={<Creator/>} />
+                  <Route  path={BONDS_URL} element={<Bonds/>} />
+                  <Route path={BIND_URL} element={<Bind/>} />
                   {/* <Route path={BUY_URL} component={Buy} /> */}
-                  <Route path={ALCHEMY_PAY_URL} component={AlchemyPay} />
+                  <Route path={ALCHEMY_PAY_URL} element={<AlchemyPay/>} />
                   {/* <Route path={ONRAMP_URL} component={Onramp} /> */}
-                  <Route path={SNAP_URL} component={Snap} />
-                  <Route path="/" render={() => (<Redirect to={DASHBOARD_URL} />)} />
-                </Switch>
+                  <Route path={SNAP_URL} element={<Snap/>} />
+                  <Route path="/" element={<Navigate to={DASHBOARD_URL} />}  />
+                </Routes>
                 )}
 
                 {isReefswapUI && (
-                <Switch>
-                  <Route path={SPECIFIED_SWAP_URL} component={Swap} />
-                  <Route exact path={POOLS_URL} component={Pools} />
-                  <Route exact path={DASHBOARD_URL} component={Dashboard} />
-                  <Route path={ADD_LIQUIDITY_URL} component={AddPoolLiquidity} />
-                  <Route exact path={ADD_LIQUIDITY_URL} component={AddPoolLiquidity} />
-                  <Route path={POOL_CHART_URL} component={Pool} />
-                  <Route path={REMOVE_LIQUIDITY_URL} component={RemoveLiquidity} />
-                  <Route exact path={TRANSFER_TOKEN} component={Transfer} />
-                  <Route exact path={CREATE_ERC20_TOKEN_URL} component={Creator} />
-                  <Route exact path={BONDS_URL} component={Bonds} />
-                  <Route path={BIND_URL} component={Bind} />
+                <Routes>
+                  <Route path={SPECIFIED_SWAP_URL} element={<Swap/>} />
+                  <Route path={POOLS_URL} element={<Pools/>} />
+                  <Route path={DASHBOARD_URL} element={<Dashboard/>} />
+                  <Route path={ADD_LIQUIDITY_URL} element={<AddPoolLiquidity/>} />
+                  <Route path={ADD_LIQUIDITY_URL} element={<AddPoolLiquidity/>} />
+                  <Route path={POOL_CHART_URL} element={<Pool/>} />
+                  <Route path={REMOVE_LIQUIDITY_URL} element={<RemoveLiquidity/>} />
+                  <Route path={TRANSFER_TOKEN} element={<Transfer/>} />
+                  <Route path={CREATE_ERC20_TOKEN_URL} element={<Creator/>} />
+                  <Route path={BONDS_URL} element={<Bonds/>} />
+                  <Route path={BIND_URL} element={<Bind/>} />
                   {/* <Route path={BUY_URL} component={Buy} /> */}
-                  <Route path={ALCHEMY_PAY_URL} component={AlchemyPay} />
+                  <Route path={ALCHEMY_PAY_URL} element={<AlchemyPay/>} />
                   {/* <Route path={ONRAMP_URL} component={Onramp} /> */}
-                  <Route path={SNAP_URL} component={Snap} />
-                  <Route path="/" render={() => (<Redirect to={DASHBOARD_URL} />)} />
-                </Switch>
+                  <Route path={SNAP_URL} element={<Snap/>} />
+                  <Route path="/" element={<Navigate to={DASHBOARD_URL} />} />
+                </Routes>
                 )}
               </TokenPrices.Provider>
             </PoolContext.Provider>

src/pages/creator/CreatorComponent.tsx

@@ -7,7 +7,7 @@ import React, { useEffect, useState } from 'react';
 import { faCheckCircle, faXmarkCircle } from '@fortawesome/free-regular-svg-icons';
 import { faArrowUpRightFromSquare, faCoins } from '@fortawesome/free-solid-svg-icons';
 import { Contract, ContractFactory, utils } from 'ethers';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import Uik from '@reef-chain/ui-kit';
 import { verifyContract } from '../../utils/contract';
 import { DeployContractData, deployTokens } from './tokensDeployData';
@@ -291,7 +291,7 @@ export const CreatorComponent = ({
 
   const [icon, setIcon] = useState('');
 
-  const history = useHistory();
+  const navigate = useNavigate();
 
   // @ts-ignore
   return (
@@ -510,7 +510,7 @@ export const CreatorComponent = ({
                         text={strings.create_a_pool}
                         icon={faCoins}
                         size="large"
-                        onClick={() => history.push('/pools')}
+                        onClick={() => navigate('/pools')}
                       />
                     ) : <div style={{ cursor: 'progress' }}><Uik.Button text={strings.create_a_pool} icon={faCoins} size="large" disabled /></div>
                 }

src/pages/dashboard/BuyReefButton.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import Uik from '@reef-chain/ui-kit';
 import './buy-reef-button.css';
 import { BUY_URL, 
@@ -237,7 +237,7 @@ C226.3,333.5,225.4,331.3,224.1,329.3z"
 );
 
 const BuyReefButton = (): JSX.Element => {
-  const history = useHistory();
+  const navigator = useNavigate();
   const navigate = (): void => {
     // fetch('https://ipapi.co/json/')
     //   .then((response) => response.json()).then((data) => {
@@ -247,7 +247,7 @@ const BuyReefButton = (): JSX.Element => {
     //       history.push(BUY_URL);
     //     }
     //   });
-    history.push(BUY_URL);
+    navigator(BUY_URL);
   };
 
   return (

src/pages/pools/AddLiquidity.tsx

@@ -2,7 +2,7 @@ import {
   Components, hooks, store, Token,
 } from '@reef-chain/react-lib';
 import React, { useContext, useReducer } from 'react';
-import { useHistory, useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import axios, { AxiosInstance } from 'axios';
 import { network as libNet } from '@reef-chain/util-lib';
 import TokenContext from '../../context/TokenContext';
@@ -13,14 +13,14 @@ import ReefSigners from '../../context/ReefSigners';
 import { useDexConfig } from '../../environment';
 
 const { AddLiquidity } = Components;
-interface UrlParams {
+type UrlParams ={
   address1: string;
   address2: string;
 }
 
 const AddPoolLiquidity = (): JSX.Element => {
   const { address1, address2 } = useParams<UrlParams>();
-  const history = useHistory();
+  const navigate = useNavigate();
   const { tokens } = useContext(TokenContext);
   const tokenPrices = useContext(TokenPricesContext);
   const { selectedSigner: signer, network: nw } = useContext(ReefSigners);
@@ -29,8 +29,8 @@ const AddPoolLiquidity = (): JSX.Element => {
 
   const [state, dispatch] = useReducer(store.addLiquidityReducer, store.initialAddLiquidityState);
   hooks.useAddLiquidity({
-    address1,
-    address2,
+    address1:address1??"",
+    address2:address2??"",
     dispatch,
     state,
     tokens,
@@ -41,11 +41,11 @@ const AddPoolLiquidity = (): JSX.Element => {
 
   const selectToken1 = (token: Token): void => {
     dispatch(store.setToken1Action(token));
-    history.push(addressReplacer(ADD_LIQUIDITY_URL, token.address, address2));
+    navigate(addressReplacer(ADD_LIQUIDITY_URL, token.address, address2));
   };
   const selectToken2 = (token: Token): void => {
     dispatch(store.setToken2Action(token));
-    history.push(addressReplacer(ADD_LIQUIDITY_URL, address1, token.address));
+    navigate(addressReplacer(ADD_LIQUIDITY_URL, address1!, token.address));
   };
   const onAddLiquidity = hooks.onAddLiquidity({
     state,
@@ -68,7 +68,7 @@ const AddPoolLiquidity = (): JSX.Element => {
         selectToken1,
         selectToken2,
         onAddLiquidity,
-        back: history.goBack,
+        back: ()=>navigate(-1),
         setPercentage: async () => {}, // eslint-disable-line
         onAddressChange: async () => {}, // eslint-disable-line
         setSettings: (settings) => dispatch(store.setSettingsAction(settings)),

src/pages/pools/MyPoolsList.tsx

@@ -4,7 +4,7 @@ import {
 } from '@reef-chain/react-lib';
 import Uik from '@reef-chain/ui-kit';
 import React, { useContext, useState } from 'react';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import BigNumber from 'bignumber.js';
 import axios, { AxiosInstance } from 'axios';
 import TokenPricesContext from '../../context/TokenPricesContext';
@@ -54,11 +54,11 @@ const MyPoolsList = ({ tokens }: Props): JSX.Element => {
   });
 
 
-  const history = useHistory();
+  const navigate = useNavigate();
   const openPool = (
     address: string,
     action: 'trade' | 'stake' | 'unstake' = 'trade',
-  ): void => history.push(
+  ): void => navigate(
     POOL_CHART_URL
       .replace(':address', address || 'address')
       .replace(':action', action),

src/pages/pools/Pool/Actions.tsx

@@ -5,7 +5,7 @@ import Uik from '@reef-chain/ui-kit';
 import React, {
   useContext, useEffect, useReducer, useState,
 } from 'react';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import axios, { AxiosInstance } from 'axios';
 import { network as libNet } from '@reef-chain/util-lib';
 import PoolContext from '../../../context/PoolContext';
@@ -209,10 +209,10 @@ interface ActionsWrapperProps extends ActionsProps {
 const ActionsWrapper = ({
   token1, token2, poolAddress, tab,
 }: ActionsWrapperProps): JSX.Element => {
-  const history = useHistory();
+  const navigate = useNavigate();
 
   const selectTab = (newTab: ActionTabs): void => {
-    history.push(
+    navigate(
       POOL_CHART_URL
         .replace(':address', poolAddress)
         .replace(':action', newTab.toLowerCase()),

src/pages/pools/Pool/CreatePool.tsx

@@ -14,7 +14,7 @@ import ReefSigners from '../../../context/ReefSigners';
 import RedirectingToPool from './RedirectingToPool';
 import { useDexConfig } from '../../../environment';
 import PoolContext from '../../../context/PoolContext';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 
 const { Provide, OverlayAction, Finalizing } = Components;
 
@@ -36,13 +36,13 @@ const CreatePool = ({
   const [poolAddress, setPoolAddress] = useState<string|undefined>();
   const pools = useContext(PoolContext);
 
-  const history = useHistory();
+  const navigate = useNavigate();
 
   useEffect(() => {
     if (poolAddress) {
       // todo undo later anukulpandey
       const timer = setTimeout(() => {
-        history.push(`/chart/${poolAddress}/trade`);
+        navigate(`/chart/${poolAddress}/trade`, { replace: true });
       }, 20000);
       return () => clearTimeout(timer);
     }