From 9628f5fe90f907b368d5e52c777b50c7ac4c8568 Mon Sep 17 00:00:00 2001
From: Josh Miller <mlxndrj@gmail.com>
Date: Mon, 4 Mar 2024 14:52:13 +0000
Subject: [PATCH 1/4] Fix service card buttons and add Popconfirm for delete

---
 .../YourAgents/ServiceCard/ServiceCard.tsx    | 83 +++++++++----------
 1 file changed, 38 insertions(+), 45 deletions(-)

diff --git a/frontend/components/YourAgents/ServiceCard/ServiceCard.tsx b/frontend/components/YourAgents/ServiceCard/ServiceCard.tsx
index 4ef721ba4..d315d02e0 100644
--- 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 Image from 'next/image';
 import { useCallback, useMemo, useState } from 'react';
@@ -40,7 +41,7 @@ export const ServiceCard = ({ service }: ServiceCardProps) => {
     getServiceStatus,
     deleteServiceState,
   } = useServices();
-  const { getServiceTemplates } = useMarketplace();
+  const { getServiceTemplate } = useMarketplace();
   const { checkRpc } = useEthers();
 
   const [serviceStatus, setServiceStatus] = useState<
@@ -128,20 +129,19 @@ export const ServiceCard = ({ service }: ServiceCardProps) => {
       });
   }, [deleteServiceState, deleteServices, isDeleting, service.hash]);
 
-  const buttons: JSX.Element = useMemo(() => {
-    if (serviceStatus === DeploymentStatus.CREATED)
-      return (
+  const buttons = useMemo(
+    () => ({
+      start: (
         <Button
-          danger
-          onClick={handleDelete}
-          disabled={isDeleting}
-          loading={isDeleting}
+          type="primary"
+          onClick={handleStart}
+          disabled={isStarting}
+          loading={isStarting}
         >
-          Delete this agent
+          Start this agent
         </Button>
-      );
-    if (serviceStatus === DeploymentStatus.DEPLOYED) {
-      return (
+      ),
+      stop: (
         <Button
           danger
           onClick={handleStop}
@@ -150,50 +150,43 @@ export const ServiceCard = ({ service }: ServiceCardProps) => {
         >
           Stop this agent
         </Button>
-      );
-    }
+      ),
+      delete: (
+        <Popconfirm
+          title="Delete service"
+          description="Are you sure you want to delete this service?"
+          placement="leftBottom"
+          onConfirm={handleDelete}
+        >
+          <Button danger disabled={isDeleting} 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(
@@ -237,7 +230,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>

From 6fc3eb09a25c9cec14224061dbad9e456d0d45a8 Mon Sep 17 00:00:00 2001
From: Josh Miller <mlxndrj@gmail.com>
Date: Mon, 4 Mar 2024 15:05:12 +0000
Subject: [PATCH 2/4] Update delete service confirmation message

---
 .../components/YourAgents/ServiceCard/ServiceCard.tsx     | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/frontend/components/YourAgents/ServiceCard/ServiceCard.tsx b/frontend/components/YourAgents/ServiceCard/ServiceCard.tsx
index a77c650b6..62a35f173 100644
--- a/frontend/components/YourAgents/ServiceCard/ServiceCard.tsx
+++ b/frontend/components/YourAgents/ServiceCard/ServiceCard.tsx
@@ -136,7 +136,13 @@ export const ServiceCard = ({ service }: ServiceCardProps) => {
       delete: (
         <Popconfirm
           title="Delete service"
-          description="Are you sure you want to delete this 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}
         >

From c39a20ce3c07300a1c377c0b204dd04119923418 Mon Sep 17 00:00:00 2001
From: Josh Miller <mlxndrj@gmail.com>
Date: Wed, 6 Mar 2024 11:09:56 +0000
Subject: [PATCH 3/4] Refactor ServiceCard buttons

---
 .../YourAgents/ServiceCard/ServiceCard.tsx       | 16 +++-------------
 1 file changed, 3 insertions(+), 13 deletions(-)

diff --git a/frontend/components/YourAgents/ServiceCard/ServiceCard.tsx b/frontend/components/YourAgents/ServiceCard/ServiceCard.tsx
index 62a35f173..9ce9ad5a7 100644
--- a/frontend/components/YourAgents/ServiceCard/ServiceCard.tsx
+++ b/frontend/components/YourAgents/ServiceCard/ServiceCard.tsx
@@ -114,22 +114,12 @@ export const ServiceCard = ({ service }: ServiceCardProps) => {
   const buttons = useMemo(
     () => ({
       start: (
-        <Button
-          type="primary"
-          onClick={handleStart}
-          disabled={isStarting}
-          loading={isStarting}
-        >
+        <Button type="primary" onClick={handleStart} loading={isStarting}>
           Start this agent
         </Button>
       ),
       stop: (
-        <Button
-          danger
-          onClick={handleStop}
-          disabled={isStopping}
-          loading={isStopping}
-        >
+        <Button danger onClick={handleStop} loading={isStopping}>
           Stop this agent
         </Button>
       ),
@@ -146,7 +136,7 @@ export const ServiceCard = ({ service }: ServiceCardProps) => {
           placement="leftBottom"
           onConfirm={handleDelete}
         >
-          <Button danger disabled={isDeleting} loading={isDeleting}>
+          <Button danger loading={isDeleting}>
             Delete this agent
           </Button>
         </Popconfirm>

From 3f64953d5c2e4224e00a639ba40faf817ab1d13c Mon Sep 17 00:00:00 2001
From: Josh Miller <mlxndrj@gmail.com>
Date: Wed, 6 Mar 2024 12:43:35 +0000
Subject: [PATCH 4/4] fix: rpcInput variable in debounce

---
 frontend/components/Spawn/SpawnRPC.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/components/Spawn/SpawnRPC.tsx b/frontend/components/Spawn/SpawnRPC.tsx
index c8e8abe73..cc2de413f 100644
--- a/frontend/components/Spawn/SpawnRPC.tsx
+++ b/frontend/components/Spawn/SpawnRPC.tsx
@@ -45,7 +45,7 @@ export const SpawnRPC = ({ nextPage }: { nextPage: SpawnScreen }) => {
   const debounceCheckRpc = useCallback(
     debounce((rpcInput: string) => {
       if (isCheckingRpc) return;
-      if (!rpcInput || rpc.slice(0, 4) !== 'http') {
+      if (!rpcInput || rpcInput.slice(0, 4) !== 'http') {
         setRpcState(RPCState.INVALID);
         return;
       }