Merge branch 'main' into feat/sync-theme-variables-with-figma

Author: OnlyJousting

.github/copilot-instructions.md

@@ -118,7 +118,7 @@ export const dexLayoutRoute = createRoute({
 // Feature route
 export const poolRoute = createRoute({
   getParentRoute: () => dexLayoutRoute,
-  path: '$network/pool/$poolId',
+  path: '$network/pool/$poolIdOrAddress',
   component: PagePool,
   head: () => ({ meta: [{ title: 'Pool - Curve' }] }),
 })

CLAUDE.md

@@ -118,7 +118,7 @@ export const dexLayoutRoute = createRoute({
 // Feature route
 export const poolRoute = createRoute({
   getParentRoute: () => dexLayoutRoute,
-  path: '$network/pool/$poolId',
+  path: '$network/pool/$poolIdOrAddress',
   component: PagePool,
   head: () => ({ meta: [{ title: 'Pool - Curve' }] }),
 })

apps/main/src/analytics/AnalyticsLayout.tsx

@@ -0,0 +1,5 @@
+import { Outlet } from '@tanstack/react-router'
+
+export function AnalyticsLayout() {
+  return <Outlet />
+}

apps/main/src/analytics/components/PageHome/index.tsx

@@ -0,0 +1 @@
+export const PageHome = () => <div data-testid="new-app">hello world</div>

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

@@ -1,10 +1,11 @@
-import { Banner } from '@ui-kit/shared/ui/Banner'
 import { Stack } from '@mui/material'
 import { t } from '@ui-kit/lib/i18n'
-import { PoolUrlParams } from '../types/main.types'
+import { Banner } from '@ui-kit/shared/ui/Banner'
+import { usePoolIdByAddressOrId } from '../hooks/usePoolIdByAddressOrId'
 
-const MonadBannerAlert = ({ params }: { params: PoolUrlParams }) => {
-  const showFactoryStableNg11Banner = params.pool === 'factory-stable-ng-11' && params.network === 'monad'
+const MonadBannerAlert = ({ chainId, poolIdOrAddress }: { chainId: number; poolIdOrAddress: string }) => {
+  const poolId = usePoolIdByAddressOrId({ chainId, poolIdOrAddress })
+  const showFactoryStableNg11Banner = poolId === 'factory-stable-ng-11'
 
   if (showFactoryStableNg11Banner)
     return (

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

@@ -6,6 +6,7 @@ import type { FormValues, LoadMaxAmount } from '@/dex/components/PagePool/Deposi
 import { FieldsWrapper } from '@/dex/components/PagePool/styles'
 import type { TransferProps } from '@/dex/components/PagePool/types'
 import { useNetworkByChain } from '@/dex/entities/networks'
+import { usePoolIdByAddressOrId } from '@/dex/hooks/usePoolIdByAddressOrId'
 import useStore from '@/dex/store/useStore'
 import type { CurrencyReserves } from '@/dex/types/main.types'
 import { getChainPoolIdActiveKey } from '@/dex/utils'
@@ -60,7 +61,7 @@ const FieldsDeposit = ({
   blockchainId,
   poolData,
   poolDataCacheOrApi,
-  routerParams: { rChainId, rPoolId },
+  routerParams: { rChainId, rPoolIdOrAddress },
   tokensMapper,
   userPoolBalances,
   updateFormValues,
@@ -80,7 +81,8 @@ const FieldsDeposit = ({
   const balancesLoading = useStore((state) => state.user.walletBalancesLoading)
   const maxLoading = useStore((state) => state.poolDeposit.maxLoading)
   const setPoolIsWrapped = useStore((state) => state.pools.setPoolIsWrapped)
-  const reserves = useStore((state) => state.pools.currencyReserves[getChainPoolIdActiveKey(rChainId, rPoolId)])
+  const poolId = usePoolIdByAddressOrId({ chainId: rChainId, poolIdOrAddress: rPoolIdOrAddress })
+  const reserves = useStore((state) => state.pools.currencyReserves[getChainPoolIdActiveKey(rChainId, poolId)])
   const isBalancedAmounts = formValues.isBalancedAmounts
 
   const handleFormAmountChange = useCallback(

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

@@ -3,6 +3,7 @@ import Transfer from '@/dex/components/PagePool/index'
 import { ROUTE } from '@/dex/constants'
 import { useNetworkByChain } from '@/dex/entities/networks'
 import { useChainId } from '@/dex/hooks/useChainId'
+import { usePoolIdByAddressOrId } from '@/dex/hooks/usePoolIdByAddressOrId'
 import useStore from '@/dex/store/useStore'
 import type { PoolUrlParams } from '@/dex/types/main.types'
 import { getPath } from '@/dex/utils/utilsRouter'
@@ -15,36 +16,37 @@ export const PagePool = () => {
   const push = useNavigate()
   const { curveApi = null } = useConnection()
   const props = useParams<PoolUrlParams>()
-  const { pool: rPoolId, formType: rFormType, network: networkId } = props
+  const { poolIdOrAddress: rPoolIdOrAddress, formType: rFormType, network: networkId } = props
   const rChainId = useChainId(networkId)
+  const poolId = usePoolIdByAddressOrId({ chainId: rChainId, poolIdOrAddress: rPoolIdOrAddress })
 
   const hasDepositAndStake = useStore((state) => state.getNetworkConfigFromApi(rChainId).hasDepositAndStake)
   const haveAllPools = useStore((state) => state.pools.haveAllPools[rChainId])
   const fetchNewPool = useStore((state) => state.pools.fetchNewPool)
-  const poolDataCache = useStore((state) => state.storeCache.poolsMapper[rChainId]?.[rPoolId])
-  const poolData = useStore((state) => state.pools.poolsMapper[rChainId]?.[rPoolId])
+  const poolDataCache = useStore((state) => state.storeCache.poolsMapper[rChainId]?.[poolId ?? ''])
+  const poolData = useStore((state) => state.pools.poolsMapper[rChainId]?.[poolId ?? ''])
   const { data: network } = useNetworkByChain({ chainId: rChainId })
   const [poolNotFound, setPoolNotFound] = useState(false)
 
   const poolDataCacheOrApi = useMemo(() => poolData || poolDataCache, [poolData, poolDataCache])
 
   useEffect(() => {
-    if (!rChainId || curveApi?.chainId !== rChainId || !haveAllPools || poolData) return
-    fetchNewPool(curveApi, props.pool)
+    if (!rChainId || !poolId || curveApi?.chainId !== rChainId || !haveAllPools || poolData) return
+    fetchNewPool(curveApi, poolId)
       .then((found) => setPoolNotFound(!found))
       .catch(() => setPoolNotFound(true))
-  }, [curveApi, fetchNewPool, haveAllPools, network, props, poolData, push, rChainId])
+  }, [curveApi, fetchNewPool, haveAllPools, network, poolId, poolData, push, rChainId])
 
-  return !rFormType || network.excludePoolsMapper[rPoolId] || poolNotFound ? (
+  return !rFormType || network.excludePoolsMapper[poolId ?? ''] || poolNotFound ? (
     <ErrorPage title="404" subtitle={t`Pool Not Found`} continueUrl={getPath(props, ROUTE.PAGE_POOLS)} />
   ) : (
-    rFormType && poolDataCacheOrApi?.pool?.id === rPoolId && hasDepositAndStake != null && (
+    rFormType && poolDataCacheOrApi?.pool?.id === poolId && hasDepositAndStake != null && (
       <Transfer
         curve={curveApi}
         params={props}
         poolData={poolData}
         poolDataCacheOrApi={poolDataCacheOrApi}
-        routerParams={{ rChainId, rPoolId, rFormType }}
+        routerParams={{ rChainId, rPoolIdOrAddress, rFormType }}
         hasDepositAndStake={hasDepositAndStake}
       />
     )

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

@@ -7,6 +7,7 @@ import PoolTotalStaked from '@/dex/components/PagePool/PoolDetails/PoolStats/Poo
 import { StyledInformationSquare16 } from '@/dex/components/PagePool/PoolDetails/PoolStats/styles'
 import type { TransferProps } from '@/dex/components/PagePool/types'
 import { useNetworkByChain } from '@/dex/entities/networks'
+import { usePoolIdByAddressOrId } from '@/dex/hooks/usePoolIdByAddressOrId'
 import usePoolTotalStaked from '@/dex/hooks/usePoolTotalStaked'
 import useStore from '@/dex/store/useStore'
 import type { PoolParameters } from '@/dex/types/main.types'
@@ -34,12 +35,13 @@ const PoolParameters = ({
 }: {
   parameters: PoolParameters
 } & Pick<TransferProps, 'poolData' | 'poolDataCacheOrApi' | 'routerParams'>) => {
-  const { rChainId, rPoolId } = routerParams
+  const { rChainId, rPoolIdOrAddress } = routerParams
   const {
     data: { pricesApi, isLite },
   } = useNetworkByChain({ chainId: rChainId })
-  const tvl = useStore((state) => state.pools.tvlMapper[rChainId]?.[rPoolId])
-  const volume = useStore((state) => state.pools.volumeMapper[rChainId]?.[rPoolId])
+  const poolId = usePoolIdByAddressOrId({ chainId: rChainId, poolIdOrAddress: rPoolIdOrAddress })
+  const tvl = useStore((state) => state.pools.tvlMapper[rChainId]?.[poolId ?? ''])
+  const volume = useStore((state) => state.pools.volumeMapper[rChainId]?.[poolId ?? ''])
 
   const haveWrappedCoins = useMemo(() => {
     if (poolData?.pool?.wrappedCoins) {

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

@@ -4,6 +4,7 @@ import CurrencyReserves from '@/dex/components/PagePool/PoolDetails/CurrencyRese
 import PoolParameters from '@/dex/components/PagePool/PoolDetails/PoolStats/PoolParameters'
 import RewardsComp from '@/dex/components/PagePool/PoolDetails/PoolStats/Rewards'
 import type { PageTransferProps } from '@/dex/components/PagePool/types'
+import { usePoolIdByAddressOrId } from '@/dex/hooks/usePoolIdByAddressOrId'
 import useTokenAlert from '@/dex/hooks/useTokenAlert'
 import useStore from '@/dex/store/useStore'
 import { PoolAlert, TokensMapper, type UrlParams } from '@/dex/types/main.types'
@@ -23,9 +24,10 @@ type PoolStatsProps = {
 
 const PoolStats = ({ curve, routerParams, poolAlert, poolData, poolDataCacheOrApi, tokensMapper }: PoolStatsProps) => {
   const tokenAlert = useTokenAlert(poolData?.tokenAddressesAll ?? [])
-  const { rChainId, rPoolId } = routerParams
-  const rewardsApy = useStore((state) => state.pools.rewardsApyMapper[rChainId]?.[rPoolId])
-  const tvl = useStore((state) => state.pools.tvlMapper[rChainId]?.[rPoolId])
+  const { rChainId, rPoolIdOrAddress } = routerParams
+  const poolId = usePoolIdByAddressOrId({ chainId: rChainId, poolIdOrAddress: rPoolIdOrAddress })
+  const rewardsApy = useStore((state) => state.pools.rewardsApyMapper[rChainId]?.[poolId ?? ''])
+  const tvl = useStore((state) => state.pools.tvlMapper[rChainId]?.[poolId ?? ''])
   const fetchPoolStats = useStore((state) => state.pools.fetchPoolStats)
 
   const risksPathname = getPath(useParams<UrlParams>(), `/disclaimer`)
@@ -41,7 +43,7 @@ const PoolStats = ({ curve, routerParams, poolAlert, poolData, poolDataCacheOrAp
       <MainStatsContainer flex flexColumn>
         <MainStatsWrapper grid>
           <Box grid gridRowGap={3}>
-            <CurrencyReserves rChainId={rChainId} rPoolId={rPoolId} tvl={tvl} tokensMapper={tokensMapper} />
+            <CurrencyReserves rChainId={rChainId} rPoolId={poolId ?? ''} tvl={tvl} tokensMapper={tokensMapper} />
             {poolData && <RewardsComp chainId={rChainId} poolData={poolData} rewardsApy={rewardsApy} />}
             <Box grid gridRowGap={2}>
               {poolAlert && !poolAlert.isDisableDeposit && !poolAlert.isInformationOnlyAndShowInForm && (

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

@@ -2,6 +2,7 @@ import { useMemo } from 'react'
 import { styled } from 'styled-components'
 import type { TransferProps } from '@/dex/components/PagePool/types'
 import PoolRewardsCrv from '@/dex/components/PoolRewardsCrv'
+import { usePoolIdByAddressOrId } from '@/dex/hooks/usePoolIdByAddressOrId'
 import { getUserPoolActiveKey } from '@/dex/store/createUserSlice'
 import useStore from '@/dex/store/useStore'
 import Box from '@ui/Box'
@@ -28,9 +29,10 @@ const MySharesStats = ({
   TransferProps,
   'curve' | 'poolData' | 'poolDataCacheOrApi' | 'routerParams' | 'tokensMapper' | 'userPoolBalances'
 >) => {
-  const { rChainId, rPoolId } = routerParams
-  const userPoolActiveKey = curve && rPoolId ? getUserPoolActiveKey(curve, rPoolId) : ''
-  const rewardsApy = useStore((state) => state.pools.rewardsApyMapper[rChainId]?.[rPoolId])
+  const { rChainId, rPoolIdOrAddress } = routerParams
+  const poolId = usePoolIdByAddressOrId({ chainId: rChainId, poolIdOrAddress: rPoolIdOrAddress })
+  const userPoolActiveKey = curve && poolId ? getUserPoolActiveKey(curve, poolId) : ''
+  const rewardsApy = useStore((state) => state.pools.rewardsApyMapper[rChainId]?.[poolId ?? ''])
   const userCrvApy = useStore((state) => state.user.userCrvApy[userPoolActiveKey])
   const userLiquidityUsd = useStore((state) => state.user.userLiquidityUsd[userPoolActiveKey])
   const userShare = useStore((state) => state.user.userShare[userPoolActiveKey])