SOV-4251: Spice Season 2 Leaderboard (#945)

* feat: season2 leaderboard * Create warm-buttons-camp.md * Fix review comments * Use live data * Copy adjustments * Make season 2 the default option --------- Co-authored-by: tiltom <[email protected]>
DistributedCollective · Jul 9, 2024 · aa61677 · aa61677
1 parent bcb8f74
commit aa61677
Show file tree

Hide file tree

Showing 15 changed files with 302 additions and 139 deletions.
diff --git a/.changeset/warm-buttons-camp.md b/.changeset/warm-buttons-camp.md
@@ -0,0 +1,5 @@
+---
+"frontend": patch
+---
+
+SOV-4251: Spice Season 2 Leaderboard
diff --git a/apps/frontend/src/app/5_pages/ClaimLpPage/ClaimLpPage.tsx b/apps/frontend/src/app/5_pages/ClaimLpPage/ClaimLpPage.tsx
@@ -8,10 +8,7 @@ import { useNavigate } from 'react-router-dom';
 import {
   Button,
   ButtonStyle,
-  Checkbox,
   Heading,
-  Icon,
-  IconNames,
   Link,
   Paragraph,
   ParagraphSize,
@@ -34,8 +31,6 @@ const ClaimLpPage: FC = () => {
   const navigate = useNavigate();
   const [loading, setLoading] = useState(false);
   const [claimable, setClaimable] = useState<Claim[]>([]);
-  const [hasDisclaimerBeenChecked, setHasDisclaimerBeenChecked] =
-    useState(false);
 
   const { claim, getUnclaimed } = useClaimLp();
   const { checkMaintenance, States } = useMaintenance();
@@ -46,15 +41,8 @@ const ClaimLpPage: FC = () => {
       chainId === BOB_CHAIN_ID &&
       claimable.length > 0 &&
       !loading &&
-      hasDisclaimerBeenChecked &&
       !isClaimLocked,
-    [
-      chainId,
-      claimable.length,
-      loading,
-      hasDisclaimerBeenChecked,
-      isClaimLocked,
-    ],
+    [chainId, claimable.length, loading, isClaimLocked],
   );
 
   const handleClaim = useCallback(() => {
@@ -161,30 +149,15 @@ const ClaimLpPage: FC = () => {
                 <Trans
                   i18nKey={t(translations.claimLpPage.eSovDescription)}
                   components={[
-                    <strong>date</strong>,
-                    <Link text="Read more" href={CAMPAIGN_URL} />,
+                    <Button
+                      style={ButtonStyle.ghost}
+                      text={t(translations.claimLpPage.leaderboard)}
+                      onClick={() => navigate('/bob-lp-points')}
+                    />,
                   ]}
                 />
               </Paragraph>
             </div>
-            <div className="flex items-center rounded border border-warning p-4 pl-2 mt-2">
-              <div className="px-2 text-warning">
-                <Icon icon={IconNames.WARNING} size={24} />
-              </div>
-              <Paragraph>
-                <Trans
-                  i18nKey={t(translations.claimLpPage.claimWarning)}
-                  components={[<strong>date</strong>, <strong>date</strong>]}
-                />
-              </Paragraph>
-            </div>
-            <div className="mt-2">
-              <Checkbox
-                checked={hasDisclaimerBeenChecked}
-                onChangeValue={setHasDisclaimerBeenChecked}
-                label={t(translations.claimLpPage.disclaimer)}
-              />
-            </div>
             <div className="mt-2 text-center">
               <Button
                 text={t(translations.claimLpPage.cta)}

diff --git a/apps/frontend/src/app/5_pages/LeaderboardPointsPage/LeaderboardPointsPage.constants.tsx b/apps/frontend/src/app/5_pages/LeaderboardPointsPage/LeaderboardPointsPage.constants.tsx
@@ -2,63 +2,23 @@ import React from 'react';
 
 import { t } from 'i18next';
 
-import { prettyTx } from '@sovryn/ui';
-
-import { AmountRenderer } from '../../2_molecules/AmountRenderer/AmountRenderer';
 import { translations } from '../../../locales/i18n';
-import { User } from './LeaderboardPointsPage.types';
-import { BalanceRenderer } from './components/BalanceRenderer/BalanceRenderer';
-
-export const CAMPAIGN_URL = 'https://wiki.sovryn.com/en/spice-campaign';
+import { LeaderboardPointsSeason1 } from './components/LeaderboardPointsSeason1/LeaderboardPointsSeason1';
+import { LeaderboardPointsSeason2 } from './components/LeaderboardPointsSeason2/LeaderboardPointsSeason2';
 
-export const MAXIMUM_USERS_TO_SHOW = 50;
-export const EXTRA_SPICE_POINTS_MULTIPLIER = 0.5;
-export const RUNES_POINTS_MULTIPLIER = 3.14;
+const ACTIVE_CLASSNAME = 'border-t-primary-30';
 
-export const COLUMNS_CONFIG = (isSingleUser: boolean = false) => [
-  {
-    id: isSingleUser ? 'position' : '',
-    title: isSingleUser
-      ? t(translations.leaderboardPointsPage.table.yourPosition)
-      : '',
-    cellRenderer: (user: User) => user.id,
-  },
-  {
-    id: isSingleUser ? '' : 'wallet',
-    title: isSingleUser
-      ? ''
-      : t(translations.leaderboardPointsPage.table.participant),
-    cellRenderer: (user: User) => (
-      <div className="text-right lg:text-left w-full">
-        {prettyTx(user.wallet, 4)}
-      </div>
-    ),
-  },
-  {
-    id: 'balance',
-    title: t(translations.leaderboardPointsPage.table.balance),
-    cellRenderer: (user: User) => <BalanceRenderer user={user} />,
-  },
-  {
-    id: 'spice',
-    title: t(translations.leaderboardPointsPage.table.spice),
-    cellRenderer: (user: User) => <AmountRenderer value={user.spice} />,
-  },
-  {
-    id: 'extraSpice',
-    title: t(translations.leaderboardPointsPage.table.extraSpice),
-    cellRenderer: (user: User) => <AmountRenderer value={user.extraSpice} />,
-  },
+export const TAB_ITEMS = [
   {
-    id: 'extraSpiceShot',
-    title: t(translations.leaderboardPointsPage.table.extraSpiceShot),
-    cellRenderer: (user: User) => (
-      <AmountRenderer value={user.extraSpiceShot} />
-    ),
+    label: t(translations.leaderboardPointsPage.season1),
+    content: <LeaderboardPointsSeason1 />,
+    activeClassName: ACTIVE_CLASSNAME,
+    dataAttribute: 'season-1',
   },
   {
-    id: 'runes',
-    title: t(translations.leaderboardPointsPage.table.runes),
-    cellRenderer: (user: User) => <AmountRenderer value={user.runes} />,
+    label: t(translations.leaderboardPointsPage.season2),
+    content: <LeaderboardPointsSeason2 />,
+    activeClassName: ACTIVE_CLASSNAME,
+    dataAttribute: 'season-2',
   },
 ];
diff --git a/apps/frontend/src/app/5_pages/LeaderboardPointsPage/LeaderboardPointsPage.tsx b/apps/frontend/src/app/5_pages/LeaderboardPointsPage/LeaderboardPointsPage.tsx
@@ -1,18 +1,17 @@
-import React, { FC } from 'react';
+import React, { FC, useState } from 'react';
 
 import { t } from 'i18next';
 import { Helmet } from 'react-helmet-async';
-import { Trans } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 
-import { Button, ButtonSize, Heading, Link, Paragraph } from '@sovryn/ui';
+import { Button, ButtonSize, Heading, Tabs } from '@sovryn/ui';
 
 import { translations } from '../../../locales/i18n';
-import { CAMPAIGN_URL } from './LeaderboardPointsPage.constants';
-import { LeaderboardPointsFrame } from './components/LeaderboardPointsFrame/LeaderboardPointsFrame';
+import { TAB_ITEMS } from './LeaderboardPointsPage.constants';
 
 const LeaderboardPointsPage: FC = () => {
   const navigate = useNavigate();
+  const [tabIndex, setTabIndex] = useState(1);
 
   return (
     <>
@@ -25,12 +24,12 @@ const LeaderboardPointsPage: FC = () => {
           {t(translations.leaderboardPointsPage.title)}
         </Heading>
 
-        <Paragraph className="text-center mb-6 lg:mb-6 text-xs leading-5 max-w-md">
+        {/* <Paragraph className="text-center mb-6 lg:mb-6 text-xs leading-5 max-w-md">
           <Trans
             i18nKey={t(translations.leaderboardPointsPage.claimWarning)}
             components={[<strong>date</strong>, <strong>date</strong>]}
           />
-        </Paragraph>
+        </Paragraph> */}
 
         <div className="flex lg:flex-row flex-col items-center justify-center max-w-md">
           <Button
@@ -39,14 +38,15 @@ const LeaderboardPointsPage: FC = () => {
             onClick={() => navigate('/claim-lp')}
             size={ButtonSize.large}
           />
-          <Link
-            href={CAMPAIGN_URL}
-            text={t(translations.leaderboardPointsPage.aboutCampaign)}
-          />
         </div>
 
         <div className="w-full md:bg-gray-90 md:py-7 md:px-6 rounded lg:mt-14 mt-7">
-          <LeaderboardPointsFrame />
+          <Tabs
+            index={tabIndex}
+            items={TAB_ITEMS}
+            onChange={setTabIndex}
+            className="w-full mt-12"
+          />
         </div>
       </div>
     </>

diff --git a/apps/frontend/src/app/5_pages/LeaderboardPointsPage/LeaderboardPointsPage.utils.tsx b/apps/frontend/src/app/5_pages/LeaderboardPointsPage/LeaderboardPointsPage.utils.tsx
@@ -1,18 +1,13 @@
 import React from 'react';
 
 import { Paragraph, prettyTx } from '@sovryn/ui';
-
+import { UserExtraPoints, UserPoints } from './LeaderboardPointsPage.types';
 import { areAddressesEqual } from '../../../utils/helpers';
-import {
-  User,
-  UserExtraPoints,
-  UserPoints,
-} from './LeaderboardPointsPage.types';
 
-export const generateRowTitle = (user: User) => (
+export const generateRowTitle = (id: number, wallet: string) => (
   <Paragraph className="flex justify-between w-full">
-    <span>{user.id}</span>
-    <span>{prettyTx(user.wallet, 4)}</span>
+    <span>{id}</span>
+    <span>{prettyTx(wallet, 4)}</span>
   </Paragraph>
 );
 

diff --git a/...tend/src/app/5_pages/LeaderboardPointsPage/components/BalanceRenderer/BalanceRenderer.tsx b/...tend/src/app/5_pages/LeaderboardPointsPage/components/BalanceRenderer/BalanceRenderer.tsx
@@ -3,7 +3,7 @@ import React, { FC, useMemo } from 'react';
 import { AmountRenderer } from '../../../../2_molecules/AmountRenderer/AmountRenderer';
 import { areAddressesEqual } from '../../../../../utils/helpers';
 import { User, UserDeposit } from '../../LeaderboardPointsPage.types';
-import usersDeposits from '../../data/usersDeposits.json';
+import usersDeposits from './data/usersDeposits.json';
 
 type BalanceRendererProps = {
   user: User;

diff --git a/...erboardPointsPage/data/usersDeposits.json → ...s/BalanceRenderer/data/usersDeposits.json b/...erboardPointsPage/data/usersDeposits.json → ...s/BalanceRenderer/data/usersDeposits.json
diff --git a/...oardPointsPage/components/LeaderboardPointsSeason1/LeaderboardPointsSeason1.constants.tsx b/...oardPointsPage/components/LeaderboardPointsSeason1/LeaderboardPointsSeason1.constants.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+
+import { t } from 'i18next';
+
+import { prettyTx } from '@sovryn/ui';
+
+import { AmountRenderer } from '../../../../2_molecules/AmountRenderer/AmountRenderer';
+import { translations } from '../../../../../locales/i18n';
+import { User } from '../../LeaderboardPointsPage.types';
+import { BalanceRenderer } from '../BalanceRenderer/BalanceRenderer';
+
+export const PAGE_SIZE = 50;
+export const EXTRA_SPICE_POINTS_MULTIPLIER = 0.5;
+export const RUNES_POINTS_MULTIPLIER = 3.14;
+
+export const COLUMNS_CONFIG = (isSingleUser: boolean = false) => [
+  {
+    id: isSingleUser ? 'position' : '',
+    title: isSingleUser
+      ? t(translations.leaderboardPointsPage.table.yourPosition)
+      : '',
+    cellRenderer: (user: User) => user.id,
+  },
+  {
+    id: isSingleUser ? '' : 'wallet',
+    title: isSingleUser
+      ? ''
+      : t(translations.leaderboardPointsPage.table.participant),
+    cellRenderer: (user: User) => (
+      <div className="text-right lg:text-left w-full">
+        {prettyTx(user.wallet, 4)}
+      </div>
+    ),
+  },
+  {
+    id: 'balance',
+    title: t(translations.leaderboardPointsPage.table.balance),
+    cellRenderer: (user: User) => <BalanceRenderer user={user} />,
+  },
+  {
+    id: 'spice',
+    title: t(translations.leaderboardPointsPage.table.spice),
+    cellRenderer: (user: User) => <AmountRenderer value={user.spice} />,
+  },
+  {
+    id: 'extraSpice',
+    title: t(translations.leaderboardPointsPage.table.extraSpice),
+    cellRenderer: (user: User) => <AmountRenderer value={user.extraSpice} />,
+  },
+  {
+    id: 'runes',
+    title: t(translations.leaderboardPointsPage.table.runes),
+    cellRenderer: (user: User) => <AmountRenderer value={user.runes} />,
+  },
+];
diff --git a/...ardPointsFrame/LeaderboardPointsFrame.tsx → ...ointsSeason1/LeaderboardPointsSeason1.tsx b/...ardPointsFrame/LeaderboardPointsFrame.tsx → ...ointsSeason1/LeaderboardPointsSeason1.tsx
@@ -2,42 +2,34 @@ import React, { FC } from 'react';
 
 import { t } from 'i18next';
 
-import { Pagination, Paragraph, Table } from '@sovryn/ui';
+import { Pagination, Table } from '@sovryn/ui';
 
 import { ConnectWalletMessage } from '../../../../2_molecules/ConnectWalletMessage/ConnectWalletMessage';
 import { useAccount } from '../../../../../hooks/useAccount';
 import { useHandlePagination } from '../../../../../hooks/useHandlePagination';
 import { translations } from '../../../../../locales/i18n';
+import { generateRowTitle } from '../../LeaderboardPointsPage.utils';
 import {
   COLUMNS_CONFIG,
-  MAXIMUM_USERS_TO_SHOW,
-} from '../../LeaderboardPointsPage.constants';
-import { generateRowTitle } from '../../LeaderboardPointsPage.utils';
-import { useGetPoints } from '../../hooks/useGetPoints';
-
-const pageSize = MAXIMUM_USERS_TO_SHOW;
+  PAGE_SIZE,
+} from './LeaderboardPointsSeason1.constants';
+import { useGetPoints } from './hooks/useGetPoints';
 
-export const LeaderboardPointsFrame: FC = () => {
+export const LeaderboardPointsSeason1: FC = () => {
   const { account } = useAccount();
   const { connectedWalletPoints, points } = useGetPoints();
 
   const { page, onPageChange, paginatedItems, isNextButtonDisabled } =
-    useHandlePagination(points, pageSize);
+    useHandlePagination(points, PAGE_SIZE);
 
   return (
-    <div className="flex flex-col">
-      <div className="flex justify-between items-center mb-3 md:mb-6">
-        <Paragraph className="text-2xl font-medium lg:pt-6 py-4 lg:px-8 lg:pb-8">
-          {t(translations.leaderboardPointsPage.table.leaderboard)}
-        </Paragraph>
-      </div>
-
+    <div className="flex flex-col md:pt-0 pt-6">
       <div className="lg:border rounded lg:p-6">
         <div className="lg:p-4">
           <Table
             columns={COLUMNS_CONFIG(true)}
             rows={connectedWalletPoints}
-            rowTitle={generateRowTitle}
+            rowTitle={row => generateRowTitle(row.id, row.wallet)}
             className="text-gray-10 lg:px-6 lg:py-4 text-xs mb-5"
             dataAttribute="leaderboard-points-user-table"
             noData={
@@ -59,18 +51,18 @@ export const LeaderboardPointsFrame: FC = () => {
           <Table
             columns={COLUMNS_CONFIG()}
             rows={paginatedItems}
-            rowTitle={generateRowTitle}
+            rowTitle={row => generateRowTitle(row.id, row.wallet)}
             className="text-gray-10 lg:px-6 lg:py-4 text-xs"
-            dataAttribute="leaderboard-points-users-table"
+            dataAttribute="leaderboard-points-users-table-season-1"
           />
           <Pagination
             page={page}
             totalItems={points.length}
             className="lg:pb-6 mt-3 lg:mt-6 lg:max-w-3xl flex flex-wrap lg:flex-nowrap"
             onChange={onPageChange}
-            itemsPerPage={pageSize}
+            itemsPerPage={PAGE_SIZE}
             isNextButtonDisabled={isNextButtonDisabled}
-            dataAttribute="leaderboard-points-users-pagination"
+            dataAttribute="leaderboard-points-users-pagination-season-1"
           />
         </div>
       </div>

diff --git a/...aderboardPointsPage/data/usersPoints.json → ...rboardPointsSeason1/data/usersPoints.json b/...aderboardPointsPage/data/usersPoints.json → ...rboardPointsSeason1/data/usersPoints.json
diff --git a/...aderboardPointsPage/hooks/useGetPoints.ts → ...rboardPointsSeason1/hooks/useGetPoints.ts b/...aderboardPointsPage/hooks/useGetPoints.ts → ...rboardPointsSeason1/hooks/useGetPoints.ts
@@ -1,15 +1,15 @@
 import { useMemo } from 'react';
 
-import { useAccount } from '../../../../hooks/useAccount';
-import { areAddressesEqual } from '../../../../utils/helpers';
+import { useAccount } from '../../../../../../hooks/useAccount';
+import { areAddressesEqual } from '../../../../../../utils/helpers';
+import { UserPoints } from '../../../LeaderboardPointsPage.types';
 import {
   EXTRA_SPICE_POINTS_MULTIPLIER,
   RUNES_POINTS_MULTIPLIER,
-} from '../LeaderboardPointsPage.constants';
-import { UserPoints } from '../LeaderboardPointsPage.types';
-import { mergeExtraPoints } from '../LeaderboardPointsPage.utils';
-import usersExtraPointsList from '../data/usersExtraPoints.json';
+} from '../LeaderboardPointsSeason1.constants';
 import usersPointsList from '../data/usersPoints.json';
+import usersExtraPointsList from '../../../data/usersExtraPoints.json';
+import { mergeExtraPoints } from '../../../LeaderboardPointsPage.utils';
 
 const users: UserPoints[] = usersPointsList;
 const extraData = usersExtraPointsList.map(({ toAddress, points }) => ({