feat: Disable the staking contract button if the balance is low.

frontend/components/MainPage/sections/NeedsFundsSection.tsx

@@ -1,16 +1,11 @@
 import { Flex, Typography } from 'antd';
-import { formatUnits } from 'ethers/lib/utils';
 import { ReactNode, useEffect, useMemo } from 'react';
 import styled from 'styled-components';
 
 import { CustomAlert } from '@/components/Alert';
-import { CHAINS } from '@/constants/chains';
 import { UNICODE_SYMBOLS } from '@/constants/symbols';
-import { useBalance } from '@/hooks/useBalance';
 import { useElectronApi } from '@/hooks/useElectronApi';
-import { useServiceTemplates } from '@/hooks/useServiceTemplates';
-import { useStore } from '@/hooks/useStore';
-import { getMinimumStakedAmountRequired } from '@/utils/service';
+import { useNeedsFunds } from '@/hooks/useNeedsFunds';
 
 import { CardSection } from '../../styled/CardSection';
 
@@ -24,87 +19,17 @@ const FundingValue = styled.div`
   letter-spacing: -0.72px;
 `;
 
-const useNeedsFunds = () => {
-  const { getServiceTemplates } = useServiceTemplates();
-
-  const serviceTemplate = useMemo(
-    () => getServiceTemplates()[0],
-    [getServiceTemplates],
-  );
-
-  const { storeState } = useStore();
-  const { safeBalance, totalOlasStakedBalance } = useBalance();
-
-  const isInitialFunded = storeState?.isInitialFunded;
-
-  const serviceFundRequirements = useMemo(() => {
-    const monthlyGasEstimate = Number(
-      formatUnits(
-        `${serviceTemplate.configurations[CHAINS.GNOSIS.chainId].monthly_gas_estimate}`,
-        18,
-      ),
-    );
-
-    const minimumStakedAmountRequired =
-      getMinimumStakedAmountRequired(serviceTemplate);
-
-    return {
-      eth: monthlyGasEstimate,
-      olas: minimumStakedAmountRequired,
-    };
-  }, [serviceTemplate]);
-
-  const hasEnoughEthForInitialFunding = useMemo(
-    () => (safeBalance?.ETH || 0) >= (serviceFundRequirements?.eth || 0),
-    [serviceFundRequirements?.eth, safeBalance],
-  );
-
-  const hasEnoughOlasForInitialFunding = useMemo(() => {
-    const olasInSafe = safeBalance?.OLAS || 0;
-    const olasStakedBySafe = totalOlasStakedBalance || 0;
-    const olasRequiredToFundService = serviceFundRequirements.olas || 0;
-
-    const olasInSafeAndStaked = olasInSafe + olasStakedBySafe;
-
-    return olasInSafeAndStaked >= olasRequiredToFundService;
-  }, [
-    safeBalance?.OLAS,
-    totalOlasStakedBalance,
-    serviceFundRequirements?.olas,
-  ]);
-
-  return {
-    hasEnoughEthForInitialFunding,
-    hasEnoughOlasForInitialFunding,
-    serviceFundRequirements,
-    isInitialFunded,
-  };
-};
-
 export const MainNeedsFunds = () => {
-  const { isBalanceLoaded } = useBalance();
   const {
     hasEnoughEthForInitialFunding,
     hasEnoughOlasForInitialFunding,
     serviceFundRequirements,
     isInitialFunded,
+    needsInitialFunding,
   } = useNeedsFunds();
 
   const electronApi = useElectronApi();
 
-  const isVisible: boolean = useMemo(() => {
-    if (isInitialFunded) return false;
-    if (!isBalanceLoaded) return false;
-    if (hasEnoughEthForInitialFunding && hasEnoughOlasForInitialFunding)
-      return false;
-    return true;
-  }, [
-    hasEnoughEthForInitialFunding,
-    hasEnoughOlasForInitialFunding,
-    isBalanceLoaded,
-    isInitialFunded,
-  ]);
-
   const message: ReactNode = useMemo(
     () => (
       <Flex vertical gap={16}>
@@ -153,7 +78,7 @@ export const MainNeedsFunds = () => {
     isInitialFunded,
   ]);
 
-  if (!isVisible) return null;
+  if (!needsInitialFunding) return null;
 
   return (
     <CardSection style={COVER_PREV_BLOCK_BORDER_STYLE}>

frontend/components/MainPage/sections/StakingContractUpdate.tsx

@@ -1,8 +1,11 @@
 import { RightOutlined } from '@ant-design/icons';
-import { Button, Flex, Skeleton, Typography } from 'antd';
+import { Button, Flex, Popover, Skeleton, Typography } from 'antd';
+import { useMemo } from 'react';
 
 import { STAKING_PROGRAM_META } from '@/constants/stakingProgramMeta';
 import { Pages } from '@/enums/PageState';
+import { useBalance } from '@/hooks/useBalance';
+import { useNeedsFunds } from '@/hooks/useNeedsFunds';
 import { usePageState } from '@/hooks/usePageState';
 import { useStakingProgram } from '@/hooks/useStakingProgram';
 
@@ -12,12 +15,46 @@ const { Text } = Typography;
 
 export const StakingContractUpdate = () => {
   const { goto } = usePageState();
+  const { isBalanceLoaded, isLowBalance } = useBalance();
+  const { needsInitialFunding } = useNeedsFunds();
   const {
     activeStakingProgramMeta,
     isLoadedActiveStakingProgram,
     defaultStakingProgram,
   } = useStakingProgram();
 
+  const stakingContractName = useMemo(() => {
+    if (activeStakingProgramMeta) return activeStakingProgramMeta.name;
+    return STAKING_PROGRAM_META[defaultStakingProgram].name;
+  }, [activeStakingProgramMeta, defaultStakingProgram]);
+
+  const canUpdateStakingContract = useMemo(() => {
+    if (!isBalanceLoaded) return false;
+    if (isLowBalance) return false;
+    if (needsInitialFunding) return false;
+    return true;
+  }, [isBalanceLoaded, isLowBalance, needsInitialFunding]);
+
+  const stakingButton = useMemo(() => {
+    if (!isLoadedActiveStakingProgram) return <Skeleton.Input />;
+    return (
+      <Button
+        type="link"
+        className="p-0"
+        disabled={!canUpdateStakingContract}
+        onClick={() => goto(Pages.ManageStaking)}
+      >
+        {stakingContractName}
+        <RightOutlined />
+      </Button>
+    );
+  }, [
+    goto,
+    isLoadedActiveStakingProgram,
+    stakingContractName,
+    canUpdateStakingContract,
+  ]);
+
   return (
     <CardSection bordertop="true" padding="16px 24px">
       <Flex
@@ -28,24 +65,17 @@ export const StakingContractUpdate = () => {
       >
         <Text type="secondary">Staking contract</Text>
 
-        {isLoadedActiveStakingProgram ? (
-          <Button
-            type="link"
-            className="p-0"
-            onClick={() => goto(Pages.ManageStaking)}
-          >
-            {activeStakingProgramMeta ? (
-              <>
-                {activeStakingProgramMeta.name}
-                &nbsp;
-                <RightOutlined />
-              </>
-            ) : (
-              STAKING_PROGRAM_META[defaultStakingProgram].name
-            )}
-          </Button>
+        {canUpdateStakingContract ? (
+          stakingButton
         ) : (
-          <Skeleton.Input />
+          <Popover
+            placement="topLeft"
+            trigger={['hover']}
+            arrow={false}
+            content={<Text>Fund your agent to manage staking contracts</Text>}
+          >
+            {stakingButton}
+          </Popover>
         )}
       </Flex>
     </CardSection>

frontend/hooks/useNeedsFunds.ts

@@ -0,0 +1,71 @@
+import { formatUnits } from 'ethers/lib/utils';
+import { useMemo } from 'react';
+
+import { CHAINS } from '@/constants/chains';
+import { getMinimumStakedAmountRequired } from '@/utils/service';
+
+import { useBalance } from './useBalance';
+import { useServiceTemplates } from './useServiceTemplates';
+import { useStore } from './useStore';
+
+export const useNeedsFunds = () => {
+  const { getServiceTemplates } = useServiceTemplates();
+
+  const serviceTemplate = useMemo(
+    () => getServiceTemplates()[0],
+    [getServiceTemplates],
+  );
+
+  const { storeState } = useStore();
+  const { isBalanceLoaded, safeBalance, totalOlasStakedBalance } = useBalance();
+
+  const serviceFundRequirements = useMemo(() => {
+    const gasEstimate =
+      serviceTemplate.configurations[CHAINS.GNOSIS.chainId]
+        .monthly_gas_estimate;
+    const monthlyGasEstimate = Number(formatUnits(`${gasEstimate}`, 18));
+    const minimumStakedAmountRequired =
+      getMinimumStakedAmountRequired(serviceTemplate);
+
+    return { eth: monthlyGasEstimate, olas: minimumStakedAmountRequired };
+  }, [serviceTemplate]);
+
+  const hasEnoughEthForInitialFunding = useMemo(
+    () => (safeBalance?.ETH || 0) >= (serviceFundRequirements?.eth || 0),
+    [serviceFundRequirements?.eth, safeBalance],
+  );
+
+  const hasEnoughOlasForInitialFunding = useMemo(() => {
+    const olasInSafe = safeBalance?.OLAS || 0;
+    const olasStakedBySafe = totalOlasStakedBalance || 0;
+    const olasRequiredToFundService = serviceFundRequirements.olas || 0;
+    const olasInSafeAndStaked = olasInSafe + olasStakedBySafe;
+    return olasInSafeAndStaked >= olasRequiredToFundService;
+  }, [
+    safeBalance?.OLAS,
+    totalOlasStakedBalance,
+    serviceFundRequirements?.olas,
+  ]);
+
+  const isInitialFunded = storeState?.isInitialFunded;
+  const needsInitialFunding: boolean = useMemo(() => {
+    if (isInitialFunded) return false;
+    if (!isBalanceLoaded) return false;
+    if (hasEnoughEthForInitialFunding && hasEnoughOlasForInitialFunding)
+      return false;
+    return true;
+  }, [
+    hasEnoughEthForInitialFunding,
+    hasEnoughOlasForInitialFunding,
+    isBalanceLoaded,
+    isInitialFunded,
+  ]);
+
+  return {
+    hasEnoughEthForInitialFunding,
+    hasEnoughOlasForInitialFunding,
+    serviceFundRequirements,
+    isInitialFunded,
+    needsInitialFunding,
+  };
+};