leaderboard layout
This commit is contained in:
saml33
parent
a3fc5b2a57
commit
be73a39973
|
|
@ -0,0 +1,233 @@
|
|||
import { useEffect, useMemo, useState } from 'react'
|
||||
import dayjs from 'dayjs'
|
||||
import { Table, Td, Th, TrBody, TrHead } from './TableElements'
|
||||
import { usdFormatter } from '../utils'
|
||||
import { AwardIcon, TrophyIcon } from './icons'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import { TrophyHeroIcon } from './icons'
|
||||
import { ChartPieIcon, TrendingUpIcon } from '@heroicons/react/outline'
|
||||
|
||||
const utc = require('dayjs/plugin/utc')
|
||||
dayjs.extend(utc)
|
||||
|
||||
const LeaderboardTable = ({ range = '30' }) => {
|
||||
const { t } = useTranslation('common')
|
||||
const [pnlLeaderboardData, setPnlLeaderboardData] = useState<any[]>([])
|
||||
const [perpPnlLeaderboardData, setPerpPnlLeaderboardData] = useState<any[]>(
|
||||
[]
|
||||
)
|
||||
const [leaderboardType, setLeaderboardType] = useState<string>('pnl')
|
||||
const [loading, setLoading] = useState(false)
|
||||
|
||||
const fetchPnlLeaderboard = async () => {
|
||||
setLoading(true)
|
||||
const response = await fetch(
|
||||
`https://mango-transaction-log.herokuapp.com/v3/stats/pnl-leaderboard?start-date=${dayjs()
|
||||
.subtract(parseInt(range), 'day')
|
||||
.format('YYYY-MM-DD')}`
|
||||
)
|
||||
const parsedResponse = await response.json()
|
||||
setPnlLeaderboardData(parsedResponse)
|
||||
|
||||
setLoading(false)
|
||||
}
|
||||
|
||||
const fetchPerpPnlLeaderboard = async () => {
|
||||
setLoading(true)
|
||||
const response = await fetch(
|
||||
`https://mango-transaction-log.herokuapp.com/v3/stats/perp-pnl-leaderboard?start-date=${dayjs()
|
||||
.subtract(parseInt(range), 'day')
|
||||
.format('YYYY-MM-DD')}`
|
||||
)
|
||||
const parsedResponse = await response.json()
|
||||
setPerpPnlLeaderboardData(parsedResponse)
|
||||
|
||||
setLoading(false)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (leaderboardType === 'pnl') {
|
||||
fetchPnlLeaderboard()
|
||||
} else {
|
||||
fetchPerpPnlLeaderboard()
|
||||
}
|
||||
}, [range, leaderboardType])
|
||||
|
||||
useEffect(() => {
|
||||
fetchPerpPnlLeaderboard()
|
||||
}, [])
|
||||
|
||||
const leaderboardData = useMemo(
|
||||
() =>
|
||||
leaderboardType === 'pnl' ? pnlLeaderboardData : perpPnlLeaderboardData,
|
||||
[leaderboardType, pnlLeaderboardData, perpPnlLeaderboardData]
|
||||
)
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-12 gap-6">
|
||||
<div className="col-span-4 space-y-4">
|
||||
<button
|
||||
className={`relative flex w-full items-center rounded-md p-4 text-left ${
|
||||
leaderboardType === 'pnl'
|
||||
? 'bg-th-bkg-4 text-th-fgd-1 after:absolute after:left-[100%] after:top-1/2 after:-translate-y-1/2 after:transform after:border-l-[12px] after:border-b-[12px] after:border-t-[12px] after:border-l-th-bkg-4 after:border-b-transparent after:border-t-transparent'
|
||||
: 'bg-th-bkg-3 text-th-fgd-4 hover:bg-th-bkg-4'
|
||||
}`}
|
||||
onClick={() => setLeaderboardType('pnl')}
|
||||
>
|
||||
<ChartPieIcon className="mr-2 h-6 w-6" />
|
||||
<div>
|
||||
<div className="text-base font-bold">Total PnL</div>
|
||||
<span className="mb-0 text-th-fgd-4">
|
||||
{range === '9999'
|
||||
? 'All-time Leaderboard'
|
||||
: `${range} Day Leaderboard`}
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
className={`relative flex w-full items-center rounded-md p-4 text-left ${
|
||||
leaderboardType === 'perp-pnl'
|
||||
? 'bg-th-bkg-4 text-th-fgd-1 after:absolute after:left-[100%] after:top-1/2 after:-translate-y-1/2 after:transform after:border-l-[12px] after:border-b-[12px] after:border-t-[12px] after:border-l-th-bkg-4 after:border-b-transparent after:border-t-transparent'
|
||||
: 'bg-th-bkg-3 text-th-fgd-4 hover:bg-th-bkg-4'
|
||||
}`}
|
||||
onClick={() => setLeaderboardType('perp-pnl')}
|
||||
>
|
||||
<TrendingUpIcon className="mr-2 h-6 w-6" />
|
||||
<div>
|
||||
<div className="text-base font-bold">Futures Only</div>
|
||||
<span className="text-th-fgd-4">
|
||||
{range === '9999'
|
||||
? 'All-time Leaderboard'
|
||||
: `${range} Day Leaderboard`}
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className={`col-span-8`}>
|
||||
{loading ? (
|
||||
<div className="mb-4 h-28 w-full animate-pulse rounded-md bg-th-bkg-3" />
|
||||
) : leaderboardData.length > 0 ? (
|
||||
<div className="mb-6 flex items-center space-x-4 rounded-md bg-gradient-to-b from-th-bkg-4 to-th-bkg-3 py-4 px-6">
|
||||
<div className="flex h-20 w-20 flex-shrink-0 items-center justify-center rounded-full bg-th-bkg-2">
|
||||
<TrophyHeroIcon className="h-12 w-auto drop-shadow-xl" />
|
||||
</div>
|
||||
<div className="flex w-full items-center justify-between">
|
||||
<div>
|
||||
<p className="mb-0 text-2xl font-bold text-th-fgd-1">#1</p>
|
||||
<p className="mb-0 text-base">{`${leaderboardData[0].mango_account.slice(
|
||||
0,
|
||||
5
|
||||
)}...${leaderboardData[0].mango_account.slice(-5)}`}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-2xl font-bold text-th-fgd-1">
|
||||
{leaderboardType === 'pnl'
|
||||
? usdFormatter(leaderboardData[0].pnl)
|
||||
: usdFormatter(leaderboardData[0].perp_pnl)}
|
||||
</span>
|
||||
<a
|
||||
href={`https://trade.mango.markets/account?pubkey=${leaderboardData[0].mango_account}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="default-transition block text-right text-base text-th-fgd-3 hover:text-th-fgd-4"
|
||||
>
|
||||
{t('view-account')}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
<div className={`overflow-x-auto sm:-mx-6 lg:-mx-8`}>
|
||||
<div
|
||||
className={`inline-block min-w-full align-middle sm:px-6 lg:px-8`}
|
||||
>
|
||||
{!loading ? (
|
||||
<div
|
||||
className={`overflow-hidden border-b border-th-bkg-2 shadow`}
|
||||
>
|
||||
<Table>
|
||||
<thead>
|
||||
<TrHead>
|
||||
<Th>{t('rank')}</Th>
|
||||
<Th>{t('account')}</Th>
|
||||
<Th>{t('pnl')}</Th>
|
||||
</TrHead>
|
||||
</thead>
|
||||
<tbody>
|
||||
{leaderboardData.slice(1).map((acc, index) => {
|
||||
const rank = index + 2
|
||||
return (
|
||||
<TrBody key={acc.mango_account}>
|
||||
<Td className="w-1/10">
|
||||
<div className="flex items-center">
|
||||
{rank}
|
||||
{rank === 1 ? (
|
||||
<TrophyIcon className="ml-1.5 h-5 w-5 text-th-primary" />
|
||||
) : null}
|
||||
{rank === 2 || rank === 3 ? (
|
||||
<AwardIcon className="ml-1.5 h-5 w-5 text-th-primary-dark" />
|
||||
) : null}
|
||||
</div>
|
||||
</Td>
|
||||
<Td className="w-1/3">
|
||||
{`${acc.mango_account.slice(
|
||||
0,
|
||||
5
|
||||
)}...${acc.mango_account.slice(-5)}`}
|
||||
</Td>
|
||||
<Td className="w-1/3">
|
||||
{leaderboardType === 'pnl'
|
||||
? usdFormatter(acc.pnl)
|
||||
: usdFormatter(acc.perp_pnl)}
|
||||
</Td>
|
||||
<Td className="w-1/5">
|
||||
<div className="flex justify-end">
|
||||
<a
|
||||
href={`https://trade.mango.markets/account?pubkey=${acc.mango_account}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="default-transition text-th-fgd-3 hover:text-th-fgd-4"
|
||||
>
|
||||
{t('view-account')}
|
||||
</a>
|
||||
</div>
|
||||
</Td>
|
||||
</TrBody>
|
||||
)
|
||||
})}
|
||||
</tbody>
|
||||
</Table>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-1">
|
||||
<div className="h-8 w-full animate-pulse rounded-md bg-th-bkg-3" />
|
||||
<div className="h-16 w-full animate-pulse rounded-md bg-th-bkg-3" />
|
||||
<div className="h-16 w-full animate-pulse rounded-md bg-th-bkg-3" />
|
||||
<div className="h-16 w-full animate-pulse rounded-md bg-th-bkg-3" />
|
||||
<div className="h-16 w-full animate-pulse rounded-md bg-th-bkg-3" />
|
||||
<div className="h-16 w-full animate-pulse rounded-md bg-th-bkg-3" />
|
||||
<div className="h-16 w-full animate-pulse rounded-md bg-th-bkg-3" />
|
||||
<div className="h-16 w-full animate-pulse rounded-md bg-th-bkg-3" />
|
||||
<div className="h-16 w-full animate-pulse rounded-md bg-th-bkg-3" />
|
||||
<div className="h-16 w-full animate-pulse rounded-md bg-th-bkg-3" />
|
||||
<div className="h-16 w-full animate-pulse rounded-md bg-th-bkg-3" />
|
||||
<div className="h-16 w-full animate-pulse rounded-md bg-th-bkg-3" />
|
||||
<div className="h-16 w-full animate-pulse rounded-md bg-th-bkg-3" />
|
||||
<div className="h-16 w-full animate-pulse rounded-md bg-th-bkg-3" />
|
||||
<div className="h-16 w-full animate-pulse rounded-md bg-th-bkg-3" />
|
||||
<div className="h-16 w-full animate-pulse rounded-md bg-th-bkg-3" />
|
||||
<div className="h-16 w-full animate-pulse rounded-md bg-th-bkg-3" />
|
||||
<div className="h-16 w-full animate-pulse rounded-md bg-th-bkg-3" />
|
||||
<div className="h-16 w-full animate-pulse rounded-md bg-th-bkg-3" />
|
||||
<div className="h-16 w-full animate-pulse rounded-md bg-th-bkg-3" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default LeaderboardTable
|
||||
|
|
@ -18,7 +18,7 @@ import {
|
|||
LightBulbIcon,
|
||||
UserAddIcon,
|
||||
} from '@heroicons/react/outline'
|
||||
import { MangoIcon } from './icons'
|
||||
import { MangoIcon, TrophyIcon } from './icons'
|
||||
import { useWallet } from '@solana/wallet-adapter-react'
|
||||
|
||||
// const StyledNewLabel = ({ children, ...props }) => (
|
||||
|
|
@ -79,6 +79,12 @@ const TopBar = () => {
|
|||
false,
|
||||
<UserAddIcon className="h-4 w-4" key="referrals" />,
|
||||
],
|
||||
[
|
||||
t('leaderboard'),
|
||||
'/leaderboard',
|
||||
false,
|
||||
<TrophyIcon className="h-4 w-4" key="leaderboard" />,
|
||||
],
|
||||
[
|
||||
t('calculator'),
|
||||
'/risk-calculator',
|
||||
|
|
|
|||
|
|
@ -954,3 +954,138 @@ export const NotifiIcon = ({ className }) => {
|
|||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export const AwardIcon = ({ className }) => {
|
||||
return (
|
||||
<svg
|
||||
className={`${className}`}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
>
|
||||
<circle cx="12" cy="8" r="7"></circle>
|
||||
<polyline points="8.21 13.89 7 23 12 20 17 23 15.79 13.88"></polyline>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export const TrophyIcon = ({ className }) => {
|
||||
return (
|
||||
<svg
|
||||
className={`${className}`}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 38 34"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path d="M36.0082 3.8971H30.7152V1.9751C30.7152 1.1461 30.0432 0.475098 29.2152 0.475098H8.78519C7.95619 0.475098 7.28519 1.1461 7.28519 1.9751V3.8971L1.99219 3.8981C1.16319 3.8981 0.492188 4.5701 0.492188 5.3981C0.492188 9.4881 3.47119 12.8871 7.37219 13.5611C7.87919 17.8821 10.7462 21.4901 14.6442 23.0591V25.6651H14.1752C13.7802 25.6651 13.4012 25.8211 13.1202 26.1001C11.5172 27.6871 10.6362 29.7911 10.6362 32.0241C10.6362 32.8521 11.3082 33.5241 12.1362 33.5241H25.8622C26.6902 33.5241 27.3622 32.8521 27.3622 32.0241C27.3622 29.7921 26.4802 27.6881 24.8792 26.1001C24.5992 25.8221 24.2192 25.6651 23.8232 25.6651H23.3542V23.0601C27.2532 21.4901 30.1212 17.8831 30.6272 13.5621C34.5272 12.8881 37.5072 9.4891 37.5072 5.3981C37.5082 4.5681 36.8362 3.8971 36.0082 3.8971ZM7.28519 10.4751C5.57019 9.9671 4.21519 8.6131 3.70819 6.8981H7.28519V10.4751ZM24.1462 30.5241H13.8532C14.0512 29.8511 14.3852 29.2211 14.8382 28.6661H23.1622C23.6152 29.2221 23.9472 29.8521 24.1462 30.5241ZM17.6452 25.6661V23.8171C18.0902 23.8691 18.5412 23.9041 18.9992 23.9041C19.4592 23.9041 19.9092 23.8691 20.3542 23.8171V25.6661H17.6452ZM27.7152 12.1911C27.7152 16.9961 23.8052 20.9041 18.9992 20.9041C14.1932 20.9041 10.2852 16.9961 10.2852 12.1911V3.4751H27.7152V12.1911ZM30.7152 10.4751V6.8981L34.2912 6.8991C33.7842 8.6131 32.4302 9.9671 30.7152 10.4751Z" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export const TrophyHeroIcon = ({ className }) => {
|
||||
return (
|
||||
<svg
|
||||
className={`${className}`}
|
||||
viewBox="0 0 82 89"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M28.9297 73.1328H41.3078V58.1088L36.8772 53.6781C33.3256 61.5261 28.9297 69.0595 28.9297 73.1328Z"
|
||||
fill="#F2C94C"
|
||||
/>
|
||||
<path
|
||||
d="M41.1037 25.9535C41.1037 25.1055 41.1782 24.2695 41.3141 23.4495V14.2842C38.9067 17.5495 37.4531 21.6109 37.4531 25.9535C37.4531 30.9735 37.4542 37.7602 41.3141 41.4922V31.5282C41.1641 29.8935 41.1037 28.0468 41.1037 25.9535Z"
|
||||
fill="#8CC1C6"
|
||||
/>
|
||||
<path
|
||||
d="M4.33803 16.2893C4.33803 12.2267 7.91137 10.42 16.5687 10.2093C17.387 17.8226 20.5995 28.1506 25.2714 36.3306C16.549 30.8653 4.33803 21.484 4.33803 16.2893V16.2893ZM64.2438 6.5373C62.6578 6.5373 61.0968 6.57595 59.5875 6.61328C58.5875 6.63728 57.6291 6.65997 56.7239 6.67064H41.3083H25.8932C24.988 6.65997 24.0302 6.63728 23.0296 6.61328C21.5214 6.57595 19.9604 6.5373 18.3739 6.5373C13.0812 6.5373 0.6875 6.53732 0.6875 16.2893C0.6875 25.06 21.0834 38.908 29.8891 43.0346C33.311 47.0586 37.1932 49.668 41.3083 49.668V10.2093H45.3562H62.1531H66.0484C74.7058 10.42 78.2791 12.2267 78.2791 16.2893C78.2791 21.484 66.0698 30.8653 57.3474 36.3293C55.9323 38.808 54.3834 41.0866 52.7271 43.0346C61.5323 38.9093 81.9296 25.06 81.9296 16.2893C81.9296 6.53732 69.537 6.5373 64.2438 6.5373"
|
||||
fill="#F2C94C"
|
||||
/>
|
||||
<path
|
||||
d="M52.7282 43.0341C54.3845 41.0861 55.9334 38.8075 57.3485 36.3288C62.0193 28.1501 65.2313 17.8221 66.0496 10.2088H62.1542H45.3573H41.3094V14.2808V23.4461V31.5248V41.4888V48.4501H36.9745C35.5048 48.4501 34.3125 49.6408 34.3125 51.1115C34.3125 52.5808 35.5048 53.7728 36.9745 53.7728L41.3094 58.1088V73.1328H53.6881C53.6881 69.0741 49.324 61.5995 45.7782 53.7595C47.1849 53.6888 48.3064 52.5368 48.3064 51.1115C48.3064 49.7968 47.3516 48.7115 46.099 48.4955C48.4417 47.3595 50.6682 45.4555 52.7282 43.0341Z"
|
||||
fill="#E4AF11"
|
||||
/>
|
||||
<path
|
||||
d="M20.826 83.5432H17.5995C16.1287 83.5432 14.9375 84.7338 14.9375 86.2045C14.9375 87.6738 16.1287 88.8672 17.5995 88.8672H41.3094V83.5432H20.826Z"
|
||||
fill="#37324D"
|
||||
/>
|
||||
<path
|
||||
d="M64.9276 83.5432H41.3125V88.8672H64.9276C66.398 88.8672 67.5896 87.6738 67.5896 86.2045C67.5896 84.7338 66.398 83.5432 64.9276 83.5432"
|
||||
fill="#2A2440"
|
||||
/>
|
||||
<path d="M41.3125 83.5429H61.5942V76.5H41.3125V83.5429Z" fill="#37324D" />
|
||||
<path d="M41.3115 76.5H20.8281V83.5429H41.3115V76.5Z" fill="#706C81" />
|
||||
<path
|
||||
d="M41.3115 73.1338H20.8281V76.4804H41.3115V73.1338Z"
|
||||
fill="#C1BED3"
|
||||
/>
|
||||
<path
|
||||
d="M61.5942 76.4804V73.1338H41.3125V76.4804H61.5942"
|
||||
fill="#706C81"
|
||||
/>
|
||||
<path
|
||||
d="M24.169 5.45374L26.5889 8.02197L23.1205 8.67391L20.5518 11.0937L19.9002 7.62534L17.4807 5.05618L20.9488 4.40517L23.5177 1.98539L24.169 5.45374Z"
|
||||
fill="#E5E3EC"
|
||||
/>
|
||||
<mask
|
||||
id="mask0_711_14107"
|
||||
maskUnits="userSpaceOnUse"
|
||||
x="32"
|
||||
y="15"
|
||||
width="18"
|
||||
height="22"
|
||||
>
|
||||
<path
|
||||
d="M47.5346 18.8959C47.5555 18.8955 47.5761 18.895 47.5966 18.8944L47.6249 18.8761C43.9672 12.6368 39.1845 17.5491 39.1845 17.5491L39.1913 17.5611L39.1901 17.5614C41.9405 22.3835 47.1676 19.1692 47.5953 18.8944C47.5752 18.895 47.555 18.8955 47.5346 18.8959Z"
|
||||
fill="#FFE28A"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M40.8017 20.5254C41.6725 20.9722 42.6255 21.1253 43.5374 21.1227C44.0672 21.6093 44.5081 22.181 44.9223 22.7679C45.094 23.0131 45.2489 23.2697 45.3859 23.5359C45.7026 24.1458 45.9356 24.7911 46.1713 25.444C46.2404 25.6355 46.3098 25.8278 46.3816 26.0198C46.4041 26.1021 46.4276 26.1844 46.4521 26.2668C46.8161 27.5154 47.3486 28.8489 48.0608 29.9502C48.2964 30.3119 48.5598 30.6547 48.8496 30.9748C48.9066 31.0365 48.9649 31.0976 49.0234 31.1588C49.2962 31.4446 49.5709 31.7325 49.7267 32.0926C49.9206 32.5414 49.9057 33.0575 49.7891 33.5325C49.2388 35.7709 47.0831 36.3591 45.0229 36.4134L45.0239 36.4108C44.2514 36.4262 43.4842 36.3687 42.8039 36.299C42.8039 36.299 39.5232 35.9594 36.7424 33.9263L36.7011 33.8952C36.3591 33.6434 36.0333 33.3702 35.7258 33.0771C34.9464 32.3332 34.2529 31.4895 33.7225 30.5632L33.7328 30.5528C33.67 30.4398 33.6098 30.3256 33.5522 30.2103C33.0392 29.1834 32.7265 28.0656 32.7123 26.8775C32.6882 24.8837 33.3703 22.8419 34.6669 21.3616L34.6656 21.3582C35.3675 20.5893 36.2449 19.9853 37.2835 19.6414C37.9346 19.4238 38.6182 19.3194 39.3046 19.3326C39.7222 19.8229 40.2308 20.2274 40.8017 20.5254Z"
|
||||
fill="#FFE28A"
|
||||
/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_711_14107)">
|
||||
<rect
|
||||
x="41.2359"
|
||||
y="10.8406"
|
||||
width="10.9597"
|
||||
height="30.4437"
|
||||
fill="#FFCF40"
|
||||
/>
|
||||
</g>
|
||||
<mask
|
||||
id="mask1_711_14107"
|
||||
maskUnits="userSpaceOnUse"
|
||||
x="32"
|
||||
y="15"
|
||||
width="18"
|
||||
height="22"
|
||||
>
|
||||
<path
|
||||
d="M47.5346 18.8959C47.5555 18.8955 47.5761 18.895 47.5966 18.8944L47.6249 18.8761C43.9672 12.6368 39.1845 17.5491 39.1845 17.5491L39.1913 17.5611L39.1901 17.5614C41.9405 22.3835 47.1676 19.1692 47.5953 18.8944C47.5752 18.895 47.555 18.8955 47.5346 18.8959Z"
|
||||
fill="#FFE28A"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M40.8017 20.5254C41.6725 20.9722 42.6255 21.1253 43.5374 21.1227C44.0672 21.6093 44.5081 22.181 44.9223 22.7679C45.094 23.0131 45.2489 23.2697 45.3859 23.5359C45.7026 24.1458 45.9356 24.7911 46.1713 25.444C46.2404 25.6355 46.3098 25.8278 46.3816 26.0198C46.4041 26.1021 46.4276 26.1844 46.4521 26.2668C46.8161 27.5154 47.3486 28.8489 48.0608 29.9502C48.2964 30.3119 48.5598 30.6547 48.8496 30.9748C48.9066 31.0365 48.9649 31.0976 49.0234 31.1588C49.2962 31.4446 49.5709 31.7325 49.7267 32.0926C49.9206 32.5414 49.9057 33.0575 49.7891 33.5325C49.2388 35.7709 47.0831 36.3591 45.0229 36.4134L45.0239 36.4108C44.2514 36.4262 43.4842 36.3687 42.8039 36.299C42.8039 36.299 39.5232 35.9594 36.7424 33.9263L36.7011 33.8952C36.3591 33.6434 36.0333 33.3702 35.7258 33.0771C34.9464 32.3332 34.2529 31.4895 33.7225 30.5632L33.7328 30.5528C33.67 30.4398 33.6098 30.3256 33.5522 30.2103C33.0392 29.1834 32.7265 28.0656 32.7123 26.8775C32.6882 24.8837 33.3703 22.8419 34.6669 21.3616L34.6656 21.3582C35.3675 20.5893 36.2449 19.9853 37.2835 19.6414C37.9346 19.4238 38.6182 19.3194 39.3046 19.3326C39.7222 19.8229 40.2308 20.2274 40.8017 20.5254Z"
|
||||
fill="#FFE28A"
|
||||
/>
|
||||
</mask>
|
||||
<g mask="url(#mask1_711_14107)">
|
||||
<rect
|
||||
x="30.2762"
|
||||
y="10.8406"
|
||||
width="10.9597"
|
||||
height="30.4437"
|
||||
fill="#FDE877"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,42 @@
|
|||
import { useState } from 'react'
|
||||
import PageBodyContainer from '../components/PageBodyContainer'
|
||||
import TopBar from '../components/TopBar'
|
||||
import LeaderboardTable from '../components/LeaderboardTable'
|
||||
import ButtonGroup from 'components/ButtonGroup'
|
||||
|
||||
const leaderboardRangePresets = [
|
||||
{ label: '7d', value: '7' },
|
||||
{ label: '30d', value: '30' },
|
||||
{ label: 'All', value: '9999' },
|
||||
]
|
||||
const leaderboardRangePresetLabels = leaderboardRangePresets.map((x) => x.label)
|
||||
const leaderboardRangePresetValues = leaderboardRangePresets.map((x) => x.value)
|
||||
|
||||
export default function Leaderboard() {
|
||||
const [leaderboardRange, setLeaderboardRange] = useState('30')
|
||||
|
||||
return (
|
||||
<div className={`bg-th-bkg-1 text-th-fgd-1 transition-all`}>
|
||||
<TopBar />
|
||||
<PageBodyContainer>
|
||||
<div className="flex items-center justify-between pt-8 pb-3 sm:pb-6 md:pt-10">
|
||||
<h1 className={`text-2xl font-semibold text-th-fgd-1`}>
|
||||
Leaderboard
|
||||
</h1>
|
||||
<div className="w-full sm:ml-auto sm:w-56">
|
||||
<ButtonGroup
|
||||
activeValue={leaderboardRange}
|
||||
className="h-8"
|
||||
onChange={(r) => setLeaderboardRange(r)}
|
||||
values={leaderboardRangePresetValues}
|
||||
names={leaderboardRangePresetLabels}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="rounded-lg bg-th-bkg-2 p-6">
|
||||
<LeaderboardTable range={leaderboardRange} />
|
||||
</div>
|
||||
</PageBodyContainer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<svg width="82" height="89" viewBox="0 0 82 89" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M28.9297 73.1328H41.3078V58.1088L36.8772 53.6781C33.3256 61.5261 28.9297 69.0595 28.9297 73.1328Z" fill="#F2C94C"/>
|
||||
<path d="M41.1037 25.9535C41.1037 25.1055 41.1782 24.2695 41.3141 23.4495V14.2842C38.9067 17.5495 37.4531 21.6109 37.4531 25.9535C37.4531 30.9735 37.4542 37.7602 41.3141 41.4922V31.5282C41.1641 29.8935 41.1037 28.0468 41.1037 25.9535Z" fill="#8CC1C6"/>
|
||||
<path d="M4.33803 16.2893C4.33803 12.2267 7.91137 10.42 16.5687 10.2093C17.387 17.8226 20.5995 28.1506 25.2714 36.3306C16.549 30.8653 4.33803 21.484 4.33803 16.2893V16.2893ZM64.2438 6.5373C62.6578 6.5373 61.0968 6.57595 59.5875 6.61328C58.5875 6.63728 57.6291 6.65997 56.7239 6.67064H41.3083H25.8932C24.988 6.65997 24.0302 6.63728 23.0296 6.61328C21.5214 6.57595 19.9604 6.5373 18.3739 6.5373C13.0812 6.5373 0.6875 6.53732 0.6875 16.2893C0.6875 25.06 21.0834 38.908 29.8891 43.0346C33.311 47.0586 37.1932 49.668 41.3083 49.668V10.2093H45.3562H62.1531H66.0484C74.7058 10.42 78.2791 12.2267 78.2791 16.2893C78.2791 21.484 66.0698 30.8653 57.3474 36.3293C55.9323 38.808 54.3834 41.0866 52.7271 43.0346C61.5323 38.9093 81.9296 25.06 81.9296 16.2893C81.9296 6.53732 69.537 6.5373 64.2438 6.5373" fill="#F2C94C"/>
|
||||
<path d="M52.7282 43.0341C54.3845 41.0861 55.9334 38.8075 57.3485 36.3288C62.0193 28.1501 65.2313 17.8221 66.0496 10.2088H62.1542H45.3573H41.3094V14.2808V23.4461V31.5248V41.4888V48.4501H36.9745C35.5048 48.4501 34.3125 49.6408 34.3125 51.1115C34.3125 52.5808 35.5048 53.7728 36.9745 53.7728L41.3094 58.1088V73.1328H53.6881C53.6881 69.0741 49.324 61.5995 45.7782 53.7595C47.1849 53.6888 48.3064 52.5368 48.3064 51.1115C48.3064 49.7968 47.3516 48.7115 46.099 48.4955C48.4417 47.3595 50.6682 45.4555 52.7282 43.0341Z" fill="#E4AF11"/>
|
||||
<path d="M20.826 83.5432H17.5995C16.1287 83.5432 14.9375 84.7338 14.9375 86.2045C14.9375 87.6738 16.1287 88.8672 17.5995 88.8672H41.3094V83.5432H20.826Z" fill="#37324D"/>
|
||||
<path d="M64.9276 83.5432H41.3125V88.8672H64.9276C66.398 88.8672 67.5896 87.6738 67.5896 86.2045C67.5896 84.7338 66.398 83.5432 64.9276 83.5432" fill="#2A2440"/>
|
||||
<path d="M41.3125 83.5429H61.5942V76.5H41.3125V83.5429Z" fill="#37324D"/>
|
||||
<path d="M41.3115 76.5H20.8281V83.5429H41.3115V76.5Z" fill="#706C81"/>
|
||||
<path d="M41.3115 73.1338H20.8281V76.4804H41.3115V73.1338Z" fill="#C1BED3"/>
|
||||
<path d="M61.5942 76.4804V73.1338H41.3125V76.4804H61.5942" fill="#706C81"/>
|
||||
<path d="M24.169 5.45374L26.5889 8.02197L23.1205 8.67391L20.5518 11.0937L19.9002 7.62534L17.4807 5.05618L20.9488 4.40517L23.5177 1.98539L24.169 5.45374Z" fill="#E5E3EC"/>
|
||||
<mask id="mask0_711_14107" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="32" y="15" width="18" height="22">
|
||||
<path d="M47.5346 18.8959C47.5555 18.8955 47.5761 18.895 47.5966 18.8944L47.6249 18.8761C43.9672 12.6368 39.1845 17.5491 39.1845 17.5491L39.1913 17.5611L39.1901 17.5614C41.9405 22.3835 47.1676 19.1692 47.5953 18.8944C47.5752 18.895 47.555 18.8955 47.5346 18.8959Z" fill="#FFE28A"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M40.8017 20.5254C41.6725 20.9722 42.6255 21.1253 43.5374 21.1227C44.0672 21.6093 44.5081 22.181 44.9223 22.7679C45.094 23.0131 45.2489 23.2697 45.3859 23.5359C45.7026 24.1458 45.9356 24.7911 46.1713 25.444C46.2404 25.6355 46.3098 25.8278 46.3816 26.0198C46.4041 26.1021 46.4276 26.1844 46.4521 26.2668C46.8161 27.5154 47.3486 28.8489 48.0608 29.9502C48.2964 30.3119 48.5598 30.6547 48.8496 30.9748C48.9066 31.0365 48.9649 31.0976 49.0234 31.1588C49.2962 31.4446 49.5709 31.7325 49.7267 32.0926C49.9206 32.5414 49.9057 33.0575 49.7891 33.5325C49.2388 35.7709 47.0831 36.3591 45.0229 36.4134L45.0239 36.4108C44.2514 36.4262 43.4842 36.3687 42.8039 36.299C42.8039 36.299 39.5232 35.9594 36.7424 33.9263L36.7011 33.8952C36.3591 33.6434 36.0333 33.3702 35.7258 33.0771C34.9464 32.3332 34.2529 31.4895 33.7225 30.5632L33.7328 30.5528C33.67 30.4398 33.6098 30.3256 33.5522 30.2103C33.0392 29.1834 32.7265 28.0656 32.7123 26.8775C32.6882 24.8837 33.3703 22.8419 34.6669 21.3616L34.6656 21.3582C35.3675 20.5893 36.2449 19.9853 37.2835 19.6414C37.9346 19.4238 38.6182 19.3194 39.3046 19.3326C39.7222 19.8229 40.2308 20.2274 40.8017 20.5254Z" fill="#FFE28A"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_711_14107)">
|
||||
<rect x="41.2359" y="10.8406" width="10.9597" height="30.4437" fill="#FFCF40"/>
|
||||
</g>
|
||||
<mask id="mask1_711_14107" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="32" y="15" width="18" height="22">
|
||||
<path d="M47.5346 18.8959C47.5555 18.8955 47.5761 18.895 47.5966 18.8944L47.6249 18.8761C43.9672 12.6368 39.1845 17.5491 39.1845 17.5491L39.1913 17.5611L39.1901 17.5614C41.9405 22.3835 47.1676 19.1692 47.5953 18.8944C47.5752 18.895 47.555 18.8955 47.5346 18.8959Z" fill="#FFE28A"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M40.8017 20.5254C41.6725 20.9722 42.6255 21.1253 43.5374 21.1227C44.0672 21.6093 44.5081 22.181 44.9223 22.7679C45.094 23.0131 45.2489 23.2697 45.3859 23.5359C45.7026 24.1458 45.9356 24.7911 46.1713 25.444C46.2404 25.6355 46.3098 25.8278 46.3816 26.0198C46.4041 26.1021 46.4276 26.1844 46.4521 26.2668C46.8161 27.5154 47.3486 28.8489 48.0608 29.9502C48.2964 30.3119 48.5598 30.6547 48.8496 30.9748C48.9066 31.0365 48.9649 31.0976 49.0234 31.1588C49.2962 31.4446 49.5709 31.7325 49.7267 32.0926C49.9206 32.5414 49.9057 33.0575 49.7891 33.5325C49.2388 35.7709 47.0831 36.3591 45.0229 36.4134L45.0239 36.4108C44.2514 36.4262 43.4842 36.3687 42.8039 36.299C42.8039 36.299 39.5232 35.9594 36.7424 33.9263L36.7011 33.8952C36.3591 33.6434 36.0333 33.3702 35.7258 33.0771C34.9464 32.3332 34.2529 31.4895 33.7225 30.5632L33.7328 30.5528C33.67 30.4398 33.6098 30.3256 33.5522 30.2103C33.0392 29.1834 32.7265 28.0656 32.7123 26.8775C32.6882 24.8837 33.3703 22.8419 34.6669 21.3616L34.6656 21.3582C35.3675 20.5893 36.2449 19.9853 37.2835 19.6414C37.9346 19.4238 38.6182 19.3194 39.3046 19.3326C39.7222 19.8229 40.2308 20.2274 40.8017 20.5254Z" fill="#FFE28A"/>
|
||||
</mask>
|
||||
<g mask="url(#mask1_711_14107)">
|
||||
<rect x="30.2762" y="10.8406" width="10.9597" height="30.4437" fill="#FDE877"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.9 KiB |
Loading…
Reference in New Issue