From 6be00689805b3dc19d3b3531e58c93e0f937b9bd Mon Sep 17 00:00:00 2001
From: Alaa228 <alaamahmoud.1223@gmail.com>
Date: Wed, 11 Oct 2023 10:51:53 +0300
Subject: [PATCH] Add Copy Icon next to address in Twin page. (#1193)

* add copy icon next to address

* update icon size

* add icon at end of row

* uptade to custom_toast

* fix style
---
 packages/playground/src/portal/twin_view.vue | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/packages/playground/src/portal/twin_view.vue b/packages/playground/src/portal/twin_view.vue
index 1f574b6c4e..bdf40fb590 100644
--- a/packages/playground/src/portal/twin_view.vue
+++ b/packages/playground/src/portal/twin_view.vue
@@ -33,7 +33,12 @@
           <v-col cols="1" sm="10" class="my-4">
             <v-list-item> {{ profileManager.profile?.twinId.toString() }} </v-list-item>
             <v-divider></v-divider>
-            <v-list-item> {{ profileManager.profile?.address }} </v-list-item>
+            <v-list-item>
+              <div style="display: flex; justify-content: space-between; align-items: center">
+                <span>{{ profileManager.profile?.address }}</span>
+                <v-icon @click="copy(profileManager.profile?.address as string)"> mdi-content-copy </v-icon>
+              </div>
+            </v-list-item>
             <v-divider></v-divider>
             <v-list-item> {{ profileManager.profile?.relay }} </v-list-item>
           </v-col>
@@ -51,6 +56,7 @@ import { generatePublicKey } from "@threefold/rmb_direct_client";
 import { onMounted, ref } from "vue";
 
 import { useProfileManager } from "../stores";
+import { createCustomToast, ToastType } from "../utils/custom_toast";
 import { getGrid } from "../utils/grid";
 
 const profileManager = useProfileManager();
@@ -94,6 +100,11 @@ async function UpdateRelay() {
     console.log("could not update relay or pk, Error: ", e);
   }
 }
+
+function copy(id: string) {
+  navigator.clipboard.writeText(id);
+  createCustomToast("Address copied to clipboard", ToastType.success);
+}
 </script>
 
 <style>