Update react, react-router (#602)

* widget at v2.10.2 * add yarn.lock * Update react-router to v6 * Update widget to v3 * add mui packages * fix onboarding props issue * yarn lock * make compatible with react router dom v6 * remove lifi widget * remove widget --------- Co-authored-by: jahabeebs <[email protected]>
open-dollar · Jul 17, 2024 · 686337e · 686337e
1 parent 37c8828
commit 686337e
Show file tree

Hide file tree

Showing 23 changed files with 425 additions and 425 deletions.
diff --git a/package.json b/package.json
@@ -20,10 +20,6 @@
     "engines": {
         "node": ">=20.0.0"
     },
-    "peerDependencies": {
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0"
-    },
     "dependencies": {
         "@apollo/client": "^3.7.17",
         "@coinbase/wallet-sdk": "^3.7.1",
@@ -58,30 +54,31 @@
         "easy-peasy": "^5.1.0",
         "ethers": "5.4.7",
         "graphql": "^16.8.1",
-        "i18next": "^19.7.0",
+        "i18next": "^23.11.5",
         "jazzicon": "^1.5.0",
         "numeral": "^2.0.6",
-        "react": "^17.0.1",
+        "react": "^18.3.1",
         "react-confetti": "^6.0.1",
         "react-cookie-consent": "^5.2.0",
         "react-copy-to-clipboard": "^5.0.2",
         "react-custom-scrollbars": "^4.2.1",
         "react-device-detect": "^1.13.1",
-        "react-dom": "^17.0.1",
+        "react-dom": "^18.3.1",
         "react-feather": "^2.0.9",
         "react-helmet-async": "^1.0.7",
         "react-i18next": "^11.7.2",
         "react-loading-skeleton": "^3.4.0",
         "react-number-format": "^5.2.2",
         "react-paginate": "^6.5.0",
-        "react-router-dom": "^5.3.0",
+        "react-router-dom": "^6.24.1",
         "react-scripts": "5.0.1",
         "react-toastify": "^6.0.9",
         "react-tooltip": "^5.21.1",
         "react-transition-group": "^4.4.1",
         "siwe": "^2.3.2",
         "styled-components": "^5.2.0",
         "terser-webpack-plugin": "^5.3.10",
+        "tiny-invariant": "^1.3.3",
         "typescript": "^4.4.3"
     },
     "devDependencies": {

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, lazy, Suspense } from 'react'
 import i18next from 'i18next'
 import { I18nextProvider } from 'react-i18next'
-import { Redirect, Route, Switch, useLocation } from 'react-router-dom'
+import { Route, Routes, useLocation } from 'react-router-dom'
 import { ThemeProvider } from 'styled-components'
 import ErrorBoundary from './ErrorBoundary'
 import GlobalStyle from './GlobalStyle'
@@ -15,7 +15,6 @@ import { lightTheme } from './utils/themes/light'
 import { StatsProvider } from './hooks/useStats'
 import { ApolloProvider } from '@apollo/client'
 import { client } from './utils/graph'
-import GoogleTagManager from './components/Analytics/GoogleTagManager'
 import CreateVault from './containers/Vaults/CreateVault'
 import Auctions from './containers/Auctions'
 import Analytics from './containers/Analytics'
@@ -73,46 +72,43 @@ const App = () => {
                                     <ToastContainer
                                         style={{ zIndex: 1001, position: 'sticky', top: 0, left: 0, width: '100%' }}
                                     />
-                                    <Route component={GoogleTagManager} />
+
                                     <Web3ReactManager>
                                         <MaintenanceRedirect>
-                                            <Switch>
-                                                <Route exact strict component={PageNotFound} path="/404" />
-                                                <Route exact strict component={Safes} path={'/'} />
-                                                <Route exact strict component={Maintenance} path={'/maintenance'} />
-                                                <Route exact strict component={Earn} path={'/earn'} />
-                                                <Route exact strict component={Bolts} path={'/bolts'} />
-                                                <Route exact strict component={Analytics} path={'/stats'} />
-                                                <Route exact strict component={GeoBlockContainer} path={'/geoblock'} />
-                                                <Route exact strict component={Auctions} path={'/auctions'} />
-                                                <Route exact strict component={Marketplace} path={'/marketplace'} />
-                                                <Route exact strict component={CreateVault} path={'/vaults/create'} />
-                                                <Route exact strict component={Bridge} path={'/bridge'} />
-                                                <Route exact strict component={Explore} path={'/explore'} />
+                                            <Routes>
+                                                <Route element={<PageNotFound />} path="/404" />
+                                                <Route element={<Safes />} path={'/'} />
+                                                <Route element={<Maintenance />} path={'/maintenance'} />
+                                                <Route element={<Earn />} path={'/earn'} />
+                                                <Route element={<Bolts />} path={'/bolts'} />
+                                                <Route element={<Analytics />} path={'/stats'} />
+                                                <Route element={<Explore />} path={'/explore'} />
                                                 <Route
-                                                    exact
-                                                    strict
-                                                    component={VaultDetails}
-                                                    path={'/vaults/:id/deposit'}
+                                                    caseSensitive
+                                                    element={<GeoBlockContainer />}
+                                                    path={'/geoblock'}
                                                 />
+                                                <Route element={<Auctions />} path={'/auctions'} />
+                                                <Route element={<Marketplace />} path={'/marketplace'} />
                                                 <Route
-                                                    exact
-                                                    strict
-                                                    component={VaultDetails}
-                                                    path={'/vaults/:id/withdraw'}
+                                                    caseSensitive
+                                                    element={<CreateVault />}
+                                                    path={'/vaults/create'}
                                                 />
-                                                <Route exact component={VaultDetails} path={'/vaults/:id'} />
-                                                <Route exact component={EarnDetails} path={'/earn/:id'} />
-                                                <Route exact strict component={Safes} path={'/vaults'} />
-                                                <Route exact strict component={Safes} path={'/:address'} />
+                                                <Route element={<Bridge />} path={'/bridge'} />
                                                 <Route
-                                                    exact
-                                                    strict
-                                                    component={DepositFunds}
-                                                    path={'/deposit/:token/deposit'}
+                                                    caseSensitive
+                                                    element={<VaultDetails />}
+                                                    path={'/vaults/:id/deposit'}
                                                 />
-                                                <Redirect path="*" to="/404" />
-                                            </Switch>
+                                                <Route element={<VaultDetails />} path={'/vaults/:id/withdraw'} />
+                                                <Route element={<VaultDetails />} path={'/vaults/:id'} />
+                                                <Route element={<EarnDetails />} path={'/earn/:id'} />
+                                                <Route element={<Safes />} path={'/vaults'} />
+                                                <Route element={<Safes />} path={'/:address'} />
+                                                <Route element={<DepositFunds />} path={'/deposit/:token/deposit'} />
+                                                <Route path="*" element={<PageNotFound />} />
+                                            </Routes>
                                         </MaintenanceRedirect>
                                     </Web3ReactManager>
                                 </StatsProvider>

diff --git a/src/components/Analytics/GoogleTagManager.tsx b/src/components/Analytics/GoogleTagManager.tsx
@@ -1,8 +1,7 @@
 import React from 'react'
 import { Helmet } from 'react-helmet-async'
-import { RouteComponentProps } from 'react-router-dom'
 
-const GoogleTagManager = ({ location: { pathname } }: RouteComponentProps) => {
+const GoogleTagManager = ({ location: { pathname } }: { location: { pathname: string } }) => {
     return (
         <Helmet>
             {process.env.REACT_APP_GOOGLE_ANALYTICS_ID ? (

diff --git a/src/components/Modals/LiquidateSafeModal.tsx b/src/components/Modals/LiquidateSafeModal.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useHistory } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
 import styled from 'styled-components'
 
 import { handleTransactionError } from '~/hooks'
@@ -18,7 +18,7 @@ const LiquidateSafeModal = () => {
     const { t } = useTranslation()
     const [accepted, setAccepted] = useState(false)
     const geb = useGeb()
-    const history = useHistory()
+    const navigate = useNavigate()
 
     const closeModal = () => {
         setAccepted(false)
@@ -55,7 +55,7 @@ const LiquidateSafeModal = () => {
                         txResponse.wait().then(() => {
                             closeModal()
                             popupsModel.setIsWaitingModalOpen(false)
-                            history.go(0)
+                            navigate(-1)
                         })
                     }
                 })

diff --git a/src/components/NavLinks.tsx b/src/components/NavLinks.tsx
@@ -1,14 +1,12 @@
 import React from 'react'
 import styled, { css } from 'styled-components'
 import { useTranslation } from 'react-i18next'
-import { useHistory } from 'react-router-dom'
-import { NavLink } from 'react-router-dom'
+import { NavLink, useLocation } from 'react-router-dom'
 
 import { useStoreActions } from '../store'
 
 const NavLinks = () => {
-    const history = useHistory()
-    const { location } = history
+    const location = useLocation()
 
     const { t } = useTranslation()
     const { popupsModel: popupsActions } = useStoreActions((state) => state)
@@ -29,7 +27,6 @@ const NavLinks = () => {
         { name: 'auctions', to: '/auctions' },
         { name: 'bolts', to: '/bolts' },
         { name: 'stats', to: '/stats' },
-        // { name: 'bridge', to: '/bridge' },
     ]
 
     return (

diff --git a/src/components/Steps.tsx b/src/components/Steps.tsx
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 import { useTranslation } from 'react-i18next'
-import { useHistory } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
 import {
     useActiveWeb3React,
     handleTransactionError,
@@ -21,7 +21,7 @@ const Steps = () => {
     const { account, provider, chainId } = useActiveWeb3React()
     const geb = useGeb()
     const blocksSinceCheck = use10BlocksConfirmations()
-    const history = useHistory()
+    const navigate = useNavigate()
     const { connectWalletModel: connectWalletState } = useStoreState((state) => state)
 
     const { popupsModel: popupsActions, connectWalletModel: connectWalletActions } = useStoreActions((state) => state)
@@ -65,7 +65,7 @@ const Steps = () => {
             const hasGasToken = await checkUserGasBalance(account, provider)
             if (!hasGasToken) {
                 // bridgeModelActions.setReason('No funds for gas fee, please bridge some funds.')
-                popupsActions.setIsLowGasModalOpen(true)
+                // popupsActions.setIsLowGasModalOpen(true)
             }
             connectWalletActions.setIsStepLoading(false)
             handleTransactionError(e)
@@ -74,7 +74,7 @@ const Steps = () => {
     }
 
     const handleCreateSafe = () => {
-        history.push('/vaults/create')
+        navigate('/vaults/create')
     }
 
     const returnSteps = (stepNumber: number) => {

diff --git a/src/components/VaultBlock.tsx b/src/components/VaultBlock.tsx
@@ -3,46 +3,64 @@ import styled from 'styled-components'
 
 import { returnState, COIN_TICKER, getTokenLogo, formatWithCommas } from '~/utils'
 
-const VaultBlock = ({ ...props }) => {
+interface VaultBlockProps {
+    id: string
+    riskState: number
+    collateralName: string
+    collateral: string
+    totalDebt: string
+    collateralRatio: string
+    liquidationPrice: string
+    className?: string
+}
+
+const VaultBlock = ({
+    id,
+    riskState,
+    collateralName,
+    collateral,
+    totalDebt,
+    collateralRatio,
+    liquidationPrice,
+    className,
+}: VaultBlockProps) => {
+    const stateClass = returnState(riskState) ? returnState(riskState).toLowerCase() : 'dimmed'
+
     return (
-        <Container className={props.className}>
-            <Link to={`/vaults/${props.id}/deposit`}>
-                <BlockContainer className={!returnState(props.riskState) ? 'empty' : ''}>
+        <Container className={className}>
+            <Link to={`/vaults/${id}/deposit`}>
+                <BlockContainer className={!returnState(riskState) ? 'empty' : ''}>
                     <BlockHeader>
                         <SafeInfo>
-                            <img src={getTokenLogo(props.collateralName)} alt={props.collateralName} width={'50px'} />
+                            <img src={getTokenLogo(collateralName)} alt={collateralName} width={'50px'} />
                             <SafeData>
                                 <SafeTitle>
-                                    Vault <span>#{props.id}</span>
+                                    Vault <span>#{id}</span>
                                 </SafeTitle>
                             </SafeData>
                         </SafeInfo>
                     </BlockHeader>
                     <Block>
                         <Item>
-                            <Label>{`${props.collateralName} Deposited`}</Label>
-                            <Value>{formatWithCommas(props.collateral)}</Value>
+                            <Label>{`${collateralName} Deposited`}</Label>
+                            <Value>{formatWithCommas(collateral)}</Value>
                         </Item>
                         <Item>
                             <Label>{`${COIN_TICKER} Borrowed`}</Label>
-                            <Value>{formatWithCommas(props.totalDebt)}</Value>
+                            <Value>{formatWithCommas(totalDebt)}</Value>
                         </Item>
                         <Item>
                             <Label>{'Collateral Ratio'}</Label>
-                            <Value>{`${formatWithCommas(props.collateralRatio)}%`}</Value>
+                            <Value>{`${formatWithCommas(collateralRatio)}%`}</Value>
                         </Item>
                         <Item>
                             <Label>{'Liquidation Price'}</Label>
-                            <Value>${formatWithCommas(props.liquidationPrice)}</Value>
+                            <Value>${formatWithCommas(liquidationPrice)}</Value>
                         </Item>
-                        <Item
-                            className={
-                                returnState(props.riskState) ? returnState(props.riskState).toLowerCase() : 'dimmed'
-                            }
-                        >
+                        <Item className={stateClass}>
                             <Label>{'Risk'}</Label>
                             <Wrapper>
-                                <div>{returnState(props.riskState) ? returnState(props.riskState) : 'Closed'}</div>
+                                <div>{returnState(riskState) ? returnState(riskState) : 'Closed'}</div>
                             </Wrapper>
                         </Item>
                     </Block>

diff --git a/src/components/VaultManager.tsx b/src/components/VaultManager.tsx
@@ -1,7 +1,7 @@
 import { useState } from 'react'
 import { isAddress } from '@ethersproject/address'
 import { useTranslation } from 'react-i18next'
-import { useHistory } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
 import styled from 'styled-components'
 
 import { useStoreActions, useStoreState } from '~/store'
@@ -18,7 +18,7 @@ const VaultManager = () => {
     const [error, setError] = useState('')
     const [value, setValue] = useState('')
 
-    const history = useHistory()
+    const navigate = useNavigate()
 
     const { popupsModel: popupsActions } = useStoreActions((state) => state)
     const { tokensData } = useStoreState((state) => state.connectWalletModel)
@@ -49,7 +49,7 @@ const VaultManager = () => {
             if (window?.location) {
                 window.location.assign(`/${value}`)
             } else {
-                history.push(`/${value}`)
+                navigate(`/${value}`)
             }
             handleCancel()
             await timeout(3000)