Release: Add GRT collateral

package.json

@@ -20,19 +20,15 @@
     "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",
         "@craco/craco": "7.1.0",
         "@ethersproject/address": "^5.0.10",
         "@ethersproject/experimental": "5.4.0",
         "@ethersproject/providers": "5.4.5",
-        "@opendollar/sdk": "1.7.4-rc.1",
-        "@opendollar/svg-generator": "1.0.5",
+        "@opendollar/sdk": "1.7.4-rc.3",
+        "@opendollar/svg-generator": "1.7.4",
         "@react-spring/web": "^9.7.3",
         "@sentry/cli": "^2.31.0",
         "@sentry/integrations": "^7.112.2",
@@ -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": {

public/index.html

@@ -8,7 +8,7 @@
       script-src 'self' blob:  https://kb.wowto.ai https://app.wowto.ai http://cdn.matomo.cloud/usekeyp.matomo.cloud/matomo.js https://cdn.matomo.cloud/usekeyp.matomo.cloud/matomo.js https://cdn.matomo.cloud/matomo.js https://usekeyp.matomo.cloud/matomo.js;
       media-src 'self';
       img-src 'self' data: blob: https://explorer-api.walletconnect.com https://usekeyp.matomo.cloud https://app.opendollar.com;
-      connect-src 'self' blob: https://eth-pokt.nodies.app http://localhost:3000 https://*.quiknode.pro https://api.opensea.io https://api.fuul.xyz https://api.camelot.exchange https://opt-mainnet.g.alchemy.com https://arb-mainnet.g.alchemy.com https://mainnet.optimism.io/ https://eth.llamarpc.com https://base.llamarpc.com https://polygon-bor-rpc.publicnode.com https://eth-pokt.nodies.app https://polygon-pokt.nodies.app https://op-pokt.nodies.app https://arb-pokt.nodies.app https://holy-damp-firefly.arbitrum-mainnet.quiknode.pro https://api.studio.thegraph.com https://od-subgraph-node-image.onrender.com https://usekeyp.matomo.cloud https://o1016103.ingest.us.sentry.io/api/4507153379295232/envelope/ https://o1016103.ingest.us.sentry.io/api/4507153379295232/security/ https://arbitrum-sepolia.infura.io https://arbitrum-sepolia.blockpi.network/v1/rpc/public https://arbitrum.blockpi.network/v1/rpc/public https://optimism.blockpi.network wss://relay.walletconnect.com/ https://verify.walletconnect.org wss://www.walletlink.org/rpc https://explorer-api.walletconnect.com https://chain-proxy.wallet.coinbase.com https://rpc.walletconnect.com https://bot.opendollar.com https://bot.dev.opendollar.com https://subgraph.reflexer.finance/subgraphs/name/reflexer-labs/rai https://api.country.is/ ;
+      connect-src 'self' blob: https://virtual.arbitrum.rpc.tenderly.co https://eth-pokt.nodies.app http://localhost:3000 https://*.quiknode.pro https://api.opensea.io https://api.fuul.xyz https://api.camelot.exchange https://opt-mainnet.g.alchemy.com https://arb-mainnet.g.alchemy.com https://mainnet.optimism.io/ https://eth.llamarpc.com https://base.llamarpc.com https://polygon-bor-rpc.publicnode.com https://eth-pokt.nodies.app https://polygon-pokt.nodies.app https://op-pokt.nodies.app https://arb-pokt.nodies.app https://holy-damp-firefly.arbitrum-mainnet.quiknode.pro https://api.studio.thegraph.com https://od-subgraph-node-image.onrender.com https://usekeyp.matomo.cloud https://o1016103.ingest.us.sentry.io/api/4507153379295232/envelope/ https://o1016103.ingest.us.sentry.io/api/4507153379295232/security/ https://arbitrum-sepolia.infura.io https://arbitrum-sepolia.blockpi.network/v1/rpc/public https://arbitrum.blockpi.network/v1/rpc/public https://optimism.blockpi.network wss://relay.walletconnect.com/ https://verify.walletconnect.org wss://www.walletlink.org/rpc https://explorer-api.walletconnect.com https://chain-proxy.wallet.coinbase.com https://rpc.walletconnect.com https://bot.opendollar.com https://bot.dev.opendollar.com https://subgraph.reflexer.finance/subgraphs/name/reflexer-labs/rai https://api.country.is/ ;
       object-src 'self' blob:;
       form-action 'self';
       font-src 'self' data: https://fonts.gstatic.com;
@@ -61,7 +61,7 @@
         <script src="./tracking.js"></script>
         <script src="https://usekeyp.matomo.cloud/matomo.js"></script>
         <!-- End Matomo Code -->
-        <script type="text/javascript" src="https://kb.wowto.ai/widgets/M4cmuZpuJqb/widget.js" async defer></script>
+        <!-- <script type="text/javascript" src="https://kb.wowto.ai/widgets/M4cmuZpuJqb/widget.js" async defer></script> -->
     </head>
     <body>
         <noscript>You need to enable JavaScript to run this app.</noscript>

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>

src/chains.ts

@@ -28,7 +28,7 @@ const ETH: AddEthereumChainParameter['nativeCurrency'] = {
 export const RPC_URL_ETHEREUM = process.env.REACT_APP_RPC_URL_ETHEREUM
     ? process.env.REACT_APP_RPC_URL_ETHEREUM
     : 'https://eth.llamarpc.com'
-export const RPC_URL_ARBITRUM = 'https://arbitrum.blockpi.network/v1/rpc/public'
+export const RPC_URL_ARBITRUM = RPC_URL || 'https://arbitrum.blockpi.network/v1/rpc/public'
 export const RPC_URL_OPTIMISM = 'https://op-pokt.nodies.app'
 export const RPC_URL_POLYGON = 'https://polygon-bor-rpc.publicnode.com'
 export const RPC_URL_BASE = 'https://base.llamarpc.com'

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 ? (

src/components/CreateVaultStep.tsx

@@ -10,11 +10,11 @@ interface Props {
     btnText: string
     handleClick: () => void
     isDisabled: boolean
-    isLoading: boolean
+    isStepLoading: boolean
     id: string
 }
 
-const CreateVaultStep = ({ stepNumber, title, text, isDisabled, isLoading, btnText, handleClick }: Props) => {
+const CreateVaultStep = ({ stepNumber, title, text, isDisabled, isStepLoading, btnText, handleClick }: Props) => {
     const { t } = useTranslation()
     return (
         <ContentContainer stepNumber={stepNumber}>
@@ -27,8 +27,8 @@ const CreateVaultStep = ({ stepNumber, title, text, isDisabled, isLoading, btnTe
                 <Button
                     data-test-id="steps-btn"
                     id={stepNumber === 2 ? 'create-safe' : ''}
-                    disabled={isDisabled || isLoading}
-                    isLoading={isLoading}
+                    disabled={isDisabled || isStepLoading}
+                    isLoading={isStepLoading}
                     text={t(btnText)}
                     onClick={handleClick}
                     secondary

src/components/LinkButton.tsx

@@ -15,7 +15,7 @@ interface Props {
     withArrow?: boolean
     children?: ReactNode
     color?: 'blueish' | 'greenish' | 'yellowish' | 'colorPrimary' | 'colorSecondary'
-    border?: string
+    className?: string
 }
 const LinkButton = ({
     id,
@@ -26,7 +26,7 @@ const LinkButton = ({
     withArrow,
     children,
     color = 'blueish',
-    border = '',
+    className,
     ...rest
 }: Props) => {
     return isExternal ? (
@@ -36,7 +36,7 @@ const LinkButton = ({
             <span>{text}</span> {withArrow ? <ArrowRightCircle size={'18'} /> : null}
         </ExtLink>
     ) : (
-        <CustomLink id={id} {...rest} to={url} color={color} disabled={disabled} border={border}>
+        <CustomLink id={id} {...rest} to={url} color={color} disabled={disabled} className={className}>
             {children}
             <span>{text}</span> {withArrow ? <ArrowRightCircle size={'18'} /> : null}
         </CustomLink>
@@ -56,21 +56,20 @@ const ExtLink = styled.a`
 const RedesignedBtnStyle = css<{
     disabled?: boolean
     color?: string
-    border?: string
+    className?: string
 }>`
-    pointer-events: ${({ theme, disabled }) => (disabled ? 'none' : 'inherit')};
+    pointer-events: ${({ disabled }) => (disabled ? 'none' : 'inherit')};
     outline: none;
-    cursor: ${({ theme, disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+    cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
     min-width: 134px;
-    border: ${({ theme, border }) => (border ? `1px solid ${theme.colors.blueish}` : 'none')};
     box-shadow: none;
     line-height: 24px;
     font-size: 18px;
     font-weight: 600;
     padding: 8px 30px;
     font-family: 'Barlow', sans-serif;
-    color: ${({ theme, border }) => (border ? 'white' : '#1A74EC')};
-    background: ${({ theme, disabled, color }) => (disabled ? 'rgb(71, 86, 98, 0.4)' : color)};
+    color: ${({ className }) => (className === 'active' ? 'white' : '#1A74EC')};
+    background: ${({ disabled, color }) => (disabled ? 'rgb(71, 86, 98, 0.4)' : color)};
     border-radius: 4px 0px 0px 0px;
     transition: all 0.3s ease;
     display: flex;

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)
                         })
                     }
                 })

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 (