fix(namadillo): fixing staking rewards not updating

apps/namadillo/src/App/Staking/StakingRewards.tsx

@@ -12,12 +12,11 @@ import {
   claimableRewardsAtom,
   claimAndStakeRewardsAtom,
   claimRewardsAtom,
+  getStakingRewardsTotalAtom,
 } from "atoms/staking";
-import BigNumber from "bignumber.js";
 import { useModalCloseEvent } from "hooks/useModalCloseEvent";
 import { useTransaction } from "hooks/useTransaction";
 import { useAtomValue } from "jotai";
-import { useMemo } from "react";
 import claimRewardsSvg from "./assets/claim-rewards.svg";
 
 export const StakingRewards = (): JSX.Element => {
@@ -28,6 +27,8 @@ export const StakingRewards = (): JSX.Element => {
     data: rewards,
   } = useAtomValue(claimableRewardsAtom);
 
+  const availableRewards = useAtomValue(getStakingRewardsTotalAtom);
+
   const { onCloseModal } = useModalCloseEvent();
 
   const parseStakingRewardsParams = (): ClaimRewardsMsgValue[] => {
@@ -79,19 +80,14 @@ 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;
 
   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">

apps/namadillo/src/App/Staking/StakingRewardsPanel.tsx

@@ -2,27 +2,18 @@ import { ActionButton, AmountSummaryCard } from "@namada/components";
 import { NamCurrency } from "App/Common/NamCurrency";
 import StakingRoutes from "App/Staking/routes";
 import { applicationFeaturesAtom } from "atoms/settings";
-import { claimableRewardsAtom } from "atoms/staking";
-import BigNumber from "bignumber.js";
+import { getStakingRewardsTotalAtom } from "atoms/staking";
 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";
 
 export const StakingRewardsPanel = (): JSX.Element => {
   const { claimRewardsEnabled } = useAtomValue(applicationFeaturesAtom);
-  const { data: rewards } = useAtomValue(claimableRewardsAtom);
+  const availableRewards = useAtomValue(getStakingRewardsTotalAtom);
   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 title =
     claimRewardsEnabled ?
       "Unclaimed Staking Rewards"

apps/namadillo/src/atoms/staking/atoms.ts

@@ -12,6 +12,7 @@ import { chainAtom, chainParametersAtom } from "atoms/chain";
 import { queryDependentFn } from "atoms/utils";
 import { myValidatorsAtom } from "atoms/validators";
 import BigNumber from "bignumber.js";
+import { atom } from "jotai";
 import { atomWithMutation, atomWithQuery } from "jotai-tanstack-query";
 import { atomFamily } from "jotai/utils";
 import { AddressBalance, BuildTxAtomParams, StakingTotals } from "types";
@@ -142,6 +143,16 @@ export const claimRewardsAtom = atomWithMutation((get) => {
   };
 });
 
+export const getStakingRewardsTotalAtom = atom((get) => {
+  const { data: rewards } = get(claimableRewardsAtom);
+
+  if (!rewards || Object.keys(rewards).length === 0) {
+    return new BigNumber(0);
+  }
+
+  return BigNumber.sum(...Object.values(rewards));
+});
+
 export const claimAndStakeRewardsAtom = atomWithMutation((get) => {
   const chain = get(chainAtom);
   const claimableRewards = get(claimableRewardsAtom);