fix: ping-connect-wallet display hierarchy problem

src/layouts/components/NavBarWallet.vue

@@ -1,14 +1,17 @@
 <script setup lang="ts">
-import { ref } from 'vue';
-import { useBlockchain, useWalletStore } from '@/stores';
-
-const walletStore = useWalletStore()
+import { useWalletStore } from '@/stores';
 
+const walletStore = useWalletStore();
 </script>
 
 <template>
   <div>
-    <span v-if="walletStore.currentAddress">{{ walletStore.currentAddress }}</span>
-    <ping-connect-wallet v-else class="mt-5" :chain-id="'juno-1'" :hd-path="`m/44'/118/0'/0/0`" />
+    <span v-if="walletStore.currentAddress">{{
+      walletStore.currentAddress
+    }}</span>
+
+    <label v-else for="PingConnectWallet" class="btn btn-sm ml-4 ping-connect-btn"
+      >Connect Wallet</label
+    >
   </div>
 </template>

src/layouts/components/newFooter.vue

@@ -31,4 +31,13 @@
       >
     </div>
   </footer>
+  <div class="footer-modal">
+    <ping-connect-wallet :chain-id="'juno-1'" :hd-path="`m/44'/118/0'/0/0`" />
+  </div>
 </template>
+
+<style>
+.footer-modal .ping-connect-btn {
+  display: none;
+}
+</style>