rewards v2 wip

components/TopBar.tsx

@@ -7,6 +7,7 @@ import {
   DocumentDuplicateIcon,
   ExclamationTriangleIcon,
   EyeIcon,
+  TicketIcon,
 } from '@heroicons/react/20/solid'
 import { useWallet } from '@solana/wallet-adapter-react'
 import { useTranslation } from 'next-i18next'
@@ -40,7 +41,6 @@ import Link from 'next/link'
 import FormatNumericValue from './shared/FormatNumericValue'
 import { useRouter } from 'next/router'
 import TopBarStore from '@store/topBarStore'
-import MedalIcon from './icons/MedalIcon'
 import BridgeModal from './modals/BridgeModal'
 import { useViewport } from 'hooks/useViewport'
 import { TOURS, startAccountTour } from 'utils/tours'
@@ -208,56 +208,32 @@ const TopBar = () => {
           ) : mangoAccountAddress ? (
             <Link href="/rewards" shallow={true}>
               <div className="flex h-[63px] items-center justify-between border-x border-th-bkg-3 bg-th-bkg-1 px-4 md:border-l-0">
-                {accountPointsAndRank?.rank ? (
-                  <div
-                    className={`relative hidden h-6 w-6 shrink-0 items-center justify-center rounded-full sm:flex ${
-                      accountPointsAndRank.rank < 4 ? '' : 'bg-th-bkg-3'
-                    } mr-2`}
-                  >
-                    <p
-                      className={`relative z-10 text-xs font-bold ${
-                        accountPointsAndRank.rank < 4
-                          ? 'text-th-bkg-1'
-                          : 'text-th-fgd-1'
-                      }`}
-                    >
-                      {accountPointsAndRank.rank}
-                    </p>
-                    {accountPointsAndRank.rank < 4 ? (
-                      <MedalIcon
-                        className="absolute"
-                        rank={accountPointsAndRank.rank}
-                      />
-                    ) : null}
-                  </div>
-                ) : loadingAccountPointsAndRank ? (
-                  <SheenLoader className="mr-2 hidden sm:block">
-                    <div className="h-6 w-6 bg-th-bkg-2" />
-                  </SheenLoader>
-                ) : null}
                 <div>
                   <span className="whitespace-nowrap font-bold text-th-fgd-2">
-                    <span className="hidden sm:inline">Rewards</span> Points
+                    <span className="hidden sm:inline">Rewards</span> Tickets
                   </span>
-                  {!loadingAccountPointsAndRank ? (
-                    <p className="bg-gradient-to-br from-yellow-400 to-red-400 bg-clip-text font-display text-base text-transparent">
-                      {accountPointsAndRank?.total_points ? (
-                        <FormatNumericValue
-                          value={accountPointsAndRank.total_points}
-                          decimals={0}
-                          roundUp
-                        />
-                      ) : wallet?.adapter.publicKey ? (
-                        0
-                      ) : (
-                        '–'
-                      )}
-                    </p>
-                  ) : (
-                    <SheenLoader className="mt-1.5">
-                      <div className="h-[18px] w-12 rounded-sm bg-th-bkg-3" />
-                    </SheenLoader>
-                  )}
+                  <div className="flex items-center">
+                    <TicketIcon className="mr-2 h-4 w-4 rotate-[-30deg] text-th-active" />
+                    {!loadingAccountPointsAndRank ? (
+                      <p className="font-display text-base text-th-fgd-1">
+                        {accountPointsAndRank?.total_points ? (
+                          <FormatNumericValue
+                            value={accountPointsAndRank.total_points}
+                            decimals={0}
+                            roundUp
+                          />
+                        ) : wallet?.adapter.publicKey ? (
+                          0
+                        ) : (
+                          '–'
+                        )}
+                      </p>
+                    ) : (
+                      <SheenLoader className="mt-1.5">
+                        <div className="h-[18px] w-12 rounded-sm bg-th-bkg-3" />
+                      </SheenLoader>
+                    )}
+                  </div>
                 </div>
                 <ChevronRightIcon className="ml-2 h-6 w-6 text-th-fgd-4" />
               </div>

components/rewards/HowItWorksModal.tsx

@@ -0,0 +1,58 @@
+import { ModalProps } from '../../types/modal'
+import Modal from '../shared/Modal'
+
+const HowItWorksModal = ({ isOpen, onClose }: ModalProps) => {
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <h2 className="mb-4 text-center">How it Works</h2>
+      <div className="space-y-5">
+        <div className="flex flex-col items-center">
+          <div className="mb-1 flex h-6 w-6 items-center justify-center rounded-full bg-th-bkg-3">
+            <span className="font-display text-base text-th-active">1</span>
+          </div>
+          <h3 className="text-base">Earning Tickets</h3>
+          <p className="text-center">
+            Trade and swap on Mango to earn tickets to the weekly draws. The
+            more tickets you have the better your chance of winning a prize.
+          </p>
+        </div>
+        <div className="flex flex-col items-center">
+          <div className="mb-1 flex h-6 w-6 items-center justify-center rounded-full bg-th-bkg-3">
+            <span className="font-display text-base text-th-active">2</span>
+          </div>
+          <h3 className="text-base">Weekly Draw</h3>
+          <p className="text-center">
+            At midnight UTC every Sunday winners are randomly drawn for each
+            prize in the guaranteed pool. The most valuable prizes are drawn
+            first.
+          </p>
+        </div>
+        <div className="flex flex-col items-center">
+          <div className="mb-1 flex h-6 w-6 items-center justify-center rounded-full bg-th-bkg-3">
+            <span className="font-display text-base text-th-active">3</span>
+          </div>
+          <h3 className="text-base">Jackpot Draw</h3>
+          <p className="text-center">
+            There is also a jackpot draw to determine if the jackpot can be won
+            or not. If it can there is a second draw to determine the jackpot
+            winner.
+          </p>
+        </div>
+        <div className="flex flex-col items-center">
+          <div className="mb-1 flex h-6 w-6 items-center justify-center rounded-full bg-th-bkg-3">
+            <span className="font-display text-base text-th-active">4</span>
+          </div>
+          <h3 className="text-base">Claiming Prizes</h3>
+          <p className="text-center">
+            After the draws you&apos;ll be able to find out if your a winner by
+            returning to this page when the claim is announced. Prizes can be
+            claimed for 48 hours. Unclaimed prizes will be rolled into the
+            jackpot.
+          </p>
+        </div>
+      </div>
+    </Modal>
+  )
+}
+
+export default HowItWorksModal

components/rewards/Leaderboards.tsx

@@ -1,53 +1,46 @@
 import MedalIcon from '@components/icons/MedalIcon'
 import ProfileImage from '@components/profile/ProfileImage'
-import { ArrowLeftIcon, ChevronRightIcon } from '@heroicons/react/20/solid'
+import { ChevronRightIcon } from '@heroicons/react/20/solid'
 import { useViewport } from 'hooks/useViewport'
 import { useEffect, useMemo, 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'
 import { useQuery } from '@tanstack/react-query'
 import SheenLoader from '@components/shared/SheenLoader'
 import { abbreviateAddress } from 'utils/formatting'
 import { PublicKey } from '@solana/web3.js'
-import { useTranslation } from 'next-i18next'
 import { fetchLeaderboard } from 'apis/rewards'
 import {
   useAccountPointsAndRank,
   useAccountTier,
   useCurrentSeason,
 } from 'hooks/useRewards'
-import Badge from './Badge'
-import { tiers } from './RewardsPage'
 import useMangoAccount from 'hooks/useMangoAccount'
 import FormatNumericValue from '@components/shared/FormatNumericValue'
 import { useHiddenMangoAccounts } from 'hooks/useHiddenMangoAccounts'
 
 const Leaderboards = ({
-  goBack,
+  // goBack,
   leaderboard,
 }: {
-  goBack: () => void
+  // goBack: () => void
   leaderboard: string
 }) => {
-  const { t } = useTranslation('rewards')
+  // const { t } = useTranslation('rewards')
   const { isDesktop } = useViewport()
   const { mangoAccountAddress } = useMangoAccount()
   const { hiddenAccounts } = useHiddenMangoAccounts()
-  const [leaderboardToShow, setLeaderboardToShow] =
-    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" />
-  }
+  const [
+    leaderboardToShow,
+    // setLeaderboardToShow
+  ] = 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" />
+  // }
   const { data: seasonData } = useCurrentSeason()
   const { data: accountTier } = useAccountTier(
     mangoAccountAddress,
@@ -96,8 +89,9 @@ const Leaderboards = ({
   }, [leadersForTier, mangoAccountAddress])
 
   return (
-    <div className="mx-auto min-h-screen max-w-[1140px] flex-col items-center p-8 lg:p-10">
-      <div className="mb-4 flex items-center justify-between">
+    <div className="mb-4 rounded-2xl border border-th-bkg-3 p-6">
+      <h2 className="rewards-h2 mb-4">Leaderboard</h2>
+      {/* <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" />
@@ -123,8 +117,12 @@ const Leaderboards = ({
             </Select.Option>
           ))}
         </Select>
-      </div>
+      </div> */}
       <div className="space-y-2">
+        <div className="flex items-center justify-between px-4">
+          <p>Account</p>
+          <p>Tickets</p>
+        </div>
         {accountTier?.tier === leaderboardToShow &&
         accountPointsAndRank?.rank &&
         !isInTop20 ? (

components/rewards/PromoBanner.tsx

@@ -57,17 +57,15 @@ const PromoBanner = () => {
     mangoAccountAddress ? (
     showClaim ? (
       <BannerContent
-        text={`Claiming season ${prevSeasonId} rewards ends ${
+        text={`And the winners are... Draw #${prevSeasonId} claim ends ${
           claimEndsIn || ''
         }.`}
-        linkText="Claim Now"
+        linkText="Check Now"
         isClaim
       />
     ) : !hasClosedBanner ? (
       <BannerContent
-        text={`Season ${currentSeasonId} of rewards ends ${
-          seasonEndsIn || ''
-        }.`}
+        text={`Draw #${currentSeasonId} of rewards ends ${seasonEndsIn || ''}.`}
         linkText="Let's Go"
         onClickLink={() =>
           setShowBanner({ ...showBanner, [currentSeasonId]: true })

components/rewards/RewardsPage.tsx

@@ -1,5 +1,3 @@
-import { useState } from 'react'
-import Leaderboards from './Leaderboards'
 import { useWallet } from '@solana/wallet-adapter-react'
 
 import { useCurrentSeason, useIsAllClaimed } from 'hooks/useRewards'
@@ -9,26 +7,14 @@ import ClaimPage from './Claim'
 export const tiers = ['seed', 'mango', 'whale', 'bot']
 
 const RewardsPage = () => {
-  const [showLeaderboards, setShowLeaderboards] = useState('')
   const { publicKey } = useWallet()
 
   const { data: seasonData } = useCurrentSeason()
   const currentSeason = seasonData ? seasonData.season_id : undefined
   const prevSeason = currentSeason ? currentSeason - 1 : undefined
   const { showClaim } = useIsAllClaimed(prevSeason, publicKey)
 
-  return !showLeaderboards ? (
-    showClaim ? (
-      <ClaimPage />
-    ) : (
-      <Season setShowLeaderboards={setShowLeaderboards} />
-    )
-  ) : (
-    <Leaderboards
-      leaderboard={showLeaderboards}
-      goBack={() => setShowLeaderboards('')}
-    />
-  )
+  return showClaim ? <ClaimPage /> : <Season />
 }
 
 export default RewardsPage