SOV-2001: Update reward SOV page (#2512)

* Update LiquidityMining ABI * Re-work liquidity rewards fetching * Split liquid and vested rewards in the UI * chore: remove out of date PT_BR localisation * Enable filtering based on array of RewardEarnedAction --------- Co-authored-by: soulBit <[email protected]>
DistributedCollective · Mar 30, 2023 · 01e1286 · 01e1286
1 parent 2ec70af
commit 01e1286
Show file tree

Hide file tree

Showing 14 changed files with 287 additions and 117 deletions.
diff --git a/src/app/pages/RewardPage/components/FeesEarnedTab/index.tsx b/src/app/pages/RewardPage/components/FeesEarnedTab/index.tsx
@@ -90,7 +90,7 @@ export const FeesEarnedTab: React.FC<IFeesEarnedTabProps> = ({
         <RewardsDetail
           color={RewardsDetailColor.Yellow}
           title={t(translations.rewardPage.fee.stakingFee)}
-          availableAmount={weiTo18(amountToClaim)}
+          availableAmountVested={weiTo18(amountToClaim)}
           totalEarnedAmount={bignumber(totalStakingFees)
             .add(weiTo18(amountToClaim))
             .toString()}
@@ -100,7 +100,7 @@ export const FeesEarnedTab: React.FC<IFeesEarnedTabProps> = ({
         <RewardsDetail
           color={RewardsDetailColor.Grey}
           title={t(translations.rewardPage.referralReward)}
-          availableAmount={0}
+          availableAmountVested={0}
           totalEarnedAmount={0}
           asset={Asset.RBTC}
           isComingSoon

diff --git a/src/app/pages/RewardPage/components/HistoryTable/index.tsx b/src/app/pages/RewardPage/components/HistoryTable/index.tsx
@@ -17,13 +17,19 @@ export const HistoryTable: React.FC<IHistoryTableProps> = ({ activeTab }) => {
   const getActiveTabType = useCallback(item => {
     switch (item) {
       case RewardTabType.FEES_EARNED:
-        return RewardsEarnedAction.UserFeeWithdrawn;
+        return [RewardsEarnedAction.UserFeeWithdrawn];
       case RewardTabType.LIQUID_SOV:
-        return RewardsEarnedAction.StakingRewardWithdrawn;
+        return [RewardsEarnedAction.StakingRewardWithdrawn];
       case RewardTabType.REWARD_SOV:
-        return RewardsEarnedAction.EarnReward;
+        return [
+          RewardsEarnedAction.EarnReward,
+          RewardsEarnedAction.RewardClaimed,
+        ];
       default:
-        return RewardsEarnedAction.EarnReward;
+        return [
+          RewardsEarnedAction.EarnReward,
+          RewardsEarnedAction.RewardClaimed,
+        ];
     }
   }, []);
 

diff --git a/src/app/pages/RewardPage/components/LiquidTab/index.tsx b/src/app/pages/RewardPage/components/LiquidTab/index.tsx
@@ -71,15 +71,15 @@ export const LiquidTab: React.FC<ILiquidTabProps> = ({
         <RewardsDetail
           color={RewardsDetailColor.Yellow}
           title={t(translations.rewardPage.stakingReward)}
-          availableAmount={weiTo18(amountToClaim)}
+          availableAmountVested={weiTo18(amountToClaim)}
           totalEarnedAmount={bignumber(totalStakingRewards)
             .add(weiTo18(amountToClaim))
             .toString()}
         />
         <RewardsDetail
           color={RewardsDetailColor.Grey}
           title={t(translations.rewardPage.referralReward)}
-          availableAmount={0}
+          availableAmountVested={0}
           totalEarnedAmount={0}
           isComingSoon
         />

diff --git a/src/app/pages/RewardPage/components/RewardTab/hooks/useGetAvailableLiquidityRewards.ts b/src/app/pages/RewardPage/components/RewardTab/hooks/useGetAvailableLiquidityRewards.ts
@@ -1,14 +1,20 @@
 import { useAccount } from 'app/hooks/useAccount';
-import { bridgeNetwork } from 'app/pages/BridgeDepositPage/utils/bridge-network';
 import { bignumber } from 'mathjs';
-import { useEffect, useState } from 'react';
-import { Chain } from 'types';
-import { getContract } from 'utils/blockchain/contract-helpers';
-import { ethGenesisAddress } from 'utils/classifiers';
-import { LiquidityPoolDictionary } from 'utils/dictionaries/liquidity-pool-dictionary';
+import { useEffect, useMemo, useState } from 'react';
 import { useCacheCallWithValue } from 'app/hooks/useCacheCallWithValue';
 
-export const useGetAvailableLiquidityRewards = (): string => {
+type UserInfo = {
+  amount: string;
+  rewardDebt: string;
+  accumulatedReward: string;
+};
+
+type LiquidityRewardsData = {
+  availableLiquidityRewardsVested: string;
+  availableLiquidityRewardsLiquid: string;
+};
+
+export const useGetAvailableLiquidityRewards = (): LiquidityRewardsData => {
   const [liquidityRewards, setLiquidityRewards] = useState({
     accumulatedRewards: '0',
     userRewards: '0',
@@ -20,6 +26,27 @@ export const useGetAvailableLiquidityRewards = (): string => {
     loading: lockedBalanceLoading,
   } = useCacheCallWithValue('lockedSov', 'getLockedBalance', '', address);
 
+  const {
+    value: accumulatedRewardsVested,
+    loading: accumulatedRewardsVestedLoading,
+  } = useCacheCallWithValue(
+    'liquidityMiningProxy',
+    'getUserAccumulatedRewardToBeVested',
+    '',
+    address,
+  );
+
+  const { value: accumulatedRewardsLiquid } = useCacheCallWithValue(
+    'liquidityMiningProxy',
+    'getUserAccumulatedRewardToBePaidLiquid',
+    '',
+    address,
+  );
+
+  const { value: infoList, loading: infoListLoading } = useCacheCallWithValue<
+    UserInfo[]
+  >('liquidityMiningProxy', 'getUserInfoList', '', address);
+
   useEffect(() => {
     if (!lockedBalanceLoading) {
       setLiquidityRewards(value => ({
@@ -30,79 +57,53 @@ export const useGetAvailableLiquidityRewards = (): string => {
   }, [lockedBalance, lockedBalanceLoading]);
 
   useEffect(() => {
-    const ammPools = LiquidityPoolDictionary.list().filter(
-      item => item.hasSovRewards,
-    );
-    if (address !== '' && address !== ethGenesisAddress) {
-      const pools = ammPools.flatMap(item =>
-        item.converterVersion === 1
-          ? [item.poolTokenA]
-          : [item.poolTokenA, item.poolTokenB],
-      );
-      bridgeNetwork
-        .multiCall(
-          Chain.RSK,
-          pools.flatMap((item, index) => {
-            return [
-              {
-                address: getContract('liquidityMiningProxy').address,
-                abi: getContract('liquidityMiningProxy').abi,
-                fnName: 'getUserAccumulatedReward',
-                args: [item, address],
-                key: `getUserAccumulatedReward_${item}`,
-                parser: value => value[0].toString(),
-              },
-            ];
-          }),
-        )
-        .then(result => {
-          const total = Object.values(result.returnData).reduce(
-            (previousValue, currentValue) => previousValue.add(currentValue),
-            bignumber(0),
-          );
-          setLiquidityRewards(value => ({
-            ...value,
-            accumulatedRewards: total.toString(),
-          }));
-        })
-        .catch(error => {
-          console.error('e', error);
-        });
+    if (!accumulatedRewardsVestedLoading && accumulatedRewardsVested) {
+      setLiquidityRewards(value => ({
+        ...value,
+        accumulatedRewards: accumulatedRewardsVested.toString() || '0',
+      }));
+    }
+  }, [accumulatedRewardsVested, accumulatedRewardsVestedLoading]);
 
-      bridgeNetwork
-        .multiCall(
-          Chain.RSK,
-          pools.flatMap(item => {
-            return [
-              {
-                address: getContract('liquidityMiningProxy').address,
-                abi: getContract('liquidityMiningProxy').abi,
-                fnName: 'getUserInfo',
-                args: [item, address],
-                key: `getUserInfo_${item}`,
-                parser: value => value[0].accumulatedReward.toString(),
-              },
-            ];
-          }),
-        )
-        .then(result => {
-          const total = Object.values(result.returnData).reduce(
-            (prevValue, currValue) => prevValue.add(currValue),
-            bignumber(0),
-          );
-          setLiquidityRewards(value => ({
-            ...value,
-            userRewards: total.toString(),
-          }));
-        })
-        .catch(error => {
-          console.error('e', error);
-        });
+  useEffect(() => {
+    if (!infoListLoading) {
+      const userRewards =
+        infoList && infoList.length > 0
+          ? infoList
+              .map(item => item?.accumulatedReward)
+              .reduce((a, b) => bignumber(a).add(b).toString(), '0')
+          : '0';
+
+      setLiquidityRewards(value => ({
+        ...value,
+        userRewards,
+      }));
     }
-  }, [address]);
+  }, [infoList, infoListLoading, lockedBalance]);
+
+  const availableLiquidityRewardsVested = useMemo(
+    () =>
+      bignumber(liquidityRewards.accumulatedRewards)
+        .add(liquidityRewards.userRewards)
+        .add(liquidityRewards.lockedRewards)
+        .toString(),
+    [
+      liquidityRewards.accumulatedRewards,
+      liquidityRewards.lockedRewards,
+      liquidityRewards.userRewards,
+    ],
+  );
+
+  const availableLiquidityRewardsLiquid = useMemo(
+    () =>
+      !accumulatedRewardsVestedLoading && accumulatedRewardsLiquid
+        ? accumulatedRewardsLiquid.toString()
+        : '0',
+    [accumulatedRewardsLiquid, accumulatedRewardsVestedLoading],
+  );
 
-  return bignumber(liquidityRewards.accumulatedRewards)
-    .add(liquidityRewards.userRewards)
-    .add(liquidityRewards.lockedRewards)
-    .toString();
+  return {
+    availableLiquidityRewardsVested,
+    availableLiquidityRewardsLiquid,
+  };
 };
diff --git a/src/app/pages/RewardPage/components/RewardTab/index.tsx b/src/app/pages/RewardPage/components/RewardTab/index.tsx
@@ -15,14 +15,16 @@ import { weiTo18 } from 'utils/blockchain/math-helpers';
 
 interface IRewardTabProps {
   availableTradingRewards: string;
-  availableLiquidityRewards: string;
+  availableLiquidityRewardsVested: string;
+  availableLiquidityRewardsLiquid: string;
   availableLendingRewards: string;
   amountToClaim: string;
 }
 
 export const RewardTab: React.FC<IRewardTabProps> = ({
   availableTradingRewards,
-  availableLiquidityRewards,
+  availableLiquidityRewardsVested,
+  availableLiquidityRewardsLiquid,
   availableLendingRewards,
   amountToClaim,
 }) => {
@@ -54,11 +56,14 @@ export const RewardTab: React.FC<IRewardTabProps> = ({
       calculatePercentageDistribution(
         availableLendingRewards,
         availableTradingRewards,
-        availableLiquidityRewards,
+        bignumber(availableLiquidityRewardsVested)
+          .add(availableLiquidityRewardsLiquid)
+          .toString(),
       ),
     [
       availableLendingRewards,
-      availableLiquidityRewards,
+      availableLiquidityRewardsLiquid,
+      availableLiquidityRewardsVested,
       availableTradingRewards,
     ],
   );
@@ -107,28 +112,33 @@ export const RewardTab: React.FC<IRewardTabProps> = ({
         <RewardsDetail
           color={RewardsDetailColor.Grey}
           title={t(translations.rewardPage.tradingRewards)}
-          availableAmount={weiTo18(availableTradingRewards)}
+          availableAmountVested={weiTo18(availableTradingRewards)}
           totalEarnedAmount={bignumber(totalTradingRewards)
             .add(weiTo18(availableTradingRewards))
             .toString()}
+          isLiquidityMining
         />
 
         <RewardsDetail
           color={RewardsDetailColor.Green}
           title={t(translations.rewardPage.lendingRewards)}
-          availableAmount={weiTo18(availableLendingRewards)}
+          availableAmountVested={weiTo18(availableLendingRewards)}
           totalEarnedAmount={bignumber(totalLendingRewards)
             .add(weiTo18(availableLendingRewards))
             .toString()}
+          isLiquidityMining
         />
 
         <RewardsDetail
           color={RewardsDetailColor.Yellow}
           title={t(translations.rewardPage.liquidityRewards)}
-          availableAmount={weiTo18(availableLiquidityRewards)}
+          availableAmountVested={weiTo18(availableLiquidityRewardsVested)}
+          availableAmountLiquid={weiTo18(availableLiquidityRewardsLiquid)}
           totalEarnedAmount={bignumber(totalLiquidityRewards)
-            .add(weiTo18(availableLiquidityRewards))
+            .add(weiTo18(availableLiquidityRewardsVested))
+            .add(weiTo18(availableLiquidityRewardsLiquid))
             .toString()}
+          isLiquidityMining
         />
       </div>
     </div>