Merge branch 'develop' into feat/bob-gateway

DistributedCollective · Oct 9, 2024 · 9a19a32 · 9a19a32
2 parents 18255fd + 2028847
commit 9a19a32
Show file tree

Hide file tree

Showing 21 changed files with 177 additions and 75 deletions.
diff --git a/.changeset/green-forks-rule.md b/.changeset/green-forks-rule.md
diff --git a/.changeset/honest-fans-fly.md b/.changeset/honest-fans-fly.md
diff --git a/.changeset/long-buckets-smash.md b/.changeset/long-buckets-smash.md
@@ -0,0 +1,5 @@
+---
+"frontend": patch
+---
+
+SOV-4468: Show protocol data in BTC and USD only
diff --git a/.changeset/lovely-buses-greet.md b/.changeset/lovely-buses-greet.md
diff --git a/.changeset/many-candles-confess.md b/.changeset/many-candles-confess.md
diff --git a/apps/frontend/CHANGELOG.md b/apps/frontend/CHANGELOG.md
@@ -1,5 +1,20 @@
 # frontend
 
+## 1.1.22
+
+### Patch Changes
+
+- ef2f1abe: SOV-4457: rebrand SAT token
+- c20bcb3b: SOV-4443: rune pool page update
+- b41a6af1: SOV-4461: Remove POWA page
+- 88463a86: SOV-4444: Rune pools convert updates
+- 97329130: SOV-4467: Spice Leaderboard adjustments for Season 3
+- Updated dependencies [ef2f1abe]
+- Updated dependencies [88463a86]
+  - @sovryn/contracts@1.2.1
+  - @sovryn/sdk@2.0.1
+  - @sovryn/ui@1.0.31
+
 ## 1.1.21
 
 ### Patch Changes

diff --git a/apps/frontend/package.json b/apps/frontend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "frontend",
-  "version": "1.1.21",
+  "version": "1.1.22",
   "homepage": ".",
   "private": true,
   "dependencies": {

diff --git a/apps/frontend/src/app/2_molecules/NativeTokenAmount/NativeTokenAmount.tsx b/apps/frontend/src/app/2_molecules/NativeTokenAmount/NativeTokenAmount.tsx
@@ -1,6 +1,9 @@
 import React, { FC, useMemo } from 'react';
 
+import { ChainId } from '@sovryn/ethers-provider';
+
 import { getCurrencyPrecision } from '../../5_pages/PortfolioPage/components/ProtocolSection/ProtocolSection.utils';
+import { useCurrentChain } from '../../../hooks/useChainStore';
 import { useGetNativeTokenPrice } from '../../../hooks/useGetNativeTokenPrice';
 import { decimalic } from '../../../utils/math';
 import { AmountRenderer } from '../AmountRenderer/AmountRenderer';
@@ -9,14 +12,20 @@ type NativeTokenAmountProps = {
   usdValue?: string | number;
   dataAttribute?: string;
   precision?: number;
+  chainId?: ChainId;
 };
 
 export const NativeTokenAmount: FC<NativeTokenAmountProps> = ({
   usdValue,
   dataAttribute,
   precision,
+  chainId,
 }) => {
-  const { price: nativeTokenPrice, nativeToken } = useGetNativeTokenPrice();
+  const currentChainId = useCurrentChain();
+
+  const { price: nativeTokenPrice, nativeToken } = useGetNativeTokenPrice(
+    chainId ?? currentChainId,
+  );
 
   const value = useMemo(
     () =>

diff --git a/apps/frontend/src/app/3_organisms/Header/Header.tsx b/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>

diff --git a/apps/frontend/src/app/5_pages/LandingPage/components/ProtocolData/ProtocolData.tsx b/apps/frontend/src/app/5_pages/LandingPage/components/ProtocolData/ProtocolData.tsx
@@ -84,7 +84,11 @@ export const ProtocolData: FC = () => {
                 {t(pageTranslations.totalValueLockedAllNetworks)}
               </div>
               <div className="sm:text-xl text-gray-10 text-sm sm:font-medium font-semibold leading-8">
-                <NativeTokenAmount usdValue={total.lockedData} precision={4} />
+                <NativeTokenAmount
+                  chainId={RSK_CHAIN_ID}
+                  usdValue={total.lockedData}
+                  precision={4}
+                />
               </div>
 
               <div className="text-gray-50 text-sm">
@@ -101,7 +105,10 @@ export const ProtocolData: FC = () => {
                 {t(pageTranslations.volumeAllNetworks)}
               </div>
               <div className="sm:text-2xl text-gray-10 text-sm sm:font-medium font-semibold leading-8">
-                <NativeTokenAmount usdValue={total.volumeData} />
+                <NativeTokenAmount
+                  chainId={RSK_CHAIN_ID}
+                  usdValue={total.volumeData}
+                />
               </div>
 
               <div className="text-gray-50 text-sm">
@@ -122,7 +129,7 @@ export const ProtocolData: FC = () => {
                   {t(pageTranslations.tvlRskNetwork)}
                 </div>
                 <div className="text-gray-10 text-sm sm:font-medium font-semibold">
-                  <NativeTokenAmount usdValue={rskTVL} />
+                  <NativeTokenAmount chainId={RSK_CHAIN_ID} usdValue={rskTVL} />
                 </div>
 
                 <div className="text-gray-50 text-sm">
@@ -139,7 +146,10 @@ export const ProtocolData: FC = () => {
                   {t(pageTranslations.volumeRskNetwork)}
                 </div>
                 <div className="text-gray-10 text-sm sm:font-medium font-semibold">
-                  <NativeTokenAmount usdValue={rskVolume} />
+                  <NativeTokenAmount
+                    chainId={RSK_CHAIN_ID}
+                    usdValue={rskVolume}
+                  />
                 </div>
 
                 <div className="text-gray-50 text-sm">
@@ -158,7 +168,10 @@ export const ProtocolData: FC = () => {
                   {t(pageTranslations.tvlBobNetwork)}
                 </div>
                 <div className="text-gray-10 text-sm">
-                  <NativeTokenAmount usdValue={bobLockedData.total_usd} />
+                  <NativeTokenAmount
+                    chainId={RSK_CHAIN_ID}
+                    usdValue={bobLockedData.total_usd}
+                  />
                 </div>
                 <div className="text-gray-50 text-sm">
                   <AmountRenderer
@@ -174,7 +187,10 @@ export const ProtocolData: FC = () => {
                   {t(pageTranslations.volumeBobNetwork)}
                 </div>
                 <div className="text-gray-10 text-sm sm:font-medium font-semibold">
-                  <NativeTokenAmount usdValue={bobVolume} />
+                  <NativeTokenAmount
+                    chainId={RSK_CHAIN_ID}
+                    usdValue={bobVolume}
+                  />
                 </div>
 
                 <div className="text-gray-50 text-sm">

diff --git a/apps/frontend/src/app/5_pages/LeaderboardPointsPage/LeaderboardPointsPage.types.ts b/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;
 };
diff --git a/..._pages/LeaderboardPointsPage/components/LeaderboardPoints/LeaderboardPoints.constants.tsx b/..._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',
+  },
 ];
diff --git a/.../src/app/5_pages/LeaderboardPointsPage/components/LeaderboardPoints/hooks/useGetPoints.ts b/.../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 {

diff --git a/apps/frontend/src/hooks/useGetNativeTokenPrice.ts b/apps/frontend/src/hooks/useGetNativeTokenPrice.ts
@@ -2,6 +2,10 @@ import { useMemo } from 'react';
 
 import axios from 'axios';
 
+import { ChainId } from '@sovryn/ethers-provider';
+
+import { RSK_CHAIN_ID } from '../config/chains';
+
 import { BITCOIN, ETH } from '../constants/currencies';
 import { COMMON_SYMBOLS } from '../utils/asset';
 import { isRskChain } from '../utils/chain';
@@ -11,24 +15,24 @@ import { useCacheCall } from './useCacheCall';
 import { useCurrentChain } from './useChainStore';
 import { useDollarValue } from './useDollarValue';
 
-export const useGetNativeTokenPrice = () => {
+export const useGetNativeTokenPrice = (chainId?: ChainId) => {
   const currentChainId = useCurrentChain();
 
   const { value: rBTCPrice } = useCacheCall(
     'rbtc-price/indexer',
-    currentChainId,
+    RSK_CHAIN_ID,
     async () => {
       const { data } = await axios.get(getIndexerUrl() + 'tokens', {
         params: {
-          chainId: Number(currentChainId),
+          chainId: Number(RSK_CHAIN_ID),
           limit: 1,
         },
       });
 
       const price = data?.data[0]?.usdPrice as string;
       return price ?? '0';
     },
-    [currentChainId],
+    [RSK_CHAIN_ID],
   );
 
   const { usdValue: ethPrice } = useDollarValue(
@@ -37,13 +41,15 @@ export const useGetNativeTokenPrice = () => {
   );
 
   const price = useMemo(() => {
-    const nativePrice = isRskChain(currentChainId) ? rBTCPrice : ethPrice;
+    const nativePrice = isRskChain(chainId ?? currentChainId)
+      ? rBTCPrice
+      : ethPrice;
     return nativePrice || '0';
-  }, [currentChainId, ethPrice, rBTCPrice]);
+  }, [chainId, currentChainId, rBTCPrice, ethPrice]);
 
   const nativeToken = useMemo(
-    () => (isRskChain(currentChainId) ? BITCOIN : ETH),
-    [currentChainId],
+    () => (isRskChain(chainId ?? currentChainId) ? BITCOIN : ETH),
+    [chainId, currentChainId],
   );
 
   return { price, nativeToken };