From f5ac321b8ba3d6fffb88d21a7f58972f416aeb66 Mon Sep 17 00:00:00 2001
From: "Alisa | Side.one" <alisa@side.one>
Date: Mon, 15 May 2023 18:28:55 +0800
Subject: [PATCH] feat: wallet dropdown

---
 src/layouts/components/NavBarWallet.vue | 52 ++++++++++++++++++++++++-
 1 file changed, 50 insertions(+), 2 deletions(-)

diff --git a/src/layouts/components/NavBarWallet.vue b/src/layouts/components/NavBarWallet.vue
index b9042576..f8f4f882 100644
--- a/src/layouts/components/NavBarWallet.vue
+++ b/src/layouts/components/NavBarWallet.vue
@@ -1,10 +1,29 @@
 <script setup lang="ts">
 import { useWalletStore } from '@/stores';
-
+import {ref, computed} from 'vue'
 const walletStore = useWalletStore();
 walletStore.$subscribe((m, s) => {
   console.log(m, s);
 });
+let showCopyToast = ref(0)
+async function copyAdress(address: string){
+  try {
+    await navigator.clipboard.writeText(address);
+    showCopyToast.value = 1
+    setTimeout(()=>{
+      showCopyToast.value = 0
+    },1000)
+    /* Resolved - 文本被成功复制到剪贴板 */
+  } 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>
@@ -12,7 +31,9 @@ walletStore.$subscribe((m, s) => {
     v-show="walletStore.currentAddress"
     class="dropdown dropdown-hover dropdown-end"
   >
-    <label tabindex="0" class="btn btn-sm m-1 lowercase">{{ walletStore.shortAddress }}</label>
+    <label tabindex="0" class="btn btn-sm m-1 lowercase">{{
+      walletStore.shortAddress
+    }}</label>
     <div
       tabindex="0"
       class="dropdown-content menu shadow p-2 bg-base-100 rounded w-64 overflow-auto"
@@ -24,9 +45,22 @@ walletStore.$subscribe((m, s) => {
         <a
           class="block py-2 px-2 hover:bg-gray-100 dark:hover:bg-[#353f5a] rounded cursor-pointer"
           style="overflow-wrap: anywhere"
+          @click="copyAdress(walletStore.currentAddress)"
         >
           {{ walletStore.currentAddress }}
         </a>
+        <div class="divider mt-1 mb-1"></div>
+        <RouterLink
+          class="block py-2 px-2 hover:bg-gray-100 dark:hover:bg-[#353f5a] rounded cursor-pointer"
+          to="/wallet/accounts"
+          >Accounts</RouterLink
+        >
+        <RouterLink
+          class="block py-2 px-2 hover:bg-gray-100 dark:hover:bg-[#353f5a] rounded cursor-pointer"
+          to="/wallet/portfolio"
+          >Portfolio</RouterLink
+        >
+        <div class="divider mt-1 mb-1"></div>
         <a
           class="block py-2 px-2 hover:bg-gray-100 dark:hover:bg-[#353f5a] rounded cursor-pointer"
           @click="walletStore.disconnect()"
@@ -34,6 +68,20 @@ walletStore.$subscribe((m, s) => {
         >
       </div>
     </div>
+    <div class="toast" v-show="showCopyToast===1">
+      <div class="alert alert-success">
+        <div class="text-sm">
+          <span>{{ tipMsg.msg }}</span>
+        </div>
+      </div>
+    </div>
+    <div class="toast" v-show="showCopyToast===2">
+      <div class="alert alert-error">
+        <div class="text-sm">
+          <span>{{ tipMsg.msg }}</span>
+        </div>
+      </div>
+    </div>
   </div>
   <label
     v-if="!walletStore?.currentAddress"