diff --git a/frontend/components/Main/MainGasBalance.tsx b/frontend/components/Main/MainGasBalance.tsx index 0d1f83f26..f3b14438d 100644 --- a/frontend/components/Main/MainGasBalance.tsx +++ b/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 ( diff --git a/frontend/components/Main/MainHeader/AgentButton/index.tsx b/frontend/components/Main/MainHeader/AgentButton/index.tsx index 356a45c12..42c060200 100644 --- a/frontend/components/Main/MainHeader/AgentButton/index.tsx +++ b/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 = { diff --git a/frontend/components/Main/MainHeader/index.tsx b/frontend/components/Main/MainHeader/index.tsx index 78ffde06f..7dbd5560d 100644 --- a/frontend/components/Main/MainHeader/index.tsx +++ b/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; }; diff --git a/frontend/components/Main/MainOlasBalance.tsx b/frontend/components/Main/MainOlasBalance.tsx index fa6d87b9b..9fbbbedb0 100644 --- a/frontend/components/Main/MainOlasBalance.tsx +++ b/frontend/components/Main/MainOlasBalance.tsx @@ -6,7 +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 { LOW_MASTER_SAFE_BALANCE } from '@/constants/thresholds'; import { useBalance } from '@/hooks/useBalance'; import { useElectronApi } from '@/hooks/useElectronApi'; import { useReward } from '@/hooks/useReward'; @@ -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 ( @@ -142,7 +141,7 @@ const LowTradingBalanceAlert = () => { Trading balance is too low - {`To run your agent, add at least $${LOW_BALANCE} XDAI to your account.`} + {`To run your agent, add at least $${LOW_MASTER_SAFE_BALANCE} XDAI to your account.`} Do it quickly to avoid your agent missing its targets and getting diff --git a/frontend/constants/thresholds.ts b/frontend/constants/thresholds.ts index fb5ab3515..9566aab8e 100644 --- a/frontend/constants/thresholds.ts +++ b/frontend/constants/thresholds.ts @@ -7,4 +7,5 @@ export const MIN_ETH_BALANCE_THRESHOLDS = { }, }; -export const LOW_BALANCE = 2; +export const LOW_AGENT_SAFE_BALANCE = 0.5; +export const LOW_MASTER_SAFE_BALANCE = 2; diff --git a/frontend/context/BalanceProvider.tsx b/frontend/context/BalanceProvider.tsx index 12c5400ec..7ac0e16e0 100644 --- a/frontend/context/BalanceProvider.tsx +++ b/frontend/context/BalanceProvider.tsx @@ -16,6 +16,10 @@ import { useInterval } from 'usehooks-ts'; import { Wallet } from '@/client'; import { FIVE_SECONDS_INTERVAL } from '@/constants/intervals'; +import { + LOW_AGENT_SAFE_BALANCE, + LOW_MASTER_SAFE_BALANCE, +} from '@/constants/thresholds'; import { TOKENS } from '@/constants/tokens'; import { ServiceRegistryL2ServiceState } from '@/enums/ServiceRegistryL2ServiceState'; import { Token } from '@/enums/Token'; @@ -43,6 +47,7 @@ export const BalanceContext = createContext<{ safeBalance?: ValueOf; totalEthBalance?: number; totalOlasBalance?: number; + isLowBalance: boolean; wallets?: Wallet[]; walletBalances: WalletAddressNumberRecord; updateBalances: () => Promise; @@ -58,6 +63,7 @@ export const BalanceContext = createContext<{ safeBalance: undefined, totalEthBalance: undefined, totalOlasBalance: undefined, + isLowBalance: false, wallets: undefined, walletBalances: {}, updateBalances: async () => {}, @@ -195,6 +201,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_MASTER_SAFE_BALANCE && + // Need to check agentSafe balance as well, because it's auto-funded from safeBalance + agentSafeBalance.ETH < LOW_AGENT_SAFE_BALANCE + ) + return true; + return false; + }, [safeBalance, agentSafeBalance]); useInterval( () => { @@ -215,6 +237,7 @@ export const BalanceProvider = ({ children }: PropsWithChildren) => { safeBalance, totalEthBalance, totalOlasBalance, + isLowBalance, wallets, walletBalances, updateBalances,