360 lines
12 KiB
TypeScript
360 lines
12 KiB
TypeScript
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
import { useQuery } from '@tanstack/react-query'
|
|
import dayjs from 'dayjs'
|
|
import useMangoAccount from 'hooks/useMangoAccount'
|
|
import { useEffect, useMemo, useState } from 'react'
|
|
import {
|
|
HourlyFundingChartData,
|
|
HourlyFundingData,
|
|
HourlyFundingStatsData,
|
|
} from 'types'
|
|
import { DAILY_MILLISECONDS, MANGO_DATA_API_URL } from 'utils/constants'
|
|
import { formatCurrencyValue } from 'utils/numbers'
|
|
import { TooltipProps } from 'recharts/types/component/Tooltip'
|
|
import {
|
|
Cell,
|
|
XAxis,
|
|
YAxis,
|
|
Tooltip,
|
|
BarChart,
|
|
Bar,
|
|
ReferenceLine,
|
|
ResponsiveContainer,
|
|
} from 'recharts'
|
|
import { COLORS } from 'styles/colors'
|
|
import { formatDateAxis } from '@components/shared/DetailedAreaOrBarChart'
|
|
import { formatYAxis } from 'utils/formatting'
|
|
import ChartRangeButtons from '@components/shared/ChartRangeButtons'
|
|
import { useTranslation } from 'next-i18next'
|
|
import { NoSymbolIcon } from '@heroicons/react/20/solid'
|
|
import { FadeInFadeOut } from '@components/shared/Transitions'
|
|
import ContentBox from '@components/shared/ContentBox'
|
|
import SheenLoader from '@components/shared/SheenLoader'
|
|
import useThemeWrapper from 'hooks/useThemeWrapper'
|
|
import FormatNumericValue from '@components/shared/FormatNumericValue'
|
|
|
|
type TempDataType = {
|
|
[time: string]: {
|
|
[marketKey: string]: number | string
|
|
time: string
|
|
total: number
|
|
}
|
|
}
|
|
|
|
const fetchHourlyFunding = async (mangoAccountPk: string) => {
|
|
try {
|
|
const data = await fetch(
|
|
`${MANGO_DATA_API_URL}/stats/funding-account-hourly?mango-account=${mangoAccountPk}`,
|
|
)
|
|
const res = await data.json()
|
|
if (res) {
|
|
const entries: HourlyFundingData[] = Object.entries(res)
|
|
|
|
const stats: HourlyFundingStatsData[] = entries.map(([key, value]) => {
|
|
const marketEntries = Object.entries(value)
|
|
const marketFunding = marketEntries.map(([key, value]) => {
|
|
return {
|
|
long_funding: value.long_funding * -1,
|
|
short_funding: value.short_funding * -1,
|
|
time: key,
|
|
}
|
|
})
|
|
return { marketFunding, market: key }
|
|
})
|
|
|
|
return stats
|
|
}
|
|
} catch (e) {
|
|
console.log('Failed to fetch account funding history', e)
|
|
}
|
|
}
|
|
|
|
const FundingChart = () => {
|
|
const { t } = useTranslation('common')
|
|
const { mangoAccountAddress } = useMangoAccount()
|
|
const [daysToShow, setDaysToShow] = useState('30')
|
|
const { theme } = useThemeWrapper()
|
|
const {
|
|
data: fundingData,
|
|
isLoading: loadingFunding,
|
|
isFetching: fetchingFunding,
|
|
refetch,
|
|
} = useQuery(
|
|
['hourly-funding', mangoAccountAddress],
|
|
() => fetchHourlyFunding(mangoAccountAddress),
|
|
{
|
|
cacheTime: 1000 * 60 * 10,
|
|
staleTime: 1000 * 60,
|
|
retry: 3,
|
|
refetchOnWindowFocus: false,
|
|
enabled: !!mangoAccountAddress,
|
|
},
|
|
)
|
|
|
|
useEffect(() => {
|
|
refetch()
|
|
}, [])
|
|
|
|
const chartData: HourlyFundingChartData[] = useMemo(() => {
|
|
if (!fundingData || !fundingData.length) return []
|
|
const tempData: TempDataType = {}
|
|
const data: HourlyFundingChartData[] = []
|
|
fundingData.forEach((item) => {
|
|
item.marketFunding.forEach((fundingItem) => {
|
|
const time = fundingItem.time
|
|
const marketKey = item.market
|
|
const marketFunding =
|
|
fundingItem.long_funding + fundingItem.short_funding
|
|
if (tempData[time]) {
|
|
tempData[time][marketKey] = marketFunding
|
|
tempData[time].total += marketFunding
|
|
} else {
|
|
tempData[time] = {
|
|
[marketKey]: marketFunding,
|
|
time,
|
|
total: marketFunding,
|
|
}
|
|
data.push(tempData[time])
|
|
}
|
|
})
|
|
})
|
|
data.sort((a, b) => (a.time > b.time ? 1 : 0))
|
|
return data
|
|
}, [fundingData])
|
|
|
|
const CustomTooltip = ({
|
|
active,
|
|
payload,
|
|
label,
|
|
}: TooltipProps<number, string>) => {
|
|
if (active && payload && payload.length) {
|
|
const load = payload[0].payload
|
|
const data: [string, any][] = Object.entries(load).filter(
|
|
(p) => p[0] !== 'time' && p[0] !== 'total',
|
|
)
|
|
return (
|
|
<div className="rounded-md bg-th-bkg-2 p-4">
|
|
<h3 className="mb-3 text-sm">
|
|
{daysToShow === '30'
|
|
? dayjs(label).format('DD MMM YY')
|
|
: dayjs(label).format('DD MMM YY, h:mma')}
|
|
</h3>
|
|
<div className="space-y-1">
|
|
{data
|
|
.filter((d) => Math.abs(d[1]) > 0)
|
|
.sort((a, b) => a[0].localeCompare(b[0]))
|
|
.map((d) => (
|
|
<div className="flex items-center justify-between" key={d[0]}>
|
|
<p>{d[0]}</p>
|
|
<p className="pl-4 font-mono text-th-fgd-2">
|
|
{formatCurrencyValue(d[1])}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="mt-3 flex justify-between border-t border-th-bkg-4 pt-3">
|
|
<p>{t('total')}</p>
|
|
<p className="pl-4 font-mono text-th-fgd-2">
|
|
{formatCurrencyValue(load['total'])}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return null
|
|
}
|
|
|
|
const scaleDataTime = (data: HourlyFundingChartData[]) => {
|
|
const scaledData = data.reduce((a: HourlyFundingChartData[], c) => {
|
|
const found = a.find((item) => {
|
|
const currentDataDate = new Date(c.time)
|
|
const itemDate = new Date(item.time)
|
|
return (
|
|
itemDate.getDate() === currentDataDate.getDate() &&
|
|
itemDate.getMonth() === currentDataDate.getMonth() &&
|
|
itemDate.getFullYear() === currentDataDate.getFullYear()
|
|
)
|
|
})
|
|
if (found) {
|
|
for (const key in found) {
|
|
if (key !== 'time') {
|
|
found[key] = found[key] + c[key]
|
|
}
|
|
}
|
|
} else {
|
|
a.push({ ...c })
|
|
}
|
|
return a
|
|
}, [])
|
|
return scaledData
|
|
}
|
|
|
|
const filteredData: HourlyFundingChartData[] = useMemo(() => {
|
|
if (!chartData.length) return []
|
|
const start = Number(daysToShow) * DAILY_MILLISECONDS
|
|
const filtered = chartData.filter((d: HourlyFundingChartData) => {
|
|
const date = new Date()
|
|
if (daysToShow === '30') {
|
|
date.setHours(0, 0, 0, 0)
|
|
} else {
|
|
date.setMinutes(0, 0, 0)
|
|
}
|
|
const dataTime = new Date(d.time).getTime()
|
|
const now = date.getTime()
|
|
const limit = now - start
|
|
return dataTime >= limit
|
|
})
|
|
if (daysToShow === '30') {
|
|
return scaleDataTime(filtered)
|
|
}
|
|
return filtered
|
|
}, [chartData, daysToShow])
|
|
|
|
const totalForTimePeriod = useMemo(() => {
|
|
if (!filteredData.length) return 0
|
|
return filteredData.reduce((a, c) => a + c.total, 0)
|
|
}, [filteredData])
|
|
|
|
return (
|
|
<FadeInFadeOut show={true}>
|
|
<ContentBox hideBorder hidePadding>
|
|
{loadingFunding || fetchingFunding ? (
|
|
<SheenLoader className="flex flex-1">
|
|
<div className={`h-[350px] w-full rounded-lg bg-th-bkg-2`} />
|
|
</SheenLoader>
|
|
) : (
|
|
<>
|
|
<div className="flex items-start justify-between">
|
|
<div>
|
|
<h2 className="mb-0.5 text-base font-normal text-th-fgd-3">
|
|
{t('funding')}
|
|
</h2>
|
|
{totalForTimePeriod ? (
|
|
<span className="font-display text-2xl text-th-fgd-1">
|
|
<FormatNumericValue
|
|
value={totalForTimePeriod}
|
|
isUsd
|
|
isPrivate
|
|
/>
|
|
</span>
|
|
) : null}
|
|
</div>
|
|
<ChartRangeButtons
|
|
activeValue={daysToShow}
|
|
names={['24H', '7D', '30D']}
|
|
values={['1', '7', '30']}
|
|
onChange={(v) => setDaysToShow(v)}
|
|
/>
|
|
</div>
|
|
{filteredData.find((d) => Math.abs(d.total) > 0) ? (
|
|
<div className="-mx-6 mt-6 h-64">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<BarChart data={filteredData}>
|
|
<Tooltip
|
|
cursor={{
|
|
fill: 'var(--bkg-2)',
|
|
opacity: 0.5,
|
|
}}
|
|
content={<CustomTooltip />}
|
|
/>
|
|
<defs>
|
|
<linearGradient
|
|
id="greenGradientBar"
|
|
x1="0"
|
|
y1="0"
|
|
x2="0"
|
|
y2="1"
|
|
>
|
|
<stop
|
|
offset="0%"
|
|
stopColor={COLORS.UP[theme]}
|
|
stopOpacity={1}
|
|
/>
|
|
<stop
|
|
offset="100%"
|
|
stopColor={COLORS.UP[theme]}
|
|
stopOpacity={0.7}
|
|
/>
|
|
</linearGradient>
|
|
<linearGradient
|
|
id="redGradientBar"
|
|
x1="0"
|
|
y1="1"
|
|
x2="0"
|
|
y2="0"
|
|
>
|
|
<stop
|
|
offset="0%"
|
|
stopColor={COLORS.DOWN[theme]}
|
|
stopOpacity={1}
|
|
/>
|
|
<stop
|
|
offset="100%"
|
|
stopColor={COLORS.DOWN[theme]}
|
|
stopOpacity={0.7}
|
|
/>
|
|
</linearGradient>
|
|
</defs>
|
|
<Bar dataKey="total">
|
|
{filteredData.map((entry, index) => {
|
|
return (
|
|
<Cell
|
|
key={`cell-${index}`}
|
|
fill={
|
|
entry['total'] > 0
|
|
? 'url(#greenGradientBar)'
|
|
: 'url(#redGradientBar)'
|
|
}
|
|
/>
|
|
)
|
|
})}
|
|
</Bar>
|
|
<XAxis
|
|
dataKey="time"
|
|
axisLine={false}
|
|
dy={10}
|
|
minTickGap={20}
|
|
padding={{ left: 20, right: 20 }}
|
|
tick={{
|
|
fill: 'var(--fgd-4)',
|
|
fontSize: 10,
|
|
}}
|
|
tickLine={false}
|
|
tickFormatter={(v) =>
|
|
formatDateAxis(v, parseInt(daysToShow))
|
|
}
|
|
/>
|
|
<YAxis
|
|
dataKey="total"
|
|
interval="preserveStartEnd"
|
|
axisLine={false}
|
|
dx={-10}
|
|
padding={{ top: 20, bottom: 20 }}
|
|
tick={{
|
|
fill: 'var(--fgd-4)',
|
|
fontSize: 10,
|
|
}}
|
|
tickLine={false}
|
|
tickFormatter={(v) => formatYAxis(v)}
|
|
type="number"
|
|
/>
|
|
<ReferenceLine y={0} stroke={COLORS.BKG4[theme]} />
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
) : (
|
|
<div className="mt-4 flex h-64 flex-col items-center justify-center rounded-lg border border-th-bkg-3 p-8">
|
|
<NoSymbolIcon className="mb-2 h-6 w-6 text-th-fgd-4" />
|
|
<p>{t('account:no-data')}</p>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
</ContentBox>
|
|
</FadeInFadeOut>
|
|
)
|
|
}
|
|
|
|
export default FundingChart
|