Merge pull request #398 from alisaweb3/v3-single

Fix: switch chain network, NavBarWallet Warning

src/layouts/components/ChainProfile.vue

@@ -1,28 +1,49 @@
 <script setup lang="ts">
-import router from '@/router';
 import { useBlockchain, useBaseStore, type Endpoint } from '@/stores';
 import { useRouter } from 'vue-router';
 const chainStore = useBlockchain();
 const baseStore = useBaseStore();
 chainStore.initial();
+const router = useRouter();
 function changeEndpoint(item: Endpoint) {
-  console.log('change')
+  chainStore.setRestEndpoint(item);
-  chainStore.setRestEndpoint(item)
+  if (chainStore.current) router.push(`/${chainStore.current.chainName}`);
-  const router = useRouter()
-  if(chainStore.current) router.push(`/${chainStore.current.chainName}`)
 }
 </script>
 
 <template>
-  <div class="flex items-center">
   <div class="dropdown">
-      <div tabindex="0" class="p-1 relative mr-3 cursor-pointer">
+    <label tabindex="0" class="flex items-center">
+      <div class="p-1 relative mr-3 cursor-pointer">
         <img v-lazy="chainStore.logo" class="w-9 h-9 rounded-full" />
         <div
           class="w-2 h-2 rounded-full bg-yes absolute right-0 bottom-0 shadow"
         ></div>
       </div>
+      <div class="flex-1 w-0">
         <div
+          :key="
+            baseStore.latest?.block?.header?.height ||
+            chainStore.chainName ||
+            ''
+          "
+          class="capitalize whitespace-nowrap text-base font-semibold text-gray-600 dark:text-gray-200 hidden md:!block"
+        >
+          #{{
+            baseStore.latest?.block?.header?.height ||
+            chainStore.chainName ||
+            ''
+          }}
+        </div>
+        <div
+          class="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap hidden md:!block"
+        >
+          {{ chainStore.connErr || chainStore.endpoint.address }}
+        </div>
+      </div>
+    </label>
+    <div
+      tabindex="0"
       class="dropdown-content w-80 menu shadow bg-base-200 rounded-box max-h-[300px] overflow-auto"
     >
       <!-- rest -->
@@ -32,13 +53,13 @@ function changeEndpoint(item: Endpoint) {
       >
         Rest Endpoint
       </div>
-        <label
+      <div
         v-for="(item, index) in chainStore.current?.endpoints?.rest"
-          class="px-4 py-2 w-full hover:bg-gray-100 dark:bg-[#384059] cursor-pointer"
+        class="px-4 py-2 w-full hover:bg-gray-100 dark:hover:bg-[#384059] cursor-pointer"
         :key="index"
+        @click="changeEndpoint(item)"
       >
-          <div class="flex flex-col" 
+        <div class="flex flex-col">
-          @click="changeEndpoint(item)">
           <div class="flex items-center justify-between w-full">
             <div class="text-gray-500 dark:text-gray-200 capitalize">
               {{ item.provider }}
@@ -52,12 +73,11 @@ function changeEndpoint(item: Endpoint) {
             {{ item.address }}
           </div>
         </div>
-        </label>
-                <!-- rest -->
-                <div class="px-4 py-2 text-sm text-gray-400">
-            Information
       </div>
-        <div class="w-full hover:bg-gray-100 dark:bg-[#384059]">
+
+      <!-- rest -->
+      <div class="px-4 py-2 text-sm text-gray-400">Information</div>
+      <div class="w-full">
         <div class="py-2 px-4">
           Chain Id: {{ baseStore.latest.block?.header.chain_id }}
         </div>
@@ -67,19 +87,4 @@ function changeEndpoint(item: Endpoint) {
       </div>
     </div>
   </div>
-    <div class="flex-1 w-0">
-      <div :key="baseStore.latest?.block?.header?.height || chainStore.chainName || ''"
-        class="capitalize whitespace-nowrap text-base font-semibold text-gray-600 dark:text-gray-200 hidden md:!block"
-      >
-        #{{
-           baseStore.latest?.block?.header?.height || chainStore.chainName || ''
-        }}
-      </div>
-      <div
-        class="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap hidden md:!block"
-      >
-        {{ chainStore.connErr || chainStore.endpoint.address }}
-      </div>
-    </div>
-  </div>
 </template>

src/layouts/components/DefaultLayout.vue

@@ -20,10 +20,10 @@ const dashboard = useDashboard();
 dashboard.initial();
 const blockchain = useBlockchain();
 
-const current = ref("")
+const current = ref('');
 blockchain.$subscribe((m, s) => {
   if (current.value != s.chainName) {
-    current.value = s.chainName
+    current.value = s.chainName;
     blockchain.initial();
   }
 });
@@ -36,7 +36,7 @@ const changeOpen = (index: Number) => {
     sidebarOpen.value = !sidebarOpen.value;
   }
 };
-const showDiscord = window.location.host.search("ping.pub") > -1
+const showDiscord = window.location.host.search('ping.pub') > -1;
 </script>
 
 <template>
@@ -51,7 +51,10 @@ const showDiscord = window.location.host.search("ping.pub") > -1
         <h1 class="flex-1 ml-3 text-2xl font-semibold dark:text-white">
           Ping.pub
         </h1>
-        <div class="pr-4 cursor-pointer xl:!hidden" @click="sidebarShow = false">
+        <div
+          class="pr-4 cursor-pointer xl:!hidden"
+          @click="sidebarShow = false"
+        >
           <Icon icon="mdi-close" class="text-3xl" />
         </div>
       </div>
@@ -95,7 +98,8 @@ const showDiscord = window.location.host.search("ping.pub") > -1
             </div>
             <div
               v-if="item?.badgeContent"
-              class="mr-6 badge badge-sm" :class="item?.badgeClass"
+              class="mr-6 badge badge-sm"
+              :class="item?.badgeClass"
             >
               {{ item?.badgeContent }}
             </div>
@@ -165,7 +169,8 @@ const showDiscord = window.location.host.search("ping.pub") > -1
           </div>
           <div
             v-if="item?.badgeContent"
-            class="mr-6 badge badge-sm" :class="item?.badgeClass"
+            class="mr-6 badge badge-sm"
+            :class="item?.badgeClass"
           >
             {{ item?.badgeContent }}
           </div>
@@ -181,37 +186,67 @@ const showDiscord = window.location.host.search("ping.pub") > -1
         <div class="px-4 text-sm pt-4 text-gray-400 pb-2 uppercase">
           Sponsors
         </div>
-        <a href="https://osmosis.zone" class="collapse-title px-4 flex items-center py-2 hover:bg-gray-100 dark:hover:bg-[#373f59]">
+        <a
-          <img src="https://ping.pub/logos/osmosis.jpg" class="w-6 h-6 rounded-full mr-3"/>
+          href="https://osmosis.zone"
-          <div class="text-base capitalize flex-1 text-gray-700 dark:text-gray-200">
+          class="collapse-title px-4 flex items-center py-2 hover:bg-gray-100 dark:hover:bg-[#373f59]"
+        >
+          <img
+            src="https://ping.pub/logos/osmosis.jpg"
+            class="w-6 h-6 rounded-full mr-3"
+          />
+          <div
+            class="text-base capitalize flex-1 text-gray-700 dark:text-gray-200"
+          >
             Osmosis
           </div>
         </a>
-        <a href="https://becole.com" class="collapse-title px-4 flex items-center py-2 hover:bg-gray-100 dark:hover:bg-[#373f59]">
+        <a
-          <img src="https://becole.com/static/logo/logo_becole.png" class="w-6 h-6 rounded-full mr-3"/>
+          href="https://becole.com"
-          <div class="text-base capitalize flex-1 text-gray-700 dark:text-gray-200">
+          class="collapse-title px-4 flex items-center py-2 hover:bg-gray-100 dark:hover:bg-[#373f59]"
+        >
+          <img
+            src="https://becole.com/static/logo/logo_becole.png"
+            class="w-6 h-6 rounded-full mr-3"
+          />
+          <div
+            class="text-base capitalize flex-1 text-gray-700 dark:text-gray-200"
+          >
             Becole
           </div>
         </a>
 
-        <div class="px-4 text-sm pt-4 text-gray-400 pb-2 uppercase">
+        <div class="px-4 text-sm pt-4 text-gray-400 pb-2 uppercase">Links</div>
-          Links
+        <a
-        </div>
+          href="https://twitter.com/ping_pub"
-        <a href="https://twitter.com/ping_pub" class="collapse-title px-4 flex items-center py-2 hover:bg-gray-100 dark:hover:bg-[#373f59]">
+          class="collapse-title px-4 flex items-center py-2 hover:bg-gray-100 dark:hover:bg-[#373f59]"
+        >
           <Icon icon="mdi:twitter" class="text-xl mr-2" />
-          <div class="text-base capitalize flex-1 text-gray-700 dark:text-gray-200">
+          <div
+            class="text-base capitalize flex-1 text-gray-700 dark:text-gray-200"
+          >
             Twitter
           </div>
         </a>
-        <a v-if="showDiscord" href="https://discord.com/invite/CmjYVSr6GW" class="collapse-title px-4 flex items-center py-2 hover:bg-gray-100 dark:hover:bg-[#373f59]">
+        <a
+          v-if="showDiscord"
+          href="https://discord.com/invite/CmjYVSr6GW"
+          class="collapse-title px-4 flex items-center py-2 hover:bg-gray-100 dark:hover:bg-[#373f59]"
+        >
           <Icon icon="mdi:discord" class="text-xl mr-2" />
-          <div class="text-base capitalize flex-1 text-gray-700 dark:text-gray-200">
+          <div
+            class="text-base capitalize flex-1 text-gray-700 dark:text-gray-200"
+          >
             Discord
           </div>
         </a>
-        <a href="https://github.com/ping-pub/explorer/discussions" class="collapse-title px-4 flex items-center py-2 hover:bg-gray-100 dark:hover:bg-[#373f59]">
+        <a
+          href="https://github.com/ping-pub/explorer/discussions"
+          class="collapse-title px-4 flex items-center py-2 hover:bg-gray-100 dark:hover:bg-[#373f59]"
+        >
           <Icon icon="mdi:frequently-asked-questions" class="text-xl mr-2" />
-          <div class="text-base capitalize flex-1 text-gray-700 dark:text-gray-200">
+          <div
+            class="text-base capitalize flex-1 text-gray-700 dark:text-gray-200"
+          >
             FAQ
           </div>
         </a>
@@ -237,9 +272,7 @@ const showDiscord = window.location.host.search("ping.pub") > -1
         <NavBarI18n class="hidden md:!inline-block" />
         <NavbarThemeSwitcher class="!inline-block" />
 
-        <NavBarWallet
+        <NavBarWallet />
-          class="hidden truncate md:!inline-block text-xs md:!text-sm"
-        />
       </div>
 
       <!-- 👉 Pages -->

src/layouts/components/NavBarWallet.vue

@@ -4,7 +4,7 @@ import { Icon } from '@iconify/vue';
 import { ref, computed } from 'vue';
 const walletStore = useWalletStore();
 const chainStore = useBlockchain();
-const baseStore = useBaseStore()
+const baseStore = useBaseStore();
 // walletStore.$subscribe((m, s) => {
 //   console.log(m, s);
 // });
@@ -31,18 +31,18 @@ const tipMsg = computed(() => {
     ? { class: 'error', msg: 'Copy Error!' }
     : { class: 'success', msg: 'Copy Success!' };
 });
-
-
 </script>
 
 <template>
-  <div
+  <div class="dropdown dropdown-hover dropdown-end">
-    class="dropdown dropdown-hover dropdown-end"
+    <label
+      tabindex="0"
+      class="btn btn-sm m-1 lowercase hidden truncate md:!inline-flex text-xs md:!text-sm"
     >
-    <label tabindex="0" class="btn btn-sm m-1 lowercase">
       <Icon icon="mdi:wallet" />
       <span class="ml-1 hidden md:block">
-        {{ walletStore.shortAddress || "Wallet" }}</span>
+        {{ walletStore.shortAddress || 'Wallet' }}</span
+      >
     </label>
     <div
       tabindex="0"
@@ -52,7 +52,9 @@ const tipMsg = computed(() => {
         v-if="!walletStore?.currentAddress"
         for="PingConnectWallet"
         class="btn btn-sm"
-      ><Icon icon="mdi:wallet"/><span class="ml-1 hidden md:block">Connect Wallet</span></label
+        ><Icon icon="mdi:wallet" /><span class="ml-1 hidden md:block"
+          >Connect Wallet</span
+        ></label
       >
       <div class="px-2 mb-1 text-gray-500 dark:text-gray-400 font-semibold">
         {{ walletStore.connectedWallet?.wallet }}
@@ -100,9 +102,7 @@ const tipMsg = computed(() => {
         </div>
       </div>
     </div>
-    
   </div>
-  <div class="footer-modal">
   <Teleport to="body">
     <ping-connect-wallet
       :chain-id="baseStore.currentChainId"
@@ -110,7 +110,6 @@ const tipMsg = computed(() => {
       @connect="walletStateChange"
     />
   </Teleport>
-  </div>
 </template>
 
 <style>

vite.config.ts

@@ -15,7 +15,18 @@ import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite';
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
-    vue(),
+    vue({
+      template: {
+        compilerOptions: {
+          isCustomElement: (tag) =>
+            [
+              'ping-connect-wallet',
+              'ping-token-convert',
+              'ping-tx-dialog',
+            ].includes(tag),
+        },
+      },
+    }),
     vueJsx(),
     vuetify({
       styles: {