Merge pull request #244 from valory-xyz/mohan/low-balance-prompt

feat: Add more xDAI prompt
valory-xyz · Aug 2, 2024 · 39703ab · 39703ab
2 parents 98e55a6 + 1c8e6f6
commit 39703ab
Show file tree

Hide file tree

Showing 7 changed files with 99 additions and 19 deletions.
diff --git a/electron/main.js b/electron/main.js
@@ -131,25 +131,33 @@ const createTray = () => {
   tray.setContextMenu(contextMenu);
 
   ipcMain.on('tray', (_event, status) => {
+    const isSupportedOS = isWindows || isMac;
     switch (status) {
       case 'low-gas': {
         const icon = getUpdatedTrayIcon(
-          isWindows || isMac ? TRAY_ICONS.LOW_GAS : TRAY_ICONS_PATHS.LOW_GAS,
+          isSupportedOS ? TRAY_ICONS.LOW_GAS : TRAY_ICONS_PATHS.LOW_GAS,
         );
         tray.setImage(icon);
         break;
       }
       case 'running': {
         const icon = getUpdatedTrayIcon(
-          isWindows || isMac ? TRAY_ICONS.RUNNING : TRAY_ICONS_PATHS.RUNNING,
+          isSupportedOS ? TRAY_ICONS.RUNNING : TRAY_ICONS_PATHS.RUNNING,
         );
         tray.setImage(icon);
 
         break;
       }
       case 'paused': {
         const icon = getUpdatedTrayIcon(
-          isWindows || isMac ? TRAY_ICONS.PAUSED : TRAY_ICONS_PATHS.PAUSED,
+          isSupportedOS ? TRAY_ICONS.PAUSED : TRAY_ICONS_PATHS.PAUSED,
+        );
+        tray.setImage(icon);
+        break;
+      }
+      case 'logged-out': {
+        const icon = getUpdatedTrayIcon(
+          isSupportedOS ? TRAY_ICONS.LOGGED_OUT : TRAY_ICONS_PATHS.LOGGED_OUT,
         );
         tray.setImage(icon);
         break;

diff --git a/frontend/components/Main/MainGasBalance.tsx b/frontend/components/Main/MainGasBalance.tsx
@@ -1,11 +1,12 @@
 import { ArrowUpOutlined, InfoCircleOutlined } from '@ant-design/icons';
 import { Skeleton, Tooltip, Typography } from 'antd';
-import { useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import styled from 'styled-components';
 
 import { COLOR } from '@/constants/colors';
 import { LOW_BALANCE } from '@/constants/thresholds';
 import { useBalance } from '@/hooks/useBalance';
+import { useElectronApi } from '@/hooks/useElectronApi';
 import { useWallet } from '@/hooks/useWallet';
 
 import { CardSection } from '../styled/CardSection';
@@ -30,20 +31,40 @@ const EmptyDot = styled(Dot)`
 const FineDot = styled(Dot)`
   background-color: ${COLOR.GREEN_2};
 `;
-const LowDot = styled(Dot)`
-  background-color: ${COLOR.ORANGE};
-`;
 
 const BalanceStatus = () => {
-  const { safeBalance } = useBalance();
+  const { isBalanceLoaded, safeBalance } = useBalance();
+  const { showNotification } = useElectronApi();
 
-  const status = useMemo(() => {
-    if (!safeBalance || safeBalance.ETH === 0) {
-      return { statusName: 'Empty', StatusComponent: EmptyDot };
+  const [isLowBalanceNotificationShown, setIsLowBalanceNotificationShown] =
+    useState(false);
+
+  // show notification if balance is too low
+  useEffect(() => {
+    if (!isBalanceLoaded) return;
+    if (!safeBalance) return;
+    if (!showNotification) return;
+
+    if (safeBalance.ETH < LOW_BALANCE && !isLowBalanceNotificationShown) {
+      showNotification('Trading balance is too low.');
+      setIsLowBalanceNotificationShown(true);
     }
 
-    if (safeBalance.ETH < LOW_BALANCE) {
-      return { statusName: 'Low', StatusComponent: LowDot };
+    // If it has already been shown and the balance has increased,
+    // should show the notification again if it goes below the threshold.
+    if (safeBalance.ETH >= LOW_BALANCE && isLowBalanceNotificationShown) {
+      setIsLowBalanceNotificationShown(false);
+    }
+  }, [
+    isBalanceLoaded,
+    isLowBalanceNotificationShown,
+    safeBalance,
+    showNotification,
+  ]);
+
+  const status = useMemo(() => {
+    if (!safeBalance || safeBalance.ETH < LOW_BALANCE) {
+      return { statusName: 'Too low', StatusComponent: EmptyDot };
     }
 
     return { statusName: 'Fine', StatusComponent: FineDot };

diff --git a/frontend/components/Main/MainHeader/AgentButton/index.tsx b/frontend/components/Main/MainHeader/AgentButton/index.tsx
@@ -4,6 +4,7 @@ import { useCallback, useMemo } from 'react';
 
 import { Chain, DeploymentStatus } from '@/client';
 import { COLOR } from '@/constants/colors';
+import { LOW_BALANCE } from '@/constants/thresholds';
 import { useBalance } from '@/hooks/useBalance';
 import { useElectronApi } from '@/hooks/useElectronApi';
 import { useServices } from '@/hooks/useServices';
@@ -185,6 +186,15 @@ const AgentNotRunningButton = () => {
   ]);
 
   const isDeployable = useMemo(() => {
+    // if the agent is NOT running and the balance is too low,
+    // user should not be able to start the agent
+    const isServiceInactive =
+      serviceStatus === DeploymentStatus.BUILT ||
+      serviceStatus === DeploymentStatus.STOPPED;
+    if (isServiceInactive && safeBalance && safeBalance.ETH < LOW_BALANCE) {
+      return false;
+    }
+
     if (serviceStatus === DeploymentStatus.DEPLOYED) return false;
     if (serviceStatus === DeploymentStatus.DEPLOYING) return false;
     if (serviceStatus === DeploymentStatus.STOPPING) return false;
@@ -211,6 +221,7 @@ const AgentNotRunningButton = () => {
     serviceStatus,
     storeState?.isInitialFunded,
     totalEthBalance,
+    safeBalance,
   ]);
 
   const buttonProps: ButtonProps = {

diff --git a/frontend/components/Main/MainHeader/index.tsx b/frontend/components/Main/MainHeader/index.tsx
@@ -23,6 +23,8 @@ const useSetupTrayIcon = () => {
       setTrayIcon?.('running');
     } else if (serviceStatus === DeploymentStatus.STOPPED) {
       setTrayIcon?.('paused');
+    } else if (serviceStatus === DeploymentStatus.BUILT) {
+      setTrayIcon?.('logged-out');
     }
   }, [safeBalance, serviceStatus, setTrayIcon]);
 

diff --git a/frontend/components/Main/MainOlasBalance.tsx b/frontend/components/Main/MainOlasBalance.tsx
@@ -6,6 +6,7 @@ import styled from 'styled-components';
 import { Alert } from '@/components/Alert';
 import { COLOR } from '@/constants/colors';
 import { UNICODE_SYMBOLS } from '@/constants/symbols';
+import { LOW_BALANCE } from '@/constants/thresholds';
 import { useBalance } from '@/hooks/useBalance';
 import { useElectronApi } from '@/hooks/useElectronApi';
 import { useReward } from '@/hooks/useReward';
@@ -106,8 +107,8 @@ const CurrentBalance = () => {
   );
 };
 
-const AvoidSuspensionAlertContainer = styled.div`
-  .ant-alert-info {
+const MainOlasBalanceAlert = styled.div`
+  .ant-alert {
     margin-bottom: 8px;
     .anticon.ant-alert-icon {
       height: 20px;
@@ -120,11 +121,43 @@ const AvoidSuspensionAlertContainer = styled.div`
   }
 `;
 
+const LowTradingBalanceAlert = () => {
+  const { isBalanceLoaded, safeBalance } = useBalance();
+
+  if (!isBalanceLoaded) return null;
+  if (!safeBalance) return null;
+  if (safeBalance.ETH >= LOW_BALANCE) return null;
+
+  return (
+    <MainOlasBalanceAlert>
+      <Alert
+        fullWidth
+        type="error"
+        showIcon
+        message={
+          <Flex vertical gap={8} align="flex-start">
+            <Title level={5} style={{ margin: 0 }}>
+              Trading balance is too low
+            </Title>
+            <Text>
+              {`To run your agent, add at least $${LOW_BALANCE} XDAI to your account.`}
+            </Text>
+            <Text>
+              Do it quickly to avoid your agent missing its targets and getting
+              suspended!
+            </Text>
+          </Flex>
+        }
+      />
+    </MainOlasBalanceAlert>
+  );
+};
+
 const AvoidSuspensionAlert = () => {
   const { store } = useElectronApi();
 
   return (
-    <AvoidSuspensionAlertContainer>
+    <MainOlasBalanceAlert>
       <Alert
         fullWidth
         type="info"
@@ -151,7 +184,7 @@ const AvoidSuspensionAlert = () => {
           </Flex>
         }
       />
-    </AvoidSuspensionAlertContainer>
+    </MainOlasBalanceAlert>
   );
 };
 
@@ -178,6 +211,7 @@ export const MainOlasBalance = () => {
   return (
     <CardSection vertical gap={8} bordertop="true" borderbottom="true">
       {canShowAvoidSuspensionAlert ? <AvoidSuspensionAlert /> : null}
+      <LowTradingBalanceAlert />
       {isBalanceLoaded ? (
         <>
           <CurrentBalance />

diff --git a/frontend/constants/thresholds.ts b/frontend/constants/thresholds.ts
@@ -7,4 +7,4 @@ export const MIN_ETH_BALANCE_THRESHOLDS = {
   },
 };
 
-export const LOW_BALANCE = 0.5;
+export const LOW_BALANCE = 2;
diff --git a/frontend/types/ElectronApi.ts b/frontend/types/ElectronApi.ts
@@ -6,4 +6,8 @@ export type ElectronStore = {
   agentEvictionAlertShown?: boolean;
 };
 
-export type ElectronTrayIconStatus = 'low-gas' | 'running' | 'paused';
+export type ElectronTrayIconStatus =
+  | 'low-gas'
+  | 'running'
+  | 'paused'
+  | 'logged-out';
-Original file line number
+Diff line change
@@ Expand Up / @@ -7,4 +7,4 @@ export const MIN_ETH_BALANCE_THRESHOLDS = { @@
       },
     };
-    export const LOW_BALANCE = 0.5;
+    export const LOW_BALANCE = 2;