From 5026f5e6be85e0adbfd119cd45d2f05ca834fba1 Mon Sep 17 00:00:00 2001
From: "Alisa | Side.one" <alisa@side.one>
Date: Sun, 28 May 2023 16:37:37 +0800
Subject: [PATCH] feat: sidebar style, input search, table hight

---
 .prettierrc.json                              |   2 +-
 src/components/dynamic/ArrayObjectElement.vue |   4 +-
 src/components/dynamic/ObjectElement.vue      |   9 +-
 src/layouts/components/DefaultLayout.vue      | 414 ++++++++++-------
 .../[chain]/cosmwasm/[code_id]/contracts.vue  | 421 ++++++++++--------
 src/modules/[chain]/params/index.vue          |   2 +-
 src/pages/index.vue                           |  22 +-
 tailwind.config.js                            |   9 +-
 8 files changed, 524 insertions(+), 359 deletions(-)

diff --git a/.prettierrc.json b/.prettierrc.json
index 2b3cebf9..0ed67ee7 100644
--- a/.prettierrc.json
+++ b/.prettierrc.json
@@ -1,5 +1,5 @@
 {
-  "tabWidth": 4,
+  "tabWidth": 2,
   "singleQuote": true,
   "semi": true,
   "endOfLine": "auto",
diff --git a/src/components/dynamic/ArrayObjectElement.vue b/src/components/dynamic/ArrayObjectElement.vue
index 697722c3..3821ea9d 100644
--- a/src/components/dynamic/ArrayObjectElement.vue
+++ b/src/components/dynamic/ArrayObjectElement.vue
@@ -18,7 +18,7 @@ const header = computed(() => {
 });
 </script>
 <template>
-  <div class="overflow-x-auto p-4">
+  <div class="overflow-auto h-[500px] p-4">
     <div
       v-if="header.length > 0"
       class="table table-compact w-full"
@@ -35,7 +35,7 @@ const header = computed(() => {
             :key="index"
             class="text-left text-capitalize"
           >
-            {{ item }}
+            {{ item }} 
           </th>
         </tr>
       </thead>
diff --git a/src/components/dynamic/ObjectElement.vue b/src/components/dynamic/ObjectElement.vue
index 74edd991..a18ac523 100644
--- a/src/components/dynamic/ObjectElement.vue
+++ b/src/components/dynamic/ObjectElement.vue
@@ -4,11 +4,16 @@ import { select } from './index';
 const props = defineProps(['value']);
 </script>
 <template>
-  <div class="overflow-x-auto">
+  <div class="overflow-auto">
     <table class="table table-compact w-full text-sm">
       <tbody>
         <tr v-for="(v, k) of value">
-          <td class="text-capitalize whitespace-break-spaces w-1/5" style="min-width: 180px;">{{ String(k).replaceAll("_", " ") }}</td>
+          <td
+            class="text-capitalize whitespace-break-spaces w-1/5"
+            style="min-width: 180px"
+          >
+            {{ String(k).replaceAll('_', ' ') }}
+          </td>
           <td>
             <div
               class="overflow-hidden w-auto whitespace-normal"
diff --git a/src/layouts/components/DefaultLayout.vue b/src/layouts/components/DefaultLayout.vue
index 24730246..df4f6b0f 100644
--- a/src/layouts/components/DefaultLayout.vue
+++ b/src/layouts/components/DefaultLayout.vue
@@ -19,171 +19,281 @@ const blockchain = useBlockchain();
 
 const current = ref('');
 blockchain.$subscribe((m, s) => {
-    if (current.value != s.chainName) {
-        current.value = s.chainName;
-        blockchain.initial();
-    }
+  if (current.value != s.chainName) {
+    current.value = s.chainName;
+    blockchain.initial();
+  }
 });
 
 const sidebarShow = ref(false);
 const sidebarOpen = ref(true);
 
 const changeOpen = (index: Number) => {
-    if (index === 0) {
-        sidebarOpen.value = !sidebarOpen.value;
-    }
+  if (index === 0) {
+    sidebarOpen.value = !sidebarOpen.value;
+  }
 };
 const showDiscord = window.location.host.search('ping.pub') > -1;
 </script>
 
 <template>
-    <div class="bg-gray-100 dark:bg-[#171d30]">
-        <!-- sidebar -->
-        <div class="w-64 fixed z-50 left-0 top-0 bottom-0 overflow-auto bg-base-100 border-r border-gray-100 dark:border-gray-700"
-            :class="{ block: sidebarShow, 'hidden xl:!block': !sidebarShow }">
-            <div class="flex items-center pl-4 py-4 mb-1">
-                <img class="w-10 h-10" src="../../assets/logo.svg" />
-                <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">
-                    <Icon icon="mdi-close" class="text-3xl" />
-                </div>
-            </div>
-            <div v-for="(item, index) of blockchain.computedChainMenu" :key="index" class="px-2">
-                <div v-if="item?.title && item?.children?.length" :tabindex="index" class="collapse" :class="{
-                    'collapse-arrow': item?.children?.length > 0,
-                    'collapse-open': index === 0 && sidebarOpen,
-                    'collapse-close': index === 0 && !sidebarOpen,
-                }">
-                    <input type="checkbox" class="cursor-pointer" @click="changeOpen(index)" />
-                    <div
-                        class="collapse-title px-4 flex items-center h-12 cursor-pointer hover:bg-gray-100 dark:hover:bg-[#373f59]">
-                        <Icon v-if="item?.icon?.icon" :icon="item?.icon?.icon" class="text-xl mr-2" :class="{
-                            'text-yellow-500': item?.title === 'Favorite',
-                            'text-blue-500': item?.title !== 'Favorite',
-                        }" />
-                        <img v-if="item?.icon?.image" :src="item?.icon?.image" class="w-6 h-6 rounded-full mr-3" />
-                        <div class="text-sm capitalize flex-1 text-gray-700 dark:text-gray-200 whitespace-nowrap">
-                            {{ item?.title }}
-                        </div>
-                        <div v-if="item?.badgeContent" class="mr-6 badge badge-sm" :class="item?.badgeClass">
-                            {{ item?.badgeContent }}
-                        </div>
-                    </div>
-                    <div class="collapse-content">
-                        <div class="menu bg-base-100 w-full">
-                            <RouterLink v-for="(el, key) of item?.children" @click="sidebarShow = false" :key="key"
-                                class="hover:bg-gray-100 dark:hover:bg-[#373f59] rounded cursor-pointer px-3 py-2 flex items-center"
-                                :to="el?.to" :class="{
-                                    '!bg-primary':
-                                        $route.path === el?.to?.path && item?.title !== 'Favorite',
-                                }">
-                                <Icon v-if="!el?.icon?.image" icon="mdi:chevron-right" class="mr-2 ml-3" :class="{
-                                    'text-white': $route.path === el?.to?.path &&
-                                        item?.title !== 'Favorite',
-                                }" />
-                                <img v-if="el?.icon?.image" :src="el?.icon?.image" class="w-6 h-6 rounded-full mr-3 ml-4" />
-                                <div class="text-base capitalize text-gray-500 dark:text-gray-300" :class="{
-                                    'text-white':
-                                        $route.path === el?.to?.path &&
-                                        item?.title !== 'Favorite',
-                                }">
-                                    {{ item?.title === 'Favorite' ? el?.title : $t(el?.title) }}
-                                </div>
-                            </RouterLink>
-                        </div>
-                    </div>
-                </div>
-
-                <RouterLink :to="item?.to" v-if="item?.title && !item?.children?.length && item?.to"
-                    @click="sidebarShow = false"
-                    class="collapse-title px-4 flex items-center py-2 hover:bg-gray-100 dark:hover:bg-[#373f59]">
-                    <Icon v-if="item?.icon?.icon" :icon="item?.icon?.icon" class="text-xl mr-2" :class="{
-                        'text-yellow-500': item?.title === 'Favorite',
-                        'text-blue-500': item?.title !== 'Favorite',
-                    }" />
-                    <img v-if="item?.icon?.image" :src="item?.icon?.image" class="w-6 h-6 rounded-full mr-3" />
-                    <div class="text-sm capitalize flex-1 text-gray-700 dark:text-gray-200 whitespace-nowrap">
-                        {{ item?.title }}
-                    </div>
-                    <div v-if="item?.badgeContent" class=" badge badge-sm" :class="item?.badgeClass">
-                        {{ item?.badgeContent }}
-                    </div>
-                </RouterLink>
-                <div v-if="item?.heading" class="px-4 text-sm pt-3 text-gray-400 pb-2 uppercase">
-                    {{ item?.heading }}
-                </div>
-            </div>
-            <div class="px-2">
-                <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 rounded-lg 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-sm capitalize flex-1 text-gray-600 dark:text-gray-200">
-                        Osmosis
-                    </div>
-                </a>
-                <a href="https://becole.com"
-                    class="collapse-title px-4 flex items-center py-1 rounded-lg 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-sm capitalize flex-1 text-gray-600 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 rounded-lg 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-600 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 rounded-lg 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-600 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 rounded-lg 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-600 dark:text-gray-200">
-                        FAQ
-                    </div>
-                </a>
-            </div>
+  <div class="bg-gray-100 dark:bg-[#171d30]">
+    <!-- sidebar -->
+    <div
+      class="w-64 fixed z-50 left-0 top-0 bottom-0 overflow-auto bg-base-100 border-r border-gray-100 dark:border-gray-700"
+      :class="{ block: sidebarShow, 'hidden xl:!block': !sidebarShow }"
+    >
+      <div class="flex items-center pl-4 py-4 mb-1">
+        <img class="w-10 h-10" src="../../assets/logo.svg" />
+        <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"
+        >
+          <Icon icon="mdi-close" class="text-3xl" />
         </div>
-        <div class="xl:!ml-64 px-5 pt-4">
-            <!-- header -->
-            <div class="flex items-center py-3 bg-base-100 mb-4 rounded px-4 sticky top-0 z-10 shadow">
-                <div class="text-2xl pr-3 cursor-pointer xl:!hidden" @click="sidebarShow = true">
-                    <Icon icon="mdi-menu" />
-                </div>
-
-                <ChainProfile />
-
-                <div class="flex-1 w-0"></div>
-
-                <!-- <NavSearchBar />-->
-                <NavBarI18n class="hidden md:!inline-block" />
-                <NavbarThemeSwitcher class="!inline-block" />
-
-                <NavBarWallet />
+      </div>
+      <div
+        v-for="(item, index) of blockchain.computedChainMenu"
+        :key="index"
+        class="px-2"
+      >
+        <div
+          v-if="item?.title && item?.children?.length"
+          :tabindex="index"
+          class="collapse"
+          :class="{
+            'collapse-arrow': item?.children?.length > 0,
+            'collapse-open': index === 0 && sidebarOpen,
+            'collapse-close': index === 0 && !sidebarOpen,
+          }"
+        >
+          <input
+            type="checkbox"
+            class="cursor-pointer !h-10 block"
+            @click="changeOpen(index)"
+          />
+          <div
+            class="collapse-title !py-0 px-4 flex items-center cursor-pointer hover:bg-gray-100 dark:hover:bg-[#373f59]"
+          >
+            <Icon
+              v-if="item?.icon?.icon"
+              :icon="item?.icon?.icon"
+              class="text-xl mr-2"
+              :class="{
+                'text-yellow-500': item?.title === 'Favorite',
+                'text-blue-500': item?.title !== 'Favorite',
+              }"
+            />
+            <img
+              v-if="item?.icon?.image"
+              :src="item?.icon?.image"
+              class="w-6 h-6 rounded-full mr-3"
+            />
+            <div
+              class="text-base capitalize flex-1 text-gray-700 dark:text-gray-200 whitespace-nowrap"
+            >
+              {{ item?.title }}
             </div>
-
-            <!-- 👉 Pages -->
-            <RouterView v-slot="{ Component }">
-                <Transition mode="out-in">
-                    <Component :is="Component" />
-                </Transition>
-            </RouterView>
-
-            <newFooter />
+            <div
+              v-if="item?.badgeContent"
+              class="mr-6 badge badge-sm"
+              :class="item?.badgeClass"
+            >
+              {{ item?.badgeContent }}
+            </div>
+          </div>
+          <div class="collapse-content">
+            <div class="menu bg-base-100 w-full">
+              <RouterLink
+                v-for="(el, key) of item?.children"
+                @click="sidebarShow = false"
+                :key="key"
+                class="hover:bg-gray-100 dark:hover:bg-[#373f59] rounded cursor-pointer px-3 py-2 flex items-center"
+                :to="el?.to"
+                :class="{
+                  '!bg-primary':
+                    $route.path === el?.to?.path && item?.title !== 'Favorite',
+                }"
+              >
+                <Icon
+                  v-if="!el?.icon?.image"
+                  icon="mdi:chevron-right"
+                  class="mr-2 ml-3"
+                  :class="{
+                    'text-white':
+                      $route.path === el?.to?.path &&
+                      item?.title !== 'Favorite',
+                  }"
+                />
+                <img
+                  v-if="el?.icon?.image"
+                  :src="el?.icon?.image"
+                  class="w-6 h-6 rounded-full mr-3 ml-4"
+                />
+                <div
+                  class="text-base capitalize text-gray-500 dark:text-gray-300"
+                  :class="{
+                    'text-white':
+                      $route.path === el?.to?.path &&
+                      item?.title !== 'Favorite',
+                  }"
+                >
+                  {{ item?.title === 'Favorite' ? el?.title : $t(el?.title) }}
+                </div>
+              </RouterLink>
+            </div>
+          </div>
         </div>
+
+        <RouterLink
+          :to="item?.to"
+          v-if="item?.title && !item?.children?.length && item?.to"
+          @click="sidebarShow = false"
+          class=" cursor-pointer rounded-lg px-4 flex items-center py-2 hover:bg-gray-100 dark:hover:bg-[#373f59]"
+        >
+          <Icon
+            v-if="item?.icon?.icon"
+            :icon="item?.icon?.icon"
+            class="text-xl mr-2"
+            :class="{
+              'text-yellow-500': item?.title === 'Favorite',
+              'text-blue-500': item?.title !== 'Favorite',
+            }"
+          />
+          <img
+            v-if="item?.icon?.image"
+            :src="item?.icon?.image"
+            class="w-6 h-6 rounded-full mr-3"
+          />
+          <div
+            class="text-base capitalize flex-1 text-gray-700 dark:text-gray-200 whitespace-nowrap"
+          >
+            {{ item?.title }}
+          </div>
+          <div
+            v-if="item?.badgeContent"
+            class="badge badge-sm"
+            :class="item?.badgeClass"
+          >
+            {{ item?.badgeContent }}
+          </div>
+        </RouterLink>
+        <div
+          v-if="item?.heading"
+          class="px-4 text-sm text-gray-400 pb-2 uppercase"
+        >
+          {{ item?.heading }}
+        </div>
+      </div>
+      <div class="px-2">
+        <div class="px-4 text-sm pt-2 text-gray-400 pb-2 uppercase">
+          Sponsors
+        </div>
+        <a
+          href="https://osmosis.zone"
+          target="_blank"
+          class="py-2 px-4 flex items-center cursor-pointer rounded-lg 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-sm capitalize flex-1 text-gray-600 dark:text-gray-200"
+          >
+            Osmosis
+          </div>
+        </a>
+        <a
+          href="https://becole.com"
+          target="_blank"
+          class="py-2 px-4 flex items-center  cursor-pointer rounded-lg 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-sm capitalize flex-1 text-gray-600 dark:text-gray-200"
+          >
+            Becole
+          </div>
+        </a>
+
+        <div class="px-4 text-sm pt-2 text-gray-400 pb-2 uppercase">Links</div>
+        <a
+          href="https://twitter.com/ping_pub"
+          target="_blank"
+          class="py-2 px-4 flex items-center cursor-pointer rounded-lg 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-600 dark:text-gray-200"
+          >
+            Twitter
+          </div>
+        </a>
+        <a
+          v-if="showDiscord"
+          href="https://discord.com/invite/CmjYVSr6GW"
+          target="_blank"
+          class="py-2 px-4 flex items-center rounded-lg cursor-pointer 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-600 dark:text-gray-200"
+          >
+            Discord
+          </div>
+        </a>
+        <a
+          href="https://github.com/ping-pub/explorer/discussions"
+          target="_blank"
+          class="py-2 px-4 flex items-center rounded-lg cursor-pointer 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-600 dark:text-gray-200"
+          >
+            FAQ
+          </div>
+        </a>
+      </div>
     </div>
+    <div class="xl:!ml-64 px-5 pt-4">
+      <!-- header -->
+      <div
+        class="flex items-center py-3 bg-base-100 mb-4 rounded px-4 sticky top-0 z-10 shadow"
+      >
+        <div
+          class="text-2xl pr-3 cursor-pointer xl:!hidden"
+          @click="sidebarShow = true"
+        >
+          <Icon icon="mdi-menu" />
+        </div>
+
+        <ChainProfile />
+
+        <div class="flex-1 w-0"></div>
+
+        <!-- <NavSearchBar />-->
+        <NavBarI18n class="hidden md:!inline-block" />
+        <NavbarThemeSwitcher class="!inline-block" />
+
+        <NavBarWallet />
+      </div>
+
+      <!-- 👉 Pages -->
+      <RouterView v-slot="{ Component }">
+        <Transition mode="out-in">
+          <Component :is="Component" />
+        </Transition>
+      </RouterView>
+
+      <newFooter />
+    </div>
+  </div>
 </template>
diff --git a/src/modules/[chain]/cosmwasm/[code_id]/contracts.vue b/src/modules/[chain]/cosmwasm/[code_id]/contracts.vue
index ed64392b..99df1fd2 100644
--- a/src/modules/[chain]/cosmwasm/[code_id]/contracts.vue
+++ b/src/modules/[chain]/cosmwasm/[code_id]/contracts.vue
@@ -2,9 +2,9 @@
 import { useWasmStore } from '../WasmStore';
 import { ref } from 'vue';
 import type {
-    ContractInfo,
-    PaginabledContractStates,
-    PaginabledContracts,
+  ContractInfo,
+  PaginabledContractStates,
+  PaginabledContracts,
 } from '../types';
 import DynamicComponent from '@/components/dynamic/DynamicComponent.vue';
 import { useFormatter, useTxDialog } from '@/stores';
@@ -13,20 +13,20 @@ import { PageRequest } from '@/types';
 
 const props = defineProps(['code_id', 'chain']);
 
-const pageRequest = ref(new PageRequest())
+const pageRequest = ref(new PageRequest());
 const response = ref({} as PaginabledContracts);
 
 const wasmStore = useWasmStore();
 function loadContract(pageNum: number) {
-    const pr = new PageRequest()
-    pr.setPage(pageNum)
-    wasmStore.wasmClient.getWasmCodeContracts(props.code_id, pr).then((x) => {
-        response.value = x;
-    });
+  const pr = new PageRequest();
+  pr.setPage(pageNum);
+  wasmStore.wasmClient.getWasmCodeContracts(props.code_id, pr).then((x) => {
+    response.value = x;
+  });
 }
-loadContract(1)
+loadContract(1);
 
-const dialog = useTxDialog()
+const dialog = useTxDialog();
 const format = useFormatter();
 const infoDialog = ref(false);
 const info = ref({} as ContractInfo);
@@ -34,66 +34,68 @@ const state = ref({} as PaginabledContractStates);
 const selected = ref('');
 
 function showInfo(address: string) {
-    wasmStore.wasmClient.getWasmContracts(address).then((x) => {
-        info.value = x.contract_info;
-    });
+  wasmStore.wasmClient.getWasmContracts(address).then((x) => {
+    info.value = x.contract_info;
+  });
 }
 function showState(address: string) {
-    selected.value = address
-    pageload(1)
+  selected.value = address;
+  pageload(1);
 }
 
 function pageload(p: number) {
-    pageRequest.value.setPage(p)
-    wasmStore.wasmClient.getWasmContractStates(selected.value, pageRequest.value).then((x) => {
-        state.value = x;
+  pageRequest.value.setPage(p);
+  wasmStore.wasmClient
+    .getWasmContractStates(selected.value, pageRequest.value)
+    .then((x) => {
+      state.value = x;
     });
 }
 
 function showQuery(address: string) {
-    selected.value = address;
-    query.value = '';
-    result.value = '';
+  selected.value = address;
+  query.value = '';
+  result.value = '';
 }
 
 function queryContract() {
-    try {
-        if (selectedRadio.value === 'raw') {
-            wasmStore.wasmClient
-                .getWasmContractRawQuery(selected.value, query.value)
-                .then((x) => {
-                    result.value = JSON.stringify(x);
-                })
-                .catch((err) => {
-                    result.value = JSON.stringify(err);
-                });
-        } else {
-            wasmStore.wasmClient
-                .getWasmContractSmartQuery(selected.value, query.value)
-                .then((x) => {
-                    result.value = JSON.stringify(x);
-                })
-                .catch((err) => {
-                    result.value = JSON.stringify(err);
-                });
-        }
-    } catch (err) {
-        result.value = JSON.stringify(err); // not works for now
+  try {
+    if (selectedRadio.value === 'raw') {
+      wasmStore.wasmClient
+        .getWasmContractRawQuery(selected.value, query.value)
+        .then((x) => {
+          result.value = JSON.stringify(x);
+        })
+        .catch((err) => {
+          result.value = JSON.stringify(err);
+        });
+    } else {
+      wasmStore.wasmClient
+        .getWasmContractSmartQuery(selected.value, query.value)
+        .then((x) => {
+          result.value = JSON.stringify(x);
+        })
+        .catch((err) => {
+          result.value = JSON.stringify(err);
+        });
     }
-    // TODO, show error in the result.
+  } catch (err) {
+    result.value = JSON.stringify(err); // not works for now
+  }
+  // TODO, show error in the result.
 }
 
 const radioContent = [
-    {
-        title: 'Raw Query',
-        desc: 'Return raw result',
-        value: 'raw',
-    },
-    {
-        title: 'Smart Query',
-        desc: 'Return structure result if possible',
-        value: 'smart',
-    },
+  {
+    title: 'Raw Query',
+    desc: 'Return raw result',
+    value: 'raw',
+  },
+  {
+    title: 'Smart Query',
+    desc: 'Return structure result if possible',
+    value: 'smart',
+  },
 ];
 
 const selectedRadio = ref('raw');
@@ -101,130 +103,193 @@ const query = ref('');
 const result = ref('');
 </script>
 <template>
-    <div>
-        <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
-            <h2 class="card-title truncate w-full">
-                Contract List of Code: {{ props.code_id }}
-            </h2>
-            <div class="overflow-x-auto">
-                <table class="table table-compact  w-full mt-4">
-                    <thead>
-                        <tr>
-                            <th style="position: relative; z-index: 2">Contract List</th>
-                            <th>Actions</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr v-for="(v, index) in response.contracts" :key="index" class="hover">
-                            <td>{{ v }}</td>
-                            <td>
-                                <label @click="showInfo(v)" for="modal-contract-detail"
-                                    class="btn btn-primary btn-xs text-xs mr-2">contract</label>
+  <div>
+    <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
+      <h2 class="card-title truncate w-full">
+        Contract List of Code: {{ props.code_id }}
+      </h2>
+      <div class="overflow-x-auto">
+        <table class="table table-compact w-full mt-4">
+          <thead>
+            <tr>
+              <th style="position: relative; z-index: 2">Contract List</th>
+              <th>Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              v-for="(v, index) in response.contracts"
+              :key="index"
+              class="hover"
+            >
+              <td>{{ v }}</td>
+              <td>
+                <label
+                  @click="showInfo(v)"
+                  for="modal-contract-detail"
+                  class="btn btn-primary btn-xs text-xs mr-2"
+                  >contract</label
+                >
 
-                                <label class="btn btn-primary btn-xs text-xs mr-2" for="modal-contract-states"
-                                    @click="showState(v)">
-                                    States
-                                </label>
-                                <label for="modal-contract-query" class="btn btn-primary btn-xs text-xs mr-2"
-                                    @click="showQuery(v)">
-                                    Query
-                                </label>
-                                <label for="wasm_execute_contract" class="btn btn-primary btn-xs text-xs"
-                                    @click="dialog.open('wasm_execute_contract', { contract: v })">
-                                    Execute
-                                </label>
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-                <div class="flex justify-between">
-                    <PaginationBar :limit="50" :total="response.pagination?.total" :callback="loadContract" />
-                    <label for="wasm_instantiate_contract" class="btn btn-primary my-5"
-                        @click="dialog.open('wasm_instantiate_contract', { codeId: props.code_id })">Instantiate
-                        Contract</label>
-                </div>
-            </div>
+                <label
+                  class="btn btn-primary btn-xs text-xs mr-2"
+                  for="modal-contract-states"
+                  @click="showState(v)"
+                >
+                  States
+                </label>
+                <label
+                  for="modal-contract-query"
+                  class="btn btn-primary btn-xs text-xs mr-2"
+                  @click="showQuery(v)"
+                >
+                  Query
+                </label>
+                <label
+                  for="wasm_execute_contract"
+                  class="btn btn-primary btn-xs text-xs"
+                  @click="dialog.open('wasm_execute_contract', { contract: v })"
+                >
+                  Execute
+                </label>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        <div class="flex justify-between">
+          <PaginationBar
+            :limit="50"
+            :total="response.pagination?.total"
+            :callback="loadContract"
+          />
+          <label
+            for="wasm_instantiate_contract"
+            class="btn btn-primary my-5"
+            @click="
+              dialog.open('wasm_instantiate_contract', {
+                codeId: props.code_id,
+              })
+            "
+            >Instantiate Contract</label
+          >
         </div>
+      </div>
+    </div>
 
-        <input type="checkbox" id="modal-contract-detail" class="modal-toggle" />
-        <label for="modal-contract-detail" class="modal cursor-pointer">
-            <label class="modal-box relative p-2" for="">
-                <div>
-                    <div class="flex items-center justify-between px-3 pt-2">
-                        <div class="text-lg">Contract Detail</div>
-                        <label @click="infoDialog = false" for="modal-contract-detail"
-                            class="btn btn-sm btn-circle">✕</label>
-                    </div>
-                    <div>
-                        <DynamicComponent :value="info" />
-                    </div>
-                </div>
-            </label>
-        </label>
-
-        <input type="checkbox" id="modal-contract-states" class="modal-toggle" />
-        <label for="modal-contract-states" class="modal cursor-pointer">
-            <label class="modal-box w-11/12 max-w-5xl" for="">
-                <div>
-                    <div class="flex items-center justify-between px-3 pt-2 mb-4">
-                        <div class="text-lg">Contract States</div>
-                        <label @click="infoDialog = false" for="modal-contract-states"
-                            class="btn btn-sm btn-circle">✕</label>
-                    </div>
-                    <div class="overflow-auto">
-                        <table class="table table-compact w-full text-sm">
-                            <tr v-for="(v, index) in state.models" :key="index" class="hover">
-                                <td class="" :data-tip="format.hexToString(v.key)">
-                                    <span class="font-bold">{{ format.hexToString(v.key) }}</span>
-                                </td>
-                                <td class="text-left w-3/4" :title="format.base64ToString(v.value)">
-                                    {{ format.base64ToString(v.value) }}
-                                </td>
-                            </tr>
-                        </table>
-                        <PaginationBar :limit="pageRequest.limit" :total="state.pagination?.total" :callback="pageload" />
-                    </div>
-                </div>
-            </label>
-        </label>
-
-        <input type="checkbox" id="modal-contract-query" class="modal-toggle" />
-        <label for="modal-contract-query" class="modal cursor-pointer">
-            <label class="modal-box w-11/12 max-w-5xl" for="">
-                <div>
-                    <div class="flex items-center justify-between px-3 pt-2 mb-4">
-                        <div class="text-lg font-semibold">Query Contract</div>
-                        <label @click="infoDialog = false" for="modal-contract-query"
-                            class="btn btn-sm btn-circle">✕</label>
-                    </div>
-                    <div class="px-3">
-                        <div>
-                            <div class="grid grid-cols-2 gap-4 mb-4">
-                                <div class="form-control border rounded px-4" v-for="(item, index) of radioContent"
-                                    :key="index" :class="{ 'pt-2': index === 0 }">
-                                    <label class="label cursor-pointer justify-start" @click="selectedRadio = item?.value">
-                                        <input type="radio" name="radio-10" class="radio radio-sm radio-primary mr-4"
-                                            :checked="item?.value === selectedRadio" style="border: 1px solid #d2d6dc" />
-                                        <div>
-                                            <div class="text-base font-semibold">
-                                                {{ item?.title }}
-                                            </div>
-                                            <div class="text-xs">{{ item?.desc }}</div>
-                                        </div>
-                                    </label>
-                                </div>
-                            </div>
-
-                            <VTextarea v-model="query" label="Query String" class="my-2" />
-                            <VTextarea v-model="result" label="Result" />
-                        </div>
-                        <div class="mt-4 mb-4">
-                            <button class="btn !btn-yes !border-yes px-4 text-white" @click="queryContract()">
-                                Query Contract
-                            </button>
-                        </div>
-                    </div>
-                </div>
-        </label>
+    <input type="checkbox" id="modal-contract-detail" class="modal-toggle" />
+    <label for="modal-contract-detail" class="modal cursor-pointer">
+      <label class="modal-box relative p-2" for="">
+        <div>
+          <div class="flex items-center justify-between px-3 pt-2">
+            <div class="text-lg">Contract Detail</div>
+            <label
+              @click="infoDialog = false"
+              for="modal-contract-detail"
+              class="btn btn-sm btn-circle"
+              >✕</label
+            >
+          </div>
+          <div>
+            <DynamicComponent :value="info" />
+          </div>
+        </div>
+      </label>
     </label>
-</div></template>
+
+    <input type="checkbox" id="modal-contract-states" class="modal-toggle" />
+    <label for="modal-contract-states" class="modal cursor-pointer">
+      <label class="modal-box w-11/12 max-w-5xl" for="">
+        <div>
+          <div class="flex items-center justify-between px-3 pt-2 mb-4">
+            <div class="text-lg">Contract States</div>
+            <label
+              @click="infoDialog = false"
+              for="modal-contract-states"
+              class="btn btn-sm btn-circle"
+              >✕</label
+            >
+          </div>
+          <div class="overflow-auto">
+            <table class="table table-compact w-full text-sm">
+              <tr v-for="(v, index) in state.models" :key="index" class="hover">
+                <td class="" :data-tip="format.hexToString(v.key)">
+                  <span class="font-bold">{{ format.hexToString(v.key) }}</span>
+                </td>
+                <td
+                  class="text-left w-3/4"
+                  :title="format.base64ToString(v.value)"
+                >
+                  {{ format.base64ToString(v.value) }}
+                </td>
+              </tr>
+            </table>
+            <PaginationBar
+              :limit="pageRequest.limit"
+              :total="state.pagination?.total"
+              :callback="pageload"
+            />
+          </div>
+        </div>
+      </label>
+    </label>
+
+    <input type="checkbox" id="modal-contract-query" class="modal-toggle" />
+    <label for="modal-contract-query" class="modal cursor-pointer">
+      <label class="modal-box w-11/12 max-w-5xl" for="">
+        <div>
+          <div class="flex items-center justify-between px-3 pt-2 mb-4">
+            <div class="text-lg font-semibold">Query Contract</div>
+            <label
+              @click="infoDialog = false"
+              for="modal-contract-query"
+              class="btn btn-sm btn-circle"
+              >✕</label
+            >
+          </div>
+          <div class="px-3">
+            <div>
+              <div class="grid grid-cols-2 gap-4 mb-4">
+                <div
+                  class="form-control border rounded px-4"
+                  v-for="(item, index) of radioContent"
+                  :key="index"
+                  :class="{ 'pt-2': index === 0 }"
+                >
+                  <label
+                    class="label cursor-pointer justify-start"
+                    @click="selectedRadio = item?.value"
+                  >
+                    <input
+                      type="radio"
+                      name="radio-10"
+                      class="radio radio-sm radio-primary mr-4"
+                      :checked="item?.value === selectedRadio"
+                      style="border: 1px solid #d2d6dc"
+                    />
+                    <div>
+                      <div class="text-base font-semibold">
+                        {{ item?.title }}
+                      </div>
+                      <div class="text-xs">{{ item?.desc }}</div>
+                    </div>
+                  </label>
+                </div>
+              </div>
+
+              <VTextarea v-model="query" label="Query String" class="my-2" />
+              <VTextarea v-model="result" label="Result" />
+            </div>
+            <div class="mt-4 mb-4">
+              <button
+                class="btn !btn-yes !border-yes px-4 text-white"
+                @click="queryContract()"
+              >
+                Query Contract
+              </button>
+            </div>
+          </div>
+        </div>
+      </label>
+    </label>
+  </div>
+</template>
diff --git a/src/modules/[chain]/params/index.vue b/src/modules/[chain]/params/index.vue
index 8c634bda..365c1221 100644
--- a/src/modules/[chain]/params/index.vue
+++ b/src/modules/[chain]/params/index.vue
@@ -45,7 +45,7 @@ onMounted(() => {
     </div>
 
     <!-- Node Information -->
-    <div class="bg-base-100 px-4 pt-3 pb-4ß rounded-sm mt-6">
+    <div class="bg-base-100 px-4 pt-3 pb-4 rounded-sm mt-6">
       <div class="text-base mb-3 text-main">{{ store.nodeVersion?.title }}</div>
       <ArrayObjectElement :value="store.nodeVersion?.items" :thead="false" />
     </div>
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 5909275f..3b9aa206 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { Icon } from '@iconify/vue';
 import {
   useDashboard,
   LoadingStatus,
@@ -6,14 +7,11 @@ import {
 } from '@/stores/useDashboard';
 import ChainSummary from '@/components/ChainSummary.vue';
 import { computed, ref } from 'vue';
-import { useBlockchain } from '@/stores';
 
 const dashboard = useDashboard();
 
 dashboard.$subscribe((mutation, state) => {
   localStorage.setItem('favorite', JSON.stringify(state.favorite));
-  // TODO: cause endless loop
-  // dashboard.loadingPrices()
 });
 const keywords = ref('');
 const chains = computed(() => {
@@ -28,7 +26,7 @@ const chains = computed(() => {
 </script>
 <template>
   <div class="">
-    <div class="flex items-center justify-center mb-6 mt-10">
+    <div class="flex items-center justify-center mb-6 mt-14">
       <div class="w-8 md:!w-16 rounded-full mr-3">
         <img src="/logo.svg" />
       </div>
@@ -52,17 +50,11 @@ const chains = computed(() => {
       <progress class="progress progress-info w-80 h-1"></progress>
     </div>
 
-    <VTextField
-      v-model="keywords"
-      variant="underlined"
-      :placeholder="$t('index.search_placeholder')"
-      style="max-width: 300px"
-      app
-    >
-      <template #append-inner>
-        {{ chains.length }}/{{ dashboard.length }}
-      </template>
-    </VTextField>
+    <div class="flex items-center rounded-full bg-base-100  border border-gray-200 dark:border-gray-700 mt-10">
+      <Icon icon="mdi:magnify" class="text-2xl text-gray-400 ml-3"/>
+      <input :placeholder="$t('index.search_placeholder')" class="px-4 h-10 bg-transparent flex-1 outline-none text-base" v-model="keywords" />
+      <div class="px-4 text-base">{{ chains.length }}/{{ dashboard.length }}</div>
+    </div>
 
     <div
       class="grid grid-cols-2 gap-4 mt-6 md:!grid-cols-3 lg:!grid-cols-4 2xl:!grid-cols-5"
diff --git a/tailwind.config.js b/tailwind.config.js
index 93a73c56..13ce1f2f 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -11,14 +11,7 @@ module.exports = {
         main: 'var(--text-main)',
         secondary: 'var(--text-secondary)',
         active: 'var(--bg-active)',
-      },
-      borderRadius: {
-        none: '0',
-        xs: '.125rem',
-        sm: '.25rem',
-        DEFAULT: '.5rem',
-        lg: '.75rem',
-      },
+      }
     },
   },
   plugins: [require('daisyui')],