Skip to content

Commit a4d462e

Browse files
0xAlunara0xAlunara
authored
Merge pull request #1733 from curvefi/feat/pool-address-in-url
feat: add support for pool addresses in URL
2 parents 8fac5b8 + bcb0d11 commit a4d462e

File tree

15 files changed

+90
-43
lines changed

15 files changed

+90
-43
lines changed

‎.github/copilot-instructions.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,7 @@ export const dexLayoutRoute = createRoute({
118118
// Feature route
119119
export const poolRoute = createRoute({
120120
getParentRoute: () => dexLayoutRoute,
121-
path: '$network/pool/$poolId',
121+
path: '$network/pool/$poolIdOrAddress',
122122
component: PagePool,
123123
head: () => ({ meta: [{ title: 'Pool - Curve' }] }),
124124
})

‎CLAUDE.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,7 @@ export const dexLayoutRoute = createRoute({
118118
// Feature route
119119
export const poolRoute = createRoute({
120120
getParentRoute: () => dexLayoutRoute,
121-
path: '$network/pool/$poolId',
121+
path: '$network/pool/$poolIdOrAddress',
122122
component: PagePool,
123123
head: () => ({ meta: [{ title: 'Pool - Curve' }] }),
124124
})

‎apps/main/src/dex/components/MonadBannerAlert.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1-
import { Banner } from '@ui-kit/shared/ui/Banner'
21
import { Stack } from '@mui/material'
32
import { t } from '@ui-kit/lib/i18n'
4-
import { PoolUrlParams } from '../types/main.types'
3+
import { Banner } from '@ui-kit/shared/ui/Banner'
4+
import { usePoolIdByAddressOrId } from '../hooks/usePoolIdByAddressOrId'
55

6-
const MonadBannerAlert = ({ params }: { params: PoolUrlParams }) => {
7-
const showFactoryStableNg11Banner = params.pool === 'factory-stable-ng-11' && params.network === 'monad'
6+
const MonadBannerAlert = ({ chainId, poolIdOrAddress }: { chainId: number; poolIdOrAddress: string }) => {
7+
const poolId = usePoolIdByAddressOrId({ chainId, poolIdOrAddress })
8+
const showFactoryStableNg11Banner = poolId === 'factory-stable-ng-11'
89

910
if (showFactoryStableNg11Banner)
1011
return (

‎apps/main/src/dex/components/PagePool/Deposit/components/FieldsDeposit.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import type { FormValues, LoadMaxAmount } from '@/dex/components/PagePool/Deposi
66
import { FieldsWrapper } from '@/dex/components/PagePool/styles'
77
import type { TransferProps } from '@/dex/components/PagePool/types'
88
import { useNetworkByChain } from '@/dex/entities/networks'
9+
import { usePoolIdByAddressOrId } from '@/dex/hooks/usePoolIdByAddressOrId'
910
import useStore from '@/dex/store/useStore'
1011
import type { CurrencyReserves } from '@/dex/types/main.types'
1112
import { getChainPoolIdActiveKey } from '@/dex/utils'
@@ -60,7 +61,7 @@ const FieldsDeposit = ({
6061
blockchainId,
6162
poolData,
6263
poolDataCacheOrApi,
63-
routerParams: { rChainId, rPoolId },
64+
routerParams: { rChainId, rPoolIdOrAddress },
6465
tokensMapper,
6566
userPoolBalances,
6667
updateFormValues,
@@ -80,7 +81,8 @@ const FieldsDeposit = ({
8081
const balancesLoading = useStore((state) => state.user.walletBalancesLoading)
8182
const maxLoading = useStore((state) => state.poolDeposit.maxLoading)
8283
const setPoolIsWrapped = useStore((state) => state.pools.setPoolIsWrapped)
83-
const reserves = useStore((state) => state.pools.currencyReserves[getChainPoolIdActiveKey(rChainId, rPoolId)])
84+
const poolId = usePoolIdByAddressOrId({ chainId: rChainId, poolIdOrAddress: rPoolIdOrAddress })
85+
const reserves = useStore((state) => state.pools.currencyReserves[getChainPoolIdActiveKey(rChainId, poolId)])
8486
const isBalancedAmounts = formValues.isBalancedAmounts
8587

8688
const handleFormAmountChange = useCallback(

‎apps/main/src/dex/components/PagePool/Page.tsx‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import Transfer from '@/dex/components/PagePool/index'
33
import { ROUTE } from '@/dex/constants'
44
import { useNetworkByChain } from '@/dex/entities/networks'
55
import { useChainId } from '@/dex/hooks/useChainId'
6+
import { usePoolIdByAddressOrId } from '@/dex/hooks/usePoolIdByAddressOrId'
67
import useStore from '@/dex/store/useStore'
78
import type { PoolUrlParams } from '@/dex/types/main.types'
89
import { getPath } from '@/dex/utils/utilsRouter'
@@ -15,36 +16,37 @@ export const PagePool = () => {
1516
const push = useNavigate()
1617
const { curveApi = null } = useConnection()
1718
const props = useParams<PoolUrlParams>()
18-
const { pool: rPoolId, formType: rFormType, network: networkId } = props
19+
const { poolIdOrAddress: rPoolIdOrAddress, formType: rFormType, network: networkId } = props
1920
const rChainId = useChainId(networkId)
21+
const poolId = usePoolIdByAddressOrId({ chainId: rChainId, poolIdOrAddress: rPoolIdOrAddress })
2022

2123
const hasDepositAndStake = useStore((state) => state.getNetworkConfigFromApi(rChainId).hasDepositAndStake)
2224
const haveAllPools = useStore((state) => state.pools.haveAllPools[rChainId])
2325
const fetchNewPool = useStore((state) => state.pools.fetchNewPool)
24-
const poolDataCache = useStore((state) => state.storeCache.poolsMapper[rChainId]?.[rPoolId])
25-
const poolData = useStore((state) => state.pools.poolsMapper[rChainId]?.[rPoolId])
26+
const poolDataCache = useStore((state) => state.storeCache.poolsMapper[rChainId]?.[poolId ?? ''])
27+
const poolData = useStore((state) => state.pools.poolsMapper[rChainId]?.[poolId ?? ''])
2628
const { data: network } = useNetworkByChain({ chainId: rChainId })
2729
const [poolNotFound, setPoolNotFound] = useState(false)
2830

2931
const poolDataCacheOrApi = useMemo(() => poolData || poolDataCache, [poolData, poolDataCache])
3032

3133
useEffect(() => {
32-
if (!rChainId || curveApi?.chainId !== rChainId || !haveAllPools || poolData) return
33-
fetchNewPool(curveApi, props.pool)
34+
if (!rChainId || !poolId || curveApi?.chainId !== rChainId || !haveAllPools || poolData) return
35+
fetchNewPool(curveApi, poolId)
3436
.then((found) => setPoolNotFound(!found))
3537
.catch(() => setPoolNotFound(true))
36-
}, [curveApi, fetchNewPool, haveAllPools, network, props, poolData, push, rChainId])
38+
}, [curveApi, fetchNewPool, haveAllPools, network, poolId, poolData, push, rChainId])
3739

38-
return !rFormType || network.excludePoolsMapper[rPoolId] || poolNotFound ? (
40+
return !rFormType || network.excludePoolsMapper[poolId ?? ''] || poolNotFound ? (
3941
<ErrorPage title="404" subtitle={t`Pool Not Found`} continueUrl={getPath(props, ROUTE.PAGE_POOLS)} />
4042
) : (
41-
rFormType && poolDataCacheOrApi?.pool?.id === rPoolId && hasDepositAndStake != null && (
43+
rFormType && poolDataCacheOrApi?.pool?.id === poolId && hasDepositAndStake != null && (
4244
<Transfer
4345
curve={curveApi}
4446
params={props}
4547
poolData={poolData}
4648
poolDataCacheOrApi={poolDataCacheOrApi}
47-
routerParams={{ rChainId, rPoolId, rFormType }}
49+
routerParams={{ rChainId, rPoolIdOrAddress, rFormType }}
4850
hasDepositAndStake={hasDepositAndStake}
4951
/>
5052
)

‎apps/main/src/dex/components/PagePool/PoolDetails/PoolStats/PoolParameters.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import PoolTotalStaked from '@/dex/components/PagePool/PoolDetails/PoolStats/Poo
77
import { StyledInformationSquare16 } from '@/dex/components/PagePool/PoolDetails/PoolStats/styles'
88
import type { TransferProps } from '@/dex/components/PagePool/types'
99
import { useNetworkByChain } from '@/dex/entities/networks'
10+
import { usePoolIdByAddressOrId } from '@/dex/hooks/usePoolIdByAddressOrId'
1011
import usePoolTotalStaked from '@/dex/hooks/usePoolTotalStaked'
1112
import useStore from '@/dex/store/useStore'
1213
import type { PoolParameters } from '@/dex/types/main.types'
@@ -34,12 +35,13 @@ const PoolParameters = ({
3435
}: {
3536
parameters: PoolParameters
3637
} & Pick<TransferProps, 'poolData' | 'poolDataCacheOrApi' | 'routerParams'>) => {
37-
const { rChainId, rPoolId } = routerParams
38+
const { rChainId, rPoolIdOrAddress } = routerParams
3839
const {
3940
data: { pricesApi, isLite },
4041
} = useNetworkByChain({ chainId: rChainId })
41-
const tvl = useStore((state) => state.pools.tvlMapper[rChainId]?.[rPoolId])
42-
const volume = useStore((state) => state.pools.volumeMapper[rChainId]?.[rPoolId])
42+
const poolId = usePoolIdByAddressOrId({ chainId: rChainId, poolIdOrAddress: rPoolIdOrAddress })
43+
const tvl = useStore((state) => state.pools.tvlMapper[rChainId]?.[poolId ?? ''])
44+
const volume = useStore((state) => state.pools.volumeMapper[rChainId]?.[poolId ?? ''])
4345

4446
const haveWrappedCoins = useMemo(() => {
4547
if (poolData?.pool?.wrappedCoins) {

‎apps/main/src/dex/components/PagePool/PoolDetails/PoolStats/index.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import CurrencyReserves from '@/dex/components/PagePool/PoolDetails/CurrencyRese
44
import PoolParameters from '@/dex/components/PagePool/PoolDetails/PoolStats/PoolParameters'
55
import RewardsComp from '@/dex/components/PagePool/PoolDetails/PoolStats/Rewards'
66
import type { PageTransferProps } from '@/dex/components/PagePool/types'
7+
import { usePoolIdByAddressOrId } from '@/dex/hooks/usePoolIdByAddressOrId'
78
import useTokenAlert from '@/dex/hooks/useTokenAlert'
89
import useStore from '@/dex/store/useStore'
910
import { PoolAlert, TokensMapper, type UrlParams } from '@/dex/types/main.types'
@@ -23,9 +24,10 @@ type PoolStatsProps = {
2324

2425
const PoolStats = ({ curve, routerParams, poolAlert, poolData, poolDataCacheOrApi, tokensMapper }: PoolStatsProps) => {
2526
const tokenAlert = useTokenAlert(poolData?.tokenAddressesAll ?? [])
26-
const { rChainId, rPoolId } = routerParams
27-
const rewardsApy = useStore((state) => state.pools.rewardsApyMapper[rChainId]?.[rPoolId])
28-
const tvl = useStore((state) => state.pools.tvlMapper[rChainId]?.[rPoolId])
27+
const { rChainId, rPoolIdOrAddress } = routerParams
28+
const poolId = usePoolIdByAddressOrId({ chainId: rChainId, poolIdOrAddress: rPoolIdOrAddress })
29+
const rewardsApy = useStore((state) => state.pools.rewardsApyMapper[rChainId]?.[poolId ?? ''])
30+
const tvl = useStore((state) => state.pools.tvlMapper[rChainId]?.[poolId ?? ''])
2931
const fetchPoolStats = useStore((state) => state.pools.fetchPoolStats)
3032

3133
const risksPathname = getPath(useParams<UrlParams>(), `/disclaimer`)
@@ -41,7 +43,7 @@ const PoolStats = ({ curve, routerParams, poolAlert, poolData, poolDataCacheOrAp
4143
<MainStatsContainer flex flexColumn>
4244
<MainStatsWrapper grid>
4345
<Box grid gridRowGap={3}>
44-
<CurrencyReserves rChainId={rChainId} rPoolId={rPoolId} tvl={tvl} tokensMapper={tokensMapper} />
46+
<CurrencyReserves rChainId={rChainId} rPoolId={poolId ?? ''} tvl={tvl} tokensMapper={tokensMapper} />
4547
{poolData && <RewardsComp chainId={rChainId} poolData={poolData} rewardsApy={rewardsApy} />}
4648
<Box grid gridRowGap={2}>
4749
{poolAlert && !poolAlert.isDisableDeposit && !poolAlert.isInformationOnlyAndShowInForm && (

‎apps/main/src/dex/components/PagePool/UserDetails/index.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { useMemo } from 'react'
22
import { styled } from 'styled-components'
33
import type { TransferProps } from '@/dex/components/PagePool/types'
44
import PoolRewardsCrv from '@/dex/components/PoolRewardsCrv'
5+
import { usePoolIdByAddressOrId } from '@/dex/hooks/usePoolIdByAddressOrId'
56
import { getUserPoolActiveKey } from '@/dex/store/createUserSlice'
67
import useStore from '@/dex/store/useStore'
78
import Box from '@ui/Box'
@@ -28,9 +29,10 @@ const MySharesStats = ({
2829
TransferProps,
2930
'curve' | 'poolData' | 'poolDataCacheOrApi' | 'routerParams' | 'tokensMapper' | 'userPoolBalances'
3031
>) => {
31-
const { rChainId, rPoolId } = routerParams
32-
const userPoolActiveKey = curve && rPoolId ? getUserPoolActiveKey(curve, rPoolId) : ''
33-
const rewardsApy = useStore((state) => state.pools.rewardsApyMapper[rChainId]?.[rPoolId])
32+
const { rChainId, rPoolIdOrAddress } = routerParams
33+
const poolId = usePoolIdByAddressOrId({ chainId: rChainId, poolIdOrAddress: rPoolIdOrAddress })
34+
const userPoolActiveKey = curve && poolId ? getUserPoolActiveKey(curve, poolId) : ''
35+
const rewardsApy = useStore((state) => state.pools.rewardsApyMapper[rChainId]?.[poolId ?? ''])
3436
const userCrvApy = useStore((state) => state.user.userCrvApy[userPoolActiveKey])
3537
const userLiquidityUsd = useStore((state) => state.user.userLiquidityUsd[userPoolActiveKey])
3638
const userShare = useStore((state) => state.user.userShare[userPoolActiveKey])

‎apps/main/src/dex/components/PagePool/components/TransferActions.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import FormConnectWallet from '@/dex/components/FormConnectWallet'
33
import AlertSeedAmounts from '@/dex/components/PagePool/components/AlertSeedAmounts'
44
import type { TransferProps } from '@/dex/components/PagePool/types'
55
import { useSignerAddress } from '@/dex/entities/signer'
6+
import { usePoolIdByAddressOrId } from '@/dex/hooks/usePoolIdByAddressOrId'
67
import useTokenAlert from '@/dex/hooks/useTokenAlert'
78
import useStore from '@/dex/store/useStore'
89
import { getChainPoolIdActiveKey } from '@/dex/utils'
@@ -22,10 +23,11 @@ const TransferActions = ({
2223
children: ReactNode
2324
} & Pick<TransferProps, 'poolData' | 'poolDataCacheOrApi' | 'routerParams' | 'seed' | 'userPoolBalances'>) => {
2425
const { data: signerAddress } = useSignerAddress()
25-
const { rChainId, rPoolId } = routerParams
26+
const { rChainId, rPoolIdOrAddress } = routerParams
27+
const poolId = usePoolIdByAddressOrId({ chainId: rChainId, poolIdOrAddress: rPoolIdOrAddress })
2628
const alert = useTokenAlert(poolData?.tokenAddressesAll ?? [])
2729
const { isHydrated } = useConnection()
28-
const currencyReserves = useStore((state) => state.pools.currencyReserves[getChainPoolIdActiveKey(rChainId, rPoolId)])
30+
const currencyReserves = useStore((state) => state.pools.currencyReserves[getChainPoolIdActiveKey(rChainId, poolId)])
2931
const walletBalancesLoading = useStore((state) => state.user.walletBalancesLoading)
3032

3133
const isLoading =

‎apps/main/src/dex/components/PagePool/index.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,13 @@ import { ROUTE } from '@/dex/constants'
1414
import { useGaugeManager, useGaugeRewardsDistributors } from '@/dex/entities/gauge'
1515
import { useNetworkByChain } from '@/dex/entities/networks'
1616
import usePoolAlert from '@/dex/hooks/usePoolAlert'
17+
import { usePoolIdByAddressOrId } from '@/dex/hooks/usePoolIdByAddressOrId'
1718
import useTokensMapper from '@/dex/hooks/useTokensMapper'
1819
import { getUserPoolActiveKey } from '@/dex/store/createUserSlice'
1920
import useStore from '@/dex/store/useStore'
2021
import { getChainPoolIdActiveKey } from '@/dex/utils'
2122
import { getPath } from '@/dex/utils/utilsRouter'
2223
import { ManageGauge } from '@/dex/widgets/manage-gauge'
23-
import type { PoolUrlParams } from '@/dex/types/main.types'
2424
import Stack from '@mui/material/Stack'
2525
import AlertBox from '@ui/AlertBox'
2626
import { AppFormContentWrapper } from '@ui/AppForm'
@@ -52,13 +52,14 @@ const { MaxWidth } = SizesAndSpaces
5252

5353
const Transfer = (pageTransferProps: PageTransferProps) => {
5454
const { params, curve, hasDepositAndStake, poolData, poolDataCacheOrApi, routerParams } = pageTransferProps
55-
const { rChainId, rFormType, rPoolId } = routerParams
55+
const { rChainId, rFormType, rPoolIdOrAddress } = routerParams
56+
const poolId = usePoolIdByAddressOrId({ chainId: rChainId, poolIdOrAddress: rPoolIdOrAddress })
5657
const { signerAddress } = curve ?? {}
5758
const push = useNavigate()
5859
const poolAlert = usePoolAlert(poolData)
5960
const { tokensMapper } = useTokensMapper(rChainId)
60-
const userPoolActiveKey = curve && rPoolId ? getUserPoolActiveKey(curve, rPoolId) : ''
61-
const chainIdPoolId = getChainPoolIdActiveKey(rChainId, rPoolId)
61+
const userPoolActiveKey = curve && poolId ? getUserPoolActiveKey(curve, poolId) : ''
62+
const chainIdPoolId = getChainPoolIdActiveKey(rChainId, poolId)
6263
const userPoolBalances = useStore((state) => state.user.walletBalances[userPoolActiveKey])
6364
const userPoolBalancesLoading = useStore((state) => state.user.walletBalancesLoading)
6465
const currencyReserves = useStore((state) => state.pools.currencyReserves[chainIdPoolId])
@@ -91,7 +92,6 @@ const Transfer = (pageTransferProps: PageTransferProps) => {
9192
const [seed, setSeed] = useState(DEFAULT_SEED)
9293

9394
const { pool } = poolDataCacheOrApi
94-
const poolId = poolData?.pool?.id
9595
const { data: network } = useNetworkByChain({ chainId: rChainId })
9696
const { networkId, isLite, pricesApi } = network
9797
const poolAddress = poolData?.pool.address
@@ -186,7 +186,7 @@ const Transfer = (pageTransferProps: PageTransferProps) => {
186186

187187
const toggleForm = useCallback(
188188
(updatedFormType: TransferFormType) => {
189-
push(getPath(params, `${ROUTE.PAGE_POOLS}/${params.pool}/${updatedFormType}`))
189+
push(getPath(params, `${ROUTE.PAGE_POOLS}/${params.poolIdOrAddress}/${updatedFormType}`))
190190
},
191191
[push, params],
192192
)
@@ -207,7 +207,7 @@ const Transfer = (pageTransferProps: PageTransferProps) => {
207207

208208
return (
209209
<>
210-
<MonadBannerAlert params={params as PoolUrlParams} />
210+
<MonadBannerAlert chainId={rChainId} poolIdOrAddress={rPoolIdOrAddress} />
211211
<AppPageFormContainer isAdvanceMode={true}>
212212
<AppPageFormsWrapper className="grid-transfer">
213213
<Stack

0 commit comments

Comments
 (0)