token vault balance warnings

components/modals/BorrowModal.tsx

@@ -1,4 +1,4 @@
-import { HealthType } from '@blockworks-foundation/mango-v4'
+import { Bank, HealthType } from '@blockworks-foundation/mango-v4'
 import {
   ChevronDownIcon,
   CurrencyDollarIcon,
@@ -30,6 +30,7 @@ import Tooltip from '@components/shared/Tooltip'
 import useMangoAccount from 'hooks/useMangoAccount'
 import useJupiterMints from 'hooks/useJupiterMints'
 import useMangoGroup from 'hooks/useMangoGroup'
+import TokenVaultWarnings from '@components/shared/TokenVaultWarnings'
 
 interface BorrowModalProps {
   token?: string
@@ -70,7 +71,7 @@ function BorrowModal({ isOpen, onClose, token }: ModalCombinedProps) {
     if (!group || !bank || !mangoAccount) return new Decimal(0)
     const amount = getMaxWithdrawForBank(group, bank, mangoAccount, true)
     return amount && amount.gt(0)
-      ? amount.toDecimalPlaces(bank.mintDecimals)
+      ? floorToDecimal(amount, bank.mintDecimals)
       : new Decimal(0)
   }, [mangoAccount, bank])
 
@@ -132,14 +133,21 @@ function BorrowModal({ isOpen, onClose, token }: ModalCombinedProps) {
     if (mangoAccount) {
       return group?.banksMapByName
         ? Array.from(group?.banksMapByName, ([key, value]) => {
-            const bank = value[0]
+            const bank: Bank = value[0]
             const maxAmount = getMaxWithdrawForBank(
               group,
               bank,
               mangoAccount,
               true
             )
-            return { key, value, maxAmount: maxAmount.toNumber() }
+            return {
+              key,
+              value,
+              maxAmount: floorToDecimal(
+                maxAmount,
+                bank.mintDecimals
+              ).toNumber(),
+            }
           })
         : []
     }
@@ -313,6 +321,11 @@ function BorrowModal({ isOpen, onClose, token }: ModalCombinedProps) {
             </div>
           )}
         </Button>
+        {bank ? (
+          <div className="pt-4">
+            <TokenVaultWarnings bank={bank} />
+          </div>
+        ) : null}
       </FadeInFadeOut>
     </Modal>
   )

components/modals/WithdrawModal.tsx

@@ -1,4 +1,4 @@
-import { HealthType } from '@blockworks-foundation/mango-v4'
+import { Bank, HealthType } from '@blockworks-foundation/mango-v4'
 import {
   ArrowUpTrayIcon,
   ChevronDownIcon,
@@ -14,7 +14,7 @@ import mangoStore from '@store/mangoStore'
 import { ModalProps } from '../../types/modal'
 import { INPUT_TOKEN_DEFAULT } from '../../utils/constants'
 import { notify } from '../../utils/notifications'
-import { formatFixedDecimals } from '../../utils/numbers'
+import { floorToDecimal, formatFixedDecimals } from '../../utils/numbers'
 import ActionTokenList from '../account/ActionTokenList'
 import ButtonGroup from '../forms/ButtonGroup'
 import Label from '../forms/Label'
@@ -30,6 +30,7 @@ import HealthImpactTokenChange from '@components/HealthImpactTokenChange'
 import useMangoAccount from 'hooks/useMangoAccount'
 import useJupiterMints from 'hooks/useJupiterMints'
 import useMangoGroup from 'hooks/useMangoGroup'
+import TokenVaultWarnings from '@components/shared/TokenVaultWarnings'
 
 interface WithdrawModalProps {
   token?: string
@@ -70,7 +71,7 @@ function WithdrawModal({ isOpen, onClose, token }: ModalCombinedProps) {
     const amount = getMaxWithdrawForBank(group, bank, mangoAccount)
 
     return amount && amount.gt(0)
-      ? amount.toDecimalPlaces(bank.mintDecimals)
+      ? floorToDecimal(amount, bank.mintDecimals)
       : new Decimal(0)
   }, [mangoAccount, bank, group])
 
@@ -127,18 +128,21 @@ function WithdrawModal({ isOpen, onClose, token }: ModalCombinedProps) {
     if (mangoAccount) {
       const banks = group?.banksMapByName
         ? Array.from(group?.banksMapByName, ([key, value]) => {
+            const bank: Bank = value[0]
             const accountBalance = getMaxWithdrawForBank(
               group,
-              value[0],
+              bank,
               mangoAccount
             )
             return {
               key,
               value,
-              accountBalance: accountBalance ? accountBalance.toNumber() : 0,
+              accountBalance: accountBalance
+                ? floorToDecimal(accountBalance, bank.mintDecimals).toNumber()
+                : 0,
               accountBalanceValue:
-                accountBalance && value[0]?.uiPrice
-                  ? accountBalance.toNumber() * value[0]?.uiPrice
+                accountBalance && bank.uiPrice
+                  ? accountBalance.toNumber() * bank.uiPrice
                   : 0,
             }
           })
@@ -300,6 +304,11 @@ function WithdrawModal({ isOpen, onClose, token }: ModalCombinedProps) {
               )}
             </Button>
           </div>
+          {bank ? (
+            <div className="pt-4">
+              <TokenVaultWarnings bank={bank} />
+            </div>
+          ) : null}
         </FadeInFadeOut>
       </div>
     </Modal>

components/shared/TokenVaultWarnings.tsx

@@ -0,0 +1,38 @@
+import { Bank } from '@blockworks-foundation/mango-v4'
+import useMangoAccount from 'hooks/useMangoAccount'
+import useMangoGroup from 'hooks/useMangoGroup'
+import { useMemo } from 'react'
+import { floorToDecimal } from 'utils/numbers'
+import InlineNotification from './InlineNotification'
+
+const TokenVaultWarnings = ({ bank }: { bank: Bank }) => {
+  const { mangoAccount } = useMangoAccount()
+  const { group } = useMangoGroup()
+
+  const balance = useMemo(() => {
+    if (!mangoAccount) return
+    return mangoAccount.getTokenBalanceUi(bank)
+  }, [bank, mangoAccount])
+
+  const vaultBalance = useMemo(() => {
+    if (!group) return
+    return floorToDecimal(
+      group.getTokenVaultBalanceByMintUi(bank.mint),
+      bank.mintDecimals
+    ).toNumber()
+  }, [bank, group])
+
+  return !vaultBalance ? (
+    <InlineNotification
+      type="warning"
+      desc={`${bank.name} vault is too low or fully utilized`}
+    />
+  ) : mangoAccount && balance! > vaultBalance ? (
+    <InlineNotification
+      type="warning"
+      desc={`Available ${bank.name} vault balance is lower than your balance`}
+    />
+  ) : null
+}
+
+export default TokenVaultWarnings

components/swap/SwapForm.tsx

@@ -42,6 +42,7 @@ import { RouteInfo } from 'types/jupiter'
 import useMangoGroup from 'hooks/useMangoGroup'
 import useLocalStorageState from 'hooks/useLocalStorageState'
 import SwapSlider from './SwapSlider'
+import TokenVaultWarnings from '@components/shared/TokenVaultWarnings'
 
 const MAX_DIGITS = 11
 export const withValueLimit = (values: NumberFormatValues): boolean => {
@@ -347,6 +348,15 @@ const SwapForm = () => {
           inputSymbol={inputBank?.name}
           amountOut={selectedRoute ? outAmount : undefined}
         />
+        {group ? (
+          <div className="pt-4">
+            <TokenVaultWarnings
+              bank={
+                inputBank || group.banksMapByName.get(INPUT_TOKEN_DEFAULT)![0]
+              }
+            />
+          </div>
+        ) : null}
       </div>
       <div
         id="swap-step-four"