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

69 lines
2.0 KiB
TypeScript

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'
const fetchFundingRate = async (groupPk: string | undefined) => {
const res = await fetch(
`https://mango-transaction-log.herokuapp.com/v4/one-hour-funding-rate?mango-group=${groupPk}`
)
return await res.json()
}
export const usePerpFundingRate = () => {
const { group } = useMangoGroup()
const res = useQuery<any[], Error>(
['funding-rate'],
() => fetchFundingRate(group?.publicKey?.toString()),
{
cacheTime: 1000 * 60,
staleTime: 1000 * 60,
retry: true,
enabled: !!group,
}
)
return Array.isArray(res?.data) ? res : { isSuccess: false, data: null }
}
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
)
return marketRate?.funding_rate_hourly
}
}, [rate, selectedMarket])
return (
<>
<div className="font-mono text-xs text-th-fgd-2">
{selectedMarket instanceof PerpMarket && fundingRate
? fundingRate.toFixed(4)
: '-'}
%
</div>
{/* <div className="font-mono text-xs text-th-fgd-2">
{selectedMarket instanceof PerpMarket &&
bids instanceof BookSide &&
asks instanceof BookSide
? selectedMarket.getCurrentFundingRate(bids, asks)
: '-'}
</div> */}
</>
)
}
export default PerpFundingRate