Add keep agent running alert

electron/store.js

@@ -4,6 +4,14 @@ const schema = {
     type: 'boolean',
     default: false,
   },
+  firstStakingRewardAchieved: {
+    type: 'boolean',
+    default: false,
+  },
+  firstRewardNotificationShown: {
+    type: 'boolean',
+    default: false,
+  },
 };
 
 const setupStoreIpc = async (ipcChannel, mainWindow) => {

frontend/components/Main/KeepAgentRunning.tsx

@@ -0,0 +1,34 @@
+import { Flex, Typography } from 'antd';
+
+import { DeploymentStatus } from '@/client';
+import { useServices } from '@/hooks';
+import { useStore } from '@/hooks/useStore';
+
+import { Alert } from '../common/Alert';
+import { CardSection } from '../styled/CardSection';
+
+const { Text } = Typography;
+
+export const KeepAgentRunning = () => {
+  const { storeState } = useStore();
+  const { serviceStatus } = useServices();
+
+  if (storeState?.firstStakingRewardAchieved) return null;
+  if (serviceStatus !== DeploymentStatus.DEPLOYED) return null;
+
+  return (
+    <CardSection>
+      <Alert
+        type="info"
+        fullWidth
+        showIcon
+        message={
+          <Flex vertical>
+            <Text>Your agent has not hit its target yet.</Text>
+            <Text>Keep the agent running to earn today’s rewards.</Text>
+          </Flex>
+        }
+      />
+    </CardSection>
+  );
+};

frontend/components/Main/Main.tsx

@@ -5,6 +5,7 @@ import { useEffect } from 'react';
 import { PageState } from '@/enums';
 import { useBalance, usePageState, useServices } from '@/hooks';
 
+import { KeepAgentRunning } from './KeepAgentRunning';
 import { MainAddFunds } from './MainAddFunds';
 import { MainGasBalance } from './MainGasBalance';
 import { MainHeader } from './MainHeader';
@@ -41,6 +42,7 @@ export const Main = () => {
       <Flex vertical>
         <MainOlasBalance />
         <MainRewards />
+        <KeepAgentRunning />
         <MainGasBalance />
         <MainNeedsFunds />
         <MainAddFunds />

frontend/components/Main/MainNeedsFunds.tsx

@@ -19,7 +19,7 @@ const useNeedsFunds = () => {
   const { storeState } = useStore();
   const { safeBalance } = useBalance();
 
-  const isInitialFunded = storeState?.isInitialFunded as boolean | undefined;
+  const isInitialFunded = storeState?.isInitialFunded;
 
   const serviceFundRequirements = useMemo(() => {
     const monthlyGasEstimate = Number(

frontend/components/Main/MainRewards.tsx

@@ -8,6 +8,7 @@ import { COLOR } from '@/constants';
 import { useBalance } from '@/hooks';
 import { useElectronApi } from '@/hooks/useElectronApi';
 import { useReward } from '@/hooks/useReward';
+import { useStore } from '@/hooks/useStore';
 
 import { ConfettiAnimation } from '../common/ConfettiAnimation';
 
@@ -81,22 +82,27 @@ const DisplayRewards = () => {
 const NotifyRewards = () => {
   const { isEligibleForRewards, availableRewardsForEpochEth } = useReward();
   const { totalOlasBalance } = useBalance();
-  const { showNotification } = useElectronApi();
+  const { showNotification, store } = useElectronApi();
+  const { storeState } = useStore();
 
   const [canShowNotification, setCanShowNotification] = useState(false);
 
+  // hook to set the flag to show the notification
   useEffect(() => {
-    // TODO: Implement this once state persistence is available
-    const hasAlreadyNotified = true;
-
     if (!isEligibleForRewards) return;
-    if (hasAlreadyNotified) return;
+    if (!storeState) return;
+    if (storeState?.firstRewardNotificationShown) return;
     if (!availableRewardsForEpochEth) return;
 
     setCanShowNotification(true);
-  }, [isEligibleForRewards, availableRewardsForEpochEth, showNotification]);
-
-  // hook to show app notification
+  }, [
+    isEligibleForRewards,
+    availableRewardsForEpochEth,
+    showNotification,
+    storeState,
+  ]);
+
+  // hook to show desktop app notification
   useEffect(() => {
     if (!canShowNotification) return;
 
@@ -108,8 +114,10 @@ const NotifyRewards = () => {
 
   const closeNotificationModal = useCallback(() => {
     setCanShowNotification(false);
-    // TODO: add setter for hasAlreadyNotified
-  }, []);
+
+    // once the notification is closed, set the flag to true
+    store?.set?.('firstRewardNotificationShown', true);
+  }, [store]);
 
   if (!canShowNotification) return null;
 
@@ -126,7 +134,7 @@ const NotifyRewards = () => {
           size="large"
           className="mt-8"
           disabled
-          // TODO: add twitter share functionality
+          style={{ display: 'none' }} // TODO: add twitter share functionality
         >
           <Flex align="center" justify="center" gap={2}>
             Share on

frontend/context/RewardProvider.tsx

@@ -4,11 +4,14 @@ import {
   PropsWithChildren,
   useCallback,
   useContext,
+  useEffect,
   useMemo,
   useState,
 } from 'react';
 import { useInterval } from 'usehooks-ts';
 
+import { useElectronApi } from '@/hooks/useElectronApi';
+import { useStore } from '@/hooks/useStore';
 import { AutonolasService } from '@/service/Autonolas';
 
 import { ServicesContext } from './ServicesProvider';
@@ -32,6 +35,8 @@ export const RewardContext = createContext<{
 export const RewardProvider = ({ children }: PropsWithChildren) => {
   const { services } = useContext(ServicesContext);
   const service = useMemo(() => services?.[0], [services]);
+  const { storeState } = useStore();
+  const electronApi = useElectronApi();
 
   const [accruedServiceStakingRewards, setAccruedServiceStakingRewards] =
     useState<number>();
@@ -78,6 +83,16 @@ export const RewardProvider = ({ children }: PropsWithChildren) => {
     setAvailableRewardsForEpoch(rewards);
   }, [service]);
 
+  useEffect(() => {
+    if (isEligibleForRewards && !storeState?.firstStakingRewardAchieved) {
+      electronApi.store?.set?.('firstStakingRewardAchieved', true);
+    }
+  }, [
+    electronApi.store,
+    isEligibleForRewards,
+    storeState?.firstStakingRewardAchieved,
+  ]);
+
   useInterval(async () => updateRewards(), 5000);
 
   return (

frontend/types/ElectronApi.ts

@@ -1,4 +1,7 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-export type ElectronStore = Record<string, unknown>;
+export type ElectronStore = {
+  isInitialFunded?: boolean;
+  firstStakingRewardAchieved?: boolean;
+  firstRewardNotificationShown?: boolean;
+};
 
 export type ElectronTrayIconStatus = 'low-gas' | 'running' | 'paused';