fix: first reward notification shown many times

frontend/components/Main/MainNeedsFunds.tsx

@@ -17,7 +17,11 @@ const COVER_PREV_BLOCK_BORDER_STYLE = { marginTop: '-1px' };
 
 const useNeedsFunds = () => {
   const { getServiceTemplates } = useServiceTemplates();
-  const serviceTemplate = useMemo(() => getServiceTemplates()[0], []);
+
+  const serviceTemplate = useMemo(
+    () => getServiceTemplates()[0],
+    [getServiceTemplates],
+  );
 
   const { storeState } = useStore();
   const { safeBalance, totalOlasStakedBalance } = useBalance();

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);