mango-v4-ui/components/explore/Explore.tsx

import { useEffect, useMemo, useState } from 'react'
import PerpMarketsTable from './PerpMarketsTable'
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'
import useLocalStorageState from 'hooks/useLocalStorageState'
import { SHOW_ANNOUNCEMENTS_KEY } from 'utils/constants'

const Explore = () => {
  const { banks } = useBanks()
  const { data: followedAccounts } = useFollowedAccounts()
  const [showAnnouncements] = useLocalStorageState(SHOW_ANNOUNCEMENTS_KEY, true)
  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 followedAccountsNumber = followedAccounts
      ? followedAccounts.length
      : 0
    const tabs: [string, number][] = [
      ['tokens', banks.length],
      ['perp', perpMarkets.length],
      ['account:followed-accounts', followedAccountsNumber],
    ]
    return tabs
  }, [banks, followedAccounts])

  return (
    <div className={showAnnouncements ? 'pt-4' : 'pt-10'}>
      {/* <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' : ''
          }`}
          id="account-explore-tabs"
        >
          <TabsText
            activeTab={activeTab}
            onChange={setActiveTab}
            tabs={tabsWithCount}
            className="xl:text-lg"
          />
        </div>
      </div>
      <div className="pb-20 md:pb-0">
        <TabContent activeTab={activeTab} />
      </div>
    </div>
  )
}

export default Explore

const TabContent = ({ activeTab }: { activeTab: string }) => {
  switch (activeTab) {
    case 'tokens':
      return <Spot />
    case 'perp':
      return (
        <div className="mt-6 border-t border-th-bkg-3">
          <PerpMarketsTable />
        </div>
      )
    case 'account:followed-accounts':
      return <FollowedAccounts />
    default:
      return <Spot />
  }
}