chore: add dummy components for Eviction cases

frontend/components/Main/MainHeader/index.tsx

@@ -19,6 +19,7 @@ import { WalletService } from '@/service/Wallet';
 
 import { requiredGas, requiredOlas } from './constants';
 import { FirstRunModal } from './FirstRunModal';
+import { useEviction } from './useEviction';
 
 const { Text } = Typography;
 
@@ -81,6 +82,7 @@ export const MainHeader = () => {
     isBalanceLoaded,
     setIsPaused: setIsBalancePollingPaused,
   } = useBalance();
+  const { isEvicted, component } = useEviction();
 
   const [isModalOpen, setIsModalOpen] = useState(false);
   const handleModalClose = useCallback(() => setIsModalOpen(false), []);
@@ -206,6 +208,8 @@ export const MainHeader = () => {
   }, [services, setServiceStatus]);
 
   const serviceToggleButton = useMemo(() => {
+    if (isEvicted) return component;
+
     if (serviceButtonState === ServiceButtonLoadingState.Pausing) {
       return (
         <Button type="default" size="large" ghost disabled loading>
@@ -294,6 +298,8 @@ export const MainHeader = () => {
     storeState?.isInitialFunded,
     totalEthBalance,
     canStartAgent,
+    isEvicted,
+    component,
   ]);
 
   return (

frontend/components/Main/MainHeader/useEviction.tsx

@@ -1,6 +1,78 @@
-// hook to check if the agent is evicted
+import { InfoCircleOutlined } from '@ant-design/icons';
+import { Button, Flex, Popover, Typography } from 'antd';
+
+import { COLOR } from '@/constants/colors';
+
+const { Text } = Typography;
+
+const AgentCannotUnstake = () => (
+  <Popover
+    trigger={['hover', 'click']}
+    placement="bottomLeft"
+    showArrow={false}
+    content={
+      <Flex vertical={false} gap={8} style={{ maxWidth: 260 }}>
+        <Text>
+          <InfoCircleOutlined style={{ color: COLOR.BLUE }} />
+        </Text>
+        {/* TODO: ask copy from Roman */}
+        <Text>
+          Agent cannot be staked until some date from backend or calculate in UI
+        </Text>
+      </Flex>
+    }
+  >
+    <Button type="default" size="large" disabled loading>
+      Start agent
+    </Button>
+  </Popover>
+);
+
+const CanStartAgent = () => {
+  const handleStartAgent = () => null; // TODO
+
+  return (
+    <Popover
+      trigger={['hover', 'click']}
+      placement="bottomLeft"
+      showArrow={false}
+      content={
+        <Flex vertical={false} gap={8} style={{ maxWidth: 260 }}>
+          <Text>
+            <InfoCircleOutlined style={{ color: COLOR.BLUE }} />
+          </Text>
+          {/* TODO: ask copy from Roman */}
+          <Text>Agent can be staked</Text>
+        </Flex>
+      }
+    >
+      <Button type="primary" size="large" onClick={handleStartAgent}>
+        Unstake and start agent
+      </Button>
+    </Popover>
+  );
+};
 
 export const useEviction = () => {
+  const isEvicted = true; // TODO
+  const isMinStakingDurationMet = true; // TODO
+
+  if (isEvicted) {
+    if (isMinStakingDurationMet) {
+      return {
+        isEvicted: true,
+        canStartAgent: true,
+        component: <CanStartAgent />,
+      };
+    }
+
+    return {
+      isEvicted: true,
+      canStartAgent: false,
+      component: <AgentCannotUnstake />,
+    };
+  }
+
   // scenario 1: agent is evicted and min staking duration is NOT met
   // ie, user CANNOT start the agent
 
@@ -17,6 +89,6 @@ export const useEviction = () => {
   return {
     isEvicted: false,
     canStartAgent: true,
-    message: null,
+    component: null,
   };
 };