rewards tier icons
This commit is contained in:
saml33
parent
4faa2afc1a
commit
0b650e8a5e
|
|
@ -0,0 +1,14 @@
|
|||
const AcornIcon = ({ className }: { className?: string }) => {
|
||||
return (
|
||||
<svg
|
||||
className={`${className}`}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 41 41"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path d="M40.4541 21.4438L39.5997 15.0351C39.1822 11.8973 37.8759 9.04389 35.9517 6.72311L39.9648 2.71002C40.5513 2.12497 40.5513 1.1793 39.9648 0.594242C39.3797 0.00918573 38.4356 0.00918573 37.849 0.594242L33.8434 4.59986C31.5077 2.64418 28.6303 1.31995 25.4611 0.895L19.0524 0.0406098C17.9092 -0.11351 16.7361 0.170786 15.7665 0.897991L14.4991 1.84964C13.7719 2.3928 13.6926 3.45817 14.339 4.10458L36.3931 26.1586C37.0724 26.838 38.1288 26.6898 38.648 26L39.5982 24.7312C40.306 23.784 40.6097 22.6154 40.4541 21.4438ZM12.2203 6.21886L12.1664 6.1635L7.02061 9.76511C2.05138 13.244 -0.595588 19.1469 0.113662 25.1726L1.30023 35.2622C1.54413 37.3346 3.16164 38.9521 5.23402 39.196L15.3236 40.3825C21.3463 41.0858 27.2522 38.4448 30.7311 33.4756L34.3327 28.3298L34.2773 28.2759L12.2203 6.21886Z" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default AcornIcon
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
const MangoIcon = ({ className }: { className?: string }) => {
|
||||
return (
|
||||
<svg
|
||||
className={`${className}`}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 40 53"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path d="M38.6496 20.5462C36.4365 13.9394 30.0477 9.13154 24.6729 8.11763C24.9347 5.0432 26.1774 3.615 27.2022 2.97177C27.8782 2.53568 28.0962 1.6526 27.671 0.965757C27.2459 0.289818 26.341 0.0608703 25.6759 0.49696C23.9316 1.6526 23.2447 3.72403 23.0158 5.73004C20.0722 5.64282 13.1274 6.0244 8.76654 11.3556C3.46805 17.8315 4.90715 19.7939 0.698879 25.1033C0.208278 25.7248 0.677074 26.6515 1.47294 26.5969C4.74361 26.3898 11.1977 25.4413 16.1365 21.3203C19.5816 18.4639 21.653 14.6045 22.8522 11.4537L24.4113 13.4161C23.0594 16.5778 20.9007 20.1973 17.532 22.9992C14.6429 25.4086 11.3286 26.8259 8.30865 27.6545C8.85376 29.4424 9.58421 31.7428 9.72594 32.2988C10.838 36.6815 11.8628 41.2496 10.8707 45.556C10.0421 49.121 13.7816 51.6721 17.0632 52.2172C21.4241 52.9477 26.003 51.5631 29.568 48.9357C33.144 46.2755 35.7278 42.5687 37.4613 38.4477C39.838 32.8221 40.5793 26.3462 38.6496 20.5462ZM33.4493 36.7469C31.1708 42.1654 27.2351 46.1992 22.9287 47.5511C22.8197 47.5838 22.7106 47.6056 22.6016 47.6056C22.1328 47.6056 21.7076 47.3003 21.5659 46.8424C21.3806 46.2646 21.6967 45.6541 22.2745 45.4687C25.9813 44.3131 29.4046 40.7372 31.4324 35.9075C31.6723 35.3515 32.3046 35.0898 32.8606 35.3188C33.4165 35.5585 33.6782 36.1908 33.4493 36.7469Z" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default MangoIcon
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
const RobotIcon = ({ className }: { className?: string }) => {
|
||||
return (
|
||||
<svg
|
||||
className={`${className}`}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 56 48"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path d="M19.4286 23.1325C18.1663 23.1325 17.1429 24.1682 17.1429 25.4458C17.1429 26.7233 18.1663 27.759 19.4286 27.759C20.6908 27.759 21.7143 26.7233 21.7143 25.4458C21.7143 24.1682 20.6908 23.1325 19.4286 23.1325Z" />
|
||||
<path d="M34.2857 25.4458C34.2857 24.1682 35.3092 23.1325 36.5714 23.1325C37.8337 23.1325 38.8571 24.1682 38.8571 25.4458C38.8571 26.7233 37.8337 27.759 36.5714 27.759C35.3092 27.759 34.2857 26.7233 34.2857 25.4458Z" />
|
||||
<path d="M35.4286 38.1687H20.5714V40.4819H35.4286V38.1687Z" />
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M21.7143 5.78313C21.7143 2.58921 24.2726 0 27.4286 0C30.5845 0 33.1429 2.58921 33.1429 5.78313C33.1429 8.37262 31.4612 10.5646 29.1429 11.3015V13.3012H46.2857C48.1791 13.3012 49.7143 14.8547 49.7143 16.7711V21.9759H53.1429C54.7207 21.9759 56 23.2705 56 24.8675V36.4337C56 38.0307 54.7207 39.3253 53.1429 39.3253H49.7143V44.5301C49.7143 46.4465 48.1791 48 46.2857 48H9.71429C7.82087 48 6.28571 46.4465 6.28571 44.5301V39.3253H2.85714C1.2793 39.3253 0 38.0307 0 36.4337V24.8675C0 23.2705 1.2793 21.9759 2.85714 21.9759H6.28571V16.7711C6.28571 14.8547 7.82087 13.3012 9.71429 13.3012H25.7143V11.3015C23.3959 10.5646 21.7143 8.37262 21.7143 5.78313ZM27.4286 3.46988C26.1663 3.46988 25.1429 4.50558 25.1429 5.78313C25.1429 7.06069 26.1663 8.09639 27.4286 8.09639C28.6908 8.09639 29.7143 7.06069 29.7143 5.78313C29.7143 4.50558 28.6908 3.46988 27.4286 3.46988ZM6.28571 25.4458H3.42857V35.8554H6.28571V25.4458ZM49.7143 35.8554H52.5714V25.4458H49.7143V35.8554ZM13.7143 25.4458C13.7143 22.2519 16.2726 19.6626 19.4286 19.6626C22.5845 19.6626 25.1429 22.2519 25.1429 25.4458C25.1429 28.6397 22.5845 31.2289 19.4286 31.2289C16.2726 31.2289 13.7143 28.6397 13.7143 25.4458ZM36.5714 19.6626C33.4155 19.6626 30.8571 22.2519 30.8571 25.4458C30.8571 28.6397 33.4155 31.2289 36.5714 31.2289C39.7274 31.2289 42.2857 28.6397 42.2857 25.4458C42.2857 22.2519 39.7274 19.6626 36.5714 19.6626ZM17.1429 37.5904C17.1429 35.9934 18.4222 34.6988 20 34.6988H36C37.5778 34.6988 38.8571 35.9934 38.8571 37.5904V41.0602C38.8571 42.6572 37.5778 43.9518 36 43.9518H20C18.4222 43.9518 17.1429 42.6572 17.1429 41.0602V37.5904Z"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default RobotIcon
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
const WhaleIcon = ({ className }: { className?: string }) => {
|
||||
return (
|
||||
<svg
|
||||
className={`${className}`}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 65 52"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M60.2732 18.9706C55.8087 17.5656 50.8569 17.271 43.7976 21.1122C38.8685 23.7977 32.727 25.6447 27.1293 24.319C21.543 22.9932 17.2485 18.1548 15.5488 12.1379C18.6649 10.5515 20.002 3.90009 17.2825 0.75C13.4525 1.99644 10.6424 4.25135 10.3138 7.39011C6.43847 5.23717 2.47253 6.42695 0.78418 8.20596C4.34219 15.6732 10.835 14.0982 10.835 14.0982C10.835 14.0982 10.2798 20.6023 11.4695 28.9648C11.5058 29.2458 11.5711 29.5268 11.6363 29.8078C11.6526 29.8781 11.669 29.9483 11.6848 30.0186C11.8888 29.9619 12.1041 29.9279 12.3194 29.9279C12.9313 29.9279 13.5318 30.1772 13.9737 30.6418C14.7783 31.503 19.2201 35.9108 27.22 38.2791C28.6024 38.687 29.9395 39.0043 31.2539 39.2649C30.0414 44.6019 31.5712 51.31 31.5712 51.31C35.6957 50.5168 40.5002 46.6415 41.7919 40.9759C41.8227 40.8131 41.8518 40.6537 41.8805 40.4964C41.9258 40.2486 41.9701 40.006 42.0186 39.7635C45.2933 39.2649 48.1714 38.1091 50.7436 36.2395C51.3555 35.7975 51.9107 35.3783 52.432 34.9817C55.4461 32.7041 57.837 30.9024 62.2108 30.9024C62.4261 30.9024 62.6528 30.9024 62.8794 30.9138C63.0833 30.9138 63.276 30.9591 63.4686 31.0158C64.885 25.7581 64.6697 20.2284 60.2732 18.9593V18.9706ZM51.3612 26.4549C50.1148 26.4549 49.0949 25.4351 49.0949 24.1887C49.0949 22.9422 50.1148 21.9224 51.3612 21.9224C52.6076 21.9224 53.6274 22.9422 53.6274 24.1887C53.6274 25.4351 52.6076 26.4549 51.3612 26.4549Z"
|
||||
/>
|
||||
<path d="M26.5853 40.4547C17.8602 37.8712 13.0331 32.9421 12.3306 32.1942C14.6421 38.1658 20.8517 44.0127 28.6249 46.4263C28.5116 44.7719 28.4889 42.8909 28.6929 41.0213L28.4527 40.9583C27.8392 40.7977 27.2179 40.6351 26.5966 40.4547H26.5853Z" />
|
||||
<path d="M43.9448 41.7011C46.8456 41.0665 49.5764 39.8994 52.0806 38.0751C52.7008 37.6228 53.2685 37.194 53.8007 36.7921C56.8953 34.4546 58.7875 33.0253 62.8 33.18C61.9048 35.6955 60.6924 37.9958 59.4799 39.5255C54.9928 45.1684 49.1572 47.4574 41.01 47.7066C42.3358 46.007 43.3782 43.99 43.9448 41.7011Z" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default WhaleIcon
|
||||
|
|
@ -1,11 +1,19 @@
|
|||
import Select from '@components/forms/Select'
|
||||
import AcornIcon from '@components/icons/AcornIcon'
|
||||
import MangoIcon from '@components/icons/MangoIcon'
|
||||
import RobotIcon from '@components/icons/RobotIcon'
|
||||
import WhaleIcon from '@components/icons/WhaleIcon'
|
||||
import Button, { LinkButton } from '@components/shared/Button'
|
||||
import Modal from '@components/shared/Modal'
|
||||
import { Disclosure } from '@headlessui/react'
|
||||
import { ChevronDownIcon, ClockIcon } from '@heroicons/react/20/solid'
|
||||
import {
|
||||
ChevronDownIcon,
|
||||
ChevronRightIcon,
|
||||
ClockIcon,
|
||||
} from '@heroicons/react/20/solid'
|
||||
// import { useTranslation } from 'next-i18next'
|
||||
import Image from 'next/image'
|
||||
import { useState } from 'react'
|
||||
import { ReactNode, useState } from 'react'
|
||||
import Particles from 'react-tsparticles'
|
||||
import { ModalProps } from 'types/modal'
|
||||
|
||||
|
|
@ -89,13 +97,26 @@ const Season = () => {
|
|||
<h2 className="mb-4">Rewards Tiers</h2>
|
||||
<div className="mb-6 space-y-2">
|
||||
<RewardsTierCard
|
||||
icon={<AcornIcon className="h-5 w-5 text-th-fgd-2" />}
|
||||
name="Seed"
|
||||
desc="Blah blah blah"
|
||||
desc="New participants or you missed the previous season"
|
||||
status="Qualified"
|
||||
/>
|
||||
<RewardsTierCard name="Mango" desc="Blah blah blah" />
|
||||
<RewardsTierCard name="Whale" desc="Blah blah blah" />
|
||||
<RewardsTierCard name="Bot" desc="Blah blah blah" />
|
||||
<RewardsTierCard
|
||||
icon={<MangoIcon className="h-6 w-6 text-th-fgd-2" />}
|
||||
name="Mango"
|
||||
desc="Average swap/trade value less than $1,000"
|
||||
/>
|
||||
<RewardsTierCard
|
||||
icon={<WhaleIcon className="h-7 w-7 text-th-fgd-2" />}
|
||||
name="Whale"
|
||||
desc="Average swap/trade value greater than $1,000"
|
||||
/>
|
||||
<RewardsTierCard
|
||||
icon={<RobotIcon className="h-6 w-6 text-th-fgd-2" />}
|
||||
name="Bot"
|
||||
desc="All bots"
|
||||
/>
|
||||
</div>
|
||||
<h2 className="mb-4">FAQs</h2>
|
||||
<div className="border-b border-th-bkg-3">
|
||||
|
|
@ -293,35 +314,40 @@ const Claim = () => {
|
|||
}
|
||||
|
||||
const RewardsTierCard = ({
|
||||
icon,
|
||||
name,
|
||||
// imagePath,
|
||||
desc,
|
||||
status,
|
||||
}: {
|
||||
icon: ReactNode
|
||||
name: string
|
||||
// imagePath: string
|
||||
desc: string
|
||||
status?: string
|
||||
}) => {
|
||||
return (
|
||||
<div className="rounded-lg border border-th-bkg-3 p-4">
|
||||
<button className="w-full rounded-lg border border-th-bkg-3 p-4 text-left focus:outline-none md:hover:border-th-fgd-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center">
|
||||
<div className="mr-4 h-14 w-14 rounded-full bg-th-bkg-2"></div>
|
||||
<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">
|
||||
{icon}
|
||||
</div>
|
||||
<div>
|
||||
<h3>{name}</h3>
|
||||
<p>{desc}</p>
|
||||
</div>
|
||||
</div>
|
||||
{status ? (
|
||||
<Badge
|
||||
label={status}
|
||||
borderColor="var(--success)"
|
||||
shadowColor="var(--success)"
|
||||
/>
|
||||
) : null}
|
||||
<div className="flex items-center pl-4">
|
||||
{status ? (
|
||||
<Badge
|
||||
label={status}
|
||||
borderColor="var(--success)"
|
||||
shadowColor="var(--success)"
|
||||
/>
|
||||
) : null}
|
||||
<ChevronRightIcon className="ml-4 h-6 w-6 text-th-fgd-3" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
@ -486,7 +512,9 @@ const HowItWorksModal = ({ isOpen, onClose }: ModalProps) => {
|
|||
onClose={onClose}
|
||||
panelClassNames="max-h-[540px] thin-scroll overflow-auto"
|
||||
>
|
||||
<h2 className="mb-2 text-center">How it works</h2>
|
||||
<h2 className="mb-2 text-center" tabIndex={0}>
|
||||
How it works
|
||||
</h2>
|
||||
<p className="mb-4 text-base">
|
||||
Mango Mints is a weekly rewards program with amazing prizes. Anyone
|
||||
can participate simply by performing actions on Mango.
|
||||
|
|
|
|||
Loading…
Reference in New Issue