chore: update low gas alert logic

frontend/components/Main/MainGasBalance.tsx

@@ -4,7 +4,6 @@ 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 { useStore } from '@/hooks/useStore';
@@ -34,7 +33,7 @@ const FineDot = styled(Dot)`
 `;
 
 const BalanceStatus = () => {
-  const { isBalanceLoaded, safeBalance } = useBalance();
+  const { isBalanceLoaded, isLowBalance } = useBalance();
   const { storeState } = useStore();
   const { showNotification } = useElectronApi();
 
@@ -44,35 +43,34 @@ const BalanceStatus = () => {
   // show notification if balance is too low
   useEffect(() => {
     if (!isBalanceLoaded) return;
-    if (!safeBalance) return;
     if (!showNotification) return;
     if (!storeState?.isInitialFunded) return;
 
-    if (safeBalance.ETH < LOW_BALANCE && !isLowBalanceNotificationShown) {
+    if (isLowBalance && !isLowBalanceNotificationShown) {
       showNotification('Trading balance is too low.');
       setIsLowBalanceNotificationShown(true);
     }
 
     // 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) {
+    if (!isLowBalance && isLowBalanceNotificationShown) {
       setIsLowBalanceNotificationShown(false);
     }
   }, [
     isBalanceLoaded,
     isLowBalanceNotificationShown,
-    safeBalance,
+    isLowBalance,
     showNotification,
     storeState?.isInitialFunded,
   ]);
 
   const status = useMemo(() => {
-    if (!safeBalance || safeBalance.ETH < LOW_BALANCE) {
+    if (isLowBalance) {
       return { statusName: 'Too low', StatusComponent: EmptyDot };
     }
 
     return { statusName: 'Fine', StatusComponent: FineDot };
-  }, [safeBalance]);
+  }, [isLowBalance]);
 
   const { statusName, StatusComponent } = status;
   return (

frontend/components/Main/MainHeader/AgentButton/index.tsx

@@ -4,7 +4,6 @@ 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';
@@ -101,6 +100,7 @@ const AgentNotRunningButton = () => {
   const {
     setIsPaused: setIsBalancePollingPaused,
     safeBalance,
+    isLowBalance,
     totalOlasStakedBalance,
     totalEthBalance,
   } = useBalance();
@@ -194,7 +194,7 @@ const AgentNotRunningButton = () => {
     const isServiceInactive =
       serviceStatus === DeploymentStatus.BUILT ||
       serviceStatus === DeploymentStatus.STOPPED;
-    if (isServiceInactive && safeBalance && safeBalance.ETH < LOW_BALANCE) {
+    if (isServiceInactive && isLowBalance) {
       return false;
     }
 
@@ -224,7 +224,7 @@ const AgentNotRunningButton = () => {
     serviceStatus,
     storeState?.isInitialFunded,
     totalEthBalance,
-    safeBalance,
+    isLowBalance,
   ]);
 
   const buttonProps: ButtonProps = {

frontend/components/Main/MainHeader/index.tsx

@@ -2,7 +2,6 @@ import { Flex } from 'antd';
 import { useCallback, useEffect, useState } from 'react';
 
 import { DeploymentStatus } from '@/client';
-import { LOW_BALANCE } from '@/constants/thresholds';
 import { useBalance } from '@/hooks/useBalance';
 import { useElectronApi } from '@/hooks/useElectronApi';
 import { useServices } from '@/hooks/useServices';
@@ -12,12 +11,12 @@ import { AgentHead } from './AgentHead';
 import { FirstRunModal } from './FirstRunModal';
 
 const useSetupTrayIcon = () => {
-  const { safeBalance } = useBalance();
+  const { isLowBalance } = useBalance();
   const { serviceStatus } = useServices();
   const { setTrayIcon } = useElectronApi();
 
   useEffect(() => {
-    if (safeBalance && safeBalance.ETH < LOW_BALANCE) {
+    if (isLowBalance) {
       setTrayIcon?.('low-gas');
     } else if (serviceStatus === DeploymentStatus.DEPLOYED) {
       setTrayIcon?.('running');
@@ -26,7 +25,7 @@ const useSetupTrayIcon = () => {
     } else if (serviceStatus === DeploymentStatus.BUILT) {
       setTrayIcon?.('logged-out');
     }
-  }, [safeBalance, serviceStatus, setTrayIcon]);
+  }, [isLowBalance, serviceStatus, setTrayIcon]);
 
   return null;
 };

frontend/components/Main/MainOlasBalance.tsx

@@ -122,13 +122,12 @@ const MainOlasBalanceAlert = styled.div`
 `;
 
 const LowTradingBalanceAlert = () => {
-  const { isBalanceLoaded, safeBalance } = useBalance();
+  const { isBalanceLoaded, isLowBalance } = useBalance();
   const { storeState } = useStore();
 
   if (!isBalanceLoaded) return null;
-  if (!safeBalance) return null;
   if (!storeState?.isInitialFunded) return;
-  if (safeBalance.ETH >= LOW_BALANCE) return null;
+  if (!isLowBalance) return null;
 
   return (
     <MainOlasBalanceAlert>

frontend/constants/thresholds.ts

@@ -7,4 +7,5 @@ export const MIN_ETH_BALANCE_THRESHOLDS = {
   },
 };
 
+export const LOW_AGENT_BALANCE = 0.5;
 export const LOW_BALANCE = 2;

frontend/context/BalanceProvider.tsx

@@ -16,6 +16,7 @@ import { useInterval } from 'usehooks-ts';
 
 import { Wallet } from '@/client';
 import { FIVE_SECONDS_INTERVAL } from '@/constants/intervals';
+import { LOW_AGENT_BALANCE, LOW_BALANCE } from '@/constants/thresholds';
 import { TOKENS } from '@/constants/tokens';
 import { ServiceRegistryL2ServiceState } from '@/enums/ServiceRegistryL2ServiceState';
 import { Token } from '@/enums/Token';
@@ -43,6 +44,7 @@ export const BalanceContext = createContext<{
   safeBalance?: ValueOf<WalletAddressNumberRecord>;
   totalEthBalance?: number;
   totalOlasBalance?: number;
+  isLowBalance: boolean;
   wallets?: Wallet[];
   walletBalances: WalletAddressNumberRecord;
   updateBalances: () => Promise<void>;
@@ -58,6 +60,7 @@ export const BalanceContext = createContext<{
   safeBalance: undefined,
   totalEthBalance: undefined,
   totalOlasBalance: undefined,
+  isLowBalance: false,
   wallets: undefined,
   walletBalances: {},
   updateBalances: async () => {},
@@ -195,6 +198,22 @@ export const BalanceProvider = ({ children }: PropsWithChildren) => {
     () => masterSafeAddress && walletBalances[masterSafeAddress],
     [masterSafeAddress, walletBalances],
   );
+  const agentSafeBalance = useMemo(
+    () =>
+      services?.[0]?.chain_data?.multisig &&
+      walletBalances[services[0].chain_data.multisig],
+    [services, walletBalances],
+  );
+  const isLowBalance = useMemo(() => {
+    if (!safeBalance || !agentSafeBalance) return false;
+    if (
+      safeBalance.ETH < LOW_BALANCE &&
+      // Need to check agentSafe balance as well, because it's auto-funded from safeBalance
+      agentSafeBalance.ETH < LOW_AGENT_BALANCE
+    )
+      return true;
+    return false;
+  }, [safeBalance, agentSafeBalance]);
 
   useInterval(
     () => {
@@ -215,6 +234,7 @@ export const BalanceProvider = ({ children }: PropsWithChildren) => {
         safeBalance,
         totalEthBalance,
         totalOlasBalance,
+        isLowBalance,
         wallets,
         walletBalances,
         updateBalances,