From 1e1472e0d5980459f6dd9a6e71c15baebb87cf4e Mon Sep 17 00:00:00 2001
From: "Alisa | Side.one" <alisa@side.one>
Date: Sun, 14 May 2023 23:24:20 +0800
Subject: [PATCH] feat: nav bar wallet address

---
 src/layouts/components/DefaultLayout.vue |  9 +++-
 src/layouts/components/NavBarWallet.vue  | 55 +++++++++++++-----------
 2 files changed, 38 insertions(+), 26 deletions(-)

diff --git a/src/layouts/components/DefaultLayout.vue b/src/layouts/components/DefaultLayout.vue
index 47d59914..fc465e83 100644
--- a/src/layouts/components/DefaultLayout.vue
+++ b/src/layouts/components/DefaultLayout.vue
@@ -11,7 +11,6 @@ import UserProfile from '@/layouts/components/ChainProfile.vue';
 import { useDashboard } from '@/stores/useDashboard';
 
 import NavBarI18n from './NavBarI18n.vue';
-import NavBarNotifications from './NavBarNotifications.vue';
 import NavBarWallet from './NavBarWallet.vue';
 import { useBlockchain } from '@/stores';
 
@@ -64,7 +63,11 @@ const changeOpen = (index: Number) => {
             'collapse-close': index === 0 && !sidebarOpen,
           }"
         >
-          <input type="checkbox" class="cursor-pointer" @click="changeOpen(index)" />
+          <input
+            type="checkbox"
+            class="cursor-pointer"
+            @click="changeOpen(index)"
+          />
           <div
             class="collapse-title px-4 flex items-center py-2 hover:bg-gray-100 dark:hover:bg-[#373f59]"
           >
@@ -190,6 +193,8 @@ const changeOpen = (index: Number) => {
         <NavBarWallet
           class="block truncate md:inline-block text-xs md:text-sm"
         />
+
+        
       </div>
 
       <!-- 👉 Pages -->
diff --git a/src/layouts/components/NavBarWallet.vue b/src/layouts/components/NavBarWallet.vue
index 3b9f8c2a..b9042576 100644
--- a/src/layouts/components/NavBarWallet.vue
+++ b/src/layouts/components/NavBarWallet.vue
@@ -8,30 +8,37 @@ walletStore.$subscribe((m, s) => {
 </script>
 
 <template>
-  <div>
-      <div v-if="walletStore.currentAddress"
-            class="dropdown dropdown-hover ping-connect-dropdown"
-        >
-            <label tabindex="3" class="btn m-1" >{{ walletStore.shortAddress }}</label>
-            <ul
-                tabindex="3"
-                class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52"
-            >
-                <li>
-                    <a>{{ walletStore.connectedWallet }}</a>
-                </li>
-                <li>
-                    <a>{{ walletStore.currentAddress }}</a>
-                </li>
-                <div class="divider"></div>
-                <li><a @click="walletStore.disconnect()">Disconnected</a></li>
-            </ul>
-        </div>
-    <label
-      v-else
-      for="PingConnectWallet"
-      class="btn btn-sm ml-4 ping-connect-btn"
-      >Connect Wallet</label
+  <div
+    v-show="walletStore.currentAddress"
+    class="dropdown dropdown-hover dropdown-end"
+  >
+    <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"
     >
+      <div class="px-2 mb-1 text-gray-500 dark:text-gray-400 font-semibold">
+        {{ walletStore.connectedWallet?.wallet }}
+      </div>
+      <div class="">
+        <a
+          class="block py-2 px-2 hover:bg-gray-100 dark:hover:bg-[#353f5a] rounded cursor-pointer"
+          style="overflow-wrap: anywhere"
+        >
+          {{ walletStore.currentAddress }}
+        </a>
+        <a
+          class="block py-2 px-2 hover:bg-gray-100 dark:hover:bg-[#353f5a] rounded cursor-pointer"
+          @click="walletStore.disconnect()"
+          >Disconnected</a
+        >
+      </div>
+    </div>
   </div>
+  <label
+    v-if="!walletStore?.currentAddress"
+    for="PingConnectWallet"
+    class="btn btn-sm ml-4 ping-connect-btn"
+    >Connect Wallet</label
+  >
 </template>