diff --git a/components/BorrowForm.tsx b/components/BorrowForm.tsx index fa1b89ff..2ec4500c 100644 --- a/components/BorrowForm.tsx +++ b/components/BorrowForm.tsx @@ -2,6 +2,7 @@ import { Bank, HealthType } from '@blockworks-foundation/mango-v4' import { ArrowLeftIcon, ArrowUpLeftIcon, + ArrowUpTrayIcon, ChevronDownIcon, ExclamationCircleIcon, LinkIcon, @@ -82,6 +83,18 @@ function BorrowForm({ onSuccess, token }: BorrowFormProps) { : new Decimal(0) }, [mangoAccount, bank]) + const tokenBalance = useMemo(() => { + if (!bank || !mangoAccount) return new Decimal(0) + return floorToDecimal( + mangoAccount.getTokenBalanceUi(bank), + bank.mintDecimals + ) + }, [bank, mangoAccount]) + + const isBorrow = parseFloat(inputAmount) > tokenBalance.toNumber() + + console.log(tokenBalance.toNumber(), tokenMax.toNumber()) + const handleSizePercentage = useCallback( (percentage: string) => { if (!bank) return @@ -300,13 +313,34 @@ function BorrowForm({ onSuccess, token }: BorrowFormProps) { mintPk={bank.mint} uiAmount={Number(inputAmount)} /> + {tokenBalance ? ( +
+

{t('withdraw-value')}

+

+ {isBorrow + ? formatFixedDecimals( + bank.uiPrice * tokenBalance.toNumber(), + true + ) + : inputAmount + ? formatFixedDecimals( + bank.uiPrice * parseFloat(inputAmount), + true + ) + : '$0.00'} +

+
+ ) : null}

{t('borrow-value')}

- {formatFixedDecimals( - bank.uiPrice * Number(inputAmount), - true - )} + {isBorrow + ? formatFixedDecimals( + bank.uiPrice * + (parseFloat(inputAmount) - tokenBalance.toNumber()), + true + ) + : '$0.00'}

@@ -316,11 +350,14 @@ function BorrowForm({ onSuccess, token }: BorrowFormProps) {

- {formatFixedDecimals( - bank.loanOriginationFeeRate.toNumber() * - Number(inputAmount), - true - )} + {isBorrow + ? formatFixedDecimals( + bank.uiPrice * + bank.loanOriginationFeeRate.toNumber() * + (parseFloat(inputAmount) - tokenBalance.toNumber()), + true + ) + : '$0.00'}

@@ -344,10 +381,17 @@ function BorrowForm({ onSuccess, token }: BorrowFormProps) { {t('swap:insufficient-collateral')} - ) : ( + ) : isBorrow ? (
- {t('borrow')} + {tokenBalance.toNumber() + ? `${t('withdraw')} & ${t('borrow')}` + : t('borrow')} +
+ ) : ( +
+ + {t('withdraw')}
)} diff --git a/components/WithdrawForm.tsx b/components/WithdrawForm.tsx index 5ae36a86..b0500edd 100644 --- a/components/WithdrawForm.tsx +++ b/components/WithdrawForm.tsx @@ -323,11 +323,6 @@ function WithdrawForm({ onSuccess, token }: WithdrawFormProps) { )} - {bank ? ( -
- -
- ) : null} ) diff --git a/components/shared/TokenVaultWarnings.tsx b/components/shared/TokenVaultWarnings.tsx index 423334df..796cbb83 100644 --- a/components/shared/TokenVaultWarnings.tsx +++ b/components/shared/TokenVaultWarnings.tsx @@ -48,12 +48,11 @@ const TokenVaultWarnings = ({ bank }: { bank: Bank }) => { type="warning" desc={
- The available {bank.name} vault balance is low and impacting the - maximum amount you can withdraw/borrow. View the{' '} + The available {bank.name}{' '} - Stats page + vault balance {' '} - to see vault balances. + is low and impacting the maximum amount you can withdraw/borrow.
} /> diff --git a/utils/constants.ts b/utils/constants.ts index b9a88b45..5900d717 100644 --- a/utils/constants.ts +++ b/utils/constants.ts @@ -60,6 +60,6 @@ export const DEFAULT_MARKET_NAME = 'SOL/USDC' export const MIN_SOL_BALANCE = 0.04 -export const ACCOUNT_ACTION_MODAL_HEIGHT = '478px' +export const ACCOUNT_ACTION_MODAL_HEIGHT = '496px' -export const ACCOUNT_ACTION_MODAL_INNER_HEIGHT = '416px' +export const ACCOUNT_ACTION_MODAL_INNER_HEIGHT = '434px'