SOV-4467: Spice Leaderboard adjustments for Season 3 (#1016)

* feat: spice season 3 update

* Create spotty-poems-happen.md

Author: rick23p

.changeset/spotty-poems-happen.md

@@ -0,0 +1,5 @@
+---
+"frontend": patch
+---
+
+SOV-4467: Spice Leaderboard adjustments for Season 3

apps/frontend/src/app/3_organisms/Header/Header.tsx

@@ -74,7 +74,7 @@ export const Header: FC = () => {
                 text={t(translations.header.nav.spicePoints)}
                 style={ButtonStyle.primary}
                 className="bg-[#24BFB74D]/[0.3] border-[#24BFB74D]/[0.3] hover:bg-[#24BFB74D]"
-                onClick={() => navigate('/claim-lp')}
+                onClick={() => navigate('/bob-lp-points')}
               />
             )}
           </ol>

apps/frontend/src/app/5_pages/LeaderboardPointsPage/LeaderboardPointsPage.types.ts

@@ -17,4 +17,6 @@ export type UserDeposit = {
 export type UserPoints = {
   wallet: string;
   points: number;
+  s3Points: number;
+  total: number;
 };

apps/frontend/src/app/5_pages/LeaderboardPointsPage/components/LeaderboardPoints/LeaderboardPoints.constants.tsx

@@ -11,6 +11,9 @@ import { translations } from '../../../../../locales/i18n';
 export const DATA_ENDPOINT_URL =
   'https://season2-spice-points-bucket.s3.us-east-2.amazonaws.com/Total_S1&S2_Spice_Leaderboard.json';
 
+export const S3_DATA_ENDPOINT_URL =
+  'https://season2-spice-points-bucket.s3.us-east-2.amazonaws.com/Total_S3_Spice_Leaderboard.json';
+
 export const PAGE_SIZE = 50;
 
 export const COLUMNS_CONFIG = (isSingleUser: boolean = false) => [
@@ -38,4 +41,16 @@ export const COLUMNS_CONFIG = (isSingleUser: boolean = false) => [
     cellRenderer: user => <AmountRenderer value={user.points} />,
     sampleData: '111,111,111.1111',
   },
+  {
+    id: '',
+    title: t(translations.leaderboardPointsPage.table.spice3),
+    cellRenderer: user => <AmountRenderer value={user.s3Points} />,
+    sampleData: '111,111,111.1111',
+  },
+  {
+    id: '',
+    title: t(translations.leaderboardPointsPage.table.total),
+    cellRenderer: user => <AmountRenderer value={user.total} />,
+    sampleData: '111,111,111.1111',
+  },
 ];

apps/frontend/src/app/5_pages/LeaderboardPointsPage/components/LeaderboardPoints/hooks/useGetPoints.ts

@@ -1,66 +1,102 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useMemo } from 'react';
 
+import { RSK_CHAIN_ID } from '../../../../../../config/chains';
+
+import { useCacheCall } from '../../../../../../hooks';
 import { useAccount } from '../../../../../../hooks/useAccount';
 import { areAddressesEqual } from '../../../../../../utils/helpers';
 import { UserPoints } from '../../../LeaderboardPointsPage.types';
-import { DATA_ENDPOINT_URL } from '../LeaderboardPoints.constants';
+import {
+  DATA_ENDPOINT_URL,
+  S3_DATA_ENDPOINT_URL,
+} from '../LeaderboardPoints.constants';
 
 export const useGetPoints = () => {
   const { account } = useAccount();
 
-  const [data, setData] = useState<UserPoints[]>([]);
+  const { value: data } = useCacheCall(
+    'bob-lp-points',
+    RSK_CHAIN_ID,
+    async () => {
+      const [data, s3Data] = await Promise.all([
+        fetch(DATA_ENDPOINT_URL).then(response => response?.json()),
+        fetch(S3_DATA_ENDPOINT_URL).then(response => response?.json()),
+      ]);
+
+      const result: { [key: string]: UserPoints } = {};
+
+      data.forEach(user => {
+        const points = parseFloat(user.points.replace(/,/g, ''));
+
+        result[user.toAddress.toLowerCase()] = {
+          wallet: user.toAddress,
+          points,
+          s3Points: 0,
+          total: points,
+        };
+      });
 
-  useEffect(() => {
-    if (!data || data.length === 0) {
-      fetch(DATA_ENDPOINT_URL)
-        .then(response => response?.json())
-        .then(data => {
-          if (!data) {
-            return;
-          }
+      s3Data.forEach(user => {
+        const s3Points = parseFloat(user.points.replace(/,/g, ''));
+        const key = user.toAddress.toLowerCase();
 
-          const result: UserPoints[] = data.map(user => ({
+        if (!(key in result)) {
+          result[key] = {
             wallet: user.toAddress,
-            points: parseFloat(user.points.replace(/,/g, '')),
-          }));
+            points: 0,
+            s3Points,
+            total: s3Points,
+          };
+        } else {
+          const points = result[key].points;
 
-          setData(result);
-        });
-    }
-  }, [data]);
+          result[key] = {
+            wallet: user.toAddress,
+            points,
+            s3Points,
+            total: points + s3Points,
+          };
+        }
+      });
 
-  const sortedUsers = useMemo(() => {
-    return data.sort((a, b) => b.points - a.points);
-  }, [data]);
+      return Object.keys(result)
+        .map(key => ({ ...result[key] }))
+        .sort((user1, user2) => (user1.total < user2.total ? 1 : -1));
+    },
+    [],
+    [],
+  );
 
   const userIndex = useMemo(() => {
-    return sortedUsers.findIndex(user =>
-      areAddressesEqual(user.wallet, account),
-    );
-  }, [sortedUsers, account]);
+    return data.findIndex(user => areAddressesEqual(user.wallet, account));
+  }, [data, account]);
 
   const connectedWalletPoints = useMemo(() => {
     if (userIndex !== -1) {
-      const { wallet, points } = sortedUsers[userIndex];
+      const { wallet, points, s3Points, total } = data[userIndex];
       return [
         {
           id: userIndex + 1,
           wallet,
           points,
+          s3Points,
+          total,
         },
       ];
     }
     return [];
-  }, [sortedUsers, userIndex]);
+  }, [data, userIndex]);
 
   const points = useMemo(
     () =>
-      sortedUsers.map(({ wallet, points }, index) => ({
+      data.map(({ wallet, points, s3Points, total }, index) => ({
         id: index + 1,
         wallet,
         points,
+        s3Points,
+        total,
       })),
-    [sortedUsers],
+    [data],
   );
 
   return {

apps/frontend/src/locales/en/translations.json

@@ -938,7 +938,7 @@
             "title": "Spice Leaderboard - Sovryn"
         },
         "title": "Spice Leaderboard",
-        "description1": "Spice Points are rewards earned by providing liquidity and staking SOV on the Sovryn DEX on the BOB chain. These points track user contributions and engagement, helping determine future rewards allocated by the BOB team. This leaderboard displays only the rewards distributed by Sovryn (combined Season 1 &2) and allows you to check your accumulated points and current position.",
+        "description1": "Spice Points are rewards earned by providing liquidity and staking SOV on the Sovryn DEX on the BOB chain. These points track user contributions and engagement, helping determine future rewards allocated by the BOB team. This leaderboard displays only the rewards distributed by Sovryn and allows you to check your accumulated points and current position.",
         "description2": "If you want to earn your Spice points simply bridge your funds via <0>BOB Fusion and</0> start providing liquidity via our the <1>Market Making</1>  page or start <2>Staking SOV</2> tokens.",
         "claimDescription": "Users who participated in the Season 1 Liquidity Provisioning campaign can claim their LP tokens here:",
         "leaderboard": "Leaderboard",
@@ -955,7 +955,9 @@
             "participant": "Participant",
             "balance": "Balance",
             "points": "Points",
-            "spice": "Spice",
+            "spice": "Season 1 and 2 Spice",
+            "spice3": "Season 3 Spice",
+            "total": "Total",
             "extraSpice": "Extra Spice",
             "extraSpiceShot": "Extra Spice Shot",
             "runes": "Runes"