70 lines
1.9 KiB
TypeScript
70 lines
1.9 KiB
TypeScript
import React, { useMemo } from 'react'
|
|
|
|
import Card from 'components/Card'
|
|
import DisplayCurrency from 'components/DisplayCurrency'
|
|
import Divider from 'components/Divider'
|
|
import Loading from 'components/Loading'
|
|
import FundingRate from 'components/Perps/PerpsInfo/FundingRate'
|
|
import InterestItem from 'components/Perps/PerpsInfo/InterestItem'
|
|
import Text from 'components/Text'
|
|
import usePerpsMarket from 'hooks/perps/usePerpsMarket'
|
|
import usePrice from 'hooks/usePrice'
|
|
import { BNCoin } from 'types/classes/BNCoin'
|
|
|
|
export function PerpsInfo() {
|
|
const { data: market } = usePerpsMarket()
|
|
const assetPrice = usePrice(market?.asset.denom || '')
|
|
|
|
const items = useMemo(() => {
|
|
if (!market) return []
|
|
|
|
return [
|
|
...(!assetPrice.isZero()
|
|
? [<DisplayCurrency key='price' coin={BNCoin.fromDenomAndBigNumber('usd', assetPrice)} />]
|
|
: [<Loading key='price' className='w-14 h-4' />]),
|
|
<InfoItem
|
|
key='openInterestLong'
|
|
label='Open Interest (L)'
|
|
item={<InterestItem type='long' />}
|
|
/>,
|
|
<InfoItem
|
|
key='openInterestShort'
|
|
label='Open Interest (S)'
|
|
item={<InterestItem type='short' />}
|
|
/>,
|
|
<InfoItem key='fundingRate' label='Funding rate' item={<FundingRate />} />,
|
|
]
|
|
}, [assetPrice, market])
|
|
|
|
if (!market) return null
|
|
|
|
return (
|
|
<Card contentClassName='bg-white/10 py-3.5 px-4'>
|
|
<div className='flex gap-4 items-center'>
|
|
{items.map((item, index) => (
|
|
<React.Fragment key={index}>
|
|
{item}
|
|
{index !== items.length - 1 && <Divider orientation='vertical' className='h-9' />}
|
|
</React.Fragment>
|
|
))}
|
|
</div>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
interface InfoItemProps {
|
|
item: React.ReactNode
|
|
label: string
|
|
}
|
|
|
|
function InfoItem(props: InfoItemProps) {
|
|
return (
|
|
<div className='flex flex-col gap-1'>
|
|
<Text size='xs' className='text-white/40'>
|
|
{props.label}
|
|
</Text>
|
|
{props.item}
|
|
</div>
|
|
)
|
|
}
|