110 lines
3.2 KiB
TypeScript
110 lines
3.2 KiB
TypeScript
import MedalIcon from '@components/icons/MedalIcon'
|
|
import ProfileImage from '@components/profile/ProfileImage'
|
|
import SheenLoader from '@components/shared/SheenLoader'
|
|
import { ChevronRightIcon } from '@heroicons/react/20/solid'
|
|
import { useViewport } from 'hooks/useViewport'
|
|
import { formatCurrencyValue } from 'utils/numbers'
|
|
import { breakpoints } from 'utils/theme'
|
|
import { LeaderboardRes } from './LeaderboardPage'
|
|
|
|
const LeaderboardTable = ({
|
|
data,
|
|
loading,
|
|
}: {
|
|
data: LeaderboardRes[]
|
|
loading: boolean
|
|
}) => {
|
|
return (
|
|
<>
|
|
{/* <div className="grid grid-cols-12 px-4 pb-2">
|
|
<div className="col-span-2 md:col-span-1">
|
|
<p className="text-xs text-th-fgd-4">{t('rank')}</p>
|
|
</div>
|
|
<div className="col-span-4 md:col-span-5">
|
|
<p className="text-xs text-th-fgd-4">{t('trader')}</p>
|
|
</div>
|
|
<div className="col-span-5 flex justify-end">
|
|
<p className="text-xs text-th-fgd-4">{t('pnl')}</p>
|
|
</div>
|
|
</div> */}
|
|
<div className="space-y-2">
|
|
{data.map((d, i) => (
|
|
<LeaderboardRow
|
|
item={d}
|
|
loading={loading}
|
|
rank={i + 1}
|
|
key={d.mango_account + d.pnl + i}
|
|
/>
|
|
))}
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default LeaderboardTable
|
|
|
|
const LeaderboardRow = ({
|
|
item,
|
|
loading,
|
|
rank,
|
|
}: {
|
|
item: LeaderboardRes
|
|
loading?: boolean
|
|
rank: number
|
|
}) => {
|
|
const { profile_name, profile_image_url, mango_account, pnl, wallet_pk } =
|
|
item
|
|
const { width } = useViewport()
|
|
const isMobile = width ? width < breakpoints.md : false
|
|
|
|
return !loading ? (
|
|
<a
|
|
className="flex w-full items-center justify-between rounded-md border border-th-bkg-3 px-3 py-3 md:px-4 md:hover:bg-th-bkg-2"
|
|
href={`/?address=${mango_account}`}
|
|
rel="noopener noreferrer"
|
|
target="_blank"
|
|
>
|
|
<div className="flex items-center space-x-3">
|
|
<div
|
|
className={`relative flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full ${
|
|
rank < 4 ? '' : 'bg-th-bkg-3'
|
|
} md:mr-2`}
|
|
>
|
|
<p
|
|
className={`relative z-10 font-bold ${
|
|
rank < 4 ? 'text-th-bkg-1' : 'text-th-fgd-3'
|
|
}`}
|
|
>
|
|
{rank}
|
|
</p>
|
|
{rank < 4 ? <MedalIcon className="absolute" rank={rank} /> : null}
|
|
</div>
|
|
<ProfileImage
|
|
imageSize={isMobile ? '32' : '40'}
|
|
imageUrl={profile_image_url}
|
|
placeholderSize={isMobile ? '20' : '24'}
|
|
/>
|
|
<div className="text-left">
|
|
<p className="capitalize text-th-fgd-2 md:text-base">
|
|
{profile_name ||
|
|
wallet_pk.slice(0, 4) + '...' + wallet_pk.slice(-4)}
|
|
</p>
|
|
<p className="text-xs text-th-fgd-4">
|
|
Acc: {mango_account.slice(0, 4) + '...' + mango_account.slice(-4)}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center">
|
|
<span className="mr-3 text-right font-mono md:text-base">
|
|
{formatCurrencyValue(pnl, 2)}
|
|
</span>
|
|
<ChevronRightIcon className="h-5 w-5 text-th-fgd-3" />
|
|
</div>
|
|
</a>
|
|
) : (
|
|
<SheenLoader className="flex flex-1">
|
|
<div className="h-16 w-full rounded-md bg-th-bkg-2" />
|
|
</SheenLoader>
|
|
)
|
|
}
|