diff --git a/lib/modules/pool/actions/add-liquidity/AddLiquidityForm.tsx b/lib/modules/pool/actions/add-liquidity/AddLiquidityForm.tsx
index 5d232f5a6..e7f948509 100644
--- a/lib/modules/pool/actions/add-liquidity/AddLiquidityForm.tsx
+++ b/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() {
Bpt out
- {isBptOutQueryLoading ? : bptOutUnits}
+ {isPreviewQueryLoading ? : bptOutLabel}
diff --git a/lib/modules/pool/actions/add-liquidity/AddLiquidityModal.tsx b/lib/modules/pool/actions/add-liquidity/AddLiquidityModal.tsx
index dc374f2b0..0f08ec08a 100644
--- a/lib/modules/pool/actions/add-liquidity/AddLiquidityModal.tsx
+++ b/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 (
@@ -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({
diff --git a/lib/modules/pool/actions/add-liquidity/queries/useAddLiquidityPreviewQuery.ts b/lib/modules/pool/actions/add-liquidity/queries/useAddLiquidityPreviewQuery.ts
index c755842db..06d6e4ee8 100644
--- a/lib/modules/pool/actions/add-liquidity/queries/useAddLiquidityPreviewQuery.ts
+++ b/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(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),
}
diff --git a/lib/modules/pool/actions/add-liquidity/useAddLiquidity.tsx b/lib/modules/pool/actions/add-liquidity/useAddLiquidity.tsx
index ce5675b16..9d1d2050e 100644
--- a/lib/modules/pool/actions/add-liquidity/useAddLiquidity.tsx
+++ b/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,
diff --git a/lib/modules/pool/pool.helpers.ts b/lib/modules/pool/pool.helpers.ts
index 8efd1e387..4228016a1 100644
--- a/lib/modules/pool/pool.helpers.ts
+++ b/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)