fix: NavBarWallet Warning

2023-05-26 15:16:29 +08:00 · 2023-05-26 15:16:29 +08:00 · 9e738d3277
commit 9e738d3277
parent 6a9823893c
3 changed files with 98 additions and 55 deletions
--- a/src/layouts/components/DefaultLayout.vue
+++ b/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
+  if (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]">
-          <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">
+        <a
+          href="https://osmosis.zone"
+          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]">
-          <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">
+        <a
+          href="https://becole.com"
+          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">
-          Links
-        </div>
-        <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]">
-          <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="px-4 text-sm pt-4 text-gray-400 pb-2 uppercase">Links</div>
+        <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]"
+        >
+          <Icon icon="mdi:twitter" class="text-xl mr-2" />
+          <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]">
-          <Icon icon="mdi:discord" class="text-xl mr-2"/>
-          <div class="text-base capitalize flex-1 text-gray-700 dark:text-gray-200">
+        <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"
+          >
            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]">
-          <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">
+        <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"
+          >
            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
-          class="hidden truncate md:!inline-block text-xs md:!text-sm"
-        />
+        <NavBarWallet />
      </div>

      <!-- 👉 Pages -->
--- a/src/layouts/components/NavBarWallet.vue
+++ b/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,29 +31,31 @@ const tipMsg = computed(() => {
    ? { class: 'error', msg: 'Copy Error!' }
    : { class: 'success', msg: 'Copy Success!' };
 });
-
-
 </script>

 <template>
-  <div
-    class="dropdown dropdown-hover dropdown-end"
-  >
-    <label tabindex="0" class="btn btn-sm m-1 lowercase">
-      <Icon icon="mdi:wallet"/>
+  <div 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"
+    >
+      <Icon icon="mdi:wallet" />
      <span class="ml-1 hidden md:block">
-        {{ walletStore.shortAddress || "Wallet" }}</span>
+        {{ walletStore.shortAddress || 'Wallet' }}</span
+      >
    </label>
    <div
      tabindex="0"
      class="dropdown-content menu shadow p-2 bg-base-100 rounded w-64 overflow-auto"
    >
-    <label
-      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
-    >
+      <label
+        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
+      >
      <div class="px-2 mb-1 text-gray-500 dark:text-gray-400 font-semibold">
        {{ walletStore.connectedWallet?.wallet }}
      </div>
@ -100,17 +102,14 @@ const tipMsg = computed(() => {
        </div>
      </div>
    </div>
-    
-  </div>
-  <div class="footer-modal">
-    <Teleport to="body">
-      <ping-connect-wallet
-        :chain-id="baseStore.currentChainId"
-        :hd-path="chainStore.defaultHDPath"
-        @connect="walletStateChange"
-      />
-    </Teleport>
  </div>
+  <Teleport to="body">
+    <ping-connect-wallet
+      :chain-id="baseStore.currentChainId"
+      :hd-path="chainStore.defaultHDPath"
+      @connect="walletStateChange"
+    />
+  </Teleport>
 </template>

 <style>
--- a/vite.config.ts
+++ b/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: {