add stake token aprs

components/MangoProvider.tsx

@@ -1,22 +1,18 @@
 import { useCallback, useEffect } from 'react'
 import mangoStore from '@store/mangoStore'
-import { Keypair, PublicKey } from '@solana/web3.js'
-import { useRouter } from 'next/router'
+import { Keypair } from '@solana/web3.js'
 import useMangoAccount from 'hooks/useMangoAccount'
 import useInterval from './shared/useInterval'
 import { LAST_WALLET_NAME, PRIORITY_FEE_KEY, SECONDS } from 'utils/constants'
 import useNetworkSpeed from 'hooks/useNetworkSpeed'
 import { useWallet } from '@solana/wallet-adapter-react'
 import useLocalStorageState from 'hooks/useLocalStorageState'
 import { DEFAULT_PRIORITY_FEE_LEVEL } from './settings/RpcSettings'
-import { useHiddenMangoAccounts } from 'hooks/useHiddenMangoAccounts'
 
 const set = mangoStore.getState().set
 const actions = mangoStore.getState().actions
 
 const HydrateStore = () => {
-  const router = useRouter()
-  const { name: marketName } = router.query
   const { mangoAccountPk, mangoAccountAddress } = useMangoAccount()
   const connection = mangoStore((s) => s.connection)
   const slowNetwork = useNetworkSpeed()
@@ -46,13 +42,8 @@ const HydrateStore = () => {
   }, [wallet, setLastWalletName])
 
   useEffect(() => {
-    if (marketName && typeof marketName === 'string') {
-      set((s) => {
-        s.selectedMarket.name = marketName
-      })
-    }
     actions.fetchGroup()
-  }, [marketName])
+  }, [])
 
   useInterval(
     () => {
@@ -156,51 +147,10 @@ const HydrateStore = () => {
   return null
 }
 
-const ReadOnlyMangoAccount = () => {
-  const router = useRouter()
-  const groupLoaded = mangoStore((s) => s.groupLoaded)
-  const ma = router.query?.address
-  const { hiddenAccounts } = useHiddenMangoAccounts()
-
-  useEffect(() => {
-    if (!groupLoaded) return
-    const set = mangoStore.getState().set
-    const group = mangoStore.getState().group
-
-    async function loadUnownedMangoAccount() {
-      try {
-        if (!ma || !group || hiddenAccounts?.includes(ma as string)) return
-
-        const client = mangoStore.getState().client
-        const pk = new PublicKey(ma)
-        const readOnlyMangoAccount = await client.getMangoAccount(pk)
-        // await readOnlyMangoAccount.reloadSerum3OpenOrders(client)
-        set((state) => {
-          state.mangoAccount.current = readOnlyMangoAccount
-          state.mangoAccount.initialLoad = false
-        })
-        // await actions.fetchOpenOrders()
-      } catch (error) {
-        console.error('error', error)
-      }
-    }
-
-    if (ma) {
-      set((state) => {
-        state.mangoAccount.initialLoad = true
-      })
-      loadUnownedMangoAccount()
-    }
-  }, [ma, groupLoaded, router])
-
-  return null
-}
-
 const MangoProvider = () => {
   return (
     <>
       <HydrateStore />
-      <ReadOnlyMangoAccount />
     </>
   )
 }

components/TokenButton.tsx

@@ -1,3 +1,4 @@
+import useStakeApr from 'hooks/useStakeAprs'
 import Image from 'next/image'
 
 const TokenButton = ({
@@ -9,6 +10,8 @@ const TokenButton = ({
   selectedToken: string
   handleTokenSelect: (v: string) => void
 }) => {
+  const { data: stakeAprs } = useStakeApr()
+
   return (
     <button
       className={`col-span-1 flex items-center justify-center border-r border-th-fgd-1 p-4  first:rounded-tl-2xl last:rounded-tr-2xl last:border-transparent hover:cursor-pointer ${
@@ -26,7 +29,12 @@ const TokenButton = ({
         <span className="mt-2 text-lg font-bold text-th-fgd-1">
           {tokenName}
         </span>
-        <span>14.89%</span>
+        <span>
+          {stakeAprs?.[tokenName.toLowerCase()]
+            ? (stakeAprs?.[tokenName.toLowerCase()] * 100).toFixed(2)
+            : null}
+          %
+        </span>
       </div>
     </button>
   )

hooks/useStakeAprs.ts

@@ -0,0 +1,55 @@
+import { useQuery } from '@tanstack/react-query'
+import {
+  fetchAndParsePricesCsv,
+  getPriceRangeFromPeriod,
+  calcYield,
+  DATA_SOURCE,
+  PERIOD,
+} from '@glitchful-dev/sol-apy-sdk'
+
+const fetchApr = async () => {
+  const [msolPrices, jitoPrices, bsolPrices, lidoPrices] = await Promise.all([
+    fetchAndParsePricesCsv(DATA_SOURCE.MARINADE_CSV),
+    fetchAndParsePricesCsv(DATA_SOURCE.JITO_CSV),
+    fetchAndParsePricesCsv(DATA_SOURCE.SOLBLAZE_CSV),
+    fetchAndParsePricesCsv(DATA_SOURCE.LIDO_CSV),
+  ])
+  console.log('jitosol', jitoPrices)
+
+  // may be null if the price range cannot be calculated
+  const msolRange = getPriceRangeFromPeriod(msolPrices, PERIOD.DAYS_14)
+  const jitoRange = getPriceRangeFromPeriod(jitoPrices, PERIOD.DAYS_14)
+  const bsolRange = getPriceRangeFromPeriod(bsolPrices, PERIOD.DAYS_14)
+  const lidoRange = getPriceRangeFromPeriod(lidoPrices, PERIOD.DAYS_14)
+
+  const aprData: Record<string, number> = {}
+
+  if (msolRange) {
+    console.log('APR: ', calcYield(msolRange)?.apr) // 0.06493501845986677 => 6.49 %
+    console.log('APY: ', calcYield(msolRange)?.apy) // 0.06707557862842384 => 6.71 %
+    aprData.msol = calcYield(msolRange)?.apr
+  }
+  if (jitoRange) {
+    aprData.jitosol = calcYield(jitoRange)?.apr
+  }
+  if (bsolRange) {
+    aprData.bsol = calcYield(bsolRange)?.apr
+  }
+  if (lidoRange) {
+    aprData.stsol = calcYield(lidoRange)?.apr
+  }
+  return aprData
+}
+
+fetchApr()
+
+export default function useStakeApr() {
+  const response = useQuery(['apr'], () => fetchApr(), {
+    cacheTime: 1000 * 60 * 5,
+    staleTime: 1000 * 60,
+    retry: 3,
+    refetchOnWindowFocus: true,
+  })
+
+  return response
+}

package.json

@@ -38,6 +38,7 @@
     "@blockworks-foundation/mango-feeds": "0.1.7",
     "@blockworks-foundation/mango-v4": "^0.19.13",
     "@blockworks-foundation/mango-v4-settings": "0.2.6",
+    "@glitchful-dev/sol-apy-sdk": "3.0.1",
     "@headlessui/react": "1.6.6",
     "@heroicons/react": "2.0.10",
     "@metaplex-foundation/js": "0.19.4",