69 lines
1.8 KiB
TypeScript
69 lines
1.8 KiB
TypeScript
|
import DetailedAreaOrBarChart from '@components/shared/DetailedAreaOrBarChart'
|
||
|
|
import { useQuery } from '@tanstack/react-query'
|
||
|
|
import { useState } from 'react'
|
||
|
|
import { useTranslation } from 'react-i18next'
|
||
|
|
import { MANGO_DATA_API_URL } from 'utils/constants'
|
||
|
|
import { formatYAxis } from 'utils/formatting'
|
||
|
|
|
||
|
|
type LiquidationsAtRiskDataItem = {
|
||
|
|
percentage_price_change: number
|
||
|
|
usdc_shortfall: number
|
||
|
|
}
|
||
|
|
|
||
|
|
type LiquidationsAtRisk = {
|
||
|
|
data: LiquidationsAtRiskDataItem[]
|
||
|
|
simulation_time_utc: string
|
||
|
|
}
|
||
|
|
|
||
|
|
const fetchLiquidationsAtRiskData = async () => {
|
||
|
|
try {
|
||
|
|
const response = await fetch(
|
||
|
|
`${MANGO_DATA_API_URL}/stats/liquidations/risk-simulation`,
|
||
|
|
)
|
||
|
|
const data: null | LiquidationsAtRisk = await response.json()
|
||
|
|
if (data && data?.data.length) {
|
||
|
|
return data.data
|
||
|
|
}
|
||
|
|
return []
|
||
|
|
} catch (e) {
|
||
|
|
console.log('Failed to fetch liquidations at risk', e)
|
||
|
|
return []
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const LiquidationsAtRiskChart = () => {
|
||
|
|
const { t } = useTranslation('stats')
|
||
|
|
const [daysToShow] = useState('30')
|
||
|
|
const { data, isInitialLoading } = useQuery(
|
||
|
|
['liquidations-at-risk-data'],
|
||
|
|
() => fetchLiquidationsAtRiskData(),
|
||
|
|
{
|
||
|
|
cacheTime: 1000 * 60 * 10,
|
||
|
|
staleTime: 1000 * 60,
|
||
|
|
retry: 3,
|
||
|
|
refetchOnWindowFocus: false,
|
||
|
|
},
|
||
|
|
)
|
||
|
|
|
||
|
|
return (
|
||
|
|
<DetailedAreaOrBarChart
|
||
|
|
hideChange
|
||
|
|
data={data}
|
||
|
|
daysToShow={daysToShow}
|
||
|
|
loading={isInitialLoading}
|
||
|
|
heightClass="h-64"
|
||
|
|
loaderHeightClass="h-[350px]"
|
||
|
|
prefix="$"
|
||
|
|
tickFormat={(x) => `$${formatYAxis(x)}`}
|
||
|
|
title={t('stats:liquidations-at-risk')}
|
||
|
|
xKey="percentage_price_change"
|
||
|
|
formatXKeyHeading={(k) => `${t('stats:price-change')}: ${k}%`}
|
||
|
|
xAxisLabel={t('stats:price-change-percentage')}
|
||
|
|
xAxisType="number"
|
||
|
|
yKey="usdc_shortfall"
|
||
|
|
/>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default LiquidationsAtRiskChart
|