diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/lp/AddLiquidityForm/AddLiquidityForm.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/lp/AddLiquidityForm/AddLiquidityForm.tsx index 3e11941e0..b451fc81d 100644 --- a/apps/hyperdrive-trading/src/ui/hyperdrive/lp/AddLiquidityForm/AddLiquidityForm.tsx +++ b/apps/hyperdrive-trading/src/ui/hyperdrive/lp/AddLiquidityForm/AddLiquidityForm.tsx @@ -160,8 +160,11 @@ export function AddLiquidityForm({ enabled: hasEnoughAllowance && hasEnoughBalance, }; - const { lpSharesOut, status: addLiquidityPreviewStatus } = - usePreviewAddLiquidity(addLiquidityParams); + const { + lpSharesOut, + status: addLiquidityPreviewStatus, + previewAddLiquidityError, + } = usePreviewAddLiquidity(addLiquidityParams); const { lpSharesTotalSupply } = useLpSharesTotalSupply({ hyperdriveAddress: hyperdrive.address, @@ -243,11 +246,25 @@ export function AddLiquidityForm({ addLiquidityPreviewStatus={addLiquidityPreviewStatus} /> } - disclaimer={ - !!depositAmountAsBigInt && !hasEnoughBalance ? ( -

Insufficient balance

- ) : null - } + disclaimer={(() => { + if (!!depositAmountAsBigInt && !hasEnoughBalance) { + return ( +

+ Insufficient balance +

+ ); + } + if ( + previewAddLiquidityError?.includes("Not enough lp shares minted.") + ) { + return ( +

+ Not enough LP shares minted. Please adjust your slippage to add + liquidity. +

+ ); + } + })()} actionButton={(() => { if (!account) { return ; diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/lp/hooks/usePreviewAddLiquidity.ts b/apps/hyperdrive-trading/src/ui/hyperdrive/lp/hooks/usePreviewAddLiquidity.ts index 301ead9a3..c2859b56e 100644 --- a/apps/hyperdrive-trading/src/ui/hyperdrive/lp/hooks/usePreviewAddLiquidity.ts +++ b/apps/hyperdrive-trading/src/ui/hyperdrive/lp/hooks/usePreviewAddLiquidity.ts @@ -18,6 +18,7 @@ interface UsePreviewAddLiquidityOptions { interface UsePreviewAddLiquidityResult { status: "error" | "idle" | "loading" | "success"; + previewAddLiquidityError: string; lpSharesOut: bigint | undefined; } @@ -50,7 +51,7 @@ export function usePreviewAddLiquidity({ query: { enabled: queryEnabled }, }); - const { data, status, fetchStatus } = useQuery({ + const { data, status, fetchStatus, error } = useQuery({ queryKey: makeQueryKey("previewAddLiquidity", { hyperdrive: hyperdriveAddress, destination, @@ -84,6 +85,7 @@ export function usePreviewAddLiquidity({ return { status: queryStatus, + previewAddLiquidityError: error as string, lpSharesOut: data?.lpSharesOut, }; }