handle when vault balance is below 0

components/swap/JupiterRouteInfo.tsx

@@ -74,7 +74,7 @@ const JupiterRouteInfo = ({
   selectedRoute,
   setSelectedRoute,
 }: JupiterRouteInfoProps) => {
-  const { t } = useTranslation('trade')
+  const { t } = useTranslation(['common', 'trade'])
   const [showRoutesModal, setShowRoutesModal] = useState(false)
   const [swapRate, setSwapRate] = useState<boolean>(false)
   const [depositAndFee, setDepositAndFee] = useState<TransactionFeeInfo>()
@@ -244,7 +244,7 @@ const JupiterRouteInfo = ({
 
         <div className="space-y-2 px-1">
           <div className="flex justify-between">
-            <span>{t('rate')}</span>
+            <span>Rate</span>
             <div>
               <div className="flex items-center justify-end">
                 <p className="text-right text-sm">
@@ -307,7 +307,7 @@ const JupiterRouteInfo = ({
             <div className="flex justify-between">
               <p className="text-sm text-th-fgd-3">{t('borrow-amount')}</p>
               <p className="text-right text-sm text-th-fgd-1">
-                ~{formatFixedDecimals(borrowAmount)} {inputTokenInfo?.symbol}
+                ~ {formatFixedDecimals(borrowAmount)} {inputTokenInfo?.symbol}
               </p>
             </div>
           ) : null}

components/swap/LeverageSlider.tsx

@@ -1,6 +1,6 @@
 import { ChangeEvent, useEffect, useRef, useState } from 'react'
 import mangoStore from '../../store/mangoStore'
-import { useTokenMax } from './SwapForm'
+import { useTokenMax } from './useTokenMax'
 
 const LeverageSlider = ({
   amount,

components/swap/SwapForm.tsx

@@ -14,11 +14,7 @@ import ContentBox from '../shared/ContentBox'
 import JupiterRouteInfo from './JupiterRouteInfo'
 import TokenSelect from '../TokenSelect'
 import useDebounce from '../shared/useDebounce'
-import {
-  floorToDecimal,
-  formatDecimal,
-  numberFormat,
-} from '../../utils/numbers'
+import { floorToDecimal, numberFormat } from '../../utils/numbers'
 import { SwapLeverageSlider } from './LeverageSlider'
 import { useTranslation } from 'next-i18next'
 import SwapFormTokenList from './SwapFormTokenList'
@@ -35,6 +31,7 @@ import {
   INPUT_TOKEN_DEFAULT,
   OUTPUT_TOKEN_DEFAULT,
 } from '../../utils/constants'
+import { useTokenMax } from './useTokenMax'
 
 const MAX_DIGITS = 11
 const withValueLimit = (values: NumberFormatValues): boolean => {
@@ -410,57 +407,6 @@ const SwapForm = () => {
 
 export default SwapForm
 
-export const useTokenMax = (useMargin = true) => {
-  const mangoAccount = mangoStore((s) => s.mangoAccount.current)
-  const inputBank = mangoStore((s) => s.swap.inputBank)
-  const outputBank = mangoStore((s) => s.swap.outputBank)
-  const slippage = mangoStore((s) => s.swap.slippage)
-
-  const tokenInMax = useMemo(() => {
-    const group = mangoStore.getState().group
-
-    if (!group || !inputBank || !mangoAccount || !outputBank)
-      return { amount: 0.0, decimals: 6, amountWithBorrow: 0.0 }
-    const inputBankFromGroup = group.getFirstBankByMint(inputBank.mint)
-
-    const tokenBalance = parseFloat(
-      formatDecimal(
-        mangoAccount?.getTokenBalanceUi(inputBankFromGroup),
-        inputBankFromGroup.mintDecimals
-      )
-    )
-    const maxAmountWithoutMargin = tokenBalance > 0 ? tokenBalance : 0
-    const inputBankVaultBalance = floorToDecimal(
-      inputBank.uiDeposits() - inputBank.uiBorrows(),
-      inputBank.mintDecimals
-    )
-
-    const maxUiAmountWithBorrow = mangoAccount?.getMaxSourceUiForTokenSwap(
-      group,
-      inputBank.mint,
-      outputBank.mint,
-      0.98 - slippage / 10
-    )
-
-    return {
-      amount: useMargin
-        ? Math.min(
-            maxAmountWithoutMargin,
-            inputBankVaultBalance,
-            maxUiAmountWithBorrow
-          )
-        : Math.min(maxAmountWithoutMargin, inputBankVaultBalance),
-      amountWithBorrow: Math.min(
-        floorToDecimal(maxUiAmountWithBorrow, inputBank.mintDecimals),
-        inputBankVaultBalance
-      ),
-      decimals: inputBank.mintDecimals,
-    }
-  }, [inputBank, mangoAccount, outputBank, slippage])
-
-  return tokenInMax
-}
-
 const MaxSwapAmount = ({
   amountWithBorrow,
   setAmountIn,

components/swap/useTokenMax.tsx

@@ -0,0 +1,58 @@
+import { useMemo } from 'react'
+import mangoStore from '../../store/mangoStore'
+import { floorToDecimal, formatDecimal } from '../../utils/numbers'
+
+export const useTokenMax = (useMargin = true) => {
+  const mangoAccount = mangoStore((s) => s.mangoAccount.current)
+  const inputBank = mangoStore((s) => s.swap.inputBank)
+  const outputBank = mangoStore((s) => s.swap.outputBank)
+  const slippage = mangoStore((s) => s.swap.slippage)
+
+  const tokenInMax = useMemo(() => {
+    const group = mangoStore.getState().group
+
+    if (!group || !inputBank || !mangoAccount || !outputBank)
+      return { amount: 0.0, decimals: 6, amountWithBorrow: 0.0 }
+    const inputBankFromGroup = group.getFirstBankByMint(inputBank.mint)
+
+    const tokenBalance = parseFloat(
+      formatDecimal(
+        mangoAccount?.getTokenBalanceUi(inputBankFromGroup),
+        inputBankFromGroup.mintDecimals
+      )
+    )
+    const maxAmountWithoutMargin = tokenBalance > 0 ? tokenBalance : 0
+    const inputBankVaultBalance = floorToDecimal(
+      inputBank.uiDeposits() - inputBank.uiBorrows(),
+      inputBank.mintDecimals
+    )
+
+    const maxUiAmountWithBorrow = mangoAccount?.getMaxSourceUiForTokenSwap(
+      group,
+      inputBank.mint,
+      outputBank.mint,
+      0.98 - slippage / 10
+    )
+
+    const maxAmount = useMargin
+      ? Math.min(
+          maxAmountWithoutMargin,
+          inputBankVaultBalance,
+          maxUiAmountWithBorrow
+        )
+      : Math.min(maxAmountWithoutMargin, inputBankVaultBalance)
+
+    const maxAmountWithBorrow = Math.min(
+      floorToDecimal(maxUiAmountWithBorrow, inputBank.mintDecimals),
+      inputBankVaultBalance
+    )
+
+    return {
+      amount: maxAmount > 0 ? maxAmount : 0,
+      amountWithBorrow: maxAmountWithBorrow > 0 ? maxAmountWithBorrow : 0,
+      decimals: inputBank.mintDecimals,
+    }
+  }, [inputBank, mangoAccount, outputBank, slippage, useMargin])
+
+  return tokenInMax
+}