import MedalIcon from '@components/icons/MedalIcon' import ProfileImage from '@components/profile/ProfileImage' import { ArrowLeftIcon, ChevronRightIcon } from '@heroicons/react/20/solid' import { useViewport } from 'hooks/useViewport' import { useEffect, useMemo, useState } from 'react' import Select from '@components/forms/Select' import { IconButton } from '@components/shared/Button' import AcornIcon from '@components/icons/AcornIcon' import WhaleIcon from '@components/icons/WhaleIcon' import RobotIcon from '@components/icons/RobotIcon' import MangoIcon from '@components/icons/MangoIcon' import { useQuery } from '@tanstack/react-query' import SheenLoader from '@components/shared/SheenLoader' import { abbreviateAddress } from 'utils/formatting' import { PublicKey } from '@solana/web3.js' import { useTranslation } from 'next-i18next' import { fetchLeaderboard } from 'apis/rewards' import { useAccountPointsAndRank, useAccountTier, useCurrentSeason, } from 'hooks/useRewards' import Badge from './Badge' import { tiers } from './RewardsPage' import useMangoAccount from 'hooks/useMangoAccount' import FormatNumericValue from '@components/shared/FormatNumericValue' import { useHiddenMangoAccounts } from 'hooks/useHiddenMangoAccounts' const Leaderboards = ({ goBack, leaderboard, }: { goBack: () => void leaderboard: string }) => { const { t } = useTranslation('rewards') const { isDesktop } = useViewport() const { mangoAccountAddress } = useMangoAccount() const { hiddenAccounts } = useHiddenMangoAccounts() const [leaderboardToShow, setLeaderboardToShow] = useState(leaderboard) const renderTierIcon = (tier: string) => { if (tier === 'bot') { return } else if (tier === 'mango') { return } else if (tier === 'whale') { return } else return } const { data: seasonData } = useCurrentSeason() const { data: accountTier } = useAccountTier( mangoAccountAddress, seasonData?.season_id, ) const { data: accountPointsAndRank } = useAccountPointsAndRank( mangoAccountAddress, seasonData?.season_id, ) const { data: leaderboardData, isLoading: loadingLeaderboardData } = useQuery( ['rewards-leaderboard-data', leaderboardToShow], () => fetchLeaderboard(seasonData!.season_id), { cacheTime: 1000 * 60 * 10, staleTime: 1000 * 60, retry: 3, refetchOnWindowFocus: false, enabled: !!seasonData, }, ) const leadersForTier = useMemo(() => { if (!leaderboardData || !leaderboardData.length) return [] const data = leaderboardData.find((x) => x.tier === leaderboardToShow)?.leaderboard || [] if (hiddenAccounts) { return data.filter((d) => !hiddenAccounts.includes(d.mango_account)) } else { return data } }, [leaderboardData, leaderboardToShow, hiddenAccounts]) useEffect(() => { if (typeof window !== 'undefined') { window.scrollTo(0, 0) } }, []) const isInTop20 = useMemo(() => { if (!leadersForTier.length || !mangoAccountAddress) return true return !!leadersForTier.find( (leader) => leader.mango_account === mangoAccountAddress, ) }, [leadersForTier, mangoAccountAddress]) return (

Leaderboard

{accountTier?.tier === leaderboardToShow && accountPointsAndRank?.rank && !isInTop20 ? (

{accountPointsAndRank.rank}

{accountPointsAndRank.rank < 4 ? ( ) : null}

YOU

) : null} {!loadingLeaderboardData ? ( leadersForTier && leadersForTier.length ? ( leadersForTier.map((acc, i: number) => ( )) ) : (
Leaderboard not available
) ) : (
{[...Array(20)].map((x, i) => (
))}
)}
) } export default Leaderboards const LeaderboardCard = ({ rank, account, }: { rank: number account: { mango_account: string tier: string total_points: number } }) => { const { isDesktop } = useViewport() const { mangoAccountAddress } = useMangoAccount() const { mango_account, total_points } = account return (

{rank}

{rank < 4 ? : null}

{mango_account !== mangoAccountAddress ? abbreviateAddress(new PublicKey(mango_account)) : 'YOU'}