fix

components/DepositForm.tsx

@@ -1,11 +1,7 @@
-import {
+import { ArrowPathIcon, ExclamationCircleIcon } from '@heroicons/react/20/solid'
-    ArrowPathIcon,
-    ChevronDownIcon,
-    ExclamationCircleIcon,
-} from '@heroicons/react/20/solid'
 import { useWallet } from '@solana/wallet-adapter-react'
 import { useTranslation } from 'next-i18next'
-import React, { useCallback, useEffect, useMemo, useState } from 'react'
+import React, { useCallback, useMemo, useState } from 'react'
 import NumberFormat, { NumberFormatValues } from 'react-number-format'
 import mangoStore from '@store/mangoStore'
 import { notify } from '../utils/notifications'
@@ -24,17 +20,11 @@ import SecondaryConnectButton from './shared/SecondaryConnectButton'
 import useMangoAccountAccounts from 'hooks/useMangoAccountAccounts'
 import InlineNotification from './shared/InlineNotification'
 import Link from 'next/link'
-import LeverageSlider from './shared/LeverageSlider'
 import useMangoGroup from 'hooks/useMangoGroup'
-import FormatNumericValue from './shared/FormatNumericValue'
+import { depositAndCreate } from 'utils/transactions'
-import { depositAndCreate, stakeAndCreate } from 'utils/transactions'
 // import { MangoAccount } from '@blockworks-foundation/mango-v4'
 import { AnchorProvider } from '@project-serum/anchor'
-import useBankRates from 'hooks/useBankRates'
-import { Disclosure } from '@headlessui/react'
 import SheenLoader from './shared/SheenLoader'
-import useLeverageMax from 'hooks/useLeverageMax'
-import { STAKEABLE_TOKENS_DATA } from 'utils/constants'
 import { sleep } from 'utils'
 import ButtonGroup from './forms/ButtonGroup'
 import Decimal from 'decimal.js'
@@ -42,32 +32,31 @@ import Decimal from 'decimal.js'
 const set = mangoStore.getState().set
 
 export const NUMBERFORMAT_CLASSES =
-    'inner-shadow-top-sm w-full rounded-xl border border-th-bkg-3 bg-th-input-bkg p-3 pl-12 pr-4 text-left font-bold text-xl text-th-fgd-1 focus:outline-none focus-visible:border-th-fgd-4 md:hover:border-th-bkg-4 md:hover:focus-visible:border-th-fgd-4'
+  'inner-shadow-top-sm w-full rounded-xl border border-th-bkg-3 bg-th-input-bkg p-3 pl-12 pr-4 text-left font-bold text-xl text-th-fgd-1 focus:outline-none focus-visible:border-th-fgd-4 md:hover:border-th-bkg-4 md:hover:focus-visible:border-th-fgd-4'
 
 interface StakeFormProps {
-    token: string
+  token: string
 }
 
 export const walletBalanceForToken = (
-    walletTokens: TokenAccount[],
+  walletTokens: TokenAccount[],
-    token: string,
+  token: string,
 ): { maxAmount: number; maxDecimals: number } => {
-    const group = mangoStore.getState().group
+  const group = mangoStore.getState().group
-    const bank = group?.banksMapByName.get(token)?.[0]
+  const bank = group?.banksMapByName.get(token)?.[0]
 
-    let walletToken
+  let walletToken
-    if (bank) {
+  if (bank) {
-        const tokenMint = bank?.mint
+    const tokenMint = bank?.mint
-        walletToken = tokenMint
+    walletToken = tokenMint
-            ? walletTokens.find((t) => t.mint.toString() === tokenMint.toString())
+      ? walletTokens.find((t) => t.mint.toString() === tokenMint.toString())
-            : null
+      : null
-    }
+  }
 
-
+  return {
-    return {
+    maxAmount: walletToken ? walletToken.uiAmount : 0,
-        maxAmount: walletToken ? walletToken.uiAmount : 0,
+    maxDecimals: bank?.mintDecimals || 6,
-        maxDecimals: bank?.mintDecimals || 6,
+  }
-    }
 }
 
 // const getNextAccountNumber = (accounts: MangoAccount[]): number => {
@@ -84,242 +73,240 @@ export const walletBalanceForToken = (
 // }
 
 function DespositForm({ token: selectedToken }: StakeFormProps) {
-    const { t } = useTranslation(['common', 'account'])
+  const { t } = useTranslation(['common', 'account'])
-    const [inputAmount, setInputAmount] = useState('')
+  const [inputAmount, setInputAmount] = useState('')
-    const submitting = mangoStore((s) => s.submittingBoost)
+  const submitting = mangoStore((s) => s.submittingBoost)
-    const [refreshingWalletTokens, setRefreshingWalletTokens] = useState(false)
+  const [refreshingWalletTokens, setRefreshingWalletTokens] = useState(false)
-    const { maxSolDeposit } = useSolBalance()
+  const { maxSolDeposit } = useSolBalance()
-    const { usedTokens, totalTokens } = useMangoAccountAccounts()
+  const { usedTokens, totalTokens } = useMangoAccountAccounts()
-    const { group } = useMangoGroup()
+  const { group } = useMangoGroup()
-    const groupLoaded = mangoStore((s) => s.groupLoaded)
+  const groupLoaded = mangoStore((s) => s.groupLoaded)
-    const { connected, publicKey } = useWallet()
+  const { connected, publicKey } = useWallet()
-    const walletTokens = mangoStore((s) => s.wallet.tokens)
+  const walletTokens = mangoStore((s) => s.wallet.tokens)
-    const [sizePercentage, setSizePercentage] = useState('')
+  const [sizePercentage, setSizePercentage] = useState('')
 
-    const depositBank = useMemo(() => {
+  const depositBank = useMemo(() => {
-        return group?.banksMapByName.get(selectedToken)?.[0]
+    return group?.banksMapByName.get(selectedToken)?.[0]
-    }, [selectedToken, group])
+  }, [selectedToken, group])
 
-    const tokenMax = useMemo(() => {
+  const tokenMax = useMemo(() => {
-        return walletBalanceForToken(walletTokens, selectedToken)
+    return walletBalanceForToken(walletTokens, selectedToken)
-    }, [walletTokens, selectedToken])
+  }, [walletTokens, selectedToken])
 
-    const setMax = useCallback(() => {
+  const setMax = useCallback(() => {
-        const max = floorToDecimal(tokenMax.maxAmount, 6)
+    const max = floorToDecimal(tokenMax.maxAmount, 6)
-        setInputAmount(max.toFixed())
+    setInputAmount(max.toFixed())
-    }, [tokenMax])
+  }, [tokenMax])
 
-    const handleRefreshWalletBalances = useCallback(async () => {
+  const handleRefreshWalletBalances = useCallback(async () => {
-        if (!publicKey) return
+    if (!publicKey) return
-        const actions = mangoStore.getState().actions
+    const actions = mangoStore.getState().actions
-        setRefreshingWalletTokens(true)
+    setRefreshingWalletTokens(true)
-        await actions.fetchWalletTokens(publicKey)
+    await actions.fetchWalletTokens(publicKey)
-        setRefreshingWalletTokens(false)
+    setRefreshingWalletTokens(false)
-    }, [publicKey])
+  }, [publicKey])
 
-    const tokenPositionsFull = useMemo(() => {
+  const tokenPositionsFull = useMemo(() => {
-        if (!depositBank || !usedTokens.length || !totalTokens.length) return false
+    if (!depositBank || !usedTokens.length || !totalTokens.length) return false
-        const hasTokenPosition = usedTokens.find(
+    const hasTokenPosition = usedTokens.find(
-            (token) => token.tokenIndex === depositBank.tokenIndex,
+      (token) => token.tokenIndex === depositBank.tokenIndex,
+    )
+    return hasTokenPosition ? false : usedTokens.length >= totalTokens.length
+  }, [depositBank, usedTokens, totalTokens])
+
+  const handleDeposit = useCallback(async () => {
+    const client = mangoStore.getState().client
+    const group = mangoStore.getState().group
+    const actions = mangoStore.getState().actions
+    const mangoAccounts = mangoStore.getState().mangoAccounts
+    const mangoAccount = mangoStore.getState().mangoAccount.current
+
+    if (!group || !depositBank || !publicKey) return
+
+    set((state) => {
+      state.submittingBoost = true
+    })
+    try {
+      notify({
+        title: 'Building transaction. This may take a moment.',
+        type: 'info',
+      })
+      const { signature: tx, slot } = await depositAndCreate(
+        client,
+        group,
+        mangoAccount,
+        depositBank.mint,
+        parseFloat(inputAmount),
+        mangoAccounts?.length + 1 ?? 0,
+      )
+      notify({
+        title: 'Transaction confirmed',
+        type: 'success',
+        txid: tx,
+      })
+      set((state) => {
+        state.submittingBoost = false
+      })
+      setInputAmount('')
+      await sleep(500)
+      if (!mangoAccount) {
+        await actions.fetchMangoAccounts(
+          (client.program.provider as AnchorProvider).wallet.publicKey,
         )
-        return hasTokenPosition ? false : usedTokens.length >= totalTokens.length
+      }
-    }, [depositBank, usedTokens, totalTokens])
+      await actions.reloadMangoAccount(slot)
+      await actions.fetchWalletTokens(publicKey)
+    } catch (e) {
+      console.error('Error depositing:', e)
+      set((state) => {
+        state.submittingBoost = false
+      })
+      if (!isMangoError(e)) return
+      notify({
+        title: 'Transaction failed',
+        description: e.message,
+        txid: e?.txid,
+        type: 'error',
+      })
+    }
+  }, [depositBank, publicKey, inputAmount])
 
-    const handleDeposit = useCallback(async () => {
+  const showInsufficientBalance =
-        const client = mangoStore.getState().client
+    tokenMax.maxAmount < Number(inputAmount) ||
-        const group = mangoStore.getState().group
+    (selectedToken === 'USDC' && maxSolDeposit <= 0)
-        const actions = mangoStore.getState().actions
-        const mangoAccounts = mangoStore.getState().mangoAccounts
-        const mangoAccount = mangoStore.getState().mangoAccount.current
 
-        if (!group || !depositBank || !publicKey) return
+  const handleSizePercentage = useCallback(
+    (percentage: string) => {
+      if (!depositBank) return
+      setSizePercentage(percentage)
+      const amount = floorToDecimal(
+        new Decimal(percentage).div(100).mul(tokenMax.maxAmount),
+        depositBank.mintDecimals,
+      )
+      setInputAmount(amount.toFixed())
+    },
+    [tokenMax, depositBank],
+  )
 
-        set((state) => {
+  return (
-            state.submittingBoost = true
+    <>
-        })
+      <div className="flex flex-col justify-between">
-        try {
+        <div className="">
-            notify({
+          <SolBalanceWarnings
-                title: 'Building transaction. This may take a moment.',
+            amount={inputAmount}
-                type: 'info',
+            className="mb-4"
-            })
+            setAmount={setInputAmount}
-            const { signature: tx, slot } = await depositAndCreate(
+            selectedToken={selectedToken}
-                client,
+          />
-                group,
+          <div className="grid grid-cols-2">
-                mangoAccount,
+            <div className="col-span-2 flex justify-between">
-                depositBank.mint,
+              <Label text="Amount" />
-                parseFloat(inputAmount),
+              <div className="mb-2 flex items-center space-x-2">
-                mangoAccounts?.length + 1 ?? 0,
+                <MaxAmountButton
-            )
+                  decimals={tokenMax.maxDecimals}
-            notify({
+                  label={t('wallet-balance')}
-                title: 'Transaction confirmed',
+                  onClick={setMax}
-                type: 'success',
+                  value={tokenMax.maxAmount}
-                txid: tx,
+                />
-            })
+                <Tooltip content="Refresh Balance">
-            set((state) => {
+                  <IconButton
-                state.submittingBoost = false
+                    className={refreshingWalletTokens ? 'animate-spin' : ''}
-            })
+                    onClick={handleRefreshWalletBalances}
-            setInputAmount('')
+                    hideBg
-            await sleep(500)
+                  >
-            if (!mangoAccount) {
+                    <ArrowPathIcon className="h-5 w-5" />
-                await actions.fetchMangoAccounts(
+                  </IconButton>
-                    (client.program.provider as AnchorProvider).wallet.publicKey,
+                </Tooltip>
-                )
+              </div>
-            }
-            await actions.reloadMangoAccount(slot)
-            await actions.fetchWalletTokens(publicKey)
-        } catch (e) {
-            console.error('Error depositing:', e)
-            set((state) => {
-                state.submittingBoost = false
-            })
-            if (!isMangoError(e)) return
-            notify({
-                title: 'Transaction failed',
-                description: e.message,
-                txid: e?.txid,
-                type: 'error',
-            })
-        }
-    }, [depositBank, publicKey, inputAmount])
-
-    const showInsufficientBalance =
-        tokenMax.maxAmount < Number(inputAmount) ||
-        (selectedToken === 'USDC' && maxSolDeposit <= 0)
-
-    const handleSizePercentage = useCallback(
-        (percentage: string) => {
-            if (!depositBank) return
-            setSizePercentage(percentage)
-            const amount = floorToDecimal(
-                new Decimal(percentage).div(100).mul(tokenMax.maxAmount),
-                depositBank.mintDecimals,
-            )
-            setInputAmount(amount.toFixed())
-        },
-        [tokenMax, depositBank],
-    )
-
-
-    return (
-        <>
-            <div className="flex flex-col justify-between">
-                <div className="">
-                    <SolBalanceWarnings
-                        amount={inputAmount}
-                        className="mb-4"
-                        setAmount={setInputAmount}
-                        selectedToken={selectedToken}
-                    />
-                    <div className="grid grid-cols-2">
-                        <div className="col-span-2 flex justify-between">
-                            <Label text="Amount" />
-                            <div className="mb-2 flex items-center space-x-2">
-                                <MaxAmountButton
-                                    decimals={tokenMax.maxDecimals}
-                                    label={t('wallet-balance')}
-                                    onClick={setMax}
-                                    value={tokenMax.maxAmount}
-                                />
-                                <Tooltip content="Refresh Balance">
-                                    <IconButton
-                                        className={refreshingWalletTokens ? 'animate-spin' : ''}
-                                        onClick={handleRefreshWalletBalances}
-                                        hideBg
-                                    >
-                                        <ArrowPathIcon className="h-5 w-5" />
-                                    </IconButton>
-                                </Tooltip>
-                            </div>
-                        </div>
-                        <div className="col-span-2">
-                            <div className="relative">
-                                <NumberFormat
-                                    name="amountIn"
-                                    id="amountIn"
-                                    inputMode="decimal"
-                                    thousandSeparator=","
-                                    allowNegative={false}
-                                    isNumericString={true}
-                                    decimalScale={6}
-                                    className={NUMBERFORMAT_CLASSES}
-                                    placeholder="0.00"
-                                    value={inputAmount}
-                                    onValueChange={(e: NumberFormatValues) => {
-                                        setInputAmount(
-                                            !Number.isNaN(Number(e.value)) ? e.value : '',
-                                        )
-                                    }}
-                                    isAllowed={withValueLimit}
-                                />
-                                <div className="absolute left-4 top-1/2 -translate-y-1/2">
-                                    <TokenLogo bank={depositBank} size={24} />
-                                </div>
-                                <div className="absolute right-4 top-1/2 -translate-y-1/2">
-                                    <span className="font-bold text-th-fgd-1">
-                                        {formatTokenSymbol(selectedToken)}
-                                    </span>
-                                </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>
-                    {depositBank ? (
-                        <div className="pt-8">
-                        </div>
-                    ) : !groupLoaded ? (
-                        <div className="pt-8">
-                            <SheenLoader className="flex flex-1 rounded-xl">
-                                <div className="h-[56px] w-full bg-th-bkg-2" />
-                            </SheenLoader>
-                        </div>
-                    ) : null}
-                </div>
-                {connected ? (
-                    <Button
-                        onClick={handleDeposit}
-                        className="w-full"
-                        disabled={connected && (!inputAmount || showInsufficientBalance)}
-                        size="large"
-                    >
-                        {submitting ? (
-                            <Loading className="mr-2 h-5 w-5" />
-                        ) : showInsufficientBalance ? (
-                            <div className="flex items-center">
-                                <ExclamationCircleIcon className="icon-shadow mr-2 h-5 w-5 flex-shrink-0" />
-                                {t('swap:insufficient-balance', {
-                                    symbol: selectedToken,
-                                })}
-                            </div>
-                        ) : (
-                            `Boost! ${inputAmount} ${formatTokenSymbol(selectedToken)}`
-                        )}
-                    </Button>
-                ) : (
-                    <SecondaryConnectButton className="w-full" isLarge />
-                )}
-                {tokenPositionsFull ? (
-                    <InlineNotification
-                        type="error"
-                        desc={
-                            <>
-                                {t('error-token-positions-full')}{' '}
-                                <Link href="/settings" shallow>
-                                    {t('manage')}
-                                </Link>
-                            </>
-                        }
-                    />
-                ) : null}
             </div>
-        </>
+            <div className="col-span-2">
-    )
+              <div className="relative">
+                <NumberFormat
+                  name="amountIn"
+                  id="amountIn"
+                  inputMode="decimal"
+                  thousandSeparator=","
+                  allowNegative={false}
+                  isNumericString={true}
+                  decimalScale={6}
+                  className={NUMBERFORMAT_CLASSES}
+                  placeholder="0.00"
+                  value={inputAmount}
+                  onValueChange={(e: NumberFormatValues) => {
+                    setInputAmount(
+                      !Number.isNaN(Number(e.value)) ? e.value : '',
+                    )
+                  }}
+                  isAllowed={withValueLimit}
+                />
+                <div className="absolute left-4 top-1/2 -translate-y-1/2">
+                  <TokenLogo bank={depositBank} size={24} />
+                </div>
+                <div className="absolute right-4 top-1/2 -translate-y-1/2">
+                  <span className="font-bold text-th-fgd-1">
+                    {formatTokenSymbol(selectedToken)}
+                  </span>
+                </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>
+          {depositBank ? (
+            <div className="pt-8"></div>
+          ) : !groupLoaded ? (
+            <div className="pt-8">
+              <SheenLoader className="flex flex-1 rounded-xl">
+                <div className="h-[56px] w-full bg-th-bkg-2" />
+              </SheenLoader>
+            </div>
+          ) : null}
+        </div>
+        {connected ? (
+          <Button
+            onClick={handleDeposit}
+            className="w-full"
+            disabled={connected && (!inputAmount || showInsufficientBalance)}
+            size="large"
+          >
+            {submitting ? (
+              <Loading className="mr-2 h-5 w-5" />
+            ) : showInsufficientBalance ? (
+              <div className="flex items-center">
+                <ExclamationCircleIcon className="icon-shadow mr-2 h-5 w-5 flex-shrink-0" />
+                {t('swap:insufficient-balance', {
+                  symbol: selectedToken,
+                })}
+              </div>
+            ) : (
+              `Boost! ${inputAmount} ${formatTokenSymbol(selectedToken)}`
+            )}
+          </Button>
+        ) : (
+          <SecondaryConnectButton className="w-full" isLarge />
+        )}
+        {tokenPositionsFull ? (
+          <InlineNotification
+            type="error"
+            desc={
+              <>
+                {t('error-token-positions-full')}{' '}
+                <Link href="/settings" shallow>
+                  {t('manage')}
+                </Link>
+              </>
+            }
+          />
+        ) : null}
+      </div>
+    </>
+  )
 }
 
 export default DespositForm

components/HomePage.tsx

@@ -6,7 +6,6 @@ import TransactionHistory from './TransactionHistory'
 import mangoStore, { ActiveTab } from '@store/mangoStore'
 import { useCallback, useEffect } from 'react'
 import { BOOST_ACCOUNT_PREFIX } from 'utils/constants'
-import useMangoAccount from 'hooks/useMangoAccount'
 
 const set = mangoStore.getState().set
 
@@ -34,8 +33,6 @@ const HomePage = () => {
     })
   }, [selectedToken])
 
-
-
   return (
     <>
       <div className="mb-6 grid grid-cols-3">

components/Positions.tsx

@@ -43,7 +43,8 @@ const Positions = ({
 }: {
   setActiveTab: (tab: ActiveTab) => void
 }) => {
-  const [showInactivePositions, setShowInactivePositions] = useLocalStorageState(SHOW_INACTIVE_POSITIONS_KEY, true)
+  const [showInactivePositions, setShowInactivePositions] =
+    useLocalStorageState(SHOW_INACTIVE_POSITIONS_KEY, true)
   const { borrowBank, positions } = usePositions(showInactivePositions)
   console.log(showInactivePositions)
 
@@ -55,8 +56,9 @@ const Positions = ({
   return (
     <>
       <div className="mb-2 flex items-center justify-between rounded-lg border-2 border-th-fgd-1 bg-th-bkg-1 px-6 py-3.5">
-        <p className="font-medium">{`You have ${numberOfPositions} active position${numberOfPositions !== 1 ? 's' : ''
+        <p className="font-medium">{`You have ${numberOfPositions} active position${
-          }`}</p>
+          numberOfPositions !== 1 ? 's' : ''
+        }`}</p>
         <Switch
           checked={showInactivePositions}
           onChange={(checked) => setShowInactivePositions(checked)}
@@ -133,21 +135,13 @@ const PositionItem = ({
     const liqPriceChangePercentage =
       ((parseFloat(liqRatio) - currentPriceRatio) / currentPriceRatio) * 100
 
-
     return [liqRatio, liqPriceChangePercentage.toFixed(2)]
   }, [bank, borrowBalance, borrowBank, stakeBalance])
 
-
+  const { estimatedNetAPY, borrowBankBorrowRate } = useBankRates(
-  const liquidationPrice = useMemo(() => {
+    bank.name,
-    const borrowMaintLiabWeight = borrowBank?.maintLiabWeight
+    leverage,
-    const stakeMaintAssetWeight = position.bank?.maintAssetWeight
+  )
-    const price = Number(position.bank?.uiPrice) * (Number(borrowMaintLiabWeight) / Number(stakeMaintAssetWeight)) * (1 - (1 / leverage))
-
-    return price
-  }, [position.bank, borrowBank, leverage])
-
-
-  const { estimatedNetAPY, borrowBankBorrowRate } = useBankRates(bank.name, leverage)
   const uiRate = bank.name == 'USDC' ? borrowBankBorrowRate : estimatedNetAPY
 
   return (
@@ -190,10 +184,9 @@ const PositionItem = ({
             <FormatNumericValue value={uiRate} decimals={2} />%
           </span>
         </div>
-        {position.bank.name == 'USDC' ?
+        {position.bank.name == 'USDC' ? (
-          <>
+          <></>
-          </>
+        ) : (
-          :
           <>
             <div>
               <p className="mb-1 text-th-fgd-4">Leverage</p>
@@ -225,8 +218,7 @@ const PositionItem = ({
               </div>
             </div>
           </>
-        }
+        )}
-
       </div>
     </div>
   )

components/Stake.tsx

@@ -9,7 +9,6 @@ import { formatTokenSymbol } from 'utils/tokens'
 import { useViewport } from 'hooks/useViewport'
 import { ArrowTopRightOnSquareIcon } from '@heroicons/react/20/solid'
 import DespositForm from './DepositForm'
-import WithdrawForm from './WithdrawForm'
 
 const set = mangoStore.getState().set
 
@@ -50,24 +49,23 @@ const Stake = () => {
                 onChange={(v) => setActiveFormTab(v)}
               />
             </div>
-            {selectedToken == 'USDC' ?
+            {selectedToken == 'USDC' ? (
               <>
-                {activeFormTab === 'Add' ? (
+                {activeFormTab === 'Add' ? <DespositForm token="USDC" /> : null}
-                  <DespositForm token='USDC' />
-                ) : null}
                 {activeFormTab === 'Remove' ? (
-                  <UnstakeForm token='USDC' />
+                  <UnstakeForm token="USDC" />
                 ) : null}
               </>
-              :
+            ) : (
               <>
                 {activeFormTab === 'Add' ? (
                   <StakeForm token={selectedToken} />
                 ) : null}
                 {activeFormTab === 'Remove' ? (
                   <UnstakeForm token={selectedToken} />
-                ) : null}</>
+                ) : null}
-            }
+              </>
+            )}
           </div>
         </div>
       </div>

components/TokenButton.tsx

@@ -13,14 +13,12 @@ const TokenButton = ({
   handleTokenSelect: (v: string) => void
 }) => {
   const leverage = useLeverageMax(tokenName)
-  const {
+  const { borrowBankBorrowRate, borrowBankStakeRate } = useBankRates(
-    stakeBankDepositRate,
+    tokenName,
-    borrowBankBorrowRate,
+    leverage,
-    borrowBankStakeRate,
+  )
-    leveragedAPY,
+  const UiRate =
-    estimatedNetAPY,
+    tokenName == 'USDC' ? borrowBankBorrowRate : borrowBankStakeRate
-  } = useBankRates(tokenName, leverage)
-  const UiRate = tokenName == 'USDC' ? borrowBankBorrowRate : borrowBankStakeRate
 
   return (
     <button
@@ -68,7 +66,6 @@ const TokenButton = ({
             // ) :
             `${UiRate.toFixed(2)}%`
           }
-
         </span>
       </div>
     </button>