use max net apy in token select buttons

components/StakeForm.tsx

@@ -42,6 +42,7 @@ 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'
 
 const set = mangoStore.getState().set
 
@@ -107,6 +108,7 @@ function StakeForm({ token: selectedToken }: StakeFormProps) {
     leveragedAPY,
     estimatedNetAPY,
   } = useBankRates(selectedToken, leverage)
+  const leverageMax = useLeverageMax(selectedToken)
 
   const stakeBank = useMemo(() => {
     return group?.banksMapByName.get(selectedToken)?.[0]
@@ -211,22 +213,6 @@ function StakeForm({ token: selectedToken }: StakeFormProps) {
     setLeverage(v * 1)
   }, [])
 
-  const leverageMax = useMemo(() => {
-    if (!stakeBank || !borrowBank) return 1
-    const borrowInitLiabWeight = borrowBank.scaledInitLiabWeight(
-      borrowBank.price,
-    )
-    const stakeInitAssetWeight = stakeBank.scaledInitAssetWeight(
-      stakeBank.price,
-    )
-    if (!borrowInitLiabWeight || !stakeInitAssetWeight) return 1
-
-    const x = stakeInitAssetWeight.div(borrowInitLiabWeight).toNumber()
-    const conversionRate = borrowBank.uiPrice / stakeBank.uiPrice
-    const y = 1 - conversionRate * stakeInitAssetWeight.toNumber()
-    return 1 + x / y
-  }, [stakeBank, borrowBank])
-
   useEffect(() => {
     const group = mangoStore.getState().group
     set((state) => {

components/TokenButton.tsx

@@ -1,7 +1,7 @@
-import useStakeRates from 'hooks/useStakeRates'
 import Image from 'next/image'
 import { formatTokenSymbol } from 'utils/tokens'
-import SheenLoader from './shared/SheenLoader'
+import useBankRates from 'hooks/useBankRates'
+import useLeverageMax from 'hooks/useLeverageMax'
 
 const TokenButton = ({
   handleTokenSelect,
@@ -12,7 +12,8 @@ const TokenButton = ({
   selectedToken: string
   handleTokenSelect: (v: string) => void
 }) => {
-  const { data: stakeRates, isLoading } = useStakeRates()
+  const leverage = useLeverageMax(tokenName)
+  const { estimatedNetAPY } = useBankRates(tokenName, leverage)
 
   return (
     <button
@@ -46,19 +47,20 @@ const TokenButton = ({
             selectedToken === tokenName ? 'text-th-fgd-1' : 'text-th-fgd-4'
           }`}
         >
-          {isLoading ? (
+          {
-            <SheenLoader>
+            // isLoading ? (
-              <div
+            //   <SheenLoader>
-                className={`h-5 w-10 ${
+            //     <div
-                  selectedToken === tokenName
+            //       className={`h-5 w-10 ${
-                    ? 'bg-th-active-dark'
+            //         selectedToken === tokenName
-                    : 'bg-th-bkg-2'
+            //           ? 'bg-th-active-dark'
-                }`}
+            //           : 'bg-th-bkg-2'
-              />
+            //       }`}
-            </SheenLoader>
+            //     />
-          ) : stakeRates?.[tokenName.toLowerCase()] ? (
+            //   </SheenLoader>
-            `${(stakeRates?.[tokenName.toLowerCase()] * 100).toFixed(2)}%`
+            // ) :
-          ) : null}
+            `${estimatedNetAPY.toFixed(2)}%`
+          }
         </span>
       </div>
     </button>

hooks/useLeverageMax.ts

@@ -0,0 +1,32 @@
+import { useMemo } from 'react'
+import useMangoGroup from './useMangoGroup'
+
+export default function useLeverageMax(selectedToken: string) {
+  const { group } = useMangoGroup()
+
+  const stakeBank = useMemo(() => {
+    return group?.banksMapByName.get(selectedToken)?.[0]
+  }, [selectedToken, group])
+
+  const borrowBank = useMemo(() => {
+    return group?.banksMapByName.get('SOL')?.[0]
+  }, [group])
+
+  const leverageMax = useMemo(() => {
+    if (!stakeBank || !borrowBank) return 1
+    const borrowInitLiabWeight = borrowBank.scaledInitLiabWeight(
+      borrowBank.price,
+    )
+    const stakeInitAssetWeight = stakeBank.scaledInitAssetWeight(
+      stakeBank.price,
+    )
+    if (!borrowInitLiabWeight || !stakeInitAssetWeight) return 1
+
+    const x = stakeInitAssetWeight.div(borrowInitLiabWeight).toNumber()
+    const conversionRate = borrowBank.uiPrice / stakeBank.uiPrice
+    const y = 1 - conversionRate * stakeInitAssetWeight.toNumber()
+    return 1 + x / y
+  }, [stakeBank, borrowBank])
+
+  return leverageMax
+}