Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update react, react-router #602

Merged
merged 12 commits into from
Jul 17, 2024
Merged

Update react, react-router #602

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
5dbe358
widget at v2.10.2
pi0neerpat Jun 28, 2024
f8504ed
add yarn.lock
pi0neerpat Jun 28, 2024
8757325
Update react-router to v6
pi0neerpat Jul 3, 2024
2a10bc4
Update widget to v3
pi0neerpat Jul 4, 2024
434dbc0
add mui packages
pi0neerpat Jul 5, 2024
7e2db0e
fix onboarding props issue
pi0neerpat Jul 5, 2024
30f3636
Merge branch 'dev' into add-lifi-widget
pi0neerpat Jul 10, 2024
86800a3
yarn lock
pi0neerpat Jul 10, 2024
c0390e1
make compatible with react router dom v6
jahabeebs Jul 10, 2024
32dd1a2
Merge branch 'dev' into add-lifi-widget
pi0neerpat Jul 17, 2024
157db72
remove lifi widget
pi0neerpat Jul 17, 2024
84d0697
remove widget
pi0neerpat Jul 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 5 additions & 8 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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": {
Expand Down
64 changes: 30 additions & 34 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -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'
Expand Down Expand Up @@ -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>
Expand Down
3 changes: 1 addition & 2 deletions src/components/Analytics/GoogleTagManager.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 ? (
Expand Down
6 changes: 3 additions & 3 deletions src/components/Modals/LiquidateSafeModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -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)
Expand Down Expand Up @@ -55,7 +55,7 @@ const LiquidateSafeModal = () => {
txResponse.wait().then(() => {
closeModal()
popupsModel.setIsWaitingModalOpen(false)
history.go(0)
navigate(-1)
})
}
})
Expand Down
7 changes: 2 additions & 5 deletions src/components/NavLinks.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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)
Expand All @@ -29,7 +27,6 @@ const NavLinks = () => {
{ name: 'auctions', to: '/auctions' },
{ name: 'bolts', to: '/bolts' },
{ name: 'stats', to: '/stats' },
// { name: 'bridge', to: '/bridge' },
]

return (
Expand Down
8 changes: 4 additions & 4 deletions src/components/Steps.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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)
Expand Down Expand Up @@ -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)
Expand All @@ -74,7 +74,7 @@ const Steps = () => {
}

const handleCreateSafe = () => {
history.push('/vaults/create')
navigate('/vaults/create')
}

const returnSteps = (stepNumber: number) => {
Expand Down
52 changes: 35 additions & 17 deletions src/components/VaultBlock.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions src/components/VaultManager.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -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)
Expand Down Expand Up @@ -49,7 +49,7 @@ const VaultManager = () => {
if (window?.location) {
window.location.assign(`/${value}`)
} else {
history.push(`/${value}`)
navigate(`/${value}`)
}
handleCancel()
await timeout(3000)
Expand Down
Loading
Loading