From 68714f44a42ee391cad1ba06a61d97d95627dbc7 Mon Sep 17 00:00:00 2001 From: jackburrus Date: Wed, 9 Oct 2024 15:04:19 -0600 Subject: [PATCH 1/9] balance and max lined up --- .../RemoveLiquidityForm.tsx | 289 +++++++++++------- .../src/ui/token/SlippageSettingsTwo.tsx | 2 +- .../src/ui/token/TokenInputTwo.tsx | 42 +-- 3 files changed, 205 insertions(+), 128 deletions(-) diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/lp/RemoveLiquidityForm/RemoveLiquidityForm.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/lp/RemoveLiquidityForm/RemoveLiquidityForm.tsx index ad5ad4f3b..d75f06835 100644 --- a/apps/hyperdrive-trading/src/ui/hyperdrive/lp/RemoveLiquidityForm/RemoveLiquidityForm.tsx +++ b/apps/hyperdrive-trading/src/ui/hyperdrive/lp/RemoveLiquidityForm/RemoveLiquidityForm.tsx @@ -6,26 +6,31 @@ import { HyperdriveConfig, } from "@delvtech/hyperdrive-appconfig"; import { adjustAmountByPercentage } from "@delvtech/hyperdrive-viem"; -import { ConnectButton } from "@rainbow-me/rainbowkit"; import { MouseEvent, ReactElement } from "react"; import { calculateValueFromPrice } from "src/base/calculateValueFromPrice"; +import { isTestnetChain } from "src/chains/isTestnetChain"; import { getHasEnoughBalance } from "src/token/getHasEnoughBalance"; -import { LabelValue } from "src/ui/base/components/LabelValue"; +import { ConnectWalletButton } from "src/ui/base/components/ConnectWallet"; import { LoadingButton } from "src/ui/base/components/LoadingButton"; +import { PrimaryStat } from "src/ui/base/components/PrimaryStat"; import { formatBalance } from "src/ui/base/formatting/formatBalance"; import { useActiveItem } from "src/ui/base/hooks/useActiveItem"; import { useNumericInput } from "src/ui/base/hooks/useNumericInput"; +import { SwitchNetworksButton } from "src/ui/chains/SwitchChainButton/SwitchChainButton"; import { usePoolInfo } from "src/ui/hyperdrive/hooks/usePoolInfo"; +import { InvalidTransactionButton } from "src/ui/hyperdrive/InvalidTransactionButton"; import { usePreviewRemoveLiquidity } from "src/ui/hyperdrive/lp/hooks/usePreviewRemoveLiquidity"; import { useRemoveLiquidity } from "src/ui/hyperdrive/lp/hooks/useRemoveLiquidity"; -import { TransactionViewOld } from "src/ui/hyperdrive/TransactionView"; +import { TransactionView } from "src/ui/hyperdrive/TransactionView"; import { useSlippageSettings } from "src/ui/token/hooks/useSlippageSettings"; import { useTokenBalance } from "src/ui/token/hooks/useTokenBalance"; -import { SlippageSettings } from "src/ui/token/SlippageSettings"; -import { TokenInput } from "src/ui/token/TokenInput"; -import { TokenChoice, TokenPicker } from "src/ui/token/TokenPicker"; +import { useTokenFiatPrice } from "src/ui/token/hooks/useTokenFiatPrice"; +import { SlippageSettingsTwo } from "src/ui/token/SlippageSettingsTwo"; +import { TokenInputTwo } from "src/ui/token/TokenInputTwo"; +import { TokenChoice } from "src/ui/token/TokenPicker"; +import { TokenPickerTwo } from "src/ui/token/TokenPickerTwo"; import { formatUnits } from "viem"; -import { useAccount } from "wagmi"; +import { useAccount, useChainId } from "wagmi"; interface RemoveLiquidityFormProps { hyperdrive: HyperdriveConfig; lpShares: bigint; @@ -38,7 +43,7 @@ export function RemoveLiquidityForm({ onRemoveLiquidity, }: RemoveLiquidityFormProps): ReactElement { const { address: account } = useAccount(); - + const connectedChainId = useChainId(); const baseToken = findBaseToken({ hyperdriveChainId: hyperdrive.chainId, hyperdriveAddress: hyperdrive.address, @@ -95,6 +100,11 @@ export function RemoveLiquidityForm({ chainId: hyperdrive.chainId, }); + const { fiatPrice: activeWithdrawTokenPrice } = useTokenFiatPrice({ + tokenAddress: activeWithdrawToken.address, + chainId: activeWithdrawToken.chainId, + }); + // Let users type in an amount of lp shares they want to remove const { amount, @@ -197,123 +207,190 @@ export function RemoveLiquidityForm({ } return ( - setActiveWithdrawToken(tokenAddress)} - tokens={withdrawTokenChoices} - /> - } + - {" "} - - {baseToken.symbol}-LP - - - } - settings={ - - } - value={amount ?? ""} - maxValue={formatUnits(lpShares, baseToken.decimals)} - stat={ -
- - {lpShares && !!poolInfo - ? `Withdrawable: ${formatBalance({ - balance: lpShares, - decimals: hyperdrive.decimals, - places: baseToken.places, - })} ${baseToken.symbol}-LP` - : undefined} - - {`Slippage: ${slippage || "0.5"}%`} -
- } - onChange={(newAmount) => setAmount(newAmount)} - /> - } - transactionPreview={ -
- + + } + value={amount ?? ""} + maxValue={formatUnits(lpShares, baseToken.decimals)} + bottomRightElement={ +
+ {`Withdrawable: ${formatBalance({ + balance: lpShares, + decimals: baseToken.decimals, + places: baseToken.places, + })}`} +
+ } + onChange={(newAmount) => setAmount(newAmount)} /> - + setActiveWithdrawToken(tokenAddress) + } + /> + } value={ - - {actualValueOut - ? `${formatBalance({ - balance: actualValueOut, - decimals: activeWithdrawToken.decimals, - places: activeWithdrawToken.places, - })}` - : "0"}{" "} - {activeWithdrawToken.symbol} - + actualValueOut + ? fixed(actualValueOut, hyperdrive.decimals).toString() + : "0" + } + maxValue={ + actualValueOut + ? formatUnits(actualValueOut, hyperdrive.decimals) + : "" } + disabled + bottomLeftElement={ + // Defillama fetches the token price via {chain}:{tokenAddress}. Since the token address differs on testnet, price display is disabled there. + !isTestnetChain(hyperdrive.chainId) ? ( + + ) : null + } + onChange={(newAmount) => setAmount(newAmount)} /> - + } + // transactionPreview={ + //
+ // + // + // {actualValueOut + // ? `${formatBalance({ + // balance: actualValueOut, + // decimals: activeWithdrawToken.decimals, + // places: activeWithdrawToken.places, + // })}` + // : "0"}{" "} + // {activeWithdrawToken.symbol} + // + // } + // /> + // + // {formattedWithdrawalSharesOut || 0} {baseToken.symbol} + // + // } + // /> + //
+ // } + // disclaimer={ + // <> + // {lpSharesIn && !hasEnoughBalance ? ( + //

+ // Insufficient balance + //

+ // ) : null} + + //

+ // You can withdraw liquidity at any time. The utilized portion may be + // queued for delayed withdrawal. + //

+ // + // } + primaryStats={ +
+ +
{formattedWithdrawalSharesOut || 0} {baseToken.symbol} - +
} /> + {/*
+ + {flatPlusCurveFee + ? `${formatBalance({ + balance: flatPlusCurveFee, + decimals: hyperdrive.decimals, + // The default places value is not always precise enough to show the correct number of decimal places for positions that haven't matured. + places: 6, + })}` + : "0"}{" "} +
+ } + valueUnit={activeWithdrawToken.symbol} + valueContainerClassName="flex flex-row gap-2 items-end" + /> */}
} - disclaimer={ - <> - {lpSharesIn && !hasEnoughBalance ? ( -

- Insufficient balance -

- ) : null} - -

- You can withdraw liquidity at any time. The utilized portion may be - queued for delayed withdrawal. -

- - } actionButton={(() => { if (!account) { - return ; + return ; + } + if (connectedChainId !== hyperdrive.chainId) { + return ( + + ); + } + if (!!lpSharesIn && !hasEnoughBalance) { + return ( + + Insufficient balance + + ); } - if (removeLiquidityStatus === "loading") { - return ; + return ; } - return (
{bottomLeftStatistic} -
- +
+ {bottomRightStatistic ? ( + + {bottomRightStatistic} + + ) : null} {maxValue !== undefined && !disabled ? ( -
- -
+ ) : null}
From b9cb66b3342edc0086d4a591359f242c40214b8e Mon Sep 17 00:00:00 2001 From: jackburrus Date: Fri, 11 Oct 2024 11:22:29 -0600 Subject: [PATCH 2/9] adds poolshare remaining --- .../src/ui/base/components/PrimaryStat.tsx | 2 +- .../RemoveLiquidityForm.tsx | 41 ++++++++++++++++++- 2 files changed, 41 insertions(+), 2 deletions(-) diff --git a/apps/hyperdrive-trading/src/ui/base/components/PrimaryStat.tsx b/apps/hyperdrive-trading/src/ui/base/components/PrimaryStat.tsx index 2a29d908d..2272e6712 100644 --- a/apps/hyperdrive-trading/src/ui/base/components/PrimaryStat.tsx +++ b/apps/hyperdrive-trading/src/ui/base/components/PrimaryStat.tsx @@ -27,7 +27,7 @@ export function PrimaryStat({ return (
-

{label}

+

{label}

{tooltipContent && (
{ + return !!lpShares && !!lpSharesTotalSupply && !!hasEnoughBalance + ? calculateRatio({ + a: lpShares - (lpSharesIn || 0n) - (withdrawalShares || 0n), + b: lpSharesTotalSupply, + decimals: hyperdrive?.decimals, + }) + : 0n; + }, [ + lpSharesIn, + lpShares, + lpSharesTotalSupply, + withdrawalShares, + hyperdrive?.decimals, + hasEnoughBalance, + ]); + return ( } /> +
+ + {lpSharesTotalSupplyStatus === "success" ? ( + `${fixed(poolShareRemaining).format({ decimals: 4 })}%` + ) : ( + + )} +
+ } + /> {/*
Date: Fri, 11 Oct 2024 11:35:43 -0600 Subject: [PATCH 3/9] calculate ratio into tsx --- .../RemoveLiquidityForm.tsx | 34 ++++++++++++------- 1 file changed, 22 insertions(+), 12 deletions(-) diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/lp/RemoveLiquidityForm/RemoveLiquidityForm.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/lp/RemoveLiquidityForm/RemoveLiquidityForm.tsx index 4c6f9f4bf..275e9a970 100644 --- a/apps/hyperdrive-trading/src/ui/hyperdrive/lp/RemoveLiquidityForm/RemoveLiquidityForm.tsx +++ b/apps/hyperdrive-trading/src/ui/hyperdrive/lp/RemoveLiquidityForm/RemoveLiquidityForm.tsx @@ -6,7 +6,7 @@ import { HyperdriveConfig, } from "@delvtech/hyperdrive-appconfig"; import { adjustAmountByPercentage } from "@delvtech/hyperdrive-viem"; -import { MouseEvent, ReactElement, useMemo } from "react"; +import { MouseEvent, ReactElement } from "react"; import Skeleton from "react-loading-skeleton"; import { calculateRatio } from "src/base/calculateRatio"; import { calculateValueFromPrice } from "src/base/calculateValueFromPrice"; @@ -215,22 +215,14 @@ export function RemoveLiquidityForm({ }); } - const poolShareRemaining = useMemo(() => { - return !!lpShares && !!lpSharesTotalSupply && !!hasEnoughBalance + const poolShareRemaining = + !!lpShares && !!lpSharesTotalSupply && !!hasEnoughBalance ? calculateRatio({ a: lpShares - (lpSharesIn || 0n) - (withdrawalShares || 0n), b: lpSharesTotalSupply, decimals: hyperdrive?.decimals, }) : 0n; - }, [ - lpSharesIn, - lpShares, - lpSharesTotalSupply, - withdrawalShares, - hyperdrive?.decimals, - hasEnoughBalance, - ]); return ( {lpSharesTotalSupplyStatus === "success" ? ( - `${fixed(poolShareRemaining).format({ decimals: 4 })}%` + `${fixed( + calculateRatio({ + a: + lpShares - + (lpSharesIn || 0n) - + (withdrawalShares || 0n), + b: lpSharesTotalSupply || 0n, + decimals: hyperdrive?.decimals, + }) < 0n + ? 0n + : calculateRatio({ + a: + lpShares - + (lpSharesIn || 0n) - + (withdrawalShares || 0n), + b: lpSharesTotalSupply || 0n, + decimals: hyperdrive?.decimals, + }), + ).format({ decimals: 4 })}%` ) : ( )} From d576b8778061b3fa96cf5987edabb3a1c7d4d56c Mon Sep 17 00:00:00 2001 From: jackburrus Date: Fri, 11 Oct 2024 11:37:17 -0600 Subject: [PATCH 4/9] removed to variable --- .../RemoveLiquidityForm.tsx | 41 +++++++------------ 1 file changed, 14 insertions(+), 27 deletions(-) diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/lp/RemoveLiquidityForm/RemoveLiquidityForm.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/lp/RemoveLiquidityForm/RemoveLiquidityForm.tsx index 275e9a970..76cb3a8e9 100644 --- a/apps/hyperdrive-trading/src/ui/hyperdrive/lp/RemoveLiquidityForm/RemoveLiquidityForm.tsx +++ b/apps/hyperdrive-trading/src/ui/hyperdrive/lp/RemoveLiquidityForm/RemoveLiquidityForm.tsx @@ -216,13 +216,18 @@ export function RemoveLiquidityForm({ } const poolShareRemaining = - !!lpShares && !!lpSharesTotalSupply && !!hasEnoughBalance - ? calculateRatio({ - a: lpShares - (lpSharesIn || 0n) - (withdrawalShares || 0n), - b: lpSharesTotalSupply, - decimals: hyperdrive?.decimals, - }) - : 0n; + lpSharesTotalSupplyStatus === "success" + ? (() => { + const remainingShares = + lpShares - (lpSharesIn || 0n) - (withdrawalShares || 0n); + const ratio = calculateRatio({ + a: remainingShares, + b: lpSharesTotalSupply || 0n, + decimals: hyperdrive?.decimals, + }); + return ratio < 0n ? 0n : ratio; + })() + : null; return ( - {lpSharesTotalSupplyStatus === "success" ? ( - `${fixed( - calculateRatio({ - a: - lpShares - - (lpSharesIn || 0n) - - (withdrawalShares || 0n), - b: lpSharesTotalSupply || 0n, - decimals: hyperdrive?.decimals, - }) < 0n - ? 0n - : calculateRatio({ - a: - lpShares - - (lpSharesIn || 0n) - - (withdrawalShares || 0n), - b: lpSharesTotalSupply || 0n, - decimals: hyperdrive?.decimals, - }), - ).format({ decimals: 4 })}%` + {poolShareRemaining !== null ? ( + `${fixed(poolShareRemaining).format({ decimals: 4 })}%` ) : ( )} From 7cd65fd853ba5945344641aa3e7a48057756de1b Mon Sep 17 00:00:00 2001 From: jackburrus Date: Fri, 11 Oct 2024 11:44:11 -0600 Subject: [PATCH 5/9] pool share remaining finalized --- .../RemoveLiquidityForm.tsx | 79 +------------------ 1 file changed, 4 insertions(+), 75 deletions(-) diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/lp/RemoveLiquidityForm/RemoveLiquidityForm.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/lp/RemoveLiquidityForm/RemoveLiquidityForm.tsx index 76cb3a8e9..9e709d626 100644 --- a/apps/hyperdrive-trading/src/ui/hyperdrive/lp/RemoveLiquidityForm/RemoveLiquidityForm.tsx +++ b/apps/hyperdrive-trading/src/ui/hyperdrive/lp/RemoveLiquidityForm/RemoveLiquidityForm.tsx @@ -218,16 +218,16 @@ export function RemoveLiquidityForm({ const poolShareRemaining = lpSharesTotalSupplyStatus === "success" ? (() => { - const remainingShares = - lpShares - (lpSharesIn || 0n) - (withdrawalShares || 0n); + // Calculate the ratio of remaining shares to the total supply const ratio = calculateRatio({ - a: remainingShares, + a: lpShares - (lpSharesIn || 0n) - (withdrawalShares || 0n), // Remaining LP Shares in pool after removing input value lpShares and withdrawalShares received b: lpSharesTotalSupply || 0n, decimals: hyperdrive?.decimals, }); + // Ensure the ratio is not negative return ratio < 0n ? 0n : ratio; })() - : null; + : 0n; return (
} - // transactionPreview={ - //
- // - // - // {actualValueOut - // ? `${formatBalance({ - // balance: actualValueOut, - // decimals: activeWithdrawToken.decimals, - // places: activeWithdrawToken.places, - // })}` - // : "0"}{" "} - // {activeWithdrawToken.symbol} - // - // } - // /> - // - // {formattedWithdrawalSharesOut || 0} {baseToken.symbol} - // - // } - // /> - //
- // } - // disclaimer={ - // <> - // {lpSharesIn && !hasEnoughBalance ? ( - //

- // Insufficient balance - //

- // ) : null} - - //

- // You can withdraw liquidity at any time. The utilized portion may be - // queued for delayed withdrawal. - //

- // - // } primaryStats={
} /> - {/*
- - {flatPlusCurveFee - ? `${formatBalance({ - balance: flatPlusCurveFee, - decimals: hyperdrive.decimals, - // The default places value is not always precise enough to show the correct number of decimal places for positions that haven't matured. - places: 6, - })}` - : "0"}{" "} -
- } - valueUnit={activeWithdrawToken.symbol} - valueContainerClassName="flex flex-row gap-2 items-end" - /> */}
} actionButton={(() => { From 1dfb893a5c7d0ea571505b88d234cc5f01d1b64c Mon Sep 17 00:00:00 2001 From: jackburrus Date: Fri, 11 Oct 2024 12:02:20 -0600 Subject: [PATCH 6/9] fix bottom right statistic --- apps/hyperdrive-trading/src/ui/token/TokenInputTwo.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/hyperdrive-trading/src/ui/token/TokenInputTwo.tsx b/apps/hyperdrive-trading/src/ui/token/TokenInputTwo.tsx index d2e244d6b..cd558a977 100644 --- a/apps/hyperdrive-trading/src/ui/token/TokenInputTwo.tsx +++ b/apps/hyperdrive-trading/src/ui/token/TokenInputTwo.tsx @@ -114,14 +114,14 @@ export function TokenInputTwo({ {bottomLeftStatistic}
{bottomRightStatistic ? ( - + {bottomRightStatistic} ) : null} {maxValue !== undefined && !disabled ? (