whitelisted ui
This commit is contained in:
parent
d69378a960
commit
0dea0dd7b7
|
@ -7,7 +7,6 @@ import Button, { LinkButton } from '@components/shared/Button'
|
||||||
import Modal from '@components/shared/Modal'
|
import Modal from '@components/shared/Modal'
|
||||||
import { Disclosure } from '@headlessui/react'
|
import { Disclosure } from '@headlessui/react'
|
||||||
import {
|
import {
|
||||||
CheckIcon,
|
|
||||||
ChevronDownIcon,
|
ChevronDownIcon,
|
||||||
ChevronRightIcon,
|
ChevronRightIcon,
|
||||||
ClockIcon,
|
ClockIcon,
|
||||||
|
@ -27,7 +26,7 @@ import { abbreviateAddress } from 'utils/formatting'
|
||||||
import { PublicKey } from '@solana/web3.js'
|
import { PublicKey } from '@solana/web3.js'
|
||||||
import { useTranslation } from 'next-i18next'
|
import { useTranslation } from 'next-i18next'
|
||||||
import { useIsWhiteListed } from 'hooks/useIsWhiteListed'
|
import { useIsWhiteListed } from 'hooks/useIsWhiteListed'
|
||||||
import { XMarkIcon } from '@heroicons/react/24/outline'
|
import InlineNotification from '@components/shared/InlineNotification'
|
||||||
|
|
||||||
export type RewardsLeaderboardItem = {
|
export type RewardsLeaderboardItem = {
|
||||||
points: number
|
points: number
|
||||||
|
@ -117,7 +116,10 @@ const RewardsPage = () => {
|
||||||
{!showClaim ? (
|
{!showClaim ? (
|
||||||
<Claim />
|
<Claim />
|
||||||
) : (
|
) : (
|
||||||
<Season showLeaderboard={setShowLeaderboards} />
|
<Season
|
||||||
|
showLeaderboard={setShowLeaderboards}
|
||||||
|
showWhitelistModal={() => setIsWhitelisted(false)}
|
||||||
|
/>
|
||||||
)}
|
)}
|
||||||
{showHowItWorks ? (
|
{showHowItWorks ? (
|
||||||
<HowItWorksModal
|
<HowItWorksModal
|
||||||
|
@ -144,8 +146,10 @@ export default RewardsPage
|
||||||
|
|
||||||
const Season = ({
|
const Season = ({
|
||||||
showLeaderboard,
|
showLeaderboard,
|
||||||
|
showWhitelistModal,
|
||||||
}: {
|
}: {
|
||||||
showLeaderboard: (x: string) => void
|
showLeaderboard: (x: string) => void
|
||||||
|
showWhitelistModal: () => void
|
||||||
}) => {
|
}) => {
|
||||||
const { t } = useTranslation(['common', 'rewards'])
|
const { t } = useTranslation(['common', 'rewards'])
|
||||||
const { wallet } = useWallet()
|
const { wallet } = useWallet()
|
||||||
|
@ -201,77 +205,99 @@ const Season = ({
|
||||||
<p className="text-base text-th-fgd-2">
|
<p className="text-base text-th-fgd-2">
|
||||||
Season 1 starts in:{' '}
|
Season 1 starts in:{' '}
|
||||||
<span className="mr-4 font-bold text-th-fgd-1">4 days</span>
|
<span className="mr-4 font-bold text-th-fgd-1">4 days</span>
|
||||||
<div className="flex">
|
|
||||||
User whitelisted -{' '}
|
|
||||||
{isWhiteListed ? (
|
|
||||||
<CheckIcon className="w-5"></CheckIcon>
|
|
||||||
) : (
|
|
||||||
<XMarkIcon className="w-5"></XMarkIcon>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="mx-auto grid max-w-[1140px] grid-cols-12 gap-4 p-8 lg:gap-6 lg:p-10">
|
<div className="mx-auto grid max-w-[1140px] grid-cols-12 gap-4 p-8 lg:gap-6 lg:p-10">
|
||||||
<div className="col-span-12 lg:col-span-8">
|
{!isWhiteListed ? (
|
||||||
<h2 className="mb-4">Rewards Tiers</h2>
|
<div className="col-span-12">
|
||||||
<div className="mb-6 space-y-2">
|
<InlineNotification
|
||||||
<RewardsTierCard
|
desc={
|
||||||
icon={<AcornIcon className="h-8 w-8 text-th-fgd-2" />}
|
<>
|
||||||
name="seed"
|
<span>
|
||||||
desc="All new participants start here"
|
You need to whitelist your wallet to claim any rewards you
|
||||||
showLeaderboard={showLeaderboard}
|
win
|
||||||
status={walletRewardsData?.tier === 'seed' ? 'Qualified' : ''}
|
</span>
|
||||||
/>
|
<LinkButton className="mt-2" onClick={showWhitelistModal}>
|
||||||
<RewardsTierCard
|
Get Whitelisted
|
||||||
icon={<MangoIcon className="h-8 w-8 text-th-fgd-2" />}
|
</LinkButton>
|
||||||
name="mango"
|
</>
|
||||||
desc="Average swap/trade value less than $1,000"
|
}
|
||||||
showLeaderboard={showLeaderboard}
|
title="Wallet not whitelisted"
|
||||||
status={walletRewardsData?.tier === 'mango' ? 'Qualified' : ''}
|
type="warning"
|
||||||
/>
|
|
||||||
<RewardsTierCard
|
|
||||||
icon={<WhaleIcon className="h-8 w-8 text-th-fgd-2" />}
|
|
||||||
name="whale"
|
|
||||||
desc="Average swap/trade value greater than $1,000"
|
|
||||||
showLeaderboard={showLeaderboard}
|
|
||||||
status={walletRewardsData?.tier === 'whale' ? 'Qualified' : ''}
|
|
||||||
/>
|
|
||||||
<RewardsTierCard
|
|
||||||
icon={<RobotIcon className="h-8 w-8 text-th-fgd-2" />}
|
|
||||||
name="bot"
|
|
||||||
desc="All bots"
|
|
||||||
showLeaderboard={showLeaderboard}
|
|
||||||
status={walletRewardsData?.tier === 'bot' ? 'Qualified' : ''}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<h2 className="mb-4">FAQs</h2>
|
) : null}
|
||||||
<div className="border-b border-th-bkg-3">
|
<div className="col-span-12 lg:col-span-8">
|
||||||
<Disclosure>
|
<div className="rounded-lg border border-th-bkg-3 p-4">
|
||||||
{({ open }) => (
|
<h2 className="mb-4">Rewards Tiers</h2>
|
||||||
<>
|
<div className="mb-6 space-y-2">
|
||||||
<Disclosure.Button
|
<RewardsTierCard
|
||||||
className={`w-full border-t border-th-bkg-3 p-4 text-left focus:outline-none md:hover:bg-th-bkg-2`}
|
icon={<AcornIcon className="h-8 w-8 text-th-fgd-2" />}
|
||||||
>
|
name="seed"
|
||||||
<div className="flex items-center justify-between">
|
desc="All new participants start here"
|
||||||
<p className="text-th-fgd-2">FAQ 1</p>
|
showLeaderboard={showLeaderboard}
|
||||||
<ChevronDownIcon
|
status={walletRewardsData?.tier === 'seed' ? 'Qualified' : ''}
|
||||||
className={`${
|
/>
|
||||||
open ? 'rotate-180' : 'rotate-360'
|
<RewardsTierCard
|
||||||
} h-5 w-5 flex-shrink-0`}
|
icon={<MangoIcon className="h-8 w-8 text-th-fgd-2" />}
|
||||||
/>
|
name="mango"
|
||||||
</div>
|
desc="Average swap/trade value less than $1,000"
|
||||||
</Disclosure.Button>
|
showLeaderboard={showLeaderboard}
|
||||||
<Disclosure.Panel className="p-4">
|
status={walletRewardsData?.tier === 'mango' ? 'Qualified' : ''}
|
||||||
<p>FAQ 1 content</p>
|
/>
|
||||||
</Disclosure.Panel>
|
<RewardsTierCard
|
||||||
</>
|
icon={<WhaleIcon className="h-8 w-8 text-th-fgd-2" />}
|
||||||
)}
|
name="whale"
|
||||||
</Disclosure>
|
desc="Average swap/trade value greater than $1,000"
|
||||||
|
showLeaderboard={showLeaderboard}
|
||||||
|
status={walletRewardsData?.tier === 'whale' ? 'Qualified' : ''}
|
||||||
|
/>
|
||||||
|
<RewardsTierCard
|
||||||
|
icon={<RobotIcon className="h-8 w-8 text-th-fgd-2" />}
|
||||||
|
name="bot"
|
||||||
|
desc="All bots"
|
||||||
|
showLeaderboard={showLeaderboard}
|
||||||
|
status={walletRewardsData?.tier === 'bot' ? 'Qualified' : ''}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<h2 className="mb-4">FAQs</h2>
|
||||||
|
<div className="border-b border-th-bkg-3">
|
||||||
|
<Disclosure>
|
||||||
|
{({ open }) => (
|
||||||
|
<>
|
||||||
|
<Disclosure.Button
|
||||||
|
className={`w-full border-t border-th-bkg-3 p-4 text-left focus:outline-none md:hover:bg-th-bkg-2`}
|
||||||
|
>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<p className="text-th-fgd-2">FAQ 1</p>
|
||||||
|
<ChevronDownIcon
|
||||||
|
className={`${
|
||||||
|
open ? 'rotate-180' : 'rotate-360'
|
||||||
|
} h-5 w-5 flex-shrink-0`}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</Disclosure.Button>
|
||||||
|
<Disclosure.Panel className="p-4">
|
||||||
|
<p>FAQ 1 content</p>
|
||||||
|
</Disclosure.Panel>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Disclosure>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-span-12 lg:col-span-4">
|
<div className="col-span-12 lg:col-span-4">
|
||||||
<div className="mb-2 rounded-lg border border-th-bkg-3 p-4">
|
<div className="mb-2 rounded-lg border border-th-bkg-3 p-4">
|
||||||
<h2 className="mb-4">Your Points</h2>
|
<div className="mb-4 flex items-center justify-between">
|
||||||
|
<h2>Your Points</h2>
|
||||||
|
{isWhiteListed ? (
|
||||||
|
<Badge
|
||||||
|
label="Whitelisted"
|
||||||
|
borderColor="var(--success)"
|
||||||
|
shadowColor="var(--success)"
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
<div className="mb-4 flex h-14 w-full items-center rounded-md bg-th-bkg-2 px-3">
|
<div className="mb-4 flex h-14 w-full items-center rounded-md bg-th-bkg-2 px-3">
|
||||||
<span className="w-full font-display text-3xl text-th-fgd-1">
|
<span className="w-full font-display text-3xl text-th-fgd-1">
|
||||||
{!isLoadingWalletData ? (
|
{!isLoadingWalletData ? (
|
||||||
|
@ -508,12 +534,12 @@ const RewardsTierCard = ({
|
||||||
const { t } = useTranslation('rewards')
|
const { t } = useTranslation('rewards')
|
||||||
return (
|
return (
|
||||||
<button
|
<button
|
||||||
className="w-full rounded-lg border border-th-bkg-3 p-4 text-left focus:outline-none md:hover:border-th-fgd-4"
|
className="w-full rounded-lg bg-th-bkg-2 p-4 text-left focus:outline-none md:hover:bg-th-bkg-3"
|
||||||
onClick={() => showLeaderboard(name)}
|
onClick={() => showLeaderboard(name)}
|
||||||
>
|
>
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
<div className="mr-4 flex h-14 w-14 items-center justify-center rounded-full bg-gradient-to-br from-th-bkg-2 to-th-bkg-4">
|
<div className="mr-4 flex h-14 w-14 items-center justify-center rounded-full bg-th-bkg-1">
|
||||||
{icon}
|
{icon}
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
|
|
Loading…
Reference in New Issue