feat: allow contact did copy on click

Signed-off-by: Colton Wolkins (Laptop) <colton@indicio.tech>

src/pages/profile/messaging.ts

@@ -203,6 +203,7 @@ class MessageHistoryComponent
   messages: Message[] = []
   content: string = ""
   contact: Contact
+  private didCopied: boolean = false
   private editMode: boolean = false
   private contactHover: boolean = false
   private editedContactLabel: string = ""
@@ -266,6 +267,54 @@ class MessageHistoryComponent
     ContactService.addContact(this.contact as Contact)
   }
 
+  private showToast(message: string, duration: number = 2000) {
+    // Create a div element for the toast
+    const toast = document.createElement("div")
+    toast.className = "toast"
+    toast.textContent = message
+
+    // Append it to the body
+    document.body.appendChild(toast)
+
+    // Force a reflow to trigger the transition
+    void toast.offsetWidth
+
+    // Show the toast
+    toast.classList.add("show")
+
+    // Remove the toast after the specified duration
+    setTimeout(() => {
+      toast.classList.remove("show")
+
+      // Wait for the transition to finish before removing the element
+      toast.addEventListener("transitionend", () => {
+        document.body.removeChild(toast)
+      })
+    }, duration)
+  }
+
+  private copyToClipboard(text: string) {
+    navigator.clipboard
+      .writeText(text)
+      .then(() => {
+        this.didCopied = true
+        m.redraw() // Inform Mithril to redraw the component
+
+        // Reset after some time (e.g., 2 seconds)
+        setTimeout(() => {
+          this.didCopied = false
+          m.redraw()
+        }, 2000)
+
+        // Show the toast
+        // Assuming you have a toast library/method named `showToast`
+        this.showToast("Copied!")
+      })
+      .catch(err => {
+        console.error("Failed to copy text: ", err)
+      })
+  }
+
   viewMessage(message: Message) {
     switch (message.type) {
       case "https://didcomm.org/basicmessage/2.0/message":
@@ -475,6 +524,9 @@ class MessageHistoryComponent
                         onmouseout: () => {
                           this.contactHover = false
                         },
+                        onclick: () => {
+                          this.copyToClipboard(this.contact.did)
+                        },
                       },
                       this.contactHover
                         ? this.contact.did