feat: moved wallet connection feature from staking to global accessible component (#498)

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;
@@ -293,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;
@@ -334,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;

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>

src/components/TopNavBar.vue

@@ -52,27 +52,29 @@
   </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" 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()">
         <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">
-
-        <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"
@@ -103,7 +105,55 @@
                      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 id="navbar-grid">
+        <div id="search-bar">
+          <SearchBar/>
+        </div>
+
+        <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">
+                {{ network.displayName }}
+              </option>
+            </o-select>
+          </o-field>
+        </div>
+
+        <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>
+
+          <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>
+
+            <p>
+              {{ accountId }}
+            </p>
+
+            <div class="is-flex is-align-items-center" style="width: 30px; justify-content: 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" 
+          :accountIds="accountIds"
+          :showWalletInfo="showWalletInfo" 
+          :accountId="accountId || undefined" 
+          :walletIconURL="walletIconURL || undefined" 
+          @wallet-disconnect="disconnectFromWallet"
+          @change-account="handleChangeAccount"
+        />
+
+      </div>
     </div>
 
   </div>
@@ -116,15 +166,20 @@
 
 <script lang="ts">
 
-import {defineComponent, inject, ref} from "vue";
-import {routeManager} from "@/router";
+import {routeManager, walletManager} from "@/router";
 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 ProgressDialog, { Mode } from './staking/ProgressDialog.vue';
+import {defineComponent, inject, ref} from "vue";
+import WalletInfo from '@/components/wallet/WalletInfo.vue'
 
 export default defineComponent({
   name: "TopNavBar",
-  components: {AxiosStatus, SearchBar},
+  components: {AxiosStatus, SearchBar, WalletChooser, ProgressDialog, WalletInfo},
 
   setup() {
     const isSmallScreen = inject('isSmallScreen', true)
@@ -137,27 +192,109 @@ export default defineComponent({
 
     const isMobileMenuOpen = ref(false)
 
+    const showWalletChooser = ref(false)
+    const chooseWallet = () => {
+      showWalletChooser.value = true
+    }
+
+    const connecting = ref(false)
+    const walletIconURL = ref("")
+    const showWalletInfo = 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)
+      walletIconURL.value = walletManager.getActiveDriver().iconURL || ""
+    }
+
+    //
+    // handleChangeAccount
+    //
+    const handleChangeAccount = (chosenAccountId: string) => {
+      walletManager.changeAccount(chosenAccountId)
+    }
+
+    //
+    // disconnectFromWallet
+    //
+    const disconnectFromWallet = () => {
+      walletManager
+          .disconnect()
+          .finally(() => {
+            connecting.value = false;
+            showWalletInfo.value = false;
+          })
+    }
+
+
     return {
-      isSmallScreen,
-      isMediumScreen,
-      isTouchDevice,
       buildTime,
+      connecting,
       productName,
+      routeManager,
+      chooseWallet,
+      walletIconURL,
+      isSmallScreen,
+      isTouchDevice,
+      isMediumScreen,
+      showWalletInfo,
       isStakingEnabled,
       isMobileMenuOpen,
-      networkEntries: networkRegistry.entries,
-      selectedNetwork: routeManager.selectedNetwork,
+      showWalletChooser,
+      handleChooseWallet,
+      showProgressDialog,
+      progressDialogMode,
+      progressMainMessage,
+      showProgressSpinner,
+      progressDialogTitle,
+      handleChangeAccount,
+      progressExtraMessage,
+      disconnectFromWallet,
+      progressExtraTransactionId,
       name: routeManager.currentRoute,
-      isDashboardRoute: routeManager.isDashboardRoute,
-      isTransactionRoute: routeManager.isTransactionRoute,
+      accountId: walletManager.accountId,
+      connected: walletManager.connected,
+      accountIds: walletManager.accountIds,
+      isNodeRoute: routeManager.isNodeRoute,
       isTokenRoute: routeManager.isTokenRoute,
       isTopicRoute: routeManager.isTopicRoute,
-      isContractRoute: routeManager.isContractRoute,
-      isAccountRoute: routeManager.isAccountRoute,
-      isNodeRoute: routeManager.isNodeRoute,
-      isStakingRoute: routeManager.isStakingRoute,
+      networkEntries: networkRegistry.entries,
       isBlocksRoute: routeManager.isBlocksRoute,
-      routeManager,
+      isStakingRoute: routeManager.isStakingRoute,
+      isAccountRoute: routeManager.isAccountRoute,
+      isContractRoute: routeManager.isContractRoute,
+      selectedNetwork: routeManager.selectedNetwork,
+      isDashboardRoute: routeManager.isDashboardRoute,
+      isTransactionRoute: routeManager.isTransactionRoute,
     }
   },
 })
@@ -170,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>

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>