delete contact

src/components/ContactForm.tsx

@@ -38,7 +38,7 @@ export function ContactForm(props: {
     return (
         <Form
             onSubmit={props.handleSubmit}
-            class="mx-auto flex w-full max-w-[400px] flex-1 flex-col justify-around gap-4"
+            class="mx-auto flex w-full flex-1 flex-col justify-around gap-4"
         >
             <div>
                 <VStack>

src/components/ContactViewer.tsx

@@ -5,6 +5,7 @@ import { createSignal, Match, Show, Switch } from "solid-js";
 
 import {
     Button,
+    ConfirmDialog,
     ContactForm,
     KeyValue,
     MiniStringShower,
@@ -27,12 +28,14 @@ export function ContactViewer(props: {
     contact: TagItem;
     gradient: string;
     saveContact: (id: string, contact: ContactFormValues) => void;
+    deleteContact: (id: string) => Promise<void>;
 }) {
     const i18n = useI18n();
     const [isOpen, setIsOpen] = createSignal(false);
     const [isEditing, setIsEditing] = createSignal(false);
     const [state, actions] = useMegaStore();
     const navigate = useNavigate();
+    const [confirmOpen, setConfirmOpen] = createSignal(false);
 
     const handleSubmit: SubmitHandler<ContactFormValues> = (
         c: ContactFormValues
@@ -43,6 +46,13 @@ export function ContactViewer(props: {
         setIsEditing(false);
     };
 
+    const handleDelete = async () => {
+        const id = props.contact.id;
+
+        await props.deleteContact(id);
+        setIsOpen(false);
+    };
+
     const handlePay = () => {
         const network = state.mutiny_wallet?.get_network() || "signet";
 
@@ -101,6 +111,20 @@ export function ContactViewer(props: {
                             handleSubmit={handleSubmit}
                             initialValues={props.contact}
                         />
+                        <Button
+                            intent="red"
+                            onClick={() => setConfirmOpen(true)}
+                        >
+                            Delete
+                        </Button>
+                        <ConfirmDialog
+                            open={confirmOpen()}
+                            loading={false}
+                            onConfirm={handleDelete}
+                            onCancel={() => setConfirmOpen(false)}
+                        >
+                            Are you sure you want to delete this contact?
+                        </ConfirmDialog>
                     </Match>
                     <Match when={!isEditing()}>
                         <div class="mx-auto flex w-full max-w-[400px] flex-1 flex-col items-center justify-around gap-4">

src/routes/Activity.tsx

@@ -71,7 +71,6 @@ function ContactRow() {
         refetch();
     }
 
-    //
     async function saveContact(id: string, contact: ContactFormValues) {
         console.log("saving contact", id, contact);
         const hexpub = await hexpubFromNpub(contact.npub?.trim());
@@ -95,6 +94,16 @@ function ContactRow() {
         refetch();
     }
 
+    async function deleteContact(id: string) {
+        try {
+            await state.mutiny_wallet?.delete_contact(id);
+        } catch (e) {
+            console.error(e);
+            showToast(eify(e));
+        }
+        refetch();
+    }
+
     return (
         <div class="flex gap-4">
             <ContactEditor list createContact={createContact} />
@@ -106,6 +115,7 @@ function ContactRow() {
                                 contact={contact}
                                 gradient={gradients()?.get(contact.name)}
                                 saveContact={saveContact}
+                                deleteContact={deleteContact}
                             />
                         )}
                     </For>