feat: add search modal

src/layouts/components/DefaultLayout.vue

@@ -5,6 +5,7 @@ import { ref } from 'vue';
 // Components
 import newFooter from '@/layouts/components/NavFooter.vue';
 import NavbarThemeSwitcher from '@/layouts/components/NavbarThemeSwitcher.vue';
+import NavbarSearch from '@/layouts/components/NavbarSearch.vue';
 import ChainProfile from '@/layouts/components/ChainProfile.vue';
 
 import { useDashboard } from '@/stores/useDashboard';
@@ -282,7 +283,7 @@ const showDiscord = window.location.host.search('ping.pub') > -1;
         <!-- <NavSearchBar />-->
         <NavBarI18n class="hidden md:!inline-block" />
         <NavbarThemeSwitcher class="!inline-block" />
-
+        <NavbarSearch class="!inline-block" />
         <NavBarWallet />
       </div>
 

src/layouts/components/NavbarSearch.vue

@@ -0,0 +1,117 @@
+<script lang="ts" setup>
+import { Icon } from '@iconify/vue';
+import { onMounted, ref, computed, onUnmounted } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { useBlockchain } from '@/stores';
+const vueRouters = useRouter();
+const blockStore = useBlockchain();
+let searchModalShow = ref(true);
+let searchQuery = ref('');
+let errorMessage = ref('');
+onMounted(() => {
+  console.log(blockStore.current, '9090909');
+});
+
+function closeSearchModal() {
+  searchModalShow.value = false;
+}
+function openSearchModal() {
+  searchModalShow.value = true;
+}
+
+function preventClick(event: any) {
+  event.preventDefault();
+  event.stopPropagation();
+}
+function confirm() {
+  errorMessage.value = '';
+
+  const height = /^\d+$/;
+  const txhash = /^[A-Z\d]{64}$/;
+  const addr = /^[a-z]+1[a-z\d]{38,58}$/;
+  const key = searchQuery.value;
+  const current = blockStore?.current?.chainName || '';
+  const routeParams = vueRouters?.currentRoute?.value;
+
+  if (!Object.values(routeParams?.params).includes(key)) {
+    if (height.test(key)) {
+      vueRouters.push({ path: `/${current}/block/${key}` });
+      closeSearchModal();
+    } else if (txhash.test(key)) {
+      vueRouters.push({ path: `/${current}/tx/${key}` });
+      closeSearchModal();
+      //     this.$router.push({ name: 'transaction', params: { chain: c.chain_name, hash: key } })
+    } else if (addr.test(key)) {
+      vueRouters.push({ path: `/${current}/account/${key}` });
+      closeSearchModal();
+    } else {
+      errorMessage.value = 'The input not recognized';
+    }
+  }
+}
+</script>
+<template>
+  <div>
+    <button
+      class="btn btn-ghost btn-circle btn-sm mx-1"
+      @click="openSearchModal"
+    >
+      <Icon
+        icon="mdi:magnify"
+        class="text-2xl text-gray-500 dark:text-gray-400"
+      />
+    </button>
+
+    <!-- modal -->
+    <div v-if="searchModalShow">
+      <div
+        class="cursor-pointer modal pointer-events-auto opacity-100 visible"
+        @click="closeSearchModal"
+      >
+        <div
+          class="relative modal-box cursor-default"
+          @click="(event) => preventClick(event)"
+        >
+          <!-- header -->
+          <div class="flex items-center justify-between">
+            <div
+              class="text-lg font-bold flex flex-col md:!flex-row justify-between items-baseline"
+            >
+              <span class="mr-2">Search</span>
+              <span class="capitalize text-sm md:!text-base"
+                >Height/Transaction/Account Address</span
+              >
+            </div>
+            <label
+              htmlFor="modal-pool-modal"
+              class="cursor-pointer"
+              @click="closeSearchModal"
+            >
+              <Icon
+                icon="zondicons:close-outline"
+                class="text-2xl text-gray-500 dark:text-gray-400"
+              />
+            </label>
+          </div>
+          <!-- body -->
+          <div class="mt-4">
+            <div class="">
+              <input
+                class="input flex-1 w-full input-bordered"
+                v-model="searchQuery"
+                placeholder="Height/Transaction/Account Address"
+              />
+            </div>
+          </div>
+          <!-- foot -->
+          <div class="mt-6">
+            <button class="w-full btn btn-primary" @click="confirm">
+              Confirm
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>