fix available to borrow

components/borrow/AssetsBorrowsTable.tsx

@@ -17,6 +17,7 @@ import mangoStore from '@store/mangoStore'
 import BorrowRepayModal from '@components/modals/BorrowRepayModal'
 import BankAmountWithValue from '@components/shared/BankAmountWithValue'
 import useBanksWithBalances from 'hooks/useBanksWithBalances'
+import { getAvailableToBorrow } from './YourBorrowsTable'
 
 const AssetsBorrowsTable = () => {
   const { t } = useTranslation(['common', 'token'])
@@ -28,7 +29,7 @@ const AssetsBorrowsTable = () => {
   const { mangoTokens } = useJupiterMints()
   const { width } = useViewport()
   const showTableView = width ? width > breakpoints.md : false
-  const banks = useBanksWithBalances('maxBorrow')
+  const banks = useBanksWithBalances()
 
   const handleShowBorrowModal = useCallback((token: string) => {
     setSelectedToken(token)
@@ -74,6 +75,8 @@ const AssetsBorrowsTable = () => {
               }
               const borrows = bank.uiBorrows()
 
+              const available = group ? getAvailableToBorrow(b, group) : 0
+
               return (
                 <TrBody key={bank.name}>
                   <Td>
@@ -101,8 +104,9 @@ const AssetsBorrowsTable = () => {
                   <Td>
                     <div className="flex flex-col text-right">
                       <BankAmountWithValue
-                        amount={b.maxBorrow}
+                        amount={available}
                         bank={bank}
+                        fixDecimals={false}
                         stacked
                       />
                     </div>
@@ -141,6 +145,8 @@ const AssetsBorrowsTable = () => {
               )?.logoURI
             }
 
+            const available = group ? getAvailableToBorrow(b, group) : 0
+
             return (
               <div
                 key={bank.name}
@@ -162,7 +168,11 @@ const AssetsBorrowsTable = () => {
                       <p className="mb-0.5 text-right text-xs">
                         {t('available')}
                       </p>
-                      <BankAmountWithValue amount={b.maxBorrow} bank={bank} />
+                      <BankAmountWithValue
+                        amount={available}
+                        fixDecimals={false}
+                        bank={bank}
+                      />
                     </div>
                     <div>
                       <p className="mb-0.5 text-right text-xs">{t('rate')}</p>

components/borrow/BorrowPage.tsx

@@ -4,7 +4,7 @@ import useLocalStorageState from 'hooks/useLocalStorageState'
 import useMangoAccount from 'hooks/useMangoAccount'
 import useMangoGroup from 'hooks/useMangoGroup'
 import { useTranslation } from 'next-i18next'
-import { ANIMATION_SETTINGS_KEY } from 'utils/constants'
+import { ANIMATION_SETTINGS_KEY, USDC_MINT } from 'utils/constants'
 import FlipNumbers from 'react-flip-numbers'
 import Button from '@components/shared/Button'
 import { formatCurrencyValue } from 'utils/numbers'
@@ -15,12 +15,13 @@ import { ArrowDownRightIcon, ArrowUpLeftIcon } from '@heroicons/react/20/solid'
 import { useWallet } from '@solana/wallet-adapter-react'
 import BorrowRepayModal from '@components/modals/BorrowRepayModal'
 import CreateAccountModal from '@components/modals/CreateAccountModal'
-import { toUiDecimalsForQuote } from '@blockworks-foundation/mango-v4'
 import TabButtons from '@components/shared/TabButtons'
 import { useViewport } from 'hooks/useViewport'
 import { breakpoints } from 'utils/theme'
 import FormatNumericValue from '@components/shared/FormatNumericValue'
 import useBanksWithBalances from 'hooks/useBanksWithBalances'
+import { PublicKey } from '@solana/web3.js'
+import { getMaxWithdrawForBank } from '@components/swap/useTokenMax'
 
 const BorrowPage = () => {
   const { t } = useTranslation(['common', 'borrow'])
@@ -33,7 +34,7 @@ const BorrowPage = () => {
   const { connected } = useWallet()
   const { width } = useViewport()
   const fullWidthTabs = width ? width < breakpoints.sm : false
-  const banks = useBanksWithBalances('borrowedAmount')
+  const banks = useBanksWithBalances()
 
   const handleBorrowModal = () => {
     if (!connected || mangoAccount) {
@@ -70,9 +71,14 @@ const BorrowPage = () => {
 
   const [collateralRemaining, collateralRemainingRatio] = useMemo(() => {
     if (mangoAccount && group) {
-      const remaining = toUiDecimalsForQuote(
+      const usdcBank = group.getFirstBankByMint(new PublicKey(USDC_MINT))
-        mangoAccount.getCollateralValue(group).toNumber()
+      const remaining = getMaxWithdrawForBank(
-      )
+        group,
+        usdcBank,
+        mangoAccount,
+        true
+      ).toNumber()
+
       if (borrowValue) {
         const total = borrowValue + remaining
         const ratio = (remaining / total) * 100

components/borrow/YourBorrowsTable.tsx

@@ -1,4 +1,4 @@
-import { Bank } from '@blockworks-foundation/mango-v4'
+import { Bank, Group } from '@blockworks-foundation/mango-v4'
 import useJupiterMints from 'hooks/useJupiterMints'
 import {
   ArrowDownRightIcon,
@@ -17,7 +17,6 @@ import useMangoGroup from 'hooks/useMangoGroup'
 import ConnectEmptyState from '../shared/ConnectEmptyState'
 import { useWallet } from '@solana/wallet-adapter-react'
 import Decimal from 'decimal.js'
-import { getMaxWithdrawForBank } from '@components/swap/useTokenMax'
 import { IconButton } from '@components/shared/Button'
 import { useCallback, useState } from 'react'
 import BorrowRepayModal from '@components/modals/BorrowRepayModal'
@@ -25,6 +24,27 @@ import Tooltip from '@components/shared/Tooltip'
 import BankAmountWithValue from '@components/shared/BankAmountWithValue'
 import { BankWithBalance } from 'hooks/useBanksWithBalances'
 
+export const getAvailableToBorrow = (
+  bankWithBal: BankWithBalance,
+  group: Group
+) => {
+  const { balance, bank, maxBorrow } = bankWithBal
+  const { mint, mintDecimals, minVaultToDepositsRatio } = bankWithBal.bank
+  const deposits = bank.uiDeposits()
+
+  const availableVaultBalance =
+    group.getTokenVaultBalanceByMintUi(mint) -
+    deposits * minVaultToDepositsRatio
+
+  const availableAccountBorrow = balance > 0 ? maxBorrow - balance : maxBorrow
+
+  const available = Decimal.min(
+    availableAccountBorrow.toFixed(bank.mintDecimals),
+    Decimal.max(0, availableVaultBalance.toFixed(mintDecimals))
+  )
+  return available
+}
+
 const YourBorrowsTable = ({ banks }: { banks: BankWithBalance[] }) => {
   const { t } = useTranslation(['common', 'trade'])
   const [showBorrowModal, setShowBorrowModal] = useState(false)
@@ -78,7 +98,9 @@ const YourBorrowsTable = ({ banks }: { banks: BankWithBalance[] }) => {
                   )?.logoURI
                 }
 
-                const available = b.maxBorrow
+                const available = group
+                  ? getAvailableToBorrow(b, group)
+                  : new Decimal(0)
 
                 const borrowedAmount = b.borrowedAmount
 
@@ -112,6 +134,7 @@ const YourBorrowsTable = ({ banks }: { banks: BankWithBalance[] }) => {
                       <BankAmountWithValue
                         amount={available}
                         bank={bank}
+                        fixDecimals={false}
                         stacked
                       />
                     </Td>
@@ -132,7 +155,7 @@ const YourBorrowsTable = ({ banks }: { banks: BankWithBalance[] }) => {
                         </Tooltip>
                         <Tooltip content={`${t('borrow')} ${bank.name}`}>
                           <IconButton
-                            disabled={available === 0}
+                            disabled={available.eq(0)}
                             onClick={() =>
                               handleShowActionModals(bank.name, 'borrow')
                             }
@@ -159,9 +182,8 @@ const YourBorrowsTable = ({ banks }: { banks: BankWithBalance[] }) => {
               )?.logoURI
             }
 
-            const available =
+            const available = group
-              group && mangoAccount
+              ? getAvailableToBorrow(b, group)
-                ? getMaxWithdrawForBank(group, bank, mangoAccount, true)
               : new Decimal(0)
 
             const borrowedAmount = mangoAccount

components/shared/TokenVaultWarnings.tsx

@@ -32,20 +32,20 @@ const TokenVaultWarnings = ({
     return [maxWithdraw, maxBorrow]
   }, [bank, mangoAccount, group])
 
-  const availableVaultBalance = useMemo(() => {
+  const [availableVaultBalance, vaultBalance] = useMemo(() => {
-    if (!bank || !group) return 0
+    if (!bank || !group) return [0, 0]
     const vaultBalance = group.getTokenVaultBalanceByMintUi(bank.mint)
     const vaultDeposits = bank.uiDeposits()
     const available =
       vaultBalance - vaultDeposits * bank.minVaultToDepositsRatio
-    return available
+    return [available, vaultBalance]
   }, [bank, group])
 
   const showWarning = useMemo(() => {
     if (!bank || !group) return false
     if (
       (type === 'borrow' && maxBorrow > availableVaultBalance) ||
-      (type === 'swap' && swapBorrowMax.toNumber() > availableVaultBalance) ||
+      (type === 'swap' && swapBorrowMax.toNumber() > vaultBalance) ||
       (type === 'withdraw' && maxWithdraw > availableVaultBalance)
     ) {
       return true

components/stats/TokenStats.tsx

@@ -21,6 +21,7 @@ import mangoStore from '@store/mangoStore'
 import FormatNumericValue from '@components/shared/FormatNumericValue'
 import BankAmountWithValue from '@components/shared/BankAmountWithValue'
 import useBanksWithBalances from 'hooks/useBanksWithBalances'
+import Decimal from 'decimal.js'
 
 const TokenStats = () => {
   const { t } = useTranslation(['common', 'token'])
@@ -48,7 +49,7 @@ const TokenStats = () => {
     router.push(`/token/${bank.name}`, undefined, { shallow: true })
   }
 
-  return (
+  return group ? (
     <ContentBox hideBorder hidePadding>
       {showTableView ? (
         <Table>
@@ -102,8 +103,13 @@ const TokenStats = () => {
               }
               const deposits = bank.uiDeposits()
               const borrows = bank.uiBorrows()
-              const available =
+              const availableVaultBalance =
-                deposits - deposits * bank.minVaultToDepositsRatio - borrows
+                group.getTokenVaultBalanceByMintUi(bank.mint) -
+                deposits * bank.minVaultToDepositsRatio
+              const available = Decimal.max(
+                0,
+                availableVaultBalance.toFixed(bank.mintDecimals)
+              )
 
               return (
                 <TrBody key={bank.name}>
@@ -215,9 +221,14 @@ const TokenStats = () => {
             }
             const deposits = bank.uiDeposits()
             const borrows = bank.uiBorrows()
+            const availableVaultBalance =
+              group.getTokenVaultBalanceByMintUi(bank.mint) -
+              deposits * bank.minVaultToDepositsRatio
+            const available = Decimal.max(
+              0,
+              availableVaultBalance.toFixed(bank.mintDecimals)
+            )
             const price = bank.uiPrice
-            const available =
-              deposits - deposits * bank.minVaultToDepositsRatio - borrows
             return (
               <div
                 key={bank.name}
@@ -330,7 +341,7 @@ const TokenStats = () => {
                         />{' '}
                         <span className="text-th-fgd-4">
                           <FormatNumericValue
-                            value={(available * price).toFixed(2)}
+                            value={(available.toNumber() * price).toFixed(2)}
                             isUsd
                           />
                         </span>
@@ -369,7 +380,7 @@ const TokenStats = () => {
         </div>
       )}
     </ContentBox>
-  )
+  ) : null
 }
 
 export default TokenStats

components/trade/TradeHistory.tsx

@@ -59,7 +59,7 @@ const parsePerpEvent = (mangoAccountAddress: string, event: PerpFillEvent) => {
     size: event.quantity,
     price: event.price,
     value,
-    feeCost: (feeRate * value).toFixed(4),
+    feeCost: (feeRate.toNumber() * value).toFixed(4),
     side,
   }
 }