better warnings for deposit limits (#377)

components/swap/PercentageSelectButtons.tsx

@@ -18,11 +18,7 @@ const PercentageSelectButtons = ({
   values?: string[]
 }) => {
   const [sizePercentage, setSizePercentage] = useState('')
-  const {
-    amount: tokenMax,
-    amountWithBorrow,
-    decimals,
-  } = useTokenMax(useMargin)
+  const { amount: tokenMax, amountWithBorrow, decimals } = useTokenMax()
 
   const maxAmount = useMemo(() => {
     if (!tokenMax && !amountWithBorrow) return new Decimal(0)

components/swap/SwapForm.tsx

@@ -22,7 +22,6 @@ import useMangoAccount from 'hooks/useMangoAccount'
 import { useWallet } from '@solana/wallet-adapter-react'
 import { useRouter } from 'next/router'
 import SwapSummaryInfo from './SwapSummaryInfo'
-import TokenMaxAmountWarnings from '@components/shared/TokenMaxAmountWarnings'
 
 const set = mangoStore.getState().set
 
@@ -224,9 +223,6 @@ const SwapForm = () => {
                 />
               </div>
             ) : null}
-            {!walletSwap && (
-              <TokenMaxAmountWarnings bank={outputBank} className="mb-4" />
-            )}
             <SwapSummaryInfo
               walletSwap={walletSwap}
               setShowSettings={setShowSettings}

components/swap/SwapSlider.tsx

@@ -4,6 +4,7 @@ import { TokenMaxResults } from './useTokenMax'
 import mangoStore from '@store/mangoStore'
 import { useMemo } from 'react'
 import { floorToDecimal } from 'utils/numbers'
+import TokenMaxAmountWarnings from '@components/shared/TokenMaxAmountWarnings'
 
 const SwapSlider = ({
   amount,
@@ -23,8 +24,13 @@ const SwapSlider = ({
   handleEndDrag?: () => void
 }) => {
   const { mangoAccount } = useMangoAccount()
-  const { amount: tokenMax, amountWithBorrow } = maxAmount(useMargin)
-  const { inputBank } = mangoStore((s) => s.swap)
+  const {
+    amount: tokenMax,
+    amountWithBorrow,
+    amountIsLimited,
+    amountWithBorrowIsLimited,
+  } = maxAmount(useMargin)
+  const { inputBank, outputBank } = mangoStore((s) => s.swap)
 
   const max = useMemo(() => {
     if (!inputBank) return 0
@@ -36,24 +42,42 @@ const SwapSlider = ({
   return (
     <>
       {!mangoAccount ? (
-        <LeverageSlider
-          amount={amount}
-          leverageMax={100}
-          onChange={onChange}
-          step={step}
-          handleStartDrag={handleStartDrag}
-          handleEndDrag={handleEndDrag}
-        />
+        <>
+          <LeverageSlider
+            amount={amount}
+            leverageMax={100}
+            onChange={onChange}
+            step={step}
+            handleStartDrag={handleStartDrag}
+            handleEndDrag={handleEndDrag}
+          />
+          <TokenMaxAmountWarnings
+            className="mt-4"
+            limitNearlyReached={
+              useMargin ? amountWithBorrowIsLimited : amountIsLimited
+            }
+            bank={outputBank}
+          />
+        </>
       ) : (
-        <LeverageSlider
-          amount={amount}
-          decimals={inputBank?.mintDecimals}
-          leverageMax={max}
-          onChange={onChange}
-          step={step}
-          handleStartDrag={handleStartDrag}
-          handleEndDrag={handleEndDrag}
-        />
+        <>
+          <LeverageSlider
+            amount={amount}
+            decimals={inputBank?.mintDecimals}
+            leverageMax={max}
+            onChange={onChange}
+            step={step}
+            handleStartDrag={handleStartDrag}
+            handleEndDrag={handleEndDrag}
+          />
+          <TokenMaxAmountWarnings
+            limitNearlyReached={
+              useMargin ? amountWithBorrowIsLimited : amountIsLimited
+            }
+            className="mt-4"
+            bank={outputBank}
+          />
+        </>
       )}
     </>
   )

components/swap/useTokenMax.tsx

@@ -6,6 +6,7 @@ import { floorToDecimal } from '../../utils/numbers'
 import useMangoAccount from '../../hooks/useMangoAccount'
 import useMangoGroup from 'hooks/useMangoGroup'
 import { PublicKey } from '@solana/web3.js'
+import { toUiDecimals } from '@blockworks-foundation/mango-v4'
 
 export const getMaxBorrowForBank = (
   group: Group,
@@ -35,6 +36,7 @@ const getMaxSourceForSwap = (
       inputMint,
       outputMint,
     )
+
     return rawMaxUiAmountWithBorrow
   } catch (e) {
     console.log(`failed to get max source`, e)
@@ -70,11 +72,7 @@ export const getTokenInMax = (
   const outputBank = group.getFirstBankByMint(outputMint)
 
   if (!group || !inputBank || !mangoAccount || !outputBank) {
-    return {
-      amount: new Decimal(0.0),
-      decimals: 6,
-      amountWithBorrow: new Decimal(0.0),
-    }
+    return tokenMaxFallback
   }
 
   const inputReduceOnly = inputBank.areBorrowsReduceOnly()
@@ -122,6 +120,19 @@ export const getTokenInMax = (
     amount: maxAmount,
     amountWithBorrow: maxAmountWithBorrow,
     decimals: inputBank.mintDecimals,
+    amountIsLimited:
+      !!outputBank.getRemainingDepositLimit() &&
+      maxAmount.equals(
+        floorToDecimal(rawMaxUiAmountWithBorrow, inputBank.mintDecimals),
+      ),
+    amountWithBorrowIsLimited:
+      !!outputBank.getRemainingDepositLimit() &&
+      toUiDecimals(
+        outputBank.getRemainingDepositLimit()!,
+        outputBank.mintDecimals,
+      ) *
+        outputBank.uiPrice >=
+        inputBank.uiPrice * rawMaxUiAmountWithBorrow,
   }
 }
 
@@ -129,9 +140,11 @@ export interface TokenMaxResults {
   amount: Decimal
   amountWithBorrow: Decimal
   decimals: number
+  amountIsLimited: boolean
+  amountWithBorrowIsLimited: boolean
 }
 
-export const useTokenMax = (useMargin = true): TokenMaxResults => {
+export const useTokenMax = (): TokenMaxResults => {
   const { mangoAccount } = useMangoAccount()
   const { group } = useMangoGroup()
   const inputBank = mangoStore((s) => s.swap.inputBank)
@@ -150,12 +163,8 @@ export const useTokenMax = (useMargin = true): TokenMaxResults => {
     } catch (e) {
       console.warn('Error in useTokenMax:  ', e)
     }
-    return {
-      amount: new Decimal(0),
-      amountWithBorrow: new Decimal(0),
-      decimals: 6,
-    }
-  }, [mangoAccount, group, useMargin, inputBank, outputBank])
+    return tokenMaxFallback
+  }, [mangoAccount, group, inputBank, outputBank])
 
   return tokenInMax
 }
@@ -165,11 +174,7 @@ export const useAbsInputPosition = (): TokenMaxResults => {
   const { inputBank } = mangoStore((s) => s.swap)
 
   if (!mangoAccount || !inputBank) {
-    return {
-      amount: new Decimal(0),
-      amountWithBorrow: new Decimal(0),
-      decimals: 6,
-    }
+    return tokenMaxFallback
   }
 
   const amount = new Decimal(
@@ -179,5 +184,15 @@ export const useAbsInputPosition = (): TokenMaxResults => {
     decimals: inputBank.mintDecimals,
     amount: amount,
     amountWithBorrow: amount,
+    amountIsLimited: false,
+    amountWithBorrowIsLimited: false,
   }
 }
+
+const tokenMaxFallback = {
+  amount: new Decimal(0),
+  amountWithBorrow: new Decimal(0),
+  decimals: 6,
+  amountIsLimited: false,
+  amountWithBorrowIsLimited: false,
+}

components/trade/MaxMarketSwapAmount.tsx

@@ -16,11 +16,7 @@ const MaxMarketSwapAmount = ({
   const { t } = useTranslation('common')
   const { price: oraclePrice, serumOrPerpMarket } = useSelectedMarket()
   const mangoAccountLoading = mangoStore((s) => s.mangoAccount.initialLoad)
-  const {
-    amount: tokenMax,
-    amountWithBorrow,
-    decimals,
-  } = useTokenMax(useMargin)
+  const { amount: tokenMax, amountWithBorrow, decimals } = useTokenMax()
 
   const tickDecimals = useMemo(() => {
     if (!serumOrPerpMarket) return decimals

components/trade/SpotMarketOrderSwapForm.tsx

@@ -53,7 +53,6 @@ import InlineNotification from '@components/shared/InlineNotification'
 import { debounce } from 'lodash'
 import { isTokenInsured } from '@components/DepositForm'
 import UninsuredNotification from '@components/shared/UninsuredNotification'
-import TokenMaxAmountWarnings from '@components/shared/TokenMaxAmountWarnings'
 
 const set = mangoStore.getState().set
 
@@ -86,9 +85,7 @@ export default function SpotMarketOrderSwapForm() {
     selectedMarket,
     serumOrPerpMarket,
   } = useSelectedMarket()
-  const { amount: tokenMax, amountWithBorrow } = useTokenMax(
-    savedCheckboxSettings.margin,
-  )
+  const { amount: tokenMax, amountWithBorrow } = useTokenMax()
 
   const [inputBank, outputBank] = useMemo(() => {
     const group = mangoStore.getState().group
@@ -615,7 +612,6 @@ export default function SpotMarketOrderSwapForm() {
               />
             </div>
           ) : null}
-          <TokenMaxAmountWarnings bank={outputBank} className="mb-4" />
           {!isInsured ? (
             <div className="mb-4">
               <UninsuredNotification name={outputBank?.name} />

components/trade/SpotSlider.tsx

@@ -5,14 +5,14 @@ import {
   Serum3Market,
 } from '@blockworks-foundation/mango-v4'
 import LeverageSlider from '@components/shared/LeverageSlider'
+import TokenMaxAmountWarnings from '@components/shared/TokenMaxAmountWarnings'
 import mangoStore from '@store/mangoStore'
 import useMangoAccount from 'hooks/useMangoAccount'
+import useMangoGroup from 'hooks/useMangoGroup'
 import useSelectedMarket from 'hooks/useSelectedMarket'
 import { useCallback, useMemo } from 'react'
 import { GenericMarket } from 'types'
 import { floorToDecimal, getDecimalCount } from 'utils/numbers'
-import TokenMaxAmountWarnings from '@components/shared/TokenMaxAmountWarnings'
-import useMangoGroup from 'hooks/useMangoGroup'
 
 export const useSpotMarketMax = (
   mangoAccount: MangoAccount | undefined,
@@ -106,7 +106,6 @@ const SpotSlider = ({
 }) => {
   const { baseSize, quoteSize, side } = mangoStore((s) => s.tradeForm)
   const { selectedMarket, price: marketPrice } = useSelectedMarket()
-  const { group } = useMangoGroup()
   const { mangoAccount } = useMangoAccount()
   const { max: standardOrderMax, isLimited } = useSpotMarketMax(
     mangoAccount,
@@ -114,6 +113,8 @@ const SpotSlider = ({
     side,
     useMargin,
   )
+  const { group } = useMangoGroup()
+
   const targetBank =
     selectedMarket &&
     selectedMarket instanceof Serum3Market &&
@@ -210,7 +211,7 @@ const SpotSlider = ({
         <TokenMaxAmountWarnings
           limitNearlyReached={isLimited}
           bank={targetBank}
-          className="mt-4"
+          className="mb-4"
         />
       )}
     </div>

package.json

@@ -24,7 +24,7 @@
   "dependencies": {
     "@blockworks-foundation/mango-feeds": "0.1.7",
     "@blockworks-foundation/mango-mints-redemption": "^0.0.10",
-    "@blockworks-foundation/mango-v4": "0.21.24",
+    "@blockworks-foundation/mango-v4": "0.21.27",
     "@blockworks-foundation/mango-v4-settings": "0.4.10",
     "@blockworks-foundation/mangolana": "0.0.14",
     "@headlessui/react": "1.6.6",

yarn.lock

@@ -350,10 +350,10 @@
     bn.js "^5.2.1"
     eslint-config-prettier "^9.0.0"
 
-"@blockworks-foundation/mango-v4@0.21.24":
-  version "0.21.24"
-  resolved "https://registry.yarnpkg.com/@blockworks-foundation/mango-v4/-/mango-v4-0.21.24.tgz#537103ed9c613d2ee6cce7138269ad43e7e10b72"
-  integrity sha512-dDcW1lWgsXA7jUMsQACWD6XBJYUQQ01rCJk8WqOUtJqoXEbGACJQO5LuAxEj03jdnc4PbqYJC2b56xqFloYnWw==
+"@blockworks-foundation/mango-v4@0.21.27":
+  version "0.21.27"
+  resolved "https://registry.yarnpkg.com/@blockworks-foundation/mango-v4/-/mango-v4-0.21.27.tgz#1abb4ab908e6f9ae69db47b54dc7d6188e321cb1"
+  integrity sha512-lBS5bGkfokNvS6Q+rXjHFnfDVpJ8tmaV4WxyDTz6JYnGDQtui2JimpZ78sO4R7cqiaH6QEUSIPykpsA4dLaccg==
   dependencies:
     "@blockworks-foundation/mango-v4-settings" "0.4.10"
     "@blockworks-foundation/mangolana" "0.0.14"