From b1f3afba3e435eaa0c3886428e931a777d242c1c Mon Sep 17 00:00:00 2001
From: "Alisa | Side.one" <alisa@side.one>
Date: Sun, 7 May 2023 09:07:33 +0800
Subject: [PATCH 1/8] feat: DynamicComponent UI refactot

---
 src/components/dynamic/ArrayBytesElement.vue  |  4 +-
 src/components/dynamic/ArrayObjectElement.vue | 56 ++++++++++---------
 .../dynamic/ObjectHorizontalElement.vue       | 25 ++++++---
 src/components/dynamic/TxsElement.vue         | 56 ++++++++++---------
 4 files changed, 76 insertions(+), 65 deletions(-)

diff --git a/src/components/dynamic/ArrayBytesElement.vue b/src/components/dynamic/ArrayBytesElement.vue
index 7508013e..ed923cb6 100644
--- a/src/components/dynamic/ArrayBytesElement.vue
+++ b/src/components/dynamic/ArrayBytesElement.vue
@@ -7,8 +7,8 @@ const props = defineProps({
 </script>
 <template>
   <div>
-    <div v-for="v in props.value">
-      {{ toBase64(v) }}
+    <div v-for="(item,index) of props.value" :key="index">
+      {{ toBase64(item) }}
     </div>
   </div>
 </template>
diff --git a/src/components/dynamic/ArrayObjectElement.vue b/src/components/dynamic/ArrayObjectElement.vue
index 790a1cf3..6ac1fc3e 100644
--- a/src/components/dynamic/ArrayObjectElement.vue
+++ b/src/components/dynamic/ArrayObjectElement.vue
@@ -18,32 +18,34 @@ const header = computed(() => {
 });
 </script>
 <template>
-  <VTable
-    v-if="header.length > 0"
-    density="compact"
-    height="300px"
-    fixed-header
-    hover
-  >
-    <thead v-if="thead">
-      <tr>
-        <th
-          v-for="(item, index) in header"
-          :key="index"
-          class="text-left text-capitalize"
-        >
-          {{ item }}
-        </th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr v-for="(item, index) in value" :key="index">
-        <td v-for="(el, key) in header" :key="key">
-          <DynamicComponent :value="item[el]" />
-        </td>
-      </tr>
-    </tbody>
-  </VTable>
+  <div class="overflow-x-auto">
+    <VTable
+      v-if="header.length > 0"
+      density="compact"
+      height="300px"
+      fixed-header
+      hover
+    >
+      <thead v-if="thead">
+        <tr>
+          <th
+            v-for="(item, index) in header"
+            :key="index"
+            class="text-left text-capitalize"
+          >
+            {{ item }}
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(item, index) in value" :key="index">
+          <td v-for="(el, key) in header" :key="key">
+            <DynamicComponent :value="item[el]" />
+          </td>
+        </tr>
+      </tbody>
+    </VTable>
 
-  <div v-else class="h-[300px]"></div>
+    <div v-else class="h-[300px]"></div>
+  </div>
 </template>
diff --git a/src/components/dynamic/ObjectHorizontalElement.vue b/src/components/dynamic/ObjectHorizontalElement.vue
index 1db000aa..8158fc0b 100644
--- a/src/components/dynamic/ObjectHorizontalElement.vue
+++ b/src/components/dynamic/ObjectHorizontalElement.vue
@@ -1,19 +1,26 @@
 <script lang="ts" setup>
 import DynamicComponent from './DynamicComponent.vue';
 import { select } from './index';
-
+import { ref} from 'vue'
 const props = defineProps(['value']);
 const tab = ref('');
+const changeTab = (val: string) => {
+  tab.value = val;
+};
 </script>
 <template>
   <div>
-    <VTabs v-model="tab">
-      <VTab v-for="(v, k) of value" :value="k">{{ k }}</VTab>
-    </VTabs>
-    <VWindow v-model="tab" style="min-height: 25px">
-      <VWindowItem v-for="(v, k) of value" :value="k"
-        ><DynamicComponent :value="v"
-      /></VWindowItem>
-    </VWindow>
+    <div class="tabs">
+      <a class="tab  tab-bordered text-gray-400 uppercase" 
+        v-for="(item, index) of value" :value="index"
+        :class="{ 'tab-active': tab === String(index) }"
+        @click="changeTab(String(index))"
+      >{{ index }}</a>
+    </div>
+    <div class="min-h-[25px] mt-4">
+        <div v-for="(v, k) of value" :value="k">
+          <DynamicComponent :value="v" v-show=" tab === String(k)"/>
+        </div>
+    </div>
   </div>
 </template>
diff --git a/src/components/dynamic/TxsElement.vue b/src/components/dynamic/TxsElement.vue
index 2bbe6052..a2fca156 100644
--- a/src/components/dynamic/TxsElement.vue
+++ b/src/components/dynamic/TxsElement.vue
@@ -21,31 +21,33 @@ const format = useFormatter();
 const chain = useBlockchain();
 </script>
 <template>
-  <VTable density="compact" v-if="txs.length > 0">
-    <thead>
-      <tr>
-        <th>Hash</th>
-        <th>Msgs</th>
-        <th>Memo</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr v-for="item in txs">
-        <td>
-          <RouterLink :to="`/${chain.chainName}/tx/${item.hash}`">{{
-            item.hash
-          }}</RouterLink>
-        </td>
-        <td>
-          {{
-            format.messages(
-              item.tx.body.messages.map((x) => ({ '@type': x.typeUrl }))
-            )
-          }}
-        </td>
-        <td>{{ item.tx.body.memo }}</td>
-      </tr>
-    </tbody>
-  </VTable>
-  <div v-else>[]</div>
+  <div class="overflow-x-auto mt-4">
+    <table class="table w-full" density="compact" v-if="txs.length > 0">
+      <thead>
+        <tr>
+          <th style="position: relative">Hash</th>
+          <th>Msgs</th>
+          <th>Memo</th>
+        </tr>
+      </thead>
+      <tbody class="text-sm">
+        <tr v-for="item in txs">
+          <td>
+            <RouterLink :to="`/${chain.chainName}/tx/${item.hash}`">{{
+              item.hash
+            }}</RouterLink>
+          </td>
+          <td>
+            {{
+              format.messages(
+                item.tx.body.messages.map((x) => ({ '@type': x.typeUrl }))
+              )
+            }}
+          </td>
+          <td>{{ item.tx.body.memo }}</td>
+        </tr>
+      </tbody>
+    </table>
+    <div v-else>[]</div>
+  </div>
 </template>

From a64c28c6eeeabb300fe00016a14c7ac71409d24c Mon Sep 17 00:00:00 2001
From: "Alisa | Side.one" <alisa@side.one>
Date: Sun, 7 May 2023 09:31:07 +0800
Subject: [PATCH 2/8] feat: dashboard

---
 src/modules/[chain]/index.vue | 37 ++++++++++++++++++++---------------
 1 file changed, 21 insertions(+), 16 deletions(-)

diff --git a/src/modules/[chain]/index.vue b/src/modules/[chain]/index.vue
index f30edb19..8a86c09b 100644
--- a/src/modules/[chain]/index.vue
+++ b/src/modules/[chain]/index.vue
@@ -59,7 +59,7 @@ function shortName(name: string, id: string) {
             </VCardSubtitle>
           </VCardItem>
           <VDivider />
-          <VCardItem>
+          <div class="mt-4 pl-4">
             <VBtn
               variant="text"
               size="small"
@@ -92,7 +92,7 @@ function shortName(name: string, id: string) {
             >
               Github
             </VBtn>
-          </VCardItem>
+          </div>
           <VCardItem>
             <!-- SECTION upgrade plan banner -->
             <div
@@ -153,14 +153,14 @@ function shortName(name: string, id: string) {
               </div>
             </div>
             <VSpacer />
-            <VBtn
-              block
+            <a
               :color="store.trustColor"
-              class="mt-3"
+              class="mt-5 text-white btn btn-success w-full flex items-center"
               :href="ticker.trade_url"
+              target="_blank"
             >
               Buy {{ coinInfo.symbol || '' }}
-            </VBtn>
+            </a>
           </VCardItem>
         </VCol>
         <VCol md="7">
@@ -169,18 +169,21 @@ function shortName(name: string, id: string) {
           </VCardItem>
         </VCol>
       </VRow>
-      <VDivider />
-      <VCardText style="max-height: 250px; overflow: auto">
+      <div class="h-[1px] w-full bg-gray-100 dark:bg-[#384059]"></div>
+      <div class="max-h-[250px] overflow-auto p-4 text-sm">
         <MdEditor
           :model-value="coinInfo.description?.en"
           previewOnly
         ></MdEditor>
-      </VCardText>
-      <VCardItem>
-        <VChip v-for="tag in coinInfo.categories" size="x-small" class="mr-2">{{
-          tag
-        }}</VChip>
-      </VCardItem>
+      </div>
+      <div class="mx-4 flex flex-wrap items-center">
+        <div
+          v-for="tag in coinInfo.categories"
+          class="mr-2 mb-4 text-xs bg-gray-100 dark:bg-[#384059] px-3 rounded-full py-1"
+        >
+          {{ tag }}
+        </div>
+      </div>
     </VCard>
 
     <div class="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-6">
@@ -201,9 +204,11 @@ function shortName(name: string, id: string) {
       >
     </VCard>
 
-    <VBtn block color="secondary" variant="outlined" class="mt-5"
-      >Connect Wallet</VBtn
+    <div
+      class="btn btn-primary w-full mt-5 flex items-center bg-transparent text-primary hover:bg-gray-100 hover:bg-transparent"
     >
+      Connect Wallet
+    </div>
   </div>
 </template>
 

From 8774bcdf72c4dcda4169d93ad08b420ab27de26c Mon Sep 17 00:00:00 2001
From: "Alisa | Side.one" <alisa@side.one>
Date: Sun, 7 May 2023 09:32:23 +0800
Subject: [PATCH 3/8] feat: ObjectHorizontalElement tab UI refactor

---
 src/components/dynamic/ObjectHorizontalElement.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/dynamic/ObjectHorizontalElement.vue b/src/components/dynamic/ObjectHorizontalElement.vue
index 8158fc0b..0b018720 100644
--- a/src/components/dynamic/ObjectHorizontalElement.vue
+++ b/src/components/dynamic/ObjectHorizontalElement.vue
@@ -3,7 +3,8 @@ import DynamicComponent from './DynamicComponent.vue';
 import { select } from './index';
 import { ref} from 'vue'
 const props = defineProps(['value']);
-const tab = ref('');
+const tab = ref(Object.keys(props.value)[0] || '');
+
 const changeTab = (val: string) => {
   tab.value = val;
 };
@@ -13,13 +14,13 @@ const changeTab = (val: string) => {
     <div class="tabs">
       <a class="tab  tab-bordered text-gray-400 uppercase" 
         v-for="(item, index) of value" :value="index"
-        :class="{ 'tab-active': tab === String(index) }"
+        :class="{ 'tab-active':tab === String(index) }"
         @click="changeTab(String(index))"
       >{{ index }}</a>
     </div>
     <div class="min-h-[25px] mt-4">
         <div v-for="(v, k) of value" :value="k">
-          <DynamicComponent :value="v" v-show=" tab === String(k)"/>
+          <DynamicComponent :value="v" v-show="tab === String(k)"/>
         </div>
     </div>
   </div>

From fd221916cfd44112d6d486dc64cde797f03be564 Mon Sep 17 00:00:00 2001
From: "Alisa | Side.one" <alisa@side.one>
Date: Sun, 7 May 2023 10:08:28 +0800
Subject: [PATCH 4/8] feat: dashboard tab UI refactor

---
 src/components/charts/PriceMarketChart.vue | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/components/charts/PriceMarketChart.vue b/src/components/charts/PriceMarketChart.vue
index 24443493..75953b1c 100644
--- a/src/components/charts/PriceMarketChart.vue
+++ b/src/components/charts/PriceMarketChart.vue
@@ -26,12 +26,25 @@ const series = computed(() => {
     },
   ];
 });
+
+function changeChart(type: string){
+  kind.value = type
+}
 </script>
 
 <template>
-  <VTabs v-model="kind" align-tabs="end"
-    ><VTab value="price">Price</VTab><VTab value="volume">Volume</VTab></VTabs
-  >
+  <div class="tabs tabs-boxed bg-transparent justify-end">
+    <a class="tab mr-2 text-gray-400 uppercase" 
+      :class="{'tab-active': kind ==='price' }"
+      @click="changeChart('price')">
+      Price
+    </a>
+    <a class="tab text-gray-400 uppercase" 
+      :class="{'tab-active': kind ==='volume' }"
+      @click="changeChart('volume')">
+      Volume
+    </a>
+  </div>
   <VueApexCharts
     type="area"
     height="261"

From 78678bf064f11dd143a27ac1e436bcc47aea6df9 Mon Sep 17 00:00:00 2001
From: "Alisa | Side.one" <alisa@side.one>
Date: Mon, 8 May 2023 21:44:49 +0800
Subject: [PATCH 5/8] feat: cosmwasm  UI refactor

---
 src/modules/[chain]/cosmwasm/index.vue | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/modules/[chain]/cosmwasm/index.vue b/src/modules/[chain]/cosmwasm/index.vue
index 8e2a770e..d2e5b1c7 100644
--- a/src/modules/[chain]/cosmwasm/index.vue
+++ b/src/modules/[chain]/cosmwasm/index.vue
@@ -14,13 +14,13 @@ wasmStore.wasmClient.getWasmCodeList().then((x) => {
 });
 </script>
 <template>
-  <div>
-    <VCard>
-      <VCardTitle>Cosmos Wasm Smart Contracts</VCardTitle>
-      <VTable>
+  <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
+    <h2 class="card-title truncate w-full">Cosmos Wasm Smart Contracts</h2>
+    <div class="overflow-x-auto">
+      <table class="table w-full mt-4 text-sm">
         <thead>
           <tr>
-            <th>Code Id</th>
+            <th style="position: relative;">Code Id</th>
             <th>Code Hash</th>
             <th>Creator</th>
             <th>Permissions</th>
@@ -47,8 +47,8 @@ wasmStore.wasmClient.getWasmCodeList().then((x) => {
             </td>
           </tr>
         </tbody>
-      </VTable>
-    </VCard>
+      </table>
+    </div>
   </div>
 </template>
 

From 4ea14028400fea3e5d26fb0bdea91ee79f34724f Mon Sep 17 00:00:00 2001
From: "Alisa | Side.one" <alisa@side.one>
Date: Mon, 8 May 2023 22:17:02 +0800
Subject: [PATCH 6/8] feat: Dashboard Active Proposals

---
 src/modules/[chain]/index.vue | 100 ++++++++++++++++++----------------
 1 file changed, 52 insertions(+), 48 deletions(-)

diff --git a/src/modules/[chain]/index.vue b/src/modules/[chain]/index.vue
index 8a86c09b..2dd7e779 100644
--- a/src/modules/[chain]/index.vue
+++ b/src/modules/[chain]/index.vue
@@ -2,6 +2,7 @@
 import MdEditor from 'md-editor-v3';
 import PriceMarketChart from '@/components/charts/PriceMarketChart.vue';
 
+import { Icon } from '@iconify/vue';
 import { useBlockchain, useFormatter } from '@/stores';
 import { onMounted, ref } from 'vue';
 import { useIndexModule } from './indexStore';
@@ -38,6 +39,29 @@ function shortName(name: string, id: string) {
     ? id
     : name;
 }
+
+const comLinks = [
+  {
+    name: 'Website',
+    icon: 'mdi-web',
+    href: store.homepage,
+  },
+  {
+    name: 'Twitter',
+    icon: 'mdi-twitter',
+    href: store.twitter,
+  },
+  {
+    name: 'Telegram',
+    icon: 'mdi-telegram',
+    href: store.telegram,
+  },
+  {
+    name: 'Github',
+    icon: 'mdi-github',
+    href: store.github,
+  },
+];
 </script>
 
 <template>
@@ -47,51 +71,31 @@ function shortName(name: string, id: string) {
         <VCol md="5">
           <VCardItem>
             <VCardTitle>
-              {{ coinInfo.name }} (
-              <span class="text-uppercase">{{ coinInfo.symbol }}</span>
-              )
+              {{ coinInfo.name }} (<span class="uppercase">{{
+                coinInfo.symbol
+              }}</span
+              >)
             </VCardTitle>
             <VCardSubtitle>
               Rank:
-              <VChip color="error" size="x-small"
-                >#{{ coinInfo.market_cap_rank }}</VChip
+              <div
+                class="badge text-xs badge-error bg-[#fcebea] dark:bg-[#41384d] text-red-400"
               >
+                #{{ coinInfo.market_cap_rank }}
+              </div>
             </VCardSubtitle>
           </VCardItem>
-          <VDivider />
-          <div class="mt-4 pl-4">
-            <VBtn
-              variant="text"
-              size="small"
-              :href="store.homepage"
-              prependIcon="mdi-web"
+          <div class="h-[1px] w-full bg-gray-100 dark:bg-[#384059]"></div>
+          <div class="mt-4 pl-4 flex items-center">
+            <a
+              v-for="(item, index) of comLinks"
+              :key="index"
+              :href="item.href"
+              class="link link-primary px-2 py-1 rounded-sm no-underline hover:text-primary hover:bg-gray-100 dark:hover:bg-slate-800 flex items-center"
             >
-              Website
-            </VBtn>
-            <VBtn
-              variant="text"
-              size="small"
-              :href="store.twitter"
-              prependIcon="mdi-twitter"
-            >
-              Twitter
-            </VBtn>
-            <VBtn
-              variant="text"
-              size="small"
-              :href="store.telegram"
-              prependIcon="mdi-telegram"
-            >
-              Telegram
-            </VBtn>
-            <VBtn
-              variant="text"
-              size="small"
-              :href="store.github"
-              prependIcon="mdi-github"
-            >
-              Github
-            </VBtn>
+              <Icon :icon="item?.icon" />
+              <span class="ml-1 text-sm uppercase">{{ item?.name }}</span>
+            </a>
           </div>
           <VCardItem>
             <!-- SECTION upgrade plan banner -->
@@ -192,17 +196,17 @@ function shortName(name: string, id: string) {
       </div>
     </div>
 
-    <VCard class="my-5">
-      <VCardItem class="pb-0">
-        <VCardTitle>Active Proposals</VCardTitle>
-      </VCardItem>
-      <VCardItem>
+    <div class="bg-base-100 rounded mt-4 shadow">
+      <div class="px-4 pt-4 pb-2 text-lg font-semibold text-secondary">
+        Active Proposals
+      </div>
+      <div class="px-4 pb-4">
         <ProposalListItem :proposals="store?.proposals" />
-      </VCardItem>
-      <VCardText v-if="store.proposals.length === 0"
-        >No active proposals</VCardText
-      >
-    </VCard>
+      </div>
+      <div class="pl-4 pb-8 py-4" v-if="store.proposals?.length === 0">
+        No active proposals
+      </div>
+    </div>
 
     <div
       class="btn btn-primary w-full mt-5 flex items-center bg-transparent text-primary hover:bg-gray-100 hover:bg-transparent"

From d196c35dc855aa37f26959aaaef803ce6151aac4 Mon Sep 17 00:00:00 2001
From: "Alisa | Side.one" <alisa@side.one>
Date: Mon, 8 May 2023 23:33:32 +0800
Subject: [PATCH 7/8] feat: contracts UI refactor

---
 .../[chain]/cosmwasm/[code_id]/contracts.vue  | 56 +++++++++++--------
 src/modules/[chain]/gov/[proposal_id].vue     |  2 +-
 2 files changed, 34 insertions(+), 24 deletions(-)

diff --git a/src/modules/[chain]/cosmwasm/[code_id]/contracts.vue b/src/modules/[chain]/cosmwasm/[code_id]/contracts.vue
index 05ece808..2785e1ad 100644
--- a/src/modules/[chain]/cosmwasm/[code_id]/contracts.vue
+++ b/src/modules/[chain]/cosmwasm/[code_id]/contracts.vue
@@ -93,29 +93,39 @@ const result = ref('');
 </script>
 <template>
   <div>
-    <VCard>
-      <VCardTitle>Contract List of Code: {{ props.code_id }}</VCardTitle>
-      <VTable>
-        <thead>
-          <tr>
-            <th>Contract List</th>
-            <th>Actions</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="v in response.contracts">
-            <td>{{ v }}</td>
-            <td>
-              <VBtn size="small" @click="showInfo(v)">contract</VBtn>
-              <VBtn size="small" @click="showState(v)" class="ml-2"
-                >States</VBtn
-              >
-              <VBtn size="small" @click="showQuery(v)" class="ml-2">Query</VBtn>
-            </td>
-          </tr>
-        </tbody>
-      </VTable>
-    </VCard>
+    <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  w-full mt-4">
+          <thead>
+            <tr>
+              <th style="position: relative;">Contract List</th>
+              <th>Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="v in response.contracts">
+              <td>{{ v }}</td>
+              <td>
+                <button
+                  class="btn btn-primary btn-sm text-xs mr-2"
+                  @click="showInfo(v)"
+                  >contract</button>
+                <button
+                  class="btn btn-primary btn-sm text-xs mr-2"
+                  @click="showState(v)"
+                >States</button>
+                <button
+                  class="btn btn-primary btn-sm text-xs"
+                  @click="showQuery(v)"
+                >Query</button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+   
     <v-dialog v-model="infoDialog" width="auto">
       <v-card>
         <VCardTitle>Contract Detail</VCardTitle>
diff --git a/src/modules/[chain]/gov/[proposal_id].vue b/src/modules/[chain]/gov/[proposal_id].vue
index e3df4e6b..6272ba65 100644
--- a/src/modules/[chain]/gov/[proposal_id].vue
+++ b/src/modules/[chain]/gov/[proposal_id].vue
@@ -291,7 +291,7 @@ const processList = computed(()=>{
     <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
         <h2 class="card-title">Votes</h2>
         <div class="overflow-x-auto">
-            <table class="table  w-full ">
+            <table class="table  w-full">
                 <tbody>
                     <tr v-for="(item,index) of votes" :key="index">
                         <td>{{ item.voter }}</td>

From 96501e15f95fd1af54b76dbb20ebefc3309caa27 Mon Sep 17 00:00:00 2001
From: "Alisa | Side.one" <alisa@side.one>
Date: Mon, 8 May 2023 23:50:20 +0800
Subject: [PATCH 8/8] feat: Dashboard Coin Info

---
 src/components/charts/PriceMarketChart.vue |  22 +--
 src/modules/[chain]/index.vue              | 165 ++++++++++-----------
 2 files changed, 92 insertions(+), 95 deletions(-)

diff --git a/src/components/charts/PriceMarketChart.vue b/src/components/charts/PriceMarketChart.vue
index 75953b1c..94a01ddc 100644
--- a/src/components/charts/PriceMarketChart.vue
+++ b/src/components/charts/PriceMarketChart.vue
@@ -27,27 +27,31 @@ const series = computed(() => {
   ];
 });
 
-function changeChart(type: string){
-  kind.value = type
+function changeChart(type: string) {
+  kind.value = type;
 }
 </script>
 
 <template>
   <div class="tabs tabs-boxed bg-transparent justify-end">
-    <a class="tab mr-2 text-gray-400 uppercase" 
-      :class="{'tab-active': kind ==='price' }"
-      @click="changeChart('price')">
+    <a
+      class="tab text-xs mr-2 text-gray-400 uppercase"
+      :class="{ 'tab-active': kind === 'price' }"
+      @click="changeChart('price')"
+    >
       Price
     </a>
-    <a class="tab text-gray-400 uppercase" 
-      :class="{'tab-active': kind ==='volume' }"
-      @click="changeChart('volume')">
+    <a
+      class="tab text-xs text-gray-400 uppercase"
+      :class="{ 'tab-active': kind === 'volume' }"
+      @click="changeChart('volume')"
+    >
       Volume
     </a>
   </div>
   <VueApexCharts
     type="area"
-    height="261"
+    height="230"
     :options="chartConfig"
     :series="series"
   />
diff --git a/src/modules/[chain]/index.vue b/src/modules/[chain]/index.vue
index 2dd7e779..a1d47a15 100644
--- a/src/modules/[chain]/index.vue
+++ b/src/modules/[chain]/index.vue
@@ -66,27 +66,28 @@ const comLinks = [
 
 <template>
   <div>
-    <VCard v-if="coinInfo && coinInfo.name" class="mb-5">
-      <VRow>
-        <VCol md="5">
-          <VCardItem>
-            <VCardTitle>
-              {{ coinInfo.name }} (<span class="uppercase">{{
-                coinInfo.symbol
-              }}</span
-              >)
-            </VCardTitle>
-            <VCardSubtitle>
-              Rank:
-              <div
-                class="badge text-xs badge-error bg-[#fcebea] dark:bg-[#41384d] text-red-400"
-              >
-                #{{ coinInfo.market_cap_rank }}
-              </div>
-            </VCardSubtitle>
-          </VCardItem>
-          <div class="h-[1px] w-full bg-gray-100 dark:bg-[#384059]"></div>
-          <div class="mt-4 pl-4 flex items-center">
+    <div
+      v-if="coinInfo && coinInfo.name"
+      class="bg-base-100 rounded shadow mb-4"
+    >
+      <div class="flex p-4">
+        <div class="flex-1 mr-10">
+          <div class="text-xl font-semibold text-main">
+            {{ coinInfo.name }} (<span class="uppercase">{{
+              coinInfo.symbol
+            }}</span
+            >)
+          </div>
+          <div class="text-xs mt-2">
+            Rank:
+            <div
+              class="badge text-xs badge-error bg-[#fcebea] dark:bg-[#41384d] text-red-400"
+            >
+              #{{ coinInfo.market_cap_rank }}
+            </div>
+          </div>
+
+          <div class="mt-4 flex items-center">
             <a
               v-for="(item, index) of comLinks"
               :key="index"
@@ -97,66 +98,65 @@ const comLinks = [
               <span class="ml-1 text-sm uppercase">{{ item?.name }}</span>
             </a>
           </div>
-          <VCardItem>
-            <!-- SECTION upgrade plan banner -->
-            <div
-              class="plan-upgrade-banner d-flex bg-light-secondary rounded align-center pa-3"
-            >
-              <h3 class="plan-details me-3" :class="store.priceColor">
-                {{ store.priceChange }}
-                <small>%</small>
-              </h3>
 
-              <VMenu open-on-hover>
-                <template #activator="{ props }">
-                  <div class="d-flex flex-column align-start" v-bind="props">
-                    <h3 class="text-base font-weight-semibold">
+          <div>
+            <div class="dropdown dropdown-hover w-full mt-[16px] md:mt-[32px]">
+              <label>
+                <div
+                  class="bg-gray-100 dark:bg-[#384059] flex items-center justify-between px-4 py-2 cursor-pointer rounded"
+                >
+                  <div>
+                    <div
+                      class="font-semibold text-xl text-[#666] dark:text-white"
+                    >
                       {{ ticker?.market?.name || '' }}
-                    </h3>
-                    <span class="text-primary text-xs">
+                    </div>
+                    <div class="text-info text-sm">
                       {{ shortName(ticker?.base, ticker.coin_id) }}/{{
                         shortName(ticker?.target, ticker.target_coin_id)
                       }}
-                    </span>
+                    </div>
                   </div>
-                </template>
-                <VList style="max-height: 300px">
-                  <VListItem
-                    v-for="(item, i) in store.coinInfo.tickers"
-                    :key="i"
-                    rounded
-                    @click="store.selectTicker(i)"
-                  >
-                    <template #prepend></template>
-                    <!-- eslint-disable-next-line vue/no-v-text-v-html-on-component -->
-                    <VListItemTitle v-text="item.market.name" />
-                    <VListItemSubtitle>
-                      {{ shortName(item?.base, item.coin_id) }}/{{
-                        shortName(item?.target, item.target_coin_id)
-                      }}
-                    </VListItemSubtitle>
-                    <template #append>
-                      <span
-                        class="ml-3"
-                        :class="`text-${store.tickerColor(item.trust_score)}`"
+
+                  <div class="text-right">
+                    <div
+                      class="text-xl font-semibold text-[#666] dark:text-white"
+                    >
+                      ${{ ticker.converted_last.usd }}
+                    </div>
+                    <div class="text-sm" :class="store.priceColor">
+                      {{ store.priceChange }}%
+                    </div>
+                  </div>
+                </div>
+              </label>
+              <div class="dropdown-content pt-1">
+                <div class="h-64 overflow-auto w-full shadow rounded">
+                  <ul class="menu w-full bg-gray-100 rounded dark:bg-[#384059]">
+                    <li
+                      v-for="(item, index) in store.coinInfo.tickers"
+                      :key="index"
+                      @click="store.selectTicker(index)"
+                    >
+                      <div
+                        class="flex items-center justify-between hover:bg-base-100"
                       >
-                        {{ item.converted_last.usd }}
-                      </span>
-                    </template>
-                  </VListItem>
-                </VList>
-              </VMenu>
+                        <div class="text-main text-sm">
+                          {{ shortName(item?.base, item.coin_id) }}/{{
+                            shortName(item?.target, item.target_coin_id)
+                          }}
+                        </div>
 
-              <VSpacer />
-
-              <div class="d-flex align-center">
-                <sub>
-                  <h6 class="text-xs font-weight-regular">$</h6>
-                </sub>
-                <span class="text-h5">{{ ticker.converted_last.usd }}</span>
+                        <div class="text-base text-main">
+                          ${{ item.converted_last.usd }}
+                        </div>
+                      </div>
+                    </li>
+                  </ul>
+                </div>
               </div>
             </div>
-            <VSpacer />
+
             <a
               :color="store.trustColor"
               class="mt-5 text-white btn btn-success w-full flex items-center"
@@ -165,14 +165,13 @@ const comLinks = [
             >
               Buy {{ coinInfo.symbol || '' }}
             </a>
-          </VCardItem>
-        </VCol>
-        <VCol md="7">
-          <VCardItem>
-            <PriceMarketChart />
-          </VCardItem>
-        </VCol>
-      </VRow>
+          </div>
+        </div>
+
+        <div class="flex-1 hidden md:block">
+          <PriceMarketChart />
+        </div>
+      </div>
       <div class="h-[1px] w-full bg-gray-100 dark:bg-[#384059]"></div>
       <div class="max-h-[250px] overflow-auto p-4 text-sm">
         <MdEditor
@@ -188,7 +187,7 @@ const comLinks = [
           {{ tag }}
         </div>
       </div>
-    </VCard>
+    </div>
 
     <div class="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-6">
       <div v-for="item in store.stats">
@@ -216,12 +215,6 @@ const comLinks = [
   </div>
 </template>
 
-<style lang="scss" scoped>
-.card-box {
-  border: 1px solid rgb(var(--v-theme-primary));
-}
-</style>
-
 <route>
   {
     meta: {