feat: useMaxRedeem for some situations

yearn · Apr 24, 2024 · 505d5a8 · 505d5a8
1 parent 9ecfcb0
commit 505d5a8
Show file tree

Hide file tree

Showing 12 changed files with 479 additions and 173 deletions.
diff --git a/apps/vaults-v3/components/details/actions/QuickActionsButtons.tsx b/apps/vaults-v3/components/details/actions/QuickActionsButtons.tsx
@@ -24,7 +24,7 @@ export function VaultDetailsQuickActionsButtons({currentVault}: {currentVault: T
 	const [txStatusExecuteDeposit, set_txStatusExecuteDeposit] = useState(defaultTxStatus);
 	const [txStatusExecuteWithdraw, set_txStatusExecuteWithdraw] = useState(defaultTxStatus);
 	const [allowanceFrom, set_allowanceFrom] = useState<TNormalizedBN>(zeroNormalizedBN);
-	const {actionParams, onChangeAmount, maxDepositPossible, isDepositing} = useActionFlow();
+	const {actionParams, onChangeAmount, maxDepositPossible, maxWithdrawPossible, isDepositing} = useActionFlow();
 	const {pathname} = useRouter();
 	const isV3Page = pathname.startsWith(`/v3`);
 	const {
@@ -246,7 +246,9 @@ export function VaultDetailsQuickActionsButtons({currentVault}: {currentVault: T
 	return (
 		<Button
 			variant={isV3Page ? 'v3' : undefined}
-			onClick={async (): Promise<void> => onExecuteWithdraw(set_txStatusExecuteWithdraw, onSuccess)}
+			onClick={async (): Promise<void> =>
+				onExecuteWithdraw(set_txStatusExecuteWithdraw, onSuccess, maxWithdrawPossible().isLimited)
+			}
 			className={'w-full'}
 			isBusy={txStatusExecuteWithdraw.pending}
 			isDisabled={isButtonDisabled}>

diff --git a/apps/vaults-v3/components/details/actions/QuickActionsFrom.tsx b/apps/vaults-v3/components/details/actions/QuickActionsFrom.tsx
@@ -24,10 +24,51 @@ import {Renderable} from '@yearn-finance/web-lib/components/Renderable';
 import {Dropdown} from '@common/components/TokenDropdown';
 import {useYearn} from '@common/contexts/useYearn';
 import {useYearnBalance} from '@common/hooks/useYearnBalance';
+import {IconQuestion} from '@common/icons/IconQuestion';
 
 import type {ChangeEvent, ReactElement} from 'react';
 import type {TNormalizedBN} from '@builtbymom/web3/types';
 
+function AmountWithOptionalTooltip(props: {
+	canOnlyWithdrawSome: boolean;
+	maxPossibleToWithdraw: TNormalizedBN;
+	tokenSymbol: string;
+}): ReactElement {
+	if (props.canOnlyWithdrawSome) {
+		return (
+			<div className={'flex flex-row items-center justify-between space-x-2'}>
+				<label
+					htmlFor={'fromAmount'}
+					className={'hidden text-base text-neutral-600 md:inline'}>
+					{'Amount'}
+				</label>
+				<span className={'tooltip'}>
+					<IconQuestion className={'hidden opacity-40 md:block'} />
+					<span className={'tooltipLight top-full w-full pt-1'}>
+						<div
+							className={
+								'font-number mr-[-360px] max-w-sm border border-neutral-300 bg-neutral-100 p-1 px-2 text-center text-xxs text-neutral-900'
+							}>
+							<p className={'font-number whitespace-pre text-wrap text-left text-neutral-400 md:text-xs'}>
+								{`This Vault is not always totally liquid (don’t worry anon, funds are Safu).\n\nYou can currently withdraw up to ${formatAmount(props.maxPossibleToWithdraw.normalized, 6)} ${props.tokenSymbol}.\n\nLike the best things in life, liquidity comes and goes so feel free to check back later.`}
+							</p>
+						</div>
+					</span>
+				</span>
+			</div>
+		);
+	}
+	return (
+		<div>
+			<label
+				htmlFor={'fromAmount'}
+				className={'hidden text-base text-neutral-600 md:inline'}>
+				{'Amount'}
+			</label>
+		</div>
+	);
+}
+
 export function VaultDetailsQuickActionsFrom(): ReactElement {
 	const {address, isActive, chainID} = useWeb3();
 	const {getToken, getPrice} = useYearn();
@@ -40,6 +81,7 @@ export function VaultDetailsQuickActionsFrom(): ReactElement {
 		onUpdateSelectedOptionFrom,
 		onChangeAmount,
 		maxDepositPossible,
+		maxWithdrawPossible,
 		isDepositing
 	} = useActionFlow();
 	const hasMultipleInputsToChooseFrom = isActive && isDepositing && possibleOptionsFrom.length > 1;
@@ -181,11 +223,11 @@ export function VaultDetailsQuickActionsFrom(): ReactElement {
 			</div>
 			<div className={'w-full'}>
 				<div className={'pb-2 pl-1'}>
-					<label
-						htmlFor={'fromAmount'}
-						className={'hidden text-base text-neutral-600 md:inline'}>
-						{'Amount'}
-					</label>
+					<AmountWithOptionalTooltip
+						canOnlyWithdrawSome={!isDepositing && maxWithdrawPossible().isLimited}
+						maxPossibleToWithdraw={maxWithdrawPossible().safeLimit}
+						tokenSymbol={actionParams?.selectedOptionFrom?.symbol || 'tokens'}
+					/>
 				</div>
 				<div
 					className={cl(
@@ -213,7 +255,7 @@ export function VaultDetailsQuickActionsFrom(): ReactElement {
 								onChangeAmount(
 									isDepositing
 										? maxDepositPossible(toAddress(actionParams?.selectedOptionFrom?.value))
-										: userBalance
+										: maxWithdrawPossible().safeLimit
 								)
 							}
 							className={