143 lines
3.9 KiB
TypeScript
143 lines
3.9 KiB
TypeScript
import { useEffect, useState } from 'react'
|
|
import StatsTotals from '../components/stats_page/StatsTotals'
|
|
import StatsAssets from '../components/stats_page/StatsAssets'
|
|
import StatsPerps from '../components/stats_page/StatsPerps'
|
|
import useMangoStats from '../hooks/useMangoStats'
|
|
import Swipeable from '../components/mobile/Swipeable'
|
|
import SwipeableTabs from '../components/mobile/SwipeableTabs'
|
|
import Tabs from '../components/Tabs'
|
|
import { useViewport } from '../hooks/useViewport'
|
|
import { breakpoints } from '../components/TradePageGrid'
|
|
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
|
|
import { useTranslation } from 'next-i18next'
|
|
import useLocalStorageState from 'hooks/useLocalStorageState'
|
|
import dayjs from 'dayjs'
|
|
|
|
export async function getStaticProps({ locale }) {
|
|
return {
|
|
props: {
|
|
...(await serverSideTranslations(locale, [
|
|
'common',
|
|
'delegate',
|
|
'profile',
|
|
])),
|
|
// Will be passed to the page component as props
|
|
},
|
|
}
|
|
}
|
|
|
|
export default function StatsPage() {
|
|
const { t } = useTranslation('common')
|
|
const TABS = ['Totals', 'Assets', 'Perps']
|
|
const {
|
|
latestStats,
|
|
loadLatestStats,
|
|
stats,
|
|
perpStats,
|
|
loadHistoricalStats,
|
|
loadPerpStats,
|
|
} = useMangoStats()
|
|
const [viewIndex, setViewIndex] = useState(0)
|
|
const [activeTab, setActiveTab] = useState(TABS[0])
|
|
const { width } = useViewport()
|
|
const isMobile = width ? width < breakpoints.sm : false
|
|
const [savedLanguage] = useLocalStorageState('language', '')
|
|
|
|
useEffect(() => {
|
|
dayjs.locale(savedLanguage == 'zh_tw' ? 'zh-tw' : savedLanguage)
|
|
})
|
|
|
|
const handleChangeViewIndex = (index) => {
|
|
setViewIndex(index)
|
|
}
|
|
|
|
const handleTabChange = (tabName) => {
|
|
setActiveTab(tabName)
|
|
}
|
|
|
|
return (
|
|
<div className="pt-6">
|
|
<div className="pb-4">
|
|
<h1>{t('stats')}</h1>
|
|
</div>
|
|
{!isMobile ? (
|
|
<Tabs activeTab={activeTab} onChange={handleTabChange} tabs={TABS} />
|
|
) : (
|
|
<SwipeableTabs
|
|
onChange={handleChangeViewIndex}
|
|
items={TABS}
|
|
tabIndex={viewIndex}
|
|
width="w-full"
|
|
/>
|
|
)}
|
|
{!isMobile ? (
|
|
<TabContent
|
|
activeTab={activeTab}
|
|
latestStats={latestStats}
|
|
perpStats={perpStats}
|
|
stats={stats}
|
|
loadHistoricalStats={loadHistoricalStats}
|
|
loadPerpStats={loadPerpStats}
|
|
loadLatestStats={loadLatestStats}
|
|
/>
|
|
) : (
|
|
<Swipeable index={viewIndex} onChangeIndex={handleChangeViewIndex}>
|
|
<StatsTotals
|
|
latestStats={latestStats}
|
|
stats={stats}
|
|
loadHistoricalStats={loadHistoricalStats}
|
|
loadLatestStats={loadLatestStats}
|
|
/>
|
|
<StatsAssets
|
|
latestStats={latestStats}
|
|
stats={stats}
|
|
loadHistoricalStats={loadHistoricalStats}
|
|
/>
|
|
<StatsPerps perpStats={perpStats} loadPerpStats={loadPerpStats} />
|
|
</Swipeable>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const TabContent = ({
|
|
activeTab,
|
|
latestStats,
|
|
perpStats,
|
|
stats,
|
|
loadHistoricalStats,
|
|
loadPerpStats,
|
|
loadLatestStats,
|
|
}) => {
|
|
switch (activeTab) {
|
|
case 'Totals':
|
|
return (
|
|
<StatsTotals
|
|
latestStats={latestStats}
|
|
stats={stats}
|
|
loadHistoricalStats={loadHistoricalStats}
|
|
loadLatestStats={loadLatestStats}
|
|
/>
|
|
)
|
|
case 'Assets':
|
|
return (
|
|
<StatsAssets
|
|
latestStats={latestStats}
|
|
stats={stats}
|
|
loadHistoricalStats={loadHistoricalStats}
|
|
/>
|
|
)
|
|
case 'Perps':
|
|
return <StatsPerps perpStats={perpStats} loadPerpStats={loadPerpStats} />
|
|
default:
|
|
return (
|
|
<StatsTotals
|
|
latestStats={latestStats}
|
|
stats={stats}
|
|
loadHistoricalStats={loadHistoricalStats}
|
|
loadLatestStats={loadLatestStats}
|
|
/>
|
|
)
|
|
}
|
|
}
|