Merge pull request #230 from valory-xyz/tanya/notifications-fix

fix: notifications fixes

frontend/components/Main/MainHeader/FirstRunModal.tsx

@@ -2,16 +2,22 @@ import { Button, Flex, Modal, Typography } from 'antd';
 import Image from 'next/image';
 import { FC } from 'react';
 
-import { useReward } from '@/hooks/useReward';
+import { useServiceTemplates } from '@/hooks/useServiceTemplates';
+import { getMinimumStakedAmountRequired } from '@/utils/service';
 
 const { Title, Paragraph } = Typography;
 
 type FirstRunModalProps = { open: boolean; onClose: () => void };
 
 export const FirstRunModal: FC<FirstRunModalProps> = ({ open, onClose }) => {
-  const { minimumStakedAmountRequired } = useReward();
+  const { getServiceTemplates } = useServiceTemplates();
 
   if (!open) return null;
+
+  const minimumStakedAmountRequired = getMinimumStakedAmountRequired(
+    getServiceTemplates()[0],
+  );
+
   return (
     <Modal
       open={open}

frontend/components/Main/MainHeader/index.tsx

@@ -8,14 +8,14 @@ import { COLOR } from '@/constants/colors';
 import { LOW_BALANCE } from '@/constants/thresholds';
 import { useBalance } from '@/hooks/useBalance';
 import { useElectronApi } from '@/hooks/useElectronApi';
-import { useReward } from '@/hooks/useReward';
 import { useServices } from '@/hooks/useServices';
 import { useServiceTemplates } from '@/hooks/useServiceTemplates';
 import { useStakingContractInfo } from '@/hooks/useStakingContractInfo';
 import { useStore } from '@/hooks/useStore';
 import { useWallet } from '@/hooks/useWallet';
 import { ServicesService } from '@/service/Services';
 import { WalletService } from '@/service/Wallet';
+import { getMinimumStakedAmountRequired } from '@/utils/service';
 
 import { CannotStartAgent } from './CannotStartAgent';
 import { requiredGas, requiredOlas } from './constants';
@@ -86,8 +86,6 @@ export const MainHeader = () => {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const handleModalClose = useCallback(() => setIsModalOpen(false), []);
 
-  const { minimumStakedAmountRequired } = useReward();
-
   const { isInitialStakingLoad, isAgentEvicted, canStartAgent } =
     useStakingContractInfo();
 
@@ -172,6 +170,9 @@ export const MainHeader = () => {
           if (serviceExists) {
             showNotification?.('Your agent is now running!');
           } else {
+            const minimumStakedAmountRequired =
+              getMinimumStakedAmountRequired(serviceTemplate);
+
             showNotification?.(
               `Your agent is running and you've staked ${minimumStakedAmountRequired} OLAS!`,
             );
@@ -188,7 +189,6 @@ export const MainHeader = () => {
     }
   }, [
     masterSafeAddress,
-    minimumStakedAmountRequired,
     serviceTemplate,
     services,
     setIsBalancePollingPaused,

frontend/components/Main/MainNeedsFunds.tsx

@@ -2,11 +2,12 @@ import { Flex, Typography } from 'antd';
 import { formatUnits } from 'ethers/lib/utils';
 import { ReactNode, useEffect, useMemo } from 'react';
 
-import { SERVICE_TEMPLATES } from '@/constants/serviceTemplates';
 import { UNICODE_SYMBOLS } from '@/constants/symbols';
 import { useBalance } from '@/hooks/useBalance';
 import { useElectronApi } from '@/hooks/useElectronApi';
+import { useServiceTemplates } from '@/hooks/useServiceTemplates';
 import { useStore } from '@/hooks/useStore';
+import { getMinimumStakedAmountRequired } from '@/utils/service';
 
 import { Alert } from '../Alert';
 import { CardSection } from '../styled/CardSection';
@@ -15,7 +16,13 @@ const { Text, Paragraph } = Typography;
 const COVER_PREV_BLOCK_BORDER_STYLE = { marginTop: '-1px' };
 
 const useNeedsFunds = () => {
-  const serviceTemplate = SERVICE_TEMPLATES[0];
+  const { getServiceTemplates } = useServiceTemplates();
+
+  const serviceTemplate = useMemo(
+    () => getServiceTemplates()[0],
+    [getServiceTemplates],
+  );
+
   const { storeState } = useStore();
   const { safeBalance, totalOlasStakedBalance } = useBalance();
 
@@ -25,24 +32,15 @@ const useNeedsFunds = () => {
     const monthlyGasEstimate = Number(
       formatUnits(`${serviceTemplate.configuration.monthly_gas_estimate}`, 18),
     );
-    const olasCostOfBond = Number(
-      formatUnits(`${serviceTemplate.configuration.olas_cost_of_bond}`, 18),
-    );
-    const olasRequiredToStake = Number(
-      formatUnits(
-        `${serviceTemplate.configuration.olas_required_to_stake}`,
-        18,
-      ),
-    );
+
+    const minimumStakedAmountRequired =
+      getMinimumStakedAmountRequired(serviceTemplate);
+
     return {
       eth: monthlyGasEstimate,
-      olas: olasCostOfBond + olasRequiredToStake,
+      olas: minimumStakedAmountRequired,
     };
-  }, [
-    serviceTemplate.configuration.monthly_gas_estimate,
-    serviceTemplate.configuration.olas_cost_of_bond,
-    serviceTemplate.configuration.olas_required_to_stake,
-  ]);
+  }, [serviceTemplate]);
 
   const hasEnoughEthForInitialFunding = useMemo(
     () => (safeBalance?.ETH || 0) >= (serviceFundRequirements?.eth || 0),

frontend/components/Main/MainRewards.tsx

@@ -1,7 +1,7 @@
 import { InfoCircleOutlined } from '@ant-design/icons';
 import { Button, Flex, Modal, Skeleton, Tag, Tooltip, Typography } from 'antd';
 import Image from 'next/image';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 
 import { useBalance } from '@/hooks/useBalance';
 import { useElectronApi } from '@/hooks/useElectronApi';
@@ -73,30 +73,28 @@ const NotifyRewards = () => {
 
   const [canShowNotification, setCanShowNotification] = useState(false);
 
+  const firstRewardRef = useRef<number>();
+
   // hook to set the flag to show the notification
   useEffect(() => {
     if (!isEligibleForRewards) return;
     if (!storeState) return;
     if (storeState?.firstRewardNotificationShown) return;
     if (!availableRewardsForEpochEth) return;
 
+    firstRewardRef.current = availableRewardsForEpochEth;
     setCanShowNotification(true);
-  }, [
-    isEligibleForRewards,
-    availableRewardsForEpochEth,
-    showNotification,
-    storeState,
-  ]);
+  }, [isEligibleForRewards, availableRewardsForEpochEth, storeState]);
 
   // hook to show desktop app notification
   useEffect(() => {
     if (!canShowNotification) return;
 
     showNotification?.(
       'Your agent earned its first staking rewards!',
-      `Congratulations! Your agent just got the first reward for you! Your current balance: ${availableRewardsForEpochEth} OLAS`,
+      `Congratulations! Your agent just got the first reward for you! Your current balance: ${firstRewardRef.current} OLAS`,
     );
-  }, [canShowNotification, availableRewardsForEpochEth, showNotification]);
+  }, [canShowNotification, showNotification]);
 
   const closeNotificationModal = useCallback(() => {
     setCanShowNotification(false);

frontend/context/RewardProvider.tsx

@@ -48,8 +48,6 @@ export const RewardProvider = ({ children }: PropsWithChildren) => {
   const [availableRewardsForEpoch, setAvailableRewardsForEpoch] =
     useState<number>();
   const [isEligibleForRewards, setIsEligibleForRewards] = useState<boolean>();
-  const [minimumStakedAmountRequired, setMinimumStakedAmountRequired] =
-    useState<number>();
 
   const availableRewardsForEpochEth = useMemo<number | undefined>(() => {
     if (!availableRewardsForEpoch) return;
@@ -87,7 +85,6 @@ export const RewardProvider = ({ children }: PropsWithChildren) => {
     setAccruedServiceStakingRewards(
       stakingRewardsInfo?.accruedServiceStakingRewards,
     );
-    setMinimumStakedAmountRequired(stakingRewardsInfo?.minimumStakedAmount);
     setAvailableRewardsForEpoch(rewards);
   }, [service]);
 
@@ -114,7 +111,6 @@ export const RewardProvider = ({ children }: PropsWithChildren) => {
         availableRewardsForEpochEth,
         isEligibleForRewards,
         optimisticRewardsEarnedForEpoch,
-        minimumStakedAmountRequired,
         updateRewards,
       }}
     >

frontend/hooks/useReward.ts

@@ -7,15 +7,13 @@ export const useReward = () => {
     availableRewardsForEpoch,
     availableRewardsForEpochEth,
     isEligibleForRewards,
-    minimumStakedAmountRequired,
     accruedServiceStakingRewards,
   } = useContext(RewardContext);
 
   return {
     availableRewardsForEpoch,
     availableRewardsForEpochEth,
     isEligibleForRewards,
-    minimumStakedAmountRequired,
     accruedServiceStakingRewards,
   };
 };

frontend/utils/service.ts

@@ -0,0 +1,13 @@
+import { ServiceTemplate } from "@/client";
+import { formatUnits } from "ethers/lib/utils";
+
+export const getMinimumStakedAmountRequired = (serviceTemplate: ServiceTemplate) => {
+  const olasCostOfBond = Number(
+    formatUnits(`${serviceTemplate.configuration.olas_cost_of_bond}`, 18)
+  );
+  const olasRequiredToStake = Number(
+    formatUnits(`${serviceTemplate.configuration.olas_required_to_stake}`, 18)
+  );
+
+  return olasCostOfBond + olasRequiredToStake;
+};