Fix "needs funds" Alert visibility

frontend/components/Main/MainHeader.tsx

@@ -33,12 +33,18 @@ export const MainHeader = () => {
   const { wallets, masterSafeAddress } = useWallet();
   const {
     safeBalance,
-    totalOlasBalance,
+    totalOlasStakedBalance,
     totalEthBalance,
     isBalanceLoaded,
     setIsPaused: setIsBalancePollingPaused,
   } = useBalance();
 
+  const safeOlasBalanceWithStaked = useMemo(() => {
+    if (safeBalance?.OLAS === undefined) return;
+    if (totalOlasStakedBalance === undefined) return;
+    return totalOlasStakedBalance + safeBalance.OLAS;
+  }, [safeBalance?.OLAS, totalOlasStakedBalance]);
+
   const [serviceButtonState, setServiceButtonState] =
     useState<ServiceButtonLoadingState>(ServiceButtonLoadingState.NotLoading);
 
@@ -226,7 +232,7 @@ export const MainHeader = () => {
     const isDeployable = (() => {
       // case where required values are undefined (not fetched from the server)
       if (totalEthBalance === undefined) return false;
-      if (totalOlasBalance === undefined) return false;
+      if (safeOlasBalanceWithStaked === undefined) return false;
       if (!services) return false;
 
       // deployment statuses where agent should not be deployed
@@ -236,9 +242,12 @@ export const MainHeader = () => {
 
       // case where service exists & user has initial funded
       if (services[0] && storeState?.isInitialFunded)
-        return totalOlasBalance >= requiredOlas; // at present agent will always require staked/bonded OLAS
+        return safeOlasBalanceWithStaked >= requiredOlas; // at present agent will always require staked/bonded OLAS (or the ability to stake/bond)
 
-      return totalOlasBalance >= requiredOlas && totalEthBalance > requiredGas;
+      return (
+        safeOlasBalanceWithStaked >= requiredOlas &&
+        totalEthBalance > requiredGas
+      );
     })();
 
     if (!isDeployable) {
@@ -258,12 +267,12 @@ export const MainHeader = () => {
     handlePause,
     handleStart,
     isBalanceLoaded,
+    safeOlasBalanceWithStaked,
     serviceButtonState,
     serviceStatus,
     services,
     storeState?.isInitialFunded,
     totalEthBalance,
-    totalOlasBalance,
   ]);
 
   return (

frontend/components/Main/MainNeedsFunds.tsx

@@ -17,7 +17,7 @@ const COVER_PREV_BLOCK_BORDER_STYLE = { marginTop: '-1px' };
 const useNeedsFunds = () => {
   const serviceTemplate = SERVICE_TEMPLATES[0];
   const { storeState } = useStore();
-  const { safeBalance } = useBalance();
+  const { safeBalance, totalOlasStakedBalance } = useBalance();
 
   const isInitialFunded = storeState?.isInitialFunded;
 
@@ -44,19 +44,27 @@ const useNeedsFunds = () => {
     serviceTemplate.configuration.olas_required_to_stake,
   ]);
 
-  const hasEnoughEth = useMemo(
+  const hasEnoughEthForInitialFunding = useMemo(
     () => (safeBalance?.ETH || 0) >= (serviceFundRequirements?.eth || 0),
     [serviceFundRequirements?.eth, safeBalance],
   );
 
-  const hasEnoughOlas = useMemo(
-    () => (safeBalance?.OLAS || 0) >= (serviceFundRequirements?.olas || 0),
-    [serviceFundRequirements?.olas, safeBalance],
-  );
+  const hasEnoughOlasForInitialFunding = useMemo(() => {
+    const olasInSafe = safeBalance?.OLAS || 0;
+    const olasStakedBySafe = totalOlasStakedBalance || 0;
+
+    const olasInSafeAndStaked = olasInSafe + olasStakedBySafe;
+
+    return olasInSafeAndStaked >= serviceFundRequirements.olas;
+  }, [
+    safeBalance?.OLAS,
+    totalOlasStakedBalance,
+    serviceFundRequirements?.olas,
+  ]);
 
   return {
-    hasEnoughEth,
-    hasEnoughOlas,
+    hasEnoughEthForInitialFunding,
+    hasEnoughOlasForInitialFunding,
     serviceFundRequirements,
     isInitialFunded,
   };
@@ -65,8 +73,8 @@ const useNeedsFunds = () => {
 export const MainNeedsFunds = () => {
   const { isBalanceLoaded } = useBalance();
   const {
-    hasEnoughEth,
-    hasEnoughOlas,
+    hasEnoughEthForInitialFunding,
+    hasEnoughOlasForInitialFunding,
     serviceFundRequirements,
     isInitialFunded,
   } = useNeedsFunds();
@@ -76,9 +84,15 @@ export const MainNeedsFunds = () => {
   const isVisible: boolean = useMemo(() => {
     if (isInitialFunded) return false;
     if (!isBalanceLoaded) return false;
-    if (hasEnoughEth && hasEnoughOlas) return false;
+    if (hasEnoughEthForInitialFunding && hasEnoughOlasForInitialFunding)
+      return false;
     return true;
-  }, [hasEnoughEth, hasEnoughOlas, isBalanceLoaded, isInitialFunded]);
+  }, [
+    hasEnoughEthForInitialFunding,
+    hasEnoughOlasForInitialFunding,
+    isBalanceLoaded,
+    isInitialFunded,
+  ]);
 
   const message: ReactNode = useMemo(
     () => (
@@ -91,13 +105,13 @@ export const MainNeedsFunds = () => {
         <Paragraph className="mb-4">
           To run your agent, you must add these amounts to your account:
         </Paragraph>
-        {!hasEnoughOlas && (
+        {!hasEnoughOlasForInitialFunding && (
           <Text>
             <span className="font-weight-600">{`${UNICODE_SYMBOLS.OLAS}${serviceFundRequirements.olas} OLAS `}</span>
             - for staking.
           </Text>
         )}
-        {!hasEnoughEth && (
+        {!hasEnoughEthForInitialFunding && (
           <Text>
             <span className="font-weight-600">
               {`${serviceFundRequirements.eth} XDAI `}
@@ -107,14 +121,27 @@ export const MainNeedsFunds = () => {
         )}
       </Flex>
     ),
-    [serviceFundRequirements, hasEnoughEth, hasEnoughOlas],
+    [
+      serviceFundRequirements,
+      hasEnoughEthForInitialFunding,
+      hasEnoughOlasForInitialFunding,
+    ],
   );
 
   useEffect(() => {
-    if (hasEnoughEth && hasEnoughOlas && !isInitialFunded) {
+    if (
+      hasEnoughEthForInitialFunding &&
+      hasEnoughOlasForInitialFunding &&
+      !isInitialFunded
+    ) {
       electronApi.store?.set?.('isInitialFunded', true);
     }
-  }, [electronApi.store, hasEnoughEth, hasEnoughOlas, isInitialFunded]);
+  }, [
+    electronApi.store,
+    hasEnoughEthForInitialFunding,
+    hasEnoughOlasForInitialFunding,
+    isInitialFunded,
+  ]);
 
   if (!isVisible) return null;