diff --git a/apps/marginfi-v2-ui/src/components/desktop/AssetsList/AssetRow/AssetRow.tsx b/apps/marginfi-v2-ui/src/components/desktop/AssetsList/AssetRow/AssetRow.tsx index b3b6cd7691..cf82cb4e68 100644 --- a/apps/marginfi-v2-ui/src/components/desktop/AssetsList/AssetRow/AssetRow.tsx +++ b/apps/marginfi-v2-ui/src/components/desktop/AssetsList/AssetRow/AssetRow.tsx @@ -148,7 +148,11 @@ const AssetRow: FC<{ }, [bank, currentAction]); const isDust = bank.isActive && bank.position.isDust; const showCloseBalance = currentAction === ActionType.Withdraw && isDust; // Only case we should show close balance is when we are withdrawing a dust balance, since user receives 0 tokens back (vs repaying a dust balance where the input box will show the smallest unit of the token) - const isActionDisabled = maxAmount === 0 && !showCloseBalance; + const isActionDisabled = useMemo(() => { + const isValidInput = amount > 0; + return (maxAmount === 0 || !isValidInput) && !showCloseBalance; + }, [amount, showCloseBalance, maxAmount]); + const isInputDisabled = useMemo(() => maxAmount === 0 && !showCloseBalance, [maxAmount, showCloseBalance]); // Reset b/l amounts on toggle useEffect(() => { @@ -528,7 +532,7 @@ const AssetRow: FC<{ maxValue={maxAmount} maxDecimals={bank.info.state.mintDecimals} inputRefs={inputRefs} - disabled={showCloseBalance || isActionDisabled} + disabled={isInputDisabled} onEnter={handleLendingAction} /> diff --git a/apps/marginfi-v2-ui/src/components/mobile/MobileAssetsList/AssetCard/AssetCardActions.tsx b/apps/marginfi-v2-ui/src/components/mobile/MobileAssetsList/AssetCard/AssetCardActions.tsx index 5370b86aa0..1c9bf15421 100644 --- a/apps/marginfi-v2-ui/src/components/mobile/MobileAssetsList/AssetCard/AssetCardActions.tsx +++ b/apps/marginfi-v2-ui/src/components/mobile/MobileAssetsList/AssetCard/AssetCardActions.tsx @@ -27,19 +27,13 @@ export const AssetCardActions: FC<{ } }, [bank.userInfo, currentAction]); - const isDust = useMemo( - () => bank.isActive && uiToNative(bank.position.amount, bank.info.state.mintDecimals).isZero(), - [bank] - ); - - const isDisabled = useMemo( - () => - (isDust && - uiToNative(bank.userInfo.tokenAccount.balance, bank.info.state.mintDecimals).isZero() && - currentAction == ActionType.Borrow) || - (!isDust && maxAmount === 0), - [currentAction, bank, isDust, maxAmount] - ); + const isDust = useMemo(() => bank.isActive && bank.position.isDust, [bank]); + const showCloseBalance = useMemo(() => currentAction === ActionType.Withdraw && isDust, [isDust, currentAction]); // Only case we should show close balance is when we are withdrawing a dust balance, since user receives 0 tokens back (vs repaying a dust balance where the input box will show the smallest unit of the token) + const isActionDisabled = useMemo(() => { + const isValidInput = borrowOrLendAmount > 0; + return (maxAmount === 0 || !isValidInput) && !showCloseBalance; + }, [borrowOrLendAmount, showCloseBalance, maxAmount]); + const isInputDisabled = useMemo(() => maxAmount === 0 && !showCloseBalance, [maxAmount, showCloseBalance]); return ( <> @@ -51,7 +45,7 @@ export const AssetCardActions: FC<{ maxValue={maxAmount} maxDecimals={bank.info.state.mintDecimals} inputRefs={inputRefs} - disabled={isDust || maxAmount === 0} + disabled={isInputDisabled} onEnter={() => onBorrowOrLend(borrowOrLendAmount)} /> (isDust ? onCloseBalance() : onBorrowOrLend(borrowOrLendAmount))} - disabled={isDisabled} + onClick={() => (showCloseBalance ? onCloseBalance() : onBorrowOrLend(borrowOrLendAmount))} + disabled={isActionDisabled} > - {isDust ? "Close" : currentAction} + {showCloseBalance ? "Close" : currentAction}