refactor: User pool balances

lib/modules/pool/PoolList/PoolListCards/PoolListCard.tsx

@@ -1,5 +1,5 @@
 import { Card, HStack, VStack, Text, Grid, GridItem } from '@chakra-ui/react'
-import { DecoratedPoolListItem, poolTypeHash } from '../../pool.types'
+import { PoolListItem, poolTypeHash } from '../../pool.types'
 import { fNum } from '@/lib/shared/utils/numbers'
 import AprTooltip from '@/lib/shared/components/tooltips/apr-tooltip/AprTooltip'
 import { memo } from 'react'
@@ -9,15 +9,12 @@ import { usePoolListQueryState } from '../usePoolListQueryState'
 import { TokenIconStack } from '@/lib/modules/tokens/TokenIconStack'
 
 interface Props {
-  pool: DecoratedPoolListItem
-  cardClickHandler?: (event: React.MouseEvent<HTMLElement>, pool: DecoratedPoolListItem) => void
-  cardMouseEnterHandler?: (
-    event: React.MouseEvent<HTMLElement>,
-    pool: DecoratedPoolListItem
-  ) => void
+  pool: PoolListItem
+  cardClickHandler?: (event: React.MouseEvent<HTMLElement>, pool: PoolListItem) => void
+  cardMouseEnterHandler?: (event: React.MouseEvent<HTMLElement>, pool: PoolListItem) => void
 }
 
-function PoolNameLabel({ pool }: { pool: DecoratedPoolListItem }) {
+function PoolNameLabel({ pool }: { pool: PoolListItem }) {
   if (pool) {
     const displayTokens = pool.displayTokens
     return (
@@ -108,7 +105,7 @@ export function PoolListCard({ pool, cardClickHandler, cardMouseEnterHandler }:
                     My Liquidity:
                   </Text>
                   <Text fontWeight="bold" fontSize="1rem">
-                    {toCurrency(pool.userBalance?.totalBalanceUsd || 0, { abbreviated: false })}
+                    {toCurrency(pool.userBalance?.totalBalanceUsd || '0', { abbreviated: false })}
                   </Text>
                 </VStack>
               </Card>

lib/modules/pool/PoolList/PoolListCards/PoolListCards.tsx

@@ -5,12 +5,12 @@ import { PoolListCard } from './PoolListCard'
 import { Pagination } from '@/lib/shared/components/pagination/Pagination'
 import { usePoolListQueryState } from '../usePoolListQueryState'
 import { getPaginationProps } from '@/lib/shared/components/pagination/getPaginationProps'
-import { DecoratedPoolListItem } from '../../pool.types'
 import { getPoolPath } from '../../pool.utils'
 import { useRouter } from 'next/navigation'
+import { PoolListItem } from '../../pool.types'
 
 interface Props {
-  pools: DecoratedPoolListItem[]
+  pools: PoolListItem[]
   count: number
   loading: boolean
 }
@@ -20,7 +20,7 @@ export function PoolListCards({ pools, count, loading }: Props) {
   const { pagination, setPagination } = usePoolListQueryState()
   const paginationProps = getPaginationProps(count, pagination, setPagination)
   const showPagination = pools.length && count && count > pagination.pageSize
-  const cardClickHandler = (event: React.MouseEvent<HTMLElement>, pool: DecoratedPoolListItem) => {
+  const cardClickHandler = (event: React.MouseEvent<HTMLElement>, pool: PoolListItem) => {
     const poolPath = getPoolPath({ id: pool.id, chain: pool.chain })
 
     if (event.ctrlKey || event.metaKey) {
@@ -32,10 +32,7 @@ export function PoolListCards({ pools, count, loading }: Props) {
 
   // Prefetch pool page on card hover, otherwise there is a significant delay
   // between clicking the card and the pool page loading.
-  const cardMouseEnterHandler = (
-    event: React.MouseEvent<HTMLElement>,
-    pool: DecoratedPoolListItem
-  ) => {
+  const cardMouseEnterHandler = (event: React.MouseEvent<HTMLElement>, pool: PoolListItem) => {
     const poolPath = getPoolPath({ id: pool.id, chain: pool.chain })
     router.prefetch(poolPath)
   }

lib/modules/pool/PoolList/PoolListTable/PoolListTable.tsx

@@ -7,10 +7,10 @@ import { PoolListTableHeader } from './PoolListTableHeader'
 import { PoolListTableRow } from './PoolListTableRow'
 import { getPaginationProps } from '@/lib/shared/components/pagination/getPaginationProps'
 import { useBreakpoints } from '@/lib/shared/hooks/useBreakpoints'
-import { DecoratedPoolListItem } from '../../pool.types'
+import { PoolListItem } from '../../pool.types'
 
 interface Props {
-  pools: DecoratedPoolListItem[]
+  pools: PoolListItem[]
   count: number
   loading: boolean
 }
@@ -35,7 +35,7 @@ export function PoolListTable({ pools, count, loading }: Props) {
         items={pools}
         loading={loading}
         renderTableHeader={() => <PoolListTableHeader {...rowProps} />}
-        renderTableRow={(item: DecoratedPoolListItem, index) => {
+        renderTableRow={(item: PoolListItem, index) => {
           return <PoolListTableRow keyValue={index} pool={item} {...rowProps} />
         }}
         showPagination={showPagination}

lib/modules/pool/PoolList/PoolListTable/PoolListTableRow.tsx

@@ -1,16 +1,16 @@
 import { Box, Grid, GridItem, GridProps, Text } from '@chakra-ui/react'
 import Link from 'next/link'
 import { getPoolPath } from '../../pool.utils'
-import { DecoratedPoolListItem } from '../../pool.types'
 import AprTooltip from '@/lib/shared/components/tooltips/apr-tooltip/AprTooltip'
 import { memo } from 'react'
 import { PoolListTokensTag } from '../PoolListTokensTag'
 import { NetworkIcon } from '@/lib/shared/components/icons/NetworkIcon'
 import { useCurrency } from '@/lib/shared/hooks/useCurrency'
 import { usePoolListQueryState } from '../usePoolListQueryState'
+import { PoolListItem } from '../../pool.types'
 
 interface Props extends GridProps {
-  pool: DecoratedPoolListItem
+  pool: PoolListItem
   keyValue: number
 }
 
@@ -31,7 +31,7 @@ export function PoolListTableRow({ pool, keyValue, ...rest }: Props) {
           {userAddress && (
             <GridItem>
               <Text textAlign="right">
-                {toCurrency(pool.userBalance?.totalBalanceUsd || 0, { abbreviated: false })}
+                {toCurrency(pool.userBalance?.totalBalanceUsd || '0', { abbreviated: false })}
               </Text>
             </GridItem>
           )}

lib/modules/pool/PoolList/usePoolList.tsx

@@ -10,7 +10,6 @@ import { useQuery } from '@apollo/experimental-nextjs-app-support/ssr'
 import { usePoolListQueryState } from './usePoolListQueryState'
 import { useMandatoryContext } from '@/lib/shared/utils/contexts'
 import { useSeedApolloCache } from '@/lib/shared/hooks/useSeedApolloCache'
-import { DecoratedPoolListItem } from '../pool.types'
 
 export function _usePoolList() {
   const { queryVariables } = usePoolListQueryState()
@@ -20,24 +19,7 @@ export function _usePoolList() {
     { variables: queryVariables, notifyOnNetworkStatusChange: true }
   )
 
-  let pools: DecoratedPoolListItem[]
-  pools = loading && previousData ? previousData.pools : data?.pools || []
-
-  pools = pools.map(pool => {
-    if (pool.userBalance) {
-      const bptPrice =
-        parseFloat(pool.dynamicData.totalLiquidity) / parseFloat(pool.dynamicData.totalShares)
-      return {
-        ...pool,
-        userBalance: {
-          ...pool.userBalance,
-          totalBalanceUsd: `${bptPrice * parseFloat(pool.userBalance.totalBalance)}`,
-        },
-      }
-    } else {
-      return pool
-    }
-  })
+  const pools = loading && previousData ? previousData.pools : data?.pools || []
 
   return {
     pools,

lib/modules/pool/pool.types.ts

@@ -6,9 +6,7 @@ import {
   GqlPoolMinimalType,
   GqlPoolOrderBy,
   GqlPoolOrderDirection,
-  GqlPoolUserBalance,
 } from '@/lib/shared/services/api/generated/graphql'
-import { HumanAmount } from '@balancer/sdk'
 import {
   parseAsArrayOf,
   parseAsInteger,
@@ -20,13 +18,6 @@ export type PoolList = GetPoolsQuery['pools']
 
 export type PoolListItem = PoolList[0]
 
-interface GqlPoolUserBalanceExtended extends GqlPoolUserBalance {
-  totalBalanceUsd?: HumanAmount
-}
-export interface DecoratedPoolListItem extends PoolListItem {
-  userBalance?: GqlPoolUserBalanceExtended | null
-}
-
 export enum PoolVariant {
   v2 = 'v2',
   v3 = 'v3',

lib/modules/pool/usePoolEnrichWithOnChainData.tsx

@@ -149,7 +149,7 @@ async function getBalanceDataForPool({
   pool.allTokens.map(token => token)
   const poolIds: string[] = [pool.id]
   const calls: { poolId: string; type: 'balances' | 'supply'; call: ContractFunctionConfig }[] = [
-    getSupplyCall(pool),
+    getSupplyCall(pool as GqlPoolUnion),
     getBalancesCall(pool.id, vaultV2Address),
   ]
 

lib/shared/services/api/generated/graphql.ts

@@ -4221,6 +4221,7 @@ export type GetPoolsQuery = {
     userBalance?: {
       __typename: 'GqlPoolUserBalance'
       totalBalance: string
+      totalBalanceUsd: number
       stakedBalance: string
       walletBalance: string
     } | null
@@ -9094,6 +9095,7 @@ export const GetPoolsDocument = {
                     kind: 'SelectionSet',
                     selections: [
                       { kind: 'Field', name: { kind: 'Name', value: 'totalBalance' } },
+                      { kind: 'Field', name: { kind: 'Name', value: 'totalBalanceUsd' } },
                       { kind: 'Field', name: { kind: 'Name', value: 'stakedBalance' } },
                       { kind: 'Field', name: { kind: 'Name', value: 'walletBalance' } },
                     ],

lib/shared/services/api/pools.graphql

@@ -108,6 +108,7 @@ query GetPools(
     type
     userBalance {
       totalBalance
+      totalBalanceUsd
       stakedBalance
       walletBalance
     }