119 lines
4.3 KiB
TypeScript
119 lines
4.3 KiB
TypeScript
import { IconButton } from '@components/shared/Button'
|
|
import SheenLoader from '@components/shared/SheenLoader'
|
|
import { ChevronLeftIcon } from '@heroicons/react/20/solid'
|
|
import mangoStore from '@store/mangoStore'
|
|
// import dayjs from 'dayjs'
|
|
import { useTranslation } from 'next-i18next'
|
|
import dynamic from 'next/dynamic'
|
|
import { useMemo } from 'react'
|
|
import { formatFixedDecimals } from 'utils/numbers'
|
|
const DetailedAreaChart = dynamic(
|
|
() => import('@components/shared/DetailedAreaChart'),
|
|
{ ssr: false }
|
|
)
|
|
|
|
const PerpMarketDetails = ({
|
|
perpMarket,
|
|
setShowPerpDetails,
|
|
}: {
|
|
perpMarket: string
|
|
setShowPerpDetails: (x: string) => void
|
|
}) => {
|
|
const { t } = useTranslation(['common', 'trade'])
|
|
const perpStats = mangoStore((s) => s.perpStats.data)
|
|
const loadingPerpStats = mangoStore((s) => s.perpStats.loading)
|
|
// const perpMarkets = mangoStore((s) => s.perpMarkets)
|
|
|
|
const marketStats = useMemo(() => {
|
|
if (!perpStats) return []
|
|
return perpStats.filter((stat) => stat.perp_market === perpMarket).reverse()
|
|
}, [perpStats])
|
|
|
|
return (
|
|
<div className="grid grid-cols-2">
|
|
<div className="col-span-2 flex items-center border-b border-th-bkg-3 px-6 py-3">
|
|
<IconButton className="mr-4" onClick={() => setShowPerpDetails('')}>
|
|
<ChevronLeftIcon className="h-5 w-5" />
|
|
</IconButton>
|
|
<h2 className="text-lg">{`${perpMarket} ${t('stats')}`}</h2>
|
|
</div>
|
|
{loadingPerpStats ? (
|
|
<>
|
|
<div className="col-span-2 border-b border-th-bkg-3 py-4 px-6 md:col-span-1">
|
|
<SheenLoader className="flex flex-1">
|
|
<div className="h-96 w-full rounded-lg bg-th-bkg-2" />
|
|
</SheenLoader>
|
|
</div>
|
|
<div className="col-span-2 border-b border-th-bkg-3 py-4 px-6 md:col-span-1 md:border-l md:pl-6">
|
|
<SheenLoader className="flex flex-1">
|
|
<div className="h-96 w-full rounded-lg bg-th-bkg-2" />
|
|
</SheenLoader>
|
|
</div>
|
|
<div className="col-span-2 border-b border-th-bkg-3 py-4 px-6 md:col-span-1">
|
|
<SheenLoader className="flex flex-1">
|
|
<div className="h-96 w-full rounded-lg bg-th-bkg-2" />
|
|
</SheenLoader>
|
|
</div>
|
|
<div className="col-span-2 border-b border-th-bkg-3 py-4 px-6 md:col-span-1 md:border-l md:pl-6">
|
|
<SheenLoader className="flex flex-1">
|
|
<div className="h-96 w-full rounded-lg bg-th-bkg-2" />
|
|
</SheenLoader>
|
|
</div>
|
|
</>
|
|
) : marketStats.length ? (
|
|
<>
|
|
<div className="col-span-2 border-b border-th-bkg-3 py-4 px-6 md:col-span-1">
|
|
<DetailedAreaChart
|
|
data={marketStats}
|
|
daysToShow={'999'}
|
|
heightClass="h-64"
|
|
prefix="$"
|
|
tickFormat={(x) => formatFixedDecimals(x, true)}
|
|
title={t('price')}
|
|
xKey="date_hour"
|
|
yKey={'price'}
|
|
/>
|
|
</div>
|
|
<div className="col-span-2 border-b border-th-bkg-3 py-4 px-6 md:col-span-1 md:border-l md:pl-6">
|
|
<DetailedAreaChart
|
|
data={marketStats}
|
|
daysToShow={'999'}
|
|
heightClass="h-64"
|
|
tickFormat={(x) => Math.floor(x).toString()}
|
|
title={t('trade:open-interest')}
|
|
xKey="date_hour"
|
|
yKey={'open_interest'}
|
|
/>
|
|
</div>
|
|
<div className="col-span-2 border-b border-th-bkg-3 py-4 px-6 md:col-span-1">
|
|
<DetailedAreaChart
|
|
data={marketStats}
|
|
daysToShow={'999'}
|
|
heightClass="h-64"
|
|
suffix="%"
|
|
tickFormat={(x) => formatFixedDecimals(x)}
|
|
title={t('hourly-funding')}
|
|
xKey="date_hour"
|
|
yKey={'funding_rate_hourly'}
|
|
/>
|
|
</div>
|
|
<div className="col-span-2 border-b border-th-bkg-3 py-4 px-6 md:col-span-1 md:border-l md:pl-6">
|
|
<DetailedAreaChart
|
|
data={marketStats}
|
|
daysToShow={'999'}
|
|
heightClass="h-64"
|
|
suffix="%"
|
|
tickFormat={(x) => formatFixedDecimals(x)}
|
|
title={t('instantaneous-funding')}
|
|
xKey="date_hour"
|
|
yKey={'instantaneous_funding_rate'}
|
|
/>
|
|
</div>
|
|
</>
|
|
) : null}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default PerpMarketDetails
|