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)