mango-v4-ui/components/trade/PerpFundingRate.tsx

import { PerpMarket } from '@blockworks-foundation/mango-v4'
// import { BookSide, PerpMarket } from '@blockworks-foundation/mango-v4'
// import mangoStore from '@store/mangoStore'
import { useQuery } from '@tanstack/react-query'
import useMangoGroup from 'hooks/useMangoGroup'
import useSelectedMarket from 'hooks/useSelectedMarket'
import { useMemo } from 'react'
import { MANGO_DATA_API_URL } from 'utils/constants'

const fetchFundingRate = async (groupPk: string | undefined) => {
  const res = await fetch(
    `${MANGO_DATA_API_URL}/one-hour-funding-rate?mango-group=${groupPk}`
  )
  return await res.json()
}

export const usePerpFundingRate = () => {
  const { group } = useMangoGroup()

  const res = useQuery<
    { market_index: number; funding_rate_hourly: number }[],
    Error
  >(['funding-rate'], () => fetchFundingRate(group?.publicKey?.toString()), {
    cacheTime: 1000 * 60 * 10,
    staleTime: 1000 * 60,
    retry: 3,
    enabled: !!group,
  })

  return Array.isArray(res?.data) ? res : { isSuccess: false, data: null }
}

export const formatFunding = Intl.NumberFormat('en', {
  minimumSignificantDigits: 1,
  maximumSignificantDigits: 3,
  style: 'percent',
})

const PerpFundingRate = () => {
  const { selectedMarket } = useSelectedMarket()
  const rate = usePerpFundingRate()

  // const bids = mangoStore((s) => s.selectedMarket.bidsAccount)
  // const asks = mangoStore((s) => s.selectedMarket.asksAccount)

  const fundingRate = useMemo(() => {
    if (rate.isSuccess && selectedMarket instanceof PerpMarket) {
      const marketRate = rate?.data?.find(
        (r) => r.market_index === selectedMarket.perpMarketIndex
      )
      const funding = marketRate?.funding_rate_hourly
      return funding ? funding : undefined
    }
  }, [rate, selectedMarket])

  return (
    <p className="font-mono text-xs text-th-fgd-2">
      {selectedMarket instanceof PerpMarket && fundingRate ? (
        <span>
          {formatFunding.format(fundingRate)}
          <span className="mx-1">|</span>
          {formatFunding.format(fundingRate * 8760)}{' '}
          <span className="font-body text-th-fgd-3">APR</span>
        </span>
      ) : (
        <span className="text-th-fgd-4">-</span>
      )}
    </p>
  )
}

export default PerpFundingRate