add size buttons to add stake form

components/StakeForm.tsx

@@ -35,6 +35,8 @@ import { Disclosure } from '@headlessui/react'
 import SheenLoader from './shared/SheenLoader'
 import useLeverageMax from 'hooks/useLeverageMax'
 import { sleep } from 'utils'
+import ButtonGroup from './forms/ButtonGroup'
+import Decimal from 'decimal.js'
 
 const set = mangoStore.getState().set
 
@@ -82,6 +84,7 @@ export const walletBalanceForToken = (
 function StakeForm({ token: selectedToken }: StakeFormProps) {
   const { t } = useTranslation(['common', 'account'])
   const [inputAmount, setInputAmount] = useState('')
+  const [sizePercentage, setSizePercentage] = useState('')
   const submitting = mangoStore((s) => s.submittingBoost)
   const [leverage, setLeverage] = useState(1)
   const [refreshingWalletTokens, setRefreshingWalletTokens] = useState(false)
@@ -93,7 +96,7 @@ function StakeForm({ token: selectedToken }: StakeFormProps) {
     borrowBankBorrowRate,
     leveragedAPY,
     estimatedNetAPY,
-    collateralFeeAPY
+    collateralFeeAPY,
   } = useBankRates(selectedToken, leverage)
   const leverageMax = useLeverageMax(selectedToken) * 0.9 // Multiplied by 0.975 becuase you cant actually get to the end of the inifinite geometric series?
 
@@ -116,7 +119,6 @@ function StakeForm({ token: selectedToken }: StakeFormProps) {
     return price
   }, [stakeBank, borrowBank, leverage])
 
-
   const tokenPositionsFull = useMemo(() => {
     if (!stakeBank || !usedTokens.length || !totalTokens.length) return false
     const hasTokenPosition = usedTokens.find(
@@ -137,6 +139,19 @@ function StakeForm({ token: selectedToken }: StakeFormProps) {
     setInputAmount(max.toFixed())
   }, [tokenMax])
 
+  const handleSizePercentage = useCallback(
+    (percentage: string) => {
+      if (!stakeBank) return
+      setSizePercentage(percentage)
+      const amount = floorToDecimal(
+        new Decimal(percentage).div(100).mul(tokenMax.maxAmount),
+        stakeBank.mintDecimals,
+      )
+      setInputAmount(amount.toFixed())
+    },
+    [tokenMax, stakeBank],
+  )
+
   const amountToBorrow = useMemo(() => {
     const borrowPrice = borrowBank?.uiPrice
     const stakePrice = stakeBank?.uiPrice
@@ -146,7 +161,6 @@ function StakeForm({ token: selectedToken }: StakeFormProps) {
     return borrowAmount
   }, [leverage, borrowBank, stakeBank, inputAmount])
 
-
   const handleRefreshWalletBalances = useCallback(async () => {
     if (!publicKey) return
     const actions = mangoStore.getState().actions
@@ -159,7 +173,7 @@ function StakeForm({ token: selectedToken }: StakeFormProps) {
     const client = mangoStore.getState().client
     const group = mangoStore.getState().group
     const actions = mangoStore.getState().actions
-    const mangoAccountsLength = (mangoStore.getState().mangoAccounts).length
+    const mangoAccountsLength = mangoStore.getState().mangoAccounts.length
     const mangoAccount = mangoStore.getState().mangoAccount.current
 
     if (!group || !stakeBank || !publicKey) return
@@ -290,6 +304,14 @@ function StakeForm({ token: selectedToken }: StakeFormProps) {
                 </div>
               </div>
             </div>
+            <div className="col-span-2 mt-2">
+              <ButtonGroup
+                activeValue={sizePercentage}
+                onChange={(p) => handleSizePercentage(p)}
+                values={['10', '25', '50', '75', '100']}
+                unit="%"
+              />
+            </div>
           </div>
           <div className="mt-4">
             <div className="flex items-center justify-between">

components/UnstakeForm.tsx

@@ -148,7 +148,8 @@ function UnstakeForm({ token: selectedToken }: UnstakeFormProps) {
     const actions = mangoStore.getState().actions
     let mangoAccount = mangoStore.getState().mangoAccount.current
 
-    if (!group || !stakeBank || !borrowBank || !publicKey || !mangoAccount) return
+    if (!group || !stakeBank || !borrowBank || !publicKey || !mangoAccount)
+      return
 
     setSubmitting(true)
     try {
@@ -157,7 +158,10 @@ function UnstakeForm({ token: selectedToken }: UnstakeFormProps) {
           title: 'Sending transaction 1 of 2',
           type: 'info',
         })
-        console.log('unstake and swap', mangoAccount.getTokenBalanceUi(borrowBank))
+        console.log(
+          'unstake and swap',
+          mangoAccount.getTokenBalanceUi(borrowBank),
+        )
 
         const { signature: tx } = await unstakeAndSwap(
           client,
@@ -208,7 +212,7 @@ function UnstakeForm({ token: selectedToken }: UnstakeFormProps) {
         type: 'error',
       })
     }
-  }, [stakeBank, publicKey, inputAmount])
+  }, [borrowBank, stakeBank, publicKey, inputAmount])
 
   const showInsufficientBalance =
     tokenMax.maxAmount < Number(inputAmount) ||
@@ -296,29 +300,32 @@ function UnstakeForm({ token: selectedToken }: UnstakeFormProps) {
               <Disclosure>
                 {({ open }) => (
                   <>
-                    {stakeBank.name == 'USDC'
+                    {stakeBank.name == 'USDC' ? (
-                      ?
                       <></>
-                      :
+                    ) : (
-                      <>                    
+                      <>
-                      <Disclosure.Button className={`w-full rounded-xl border-2 border-th-bkg-3 px-4 py-3 text-left focus:outline-none ${open ? 'rounded-b-none border-b-0' : '' }`}
+                        <Disclosure.Button
-                      >
+                          className={`w-full rounded-xl border-2 border-th-bkg-3 px-4 py-3 text-left focus:outline-none ${
-                        <div className="flex items-center justify-between">
+                            open ? 'rounded-b-none border-b-0' : ''
-                          <p className="font-medium">Staked Amount</p>
+                          }`}
-                          <div className="flex items-center space-x-2">
+                        >
-                            <span className="text-lg font-bold text-th-fgd-1">
+                          <div className="flex items-center justify-between">
-                              <FormatNumericValue
+                            <p className="font-medium">Staked Amount</p>
-                                value={tokenMax.maxAmount}
+                            <div className="flex items-center space-x-2">
-                                decimals={stakeBank.mintDecimals}
+                              <span className="text-lg font-bold text-th-fgd-1">
-                              />
+                                <FormatNumericValue
-                            </span>
+                                  value={tokenMax.maxAmount}
-                            <ChevronDownIcon
+                                  decimals={stakeBank.mintDecimals}
-                              className={`${open ? 'rotate-180' : ''
+                                />
+                              </span>
+                              <ChevronDownIcon
+                                className={`${
+                                  open ? 'rotate-180' : ''
                                 } h-6 w-6 shrink-0 text-th-fgd-1`}
-                            />
+                              />
+                            </div>
                           </div>
-                        </div>
+                        </Disclosure.Button>
-                      </Disclosure.Button>
                         <Disclosure.Panel className="space-y-2 rounded-xl rounded-t-none border-2 border-t-0 border-th-bkg-3 px-4 pb-3">
                           <div className="flex justify-between">
                             <p className="text-th-fgd-4">Staked Amount</p>
@@ -333,10 +340,11 @@ function UnstakeForm({ token: selectedToken }: UnstakeFormProps) {
                             <p className="text-th-fgd-4">USDC borrowed</p>
                             {borrowBank ? (
                               <span
-                                className={`font-bold ${borrowed > 0.001
+                                className={`font-bold ${
-                                  ? 'text-th-fgd-1'
+                                  borrowed > 0.001
-                                  : 'text-th-bkg-4'
+                                    ? 'text-th-fgd-1'
-                                  }`}
+                                    : 'text-th-bkg-4'
+                                }`}
                               >
                                 <FormatNumericValue
                                   value={borrowed}
@@ -345,8 +353,9 @@ function UnstakeForm({ token: selectedToken }: UnstakeFormProps) {
                               </span>
                             ) : null}
                           </div>
-                        </Disclosure.Panel></>
+                        </Disclosure.Panel>
-                    }
+                      </>
+                    )}
                   </>
                 )}
               </Disclosure>