Merge remote-tracking branch 'origin/main' into resume-funding

valory-xyz · Mar 7, 2024 · 9c3b7c4 · 9c3b7c4
2 parents 32ec04d + 3f64953
commit 9c3b7c4
Showing 1 changed file with 49 additions and 54 deletions.
diff --git a/frontend/components/YourAgents/ServiceCard/ServiceCard.tsx b/frontend/components/YourAgents/ServiceCard/ServiceCard.tsx
@@ -7,6 +7,7 @@ import {
   Spin,
   message,
   Tooltip,
+  Popconfirm,
 } from 'antd';
 import { green } from '@ant-design/colors';
 import Image from 'next/image';
@@ -35,8 +36,14 @@ type ServiceCardProps = {
 };
 
 export const ServiceCard = ({ service }: ServiceCardProps) => {
-  const { deleteServiceState } = useServices();
-  const { getServiceTemplates } = useServiceTemplates();
+  const {
+    stopService,
+    deployService,
+    deleteServices,
+    getServiceStatus,
+    deleteServiceState,
+  } = useServices();
+  const { getServiceTemplate } = useServiceTemplates();
 
   const [serviceStatus, setServiceStatus] = useState<
     DeploymentStatus | undefined
@@ -106,72 +113,60 @@ export const ServiceCard = ({ service }: ServiceCardProps) => {
       });
   }, [deleteServiceState, isDeleting, service.hash]);
 
-  const buttons: JSX.Element = useMemo(() => {
-    if (serviceStatus === DeploymentStatus.CREATED)
-      return (
-        <Button
-          danger
-          onClick={handleDelete}
-          disabled={isDeleting}
-          loading={isDeleting}
-        >
-          Delete this agent
+  const buttons = useMemo(
+    () => ({
+      start: (
+        <Button type="primary" onClick={handleStart} loading={isStarting}>
+          Start this agent
         </Button>
-      );
-    if (serviceStatus === DeploymentStatus.DEPLOYED) {
-      return (
-        <Button
-          danger
-          onClick={handleStop}
-          disabled={isStopping}
-          loading={isStopping}
-        >
+      ),
+      stop: (
+        <Button danger onClick={handleStop} loading={isStopping}>
           Stop this agent
         </Button>
-      );
-    }
+      ),
+      delete: (
+        <Popconfirm
+          title="Delete service"
+          description={
+            <>
+              Are you sure you want to delete this service?
+              <br />
+              Your agent&apos;s private keys will be lost.
+            </>
+          }
+          placement="leftBottom"
+          onConfirm={handleDelete}
+        >
+          <Button danger loading={isDeleting}>
+            Delete this agent
+          </Button>
+        </Popconfirm>
+      ),
+    }),
+    [handleDelete, handleStart, handleStop, isDeleting, isStarting, isStopping],
+  );
+
+  const buttonsToDisplay: JSX.Element = useMemo(() => {
+    if (serviceStatus === DeploymentStatus.CREATED) return buttons.delete;
+    if (serviceStatus === DeploymentStatus.DEPLOYED) return buttons.stop;
     if (
       serviceStatus === DeploymentStatus.STOPPED ||
       serviceStatus === DeploymentStatus.BUILT
     ) {
       return (
         <Flex gap={16}>
-          <Button
-            type="primary"
-            onClick={handleStart}
-            disabled={isStarting}
-            loading={isStarting}
-          >
-            Start this agent
-          </Button>
-          <Button
-            danger
-            onClick={handleDelete}
-            disabled={isDeleting}
-            loading={isDeleting}
-          >
-            Delete this agent
-          </Button>
+          {buttons.start}
+          {buttons.delete}
         </Flex>
       );
     }
     return <Spin />;
-  }, [
-    handleDelete,
-    handleStart,
-    handleStop,
-    isDeleting,
-    isStarting,
-    isStopping,
-    serviceStatus,
-  ]);
+  }, [buttons.delete, buttons.start, buttons.stop, serviceStatus]);
 
   const serviceTemplate: ServiceTemplate | undefined = useMemo(
-    () =>
-      getServiceTemplates().find(
-        (serviceTemplate) => serviceTemplate.hash === service.hash,
-      ),
-    [getServiceTemplates, service.hash],
+    () => getServiceTemplate(service.hash),
+    [getServiceTemplate, service.hash],
   );
 
   const showRpc = useMemo(
@@ -217,7 +212,7 @@ export const ServiceCard = ({ service }: ServiceCardProps) => {
             </Flex>
             {isRpcValid && <ServiceCardTotalBalance service={service} />}
           </Flex>
-          <Flex style={{ marginTop: 'auto' }}>{buttons}</Flex>
+          <Flex style={{ marginTop: 'auto' }}>{buttonsToDisplay}</Flex>
         </Flex>
       </Flex>
     </Card>