84 lines
2.4 KiB
TypeScript
84 lines
2.4 KiB
TypeScript
import { useEffect, useMemo, useState } from 'react'
|
|
import PerpMarketsTable from './PerpMarketsTable'
|
|
import { useTranslation } from 'react-i18next'
|
|
import dayjs from 'dayjs'
|
|
import relativeTime from 'dayjs/plugin/relativeTime'
|
|
import mangoStore from '@store/mangoStore'
|
|
import RecentGainersLosers from './RecentGainersLosers'
|
|
import Spot from './Spot'
|
|
import useBanks from 'hooks/useBanks'
|
|
import TabsText from '@components/shared/TabsText'
|
|
import useFollowedAccounts from 'hooks/useFollowedAccounts'
|
|
import FollowedAccounts from './FollowedAccounts'
|
|
dayjs.extend(relativeTime)
|
|
|
|
const Explore = () => {
|
|
const { t } = useTranslation(['common'])
|
|
const { banks } = useBanks()
|
|
const { data: followedAccounts } = useFollowedAccounts()
|
|
const perpStats = mangoStore((s) => s.perpStats.data)
|
|
const [activeTab, setActiveTab] = useState('tokens')
|
|
|
|
useEffect(() => {
|
|
if (!perpStats || !perpStats.length) {
|
|
const actions = mangoStore.getState().actions
|
|
actions.fetchPerpStats()
|
|
}
|
|
}, [perpStats])
|
|
|
|
const tabsWithCount: [string, number][] = useMemo(() => {
|
|
const perpMarkets = mangoStore.getState().perpMarkets
|
|
const tabs: [string, number][] = [
|
|
['tokens', banks.length],
|
|
['perp', perpMarkets.length],
|
|
['account:followed-accounts', followedAccounts?.length],
|
|
]
|
|
return tabs
|
|
}, [banks, followedAccounts])
|
|
|
|
return (
|
|
<>
|
|
<div className="px-4 pt-10 md:px-6">
|
|
<h2 className="mb-4 text-center text-lg md:text-left">
|
|
{t('explore')}
|
|
</h2>
|
|
</div>
|
|
<RecentGainersLosers />
|
|
<div className="z-10 w-max px-4 pt-8 md:px-6">
|
|
<div
|
|
className={`flex h-10 flex-col items-center justify-end md:items-start ${
|
|
activeTab === 'tokens' ? 'mb-4 lg:mb-0' : ''
|
|
}`}
|
|
>
|
|
<TabsText
|
|
activeTab={activeTab}
|
|
onChange={setActiveTab}
|
|
tabs={tabsWithCount}
|
|
className="xl:text-lg"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<TabContent activeTab={activeTab} />
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default Explore
|
|
|
|
const TabContent = ({ activeTab }: { activeTab: string }) => {
|
|
switch (activeTab) {
|
|
case 'tokens':
|
|
return <Spot />
|
|
case 'perp-markets':
|
|
return (
|
|
<div className="mt-6 border-t border-th-bkg-3">
|
|
<PerpMarketsTable />
|
|
</div>
|
|
)
|
|
case 'account:followed-accounts':
|
|
return <FollowedAccounts />
|
|
default:
|
|
return <Spot />
|
|
}
|
|
}
|