feat: Add canStartAgent check to MainHeader component

valory-xyz · May 31, 2024 · df6c489 · df6c489
1 parent 1cafb91
commit df6c489
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 5 deletions.
diff --git a/frontend/components/Main/MainHeader.tsx b/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 (

diff --git a/frontend/components/store/stackingContractInfo.ts b/frontend/components/store/stackingContractInfo.ts
@@ -6,13 +6,15 @@ const initialState = {
   isStakingContractInfoLoading: true,
   isRewardsAvailable: false,
   hasEnoughServiceSlots: false,
+  canStartAgent: false,
   maxNumServices: 0,
 };
 
 export const useStakingContractInfo = create<{
   isStakingContractInfoLoading: boolean;
   isRewardsAvailable: boolean;
   hasEnoughServiceSlots: boolean;
+  canStartAgent: boolean;
   fetchStakingContractInfo: () => Promise<void>;
   maxNumServices: number;
 }>((set) => {
@@ -31,13 +33,15 @@ export const useStakingContractInfo = create<{
         if (!info) return;
 
         const { availableRewards, maxNumServices, getServiceIds } = info;
+        const isRewardsAvailable = availableRewards > 0;
+        const hasEnoughServiceSlots = getServiceIds.length < maxNumServices;
+        const canStartAgent = isRewardsAvailable && hasEnoughServiceSlots;
 
         set({
-          // availableRewards,
           maxNumServices,
-          // getServiceIds,
-          isRewardsAvailable: availableRewards > 0,
-          hasEnoughServiceSlots: getServiceIds.length < maxNumServices,
+          isRewardsAvailable,
+          hasEnoughServiceSlots,
+          canStartAgent,
         });
       } catch (error) {
         console.error('Failed to fetch staking contract info', error);