chore: Fix BPT values in preview modal.

lib/modules/pool/actions/add-liquidity/AddLiquidityForm.tsx

@@ -36,7 +36,7 @@ export function AddLiquidityForm() {
     priceImpact,
     isPriceImpactLoading,
     bptOut,
-    isBptOutQueryLoading,
+    isPreviewQueryLoading,
     isDisabled,
     disabledReason,
   } = useAddLiquidity()
@@ -50,7 +50,7 @@ export function AddLiquidityForm() {
     return amountIn ? amountIn.humanAmount : ''
   }
 
-  const bptOutUnits = safeTokenFormat(bptOut?.amount, BPT_DECIMALS)
+  const bptOutLabel = safeTokenFormat(bptOut?.amount, BPT_DECIMALS)
   const formattedPriceImpact = priceImpact ? fNum('priceImpact', priceImpact) : '-'
 
   return (
@@ -105,7 +105,7 @@ export function AddLiquidityForm() {
                 <Text color="GrayText">Bpt out</Text>
                 <HStack>
                   <NumberText color="GrayText">
-                    {isBptOutQueryLoading ? <Skeleton w="12" h="full" /> : bptOutUnits}
+                    {isPreviewQueryLoading ? <Skeleton w="12" h="full" /> : bptOutLabel}
                   </NumberText>
                   <Tooltip label="Bpt out" fontSize="sm">
                     <InfoOutlineIcon color="GrayText" />

lib/modules/pool/actions/add-liquidity/AddLiquidityModal.tsx

@@ -7,7 +7,7 @@ import { TokenAllowancesProvider } from '@/lib/modules/web3/useTokenAllowances'
 import { useUserAccount } from '@/lib/modules/web3/useUserAccount'
 import { NumberText } from '@/lib/shared/components/typography/NumberText'
 import { useCurrency } from '@/lib/shared/hooks/useCurrency'
-import { fNum, safeTokenFormat } from '@/lib/shared/utils/numbers'
+import { fNum } from '@/lib/shared/utils/numbers'
 import { HumanAmount } from '@balancer/sdk'
 import { InfoOutlineIcon } from '@chakra-ui/icons'
 import {
@@ -32,6 +32,8 @@ import { usePool } from '../../usePool'
 import { AddLiquidityFlowButton, HumanAmountInWithTokenInfo } from './AddLiquidityFlowButton'
 import { useAddLiquidity } from './useAddLiquidity'
 import { BPT_DECIMALS } from '../../pool.constants'
+import { formatUnits } from 'viem'
+import { bptUsdValue } from '../../pool.helpers'
 
 type Props = {
   isOpen: boolean
@@ -44,17 +46,24 @@ function TokenAmountRow({
   tokenAddress,
   humanAmount,
   symbol,
+  isBpt,
 }: {
   tokenAddress: Address
   humanAmount: HumanAmount | ''
   symbol?: string
+  isBpt?: boolean
 }) {
   const { pool } = usePool()
   const { getToken, usdValueForToken } = useTokens()
   const { toCurrency } = useCurrency()
 
   const token = getToken(tokenAddress, pool.chain)
-  const usdValue = token ? usdValueForToken(token, humanAmount) : undefined
+  let usdValue: string | undefined
+  if (isBpt) {
+    usdValue = bptUsdValue(pool, humanAmount)
+  } else {
+    usdValue = token ? usdValueForToken(token, humanAmount) : undefined
+  }
 
   return (
     <HStack w="full" justify="space-between">
@@ -96,7 +105,7 @@ export function AddLiquidityModal({
     }
   )
 
-  const bptOutUnits = safeTokenFormat(bptOut?.amount, BPT_DECIMALS)
+  const bptOutLabel = bptOut ? formatUnits(bptOut.amount, BPT_DECIMALS) : '0'
   const formattedPriceImpact = priceImpact ? fNum('priceImpact', priceImpact) : '-'
 
   return (
@@ -138,8 +147,9 @@ export function AddLiquidityModal({
                 </HStack>
                 <TokenAmountRow
                   tokenAddress={pool.address as Address}
-                  humanAmount={bptOutUnits as HumanAmount}
+                  humanAmount={bptOutLabel as HumanAmount}
                   symbol="LP Token"
+                  isBpt
                 />
               </VStack>
             </Card>

lib/modules/pool/actions/add-liquidity/queries/useAddLiquidityPreviewQuery.ts

@@ -20,14 +20,14 @@ export function useAddLiquidityPreviewQuery(
   const { userAddress, isConnected } = useUserAccount()
   const { slippage } = useUserSettings()
   const [bptOut, setBptOut] = useState<TokenAmount | null>(null)
-  const [debouncedHumanAmountsIn] = useDebounce(humanAmountsIn, defaultDebounceMs)
+  const [debouncedHumanAmountsIn] = useDebounce([humanAmountsIn], defaultDebounceMs)
 
   function queryKey(): string {
     return generateAddLiquidityQueryKey({
       userAddress,
       poolId,
       slippage,
-      humanAmountsIn: debouncedHumanAmountsIn,
+      humanAmountsIn: debouncedHumanAmountsIn as unknown as HumanAmountIn[],
     })
   }
 
@@ -47,7 +47,7 @@ export function useAddLiquidityPreviewQuery(
       return await queryBptOut()
     },
     {
-      enabled: isConnected && hasValidHumanAmounts(debouncedHumanAmountsIn),
+      enabled: isConnected && hasValidHumanAmounts(humanAmountsIn),
       // TODO: remove when finishing debugging
       onError: error => console.log('Error in queryBptOut', error),
     }

lib/modules/pool/actions/add-liquidity/useAddLiquidity.tsx

@@ -85,7 +85,7 @@ export function _useAddLiquidity() {
     pool.id
   )
 
-  const { bptOut, isPreviewQueryLoading: isBptOutQueryLoading } = useAddLiquidityPreviewQuery(
+  const { bptOut, isPreviewQueryLoading } = useAddLiquidityPreviewQuery(
     handler,
     humanAmountsIn,
     pool.id
@@ -115,7 +115,7 @@ export function _useAddLiquidity() {
     isPriceImpactLoading,
     priceImpact,
     bptOut,
-    isBptOutQueryLoading,
+    isPreviewQueryLoading,
     setHumanAmountIn,
     useBuildTx,
     isDisabled,

lib/modules/pool/pool.helpers.ts

@@ -7,7 +7,7 @@ import {
   GqlPoolType,
 } from '@/lib/shared/services/api/generated/graphql'
 import { getAddressBlockExplorerLink, isSameAddress } from '@/lib/shared/utils/addresses'
-import { bn } from '@/lib/shared/utils/numbers'
+import { Numberish, bn } from '@/lib/shared/utils/numbers'
 import { MinimalToken, PoolStateInput } from '@balancer/sdk'
 import BigNumber from 'bignumber.js'
 import { Address, Hex, getAddress } from 'viem'
@@ -110,6 +110,10 @@ export function calcBptPrice(pool: GetPoolQuery['pool']): string {
   return bn(pool.dynamicData.totalLiquidity).div(pool.dynamicData.totalShares).toString()
 }
 
+export function bptUsdValue(pool: GetPoolQuery['pool'], bptAmount: Numberish): string {
+  return bn(bptAmount).times(calcBptPrice(pool)).toString()
+}
+
 export function createdAfterTimestamp(pool: GqlPoolBase): boolean {
   // Pools should always have valid createTime so, for safety, we block the pool in case we don't get it
   // (createTime should probably not be treated as optional in the SDK types)