refactor: PoolCore, remove pool.displayTokens, new display token functions

apps/beets-frontend-v3/app/(app)/pools/[chain]/[variant]/[id]/layout.tsx

@@ -1,11 +1,6 @@
 /* eslint-disable max-len */
-import { FetchPoolProps } from '@repo/lib/modules/pool/pool.types'
-import {
-  ChainSlug,
-  getChainSlug,
-  getPoolDisplayTokens,
-  getPoolTypeLabel,
-} from '@repo/lib/modules/pool/pool.utils'
+import { FetchPoolProps, PoolCore } from '@repo/lib/modules/pool/pool.types'
+import { ChainSlug, getChainSlug, getPoolTypeLabel } from '@repo/lib/modules/pool/pool.utils'
 import { PropsWithChildren, Suspense } from 'react'
 import { PoolDetailSkeleton } from '@repo/lib/modules/pool/PoolDetail/PoolDetailSkeleton'
 import { getApolloServerClient } from '@repo/lib/shared/services/api/apollo-server.client'
@@ -15,6 +10,7 @@ import { PoolProvider } from '@repo/lib/modules/pool/PoolProvider'
 import { arrayToSentence } from '@repo/lib/shared/utils/strings'
 import { ensureError } from '@repo/lib/shared/utils/errors'
 import { notFound } from 'next/navigation'
+import { getHeaderDisplayTokens } from '@repo/lib/modules/pool/pool.tokens.display'
 
 type Props = PropsWithChildren<{
   params: Omit<FetchPoolProps, 'chain'> & { chain: ChainSlug }
@@ -48,7 +44,7 @@ export async function generateMetadata({
   const pool = data?.pool
   if (!pool) return {}
 
-  const displayTokens = getPoolDisplayTokens(pool)
+  const displayTokens = getHeaderDisplayTokens(pool as PoolCore)
   const poolTokenString = arrayToSentence(displayTokens.map(token => token.symbol))
 
   return {

apps/beets-frontend-v3/app/(app)/portfolio/[chain]/page.tsx

@@ -3,7 +3,7 @@ import { PoolName } from '@repo/lib/modules/pool/PoolName'
 import { Pool } from '@repo/lib/modules/pool/PoolProvider'
 import { ClaimModal } from '@repo/lib/modules/pool/actions/claim/ClaimModal'
 import { ClaimProvider } from '@repo/lib/modules/pool/actions/claim/ClaimProvider'
-import { ChainSlug, getChainSlug, getPoolDisplayTokens } from '@repo/lib/modules/pool/pool.utils'
+import { ChainSlug, getChainSlug } from '@repo/lib/modules/pool/pool.utils'
 // eslint-disable-next-line max-len
 import { ClaimNetworkPoolsLayout } from '@repo/lib/modules/portfolio/PortfolioClaim/ClaimNetworkPools/ClaimNetworkPoolsLayout'
 import { usePortfolio } from '@repo/lib/modules/portfolio/PortfolioProvider'
@@ -15,6 +15,8 @@ import { Button, Card, HStack, Heading, Skeleton, Stack, Text, VStack } from '@c
 import { capitalize } from 'lodash'
 import { useParams } from 'next/navigation'
 import { useState } from 'react'
+import { getHeaderDisplayTokens } from '@repo/lib/modules/pool/pool.tokens.display'
+import { PoolCore } from '@repo/lib/modules/pool/pool.types'
 
 export default function NetworkClaim() {
   const { toCurrency } = useCurrency()
@@ -76,7 +78,7 @@ export default function NetworkClaim() {
                         <TokenIconStack
                           chain={pool.chain}
                           size={36}
-                          tokens={getPoolDisplayTokens(pool)}
+                          tokens={getHeaderDisplayTokens(pool as PoolCore)}
                         />
                         {hasMultipleClaims && (
                           <Button

apps/frontend-v3/app/(app)/pools/[chain]/[variant]/[id]/layout.tsx

@@ -1,11 +1,6 @@
 /* eslint-disable max-len */
-import { FetchPoolProps } from '@repo/lib/modules/pool/pool.types'
-import {
-  ChainSlug,
-  getChainSlug,
-  getPoolDisplayTokens,
-  getPoolTypeLabel,
-} from '@repo/lib/modules/pool/pool.utils'
+import { FetchPoolProps, PoolCore } from '@repo/lib/modules/pool/pool.types'
+import { ChainSlug, getChainSlug, getPoolTypeLabel } from '@repo/lib/modules/pool/pool.utils'
 import { PropsWithChildren, Suspense } from 'react'
 import { PoolDetailSkeleton } from '@repo/lib/modules/pool/PoolDetail/PoolDetailSkeleton'
 import { getApolloServerClient } from '@repo/lib/shared/services/api/apollo-server.client'
@@ -15,6 +10,7 @@ import { PoolProvider } from '@repo/lib/modules/pool/PoolProvider'
 import { arrayToSentence } from '@repo/lib/shared/utils/strings'
 import { ensureError } from '@repo/lib/shared/utils/errors'
 import { notFound } from 'next/navigation'
+import { getHeaderDisplayTokens } from '@repo/lib/modules/pool/pool.tokens.display'
 
 type Props = PropsWithChildren<{
   params: Omit<FetchPoolProps, 'chain'> & { chain: ChainSlug }
@@ -48,7 +44,7 @@ export async function generateMetadata({
   const pool = data?.pool
   if (!pool) return {}
 
-  const displayTokens = getPoolDisplayTokens(pool)
+  const displayTokens = getHeaderDisplayTokens(pool as PoolCore)
   const poolTokenString = arrayToSentence(displayTokens.map(token => token.symbol))
 
   return {

apps/frontend-v3/app/(app)/portfolio/[chain]/page.tsx

@@ -3,7 +3,7 @@ import { PoolName } from '@repo/lib/modules/pool/PoolName'
 import { Pool } from '@repo/lib/modules/pool/PoolProvider'
 import { ClaimModal } from '@repo/lib/modules/pool/actions/claim/ClaimModal'
 import { ClaimProvider } from '@repo/lib/modules/pool/actions/claim/ClaimProvider'
-import { ChainSlug, getChainSlug, getPoolDisplayTokens } from '@repo/lib/modules/pool/pool.utils'
+import { ChainSlug, getChainSlug } from '@repo/lib/modules/pool/pool.utils'
 // eslint-disable-next-line max-len
 import { ClaimNetworkPoolsLayout } from '@repo/lib/modules/portfolio/PortfolioClaim/ClaimNetworkPools/ClaimNetworkPoolsLayout'
 import { usePortfolio } from '@repo/lib/modules/portfolio/PortfolioProvider'
@@ -15,6 +15,8 @@ import { Button, Card, HStack, Heading, Skeleton, Stack, Text, VStack } from '@c
 import { capitalize } from 'lodash'
 import { useParams } from 'next/navigation'
 import { useState } from 'react'
+import { getHeaderDisplayTokens } from '@repo/lib/modules/pool/pool.tokens.display'
+import { PoolCore } from '@repo/lib/modules/pool/pool.types'
 
 export default function NetworkClaim() {
   const { toCurrency } = useCurrency()
@@ -75,7 +77,7 @@ export default function NetworkClaim() {
                         <TokenIconStack
                           chain={pool.chain}
                           size={36}
-                          tokens={getPoolDisplayTokens(pool)}
+                          tokens={getHeaderDisplayTokens(pool as PoolCore)}
                         />
                         {hasMultipleClaims && (
                           <Button

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

@@ -13,26 +13,30 @@ import {
   Text,
   VStack,
 } from '@chakra-ui/react'
-import { Pool, 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 { bn, fNum } from '@repo/lib/shared/utils/numbers'
+import TokenRow from '@repo/lib/modules/tokens/TokenRow/TokenRow'
+import { useTokens } from '@repo/lib/modules/tokens/TokensProvider'
 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, getPoolDisplayTokensWithPossibleNestedPools } from '../pool.utils'
-import { PoolTypeTag } from './PoolTypeTag'
-import { isBoosted } from '../pool.helpers'
+import { useCurrency } from '@repo/lib/shared/hooks/useCurrency'
+import { GqlChain } from '@repo/lib/shared/services/api/generated/graphql'
+import { bn, fNum } from '@repo/lib/shared/utils/numbers'
 import { useLayoutEffect, useRef, useState } from 'react'
+import { Address } from 'viem'
 import { usePoolsMetadata } from '../metadata/PoolsMetadataProvider'
+import { isBoosted } from '../pool.helpers'
+import { ApiTokenWithBalance, PoolCore } from '../pool.types'
+import { Pool, usePool } from '../PoolProvider'
+import { PoolTypeTag } from './PoolTypeTag'
+import { PoolWeightChart } from './PoolWeightCharts/PoolWeightChart'
+import {
+  getCompositionDisplayTokens,
+  getHeaderTokensWithPossibleNestedTokensWithBalance,
+} from '../pool.tokens.display'
 
 type CardContentProps = {
   totalLiquidity: string
-  displayTokens: GqlPoolTokenDetail[]
+  displayTokens: ApiTokenWithBalance[]
   chain: GqlChain
   pool: Pool
 }
@@ -122,7 +126,7 @@ export function PoolComposition() {
   const [height, setHeight] = useState(0)
   const { getErc4626Metadata } = usePoolsMetadata()
 
-  const displayTokens = getPoolDisplayTokens(pool)
+  const displayTokens = getCompositionDisplayTokens(pool as PoolCore)
   const totalLiquidity = calcTotalUsdValue(displayTokens, chain)
   const erc4626Metadata = getErc4626Metadata(pool)
 
@@ -181,7 +185,7 @@ export function PoolComposition() {
           ) : (
             <PoolWeightChart
               chain={chain}
-              displayTokens={getPoolDisplayTokensWithPossibleNestedPools(pool)}
+              displayTokens={getHeaderTokensWithPossibleNestedTokensWithBalance(pool as PoolCore)}
               hasLegend
               totalLiquidity={totalLiquidity}
             />

packages/lib/modules/pool/PoolDetail/PoolHeader/PoolMetaBadges.tsx

@@ -1,16 +1,16 @@
 'use client'
 
 import { Badge, Flex } from '@chakra-ui/react'
-import { usePool } from '../../PoolProvider'
-import Image from 'next/image'
-import { PoolListTokenPills } from '../../PoolList/PoolListTokenPills'
-import { getPoolDisplayTokens, shouldHideSwapFee } from '../../pool.utils'
 import { getChainShortName } from '@repo/lib/config/app.config'
-import { PoolTypeTag } from '../PoolTypeTag'
+import Image from 'next/image'
 import { PoolVersionTag } from '../../PoolList/PoolListTable/PoolVersionTag'
+import { PoolListTokenPills } from '../../PoolList/PoolListTokenPills'
+import { usePool } from '../../PoolProvider'
+import { PoolCore } from '../../pool.types'
+import { shouldHideSwapFee } from '../../pool.utils'
 import { PoolHookTag } from '../PoolHookTag'
+import { PoolTypeTag } from '../PoolTypeTag'
 import { PoolSwapFees } from './PoolSwapFees'
-import { GqlPoolTokenDetail } from '@repo/lib/shared/services/api/generated/graphql'
 
 export default function PoolMetaBadges() {
   const { pool, chain } = usePool()
@@ -34,20 +34,7 @@ export default function PoolMetaBadges() {
           width={20}
         />
       </Badge>
-      <PoolListTokenPills
-        pool={{
-          displayTokens: getPoolDisplayTokens(pool),
-          type: pool.type,
-          chain: pool.chain,
-          poolTokens: pool.poolTokens as GqlPoolTokenDetail[], // fix: poolTokens are incompatible
-          address: pool.address,
-          hasErc4626: pool.hasErc4626,
-          hasAnyAllowedBuffer: pool.hasAnyAllowedBuffer,
-          protocolVersion: pool.protocolVersion,
-        }}
-        px="sm"
-        py="2"
-      />
+      <PoolListTokenPills pool={pool as PoolCore} px="sm" py="2" />
       <PoolVersionTag isSmall pool={pool} />
       <PoolTypeTag pool={pool} />
       <PoolHookTag pool={pool} />

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

@@ -25,7 +25,6 @@ import { useCurrency } from '@repo/lib/shared/hooks/useCurrency'
 import { keyBy } from 'lodash'
 import {
   getAuraPoolLink,
-  getPoolDisplayTokens,
   getProportionalExitAmountsFromScaledBptIn,
   getXavePoolLink,
 } from '../pool.utils'
@@ -54,6 +53,8 @@ import {
   PartnerRedirectModal,
   RedirectPartner,
 } from '@repo/lib/shared/components/modals/PartnerRedirectModal'
+import { PoolCore } from '../pool.types'
+import { getHeaderTokensWithPossibleNestedTokensWithBalance } from '../pool.tokens.display'
 
 function getTabs(isVeBalPool: boolean) {
   return [
@@ -257,7 +258,7 @@ export default function PoolMyLiquidity() {
     }
   }
 
-  const displayTokens = getPoolDisplayTokens(pool)
+  const displayTokens = getHeaderTokensWithPossibleNestedTokensWithBalance(pool as PoolCore)
 
   return (
     <Card h="fit-content" ref={myLiquiditySectionRef}>

packages/lib/modules/pool/PoolDetail/PoolWeightCharts/FeaturedPoolWeightChart.tsx

@@ -1,20 +1,20 @@
 'use client'
 
-import { GqlChain } from '@repo/lib/shared/services/api/generated/graphql'
-import { GqlPoolTokenDetail } from '@repo/lib/shared/services/api/generated/graphql'
+import { Box, VStack, useTheme } from '@chakra-ui/react'
 import { NoisyCard } from '@repo/lib/shared/components/containers/NoisyCard'
+import { GqlChain } from '@repo/lib/shared/services/api/generated/graphql'
 import { useThemeColorMode } from '@repo/lib/shared/services/chakra/useThemeColorMode'
-import { Box, VStack, useTheme } from '@chakra-ui/react'
+import ReactECharts from 'echarts-for-react'
 import EChartsReactCore from 'echarts-for-react/lib/core'
+import * as echarts from 'echarts/core'
 import { motion } from 'framer-motion'
-import { useRef, useMemo } from 'react'
-import PoolWeightChartLegend from './PoolWeightChartLegend'
 import Image from 'next/image'
-import ReactECharts from 'echarts-for-react'
-import * as echarts from 'echarts/core'
+import { useMemo, useRef } from 'react'
+import { ApiToken } from '../../pool.types'
+import PoolWeightChartLegend from './PoolWeightChartLegend'
 
 interface PoolWeightChartProps {
-  displayTokens: GqlPoolTokenDetail[]
+  displayTokens: ApiToken[]
   chain: GqlChain
   hasLegend?: boolean
   isSmall?: boolean

packages/lib/modules/pool/PoolDetail/PoolWeightCharts/PoolWeightChart.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { GqlChain, GqlPoolTokenDetail } from '@repo/lib/shared/services/api/generated/graphql'
+import { GqlChain } from '@repo/lib/shared/services/api/generated/graphql'
 import { NoisyCard } from '@repo/lib/shared/components/containers/NoisyCard'
 import { useThemeColorMode } from '@repo/lib/shared/services/chakra/useThemeColorMode'
 import { Box, VStack, useTheme } from '@chakra-ui/react'
@@ -13,9 +13,10 @@ import ReactECharts from 'echarts-for-react'
 import * as echarts from 'echarts/core'
 import { useTokens } from '@repo/lib/modules/tokens/TokensProvider'
 import { fNum } from '@repo/lib/shared/utils/numbers'
+import { ApiTokenWithBalance } from '../../pool.types'
 
 export interface PoolWeightChartProps {
-  displayTokens: GqlPoolTokenDetail[]
+  displayTokens: ApiTokenWithBalance[]
   chain: GqlChain
   totalLiquidity: string
   hasLegend?: boolean
@@ -30,7 +31,7 @@ export interface ChartSizeValues {
   haloTop: string
   haloLeft: string
   haloWidth: string
-  haloHeigth: string
+  haloHeight: string
 }
 
 export interface PoolWeightChartColorDef {
@@ -85,7 +86,7 @@ const smallSize: ChartSizeValues = {
   haloTop: '40%',
   haloLeft: '55px',
   haloWidth: '40px',
-  haloHeigth: '40px',
+  haloHeight: '40px',
 }
 
 const normalSize: ChartSizeValues = {
@@ -95,7 +96,7 @@ const normalSize: ChartSizeValues = {
   haloTop: '49%',
   haloLeft: '95px',
   haloWidth: '60px',
-  haloHeigth: '60px',
+  haloHeight: '60px',
 }
 
 function OuterSymbolCircle({ opacity, isSmall }: { opacity: string; isSmall: boolean }) {

packages/lib/modules/pool/PoolDetail/PoolWeightCharts/PoolWeightChartLegend.tsx

@@ -1,12 +1,12 @@
 import { Box, HStack, Text } from '@chakra-ui/react'
+import { ApiToken } from '../../pool.types'
 import { PoolWeightChartColorDef } from './PoolWeightChart'
-import { GqlPoolTokenDetail } from '@repo/lib/shared/services/api/generated/graphql'
 
 export default function PoolWeightChartLegend({
   displayTokens,
   colors = [],
 }: {
-  displayTokens: GqlPoolTokenDetail[]
+  displayTokens: ApiToken[]
   colors?: PoolWeightChartColorDef[]
 }) {
   return (

packages/lib/modules/pool/PoolDetail/PoolWeightCharts/StakedBalanceDistributionChart.tsx

@@ -18,7 +18,7 @@ const smallSize: ChartSizeValues = {
   haloTop: '40%',
   haloLeft: '55px',
   haloWidth: '40px',
-  haloHeigth: '40px',
+  haloHeight: '40px',
 }
 
 const normalSize: ChartSizeValues = {
@@ -28,7 +28,7 @@ const normalSize: ChartSizeValues = {
   haloTop: '49%',
   haloLeft: '95px',
   haloWidth: '60px',
-  haloHeigth: '60px',
+  haloHeight: '60px',
 }
 
 export default function StakedBalanceDistributionChart({