From 6581934b8cba227e13b6a046b09f3009432d21aa Mon Sep 17 00:00:00 2001
From: trungbach <trunga2k29@gmail.com>
Date: Thu, 11 Jul 2024 17:27:02 +0700
Subject: [PATCH] feat: add copy address func

---
 src/layouts/components/CopyAddress.vue  | 72 +++++++++++++++++++++++++
 src/layouts/components/NavBarWallet.vue | 52 +++---------------
 src/modules/[chain]/index.vue           | 14 +++--
 3 files changed, 89 insertions(+), 49 deletions(-)
 create mode 100644 src/layouts/components/CopyAddress.vue

diff --git a/src/layouts/components/CopyAddress.vue b/src/layouts/components/CopyAddress.vue
new file mode 100644
index 00000000..411c49ee
--- /dev/null
+++ b/src/layouts/components/CopyAddress.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { useWalletStore } from '@/stores';
+import { Icon } from '@iconify/vue';
+import { ref, computed, type PropType } from 'vue';
+
+defineProps({
+  fillSvg: { type: Object as PropType<string> },
+});
+
+const walletStore = useWalletStore();
+
+let showCopyToast = ref(0);
+async function copyAdress(address: string) {
+  try {
+    await navigator.clipboard.writeText(address);
+    showCopyToast.value = 1;
+    setTimeout(() => {
+      showCopyToast.value = 0;
+    }, 1000);
+  } catch (err) {
+    showCopyToast.value = 2;
+    setTimeout(() => {
+      showCopyToast.value = 0;
+    }, 1000);
+  }
+}
+const tipMsg = computed(() => {
+  return showCopyToast.value === 2
+    ? { class: 'error', msg: 'Copy Error!' }
+    : { class: 'success', msg: 'Copy Success!' };
+});
+</script>
+
+<template>
+  <div class="cursor-pointer">
+    <svg
+      v-if="showCopyToast !== 1"
+      @click="copyAdress(walletStore.currentAddress)"
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+    >
+      <path
+        d="M1.33325 1.33398H9.99992V5.00065H8.66658V2.66732H2.66659V8.66732H4.99992V10.0007H1.33325V1.33398ZM5.99992 6.00065H14.6666V14.6673H5.99992V6.00065ZM7.33325 7.33398V13.334H13.3333V7.33398H7.33325Z"
+        :fill="fillSvg ?? '#fff'"
+      />
+    </svg>
+    <Icon
+      v-if="showCopyToast === 1"
+      :style="{ color: fillSvg ?? '#fff' }"
+      icon="mdi:check"
+      width="16"
+      height="16"
+    />
+    <!-- <div class="toast" v-show="showCopyToast === 1">
+      <div class="alert alert-success">
+        <div class="text-xs md:!text-sm">
+          <span>{{ tipMsg.msg }}</span>
+        </div>
+      </div>
+    </div>
+    <div class="toast" v-show="showCopyToast === 2">
+      <div class="alert alert-error">
+        <div class="text-xs md:!text-sm">
+          <span>{{ tipMsg.msg }}</span>
+        </div>
+      </div>
+    </div> -->
+  </div>
+</template>
diff --git a/src/layouts/components/NavBarWallet.vue b/src/layouts/components/NavBarWallet.vue
index 06b27110..cca08448 100644
--- a/src/layouts/components/NavBarWallet.vue
+++ b/src/layouts/components/NavBarWallet.vue
@@ -1,37 +1,15 @@
 <script setup lang="ts">
 import { useBaseStore, useBlockchain, useWalletStore } from '@/stores';
 import { Icon } from '@iconify/vue';
-import { ref, computed } from 'vue';
+import CopyAddress from './CopyAddress.vue';
 
 const walletStore = useWalletStore();
 const chainStore = useBlockchain();
 const baseStore = useBaseStore();
-// walletStore.$subscribe((m, s) => {
-//   console.log(m, s);
-// });
+
 function walletStateChange(res: any) {
   walletStore.setConnectedWallet(res.detail?.value);
 }
-let showCopyToast = ref(0);
-async function copyAdress(address: string) {
-  try {
-    await navigator.clipboard.writeText(address);
-    showCopyToast.value = 1;
-    setTimeout(() => {
-      showCopyToast.value = 0;
-    }, 1000);
-  } catch (err) {
-    showCopyToast.value = 2;
-    setTimeout(() => {
-      showCopyToast.value = 0;
-    }, 1000);
-  }
-}
-const tipMsg = computed(() => {
-  return showCopyToast.value === 2
-    ? { class: 'error', msg: 'Copy Error!' }
-    : { class: 'success', msg: 'Copy Success!' };
-});
 </script>
 
 <template>
@@ -71,22 +49,22 @@ const tipMsg = computed(() => {
     >
       <div
         v-if="walletStore.currentAddress"
-        class="px-5 mt-2 mb-1 text-gray-500 dark:text-gray-400 font-semibold"
+        class="px-4 mt-2 mb-1 text-gray-500 dark:text-gray-400 font-semibold"
       >
         Account Address
       </div>
       <div>
         <a
           v-if="walletStore.currentAddress"
-          class="block font-semibold text-white py-2 px-5 hover:bg-gray-100 dark:hover:bg-[#353f5a] rounded cursor-pointer border-b border-b-[#383B40] text-[13px]"
+          class="flex items-center gap-1 font-semibold text-white py-2 px-4 hover:!bg-base-300 rounded cursor-pointer border-b border-b-[#383B40] text-[13px]"
           style="overflow-wrap: anywhere"
-          @click="copyAdress(walletStore.currentAddress)"
         >
           {{ walletStore.currentAddress }}
+          <CopyAddress />
         </a>
         <RouterLink v-if="walletStore.currentAddress" to="/wallet/accounts">
           <div
-            class="py-3 px-5 hover:!bg-base-300 rounded cursor-pointer flex gap-4 border-b border-b-[#383B40]"
+            class="py-3 px-4 hover:!bg-base-300 rounded cursor-pointer flex gap-4 border-b border-b-[#383B40]"
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -112,7 +90,7 @@ const tipMsg = computed(() => {
         </RouterLink>
         <RouterLink v-if="walletStore.currentAddress" to="/wallet/portfolio">
           <div
-            class="py-3 px-5 hover:!bg-base-300 rounded cursor-pointer flex gap-4 border-b border-b-[#383B40]"
+            class="py-3 px-4 hover:!bg-base-300 rounded cursor-pointer flex gap-4 border-b border-b-[#383B40]"
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -131,7 +109,7 @@ const tipMsg = computed(() => {
         </RouterLink>
         <a
           v-if="walletStore.currentAddress"
-          class="py-3 px-5 hover:bg-gray-100 dark:hover:bg-base-300 rounded cursor-pointer text-[#FF5252] flex gap-4"
+          class="py-3 px-4 hover:bg-gray-100 dark:hover:bg-base-300 rounded cursor-pointer text-[#FF5252] flex gap-4"
           @click="walletStore.disconnect()"
         >
           <svg
@@ -156,20 +134,6 @@ const tipMsg = computed(() => {
         >
       </div>
     </div>
-    <div class="toast" v-show="showCopyToast === 1">
-      <div class="alert alert-success">
-        <div class="text-xs md:!text-sm">
-          <span>{{ tipMsg.msg }}</span>
-        </div>
-      </div>
-    </div>
-    <div class="toast" v-show="showCopyToast === 2">
-      <div class="alert alert-error">
-        <div class="text-xs md:!text-sm">
-          <span>{{ tipMsg.msg }}</span>
-        </div>
-      </div>
-    </div>
   </div>
   <Teleport to="body">
     <ping-connect-wallet
diff --git a/src/modules/[chain]/index.vue b/src/modules/[chain]/index.vue
index fdd570fe..bcd2d7b2 100644
--- a/src/modules/[chain]/index.vue
+++ b/src/modules/[chain]/index.vue
@@ -16,6 +16,7 @@ import { useIndexModule, colorMap } from './indexStore';
 import { computed } from '@vue/reactivity';
 
 import CardStatisticsVertical from '@/components/CardStatisticsVertical.vue';
+import CopyAddress from '@/layouts/components/CopyAddress.vue';
 import ProposalListItem from '@/components/ProposalListItem.vue';
 import ArrayObjectElement from '@/components/dynamic/ArrayObjectElement.vue';
 
@@ -417,11 +418,14 @@ const amount = computed({
         <div class="flex-1">
           <p class="text-[18px] text-[#f7f7f7] font-semibold">My Wallet</p>
 
-          <p
-            class="truncate max-w-[calc(100%-10px)] sm:w-[unset] mt-1 text-link text-[14px] font-normal"
-          >
-            {{ walletStore.currentAddress || 'Not Connected' }}
-          </p>
+          <div class="flex gap-2 items-center">
+            <p
+              class="truncate max-w-[calc(100%-10px)] sm:w-[unset] text-link text-[14px] font-normal"
+            >
+              {{ walletStore.currentAddress || 'Not Connected' }}
+            </p>
+            <CopyAddress :fillSvg="'#B999F3'" />
+          </div>
         </div>
         <RouterLink
           v-if="walletStore.currentAddress"