2022-10-08 04:37:08 -07:00
|
|
|
import TabButtons from '@components/shared/TabButtons'
|
|
|
|
import { useMemo, useState } from 'react'
|
2022-12-06 18:47:03 -08:00
|
|
|
import PerpMarketsTable from './PerpMarketsTable'
|
2022-10-08 04:37:08 -07:00
|
|
|
import SpotMarketsTable from './SpotMarketsTable'
|
|
|
|
import TokenStats from './TokenStats'
|
|
|
|
|
2022-12-06 18:47:03 -08:00
|
|
|
const TABS = ['tokens', 'perp', 'spot']
|
2022-10-08 04:37:08 -07:00
|
|
|
|
|
|
|
const StatsPage = () => {
|
|
|
|
const [activeTab, setActiveTab] = useState('tokens')
|
|
|
|
const tabsWithCount: [string, number][] = useMemo(() => {
|
|
|
|
return TABS.map((t) => [t, 0])
|
|
|
|
}, [])
|
|
|
|
return (
|
|
|
|
<div className="pb-20 md:pb-16">
|
|
|
|
<TabButtons
|
|
|
|
activeValue={activeTab}
|
|
|
|
onChange={(v) => setActiveTab(v)}
|
|
|
|
values={tabsWithCount}
|
|
|
|
showBorders
|
|
|
|
/>
|
|
|
|
<TabContent activeTab={activeTab} />
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export default StatsPage
|
|
|
|
|
|
|
|
const TabContent = ({ activeTab }: { activeTab: string }) => {
|
|
|
|
switch (activeTab) {
|
|
|
|
case 'tokens':
|
|
|
|
return <TokenStats />
|
2022-12-06 18:47:03 -08:00
|
|
|
case 'perp':
|
|
|
|
return <PerpMarketsTable />
|
2022-10-08 04:37:08 -07:00
|
|
|
case 'spot':
|
|
|
|
return <SpotMarketsTable />
|
|
|
|
default:
|
|
|
|
return <TokenStats />
|
|
|
|
}
|
|
|
|
}
|