172 lines
6.0 KiB
TypeScript
172 lines
6.0 KiB
TypeScript
import TabButtons from '@components/shared/TabButtons'
|
|
import mangoStore from '@store/mangoStore'
|
|
import useMangoGroup from 'hooks/useMangoGroup'
|
|
import { useTranslation } from 'next-i18next'
|
|
import dynamic from 'next/dynamic'
|
|
import { useEffect, useMemo, useState } from 'react'
|
|
import { TokenStatsItem } from 'types'
|
|
import { formatYAxis } from 'utils/formatting'
|
|
const DetailedAreaChart = dynamic(
|
|
() => import('@components/shared/DetailedAreaChart'),
|
|
{ ssr: false }
|
|
)
|
|
|
|
const ChartTabs = ({ token }: { token: string }) => {
|
|
const { t } = useTranslation('token')
|
|
const [activeDepositsTab, setActiveDepositsTab] = useState('token:deposits')
|
|
const [activeBorrowsTab, setActiveBorrowsTab] = useState('token:borrows')
|
|
const [depositDaysToShow, setDepositDaysToShow] = useState('30')
|
|
const [borrowDaysToShow, setBorrowDaysToShow] = useState('30')
|
|
const [depositRateDaysToShow, setDepositRateDaysToShow] = useState('30')
|
|
const [borrowRateDaysToShow, setBorrowRateDaysToShow] = useState('30')
|
|
const tokenStats = mangoStore((s) => s.tokenStats.data)
|
|
const initialStatsLoad = mangoStore((s) => s.tokenStats.initialLoad)
|
|
const loadingTokenStats = mangoStore((s) => s.tokenStats.loading)
|
|
const actions = mangoStore.getState().actions
|
|
const { group } = useMangoGroup()
|
|
|
|
useEffect(() => {
|
|
if (group && !initialStatsLoad) {
|
|
actions.fetchTokenStats()
|
|
}
|
|
}, [group])
|
|
|
|
const statsHistory = useMemo(() => {
|
|
if (!tokenStats?.length) return []
|
|
return tokenStats.reduce((a: TokenStatsItem[], c: TokenStatsItem) => {
|
|
if (
|
|
c.symbol === token ||
|
|
// ETH needs to be renamed ETH (Portal) in tokenStats db
|
|
(c.symbol === 'ETH' && token === 'ETH (Portal)')
|
|
) {
|
|
const copy = { ...c }
|
|
copy.deposit_apr = copy.deposit_apr * 100
|
|
copy.borrow_apr = copy.borrow_apr * 100
|
|
a.push(copy)
|
|
}
|
|
return a.sort(
|
|
(a, b) =>
|
|
new Date(a.date_hour).getTime() - new Date(b.date_hour).getTime()
|
|
)
|
|
}, [])
|
|
}, [tokenStats])
|
|
|
|
// const filterStats = (daysToShow: string) => {
|
|
// if (!statsHistory.length) return []
|
|
// if (daysToShow !== '30') {
|
|
// const seconds = Number(daysToShow) * 86400
|
|
// const data = statsHistory.filter((d) => {
|
|
// const dataTime = new Date(d.date_hour).getTime() / 1000
|
|
// const now = new Date().getTime() / 1000
|
|
// const limit = now - seconds
|
|
// return dataTime >= limit
|
|
// })
|
|
// return data
|
|
// }
|
|
// return statsHistory
|
|
// }
|
|
|
|
return (
|
|
<div className="grid grid-cols-1 md:grid-cols-2">
|
|
<div className="col-span-1 border-b border-th-bkg-3 md:border-r md:border-b-0">
|
|
<div className="w-full">
|
|
<TabButtons
|
|
activeValue={activeDepositsTab}
|
|
onChange={(v) => setActiveDepositsTab(v)}
|
|
showBorders
|
|
values={[
|
|
['token:deposits', 0],
|
|
['token:deposit-rates', 0],
|
|
]}
|
|
/>
|
|
<div className="h-96 border-t border-th-bkg-3 px-6 py-6">
|
|
{activeDepositsTab === 'token:deposits' ? (
|
|
<DetailedAreaChart
|
|
data={statsHistory}
|
|
daysToShow={depositDaysToShow}
|
|
setDaysToShow={setDepositDaysToShow}
|
|
heightClass="h-64"
|
|
loaderHeightClass="h-[334px]"
|
|
domain={[0, 'dataMax']}
|
|
loading={loadingTokenStats}
|
|
small
|
|
tickFormat={(x) => formatYAxis(x)}
|
|
title={`${token} ${t('token:deposits')}`}
|
|
xKey="date_hour"
|
|
yKey={'total_deposits'}
|
|
/>
|
|
) : (
|
|
<DetailedAreaChart
|
|
data={statsHistory}
|
|
daysToShow={depositRateDaysToShow}
|
|
setDaysToShow={setDepositRateDaysToShow}
|
|
heightClass="h-64"
|
|
loaderHeightClass="h-[334px]"
|
|
// domain={[0, 'dataMax']}
|
|
loading={loadingTokenStats}
|
|
hideChange
|
|
small
|
|
suffix="%"
|
|
tickFormat={(x) => `${x.toFixed(2)}%`}
|
|
title={`${token} ${t('token:deposit-rates')} APR`}
|
|
xKey="date_hour"
|
|
yKey={'deposit_apr'}
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="col-span-1">
|
|
<div className="w-full">
|
|
<TabButtons
|
|
activeValue={activeBorrowsTab}
|
|
onChange={(v) => setActiveBorrowsTab(v)}
|
|
showBorders
|
|
values={[
|
|
['token:borrows', 0],
|
|
['token:borrow-rates', 0],
|
|
]}
|
|
/>
|
|
<div className="h-96 border-t border-th-bkg-3 px-6 py-6">
|
|
{activeBorrowsTab === 'token:borrows' ? (
|
|
<DetailedAreaChart
|
|
data={statsHistory}
|
|
daysToShow={borrowDaysToShow}
|
|
setDaysToShow={setBorrowDaysToShow}
|
|
heightClass="h-64"
|
|
loaderHeightClass="h-[334px]"
|
|
domain={[0, 'dataMax']}
|
|
loading={loadingTokenStats}
|
|
small
|
|
tickFormat={(x) => formatYAxis(x)}
|
|
title={`${token} ${t('token:borrows')}`}
|
|
xKey="date_hour"
|
|
yKey={'total_borrows'}
|
|
/>
|
|
) : (
|
|
<DetailedAreaChart
|
|
data={statsHistory}
|
|
daysToShow={borrowRateDaysToShow}
|
|
setDaysToShow={setBorrowRateDaysToShow}
|
|
heightClass="h-64"
|
|
loaderHeightClass="h-[334px]"
|
|
// domain={[0, 'dataMax']}
|
|
loading={loadingTokenStats}
|
|
small
|
|
hideChange
|
|
suffix="%"
|
|
tickFormat={(x) => `${x.toFixed(2)}%`}
|
|
title={`${token} ${t('token:borrow-rates')} APR`}
|
|
xKey="date_hour"
|
|
yKey={'borrow_apr'}
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default ChartTabs
|