fix(namadillo): fixing staking rewards not updating

anoma · Sep 13, 2024 · a455b2a · a455b2a
1 parent 38922ec
commit a455b2a
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 23 deletions.
diff --git a/apps/namadillo/package.json b/apps/namadillo/package.json
@@ -57,7 +57,7 @@
     "test:watch": "yarn wasm:build:test && yarn jest --watchAll=true",
     "test:coverage": "yarn wasm:build:test && yarn test --coverage",
     "test:ci": "jest",
-    "test:watch:only": "yarn test --watchAll=true",
+    "test:watch-only": "yarn jest --watchAll=true",
     "e2e-test": "PLAYWRIGHT_BASE_URL=http://localhost:3000 yarn playwright test",
     "e2e-test:headed": "PLAYWRIGHT_BASE_URL=http://localhost:3000 yarn playwright test --project=chromium --headed",
     "wasm:build": "node ./scripts/build.js --release",

diff --git a/apps/namadillo/src/App/Staking/StakingRewards.tsx b/apps/namadillo/src/App/Staking/StakingRewards.tsx
@@ -8,6 +8,7 @@ import { ClaimRewardsMsgValue } from "@namada/types";
 import { ModalContainer } from "App/Common/ModalContainer";
 import { NamCurrency } from "App/Common/NamCurrency";
 import { defaultAccountAtom } from "atoms/accounts";
+import { applicationFeaturesAtom } from "atoms/settings";
 import {
   claimableRewardsAtom,
   claimAndStakeRewardsAtom,
@@ -17,11 +18,12 @@ import BigNumber from "bignumber.js";
 import { useModalCloseEvent } from "hooks/useModalCloseEvent";
 import { useTransaction } from "hooks/useTransaction";
 import { useAtomValue } from "jotai";
-import { useMemo } from "react";
+import { sumBigNumberArray } from "utils";
 import claimRewardsSvg from "./assets/claim-rewards.svg";
 
 export const StakingRewards = (): JSX.Element => {
   const { data: account } = useAtomValue(defaultAccountAtom);
+  const { claimRewardsEnabled } = useAtomValue(applicationFeaturesAtom);
   const {
     isLoading: isLoadingRewards,
     isSuccess,
@@ -42,7 +44,7 @@ export const StakingRewards = (): JSX.Element => {
 
   const {
     execute: claimRewards,
-    isEnabled: claimRewardsEnabled,
+    isEnabled: claimRewardsTxEnabled,
     isPending: claimRewardsPending,
   } = useTransaction({
     params: parseStakingRewardsParams(),
@@ -59,7 +61,7 @@ export const StakingRewards = (): JSX.Element => {
 
   const {
     execute: claimRewardsAndStake,
-    isEnabled: claimAndStakeEnabled,
+    isEnabled: claimAndStakeTxEnabled,
     isPending: claimAndStakePending,
   } = useTransaction({
     params: parseStakingRewardsParams(),
@@ -79,19 +81,18 @@ export const StakingRewards = (): JSX.Element => {
     },
   });
 
-  const availableRewards = useMemo(() => {
-    if (!rewards || Object.keys(rewards).length === 0) return BigNumber(0);
-    return BigNumber.sum(...Object.values(rewards || []));
-  }, [rewards]);
-
   const isLoading = claimRewardsPending || claimAndStakePending;
+  const availableRewards =
+    claimRewardsEnabled ?
+      sumBigNumberArray(Object.values(rewards || {}))
+    : new BigNumber(0);
 
   return (
     <Modal onClose={onCloseModal}>
       <ModalContainer
         header="Claimable Staking Rewards"
         onClose={onCloseModal}
-        containerProps={{ className: "lg:w-[540px] lg:h-[auto]" }}
+        containerProps={{ className: "md:!w-[540px] md:!h-[auto]" }}
         contentProps={{ className: "flex" }}
       >
         <Stack gap={8} className="bg-rblack py-7 px-8 rounded-md flex-1">
@@ -111,7 +112,7 @@ export const StakingRewards = (): JSX.Element => {
               backgroundColor="cyan"
               onClick={() => claimRewardsAndStake()}
               disabled={
-                availableRewards.eq(0) || !claimAndStakeEnabled || isLoading
+                availableRewards.eq(0) || !claimAndStakeTxEnabled || isLoading
               }
             >
               {claimAndStakePending ? "Loading..." : "Claim & Stake"}
@@ -120,7 +121,7 @@ export const StakingRewards = (): JSX.Element => {
               backgroundColor="white"
               onClick={() => claimRewards()}
               disabled={
-                availableRewards.eq(0) || !claimRewardsEnabled || isLoading
+                availableRewards.eq(0) || !claimRewardsTxEnabled || isLoading
               }
               type="button"
             >

diff --git a/apps/namadillo/src/App/Staking/StakingRewardsPanel.tsx b/apps/namadillo/src/App/Staking/StakingRewardsPanel.tsx
@@ -6,23 +6,19 @@ import { claimableRewardsAtom } from "atoms/staking";
 import BigNumber from "bignumber.js";
 import clsx from "clsx";
 import { useAtomValue } from "jotai";
-import { useMemo } from "react";
 import { GoStack } from "react-icons/go";
 import { useLocation, useNavigate } from "react-router-dom";
+import { sumBigNumberArray } from "utils";
 
 export const StakingRewardsPanel = (): JSX.Element => {
   const { claimRewardsEnabled } = useAtomValue(applicationFeaturesAtom);
   const { data: rewards } = useAtomValue(claimableRewardsAtom);
   const location = useLocation();
   const navigate = useNavigate();
-
-  const availableRewards = useMemo(() => {
-    if (!claimRewardsEnabled || !rewards || Object.keys(rewards).length === 0) {
-      return new BigNumber(0);
-    }
-    return BigNumber.sum(...Object.values(rewards));
-  }, [rewards]);
-
+  const availableRewards =
+    claimRewardsEnabled ?
+      sumBigNumberArray(Object.values(rewards || {}))
+    : new BigNumber(0);
   const title =
     claimRewardsEnabled ?
       "Unclaimed Staking Rewards"

diff --git a/apps/namadillo/src/App/Staking/__tests__/StakingRewards.test.tsx b/apps/namadillo/src/App/Staking/__tests__/StakingRewards.test.tsx
@@ -5,6 +5,7 @@ mockJotai();
 import { fireEvent, render, screen } from "@testing-library/react";
 import { StakingRewards } from "App/Staking/StakingRewards";
 import { defaultAccountAtom } from "atoms/accounts";
+import { applicationFeaturesAtom } from "atoms/settings";
 import { claimableRewardsAtom } from "atoms/staking";
 import { useTransaction } from "hooks/useTransaction";
 import { useAtomValue } from "jotai";
@@ -27,7 +28,8 @@ jest.mock("atoms/staking", () => ({
 const mockAtomValue = (
   data: AddressBalance = {},
   isLoading: boolean = true,
-  isSuccess: boolean = false
+  isSuccess: boolean = false,
+  rewardsEnabled: boolean = true
 ): void => {
   (useAtomValue as jest.Mock).mockImplementation((atom) => {
     if (atom === defaultAccountAtom) {
@@ -38,6 +40,10 @@ const mockAtomValue = (
       return { data, isLoading, isSuccess };
     }
 
+    if (atom === applicationFeaturesAtom) {
+      return { claimRewardsEnabled: rewardsEnabled };
+    }
+
     return null;
   });
 };
@@ -131,7 +137,8 @@ describe("Component: StakingRewards", () => {
         validator1: new BigNumber(100),
       },
       false,
-      true
+      true,
+      false
     );
     mockTransaction(jest.fn(), false, false);
     render(<StakingRewards />);

diff --git a/apps/namadillo/src/utils/index.ts b/apps/namadillo/src/utils/index.ts
@@ -1,4 +1,5 @@
 import { ProposalStatus, ProposalTypeString } from "@namada/types";
+import BigNumber from "bignumber.js";
 import * as fns from "date-fns";
 import { DateTime } from "luxon";
 import { useEffect } from "react";
@@ -57,6 +58,11 @@ export const secondsToDateString = (seconds: bigint): string =>
 export const secondsToDateTimeString = (seconds: bigint): string =>
   `${secondsToDateString(seconds)}, ${secondsToTimeString(seconds)}`;
 
+export const sumBigNumberArray = (numbers: BigNumber[]): BigNumber => {
+  if (numbers.length === 0) return new BigNumber(0);
+  return BigNumber.sum(...numbers);
+};
+
 export const secondsToTimeRemainingString = (
   startTimeInSeconds: bigint,
   endTimeInSeconds: bigint