feat: Add checks against contract no funds and full slots cases

frontend/components/Main/Main.tsx

@@ -12,6 +12,7 @@ import { MainHeader } from './MainHeader';
 import { MainNeedsFunds } from './MainNeedsFunds';
 import { MainOlasBalance } from './MainOlasBalance';
 import { MainRewards } from './MainRewards';
+import { StakingValidations } from './StakingValidations';
 
 export const Main = () => {
   const { goto } = usePageState();
@@ -40,6 +41,7 @@ export const Main = () => {
       style={{ borderTopColor: 'transparent' }}
     >
       <Flex vertical>
+        <StakingValidations />
         <MainOlasBalance />
         <MainRewards />
         <KeepAgentRunning />

frontend/components/Main/MainHeader.tsx

@@ -14,6 +14,8 @@ import { useWallet } from '@/hooks/useWallet';
 import { ServicesService } from '@/service';
 import { WalletService } from '@/service/Wallet';
 
+import { useStakingContractInfo } from '../store/stackingContractInfo';
+
 const { Text } = Typography;
 
 const LOADING_MESSAGE =
@@ -38,6 +40,7 @@ export const MainHeader = () => {
     isBalanceLoaded,
     setIsPaused: setIsBalancePollingPaused,
   } = useBalance();
+  const { canStartAgent } = useStakingContractInfo();
 
   const safeOlasBalanceWithStaked = useMemo(() => {
     if (safeBalance?.OLAS === undefined) return;
@@ -259,7 +262,12 @@ export const MainHeader = () => {
     }
 
     return (
-      <Button type="primary" size="large" onClick={handleStart}>
+      <Button
+        type="primary"
+        size="large"
+        onClick={handleStart}
+        disabled={!canStartAgent}
+      >
         Start agent
       </Button>
     );
@@ -273,6 +281,7 @@ export const MainHeader = () => {
     services,
     storeState?.isInitialFunded,
     totalEthBalance,
+    canStartAgent,
   ]);
 
   return (

frontend/components/Main/StakingValidations.tsx

@@ -0,0 +1,70 @@
+import { Flex, Typography } from 'antd';
+import { useEffect } from 'react';
+
+import { Alert } from '../common/Alert';
+import { useStakingContractInfo } from '../store/stackingContractInfo';
+import { CardSection } from '../styled/CardSection';
+
+const { Text, Paragraph } = Typography;
+
+const COVER_PREV_BLOCK_BORDER_STYLE = { marginBottom: '-1px' };
+
+export const StakingValidations = () => {
+  const {
+    hasEnoughServiceSlots,
+    isRewardsAvailable,
+    isStakingContractInfoLoading,
+    fetchStakingContractInfo,
+  } = useStakingContractInfo();
+
+  useEffect(() => {
+    fetchStakingContractInfo();
+  }, [fetchStakingContractInfo]);
+
+  if (isStakingContractInfoLoading) return null;
+
+  if (!isRewardsAvailable) {
+    return (
+      <CardSection style={COVER_PREV_BLOCK_BORDER_STYLE}>
+        <Alert
+          showIcon
+          message={
+            <Flex vertical gap={4}>
+              <Text className="font-weight-600 mb-4">No rewards available</Text>
+              <Paragraph className="mb-4">
+                There are no rewards available for staking.
+              </Paragraph>
+            </Flex>
+          }
+          type="error"
+          fullWidth
+        />
+      </CardSection>
+    );
+  }
+
+  if (!hasEnoughServiceSlots) {
+    return (
+      <CardSection style={COVER_PREV_BLOCK_BORDER_STYLE}>
+        <Alert
+          showIcon
+          message={
+            <Flex vertical gap={4}>
+              <Text className="font-weight-600 mb-4">
+                Not enough service slots
+              </Text>
+              <Paragraph className="mb-4">
+                You have reached the maximum number of services allowed for
+                staking.
+              </Paragraph>
+            </Flex>
+          }
+          type="error"
+          fullWidth
+        />
+      </CardSection>
+    );
+  }
+
+  return null;
+};

frontend/components/store/stackingContractInfo.ts

@@ -0,0 +1,47 @@
+import { create } from 'zustand';
+
+import { AutonolasService } from '@/service/Autonolas';
+
+const initialState = {
+  isStakingContractInfoLoading: true,
+  isRewardsAvailable: false,
+  hasEnoughServiceSlots: false,
+  canStartAgent: false,
+};
+
+export const useStakingContractInfo = create<{
+  isStakingContractInfoLoading: boolean;
+  isRewardsAvailable: boolean;
+  hasEnoughServiceSlots: boolean;
+  canStartAgent: boolean;
+  fetchStakingContractInfo: () => Promise<void>;
+}>((set) => {
+  return {
+    ...initialState,
+    isStakingContractInfoLoading: true,
+    isRewardsAvailable: false,
+    fetchStakingContractInfo: async () => {
+      try {
+        set({ isStakingContractInfoLoading: true });
+        const info = await AutonolasService.getStakingContractInfo();
+
+        if (!info) return;
+
+        const { availableRewards, maxNumServices, getServiceIds } = info;
+        const isRewardsAvailable = availableRewards > 0;
+        const hasEnoughServiceSlots = getServiceIds.length < maxNumServices;
+        const canStartAgent = isRewardsAvailable && hasEnoughServiceSlots;
+
+        set({
+          isRewardsAvailable,
+          hasEnoughServiceSlots,
+          canStartAgent,
+        });
+      } catch (error) {
+        console.error('Failed to fetch staking contract info', error);
+      } finally {
+        set({ isStakingContractInfoLoading: false });
+      }
+    },
+  };
+});

frontend/package.json

@@ -14,7 +14,8 @@
     "react-canvas-confetti": "1.2.1",
     "sass": "^1.72.0",
     "styled-components": "^6.1.8",
-    "usehooks-ts": "^2.14.0"
+    "usehooks-ts": "^2.14.0",
+    "zustand": "^4.5.2"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.4.2",

frontend/service/Autonolas.ts

@@ -1,4 +1,4 @@
-import { ethers } from 'ethers';
+import { BigNumber, ethers } from 'ethers';
 import { Contract as MulticallContract } from 'ethers-multicall';
 
 import {
@@ -18,7 +18,7 @@ import {
 } from '@/constants';
 import { gnosisMulticallProvider } from '@/constants/providers';
 import { ServiceRegistryL2ServiceState } from '@/enums';
-import { Address, StakingRewardsInfo } from '@/types';
+import { Address, StakingContractInfo, StakingRewardsInfo } from '@/types';
 
 const REQUIRED_MECH_REQUESTS_SAFETY_MARGIN = 1;
 
@@ -146,6 +146,37 @@ const getAvailableRewardsForEpoch = async (): Promise<number | undefined> => {
   return rewardsPerSecond * livenessPeriod;
 };
 
+/**
+ * function to get the staking contract info
+ */
+const getStakingContractInfo = async (): Promise<
+  StakingContractInfo | undefined
+> => {
+  const contractCalls = [
+    serviceStakingTokenMechUsageContract.availableRewards(),
+    serviceStakingTokenMechUsageContract.maxNumServices(),
+    serviceStakingTokenMechUsageContract.getServiceIds(),
+  ];
+
+  await gnosisMulticallProvider.init();
+
+  const multicallResponse = await gnosisMulticallProvider.all(contractCalls);
+  const [availableRewardsInBN, maxNumServicesInBN, getServiceIdsInBN] =
+    multicallResponse;
+
+  const availableRewards = parseFloat(
+    ethers.utils.formatUnits(availableRewardsInBN, 18),
+  );
+  const getServiceIds = getServiceIdsInBN.map((id: BigNumber) => id.toNumber());
+  const maxNumServices = maxNumServicesInBN.toNumber();
+
+  return {
+    availableRewards,
+    maxNumServices,
+    getServiceIds,
+  };
+};
+
 const getServiceRegistryInfo = async (
   operatorAddress: Address, // generally masterSafeAddress
   serviceId: number,
@@ -188,4 +219,5 @@ export const AutonolasService = {
   getAgentStakingRewardsInfo,
   getAvailableRewardsForEpoch,
   getServiceRegistryInfo,
+  getStakingContractInfo,
 };

frontend/types/Autonolas.ts

@@ -9,3 +9,9 @@ export type StakingRewardsInfo = {
   accruedServiceStakingRewards: number;
   minimumStakedAmount: number;
 };
+
+export type StakingContractInfo = {
+  availableRewards: number;
+  maxNumServices: number;
+  getServiceIds: number[];
+};

frontend/yarn.lock

@@ -5621,6 +5621,7 @@ string-length@^4.0.1:
     strip-ansi "^6.0.0"
 
 "string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+  name string-width-cjs
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -6019,6 +6020,11 @@ url-parse@^1.5.3:
     querystringify "^2.1.1"
     requires-port "^1.0.0"
 
+[email protected]:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
+  integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
+
 usehooks-ts@^2.14.0:
   version "2.16.0"
   resolved "https://registry.yarnpkg.com/usehooks-ts/-/usehooks-ts-2.16.0.tgz#31deaa2f1147f65666aae925bd890b54e63b0d3f"
@@ -6142,6 +6148,7 @@ word-wrap@^1.2.5:
   integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==
 
 "wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+  name wrap-ansi-cjs
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -6229,3 +6236,10 @@ yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
+
+zustand@^4.5.2:
+  version "4.5.2"
+  resolved "https://registry.yarnpkg.com/zustand/-/zustand-4.5.2.tgz#fddbe7cac1e71d45413b3682cdb47b48034c3848"
+  integrity sha512-2cN1tPkDVkwCy5ickKrI7vijSjPksFRfqS6237NzT0vqSsztTNnQdHw9mmN7uBdk3gceVXU0a+21jFzFzAc9+g==
+  dependencies:
+    use-sync-external-store "1.2.0"