Update MainGasBalance component to display 'Too low' status for empty…

… ETH balance
valory-xyz · Jul 24, 2024 · a9386a4 · a9386a4
1 parent 802d3c5
commit a9386a4
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 10 deletions.
diff --git a/frontend/components/Main/MainGasBalance.tsx b/frontend/components/Main/MainGasBalance.tsx
@@ -30,22 +30,15 @@ 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 status = useMemo(() => {
-    if (!safeBalance || safeBalance.ETH === 0) {
+    if (!safeBalance || safeBalance.ETH < LOW_BALANCE) {
       return { statusName: 'Too low', StatusComponent: EmptyDot };
     }
 
-    if (safeBalance.ETH < LOW_BALANCE) {
-      return { statusName: 'Low', StatusComponent: LowDot };
-    }
-
     return { statusName: 'Fine', StatusComponent: FineDot };
   }, [safeBalance]);
 

diff --git a/frontend/components/Main/MainHeader/index.tsx b/frontend/components/Main/MainHeader/index.tsx
@@ -263,6 +263,8 @@ export const MainHeader = () => {
       if (safeOlasBalanceWithStaked === undefined) return false;
       if (!services) return false;
 
+      if (!safeBalance || safeBalance.ETH < LOW_BALANCE) return false;
+
       // deployment statuses where agent should not be deployed
       // if (serviceStatus === DeploymentStatus.DEPLOYED) return false; // condition already checked above
       if (serviceStatus === DeploymentStatus.DEPLOYING) return false;
@@ -303,6 +305,7 @@ export const MainHeader = () => {
     totalEthBalance,
     isEligibleForStakingAction,
     canStartEvictedAgent,
+    safeBalance,
   ]);
 
   return (

diff --git a/frontend/components/Main/MainOlasBalance.tsx b/frontend/components/Main/MainOlasBalance.tsx
@@ -132,7 +132,7 @@ const LowTradingBalanceAlert = () => {
               Trading balance is too low
             </Title>
             <Text>
-              {`To run your agent, add at least $${LOW_BALANCE - 0.5} XDAI to your account.`}
+              {`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

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 = 3;
+export const LOW_BALANCE = 2;
diff --git a/frontend/context/BalanceProvider.tsx b/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_BALANCE } from '@/constants/thresholds';
 import { TOKENS } from '@/constants/tokens';
 import { ServiceRegistryL2ServiceState } from '@/enums/ServiceRegistryL2ServiceState';
 import { Token } from '@/enums/Token';
@@ -41,6 +42,8 @@ export const BalanceContext = createContext<{
   olasDepositBalance?: number;
   eoaBalance?: ValueOf<WalletAddressNumberRecord>;
   safeBalance?: ValueOf<WalletAddressNumberRecord>;
+  /** If the safe balance is below the threshold (LOW_BALANCE) */
+  isSafeBalanceBelowThreshold: boolean;
   totalEthBalance?: number;
   totalOlasBalance?: number;
   wallets?: Wallet[];
@@ -56,6 +59,7 @@ export const BalanceContext = createContext<{
   olasDepositBalance: undefined,
   eoaBalance: undefined,
   safeBalance: undefined,
+  isSafeBalanceBelowThreshold: true,
   totalEthBalance: undefined,
   totalOlasBalance: undefined,
   wallets: undefined,
@@ -195,6 +199,9 @@ export const BalanceProvider = ({ children }: PropsWithChildren) => {
     () => masterSafeAddress && walletBalances[masterSafeAddress],
     [masterSafeAddress, walletBalances],
   );
+  const isSafeBalanceBelowThreshold = safeBalance
+    ? safeBalance.ETH < LOW_BALANCE
+    : false;
 
   useInterval(
     () => {
@@ -213,6 +220,7 @@ export const BalanceProvider = ({ children }: PropsWithChildren) => {
         olasDepositBalance,
         eoaBalance,
         safeBalance,
+        isSafeBalanceBelowThreshold,
         totalEthBalance,
         totalOlasBalance,
         wallets,

diff --git a/frontend/hooks/useBalance.ts b/frontend/hooks/useBalance.ts
@@ -9,6 +9,7 @@ export const useBalance = () => {
     isBalanceLoaded,
     eoaBalance,
     safeBalance,
+    isSafeBalanceBelowThreshold,
     totalEthBalance,
     totalOlasBalance,
     wallets,
@@ -24,6 +25,7 @@ export const useBalance = () => {
     isBalanceLoaded,
     eoaBalance,
     safeBalance,
+    isSafeBalanceBelowThreshold,
     totalEthBalance,
     totalOlasBalance,
     wallets,
-Original file line number
+Diff line change
@@ Expand Up / @@ -7,4 +7,4 @@ export const MIN_ETH_BALANCE_THRESHOLDS = { @@
       },
     };
-    export const LOW_BALANCE = 3;
+    export const LOW_BALANCE = 2;