small fixes/updates

components/DepositForm.tsx

@@ -2,7 +2,10 @@ import { ArrowPathIcon, ExclamationCircleIcon } from '@heroicons/react/20/solid'
 import { useWallet } from '@solana/wallet-adapter-react'
 import { useTranslation } from 'next-i18next'
 import React, { useCallback, useMemo, useState } from 'react'
-import NumberFormat, { NumberFormatValues } from 'react-number-format'
+import NumberFormat, {
+  NumberFormatValues,
+  SourceInfo,
+} from 'react-number-format'
 import mangoStore from '@store/mangoStore'
 import { notify } from '../utils/notifications'
 import { formatTokenSymbol } from '../utils/tokens'
@@ -135,6 +138,7 @@ function DespositForm({ token: selectedToken, clientContext }: StakeFormProps) {
         state.submittingBoost = false
       })
       setInputAmount('')
+      setSizePercentage('')
       await sleep(500)
       if (!mangoAccount) {
         await actions.fetchMangoAccounts(publicKey)
@@ -217,10 +221,13 @@ function DespositForm({ token: selectedToken, clientContext }: StakeFormProps) {
                   className={NUMBERFORMAT_CLASSES}
                   placeholder="0.00"
                   value={inputAmount}
-                  onValueChange={(e: NumberFormatValues) => {
+                  onValueChange={(e: NumberFormatValues, info: SourceInfo) => {
                     setInputAmount(
                       !Number.isNaN(Number(e.value)) ? e.value : '',
                     )
+                    if (info.source === 'event') {
+                      setSizePercentage('')
+                    }
                   }}
                   isAllowed={withValueLimit}
                 />

components/EditLeverageForm.tsx

@@ -120,10 +120,6 @@ function EditLeverageForm({
 
   const [leverage, setLeverage] = useState(current_leverage)
 
-  useEffect(() => {
-    setLeverage(current_leverage)
-  }, [current_leverage])
-
   const { financialMetrics, borrowBankBorrowRate } = useBankRates(
     selectedToken,
     leverage,

components/StakeForm.tsx

@@ -6,7 +6,10 @@ import {
 import { useWallet } from '@solana/wallet-adapter-react'
 import { useTranslation } from 'next-i18next'
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
-import NumberFormat, { NumberFormatValues } from 'react-number-format'
+import NumberFormat, {
+  NumberFormatValues,
+  SourceInfo,
+} from 'react-number-format'
 import mangoStore from '@store/mangoStore'
 import { notify } from '../utils/notifications'
 import { TokenAccount, formatTokenSymbol } from '../utils/tokens'
@@ -250,6 +253,7 @@ function StakeForm({ token: selectedToken, clientContext }: StakeFormProps) {
         state.submittingBoost = false
       })
       setInputAmount('')
+      setSizePercentage('')
       await sleep(500)
       if (!mangoAccount) {
         await actions.fetchMangoAccounts(publicKey)
@@ -367,10 +371,13 @@ function StakeForm({ token: selectedToken, clientContext }: StakeFormProps) {
                   className={NUMBERFORMAT_CLASSES}
                   placeholder="0.00"
                   value={inputAmount}
-                  onValueChange={(e: NumberFormatValues) => {
+                  onValueChange={(e: NumberFormatValues, info: SourceInfo) => {
                     setInputAmount(
                       !Number.isNaN(Number(e.value)) ? e.value : '',
                     )
+                    if (info.source === 'event') {
+                      setSizePercentage('')
+                    }
                   }}
                   isAllowed={withValueLimit}
                 />
@@ -385,7 +392,7 @@ function StakeForm({ token: selectedToken, clientContext }: StakeFormProps) {
               </div>
             </div>
             <div className="col-span-2 mt-2">
-              {tokenMax.maxAmount === 0 ? (
+              {connected && groupLoaded && tokenMax.maxAmount === 0 ? (
                 <InlineNotification
                   type="warning"
                   desc={

components/UnstakeForm.tsx

@@ -6,7 +6,10 @@ import {
 import { useWallet } from '@solana/wallet-adapter-react'
 import { useTranslation } from 'next-i18next'
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
-import NumberFormat, { NumberFormatValues } from 'react-number-format'
+import NumberFormat, {
+  NumberFormatValues,
+  SourceInfo,
+} from 'react-number-format'
 import mangoStore from '@store/mangoStore'
 import { notify } from '../utils/notifications'
 import { formatTokenSymbol } from '../utils/tokens'
@@ -222,6 +225,7 @@ function UnstakeForm({
       })
       setSubmitting(false)
       setInputAmount('')
+      setSizePercentage('')
       await sleep(100)
       await actions.fetchMangoAccounts(publicKey)
       await actions.reloadMangoAccount(clientContext)
@@ -266,14 +270,27 @@ function UnstakeForm({
     }
   }, [jlpGroup, lstGroup, mangoAccount, stakeBank, clientContext])
 
+  const availableVaultBalance = useMemo(() => {
+    if (!stakeBank) return 0
+    const group = clientContext === 'jlp' ? jlpGroup : lstGroup
+    if (!group) return 0
+    const vaultBalance = group.getTokenVaultBalanceByMintUi(stakeBank.mint)
+    const vaultDeposits = stakeBank.uiDeposits()
+    const available =
+      vaultBalance - vaultDeposits * stakeBank.minVaultToDepositsRatio
+    return available
+  }, [stakeBank, jlpGroup, lstGroup, clientContext])
+
   const showInsufficientBalance =
     tokenMax.maxAmount < Number(inputAmount) ||
     (selectedToken === 'USDC' && maxSolDeposit <= 0)
 
-  const lowVaultBalance =
+  const lowVaultBalance = maxWithdraw > availableVaultBalance
-    Math.floor(tokenMax.maxAmount * 100000) <
+
-      Math.floor(Number(inputAmount) * 100000) &&
+  // const lowVaultBalance =
-    Number(inputAmount) > maxWithdraw
+  //   Math.floor(tokenMax.maxAmount * 100000) <
+  //     Math.floor(Number(inputAmount) * 100000) &&
+  //   Number(inputAmount) > maxWithdraw
 
   useEffect(() => {
     const group = mangoStore.getState().group[clientContext]
@@ -326,10 +343,13 @@ function UnstakeForm({
                   className={NUMBERFORMAT_CLASSES}
                   placeholder="0.00"
                   value={inputAmount}
-                  onValueChange={(e: NumberFormatValues) => {
+                  onValueChange={(e: NumberFormatValues, info: SourceInfo) => {
                     setInputAmount(
                       !Number.isNaN(Number(e.value)) ? e.value : '',
                     )
+                    if (info.source === 'event') {
+                      setSizePercentage('')
+                    }
                   }}
                   isAllowed={withValueLimit}
                 />
@@ -485,7 +505,7 @@ function UnstakeForm({
           <div className="mt-4">
             <InlineNotification
               type="error"
-              desc={`The ${selectedToken} vault balance is too low. ${selectedToken} deposits are required to unboost.`}
+              desc={`The available ${selectedToken} vault balance is low. ${selectedToken} deposits are required to unboost your full position.`}
             />
           </div>
         ) : null}