add leaderboard view
This commit is contained in:
saml33
parent
0fa3271c55
commit
aa3b2f8adf
|
|
@ -8,6 +8,7 @@ interface SelectProps {
|
|||
children: ReactNode
|
||||
className?: string
|
||||
dropdownPanelClassName?: string
|
||||
icon?: ReactNode
|
||||
placeholder?: string
|
||||
disabled?: boolean
|
||||
}
|
||||
|
|
@ -18,6 +19,7 @@ const Select = ({
|
|||
children,
|
||||
className,
|
||||
dropdownPanelClassName,
|
||||
icon,
|
||||
placeholder = 'Select',
|
||||
disabled = false,
|
||||
}: SelectProps) => {
|
||||
|
|
@ -32,11 +34,14 @@ const Select = ({
|
|||
<div
|
||||
className={`flex items-center justify-between space-x-2 px-3 text-th-fgd-1`}
|
||||
>
|
||||
{value ? (
|
||||
value
|
||||
) : (
|
||||
<span className="text-th-fgd-3">{placeholder}</span>
|
||||
)}
|
||||
<div className="flex items-center">
|
||||
{icon ? icon : null}
|
||||
{value ? (
|
||||
value
|
||||
) : (
|
||||
<span className="text-th-fgd-3">{placeholder}</span>
|
||||
)}
|
||||
</div>
|
||||
<ChevronDownIcon
|
||||
className={`ml-1 h-5 w-5 flex-shrink-0 text-th-fgd-3 ${
|
||||
open ? 'rotate-180' : 'rotate-360'
|
||||
|
|
|
|||
|
|
@ -3,10 +3,10 @@ const AcornIcon = ({ className }: { className?: string }) => {
|
|||
<svg
|
||||
className={`${className}`}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 41 41"
|
||||
viewBox="0 0 40 40"
|
||||
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" />
|
||||
<path d="M31.9764 20.7091L31.47 16.9109C31.2226 15.0512 30.4484 13.36 29.3079 11.9846L31.6864 9.60615C32.034 9.2594 32.034 8.69894 31.6864 8.35219C31.3397 8.00544 30.7801 8.00544 30.4324 8.35219L28.0584 10.7262C26.674 9.56713 24.9686 8.7823 23.0903 8.53044L19.292 8.02407C18.6145 7.93273 17.9192 8.10122 17.3445 8.53221L16.5934 9.09623C16.1624 9.41814 16.1154 10.0496 16.4985 10.4327L29.5695 23.5035C29.9722 23.9061 30.5983 23.8183 30.906 23.4095L31.4691 22.6574C31.8886 22.0961 32.0686 21.4035 31.9764 20.7091ZM15.2427 11.6857L15.2108 11.6529L12.161 13.7875C9.21582 15.8493 7.64701 19.3478 8.06737 22.919L8.77062 28.8989C8.91518 30.1271 9.87385 31.0857 11.1021 31.2303L17.082 31.9335C20.6515 32.3503 24.1519 30.7851 26.2138 27.84L28.3484 24.7902L28.3156 24.7583L15.2427 11.6857Z" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,10 +3,10 @@ const MangoIcon = ({ className }: { className?: string }) => {
|
|||
<svg
|
||||
className={`${className}`}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 40 53"
|
||||
viewBox="0 0 40 40"
|
||||
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" />
|
||||
<path d="M30.9524 16.6647C29.6789 12.8631 26.0028 10.0966 22.9101 9.51321C23.0607 7.74416 23.7758 6.92237 24.3655 6.55225C24.7544 6.30132 24.8799 5.79319 24.6352 5.39798C24.3906 5.00904 23.8699 4.8773 23.4872 5.12823C22.4835 5.79319 22.0883 6.9851 21.9566 8.13938C20.2628 8.08919 16.2668 8.30875 13.7575 11.3764C10.7087 15.1027 11.5367 16.2318 9.11528 19.2869C8.83298 19.6445 9.10273 20.1777 9.56068 20.1463C11.4426 20.0271 15.1564 19.4814 17.9982 17.1101C19.9805 15.4665 21.1724 13.2458 21.8625 11.4328L22.7595 12.562C21.9817 14.3812 20.7396 16.4639 18.8011 18.0762C17.1387 19.4625 15.2317 20.2781 13.494 20.7548C13.8076 21.7836 14.228 23.1073 14.3095 23.4272C14.9494 25.9491 15.5391 28.5775 14.9682 31.0555C14.4914 33.1068 16.6431 34.5747 18.5314 34.8884C21.0407 35.3087 23.6754 34.512 25.7268 33.0002C27.7844 31.4695 29.2711 29.3366 30.2686 26.9653C31.6361 23.7283 32.0627 20.002 30.9524 16.6647ZM27.9601 25.9867C26.649 29.1045 24.3844 31.4256 21.9064 32.2035C21.8437 32.2223 21.781 32.2348 21.7182 32.2348C21.4485 32.2348 21.2038 32.0592 21.1223 31.7957C21.0156 31.4632 21.1976 31.1119 21.53 31.0053C23.6629 30.3403 25.6327 28.2827 26.7996 25.5037C26.9376 25.1837 27.3014 25.0332 27.6213 25.1649C27.9412 25.3029 28.0918 25.6667 27.9601 25.9867Z" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,16 +3,16 @@ const RobotIcon = ({ className }: { className?: string }) => {
|
|||
<svg
|
||||
className={`${className}`}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 56 48"
|
||||
viewBox="0 0 40 40"
|
||||
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 d="M15.102 17.2186C14.3807 17.2186 13.7959 17.8104 13.7959 18.5404C13.7959 19.2705 14.3807 19.8623 15.102 19.8623C15.8233 19.8623 16.4082 19.2705 16.4082 18.5404C16.4082 17.8104 15.8233 17.2186 15.102 17.2186Z" />
|
||||
<path d="M23.5918 18.5404C23.5918 17.8104 24.1767 17.2186 24.898 17.2186C25.6193 17.2186 26.2041 17.8104 26.2041 18.5404C26.2041 19.2705 25.6193 19.8623 24.898 19.8623C24.1767 19.8623 23.5918 19.2705 23.5918 18.5404Z" />
|
||||
<path d="M24.2449 25.8107H15.7551V27.1325H24.2449V25.8107Z" />
|
||||
<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"
|
||||
d="M16.4082 7.30465C16.4082 5.47955 17.8701 4 19.6735 4C21.4769 4 22.9388 5.47955 22.9388 7.30465C22.9388 8.78436 21.9778 10.0369 20.6531 10.458V11.6007H30.449C31.5309 11.6007 32.4082 12.4884 32.4082 13.5835V16.5577H34.3673C35.269 16.5577 36 17.2974 36 18.21V24.8193C36 25.7318 35.269 26.4716 34.3673 26.4716H32.4082V29.4458C32.4082 30.5409 31.5309 31.4286 30.449 31.4286H9.55102C8.46907 31.4286 7.59184 30.5409 7.59184 29.4458V26.4716H5.63265C4.73103 26.4716 4 25.7318 4 24.8193V18.21C4 17.2974 4.73103 16.5577 5.63265 16.5577H7.59184V13.5835C7.59184 12.4884 8.46907 11.6007 9.55102 11.6007H18.6939V10.458C17.3691 10.0369 16.4082 8.78436 16.4082 7.30465ZM19.6735 5.98279C18.9522 5.98279 18.3673 6.57462 18.3673 7.30465C18.3673 8.03468 18.9522 8.62651 19.6735 8.62651C20.3948 8.62651 20.9796 8.03468 20.9796 7.30465C20.9796 6.57462 20.3948 5.98279 19.6735 5.98279ZM7.59184 18.5404H5.95918V24.4888H7.59184V18.5404ZM32.4082 24.4888H34.0408V18.5404H32.4082V24.4888ZM11.8367 18.5404C11.8367 16.7153 13.2986 15.2358 15.102 15.2358C16.9055 15.2358 18.3673 16.7153 18.3673 18.5404C18.3673 20.3655 16.9055 21.8451 15.102 21.8451C13.2986 21.8451 11.8367 20.3655 11.8367 18.5404ZM24.898 15.2358C23.0945 15.2358 21.6327 16.7153 21.6327 18.5404C21.6327 20.3655 23.0945 21.8451 24.898 21.8451C26.7014 21.8451 28.1633 20.3655 28.1633 18.5404C28.1633 16.7153 26.7014 15.2358 24.898 15.2358ZM13.7959 25.4802C13.7959 24.5676 14.5269 23.8279 15.4286 23.8279H24.5714C25.4731 23.8279 26.2041 24.5676 26.2041 25.4802V27.463C26.2041 28.3756 25.4731 29.1153 24.5714 29.1153H15.4286C14.5269 29.1153 13.7959 28.3756 13.7959 27.463V25.4802Z"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -3,16 +3,16 @@ const WhaleIcon = ({ className }: { className?: string }) => {
|
|||
<svg
|
||||
className={`${className}`}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 65 52"
|
||||
viewBox="0 0 40 40"
|
||||
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"
|
||||
d="M37.4952 15.4842C34.6812 14.5986 31.5602 14.4129 27.1108 16.8341C24.0041 18.5267 20.1331 19.6908 16.605 18.8552C13.084 18.0196 10.3772 14.97 9.30594 11.1776C11.27 10.1778 12.1127 5.98546 10.3987 4C7.98469 4.78561 6.21349 6.20686 6.00637 8.18518C3.56383 6.82821 1.06415 7.57811 0 8.6994C2.24257 13.4059 6.3349 12.4132 6.3349 12.4132C6.3349 12.4132 5.98494 16.5127 6.73485 21.7834C6.7577 21.9605 6.79884 22.1376 6.83997 22.3148C6.85026 22.359 6.86054 22.4033 6.87054 22.4476C6.9991 22.4119 7.1348 22.3905 7.27049 22.3905C7.65616 22.3905 8.03468 22.5476 8.31322 22.8404C8.82029 23.3832 11.6199 26.1614 16.6621 27.6541C17.5335 27.9112 18.3762 28.1112 19.2047 28.2754C18.4405 31.6393 19.4046 35.8673 19.4046 35.8673C22.0043 35.3674 25.0325 32.9248 25.8467 29.3539C25.8661 29.2513 25.8844 29.1508 25.9025 29.0517C25.931 28.8955 25.9589 28.7426 25.9895 28.5897C28.0535 28.2754 29.8676 27.547 31.4888 26.3685C31.8745 26.09 32.2244 25.8258 32.5529 25.5758C34.4527 24.1403 35.9597 23.0047 38.7164 23.0047C38.8521 23.0047 38.995 23.0047 39.1378 23.0118C39.2664 23.0118 39.3878 23.0404 39.5092 23.0761C40.4019 19.7623 40.2662 16.277 37.4952 15.4771V15.4842ZM31.878 20.2015C31.0924 20.2015 30.4497 19.5587 30.4497 18.7731C30.4497 17.9875 31.0924 17.3447 31.878 17.3447C32.6637 17.3447 33.3064 17.9875 33.3064 18.7731C33.3064 19.5587 32.6637 20.2015 31.878 20.2015Z"
|
||||
/>
|
||||
<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" />
|
||||
<path d="M16.2621 29.0254C10.7628 27.397 7.72034 24.2903 7.27754 23.8189C8.7345 27.5827 12.6483 31.2679 17.5476 32.7892C17.4762 31.7464 17.4619 30.5609 17.5905 29.3825L17.4391 29.3428C17.0525 29.2416 16.6608 29.1391 16.2692 29.0254H16.2621Z" />
|
||||
<path d="M27.2036 29.8109C29.0319 29.411 30.7531 28.6754 32.3315 27.5255C32.7224 27.2405 33.0802 26.9702 33.4156 26.7169C35.3661 25.2436 36.5588 24.3427 39.0878 24.4402C38.5236 26.0257 37.7594 27.4755 36.9952 28.4397C34.167 31.9964 30.4889 33.439 25.3538 33.5962C26.1894 32.5249 26.8465 31.2536 27.2036 29.8109Z" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,118 @@
|
|||
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 { breakpoints } from 'utils/theme'
|
||||
import { Badge, tiers } from './RewardsPage'
|
||||
import { 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'
|
||||
|
||||
const Leaderboards = ({
|
||||
goBack,
|
||||
leaderboard,
|
||||
}: {
|
||||
goBack: () => void
|
||||
leaderboard: string
|
||||
}) => {
|
||||
const [topAccountsTier, setTopAccountsTier] = useState<string>(leaderboard)
|
||||
const renderTierIcon = (tier: string) => {
|
||||
if (tier === 'Bot') {
|
||||
return <RobotIcon className="mr-2 h-5 w-5" />
|
||||
} else if (tier === 'Mango') {
|
||||
return <MangoIcon className="mr-2 h-5 w-5" />
|
||||
} else if (tier === 'Whale') {
|
||||
return <WhaleIcon className="mr-2 h-5 w-5" />
|
||||
} else return <AcornIcon className="mr-2 h-5 w-5" />
|
||||
}
|
||||
return (
|
||||
<div className="mx-auto max-w-[1140px] flex-col items-center p-8 lg:p-10">
|
||||
<div className="mb-4 flex items-center justify-between">
|
||||
<div className="flex items-center">
|
||||
<IconButton className="mr-2" hideBg onClick={goBack} size="small">
|
||||
<ArrowLeftIcon className="h-5 w-5" />
|
||||
</IconButton>
|
||||
<h2 className="mr-4">Leaderboard</h2>
|
||||
<Badge
|
||||
label="Season 1"
|
||||
borderColor="var(--active)"
|
||||
shadowColor="var(--active)"
|
||||
/>
|
||||
</div>
|
||||
<Select
|
||||
className="w-32"
|
||||
icon={renderTierIcon(topAccountsTier)}
|
||||
value={topAccountsTier}
|
||||
onChange={(tier) => setTopAccountsTier(tier)}
|
||||
>
|
||||
{tiers.map((tier) => (
|
||||
<Select.Option key={tier} value={tier}>
|
||||
<div className="flex w-full items-center">
|
||||
{renderTierIcon(tier)}
|
||||
{tier}
|
||||
</div>
|
||||
</Select.Option>
|
||||
))}
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
{[...Array(5)].map((x, i) => (
|
||||
<LeaderboardCard rank={i + 1} key={i} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Leaderboards
|
||||
|
||||
const LeaderboardCard = ({ rank }: { rank: number }) => {
|
||||
const { width } = useViewport()
|
||||
const isMobile = width ? width < breakpoints.md : false
|
||||
return (
|
||||
<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=${'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={''}
|
||||
placeholderSize={isMobile ? '20' : '24'}
|
||||
/>
|
||||
<div className="text-left">
|
||||
<p className="capitalize text-th-fgd-2 md:text-base">
|
||||
{'Bb5tu'.slice(0, 4) + '...' + 'Jkt8u'.slice(-4)}
|
||||
</p>
|
||||
<p className="text-xs text-th-fgd-4">
|
||||
Acc: {'A1at5'.slice(0, 4) + '...' + 'tt45eU'.slice(-4)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<span className="mr-3 text-right font-mono md:text-base">{'100'}</span>
|
||||
<ChevronRightIcon className="h-5 w-5 text-th-fgd-3" />
|
||||
</div>
|
||||
</a>
|
||||
)
|
||||
}
|
||||
|
|
@ -16,15 +16,17 @@ import Image from 'next/image'
|
|||
import { ReactNode, useState } from 'react'
|
||||
import Particles from 'react-tsparticles'
|
||||
import { ModalProps } from 'types/modal'
|
||||
import Leaderboards from './Leaderboards'
|
||||
|
||||
const tiers = ['Seed', 'Mango', 'Whale', 'Bot']
|
||||
export const tiers = ['Seed', 'Mango', 'Whale', 'Bot']
|
||||
|
||||
const RewardsPage = () => {
|
||||
// const { t } = useTranslation(['common', 'rewards'])
|
||||
const [showClaim] = useState(true)
|
||||
const [showHowItWorks, setShowHowItWorks] = useState(false)
|
||||
const [isWhitelisted, setIsWhitelisted] = useState(false)
|
||||
return (
|
||||
const [showLeaderboards, setShowLeaderboards] = useState('')
|
||||
return !showLeaderboards ? (
|
||||
<>
|
||||
<div className="bg-[url('/images/rewards/madlad-tile.png')]">
|
||||
<div className="mx-auto flex max-w-[1140px] flex-col items-center p-8 lg:flex-row lg:p-10">
|
||||
|
|
@ -70,7 +72,11 @@ const RewardsPage = () => {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{showClaim ? <Claim /> : <Season />}
|
||||
{!showClaim ? (
|
||||
<Claim />
|
||||
) : (
|
||||
<Season showLeaderboard={setShowLeaderboards} />
|
||||
)}
|
||||
{showHowItWorks ? (
|
||||
<HowItWorksModal
|
||||
isOpen={showHowItWorks}
|
||||
|
|
@ -84,12 +90,21 @@ const RewardsPage = () => {
|
|||
/>
|
||||
) : null}
|
||||
</>
|
||||
) : (
|
||||
<Leaderboards
|
||||
leaderboard={showLeaderboards}
|
||||
goBack={() => setShowLeaderboards('')}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export default RewardsPage
|
||||
|
||||
const Season = () => {
|
||||
const Season = ({
|
||||
showLeaderboard,
|
||||
}: {
|
||||
showLeaderboard: (x: string) => void
|
||||
}) => {
|
||||
const [topAccountsTier, setTopAccountsTier] = useState('Seed')
|
||||
return (
|
||||
<>
|
||||
|
|
@ -105,25 +120,29 @@ 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" />}
|
||||
icon={<AcornIcon className="h-8 w-8 text-th-fgd-2" />}
|
||||
name="Seed"
|
||||
desc="New participants or you missed the previous season"
|
||||
showLeaderboard={showLeaderboard}
|
||||
status="Qualified"
|
||||
/>
|
||||
<RewardsTierCard
|
||||
icon={<MangoIcon className="h-6 w-6 text-th-fgd-2" />}
|
||||
icon={<MangoIcon className="h-8 w-8 text-th-fgd-2" />}
|
||||
name="Mango"
|
||||
desc="Average swap/trade value less than $1,000"
|
||||
showLeaderboard={showLeaderboard}
|
||||
/>
|
||||
<RewardsTierCard
|
||||
icon={<WhaleIcon className="h-7 w-7 text-th-fgd-2" />}
|
||||
icon={<WhaleIcon className="h-8 w-8 text-th-fgd-2" />}
|
||||
name="Whale"
|
||||
desc="Average swap/trade value greater than $1,000"
|
||||
showLeaderboard={showLeaderboard}
|
||||
/>
|
||||
<RewardsTierCard
|
||||
icon={<RobotIcon className="h-6 w-6 text-th-fgd-2" />}
|
||||
icon={<RobotIcon className="h-8 w-8 text-th-fgd-2" />}
|
||||
name="Bot"
|
||||
desc="All bots"
|
||||
showLeaderboard={showLeaderboard}
|
||||
/>
|
||||
</div>
|
||||
<h2 className="mb-4">FAQs</h2>
|
||||
|
|
@ -325,18 +344,23 @@ const Claim = () => {
|
|||
}
|
||||
|
||||
const RewardsTierCard = ({
|
||||
desc,
|
||||
icon,
|
||||
name,
|
||||
desc,
|
||||
showLeaderboard,
|
||||
status,
|
||||
}: {
|
||||
desc: string
|
||||
icon: ReactNode
|
||||
name: string
|
||||
desc: string
|
||||
showLeaderboard: (x: string) => void
|
||||
status?: string
|
||||
}) => {
|
||||
return (
|
||||
<button className="w-full rounded-lg border border-th-bkg-3 p-4 text-left focus:outline-none md:hover:border-th-fgd-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"
|
||||
onClick={() => showLeaderboard(name)}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<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">
|
||||
|
|
@ -362,7 +386,7 @@ const RewardsTierCard = ({
|
|||
)
|
||||
}
|
||||
|
||||
const Badge = ({
|
||||
export const Badge = ({
|
||||
label,
|
||||
fillColor,
|
||||
shadowColor,
|
||||
|
|
|
|||
Loading…
Reference in New Issue