From ed3d40b36dbd339f8e2ffab7e0a3dcd1257ad933 Mon Sep 17 00:00:00 2001
From: Logan Nguyen <logan.nguyen@swirldslabs.com>
Date: Tue, 10 Oct 2023 23:12:43 -0500
Subject: [PATCH 01/23] update: rearranged TopNavBar

- moved network dropdown down to the search bar row
- added new connect wallet button

Signed-off-by: Logan Nguyen <logan.nguyen@swirldslabs.com>
---
 src/components/SearchBar.vue |  4 ++--
 src/components/TopNavBar.vue | 40 +++++++++++++++++++++---------------
 2 files changed, 26 insertions(+), 18 deletions(-)

diff --git a/src/components/SearchBar.vue b/src/components/SearchBar.vue
index a9b2672dd..7449bd91c 100644
--- a/src/components/SearchBar.vue
+++ b/src/components/SearchBar.vue
@@ -41,14 +41,14 @@
     <form data-cy="searchBar" id="searchBar" class="control is-flex" action="" v-on:submit.prevent="performSearch">
       <input
           class="input has-text-white h-is-navbar-item"
-          style="z-index: 1;"
+          style="z-index: 1; height: 40px"
           type="text"
           placeholder="Search accounts, transactions, tokens, contracts and topics"
           v-model="searchedId"
           v-bind:disabled="searchInputDisabled"
           ref="search-input"
       />
-      <button class="button is-dark" type="submit" value="searchBar" style="border-color: white; border-left: none; height: 35px; z-index: 0; outline: none">
+      <button class="button is-dark" type="submit" value="searchBar" style="border-color: white; border-left: none; height: 40px; z-index: 0; outline: none">
           <i v-bind:class="searchButtonIconStyle"/>
       </button>
     </form>
diff --git a/src/components/TopNavBar.vue b/src/components/TopNavBar.vue
index 13c617f6f..7cd1515fb 100644
--- a/src/components/TopNavBar.vue
+++ b/src/components/TopNavBar.vue
@@ -59,23 +59,10 @@
       <AxiosStatus/>
     </div>
     <div class="is-flex-grow-0 is-flex-shrink-0 is-flex is-flex-direction-column ml-4">
-      <div class="is-flex mb-3 is-align-items-baseline">
-
-        <div id="drop-down-menu">
-          <o-field>
-            <o-select v-model="selectedNetwork" class="h-is-navbar-item" style="outline: none">
-              <option v-for="network in networkEntries" :key="network.name" :value="network.name">
-                {{ network.displayName }}
-              </option>
-            </o-select>
-          </o-field>
-        </div>
-
-        <div class="is-flex-grow-1 px-2"/>
-
+      <div class="is-flex mb-3 is-align-items-baseline is-justify-content-space-between">
         <router-link :to="routeManager.makeRouteToMainDashboard()"
                      id="dashboard-menu-item"
-                     class="button is-ghost is-first h-is-navbar-item h-is-dense"
+                     class="button is-ghost is-first/ h-is-navbar-item h-is-dense"
                      :class="{ 'is-rimmed': isDashboardRoute}">Dashboard</router-link>
         <router-link :to="routeManager.makeRouteToTransactions()"
                      class="button is-ghost h-is-navbar-item h-is-dense"
@@ -103,7 +90,28 @@
                      class="button is-ghost is-last h-is-navbar-item h-is-dense"
                      :class="{ 'is-rimmed': isBlocksRoute}">Blocks</router-link>
       </div>
-      <SearchBar style="margin-top: 4px"/>
+
+      <div style="display: grid; gap: 1.2rem; grid-template-columns: repeat(12, minmax(0, 3.9rem));">
+        <div style="grid-column: span 7;">
+          <SearchBar/>
+        </div>
+        
+        <div style="grid-column: span 2;">
+          <o-field>
+            <o-select v-model="selectedNetwork" class="h-is-navbar-item" style="outline: none; height: 40px">
+              <option v-for="network in networkEntries" :key="network.name" :value="network.name">
+                {{ network.displayName }}
+              </option>
+            </o-select>
+          </o-field>
+        </div>
+
+        <div style="grid-column: span 3;">
+          <button id="connectWalletButton" class="button" style="outline: none; height: 40px; width: 100%; font-size: 0.9rem;">
+            CONNECT WALLET
+          </button>
+        </div>
+      </div>
     </div>
 
   </div>

From 881bf19b7bff928ab06f0bb259de555da2687f33 Mon Sep 17 00:00:00 2001
From: Logan Nguyen <logan.nguyen@swirldslabs.com>
Date: Tue, 10 Oct 2023 23:15:55 -0500
Subject: [PATCH 02/23] update: added WalletChoser component to TopNavBar
 component

Signed-off-by: Logan Nguyen <logan.nguyen@swirldslabs.com>
---
 src/components/TopNavBar.vue | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/components/TopNavBar.vue b/src/components/TopNavBar.vue
index 7cd1515fb..a004bdfb7 100644
--- a/src/components/TopNavBar.vue
+++ b/src/components/TopNavBar.vue
@@ -52,12 +52,15 @@
   </div>
 
   <div v-else class="is-flex is-justify-content-space-between is-align-items-flex-end">
-    <div  class="is-inline-flex is-align-items-center is-flex-grow-0 is-flex-shrink-0 mr-3">
+    <WalletChooser v-model:show-dialog="showWalletChooser"/>
+
+    <div class="is-inline-flex is-align-items-center is-flex-grow-0 is-flex-shrink-0 mr-3">
       <router-link :to="routeManager.makeRouteToMainDashboard()">
         <img id="product-logo" alt="Product Logo" class="image" src="@/assets/branding/brand-product-logo.png">
       </router-link>
       <AxiosStatus/>
     </div>
+    
     <div class="is-flex-grow-0 is-flex-shrink-0 is-flex is-flex-direction-column ml-4">
       <div class="is-flex mb-3 is-align-items-baseline is-justify-content-space-between">
         <router-link :to="routeManager.makeRouteToMainDashboard()"
@@ -107,7 +110,7 @@
         </div>
 
         <div style="grid-column: span 3;">
-          <button id="connectWalletButton" class="button" style="outline: none; height: 40px; width: 100%; font-size: 0.9rem;">
+          <button id="connectWalletButton" class="button" @click="chooseWallet" style="outline: none; height: 40px; width: 100%; font-size: 0.9rem;">
             CONNECT WALLET
           </button>
         </div>
@@ -124,15 +127,16 @@
 
 <script lang="ts">
 
-import {defineComponent, inject, ref} from "vue";
 import {routeManager} from "@/router";
+import {defineComponent, inject, ref} from "vue";
 import SearchBar from "@/components/SearchBar.vue";
 import AxiosStatus from "@/components/AxiosStatus.vue";
 import {networkRegistry} from "@/schemas/NetworkRegistry";
+import WalletChooser from "@/components/staking/WalletChooser.vue";
 
 export default defineComponent({
   name: "TopNavBar",
-  components: {AxiosStatus, SearchBar},
+  components: {AxiosStatus, SearchBar, WalletChooser},
 
   setup() {
     const isSmallScreen = inject('isSmallScreen', true)
@@ -145,6 +149,11 @@ export default defineComponent({
 
     const isMobileMenuOpen = ref(false)
 
+    const showWalletChooser = ref(false)
+    const chooseWallet = () => {
+      showWalletChooser.value = true
+    }
+
     return {
       isSmallScreen,
       isMediumScreen,
@@ -166,6 +175,8 @@ export default defineComponent({
       isStakingRoute: routeManager.isStakingRoute,
       isBlocksRoute: routeManager.isBlocksRoute,
       routeManager,
+      chooseWallet,
+      showWalletChooser,
     }
   },
 })

From 045b9c492a8a3797f580210d415719fd44587a3f Mon Sep 17 00:00:00 2001
From: Logan Nguyen <logan.nguyen@swirldslabs.com>
Date: Wed, 11 Oct 2023 11:14:33 -0500
Subject: [PATCH 03/23] feat: added connecting wallet logic to Navbar

Signed-off-by: Logan Nguyen <logan.nguyen@swirldslabs.com>
---
 src/components/TopNavBar.vue | 68 +++++++++++++++++++++++++++++++++---
 1 file changed, 64 insertions(+), 4 deletions(-)

diff --git a/src/components/TopNavBar.vue b/src/components/TopNavBar.vue
index a004bdfb7..c21da51d7 100644
--- a/src/components/TopNavBar.vue
+++ b/src/components/TopNavBar.vue
@@ -52,7 +52,19 @@
   </div>
 
   <div v-else class="is-flex is-justify-content-space-between is-align-items-flex-end">
-    <WalletChooser v-model:show-dialog="showWalletChooser"/>
+    <WalletChooser v-model:show-dialog="showWalletChooser" v-on:choose-wallet="handleChooseWallet"/>
+    
+    <ProgressDialog v-model:show-dialog="showProgressDialog"
+                  :mode="progressDialogMode"
+                  :main-message="progressMainMessage"
+                  :extra-message="progressExtraMessage"
+                  :extra-transaction-id="progressExtraTransactionId"
+                  :show-spinner="showProgressSpinner"
+  >
+    <template v-slot:dialogTitle>
+      <span class="h-is-primary-title">{{ progressDialogTitle }}</span>
+    </template>
+  </ProgressDialog>
 
     <div class="is-inline-flex is-align-items-center is-flex-grow-0 is-flex-shrink-0 mr-3">
       <router-link :to="routeManager.makeRouteToMainDashboard()">
@@ -110,8 +122,8 @@
         </div>
 
         <div style="grid-column: span 3;">
-          <button id="connectWalletButton" class="button" @click="chooseWallet" style="outline: none; height: 40px; width: 100%; font-size: 0.9rem;">
-            CONNECT WALLET
+          <button :disabled="connecting" id="connectWalletButton" class="button" @click="chooseWallet" style="outline: none; height: 40px; width: 100%; font-size: 0.9rem;">
+            {{ connecting ? "Attempting to connect..." : "CONNECT WALLET" }}
           </button>
         </div>
       </div>
@@ -127,12 +139,15 @@
 
 <script lang="ts">
 
-import {routeManager} from "@/router";
+import {routeManager, walletManager} from "@/router";
 import {defineComponent, inject, ref} from "vue";
 import SearchBar from "@/components/SearchBar.vue";
 import AxiosStatus from "@/components/AxiosStatus.vue";
 import {networkRegistry} from "@/schemas/NetworkRegistry";
 import WalletChooser from "@/components/staking/WalletChooser.vue";
+import { WalletDriver } from '@/utils/wallet/WalletDriver';
+import { WalletDriverError } from '@/utils/wallet/WalletDriverError';
+import { Mode } from './staking/ProgressDialog.vue';
 
 export default defineComponent({
   name: "TopNavBar",
@@ -154,6 +169,42 @@ export default defineComponent({
       showWalletChooser.value = true
     }
 
+    const connecting = ref(false)
+    const showProgressDialog = ref(false)
+    const showProgressSpinner = ref(false)
+    const progressDialogMode = ref(Mode.Busy)
+    const progressDialogTitle = ref<string|null>(null)
+    const progressMainMessage = ref<string|null>(null)
+    const progressExtraMessage = ref<string|null>(null)
+    const progressExtraTransactionId = ref<string|null>(null)
+
+    //
+    // handleChooseWallet
+    //
+    const handleChooseWallet = (wallet: WalletDriver) => {
+      walletManager.setActiveDriver(wallet)
+      connecting.value = true
+      walletManager
+          .connect()
+          .catch((reason) => {
+            console.warn("Failed to connect wallet - reason:" + reason.toString())
+            showProgressDialog.value = true
+            progressDialogMode.value = Mode.Error
+            progressDialogTitle.value = "Could not connect wallet"
+            showProgressSpinner.value = false
+            progressExtraTransactionId.value = null
+            if (reason instanceof WalletDriverError) {
+              progressMainMessage.value = reason.message
+              progressExtraMessage.value = reason.extra
+            } else {
+              progressMainMessage.value = "Unexpected error"
+              progressExtraMessage.value = JSON.stringify(reason)
+            }
+          })
+          .finally(() => connecting.value = false)
+    }
+    
+
     return {
       isSmallScreen,
       isMediumScreen,
@@ -177,6 +228,15 @@ export default defineComponent({
       routeManager,
       chooseWallet,
       showWalletChooser,
+      handleChooseWallet,
+      connecting,
+      showProgressDialog,
+      progressDialogMode,
+      progressMainMessage,
+      progressExtraMessage,
+      progressExtraTransactionId,
+      showProgressSpinner,
+      progressDialogTitle,
     }
   },
 })

From 2136fe34b4f4087899787116612e2aefd370add5 Mon Sep 17 00:00:00 2001
From: Logan Nguyen <logan.nguyen@swirldslabs.com>
Date: Wed, 11 Oct 2023 12:50:25 -0500
Subject: [PATCH 04/23] update: added accountID to wallet section after
 connected

Signed-off-by: Logan Nguyen <logan.nguyen@swirldslabs.com>
---
 src/components/TopNavBar.vue | 48 +++++++++++++++++++++++++++++++++---
 1 file changed, 44 insertions(+), 4 deletions(-)

diff --git a/src/components/TopNavBar.vue b/src/components/TopNavBar.vue
index c21da51d7..fdeea1421 100644
--- a/src/components/TopNavBar.vue
+++ b/src/components/TopNavBar.vue
@@ -122,9 +122,24 @@
         </div>
 
         <div style="grid-column: span 3;">
-          <button :disabled="connecting" id="connectWalletButton" class="button" @click="chooseWallet" style="outline: none; height: 40px; width: 100%; font-size: 0.9rem;">
+          <button v-if="!connected" :disabled="connecting" id="connectWalletButton" class="button" @click="chooseWallet" style="outline: none; height: 40px; width: 100%; font-size: 0.9rem;">
             {{ connecting ? "Attempting to connect..." : "CONNECT WALLET" }}
           </button>
+
+          <div v-else class="is-flex is-align-items-center" style="outline: none; height: 40px; width: 100%; font-size: 0.9rem; border: 1px solid white; display: flex; justify-content: space-between;">
+            <figure style="width: 50px; height: 100%;">
+                <img :src="walletIconURL ?? undefined" alt="wallet logo">
+            </figure>
+
+            <p class="ml-3/" style="font-size: 1.02rem;">
+              {{ accountId }}
+            </p>
+
+            <div class="is-flex is-align-items-center" style="width: 30px; justify-content: center;">
+              <i class="fas fa-solid fa-angle-down is-flex is-align-items-center"/>
+            </div>
+
+          </div>
         </div>
       </div>
     </div>
@@ -140,18 +155,19 @@
 <script lang="ts">
 
 import {routeManager, walletManager} from "@/router";
-import {defineComponent, inject, ref} from "vue";
 import SearchBar from "@/components/SearchBar.vue";
 import AxiosStatus from "@/components/AxiosStatus.vue";
 import {networkRegistry} from "@/schemas/NetworkRegistry";
 import WalletChooser from "@/components/staking/WalletChooser.vue";
 import { WalletDriver } from '@/utils/wallet/WalletDriver';
 import { WalletDriverError } from '@/utils/wallet/WalletDriverError';
-import { Mode } from './staking/ProgressDialog.vue';
+import ProgressDialog, { Mode } from './staking/ProgressDialog.vue';
+import { AccountLocParser } from '@/utils/parser/AccountLocParser';
+import {computed, defineComponent, inject, onBeforeUnmount, onMounted, ref} from "vue";
 
 export default defineComponent({
   name: "TopNavBar",
-  components: {AxiosStatus, SearchBar, WalletChooser},
+  components: {AxiosStatus, SearchBar, WalletChooser, ProgressDialog},
 
   setup() {
     const isSmallScreen = inject('isSmallScreen', true)
@@ -203,6 +219,24 @@ export default defineComponent({
           })
           .finally(() => connecting.value = false)
     }
+
+    //
+    // Account
+    //
+    const accountLocParser = new AccountLocParser(walletManager.accountId)
+    onMounted(() => accountLocParser.mount())
+    onBeforeUnmount(() => accountLocParser.unmount())
+
+    const accountRoute = computed(() => {
+      return walletManager.accountId.value !== null
+          ? routeManager.makeRouteToAccount(walletManager.accountId.value, false)
+          : null
+    })
+
+    const balanceInHbar = computed(() => {
+      const balance = accountLocParser.balance.value ?? 10000000000
+      return balance / 100000000
+    })
     
 
     return {
@@ -237,6 +271,12 @@ export default defineComponent({
       progressExtraTransactionId,
       showProgressSpinner,
       progressDialogTitle,
+      accountId: walletManager.accountId,
+      accountChecksum: accountLocParser.accountChecksum,
+      walletIconURL: walletManager.getActiveDriver().iconURL,
+      connected: walletManager.connected,
+      accountRoute,
+      balanceInHbar, 
     }
   },
 })

From 12c2634150ffcea64dffa2cc9b184141a571078d Mon Sep 17 00:00:00 2001
From: Logan Nguyen <logan.nguyen@swirldslabs.com>
Date: Wed, 11 Oct 2023 23:49:34 -0500
Subject: [PATCH 05/23] update: added new logoURL field to WalletDriver class

Signed-off-by: Logan Nguyen <logan.nguyen@swirldslabs.com>
---
 src/components/staking/WalletChooser.vue | 3 +--
 src/pages/Staking.vue                    | 2 +-
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/staking/WalletChooser.vue b/src/components/staking/WalletChooser.vue
index ff775a7c1..7cf156f35 100644
--- a/src/components/staking/WalletChooser.vue
+++ b/src/components/staking/WalletChooser.vue
@@ -40,7 +40,7 @@
           <div v-for="d in drivers" :key="d.name">
             <a :id="d.name" @click="chosenWallet=d" @dblclick="handleConnect">
               <figure :class="{'selected':isSelected(d)}" class="h-chooser-figure my-4 mr-6">
-                <img :src="d.iconURL ?? undefined" alt="wallet logo" class="h-chooser-img">
+                <img :src="d.logoURL ?? undefined" alt="wallet logo" class="h-chooser-img">
               </figure>
             </a>
           </div>
@@ -51,7 +51,6 @@
           <button id="connectButton" :disabled="!chosenWallet" class="button is-info is-small ml-4" @click="handleConnect">CONNECT
           </button>
         </div>
-
       </div>
     </div>
   </div>
diff --git a/src/pages/Staking.vue b/src/pages/Staking.vue
index 3fe6bb31c..3b2a5a497 100644
--- a/src/pages/Staking.vue
+++ b/src/pages/Staking.vue
@@ -545,7 +545,7 @@ export default defineComponent({
       connecting,
       connected: walletManager.connected,
       walletName: walletManager.walletName,
-      walletIconURL: walletManager.getActiveDriver().iconURL,
+      walletLogoURL: walletManager.getActiveDriver().logoURL,
       accountId: walletManager.accountId,
       isHederaWallet: walletManager.isHederaWallet,
       accountChecksum: accountLocParser.accountChecksum,

From 6e99383c34017d0fcfe4e13d118cd4c37f473528 Mon Sep 17 00:00:00 2001
From: Logan Nguyen <logan.nguyen@swirldslabs.com>
Date: Wed, 11 Oct 2023 23:49:56 -0500
Subject: [PATCH 06/23] update: added new wallet icon to connect wallet button

Signed-off-by: Logan Nguyen <logan.nguyen@swirldslabs.com>
---
 src/components/TopNavBar.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/TopNavBar.vue b/src/components/TopNavBar.vue
index fdeea1421..74fea1f3b 100644
--- a/src/components/TopNavBar.vue
+++ b/src/components/TopNavBar.vue
@@ -127,8 +127,8 @@
           </button>
 
           <div v-else class="is-flex is-align-items-center" style="outline: none; height: 40px; width: 100%; font-size: 0.9rem; border: 1px solid white; display: flex; justify-content: space-between;">
-            <figure style="width: 50px; height: 100%;">
-                <img :src="walletIconURL ?? undefined" alt="wallet logo">
+            <figure style="width: 50px; height: 100%; display: flex; align-items: center; margin-left: 0.25rem;">
+                <img :src="walletIconURL ?? undefined" alt="wallet logo" style="object-fit: contain; aspect-ratio: 3/2;display: flex; height: 90%;">
             </figure>
 
             <p class="ml-3/" style="font-size: 1.02rem;">

From b445c3c9a398119caf88b9ed39588172e5e1ea6b Mon Sep 17 00:00:00 2001
From: Logan Nguyen <logan.nguyen@swirldslabs.com>
Date: Thu, 12 Oct 2023 03:12:21 -0500
Subject: [PATCH 07/23] style: smaller connect wallet button

Signed-off-by: Logan Nguyen <logan.nguyen@swirldslabs.com>
---
 src/components/TopNavBar.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/TopNavBar.vue b/src/components/TopNavBar.vue
index 74fea1f3b..213ecf345 100644
--- a/src/components/TopNavBar.vue
+++ b/src/components/TopNavBar.vue
@@ -106,7 +106,7 @@
                      :class="{ 'is-rimmed': isBlocksRoute}">Blocks</router-link>
       </div>
 
-      <div style="display: grid; gap: 1.2rem; grid-template-columns: repeat(12, minmax(0, 3.9rem));">
+      <div style="display: grid; gap: 1.2rem; grid-template-columns: repeat(12, minmax(0, 2.8rem));">
         <div style="grid-column: span 7;">
           <SearchBar/>
         </div>
@@ -123,15 +123,15 @@
 
         <div style="grid-column: span 3;">
           <button v-if="!connected" :disabled="connecting" id="connectWalletButton" class="button" @click="chooseWallet" style="outline: none; height: 40px; width: 100%; font-size: 0.9rem;">
-            {{ connecting ? "Attempting to connect..." : "CONNECT WALLET" }}
+            {{ connecting ? "Connecting..." : "CONNECT WALLET" }}
           </button>
 
           <div v-else class="is-flex is-align-items-center" style="outline: none; height: 40px; width: 100%; font-size: 0.9rem; border: 1px solid white; display: flex; justify-content: space-between;">
-            <figure style="width: 50px; height: 100%; display: flex; align-items: center; margin-left: 0.25rem;">
+            <figure style="width: 50px; height: 100%; display: flex; align-items: center; margin-left: 0.15rem;">
                 <img :src="walletIconURL ?? undefined" alt="wallet logo" style="object-fit: contain; aspect-ratio: 3/2;display: flex; height: 90%;">
             </figure>
 
-            <p class="ml-3/" style="font-size: 1.02rem;">
+            <p>
               {{ accountId }}
             </p>
 

From c09a7d7b9a6a01d6a57deec11123bc1ec049faab Mon Sep 17 00:00:00 2001
From: Logan Nguyen <logan.nguyen@swirldslabs.com>
Date: Thu, 12 Oct 2023 19:43:17 -0500
Subject: [PATCH 08/23] dapp-feat: added new WalletInfo component

Signed-off-by: Logan Nguyen <logan.nguyen@swirldslabs.com>
---
 src/components/TopNavBar.vue         |  91 +++++------
 src/components/wallet/WalletInfo.vue | 224 +++++++++++++++++++++++++++
 2 files changed, 270 insertions(+), 45 deletions(-)
 create mode 100644 src/components/wallet/WalletInfo.vue

diff --git a/src/components/TopNavBar.vue b/src/components/TopNavBar.vue
index 213ecf345..def0e855f 100644
--- a/src/components/TopNavBar.vue
+++ b/src/components/TopNavBar.vue
@@ -106,7 +106,7 @@
                      :class="{ 'is-rimmed': isBlocksRoute}">Blocks</router-link>
       </div>
 
-      <div style="display: grid; gap: 1.2rem; grid-template-columns: repeat(12, minmax(0, 2.8rem));">
+      <div style="position: relative; display: grid; column-gap: 1.2rem; grid-template-columns: repeat(12, minmax(0, 2.8rem));">
         <div style="grid-column: span 7;">
           <SearchBar/>
         </div>
@@ -126,7 +126,7 @@
             {{ connecting ? "Connecting..." : "CONNECT WALLET" }}
           </button>
 
-          <div v-else class="is-flex is-align-items-center" style="outline: none; height: 40px; width: 100%; font-size: 0.9rem; border: 1px solid white; display: flex; justify-content: space-between;">
+          <div v-else @click="showWalletInfo = !showWalletInfo" class="is-flex is-align-items-center" style="outline: none; height: 40px; width: 100%; font-size: 0.9rem; border: 1px solid white; display: flex; justify-content: space-between; cursor: pointer;">
             <figure style="width: 50px; height: 100%; display: flex; align-items: center; margin-left: 0.15rem;">
                 <img :src="walletIconURL ?? undefined" alt="wallet logo" style="object-fit: contain; aspect-ratio: 3/2;display: flex; height: 90%;">
             </figure>
@@ -136,11 +136,15 @@
             </p>
 
             <div class="is-flex is-align-items-center" style="width: 30px; justify-content: center;">
-              <i class="fas fa-solid fa-angle-down is-flex is-align-items-center"/>
+              <i v-if="!showWalletInfo" class="fas fa-solid fa-angle-down is-flex is-align-items-center"/>
+              <i v-else class="fas fa-solid fa-angle-up is-flex is-align-items-center"/>
             </div>
 
           </div>
         </div>
+
+        <WalletInfo :connected="connected" :showWalletInfo="showWalletInfo" :walletIconURL="walletIconURL || undefined" :accountId="accountId || undefined" @walletDisconnect="disconnectFromWallet"/>
+        
       </div>
     </div>
 
@@ -162,12 +166,12 @@ import WalletChooser from "@/components/staking/WalletChooser.vue";
 import { WalletDriver } from '@/utils/wallet/WalletDriver';
 import { WalletDriverError } from '@/utils/wallet/WalletDriverError';
 import ProgressDialog, { Mode } from './staking/ProgressDialog.vue';
-import { AccountLocParser } from '@/utils/parser/AccountLocParser';
-import {computed, defineComponent, inject, onBeforeUnmount, onMounted, ref} from "vue";
+import {defineComponent, inject, ref} from "vue";
+import WalletInfo from '@/components/wallet/WalletInfo.vue'
 
 export default defineComponent({
   name: "TopNavBar",
-  components: {AxiosStatus, SearchBar, WalletChooser, ProgressDialog},
+  components: {AxiosStatus, SearchBar, WalletChooser, ProgressDialog, WalletInfo},
 
   setup() {
     const isSmallScreen = inject('isSmallScreen', true)
@@ -186,6 +190,8 @@ export default defineComponent({
     }
 
     const connecting = ref(false)
+    const walletIconURL = ref("")
+    const showWalletInfo = ref(false)
     const showProgressDialog = ref(false)
     const showProgressSpinner = ref(false)
     const progressDialogMode = ref(Mode.Busy)
@@ -194,6 +200,7 @@ export default defineComponent({
     const progressExtraMessage = ref<string|null>(null)
     const progressExtraTransactionId = ref<string|null>(null)
 
+
     //
     // handleChooseWallet
     //
@@ -218,65 +225,59 @@ export default defineComponent({
             }
           })
           .finally(() => connecting.value = false)
+      walletIconURL.value = walletManager.getActiveDriver().iconURL || ""
     }
 
     //
-    // Account
+    // disconnectFromWallet
     //
-    const accountLocParser = new AccountLocParser(walletManager.accountId)
-    onMounted(() => accountLocParser.mount())
-    onBeforeUnmount(() => accountLocParser.unmount())
-
-    const accountRoute = computed(() => {
-      return walletManager.accountId.value !== null
-          ? routeManager.makeRouteToAccount(walletManager.accountId.value, false)
-          : null
-    })
-
-    const balanceInHbar = computed(() => {
-      const balance = accountLocParser.balance.value ?? 10000000000
-      return balance / 100000000
-    })
+    const disconnectFromWallet = () => {
+      walletManager
+          .disconnect()
+          .finally(() => {
+            connecting.value = false;
+            showWalletInfo.value = false;
+          })
+    }
     
 
     return {
-      isSmallScreen,
-      isMediumScreen,
-      isTouchDevice,
       buildTime,
+      connecting,
       productName,
-      isStakingEnabled,
-      isMobileMenuOpen,
-      networkEntries: networkRegistry.entries,
-      selectedNetwork: routeManager.selectedNetwork,
-      name: routeManager.currentRoute,
-      isDashboardRoute: routeManager.isDashboardRoute,
-      isTransactionRoute: routeManager.isTransactionRoute,
-      isTokenRoute: routeManager.isTokenRoute,
-      isTopicRoute: routeManager.isTopicRoute,
-      isContractRoute: routeManager.isContractRoute,
-      isAccountRoute: routeManager.isAccountRoute,
-      isNodeRoute: routeManager.isNodeRoute,
-      isStakingRoute: routeManager.isStakingRoute,
-      isBlocksRoute: routeManager.isBlocksRoute,
       routeManager,
       chooseWallet,
+      walletIconURL,
+      isSmallScreen,
+      isTouchDevice,
+      isMediumScreen,
+      showWalletInfo,
+      isStakingEnabled,
+      isMobileMenuOpen,
       showWalletChooser,
       handleChooseWallet,
-      connecting,
       showProgressDialog,
       progressDialogMode,
       progressMainMessage,
-      progressExtraMessage,
-      progressExtraTransactionId,
       showProgressSpinner,
       progressDialogTitle,
+      progressExtraMessage,
+      disconnectFromWallet,
+      progressExtraTransactionId,
+      name: routeManager.currentRoute,
       accountId: walletManager.accountId,
-      accountChecksum: accountLocParser.accountChecksum,
-      walletIconURL: walletManager.getActiveDriver().iconURL,
       connected: walletManager.connected,
-      accountRoute,
-      balanceInHbar, 
+      isNodeRoute: routeManager.isNodeRoute,
+      isTokenRoute: routeManager.isTokenRoute,
+      isTopicRoute: routeManager.isTopicRoute,
+      networkEntries: networkRegistry.entries,
+      isBlocksRoute: routeManager.isBlocksRoute,
+      isStakingRoute: routeManager.isStakingRoute,
+      isAccountRoute: routeManager.isAccountRoute,
+      isContractRoute: routeManager.isContractRoute,
+      selectedNetwork: routeManager.selectedNetwork,
+      isDashboardRoute: routeManager.isDashboardRoute,
+      isTransactionRoute: routeManager.isTransactionRoute,
     }
   },
 })
diff --git a/src/components/wallet/WalletInfo.vue b/src/components/wallet/WalletInfo.vue
new file mode 100644
index 000000000..24a7d397b
--- /dev/null
+++ b/src/components/wallet/WalletInfo.vue
@@ -0,0 +1,224 @@
+<!--
+  -
+  - Hedera Mirror Node Explorer
+  -
+  - Copyright (C) 2021 - 2023 Hedera Hashgraph, LLC
+  -
+  - Licensed under the Apache License, Version 2.0 (the "License");
+  - you may not use this file except in compliance with the License.
+  - You may obtain a copy of the License at
+  -
+  -      http://www.apache.org/licenses/LICENSE-2.0
+  -
+  - Unless required by applicable law or agreed to in writing, software
+  - distributed under the License is distributed on an "AS IS" BASIS,
+  - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  - See the License for the specific language governing permissions and
+  - limitations under the License.
+  -
+  -->
+
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+<!--                                                     TEMPLATE                                                    -->
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+
+<template>
+    <div v-if="connected && showWalletInfo" :class="{'box': !isTouchDevice && isSmallScreen, 'h-box-border': !isTouchDevice && isSmallScreen}" 
+                style="position: absolute; display: flex; flex-direction: column; gap: 1rem; width: 380px; top: 45px; right: 0; z-index: 10; border: 1px solid white; padding: 16px 12px;">
+          <!-- header -->
+          <div style="display: flex; gap: 1rem">
+            <!-- logo icon -->
+            <figure style="width: 50px; height: 50px; display: flex; align-items: center;">
+                <img :src="walletIconURL ?? undefined" alt="wallet logo" style="object-fit: contain; aspect-ratio: 3/2;display: flex; height: 90%;">
+            </figure>
+
+            <!-- accountID-checksum -->
+            <div class="is-flex is-align-items-center" style="gap: 0.5rem; font-size: 1.35rem;">
+                <p>
+                  <!-- {{ accountId }} -->
+                  <router-link :to="accountRoute">
+                    <span class="is-numeric">{{ accountId }}</span>
+                  </router-link>
+                  <span class="has-text-grey h-is-smaller">-{{ accountChecksum }}</span>
+                </p>
+                <i v-if="!contentCopied.accountId.status" class="fa fa-thin fa-clone fa-rotate-180" style="font-size: 0.9rem; cursor:pointer;" @click="copyToClipboard(accountId, contentCopied.accountId.mode)"/>
+                <i v-else class="fa fa-thin fa-check" style="font-size: 0.9rem;"/>
+            </div>
+          </div>
+
+          <!-- EVM address -->
+          <div class="p-2" style="border: 1px solid white;">
+            <p class="has-text-grey h-is-smaller">EVM ADDRESS</p>
+
+            <div class="is-flex is-align-items-center" style="gap: 0.5rem">
+              <p>
+                <router-link :to="accountRoute">
+                  {{ accountEthereumAddress?.slice(0, 18) }}...{{ accountEthereumAddress?.slice(-8)}}
+                </router-link>
+              </p>
+              <i v-if="!contentCopied.evmAddress.status" class="fa fa-thin fa-clone fa-rotate-180" style="font-size: 0.9rem; cursor:pointer;" @click="copyToClipboard(accountEthereumAddress, contentCopied.evmAddress.mode)"/>
+              <i v-else class="fa fa-thin fa-check" style="font-size: 0.9rem;"/>
+
+            </div>
+          </div>
+
+          <!-- balance -->
+          <div class="p-2" style="border: 1px solid white;">
+            <p class="has-text-grey h-is-smaller">BALANCE</p>
+            <p class="has-text-white" style="font-size: 1.2rem">{{ formattedAmount }} ℏ</p>
+
+            <span>
+              <HbarExtra :hide-zero="false" :small-extra="false" :tbar-amount="tbarBalance ?? 0"/>
+            </span>
+          </div>
+
+          <!-- Footer -->
+          <div class="is-flex is-justify-content-space-between">
+            <button class="has-text-white" style="outline: none; height: 40px; font-size: small; background-color: transparent; border: 1px solid white; cursor: pointer;">
+              CHANGE ACCOUNT
+            </button>
+
+            <button @click="disconnectFromWallet" class="has-text-white" style="outline: none; height: 40px; font-size: small; background-color: transparent; border: 1px solid white; cursor: pointer;">
+              DISCONNECT WALLET
+            </button>
+          </div>
+        </div>
+</template>
+
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+<!--                                                      SCRIPT                                                     -->
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+
+<script lang="ts">
+import {routeManager, walletManager} from "@/router";
+import HbarExtra from "@/components/values/HbarExtra.vue";
+import { AccountLocParser } from '@/utils/parser/AccountLocParser';
+import { BalanceAnalyzer } from '@/utils/analyzer/BalanceAnalyzer';
+import { computed, defineComponent, inject, onBeforeUnmount, onMounted, ref } from 'vue';
+
+
+
+export default defineComponent({
+    name: "WalletInfo",
+    components: {HbarExtra},
+    props: {
+        connected: {
+            type: Boolean,
+            default: false,
+        },
+        showWalletInfo: {
+            type: Boolean,
+            default: false,
+        },
+        walletIconURL: {
+            type: String,
+            default: undefined,
+        },
+        accountId: {
+            type: String,
+            default: undefined,
+        },
+    },
+    emit: ['walletDisconnect'],
+    
+    setup(props, ctx) {
+        const isSmallScreen = inject('isSmallScreen', true)
+        const isMediumScreen = inject('isMediumScreen', true)
+        const isTouchDevice = inject('isTouchDevice', false)
+        const contentCopied = ref({
+          accountId: {
+            mode: "ACCOUNT_ID",
+            status: false,
+          },
+          evmAddress: {
+            mode: "EVM_ADDRESS",
+            status: false,
+          },
+        });
+
+        //
+        // Account
+        //
+        const accountLocParser = new AccountLocParser(walletManager.accountId)
+        onMounted(() => accountLocParser.mount())
+        onBeforeUnmount(() => accountLocParser.unmount())
+
+        const accountRoute = computed(() => {
+          return walletManager.accountId.value !== null
+              ? routeManager.makeRouteToAccount(walletManager.accountId.value, false)
+              : null
+         })
+        
+        const accountEthereumAddress = accountLocParser.ethereumAddress
+
+        // 
+        // Balance
+        // 
+        const balanceAnalyzer = new BalanceAnalyzer(accountLocParser.accountId, 10000)
+        onMounted(() => balanceAnalyzer.mount())
+        onBeforeUnmount(() => balanceAnalyzer.unmount())
+
+        const hbarBalance = computed(() => {
+            return (balanceAnalyzer.hbarBalance.value ??0) / 100000000
+        })
+
+        const formattedAmount = computed(() => {
+            const amountFormatter = new Intl.NumberFormat('en-US', {
+                minimumFractionDigits: 0,
+                maximumFractionDigits: 8
+            })
+            return amountFormatter.format(hbarBalance.value)
+        })
+
+        // 
+        // disconnect from wallet
+        // 
+        const disconnectFromWallet = () => {
+          ctx.emit('walletDisconnect', true)
+        }
+
+        // 
+        // Copy content to clipboard
+        //
+        const copyToClipboard = (contentToCopy: any, mode: "ACCOUNT_ID" | "EVM_ADDRESS"): void => {
+          navigator.clipboard.writeText(contentToCopy);
+          switch (mode) {
+            case "ACCOUNT_ID":
+              contentCopied.value.accountId.status = true;
+              break;
+              
+            case "EVM_ADDRESS":
+              contentCopied.value.evmAddress.status = true;
+              break;
+            }
+            
+            setTimeout(() => {
+              contentCopied.value.accountId.status = false;
+              contentCopied.value.evmAddress.status = false;
+            }, 2000)
+        }
+
+        return {
+            accountRoute,
+            isTouchDevice,
+            contentCopied,
+            isSmallScreen,
+            isMediumScreen,
+            copyToClipboard,
+            formattedAmount,
+            disconnectFromWallet,
+            tbarBalance: balanceAnalyzer.hbarBalance,
+            accountChecksum: accountLocParser.accountChecksum,
+            accountEthereumAddress,
+        }
+    },
+})
+
+</script>
+
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+<!--                                                       STYLE                                                     -->
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+
+<style/>
+

From cd6bb06c5f54e684f49c8298de3bc717141d2ca3 Mon Sep 17 00:00:00 2001
From: Logan Nguyen <logan.nguyen@swirldslabs.com>
Date: Thu, 12 Oct 2023 22:48:23 -0500
Subject: [PATCH 09/23] test: fixed unit test to match with new UI

Signed-off-by: Logan Nguyen <logan.nguyen@swirldslabs.com>
---
 tests/unit/App.spec.ts       | 20 +++++++++++--------
 tests/unit/TopNavBar.spec.ts | 38 ++++++++++++++++++++----------------
 2 files changed, 33 insertions(+), 25 deletions(-)

diff --git a/tests/unit/App.spec.ts b/tests/unit/App.spec.ts
index 8b2d6021f..51e268a84 100644
--- a/tests/unit/App.spec.ts
+++ b/tests/unit/App.spec.ts
@@ -94,7 +94,7 @@ describe("App.vue", () => {
         const navBar = wrapper.findComponent(TopNavBar)
         expect(navBar.exists()).toBe(true)
         expect(navBar.text()).toBe(
-            "CUSTOMNET1CUSTOMNET2CUSTOMNET3DashboardTransactionsTokensTopicsContractsAccountsNodesBlocks")
+            "Connect WalletCANCELCONNECT DisclaimerPlease don't show me this next timeCANCELAGREEFillerFillerCLOSEDashboardTransactionsTokensTopicsContractsAccountsNodesBlocksCUSTOMNET1CUSTOMNET2CUSTOMNET3CONNECT WALLET")
 
         expect(wrapper.findComponent(HbarMarketDashboard).exists()).toBe(true)
 
@@ -105,13 +105,17 @@ describe("App.vue", () => {
         expect(cards[2].text()).toMatch(RegExp("^HCS Messages"))
 
         const logos = wrapper.findAll("img")
-        expect(logos.length).toBe(6)
-        expect(logos[0].attributes('alt')).toBe("Product Logo")
-        expect(logos[1].attributes('alt')).toBe("Modal close icon")
-        expect(logos[2].attributes('alt')).toBe("Trend Up")
-        expect(logos[3].attributes('alt')).toBe("Trend Up")
-        expect(logos[4].attributes('alt')).toBe("Built On Hedera")
-        expect(logos[5].attributes('alt')).toBe("Sponsor Logo")
+        expect(logos.length).toBe(10)
+        expect(logos[0].attributes('alt')).toBe("")
+        expect(logos[1].attributes('alt')).toBe("wallet logo")
+        expect(logos[2].attributes('alt')).toBe("wallet logo")
+        expect(logos[3].attributes('alt')).toBe("Modal close icon")
+        expect(logos[4].attributes('alt')).toBe("Product Logo")
+        expect(logos[5].attributes('alt')).toBe("Modal close icon")
+        expect(logos[6].attributes('alt')).toBe("Trend Up")
+        expect(logos[7].attributes('alt')).toBe("Trend Up")
+        expect(logos[8].attributes('alt')).toBe("Built On Hedera")
+        expect(logos[9].attributes('alt')).toBe("Sponsor Logo")
 
         mock.restore()
         wrapper.unmount()
diff --git a/tests/unit/TopNavBar.spec.ts b/tests/unit/TopNavBar.spec.ts
index 9dca53cd2..25fd5b7c2 100644
--- a/tests/unit/TopNavBar.spec.ts
+++ b/tests/unit/TopNavBar.spec.ts
@@ -54,10 +54,10 @@ describe("TopNavBar.vue", () => {
         // console.log(wrapper.text())
 
         expect(wrapper.text()).toBe(
-            "MAINNETTESTNETPREVIEWNETDashboardTransactionsTokensTopicsContractsAccountsNodesStakingBlocks")
+            "Connect WalletCANCELCONNECT DisclaimerPlease don't show me this next timeCANCELAGREEFillerFillerCLOSEDashboardTransactionsTokensTopicsContractsAccountsNodesStakingBlocksMAINNETTESTNETPREVIEWNETCONNECT WALLET")
 
         const links = wrapper.findAll("a")
-        expect(links.length).toBe(11)
+        expect(links.length).toBe(15)
 
         wrapper.unmount()
         await flushPromises()
@@ -80,27 +80,31 @@ describe("TopNavBar.vue", () => {
         // console.log(wrapper.text())
 
         expect(wrapper.text()).toBe(
-            "MAINNETTESTNETPREVIEWNETDashboardTransactionsTokensTopicsContractsAccountsNodesStakingBlocks")
+            "Connect WalletCANCELCONNECT DisclaimerPlease don't show me this next timeCANCELAGREEFillerFillerCLOSEDashboardTransactionsTokensTopicsContractsAccountsNodesStakingBlocksMAINNETTESTNETPREVIEWNETCONNECT WALLET")
 
         const links = wrapper.findAll("a")
-        expect(links.length).toBe(11)
-
-        expect(links[2].text()).toBe("Dashboard")
-        expect(links[3].text()).toBe("Transactions")
-        expect(links[4].text()).toBe("Tokens")
-        expect(links[5].text()).toBe("Topics")
-        expect(links[6].text()).toBe("Contracts")
-        expect(links[7].text()).toBe("Accounts")
-        expect(links[8].text()).toBe("Nodes")
-        expect(links[9].text()).toBe("Staking")
-        expect(links[10].text()).toBe("Blocks")
+        expect(links.length).toBe(15)
+
+        expect(links[6].text()).toBe("Dashboard")
+        expect(links[7].text()).toBe("Transactions")
+        expect(links[8].text()).toBe("Tokens")
+        expect(links[9].text()).toBe("Topics")
+        expect(links[10].text()).toBe("Contracts")
+        expect(links[11].text()).toBe("Accounts")
+        expect(links[12].text()).toBe("Nodes")
+        expect(links[13].text()).toBe("Staking")
+        expect(links[14].text()).toBe("Blocks")
 
         expect(wrapper.findComponent(SearchBar).exists()).toBe(true)
 
         const logos = wrapper.findAll("img")
-        expect(logos.length).toBe(2)
-        expect(logos[0].attributes('alt')).toBe("Product Logo")
-        expect(logos[1].attributes('alt')).toBe("Modal close icon")
+        expect(logos.length).toBe(6)
+        logos.forEach(logo => console.log(logo.attributes('alt') === "" ? "aabc" : logo.attributes('alt')))
+        expect(logos[1].attributes('alt')).toBe("wallet logo")
+        expect(logos[2].attributes('alt')).toBe("wallet logo")
+        expect(logos[3].attributes('alt')).toBe("Modal close icon")
+        expect(logos[4].attributes('alt')).toBe("Product Logo")
+        expect(logos[5].attributes('alt')).toBe("Modal close icon")
 
         wrapper.unmount()
         await flushPromises()

From 8315974fa471309fddf4b8121061bf051d772402 Mon Sep 17 00:00:00 2001
From: Logan Nguyen <logan.nguyen@swirldslabs.com>
Date: Fri, 13 Oct 2023 12:36:36 -0500
Subject: [PATCH 10/23] update(style+test): restyled connect wallet button and
 fix corresponded unit tests

Signed-off-by: Logan Nguyen <logan.nguyen@swirldslabs.com>
---
 src/components/TopNavBar.vue         | 14 ++++++++++----
 src/components/wallet/WalletInfo.vue |  4 ++--
 tests/unit/App.spec.ts               |  2 +-
 tests/unit/TopNavBar.spec.ts         |  5 ++---
 4 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/components/TopNavBar.vue b/src/components/TopNavBar.vue
index def0e855f..1abde458c 100644
--- a/src/components/TopNavBar.vue
+++ b/src/components/TopNavBar.vue
@@ -122,11 +122,11 @@
         </div>
 
         <div style="grid-column: span 3;">
-          <button v-if="!connected" :disabled="connecting" id="connectWalletButton" class="button" @click="chooseWallet" style="outline: none; height: 40px; width: 100%; font-size: 0.9rem;">
-            {{ connecting ? "Connecting..." : "CONNECT WALLET" }}
+          <button v-if="!connected" :disabled="connecting" id="connectWalletButton" class="button is-white is-small" @click="chooseWallet" style="outline: none; height: 40px; width: 100%; font-size: 0.8rem;">
+            {{ connecting ? "Connecting..." : "CONNECT WALLET..." }}
           </button>
 
-          <div v-else @click="showWalletInfo = !showWalletInfo" class="is-flex is-align-items-center" style="outline: none; height: 40px; width: 100%; font-size: 0.9rem; border: 1px solid white; display: flex; justify-content: space-between; cursor: pointer;">
+          <div v-else @click="showWalletInfo = !showWalletInfo" class="is-flex is-align-items-center" style="outline: none; height: 40px; width: 100%; font-size: 0.9rem; border: 0.5px solid white; display: flex; justify-content: space-between; cursor: pointer;">
             <figure style="width: 50px; height: 100%; display: flex; align-items: center; margin-left: 0.15rem;">
                 <img :src="walletIconURL ?? undefined" alt="wallet logo" style="object-fit: contain; aspect-ratio: 3/2;display: flex; height: 90%;">
             </figure>
@@ -143,7 +143,13 @@
           </div>
         </div>
 
-        <WalletInfo :connected="connected" :showWalletInfo="showWalletInfo" :walletIconURL="walletIconURL || undefined" :accountId="accountId || undefined" @walletDisconnect="disconnectFromWallet"/>
+        <WalletInfo 
+          :connected="connected" 
+          :showWalletInfo="showWalletInfo" 
+          :walletIconURL="walletIconURL || undefined" 
+          :accountId="accountId || undefined" 
+          @walletDisconnect="disconnectFromWallet"
+        />
         
       </div>
     </div>
diff --git a/src/components/wallet/WalletInfo.vue b/src/components/wallet/WalletInfo.vue
index 24a7d397b..05093fdaa 100644
--- a/src/components/wallet/WalletInfo.vue
+++ b/src/components/wallet/WalletInfo.vue
@@ -74,11 +74,11 @@
 
           <!-- Footer -->
           <div class="is-flex is-justify-content-space-between">
-            <button class="has-text-white" style="outline: none; height: 40px; font-size: small; background-color: transparent; border: 1px solid white; cursor: pointer;">
+            <button class="button is-white is-small" style="outline: none; height: 40px">
               CHANGE ACCOUNT
             </button>
 
-            <button @click="disconnectFromWallet" class="has-text-white" style="outline: none; height: 40px; font-size: small; background-color: transparent; border: 1px solid white; cursor: pointer;">
+            <button @click="disconnectFromWallet" class="button is-white is-small" style="outline: none; height: 40px">
               DISCONNECT WALLET
             </button>
           </div>
diff --git a/tests/unit/App.spec.ts b/tests/unit/App.spec.ts
index 51e268a84..e5ff11c4b 100644
--- a/tests/unit/App.spec.ts
+++ b/tests/unit/App.spec.ts
@@ -94,7 +94,7 @@ describe("App.vue", () => {
         const navBar = wrapper.findComponent(TopNavBar)
         expect(navBar.exists()).toBe(true)
         expect(navBar.text()).toBe(
-            "Connect WalletCANCELCONNECT DisclaimerPlease don't show me this next timeCANCELAGREEFillerFillerCLOSEDashboardTransactionsTokensTopicsContractsAccountsNodesBlocksCUSTOMNET1CUSTOMNET2CUSTOMNET3CONNECT WALLET")
+            "Connect WalletCANCELCONNECT DisclaimerPlease don't show me this next timeCANCELAGREEFillerFillerCLOSEDashboardTransactionsTokensTopicsContractsAccountsNodesBlocksCUSTOMNET1CUSTOMNET2CUSTOMNET3CONNECT WALLET...")
 
         expect(wrapper.findComponent(HbarMarketDashboard).exists()).toBe(true)
 
diff --git a/tests/unit/TopNavBar.spec.ts b/tests/unit/TopNavBar.spec.ts
index 25fd5b7c2..ff68275ff 100644
--- a/tests/unit/TopNavBar.spec.ts
+++ b/tests/unit/TopNavBar.spec.ts
@@ -54,7 +54,7 @@ describe("TopNavBar.vue", () => {
         // console.log(wrapper.text())
 
         expect(wrapper.text()).toBe(
-            "Connect WalletCANCELCONNECT DisclaimerPlease don't show me this next timeCANCELAGREEFillerFillerCLOSEDashboardTransactionsTokensTopicsContractsAccountsNodesStakingBlocksMAINNETTESTNETPREVIEWNETCONNECT WALLET")
+            "Connect WalletCANCELCONNECT DisclaimerPlease don't show me this next timeCANCELAGREEFillerFillerCLOSEDashboardTransactionsTokensTopicsContractsAccountsNodesStakingBlocksMAINNETTESTNETPREVIEWNETCONNECT WALLET...")
 
         const links = wrapper.findAll("a")
         expect(links.length).toBe(15)
@@ -80,7 +80,7 @@ describe("TopNavBar.vue", () => {
         // console.log(wrapper.text())
 
         expect(wrapper.text()).toBe(
-            "Connect WalletCANCELCONNECT DisclaimerPlease don't show me this next timeCANCELAGREEFillerFillerCLOSEDashboardTransactionsTokensTopicsContractsAccountsNodesStakingBlocksMAINNETTESTNETPREVIEWNETCONNECT WALLET")
+            "Connect WalletCANCELCONNECT DisclaimerPlease don't show me this next timeCANCELAGREEFillerFillerCLOSEDashboardTransactionsTokensTopicsContractsAccountsNodesStakingBlocksMAINNETTESTNETPREVIEWNETCONNECT WALLET...")
 
         const links = wrapper.findAll("a")
         expect(links.length).toBe(15)
@@ -99,7 +99,6 @@ describe("TopNavBar.vue", () => {
 
         const logos = wrapper.findAll("img")
         expect(logos.length).toBe(6)
-        logos.forEach(logo => console.log(logo.attributes('alt') === "" ? "aabc" : logo.attributes('alt')))
         expect(logos[1].attributes('alt')).toBe("wallet logo")
         expect(logos[2].attributes('alt')).toBe("wallet logo")
         expect(logos[3].attributes('alt')).toBe("Modal close icon")

From 334f3bbcb9e8cbb3f5ed3438446decc943938950 Mon Sep 17 00:00:00 2001
From: Logan Nguyen <logan.nguyen@swirldslabs.com>
Date: Fri, 13 Oct 2023 12:41:25 -0500
Subject: [PATCH 11/23] style: thinner network selector's border

Signed-off-by: Logan Nguyen <logan.nguyen@swirldslabs.com>
---
 src/components/TopNavBar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/TopNavBar.vue b/src/components/TopNavBar.vue
index 1abde458c..0d2c1dd69 100644
--- a/src/components/TopNavBar.vue
+++ b/src/components/TopNavBar.vue
@@ -113,7 +113,7 @@
         
         <div style="grid-column: span 2;">
           <o-field>
-            <o-select v-model="selectedNetwork" class="h-is-navbar-item" style="outline: none; height: 40px">
+            <o-select v-model="selectedNetwork" class="h-is-navbar-item" style="outline: none; height: 40px; border-width: 0.5px">
               <option v-for="network in networkEntries" :key="network.name" :value="network.name">
                 {{ network.displayName }}
               </option>

From e9a40385fc1c8d0093a361c9638f4e01b587751d Mon Sep 17 00:00:00 2001
From: Logan Nguyen <logan.nguyen@swirldslabs.com>
Date: Fri, 13 Oct 2023 12:58:31 -0500
Subject: [PATCH 12/23] update: removed connect button in Stake component and
 fix corresponded unit test

- in the test, added topNavBarWrapper component to trigger #connectWalletButton button and execute wallet connect logic

Signed-off-by: Logan Nguyen <logan.nguyen@swirldslabs.com>
---
 src/pages/Staking.vue              |  1 -
 tests/unit/staking/Staking.spec.ts | 14 +++++++++++---
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/pages/Staking.vue b/src/pages/Staking.vue
index 3b2a5a497..adeb1dace 100644
--- a/src/pages/Staking.vue
+++ b/src/pages/Staking.vue
@@ -207,7 +207,6 @@
               To view or change your staking options first connect your wallet.
             </p>
             <br/>
-            <button id="connectWalletButton" class="button is-white is-small" @click="chooseWallet">CONNECT WALLET…</button>
           </section>
         </template>
 
diff --git a/tests/unit/staking/Staking.spec.ts b/tests/unit/staking/Staking.spec.ts
index f8caf253f..c180a439e 100644
--- a/tests/unit/staking/Staking.spec.ts
+++ b/tests/unit/staking/Staking.spec.ts
@@ -26,6 +26,7 @@ import router, {walletManager} from "@/router";
 import Oruga from "@oruga-ui/oruga-next";
 import {HMSF} from "@/utils/HMSF";
 import Staking from "@/pages/Staking.vue";
+import TopNavBar from "@/components/TopNavBar.vue";
 import WalletChooser from "@/components/staking/WalletChooser.vue";
 import {WalletDriver_Mock} from "./WalletDriver_Mock";
 import MockAdapter from "axios-mock-adapter";
@@ -104,6 +105,13 @@ describe("Staking.vue", () => {
             props: { polling: POLLING},
         });
 
+        const topNavBarWrapper = mount(TopNavBar, {
+            global: {
+                plugins: [router, Oruga]
+            },
+            props: {},
+        });
+
         await flushPromises()
 
 
@@ -111,10 +119,10 @@ describe("Staking.vue", () => {
         // 1) Connection to Wallet
         //
 
-        // 1.1) Clicks "CONNECT WALLET"
-        await wrapper.get("#connectWalletButton").trigger("click")
+        // 1.1) Clicks "CONNECT WALLET" from TopNavBar comopnent
+        await topNavBarWrapper.get("#connectWalletButton").trigger("click")
         await flushPromises()
-        const walletChooser = wrapper.getComponent(WalletChooser)
+        const walletChooser = topNavBarWrapper.getComponent(WalletChooser)
         expect(walletChooser.get(".modal").element.classList.contains("is-active")).toBeTruthy()
 
         // 1.2) Chooses wallet "DriverMock"

From 86fc6c0a78ed7607a51a8daa6f052a95d1402802 Mon Sep 17 00:00:00 2001
From: Logan Nguyen <logan.nguyen@swirldslabs.com>
Date: Mon, 16 Oct 2023 12:56:46 -0500
Subject: [PATCH 13/23] update: added guard conditions to router-link

Signed-off-by: Logan Nguyen <logan.nguyen@swirldslabs.com>
---
 src/components/wallet/WalletInfo.vue | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/wallet/WalletInfo.vue b/src/components/wallet/WalletInfo.vue
index 05093fdaa..53702ee42 100644
--- a/src/components/wallet/WalletInfo.vue
+++ b/src/components/wallet/WalletInfo.vue
@@ -36,7 +36,7 @@
             <div class="is-flex is-align-items-center" style="gap: 0.5rem; font-size: 1.35rem;">
                 <p>
                   <!-- {{ accountId }} -->
-                  <router-link :to="accountRoute">
+                  <router-link v-if="accountRoute" :to="accountRoute">
                     <span class="is-numeric">{{ accountId }}</span>
                   </router-link>
                   <span class="has-text-grey h-is-smaller">-{{ accountChecksum }}</span>
@@ -52,7 +52,7 @@
 
             <div class="is-flex is-align-items-center" style="gap: 0.5rem">
               <p>
-                <router-link :to="accountRoute">
+                <router-link v-if="accountRoute" :to="accountRoute">
                   {{ accountEthereumAddress?.slice(0, 18) }}...{{ accountEthereumAddress?.slice(-8)}}
                 </router-link>
               </p>
@@ -180,7 +180,7 @@ export default defineComponent({
         // 
         // Copy content to clipboard
         //
-        const copyToClipboard = (contentToCopy: any, mode: "ACCOUNT_ID" | "EVM_ADDRESS"): void => {
+        const copyToClipboard = (contentToCopy: any, mode: string): void => {
           navigator.clipboard.writeText(contentToCopy);
           switch (mode) {
             case "ACCOUNT_ID":
@@ -190,6 +190,9 @@ export default defineComponent({
             case "EVM_ADDRESS":
               contentCopied.value.evmAddress.status = true;
               break;
+
+            default:
+              return
             }
             
             setTimeout(() => {

From c289115376f9c36e44e8c8eac963b0d6e3067040 Mon Sep 17 00:00:00 2001
From: Logan Nguyen <logan.nguyen@swirldslabs.com>
Date: Mon, 16 Oct 2023 16:45:23 -0500
Subject: [PATCH 14/23] update: used copyable component for copyable content in
 WalletInfo component

Signed-off-by: Logan Nguyen <logan.nguyen@swirldslabs.com>
---
 src/components/wallet/WalletInfo.vue | 79 ++++++++--------------------
 1 file changed, 22 insertions(+), 57 deletions(-)

diff --git a/src/components/wallet/WalletInfo.vue b/src/components/wallet/WalletInfo.vue
index 53702ee42..c11d2a25c 100644
--- a/src/components/wallet/WalletInfo.vue
+++ b/src/components/wallet/WalletInfo.vue
@@ -33,16 +33,15 @@
             </figure>
 
             <!-- accountID-checksum -->
-            <div class="is-flex is-align-items-center" style="gap: 0.5rem; font-size: 1.35rem;">
-                <p>
-                  <!-- {{ accountId }} -->
-                  <router-link v-if="accountRoute" :to="accountRoute">
-                    <span class="is-numeric">{{ accountId }}</span>
-                  </router-link>
-                  <span class="has-text-grey h-is-smaller">-{{ accountChecksum }}</span>
-                </p>
-                <i v-if="!contentCopied.accountId.status" class="fa fa-thin fa-clone fa-rotate-180" style="font-size: 0.9rem; cursor:pointer;" @click="copyToClipboard(accountId, contentCopied.accountId.mode)"/>
-                <i v-else class="fa fa-thin fa-check" style="font-size: 0.9rem;"/>
+            <div class="is-flex is-align-items-center">
+              <Copyable :content-to-copy="accountId ?? ''">
+                <template v-slot:content>
+                  <p style="font-size: 1.35rem;">
+                      <span class="is-numeric">{{ accountId }}</span>
+                  </p>
+                </template>
+              </Copyable>
+              <span class="has-text-grey h-is-smaller">-{{ accountChecksum }}</span>
             </div>
           </div>
 
@@ -50,16 +49,17 @@
           <div class="p-2" style="border: 1px solid white;">
             <p class="has-text-grey h-is-smaller">EVM ADDRESS</p>
 
-            <div class="is-flex is-align-items-center" style="gap: 0.5rem">
-              <p>
-                <router-link v-if="accountRoute" :to="accountRoute">
-                  {{ accountEthereumAddress?.slice(0, 18) }}...{{ accountEthereumAddress?.slice(-8)}}
-                </router-link>
-              </p>
-              <i v-if="!contentCopied.evmAddress.status" class="fa fa-thin fa-clone fa-rotate-180" style="font-size: 0.9rem; cursor:pointer;" @click="copyToClipboard(accountEthereumAddress, contentCopied.evmAddress.mode)"/>
-              <i v-else class="fa fa-thin fa-check" style="font-size: 0.9rem;"/>
-
-            </div>
+            <Copyable :content-to-copy="accountEthereumAddress ?? ''">
+              <template v-slot:content>
+                <div class="is-flex is-align-items-center" style="gap: 0.5rem">
+                  <p v-if="accountEthereumAddress">
+                    {{ accountEthereumAddress.slice(0, 15) }}...{{ accountEthereumAddress.slice(-12)}}
+                  </p>
+
+                  <p v-else>N/A</p>
+                </div>
+              </template>
+            </Copyable>
           </div>
 
           <!-- balance -->
@@ -90,6 +90,7 @@
 <!-- --------------------------------------------------------------------------------------------------------------- -->
 
 <script lang="ts">
+import Copyable from "@/components/Copyable.vue";
 import {routeManager, walletManager} from "@/router";
 import HbarExtra from "@/components/values/HbarExtra.vue";
 import { AccountLocParser } from '@/utils/parser/AccountLocParser';
@@ -100,7 +101,7 @@ import { computed, defineComponent, inject, onBeforeUnmount, onMounted, ref } fr
 
 export default defineComponent({
     name: "WalletInfo",
-    components: {HbarExtra},
+    components: {HbarExtra, Copyable},
     props: {
         connected: {
             type: Boolean,
@@ -125,16 +126,6 @@ export default defineComponent({
         const isSmallScreen = inject('isSmallScreen', true)
         const isMediumScreen = inject('isMediumScreen', true)
         const isTouchDevice = inject('isTouchDevice', false)
-        const contentCopied = ref({
-          accountId: {
-            mode: "ACCOUNT_ID",
-            status: false,
-          },
-          evmAddress: {
-            mode: "EVM_ADDRESS",
-            status: false,
-          },
-        });
 
         //
         // Account
@@ -177,37 +168,11 @@ export default defineComponent({
           ctx.emit('walletDisconnect', true)
         }
 
-        // 
-        // Copy content to clipboard
-        //
-        const copyToClipboard = (contentToCopy: any, mode: string): void => {
-          navigator.clipboard.writeText(contentToCopy);
-          switch (mode) {
-            case "ACCOUNT_ID":
-              contentCopied.value.accountId.status = true;
-              break;
-              
-            case "EVM_ADDRESS":
-              contentCopied.value.evmAddress.status = true;
-              break;
-
-            default:
-              return
-            }
-            
-            setTimeout(() => {
-              contentCopied.value.accountId.status = false;
-              contentCopied.value.evmAddress.status = false;
-            }, 2000)
-        }
-
         return {
             accountRoute,
             isTouchDevice,
-            contentCopied,
             isSmallScreen,
             isMediumScreen,
-            copyToClipboard,
             formattedAmount,
             disconnectFromWallet,
             tbarBalance: balanceAnalyzer.hbarBalance,

From 13b63142c355d57bb596a9ee0158d1c1c4c3c76b Mon Sep 17 00:00:00 2001
From: Logan Nguyen <logan.nguyen@swirldslabs.com>
Date: Tue, 24 Oct 2023 10:58:12 -0500
Subject: [PATCH 15/23] update: re-order wallet logo urls

Signed-off-by: Logan Nguyen <logan.nguyen@swirldslabs.com>
---
 src/utils/wallet/WalletDriver_Blade.ts    | 4 ++--
 src/utils/wallet/WalletDriver_Hashpack.ts | 4 ++--
 src/utils/wallet/WalletDriver_Metamask.ts | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/utils/wallet/WalletDriver_Blade.ts b/src/utils/wallet/WalletDriver_Blade.ts
index aa2e166c7..ffa184a28 100644
--- a/src/utils/wallet/WalletDriver_Blade.ts
+++ b/src/utils/wallet/WalletDriver_Blade.ts
@@ -40,8 +40,8 @@ export class WalletDriver_Blade extends WalletDriver_Hedera {
 
     public constructor() {
         super("Blade",
-            "data:image/png;base64,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",
-            "https://www.bladewallet.io/wp-content/uploads/2022/04/BladeWalletWhite.svg")
+            "https://www.bladewallet.io/wp-content/uploads/2022/04/BladeWalletWhite.svg",
+            "data:image/png;base64,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")
     }
 
     //
diff --git a/src/utils/wallet/WalletDriver_Hashpack.ts b/src/utils/wallet/WalletDriver_Hashpack.ts
index 6ae6547f2..d4a903348 100644
--- a/src/utils/wallet/WalletDriver_Hashpack.ts
+++ b/src/utils/wallet/WalletDriver_Hashpack.ts
@@ -42,8 +42,8 @@ export class WalletDriver_Hashpack extends WalletDriver_Hedera {
 
     public constructor() {
         super("HashPack",
-            "data:image/png;base64,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",
-            "https://uploads-ssl.webflow.com/61ce2e4bcaa2660da2bb419e/61cf5cc71c9324950d7e071d_logo-colour-white.svg")
+            "https://uploads-ssl.webflow.com/61ce2e4bcaa2660da2bb419e/61cf5cc71c9324950d7e071d_logo-colour-white.svg",
+            "data:image/png;base64,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")
     }
 
 
diff --git a/src/utils/wallet/WalletDriver_Metamask.ts b/src/utils/wallet/WalletDriver_Metamask.ts
index 5cc368ac2..6630fdd21 100644
--- a/src/utils/wallet/WalletDriver_Metamask.ts
+++ b/src/utils/wallet/WalletDriver_Metamask.ts
@@ -53,8 +53,8 @@ export class WalletDriver_Metamask extends WalletDriver {
 
     public constructor() {
         super("Metamask",
-            "data:image/png;base64,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",
-            "https://freelogopng.com/images/all_img/1683020860metamask-logo-white.png")
+            "https://freelogopng.com/images/all_img/1683020860metamask-logo-white.png",
+            "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAJNElEQVRogd2ZXWxcRxXHfzP37r3rXX+snZo6jluvaS3cSDRBoklRm9bmgUhICPuhCB6QkwdA9KWRaKM8tGpQqVRCEekTEhXUfapKkeKA1D4gsNMWKhKkOkFJA03ijeM0aePaG+96P+7HDA/rXe9m7921k6gV/CVL67lzzpwz859zzszA/wv2DScSn7cNNwOz/KPbir//h+91pB68y57oO/SfVz9Po4Iwuy+ZIBoZPX3FHf/HJXf7c3+93AkgAA4M9wwrJacAtm2OsKvfSqOZ9A396sAL56Y/V8MPDA1L7Y8WPcZPzDuJk1dcAJRSIy++e3XaBPCU3CNXBU5ecbmw6CXGtkb3tNtyz9z+wZRATHjSeXXghVTqMzF6XzJhWtYTSrAPrRKZombydJ7loq70MaQYBaYFwP5HemeBZLUS2xDs6LPYttlca9RMSyEmXMc5OnA4lb7tRtv2uEaNasRwuf3UFZfj8w5FT98okj709kedopo+Qbiv2+ThfgvbFLUfNBO3g2KzB4aGDe2Pa8QoUAkkRU/zbsrh7DU3VFYpNSKefKR3QsJ4o0HabMHY1ijttgz6nLJNNR1rcS9uxPBMPpJwfWO82ugyFnKKt87WUiYIAv2SCKJPGHb0Wezoi9QrEtDV5qzP8lUsZi2UFnXtp664vJMqrldN2iRgBsJwfN5hIad4uD9Ssxpag+sJImbjGSvD9WSd8UVP89a/C1xe9tdrDkBCathQZLmw6HHkTP1AjmesW0fBq6Xi5es+vz+V26jxaK2nJYhjG5ICMkXNkTMFjs+vbbCiWz+rwYOCU+XAiUsOk2ea8z0IUnDSRDND83EDcXze4cKixze/ZNNuSxxPEI00NqToSbQWZIqKv5wrbnjWa6DVlDQM/5bC4EJOceRMgQ+ueThOYJSqQdE1uLDo8fqp/K0ZDyhDXSwnsiU2sJnDsKPPYvd9IEXwKvhK8KfTmnI5cItIH3r7o04JoLWeuR0aj887zH6qQr+nltTtMr5iswQQiFsuC2yzlOw2t5mhfTa3mnz3/hba7ZvcdFUo2yx+sqt31BAcuRVl1Zm6xfaJ2cHczhUN8kVjNYrdXOSphvbcrxjvzWXOfu2u+DEhxJ6bUbKlXTK2tYW4VdrAhgQrEkyjomvgK4FtCoa6TdIFzVI+nHKNrWfsF3/7eNoAeCjZfkRAz0Z1bOsx2T0YxZRrlDANHeqA40l8VeprSsHgphLdLi/fhBOCoQcGjNclgCHVGLChfbCr32JX0q5r1w1YoQLsDKuvmiAtHTV2eDqdNgF83xgWQjcMo1ETtvVKkl2StohJ1AguHRo5EIYdfRY77zL4JO9x9hPFxUVFutBQJOGZJIFUZe337+o9gmC0uld/pyDZJUl2CpJdpa5FR5IthEcaKTWdrcGhMr1i4vvhya495lYKwqsZTWpRlxxaumFWNJOH3vloDKoO9Y5h7U0YTnKwW25PdgqG7hREbzjE+KoUSW4WWjUOn9mCSUfcQwpNT5ugp03wYL+k4GlSi3D2E8WltEpdLeT2lmVqNGZ/dveEQIQebrJ5g6Lb2IFGZ4PFTATdpOCLWj7xaHiJobV+qfWZuX3l/2u4IIR4lBAOFxzJ4nUTIUCslgrV26D8WzSwz/PXPvp+2aC1za21YCVnEtmksEKKQiHEOFDvQOa55DBah57MopZCCsisNC7YhIBN7aKuHtIaFtMGuknEbIuHG7+KROa5vuG2Z+anYbWUKA2smiay7k6XeEvjMGOamqBV1FpghBR5ZcRjmu7O5rWSQFaCTZUD4tFmgralSLR7dU6czkZ5c6ENKCUyFWCnr6jM7PRSnNPZaJ3xbXEf22qe1FZpVBoPmtOnGi22jxuTCCH4YMnmd/NdnFkpGfNAe56BmBOaC6QB1xyTX1+6A4Ct8QLfunOZXV/IEW9RoTVUACo0Wt0DapR1HssipiZiKjpa4Rs9y3R2e/xxroMTCzHeXGjjiTs+DZW1TM0bH3fQG3P5+uYMI5uzDHUU0E6pxFjP7JexSqPSzdzK8/2z6PVdrUDpBmKlYJBo9WrarxcNhCdosf26GwrXE2RzJnkTemO1PF9eMYlaKrSGCkE6/vTFTpF9PrldaP3+RiQBsnmT1havrn0lb2BFVKADjmsQD5DJ5kxaY/XtzaC0PyK1ah59ghDGV8MIjzQRM1gm1iBxNYJEDpvpbATRhP+ZrMRx6y+uerpd7BuW3TI1fggTZEAKKboGV6+t5VOlBL6CqK2IxxqHXUPoftPzxaQhxRONOkZbNLmixC2sOSpEiUZK+bRUrYaUOvB+SIr61ckVDPKOQd6RNQlOSrBsmt4zCZiUeN4MTc4ChoT21tppNVdXI1c0SGcjlYNKuX+djirjfQXpbIS8Y6z2r3UsHlOBOm7Elp+fOyoHDqfSaJreStiWxrbWBqqueXwlWM6ZuF6p8XLGZ35Z1f1BaTMvr4Q7HLU1LdHmhwqtxVFYTWRa66NCrD0qhKG9TbGwVKpnbpw1pQRL0SF++68Cv/nzmUD5p3YP8NgXNVIv1bSXVkcgJcTj6wul5YsICaA8b2I9QkKsUam6EvW77iG383FyOx/n+OXwiPL3xQQrw0+T2/k4ftc9lfby5l4vdQBc6RyD1RUYOJxKzz01OI2g6SqUqWSaJcOLg7trjMmu5EJlz6fmgDWHjcXzROZPIM//c93UAdAwU36vq8QvLfQxQXMaAem2Vn9m6ct7ktbd99dl73MXL4UKXr1WW2b4XffgJgYobnkotem9wyloPoEACFW5Ua84oBTThuTZoP5a6xmkPqZ8MYnnzQwcTqWnXtuStNKLv4rY9mjUimIYBlprnvzR94m3RIPUsJIvsJxdob01jlKKfDFPoVCY9jOxsa/+8sM0wOyT9w5LQ4+ixKNCiO1BepQvJiu+VH+Y2z9YvuQtvRPDMVx3stGL5NQbLx+U0njWtmxs2+b68vWwrgAkOhI4rkM+n0cp/6cjj/3gYFjf2QNDSXx/2BD62yC2U3oKS9196MOBQAdmD9w7jAcDL27s5XHqtVeSIqKmWMdbmxACrXVKK39s5Ds/3NCl8uxTg9sRKjlw6HzwCtwqpt54+aAQMpCGZWj0S2SMgyN7996Wd+bb6gDA1CuvJEgUQi/JRsZ+/Jm89v/P4L+xWv0RTE0K4AAAAABJRU5ErkJggg==")
     }
 
     //

From d2f3de4fe492747e947736519f179bdf0fadb8cc Mon Sep 17 00:00:00 2001
From: Logan Nguyen <logan.nguyen@swirldslabs.com>
Date: Tue, 24 Oct 2023 13:00:17 -0500
Subject: [PATCH 16/23] feat: integrated change wallet account feature to
 WalletInfo component

Signed-off-by: Logan Nguyen <logan.nguyen@swirldslabs.com>
---
 src/components/TopNavBar.vue         | 15 +++++++--
 src/components/wallet/WalletInfo.vue | 47 +++++++++++++++++++++++++---
 2 files changed, 55 insertions(+), 7 deletions(-)

diff --git a/src/components/TopNavBar.vue b/src/components/TopNavBar.vue
index 0d2c1dd69..0ccbae3f1 100644
--- a/src/components/TopNavBar.vue
+++ b/src/components/TopNavBar.vue
@@ -145,10 +145,12 @@
 
         <WalletInfo 
           :connected="connected" 
+          :accountIds="accountIds"
           :showWalletInfo="showWalletInfo" 
-          :walletIconURL="walletIconURL || undefined" 
           :accountId="accountId || undefined" 
-          @walletDisconnect="disconnectFromWallet"
+          :walletIconURL="walletIconURL || undefined" 
+          @wallet-disconnect="disconnectFromWallet"
+          @change-account="handleChangeAccount"
         />
         
       </div>
@@ -234,6 +236,13 @@ export default defineComponent({
       walletIconURL.value = walletManager.getActiveDriver().iconURL || ""
     }
 
+    //
+    // handleChangeAccount
+    //
+    const handleChangeAccount = (chosenAccountId: string) => {
+      walletManager.changeAccount(chosenAccountId)
+    }
+
     //
     // disconnectFromWallet
     //
@@ -267,12 +276,14 @@ export default defineComponent({
       progressMainMessage,
       showProgressSpinner,
       progressDialogTitle,
+      handleChangeAccount,
       progressExtraMessage,
       disconnectFromWallet,
       progressExtraTransactionId,
       name: routeManager.currentRoute,
       accountId: walletManager.accountId,
       connected: walletManager.connected,
+      accountIds: walletManager.accountIds,
       isNodeRoute: routeManager.isNodeRoute,
       isTokenRoute: routeManager.isTokenRoute,
       isTopicRoute: routeManager.isTopicRoute,
diff --git a/src/components/wallet/WalletInfo.vue b/src/components/wallet/WalletInfo.vue
index c11d2a25c..1d95b6690 100644
--- a/src/components/wallet/WalletInfo.vue
+++ b/src/components/wallet/WalletInfo.vue
@@ -73,14 +73,29 @@
           </div>
 
           <!-- Footer -->
-          <div class="is-flex is-justify-content-space-between">
-            <button class="button is-white is-small" style="outline: none; height: 40px">
+          <div class="is-flex is-justify-content-space-between" style="position: relative;">
+            <button @click="showAccountIdsModal = !showAccountIdsModal"  class="button is-white is-small" style="outline: none; height: 40px">
               CHANGE ACCOUNT
             </button>
 
             <button @click="disconnectFromWallet" class="button is-white is-small" style="outline: none; height: 40px">
               DISCONNECT WALLET
             </button>
+
+            <div v-if="showAccountIdsModal" 
+                :class="{'box': !isTouchDevice && isSmallScreen, 'h-box-border': !isTouchDevice && isSmallScreen}"
+                style="position: absolute; z-index: 10; padding: 0.6rem; width: 44%; top: 120%; display: flex; flex-direction: column; gap: 0.3rem; max-height: 120px; overflow-y: auto;"
+            >
+              <div 
+                v-for="account in accountIds" :key="account"
+                class="is-flex is-align-items-center is-justify-content-space-between is-hover"
+                style="cursor: pointer;"
+                @click="changeAccount(account)"
+              >
+                <p>{{ account }}</p>
+                <i v-if="account === accountId" class="fas fa-solid fa-check is-flex is-align-items-center" style="font-size: 0.7rem;"/>
+              </div>
+            </div>
           </div>
         </div>
 </template>
@@ -119,13 +134,19 @@ export default defineComponent({
             type: String,
             default: undefined,
         },
+        accountIds: {
+            type: Array<string>,
+            default: undefined,
+        },
     },
-    emit: ['walletDisconnect'],
+    emit: ['walletDisconnect', 'changeAccount'],
     
     setup(props, ctx) {
         const isSmallScreen = inject('isSmallScreen', true)
         const isMediumScreen = inject('isMediumScreen', true)
         const isTouchDevice = inject('isTouchDevice', false)
+        const chosenAccountId = computed(() => props.accountId)
+        const showAccountIdsModal = ref(false)
 
         //
         // Account
@@ -161,23 +182,35 @@ export default defineComponent({
             return amountFormatter.format(hbarBalance.value)
         })
 
+        //
+        // Change account
+        //
+        const changeAccount = (accountId: string) => {
+          ctx.emit('changeAccount', accountId)
+          showAccountIdsModal.value = false;
+        }
+
         // 
         // disconnect from wallet
         // 
         const disconnectFromWallet = () => {
           ctx.emit('walletDisconnect', true)
+          showAccountIdsModal.value = false;
         }
 
         return {
             accountRoute,
             isTouchDevice,
+            changeAccount,
             isSmallScreen,
             isMediumScreen,
             formattedAmount,
+            chosenAccountId,
+            showAccountIdsModal,
             disconnectFromWallet,
+            accountEthereumAddress,
             tbarBalance: balanceAnalyzer.hbarBalance,
             accountChecksum: accountLocParser.accountChecksum,
-            accountEthereumAddress,
         }
     },
 })
@@ -188,5 +221,9 @@ export default defineComponent({
 <!--                                                       STYLE                                                     -->
 <!-- --------------------------------------------------------------------------------------------------------------- -->
 
-<style/>
+<style>
+  .is-hover:hover {
+    color: gray;
+  }
+</style>
 

From e9e5e1670ea35ce1b4f35d3438f3b76bf2538907 Mon Sep 17 00:00:00 2001
From: Logan Nguyen <logan.nguyen@swirldslabs.com>
Date: Tue, 31 Oct 2023 15:35:30 -0500
Subject: [PATCH 17/23] test: fixed unit tests

Signed-off-by: Logan Nguyen <logan.nguyen@swirldslabs.com>
---
 tests/unit/App.spec.ts       | 15 ++++++++-------
 tests/unit/TopNavBar.spec.ts | 35 +++++++++++++++++------------------
 2 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/tests/unit/App.spec.ts b/tests/unit/App.spec.ts
index e5ff11c4b..245222274 100644
--- a/tests/unit/App.spec.ts
+++ b/tests/unit/App.spec.ts
@@ -105,17 +105,18 @@ describe("App.vue", () => {
         expect(cards[2].text()).toMatch(RegExp("^HCS Messages"))
 
         const logos = wrapper.findAll("img")
-        expect(logos.length).toBe(10)
+        expect(logos.length).toBe(11)
         expect(logos[0].attributes('alt')).toBe("")
         expect(logos[1].attributes('alt')).toBe("wallet logo")
         expect(logos[2].attributes('alt')).toBe("wallet logo")
-        expect(logos[3].attributes('alt')).toBe("Modal close icon")
-        expect(logos[4].attributes('alt')).toBe("Product Logo")
-        expect(logos[5].attributes('alt')).toBe("Modal close icon")
-        expect(logos[6].attributes('alt')).toBe("Trend Up")
+        expect(logos[3].attributes('alt')).toBe("wallet logo")
+        expect(logos[4].attributes('alt')).toBe("Modal close icon")
+        expect(logos[5].attributes('alt')).toBe("Product Logo")
+        expect(logos[6].attributes('alt')).toBe("Modal close icon")
         expect(logos[7].attributes('alt')).toBe("Trend Up")
-        expect(logos[8].attributes('alt')).toBe("Built On Hedera")
-        expect(logos[9].attributes('alt')).toBe("Sponsor Logo")
+        expect(logos[8].attributes('alt')).toBe("Trend Up")
+        expect(logos[9].attributes('alt')).toBe("Built On Hedera")
+        expect(logos[10].attributes('alt')).toBe("Sponsor Logo")
 
         mock.restore()
         wrapper.unmount()
diff --git a/tests/unit/TopNavBar.spec.ts b/tests/unit/TopNavBar.spec.ts
index ff68275ff..b6a151aa4 100644
--- a/tests/unit/TopNavBar.spec.ts
+++ b/tests/unit/TopNavBar.spec.ts
@@ -57,7 +57,7 @@ describe("TopNavBar.vue", () => {
             "Connect WalletCANCELCONNECT DisclaimerPlease don't show me this next timeCANCELAGREEFillerFillerCLOSEDashboardTransactionsTokensTopicsContractsAccountsNodesStakingBlocksMAINNETTESTNETPREVIEWNETCONNECT WALLET...")
 
         const links = wrapper.findAll("a")
-        expect(links.length).toBe(15)
+        expect(links.length).toBe(16)
 
         wrapper.unmount()
         await flushPromises()
@@ -83,27 +83,28 @@ describe("TopNavBar.vue", () => {
             "Connect WalletCANCELCONNECT DisclaimerPlease don't show me this next timeCANCELAGREEFillerFillerCLOSEDashboardTransactionsTokensTopicsContractsAccountsNodesStakingBlocksMAINNETTESTNETPREVIEWNETCONNECT WALLET...")
 
         const links = wrapper.findAll("a")
-        expect(links.length).toBe(15)
-
-        expect(links[6].text()).toBe("Dashboard")
-        expect(links[7].text()).toBe("Transactions")
-        expect(links[8].text()).toBe("Tokens")
-        expect(links[9].text()).toBe("Topics")
-        expect(links[10].text()).toBe("Contracts")
-        expect(links[11].text()).toBe("Accounts")
-        expect(links[12].text()).toBe("Nodes")
-        expect(links[13].text()).toBe("Staking")
-        expect(links[14].text()).toBe("Blocks")
+        expect(links.length).toBe(16)
+
+        expect(links[7].text()).toBe("Dashboard")
+        expect(links[8].text()).toBe("Transactions")
+        expect(links[9].text()).toBe("Tokens")
+        expect(links[10].text()).toBe("Topics")
+        expect(links[11].text()).toBe("Contracts")
+        expect(links[12].text()).toBe("Accounts")
+        expect(links[13].text()).toBe("Nodes")
+        expect(links[14].text()).toBe("Staking")
+        expect(links[15].text()).toBe("Blocks")
 
         expect(wrapper.findComponent(SearchBar).exists()).toBe(true)
 
         const logos = wrapper.findAll("img")
-        expect(logos.length).toBe(6)
+        expect(logos.length).toBe(7)
         expect(logos[1].attributes('alt')).toBe("wallet logo")
         expect(logos[2].attributes('alt')).toBe("wallet logo")
-        expect(logos[3].attributes('alt')).toBe("Modal close icon")
-        expect(logos[4].attributes('alt')).toBe("Product Logo")
-        expect(logos[5].attributes('alt')).toBe("Modal close icon")
+        expect(logos[3].attributes('alt')).toBe("wallet logo")
+        expect(logos[4].attributes('alt')).toBe("Modal close icon")
+        expect(logos[5].attributes('alt')).toBe("Product Logo")
+        expect(logos[6].attributes('alt')).toBe("Modal close icon")
 
         wrapper.unmount()
         await flushPromises()
@@ -125,8 +126,6 @@ describe("TopNavBar.vue", () => {
         });
 
         await flushPromises()
-        // console.log(wrapper.text())
-        // console.log(wrapper.html())
 
         const options = wrapper.findAll("option")
         expect(options.length).toBe(3)

From b06aaa25bff3a5c5b17462ad85413caba91331ec Mon Sep 17 00:00:00 2001
From: Logan Nguyen <logan.nguyen@swirldslabs.com>
Date: Wed, 1 Nov 2023 18:50:14 -0500
Subject: [PATCH 18/23] update: reworked grid width layout

Signed-off-by: Logan Nguyen <logan.nguyen@swirldslabs.com>
---
 src/components/TopNavBar.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/TopNavBar.vue b/src/components/TopNavBar.vue
index 0ccbae3f1..f8241b020 100644
--- a/src/components/TopNavBar.vue
+++ b/src/components/TopNavBar.vue
@@ -106,12 +106,12 @@
                      :class="{ 'is-rimmed': isBlocksRoute}">Blocks</router-link>
       </div>
 
-      <div style="position: relative; display: grid; column-gap: 1.2rem; grid-template-columns: repeat(12, minmax(0, 2.8rem));">
-        <div style="grid-column: span 7;">
+      <div style="position: relative; display: grid; column-gap: 1.2rem; grid-template-columns: repeat(17, minmax(0, 35px));">
+        <div style="grid-column: span 10;">
           <SearchBar/>
         </div>
         
-        <div style="grid-column: span 2;">
+        <div style="grid-column: span 3;">
           <o-field>
             <o-select v-model="selectedNetwork" class="h-is-navbar-item" style="outline: none; height: 40px; border-width: 0.5px">
               <option v-for="network in networkEntries" :key="network.name" :value="network.name">
@@ -121,7 +121,7 @@
           </o-field>
         </div>
 
-        <div style="grid-column: span 3;">
+        <div style="grid-column: span 4;">
           <button v-if="!connected" :disabled="connecting" id="connectWalletButton" class="button is-white is-small" @click="chooseWallet" style="outline: none; height: 40px; width: 100%; font-size: 0.8rem;">
             {{ connecting ? "Connecting..." : "CONNECT WALLET..." }}
           </button>

From b99b7fe1d1094201f2479fa3fad21f603e8e2627 Mon Sep 17 00:00:00 2001
From: Logan Nguyen <logan.nguyen@swirldslabs.com>
Date: Wed, 1 Nov 2023 19:35:47 -0500
Subject: [PATCH 19/23] update: removed Disconnect button in Staking.vue
 component

Signed-off-by: Logan Nguyen <logan.nguyen@swirldslabs.com>
---
 src/components/TopNavBar.vue         |  2 +-
 src/components/wallet/WalletInfo.vue |  2 +-
 src/pages/Staking.vue                | 24 ------------------------
 tests/unit/staking/Staking.spec.ts   | 10 +++++-----
 4 files changed, 7 insertions(+), 31 deletions(-)

diff --git a/src/components/TopNavBar.vue b/src/components/TopNavBar.vue
index f8241b020..d0adb4562 100644
--- a/src/components/TopNavBar.vue
+++ b/src/components/TopNavBar.vue
@@ -126,7 +126,7 @@
             {{ connecting ? "Connecting..." : "CONNECT WALLET..." }}
           </button>
 
-          <div v-else @click="showWalletInfo = !showWalletInfo" class="is-flex is-align-items-center" style="outline: none; height: 40px; width: 100%; font-size: 0.9rem; border: 0.5px solid white; display: flex; justify-content: space-between; cursor: pointer;">
+          <div v-else @click="showWalletInfo = !showWalletInfo" id="walletInfoBanner" class="is-flex is-align-items-center" style="outline: none; height: 40px; width: 100%; font-size: 0.9rem; border: 0.5px solid white; display: flex; justify-content: space-between; cursor: pointer;">
             <figure style="width: 50px; height: 100%; display: flex; align-items: center; margin-left: 0.15rem;">
                 <img :src="walletIconURL ?? undefined" alt="wallet logo" style="object-fit: contain; aspect-ratio: 3/2;display: flex; height: 90%;">
             </figure>
diff --git a/src/components/wallet/WalletInfo.vue b/src/components/wallet/WalletInfo.vue
index 1d95b6690..90c50de8d 100644
--- a/src/components/wallet/WalletInfo.vue
+++ b/src/components/wallet/WalletInfo.vue
@@ -78,7 +78,7 @@
               CHANGE ACCOUNT
             </button>
 
-            <button @click="disconnectFromWallet" class="button is-white is-small" style="outline: none; height: 40px">
+            <button @click="disconnectFromWallet" id="disconnectWalletButton" class="button is-white is-small" style="outline: none; height: 40px">
               DISCONNECT WALLET
             </button>
 
diff --git a/src/pages/Staking.vue b/src/pages/Staking.vue
index adeb1dace..735732820 100644
--- a/src/pages/Staking.vue
+++ b/src/pages/Staking.vue
@@ -146,7 +146,6 @@
                       To change your staking options use Blade or HashPack.
                   </p>
               </div>
-              <button id="disconnectWalletButton" class="button is-white is-small" @click="disconnectFromWallet">DISCONNECT {{ walletName.toLocaleUpperCase() }}</button>
             </div>
             <div v-if="isHederaWallet" class="mt-5 h-is-text-size-2 is-italic has-text-grey has-text-centered">
               <span class="has-text-grey-light">Please Note: </span>
@@ -179,9 +178,6 @@
                           :disabled="!stakedTo" @click="showStopConfirmDialog">STOP STAKING</button>
                   <button id="showStakingDialogSmall" class="button is-white is-small ml-4" @click="showStakingDialog">CHANGE STAKED TO</button>
               </div>
-            <div class="is-flex is-justify-content-center mt-4">
-              <button id="disconnectWalletButtonSmall" class="button is-white is-small" @click="disconnectFromWallet">DISCONNECT WALLET</button>
-            </div>
             <div v-if="isHederaWallet" class="mt-5 h-is-text-size-2 is-italic has-text-grey has-text-centered">
               <span class="has-text-grey-light">Please Note: </span>
               Your full balance is automatically staked.<br/>
@@ -192,15 +188,6 @@
           </div>
         </template>
 
-        <template v-else-if="connecting">
-          <section class="section has-text-centered" style="min-height: 450px">
-            <p>Connecting your Wallet...</p>
-            <p>You need to select which account you wish to connect.</p>
-            <br/>
-            <button id="abortConnectWalletButton" class="button is-white is-small" @click="disconnectFromWallet">ABORT CONNECTION</button>
-          </section>
-        </template>
-
         <template v-else>
           <section class="section has-text-centered pt-0" :class="{'pb-0': isSmallScreen}">
             <p class="h-is-tertiary-text" style="font-weight: 300">
@@ -350,16 +337,6 @@ export default defineComponent({
       }
     }
 
-    //
-    // disconnectFromWallet
-    //
-
-    const disconnectFromWallet = () => {
-      walletManager
-          .disconnect()
-          .finally(() => connecting.value = false)
-    }
-
     //
     // Account
     //
@@ -571,7 +548,6 @@ export default defineComponent({
       ignoreReward,
       chooseWallet,
       handleChooseWallet,
-      disconnectFromWallet,
       handleStopStaking,
       handleChangeStaking,
       showProgressDialog,
diff --git a/tests/unit/staking/Staking.spec.ts b/tests/unit/staking/Staking.spec.ts
index c180a439e..b02fa6961 100644
--- a/tests/unit/staking/Staking.spec.ts
+++ b/tests/unit/staking/Staking.spec.ts
@@ -27,6 +27,7 @@ import Oruga from "@oruga-ui/oruga-next";
 import {HMSF} from "@/utils/HMSF";
 import Staking from "@/pages/Staking.vue";
 import TopNavBar from "@/components/TopNavBar.vue";
+import WalletInfo from "@/components/wallet/WalletInfo.vue"
 import WalletChooser from "@/components/staking/WalletChooser.vue";
 import {WalletDriver_Mock} from "./WalletDriver_Mock";
 import MockAdapter from "axios-mock-adapter";
@@ -112,6 +113,8 @@ describe("Staking.vue", () => {
             props: {},
         });
 
+        const walletInfoWrapper = topNavBarWrapper.getComponent(WalletInfo)
+
         await flushPromises()
 
 
@@ -142,10 +145,6 @@ describe("Staking.vue", () => {
         expect(ndis[1].text()).toBe("My Stake0.31669471HBAR")
         expect(ndis[2].text()).toBe("Pending RewardNone")
 
-        // 1.4) Checks disconnect button
-        expect(wrapper.get("#disconnectWalletButton").text()).toBe("DISCONNECT WALLETMOCK")
-
-
         //
         // 2) Stake to account 0.0.7
         //
@@ -359,7 +358,8 @@ describe("Staking.vue", () => {
         //
 
         // 6.1) Clicks "DISCONNECT WALLET"
-        await wrapper.get("#disconnectWalletButton").trigger("click")
+        await topNavBarWrapper.get("#walletInfoBanner").trigger("click")
+        await walletInfoWrapper.get("#disconnectWalletButton").trigger("click")
         await flushPromises()
         expect(walletManager.getActiveDriver()).toStrictEqual(testDriver)
         expect(walletManager.connected.value).toBeFalsy()

From 234943f60d7c3a865e059880374d0bc11cc6038c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20Vi=C3=A9not?= <simon.vienot@icloud.com>
Date: Tue, 21 Nov 2023 17:32:39 +0100
Subject: [PATCH 20/23] Restore styling of network selector.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Simon Viénot <simon.vienot@icloud.com>
---
 src/assets/styles/explorer.scss | 8 +-------
 src/components/TopNavBar.vue    | 4 ++--
 2 files changed, 3 insertions(+), 9 deletions(-)

diff --git a/src/assets/styles/explorer.scss b/src/assets/styles/explorer.scss
index 1d83155db..7eb6e9220 100644
--- a/src/assets/styles/explorer.scss
+++ b/src/assets/styles/explorer.scss
@@ -265,18 +265,12 @@ body {
 //
 
 #drop-down-menu .o-sel {
-    height: 44.5px;
+    height: 40px;
     font-weight: bold;
     color: $h-highlight-color;
     border-color: $h-highlight-color;
     background-color: $h-page-background-color;
     border-width: 0.5px;
-    border-top-width: 0;
-    padding-top: 20px;
-    padding-bottom: 7px;
-}
-#drop-down-menu .o-sel-arrow {
-    background-position: calc(100% - 7px) calc(100% - 10px);
 }
 #mobile-drop-down-menu .o-sel {
     height: 44.5px;
diff --git a/src/components/TopNavBar.vue b/src/components/TopNavBar.vue
index d0adb4562..5d088094d 100644
--- a/src/components/TopNavBar.vue
+++ b/src/components/TopNavBar.vue
@@ -111,9 +111,9 @@
           <SearchBar/>
         </div>
         
-        <div style="grid-column: span 3;">
+        <div id="drop-down-menu" style="grid-column: span 3;">
           <o-field>
-            <o-select v-model="selectedNetwork" class="h-is-navbar-item" style="outline: none; height: 40px; border-width: 0.5px">
+            <o-select v-model="selectedNetwork" class="h-is-navbar-item">
               <option v-for="network in networkEntries" :key="network.name" :value="network.name">
                 {{ network.displayName }}
               </option>

From 1eefc34857f4079ba1c20570ad73dc3d6b8bbfe5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20Vi=C3=A9not?= <simon.vienot@icloud.com>
Date: Tue, 21 Nov 2023 19:27:37 +0100
Subject: [PATCH 21/23] Fix responsiveness of TopNavBar.vue
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Simon Viénot <simon.vienot@icloud.com>
---
 src/components/TopNavBar.vue | 69 +++++++++++++++++++++++++++++++-----
 1 file changed, 60 insertions(+), 9 deletions(-)

diff --git a/src/components/TopNavBar.vue b/src/components/TopNavBar.vue
index 5d088094d..b9ef5e550 100644
--- a/src/components/TopNavBar.vue
+++ b/src/components/TopNavBar.vue
@@ -106,12 +106,12 @@
                      :class="{ 'is-rimmed': isBlocksRoute}">Blocks</router-link>
       </div>
 
-      <div style="position: relative; display: grid; column-gap: 1.2rem; grid-template-columns: repeat(17, minmax(0, 35px));">
-        <div style="grid-column: span 10;">
+      <div id="navbar-grid">
+        <div id="search-bar">
           <SearchBar/>
         </div>
         
-        <div id="drop-down-menu" style="grid-column: span 3;">
+        <div id="drop-down-menu">
           <o-field>
             <o-select v-model="selectedNetwork" class="h-is-navbar-item">
               <option v-for="network in networkEntries" :key="network.name" :value="network.name">
@@ -121,7 +121,7 @@
           </o-field>
         </div>
 
-        <div style="grid-column: span 4;">
+        <div id="connect-button">
           <button v-if="!connected" :disabled="connecting" id="connectWalletButton" class="button is-white is-small" @click="chooseWallet" style="outline: none; height: 40px; width: 100%; font-size: 0.8rem;">
             {{ connecting ? "Connecting..." : "CONNECT WALLET..." }}
           </button>
@@ -307,16 +307,67 @@ export default defineComponent({
 
 <style>
 
-@media (min-width: 1240px) {
+@media (min-width: 1450px) {
   #product-logo {
     max-width: 242px;
   }
+  #navbar-grid {
+    position:relative;
+    display:grid;
+    column-gap:1.2rem;
+    grid-template-columns:repeat(20, minmax(0, 35px));
+  }
+  #search-bar {
+    grid-column: span 13;
+  }
+  #drop-down-menu {
+    grid-column: span 3;
+  }
+  #connect-button {
+    grid-column: span 4;
+  }
 }
 
-@media (max-width: 1239px) {
-  #product-logo {
-    max-width: 220px;
-  }
+@media (max-width: 1449px) {
+    #product-logo {
+        max-width: 220px;
+    }
+    #navbar-grid {
+        position:relative;
+        display:grid;
+        column-gap:1.2rem;
+        grid-template-columns:repeat(20, minmax(0, 25px));
+    }
+    #search-bar {
+        grid-column: span 12;
+    }
+    #drop-down-menu {
+        grid-column: span 4;
+    }
+    #connect-button {
+        grid-column: span 4;
+    }
+}
+
+@media (max-width: 1249px) {
+    #product-logo {
+        max-width: 200px;
+    }
+    #navbar-grid {
+        position:relative;
+        display:grid;
+        column-gap:1.2rem;
+        grid-template-columns:repeat(20, minmax(0, 18px));
+    }
+    #search-bar {
+        grid-column: span 10;
+    }
+    #drop-down-menu {
+        grid-column: span 5;
+    }
+    #connect-button {
+        grid-column: span 5;
+    }
 }
 
 </style>
\ No newline at end of file

From 58e6346ce5a5223bc9c8b10e55b681ae46dcd565 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20Vi=C3=A9not?= <simon.vienot@icloud.com>
Date: Wed, 22 Nov 2023 12:59:57 +0100
Subject: [PATCH 22/23] Remove focus ring for network drop-down-menu.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Simon Viénot <simon.vienot@icloud.com>
---
 src/assets/styles/explorer.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/assets/styles/explorer.scss b/src/assets/styles/explorer.scss
index 7eb6e9220..1c811ed1e 100644
--- a/src/assets/styles/explorer.scss
+++ b/src/assets/styles/explorer.scss
@@ -287,6 +287,10 @@ body {
 #mobile-drop-down-menu .o-sel-arrow {
     background-position: calc(100% - 13px) calc(100% - 16px);
 }
+#drop-down-menu .h-is-navbar-item:focus
+{
+    outline: none;
+}
 .button.h-is-navbar-item {
     padding-top: 28px;
     padding-bottom: 16px;

From eeffea263f06f779881dfecffee93eff282fc6f6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20Vi=C3=A9not?= <simon.vienot@icloud.com>
Date: Wed, 22 Nov 2023 18:20:43 +0100
Subject: [PATCH 23/23] Fix padding of left navigation item in TopNavBar.vue
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Simon Viénot <simon.vienot@icloud.com>
---
 src/assets/styles/explorer.scss | 2 +-
 src/components/TopNavBar.vue    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/assets/styles/explorer.scss b/src/assets/styles/explorer.scss
index 1c811ed1e..68e349e6a 100644
--- a/src/assets/styles/explorer.scss
+++ b/src/assets/styles/explorer.scss
@@ -332,7 +332,7 @@ body {
     padding-right: 0.4em;
 }
 .button.h-is-navbar-item.is-ghost.is-first {
-    padding-left: 2em;
+    padding-left: 0;
 }
 .button.h-is-navbar-item.is-ghost.is-last {
     padding-right: 0;
diff --git a/src/components/TopNavBar.vue b/src/components/TopNavBar.vue
index b9ef5e550..38ac276c0 100644
--- a/src/components/TopNavBar.vue
+++ b/src/components/TopNavBar.vue
@@ -77,7 +77,7 @@
       <div class="is-flex mb-3 is-align-items-baseline is-justify-content-space-between">
         <router-link :to="routeManager.makeRouteToMainDashboard()"
                      id="dashboard-menu-item"
-                     class="button is-ghost is-first/ h-is-navbar-item h-is-dense"
+                     class="button is-ghost is-first h-is-navbar-item h-is-dense"
                      :class="{ 'is-rimmed': isDashboardRoute}">Dashboard</router-link>
         <router-link :to="routeManager.makeRouteToTransactions()"
                      class="button is-ghost h-is-navbar-item h-is-dense"