feat: nested pool display

packages/lib/modules/pool/PoolDetail/PoolComposition.tsx

@@ -17,17 +17,18 @@ import { usePool } from '../PoolProvider'
 import { Address } from 'viem'
 import { GqlChain, GqlPoolTokenDetail } from '@repo/lib/shared/services/api/generated/graphql'
 import { useCurrency } from '@repo/lib/shared/hooks/useCurrency'
-import { fNum } from '@repo/lib/shared/utils/numbers'
+import { bn, fNum } from '@repo/lib/shared/utils/numbers'
 import { NoisyCard } from '@repo/lib/shared/components/containers/NoisyCard'
 import { PoolZenGarden } from '@repo/lib/shared/components/zen/ZenGarden'
 import { PoolWeightChart } from './PoolWeightCharts/PoolWeightChart'
 import { useBreakpoints } from '@repo/lib/shared/hooks/useBreakpoints'
 import TokenRow from '@repo/lib/modules/tokens/TokenRow/TokenRow'
 import { useTokens } from '@repo/lib/modules/tokens/TokensProvider'
-import { getPoolDisplayTokens } from '../pool.utils'
+import { getPoolDisplayTokens, getPoolDisplayTokensWithPossibleNestedPools } from '../pool.utils'
 import { PoolTypeTag } from './PoolTypeTag'
 import { isBoosted } from '../pool.helpers'
 import { Protocol, protocolDescriptions } from '@repo/lib/modules/protocols/useProtocols'
+import { useLayoutEffect, useRef, useState } from 'react'
 
 type CardContentProps = {
   totalLiquidity: string
@@ -44,12 +45,12 @@ function CardContent({ totalLiquidity, displayTokens, chain }: CardContentProps)
     <VStack spacing="md" width="full">
       <HStack justifyContent="space-between" width="full">
         <VStack alignItems="flex-start">
-          <Heading fontWeight="bold" size={{ base: 'h5', md: 'h6' }}>
+          <Heading fontWeight="bold" size="h5">
             Total liquidity
           </Heading>
         </VStack>
         <VStack alignItems="flex-end">
-          <Heading fontWeight="bold" size={{ base: 'h5', md: 'h6' }}>
+          <Heading fontWeight="bold" size="h5">
             {totalLiquidity ? (
               toCurrency(totalLiquidity, { abbreviated: false })
             ) : (
@@ -61,21 +62,51 @@ function CardContent({ totalLiquidity, displayTokens, chain }: CardContentProps)
       <Divider />
       <VStack spacing="md" width="full">
         {displayTokens.map(poolToken => {
+          const actualWeight = calcWeightForBalance(
+            poolToken.address,
+            poolToken.balance,
+            totalLiquidity,
+            chain
+          )
           return (
-            <TokenRow
-              actualWeight={calcWeightForBalance(
-                poolToken.address,
-                poolToken.balance,
-                totalLiquidity,
-                chain
+            <VStack key={`pool-${poolToken.address}`} w="full">
+              <TokenRow
+                actualWeight={actualWeight}
+                address={poolToken.address as Address}
+                chain={chain}
+                pool={pool}
+                targetWeight={poolToken.weight || undefined}
+                value={poolToken.balance}
+                {...(poolToken.hasNestedPool && {
+                  isNestedBpt: true,
+                })}
+              />
+              {poolToken.hasNestedPool && poolToken.nestedPool && (
+                <VStack pl="8" w="full">
+                  {poolToken.nestedPool.tokens.map(nestedPoolToken => {
+                    const calculatedWeight = bn(nestedPoolToken.balanceUSD).div(
+                      bn(poolToken.balanceUSD)
+                    )
+                    return (
+                      <TokenRow
+                        actualWeight={bn(actualWeight).times(calculatedWeight).toString()}
+                        address={nestedPoolToken.address as Address}
+                        chain={chain}
+                        iconSize={35}
+                        isNestedPoolToken
+                        key={`nested-pool-${nestedPoolToken.address}`}
+                        targetWeight={
+                          nestedPoolToken.weight && poolToken.weight
+                            ? bn(nestedPoolToken.weight).times(poolToken.weight).toString()
+                            : undefined
+                        }
+                        value={nestedPoolToken.balance}
+                      />
+                    )
+                  })}
+                </VStack>
               )}
-              address={poolToken.address as Address}
-              chain={chain}
-              key={`my-liquidity-token-${poolToken.address}`}
-              pool={pool}
-              targetWeight={poolToken.weight || undefined}
-              value={poolToken.balance}
-            />
+            </VStack>
           )
         })}
       </VStack>
@@ -87,12 +118,21 @@ export function PoolComposition() {
   const { pool, chain, isLoading } = usePool()
   const { isMobile } = useBreakpoints()
   const { calcTotalUsdValue } = useTokens()
+  const cardRef = useRef<HTMLDivElement | null>(null)
+  const [height, setHeight] = useState(0)
 
   const displayTokens = getPoolDisplayTokens(pool)
   const totalLiquidity = calcTotalUsdValue(displayTokens, chain)
 
+  useLayoutEffect(() => {
+    if (cardRef.current) {
+      setHeight(cardRef.current.offsetHeight)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
   return (
-    <Card>
+    <Card ref={cardRef}>
       <Stack
         direction={{ base: 'column', md: 'row' }}
         justifyContent="stretch"
@@ -101,7 +141,7 @@ export function PoolComposition() {
       >
         <VStack align="flex-start" spacing="md" w="full">
           <HStack justifyContent="space-between" w="full">
-            <Heading fontWeight="bold" size={{ base: 'h4', md: 'h5' }}>
+            <Heading fontWeight="bold" size="h4">
               Pool composition
             </Heading>
             <PoolTypeTag pool={pool} />
@@ -125,16 +165,21 @@ export function PoolComposition() {
           </Text>
         </VStack>
         <NoisyCard
-          cardProps={{ position: 'relative', overflow: 'hidden', height: ['300px', '400px'] }}
+          cardProps={{
+            position: 'relative',
+            overflow: 'hidden',
+            height: ['300px', `${height - 35}px`],
+          }}
           contentProps={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}
         >
-          <PoolZenGarden poolType={pool.type} sizePx={isMobile ? '300px' : '400px'} />
+          <PoolZenGarden poolType={pool.type} sizePx={isMobile ? '300px' : `${height - 35}px`} />
           {isLoading ? (
             <Skeleton h="full" w="full" />
           ) : (
             <PoolWeightChart
               chain={chain}
-              displayTokens={displayTokens}
+              displayTokens={getPoolDisplayTokensWithPossibleNestedPools(pool)}
+              hasLegend
               totalLiquidity={totalLiquidity}
             />
           )}

packages/lib/modules/pool/PoolDetail/PoolInfo/PoolAttributes/useFormattedPoolAttributes.tsx

@@ -7,13 +7,15 @@ import { DELEGATE_OWNER } from '@repo/lib/config/app.config'
 import { zeroAddress } from 'viem'
 import { abbreviateAddress } from '@repo/lib/shared/utils/addresses'
 import { fNum } from '@repo/lib/shared/utils/numbers'
-import { bptUsdValue, isBoosted, isCowAmmPool, isStable } from '../../../pool.helpers'
+import { isBoosted, isCowAmmPool, isStable } from '../../../pool.helpers'
 import { useCurrency } from '@repo/lib/shared/hooks/useCurrency'
 import { getPoolTypeLabel, shouldHideSwapFee } from '../../../pool.utils'
+import { useTokens } from '@repo/lib/modules/tokens/TokensProvider'
 
 export function useFormattedPoolAttributes() {
   const { pool } = usePool()
   const { toCurrency } = useCurrency()
+  const { usdValueForBpt } = useTokens()
 
   const poolOwnerData = useMemo(() => {
     if (!pool) return
@@ -97,7 +99,7 @@ export function useFormattedPoolAttributes() {
       },
       {
         title: 'LP token price',
-        value: toCurrency(bptUsdValue(pool, '1')),
+        value: toCurrency(usdValueForBpt(pool.address, pool.chain, '1')),
       },
     ]
     if (shouldHideSwapFee(pool?.type)) {

packages/lib/modules/pool/PoolDetail/PoolInfo/PoolRisks/usePoolRisks.ts

@@ -1,5 +1,12 @@
 import { GqlChain, GqlPoolElement } from '@repo/lib/shared/services/api/generated/graphql'
-import { isMetaStable, isStable, isWeighted, isGyro, isBoosted } from '../../../pool.helpers'
+import {
+  isMetaStable,
+  isStable,
+  isWeighted,
+  isGyro,
+  isBoosted,
+  hasNestedPools,
+} from '../../../pool.helpers'
 import { zeroAddress } from 'viem'
 
 export enum RiskKey {
@@ -33,6 +40,7 @@ export enum RiskKey {
   Composability = 'composability-risk',
   RateProvider = 'rate-provider-risk',
   RateProviderBridge = 'rate-provider-bridges',
+  NestedPool = 'nested-pools',
 }
 
 export const RISK_TITLES: Partial<Record<RiskKey, string>> = {
@@ -54,6 +62,7 @@ export const RISK_TITLES: Partial<Record<RiskKey, string>> = {
   [RiskKey.Composability]: 'Composability risks',
   [RiskKey.RateProvider]: 'Rate provider risks',
   [RiskKey.RateProviderBridge]: 'Rate provider cross-chain bridge risks: Layer Zero',
+  [RiskKey.NestedPool]: 'Nested pool risks',
 }
 
 export type Risk = {
@@ -87,6 +96,7 @@ const gnosisRisks = getLink(RiskKey.Gnosis)
 const baseRisks = getLink(RiskKey.Base)
 const avalancheRisks = getLink(RiskKey.Avalanche)
 const mutableRisks = getLink(RiskKey.Mutable)
+const nestedPoolRisks = getLink(RiskKey.NestedPool)
 
 export function getPoolRisks(pool: GqlPoolElement): Risk[] {
   const result: Risk[] = []
@@ -104,6 +114,7 @@ export function getPoolRisks(pool: GqlPoolElement): Risk[] {
   if (pool.chain === GqlChain.Gnosis) result.push(gnosisRisks)
   if (pool.chain === GqlChain.Base) result.push(baseRisks)
   if (pool.chain === GqlChain.Avalanche) result.push(avalancheRisks)
+  if (hasNestedPools(pool)) result.push(nestedPoolRisks)
 
   if (hasOwner(pool)) result.push(mutableRisks)
 

packages/lib/modules/pool/PoolDetail/PoolTypeTag.tsx

@@ -62,6 +62,7 @@ function getPoolTypeLabel(pool: Pool) {
     case GqlPoolType.Stable:
     case GqlPoolType.PhantomStable:
     case GqlPoolType.ComposableStable:
+    case GqlPoolType.MetaStable:
       return <Text {...textProps}>Stable</Text>
 
     case GqlPoolType.Fx: