diff --git a/frontend/components/Main/MainHeader/CannotStartAgent.tsx b/frontend/components/Main/MainHeader/CannotStartAgent.tsx index 72921d94f..cb620c449 100644 --- a/frontend/components/Main/MainHeader/CannotStartAgent.tsx +++ b/frontend/components/Main/MainHeader/CannotStartAgent.tsx @@ -67,13 +67,13 @@ const NoJobsAvailablePopover = () => ( export const CannotStartAgent = () => { const { - canStartAgent, + isEligibleForStakingAction, hasEnoughServiceSlots, isRewardsAvailable, isAgentEvicted, } = useStakingContractInfo(); - if (canStartAgent) return null; + if (isEligibleForStakingAction) return null; if (!hasEnoughServiceSlots) return ; if (!isRewardsAvailable) return ; if (isAgentEvicted) return ; diff --git a/frontend/components/Main/MainHeader/index.tsx b/frontend/components/Main/MainHeader/index.tsx index 5423eea26..8942363f8 100644 --- a/frontend/components/Main/MainHeader/index.tsx +++ b/frontend/components/Main/MainHeader/index.tsx @@ -1,5 +1,13 @@ import { InfoCircleOutlined } from '@ant-design/icons'; -import { Badge, Button, Flex, Popover, Skeleton, Typography } from 'antd'; +import { + Badge, + Button, + ButtonProps, + Flex, + Popover, + Skeleton, + Typography, +} from 'antd'; import Image from 'next/image'; import { useCallback, useEffect, useMemo, useState } from 'react'; @@ -86,8 +94,11 @@ export const MainHeader = () => { const [isModalOpen, setIsModalOpen] = useState(false); const handleModalClose = useCallback(() => setIsModalOpen(false), []); - const { isInitialStakingLoad, isAgentEvicted, canStartAgent } = - useStakingContractInfo(); + const { + isInitialStakingLoad, + isEligibleForStakingAction, + canStartEvictedAgent, + } = useStakingContractInfo(); // hook to setup tray icon useSetupTrayIcon(); @@ -208,16 +219,6 @@ export const MainHeader = () => { }, [services, setServiceStatus]); const serviceToggleButton = useMemo(() => { - if (!canStartAgent) return ; - - if (canStartAgent && isAgentEvicted) { - return ( - - ); - } - if (serviceButtonState === ServiceButtonLoadingState.Pausing) { return ( - ); - } + const buttonProps: ButtonProps = { + type: 'primary', + size: 'large', + disabled: !isDeployable, + onClick: isDeployable ? handleStart : undefined, + }; + const buttonText = `Start agent ${serviceExists ? '' : '& stake'}`; - return ( - - ); + return ; }, [ handlePause, handleStart, @@ -305,8 +301,8 @@ export const MainHeader = () => { services, storeState?.isInitialFunded, totalEthBalance, - canStartAgent, - isAgentEvicted, + isEligibleForStakingAction, + canStartEvictedAgent, ]); return ( diff --git a/frontend/context/StakingContractInfoProvider.tsx b/frontend/context/StakingContractInfoProvider.tsx index c5b86e3eb..dc2b65c2c 100644 --- a/frontend/context/StakingContractInfoProvider.tsx +++ b/frontend/context/StakingContractInfoProvider.tsx @@ -18,8 +18,9 @@ type StakingContractInfoContextProps = { isInitialStakingLoad: boolean; isRewardsAvailable: boolean; hasEnoughServiceSlots: boolean; - isAgentEvicted: boolean; // TODO: Implement this - canStartAgent: boolean; + isAgentEvicted: boolean; + isEligibleForStakingAction: boolean; + canStartEvictedAgent: boolean; }; export const StakingContractInfoContext = @@ -29,7 +30,8 @@ export const StakingContractInfoContext = isRewardsAvailable: false, hasEnoughServiceSlots: false, isAgentEvicted: false, - canStartAgent: false, + isEligibleForStakingAction: false, + canStartEvictedAgent: false, }); export const StakingContractInfoProvider = ({ @@ -42,7 +44,7 @@ export const StakingContractInfoProvider = ({ const [isRewardsAvailable, setIsRewardsAvailable] = useState(false); const [hasEnoughServiceSlots, setHasEnoughServiceSlots] = useState(false); const [isAgentEvicted, setIsAgentEvicted] = useState(false); - const [canStartAgent, setCanStartAgent] = useState(false); + const [isEligibleForStakingAction, setCanStartAgent] = useState(false); const updateStakingContractInfo = useCallback(async () => { try { @@ -87,13 +89,13 @@ export const StakingContractInfoProvider = ({ * - service has enough slots * - if agent is evicted, then service should be staked for minimum duration */ - const canStartAgent = + const isEligibleForStakingAction = hasEnoughRewardsAndSlots && (isAgentEvicted ? isServiceStakedForMinimumDuration : true); setIsRewardsAvailable(isRewardsAvailable); setHasEnoughServiceSlots(hasEnoughServiceSlots); - setCanStartAgent(canStartAgent); + setCanStartAgent(isEligibleForStakingAction); setIsAgentEvicted(isAgentEvicted); setStakingLoadCount((prev) => prev + 1); } catch (error) { @@ -111,7 +113,8 @@ export const StakingContractInfoProvider = ({ isRewardsAvailable, hasEnoughServiceSlots, isAgentEvicted, - canStartAgent, + isEligibleForStakingAction, + canStartEvictedAgent: isEligibleForStakingAction && isAgentEvicted, }} > {children}