feat: Pre-emptively educate about eviction

electron/store.js

@@ -4,6 +4,7 @@ const defaultSchema = {
   isInitialFunded: { type: 'boolean', default: false },
   firstStakingRewardAchieved: { type: 'boolean', default: false },
   firstRewardNotificationShown: { type: 'boolean', default: false },
+  agentEvictionAlertShown: { type: 'boolean', default: false },
 };
 
 const setupStoreIpc = async (ipcChannel, mainWindow, storeInitialValues) => {

frontend/components/Main/MainOlasBalance.tsx

@@ -1,17 +1,20 @@
 import { InfoCircleOutlined } from '@ant-design/icons';
-import { Flex, Skeleton, Tooltip, Typography } from 'antd';
+import { Button, Flex, Skeleton, Tooltip, Typography } from 'antd';
 import { useMemo } from 'react';
 import styled from 'styled-components';
 
+import { Alert } from '@/components/Alert';
 import { COLOR } from '@/constants/colors';
 import { UNICODE_SYMBOLS } from '@/constants/symbols';
 import { useBalance } from '@/hooks/useBalance';
+import { useElectronApi } from '@/hooks/useElectronApi';
 import { useReward } from '@/hooks/useReward';
+import { useStore } from '@/hooks/useStore';
 import { balanceFormat } from '@/utils/numberFormatters';
 
 import { CardSection } from '../styled/CardSection';
 
-const { Text } = Typography;
+const { Text, Title } = Typography;
 const Balance = styled.span`
   letter-spacing: -2px;
   margin-right: 4px;
@@ -103,16 +106,78 @@ const CurrentBalance = () => {
   );
 };
 
+const AvoidSuspensionAlertContainer = styled.div`
+  .ant-alert-info {
+    margin-bottom: 8px;
+    .anticon.ant-alert-icon {
+      height: 20px;
+      width: 20px;
+      svg {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+`;
+
+const AvoidSuspensionAlert = () => {
+  const { store } = useElectronApi();
+
+  return (
+    <AvoidSuspensionAlertContainer>
+      <Alert
+        fullWidth
+        type="info"
+        showIcon
+        message={
+          <Flex vertical gap={8} align="flex-start">
+            <Title level={5} style={{ margin: 0 }}>
+              Avoid suspension!
+            </Title>
+            <Text>
+              Run your agent for at least half an hour a day to make sure it
+              hits its targets. If it misses its targets 2 days in a row, it’ll
+              be suspended. You won’t be able to run it or earn rewards for
+              several days.
+            </Text>
+            <Button
+              type="primary"
+              ghost
+              onClick={() => store?.set?.('agentEvictionAlertShown', true)}
+              style={{ marginTop: 4 }}
+            >
+              Understood
+            </Button>
+          </Flex>
+        }
+      />
+    </AvoidSuspensionAlertContainer>
+  );
+};
+
 export const MainOlasBalance = () => {
+  const { storeState } = useStore();
   const { isBalanceLoaded, totalOlasBalance } = useBalance();
 
+  // If first reward notification is shown BUT
+  // agent eviction alert is NOT yet shown, show this alert.
+  const canShowAvoidSuspensionAlert = useMemo(() => {
+    if (!storeState) return false;
+
+    return (
+      storeState.firstRewardNotificationShown &&
+      !storeState.agentEvictionAlertShown
+    );
+  }, [storeState]);
+
   const balance = useMemo(() => {
     if (totalOlasBalance === undefined) return '--';
     return balanceFormat(totalOlasBalance, 2);
   }, [totalOlasBalance]);
 
   return (
     <CardSection vertical gap={8} bordertop="true" borderbottom="true">
+      {canShowAvoidSuspensionAlert ? <AvoidSuspensionAlert /> : null}
       {isBalanceLoaded ? (
         <>
           <CurrentBalance />

frontend/components/Main/MainRewards.tsx

@@ -65,7 +65,7 @@ const DisplayRewards = () => {
 const SHARE_TEXT = `I just earned my first reward through the Operate app powered by #olas!\n\nDownload the Pearl app:`;
 const OPERATE_URL = 'https://olas.network/operate?pearl=first-reward';
 
-const NotifyRewards = () => {
+const NotifyRewardsModal = () => {
   const { isEligibleForRewards, availableRewardsForEpochEth } = useReward();
   const { totalOlasBalance } = useBalance();
   const { showNotification, store } = useElectronApi();
@@ -179,6 +179,6 @@ const NotifyRewards = () => {
 export const MainRewards = () => (
   <>
     <DisplayRewards />
-    <NotifyRewards />
+    <NotifyRewardsModal />
   </>
 );

frontend/types/ElectronApi.ts

@@ -3,6 +3,7 @@ export type ElectronStore = {
   isInitialFunded?: boolean;
   firstStakingRewardAchieved?: boolean;
   firstRewardNotificationShown?: boolean;
+  agentEvictionAlertShown?: boolean;
 };
 
 export type ElectronTrayIconStatus = 'low-gas' | 'running' | 'paused';