From df5e8afb14ca21e9e8a3e4a2d3203f8296a8ad51 Mon Sep 17 00:00:00 2001
From: alisa <alisa@side.one>
Date: Tue, 25 Apr 2023 13:01:04 +0800
Subject: [PATCH 01/11] fix: Governance Voting onmounted no data

---
 src/modules/[chain]/gov/index.vue |  5 +++--
 src/stores/useFormatter.ts        |  1 -
 src/stores/useGovStore.ts         | 24 ++++++++++++------------
 3 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/modules/[chain]/gov/index.vue b/src/modules/[chain]/gov/index.vue
index e2964319..0e3a9763 100644
--- a/src/modules/[chain]/gov/index.vue
+++ b/src/modules/[chain]/gov/index.vue
@@ -1,10 +1,11 @@
 <script lang="ts" setup>
 import { useGovStore } from '@/stores';
 import ProposalListItem from '@/components/ProposalListItem.vue';
-
+import { ref } from 'vue'
 const tab = ref("")
 const store = useGovStore()
-store.fetchProposals("2")
+store.fetchProposals('2')
+
 </script>
 <template>
     <div>
diff --git a/src/stores/useFormatter.ts b/src/stores/useFormatter.ts
index 3c9dc00f..07f8ea59 100644
--- a/src/stores/useFormatter.ts
+++ b/src/stores/useFormatter.ts
@@ -127,7 +127,6 @@ export const useFormatter = defineStore('formatter', {
         calculatePercent(input?: string|number, total?: string|number ) {
             if(!input || !total) return '0'
             const percent = Number(input)/Number(total)
-            console.log(input, total, percent);
             return numeral(percent>0.0001?percent: 0).format("0.[00]%")
         },
         formatDecimalToPercent(decimal: string) {
diff --git a/src/stores/useGovStore.ts b/src/stores/useGovStore.ts
index 3871febb..75b91a09 100644
--- a/src/stores/useGovStore.ts
+++ b/src/stores/useGovStore.ts
@@ -2,6 +2,7 @@ import { defineStore } from "pinia";
 import { useBlockchain } from "./useBlockchain";
 import type { PageRequest, PaginatedProposals } from "@/types";
 import { LoadingStatus } from "./useDashboard";
+import {reactive} from 'vue'
 
 export const useGovStore = defineStore('govStore', {
     state: () => {
@@ -27,18 +28,16 @@ export const useGovStore = defineStore('govStore', {
         async fetchProposals( status: string, pagination?: PageRequest ) {
             if(!this.loading[status]) {
                 this.loading[status] = LoadingStatus.Loading
-                const proposals = await this.blockchain.rpc.getGovProposals(status)
+                const proposals = reactive(await this.blockchain.rpc.getGovProposals(status))
+                if(status === '2') {
+                    proposals.proposals.forEach(async(x1) => {
+                        await this.fetchTally(x1.proposal_id).then(res => {
+                            x1.final_tally_result = res?.tally
+                       })
+                    })
+                }
                 this.loading[status] = LoadingStatus.Loaded
                 this.proposals[status] = proposals
-
-            if(status === '2') {
-                proposals.proposals.forEach(x1 => {
-                    this.fetchTally(x1.proposal_id).then(t => {
-                        x1.final_tally_result = t.tally
-                        this.proposals[status] = proposals 
-                    })
-                })
-            }
             }
             return this.proposals[status]
         },
@@ -48,7 +47,7 @@ export const useGovStore = defineStore('govStore', {
             // })
         },
         async fetchTally(proposalId: string) {
-            return this.blockchain.rpc.getGovProposalTally(proposalId)
+            return await this.blockchain.rpc.getGovProposalTally(proposalId)
         },
         async fetchProposal(proposalId: string) {
             return this.blockchain.rpc.getGovProposal(proposalId)
@@ -59,5 +58,6 @@ export const useGovStore = defineStore('govStore', {
         async fetchProposalVotes(proposalId: string, next_key?: string) {
             return this.blockchain.rpc.getGovProposalVotes(proposalId, next_key)
         }
-    }
+    },
+
 })

From 2ab68a62e3dc05a56136a3caf7c29c58fa5ac62d Mon Sep 17 00:00:00 2001
From: alisa <alisa@side.one>
Date: Tue, 25 Apr 2023 14:52:55 +0800
Subject: [PATCH 02/11] feat: Governance status  color

---
 src/components/ProposalListItem.vue | 8 ++++++--
 tailwind.config.js                  | 1 +
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/ProposalListItem.vue b/src/components/ProposalListItem.vue
index 149c3b55..f2ef0b3b 100644
--- a/src/components/ProposalListItem.vue
+++ b/src/components/ProposalListItem.vue
@@ -48,8 +48,12 @@ const statusMap: Record<string, string> = {
           </div>
         </div>
 
-        <div class="text-yes flex items-center mb-3">
-          <div class="w-1 h-1 bg-yes rounded-full mr-2"></div>
+        <div 
+          class=" flex items-center mb-3"
+          :class="statusMap?.[item?.status] === 'PASSED'?'text-yes':statusMap?.[item?.status] === 'REJECTED' ?'text-no':'text-inProgress'">
+          <div 
+            class="w-1 h-1 rounded-full mr-2"
+            :class="statusMap?.[item?.status] === 'PASSED'?'bg-yes':statusMap?.[item?.status] === 'REJECTED' ?'bg-no':'bg-inProgress'"></div>
           <div class="text-xs">{{ statusMap?.[item?.status] || item?.status }}</div>
         </div>
 
diff --git a/tailwind.config.js b/tailwind.config.js
index c90e4ea0..582bf65f 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -7,6 +7,7 @@ module.exports = {
       colors: {
         main: '#5973fe',
         yes: '#3fb68b',
+        inProgress: '#4472de',
         no: '#ff5353',
         info: '#00b2ff',
         textMain: '#333',

From aa7c910f4b384cd56c23cb94b7b72b05ae032021 Mon Sep 17 00:00:00 2001
From: alisa <alisa@side.one>
Date: Tue, 25 Apr 2023 15:25:02 +0800
Subject: [PATCH 03/11] fix: Governance Tally no data

---
 src/modules/[chain]/gov/[proposal_id].vue | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/modules/[chain]/gov/[proposal_id].vue b/src/modules/[chain]/gov/[proposal_id].vue
index b038114b..c82a0390 100644
--- a/src/modules/[chain]/gov/[proposal_id].vue
+++ b/src/modules/[chain]/gov/[proposal_id].vue
@@ -2,7 +2,7 @@
 import ObjectElement from '@/components/dynamic/ObjectElement.vue';
 import { useBaseStore, useFormatter, useGovStore, useStakingStore } from '@/stores';
 import type { GovProposal, GovVote, PaginabledAccounts, PaginatedProposalDeposit, PaginatedProposalVotes, Pagination } from '@/types';
-import { ref } from 'vue';
+import { ref , reactive} from 'vue';
 import Countdown from '@/components/Countdown.vue';
 import { computed } from '@vue/reactivity';
 
@@ -12,7 +12,16 @@ const props = defineProps(["proposal_id", "chain"]);
 const proposal = ref({} as GovProposal)
 const format = useFormatter()
 const store = useGovStore()
-store.fetchProposal(props.proposal_id).then((x) => proposal.value = x.proposal)
+store.fetchProposal(props.proposal_id).then((res) => {
+    const proposalDetail = reactive(res.proposal)
+    // when status under the voting, final_tally_result are no data, should request fetchTally
+    if (res.proposal?.status === 'PROPOSAL_STATUS_VOTING_PERIOD'){
+        store.fetchTally(props.proposal_id).then((tallRes)=>{
+            proposalDetail.final_tally_result = tallRes?.tally
+        })
+    }
+    proposal.value = proposalDetail
+})
 
 const color = computed(() => {
     if (proposal.value.status==='PROPOSAL_STATUS_PASSED') {
@@ -78,6 +87,7 @@ const upgradeCountdown = computed((): number => {
 })
 
 const total = computed(()=> {
+    console.log(proposal.value, 'proposal.value')
     const tally = proposal.value.final_tally_result
     let sum = 0
     if(tally) {

From b8eea61013a146c3a1fc4d42d6b94b3f48e179b1 Mon Sep 17 00:00:00 2001
From: alisa <alisa@side.one>
Date: Tue, 25 Apr 2023 15:30:16 +0800
Subject: [PATCH 04/11] fix: type declaration supplement

---
 src/modules/[chain]/gov/[proposal_id].vue | 1 -
 src/types/gov.ts                          | 4 ++++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/modules/[chain]/gov/[proposal_id].vue b/src/modules/[chain]/gov/[proposal_id].vue
index c82a0390..eba73be0 100644
--- a/src/modules/[chain]/gov/[proposal_id].vue
+++ b/src/modules/[chain]/gov/[proposal_id].vue
@@ -87,7 +87,6 @@ const upgradeCountdown = computed((): number => {
 })
 
 const total = computed(()=> {
-    console.log(proposal.value, 'proposal.value')
     const tally = proposal.value.final_tally_result
     let sum = 0
     if(tally) {
diff --git a/src/types/gov.ts b/src/types/gov.ts
index 1a53e62b..7f9b4d53 100644
--- a/src/types/gov.ts
+++ b/src/types/gov.ts
@@ -27,6 +27,10 @@ export interface GovProposal {
         "@type": string,
         "title": string,
         "description": string,
+        "plan"?: { 
+            'height'?: string | number,
+            'time'?: string | number,
+        }
     },
     "status": string,
     "final_tally_result": {

From a65754e5b82a62c9a83e52139d2948d74599f376 Mon Sep 17 00:00:00 2001
From: alisa <alisa@side.one>
Date: Tue, 25 Apr 2023 16:08:42 +0800
Subject: [PATCH 05/11] fix: add onMounted

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

diff --git a/src/modules/[chain]/gov/index.vue b/src/modules/[chain]/gov/index.vue
index 0e3a9763..1b43a07e 100644
--- a/src/modules/[chain]/gov/index.vue
+++ b/src/modules/[chain]/gov/index.vue
@@ -1,10 +1,13 @@
 <script lang="ts" setup>
 import { useGovStore } from '@/stores';
 import ProposalListItem from '@/components/ProposalListItem.vue';
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
 const tab = ref("")
 const store = useGovStore()
-store.fetchProposals('2')
+
+onMounted(()=>{
+    store.fetchProposals('2')
+})
 
 </script>
 <template>

From 6bbe2b2c61ae7b4a23ed6a939792417da7bc9203 Mon Sep 17 00:00:00 2001
From: alisa <alisa@side.one>
Date: Tue, 25 Apr 2023 18:27:46 +0800
Subject: [PATCH 06/11] feat: float alignment

---
 src/components/CardStatisticsVertical.vue | 8 +++-----
 src/modules/[chain]/index.vue             | 4 +---
 2 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/src/components/CardStatisticsVertical.vue b/src/components/CardStatisticsVertical.vue
index e9362935..796fa7a6 100644
--- a/src/components/CardStatisticsVertical.vue
+++ b/src/components/CardStatisticsVertical.vue
@@ -16,8 +16,8 @@ const isPositive = controlledComputed(() => props.change, () => Math.sign(props.
 </script>
 
 <template>
-  <VCard>
-    <VCardText class="d-flex align-center justify-center">
+  <VCard class="h-full flex-col content-between">
+    <VCardText class="d-flex align-center justify-between">
       <VAvatar
         v-if="props.icon"
         rounded
@@ -31,8 +31,6 @@ const isPositive = controlledComputed(() => props.change, () => Math.sign(props.
         />
       </VAvatar>
 
-      <VSpacer />
-
       <div
         v-if="props.change"
         :class="isPositive ? 'text-success' : 'text-error'"
@@ -44,7 +42,7 @@ const isPositive = controlledComputed(() => props.change, () => Math.sign(props.
       </div>
     </VCardText>
 
-    <VCardText>
+    <VCardText class="d-flex flex-col">
       <h6 class="text-h6 me-2 mt-2 mb-1">
         {{ props.stats }}
       </h6>
diff --git a/src/modules/[chain]/index.vue b/src/modules/[chain]/index.vue
index 4e5542a5..3282d129 100644
--- a/src/modules/[chain]/index.vue
+++ b/src/modules/[chain]/index.vue
@@ -132,9 +132,7 @@ function shortName(name: string, id: string) {
 
     <VRow>
       <VCol v-for="item in store.stats" cols="12" sm="6" md="2">
-        <VCard>
-          <CardStatisticsVertical v-bind="item" />
-        </VCard>
+        <CardStatisticsVertical v-bind="item" />
       </VCol>
     </VRow>
 

From 674810d51352ddf91d3b9a03b55722d1c389669f Mon Sep 17 00:00:00 2001
From: alisa <alisa@side.one>
Date: Tue, 25 Apr 2023 21:02:58 +0800
Subject: [PATCH 07/11] feat: dashboard Dashboard Community Pool Content
 exceeds

---
 .../src/components/ProposalProcess.vue        |   5 +-
 .../dashboard/src/modules/[chain]/index.vue   | 247 +++++++++++-------
 src/components/CardStatisticsVertical.vue     |  38 +--
 src/components/ProposalListItem.vue           |  31 ++-
 src/modules/[chain]/index.vue                 | 133 +++++-----
 tailwind.config.js                            |   1 -
 6 files changed, 263 insertions(+), 192 deletions(-)

diff --git a/packages/dashboard/src/components/ProposalProcess.vue b/packages/dashboard/src/components/ProposalProcess.vue
index 28d3e823..8fd5bec4 100644
--- a/packages/dashboard/src/components/ProposalProcess.vue
+++ b/packages/dashboard/src/components/ProposalProcess.vue
@@ -37,10 +37,7 @@ const veto = computed(() =>
   <div class="progress">
     <div class="progress-bar bg-success" :style="`width: ${yes}`"></div>
     <div class="progress-bar bg-error" :style="`width: ${no}`"></div>
-    <div
-      class="progress-bar"
-      :style="`width: ${veto}; background-color: #B71C1C;`"
-    ></div>
+    <div class="progress-bar bg-[#B71C1C]" :style="`width: ${veto};`"></div>
     <div class="progress-bar bg-secondary" :style="`width: ${abstain}`"></div>
   </div>
 </template>
diff --git a/packages/dashboard/src/modules/[chain]/index.vue b/packages/dashboard/src/modules/[chain]/index.vue
index 06b2437c..c32da653 100644
--- a/packages/dashboard/src/modules/[chain]/index.vue
+++ b/packages/dashboard/src/modules/[chain]/index.vue
@@ -1,40 +1,45 @@
 <script lang="ts" setup>
-import MdEditor from 'md-editor-v3';
-import PriceMarketChart from '@/components/charts/PriceMarketChart.vue'
+import MdEditor from "md-editor-v3";
+import PriceMarketChart from "@/components/charts/PriceMarketChart.vue";
 
-import { useBlockchain, useFormatter } from '@/stores';
-import { onMounted, ref } from 'vue';
-import { useIndexModule } from './indexStore';
-import { computed } from '@vue/reactivity';
+import { useBlockchain, useFormatter } from "@/stores";
+import { onMounted, ref } from "vue";
+import { useIndexModule } from "./indexStore";
+import { computed } from "@vue/reactivity";
 
-import CardStatisticsVertical from '@/components/CardStatisticsVertical.vue';
-import ProposalProcess from '@/components/ProposalProcess.vue';
+import CardStatisticsVertical from "@/components/CardStatisticsVertical.vue";
+import ProposalProcess from "@/components/ProposalProcess.vue";
 
-const blockchain = useBlockchain()
-const store = useIndexModule()
+const blockchain = useBlockchain();
+const store = useIndexModule();
 
 const coinInfo = computed(() => {
-  return store.coinInfo
-})
+  return store.coinInfo;
+});
 
 onMounted(() => {
-  store.loadDashboard()
-})
+  store.loadDashboard();
+});
 
-const format = useFormatter()
-const ticker = computed(() => store.coinInfo.tickers[store.tickerIndex])
+const format = useFormatter();
+const ticker = computed(() => store.coinInfo.tickers[store.tickerIndex]);
 
 blockchain.$subscribe((m, s) => {
-  console.log('index:', m)
-  if(!Array.isArray(m.events) && ['chainName', 'endpoint'].includes(m.events.key)) {
-    console.log(m.events.key)
-    store.loadDashboard()
+  console.log("index:", m);
+  if (
+    !Array.isArray(m.events) &&
+    ["chainName", "endpoint"].includes(m.events.key)
+  ) {
+    console.log(m.events.key);
+    store.loadDashboard();
   }
-})
+});
 function shortName(name: string, id: string) {
-  return name.toLowerCase().startsWith('ibc/') || name.toLowerCase().startsWith('0x') ? id: name
+  return name.toLowerCase().startsWith("ibc/") ||
+    name.toLowerCase().startsWith("0x")
+    ? id
+    : name;
 }
-
 </script>
 
 <template>
@@ -44,58 +49,97 @@ function shortName(name: string, id: string) {
         <VCol md="5">
           <VCardItem>
             <VCardTitle>
-              {{ coinInfo.name }} (<span class="text-uppercase">{{ coinInfo.symbol }}</span>)
+              {{ coinInfo.name }} (<span class="text-uppercase">{{
+                coinInfo.symbol
+              }}</span
+              >)
             </VCardTitle>
             <VCardSubtitle>
-              Rank:  <VChip color="error" size="x-small">#{{ coinInfo.market_cap_rank }}</VChip>
+              Rank:
+              <VChip color="error" size="x-small"
+                >#{{ coinInfo.market_cap_rank }}</VChip
+              >
             </VCardSubtitle>
           </VCardItem>
-          <VDivider/>
-          <VCardItem>              
-            <VBtn variant="text" size="small" :href="store.homepage" prependIcon="mdi-web">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>
+          <VDivider />
+          <VCardItem>
+            <VBtn
+              variant="text"
+              size="small"
+              :href="store.homepage"
+              prependIcon="mdi-web"
+              >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
+            >
           </VCardItem>
           <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"
-              >
+            <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">
-                      {{ ticker?.market?.name || ''}}
+                      {{ ticker?.market?.name || "" }}
                     </h3>
-                    <span class="text-primary text-xs">{{ shortName(ticker?.base, ticker.coin_id) }}/{{ shortName(ticker?.target, ticker.target_coin_id) }}</span>
+                    <span class="text-primary text-xs"
+                      >{{ shortName(ticker?.base, ticker.coin_id) }}/{{
+                        shortName(ticker?.target, ticker.target_coin_id)
+                      }}</span
+                    >
                   </div>
                 </template>
-                <VList style="max-height: 300px;">
+                <VList style="max-height: 300px">
                   <VListItem
                     v-for="(item, i) in store.coinInfo.tickers"
                     :key="i"
                     rounded
                     @click="store.selectTicker(i)"
                   >
-                    <template #prepend>
-                    </template>
+                    <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>
+                    <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)}`">{{ item.converted_last.usd }}</span>
+                      <span
+                        class="ml-3"
+                        :class="`text-${store.tickerColor(item.trust_score)}`"
+                        >{{ item.converted_last.usd }}</span
+                      >
                     </template>
                   </VListItem>
                 </VList>
               </VMenu>
 
-
               <VSpacer />
 
               <div class="d-flex align-center">
@@ -107,14 +151,14 @@ function shortName(name: string, id: string) {
             </div>
             <!-- !SECTION -->
             <VSpacer />
-          <VBtn
-            block
-            :color="store.trustColor"
-            class="mt-3"
-            :href="ticker.trade_url"
-          >
-            Buy {{ coinInfo.symbol || '' }}
-          </VBtn>
+            <VBtn
+              block
+              :color="store.trustColor"
+              class="mt-3"
+              :href="ticker.trade_url"
+            >
+              Buy {{ coinInfo.symbol || "" }}
+            </VBtn>
           </VCardItem>
         </VCol>
         <VCol md="7">
@@ -124,9 +168,16 @@ function shortName(name: string, id: string) {
         </VCol>
       </VRow>
       <VDivider />
-      <VCardText class="" style="max-height: 250px; overflow:auto;"><MdEditor :model-value="coinInfo.description?.en" previewOnly></MdEditor></VCardText>
+      <VCardText class="" style="max-height: 250px; overflow: auto"
+        ><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>
+        <VChip v-for="tag in coinInfo.categories" size="x-small" class="mr-2">{{
+          tag
+        }}</VChip>
       </VCardItem>
     </VCard>
 
@@ -139,46 +190,56 @@ function shortName(name: string, id: string) {
     </VRow>
 
     <VCard class="my-5">
-        <VCardItem class="pb-0">
-          <VCardTitle>Active Proposals</VCardTitle>
-        </VCardItem>
-        <VCardItem>
-          <VExpansionPanels variant="accordion">
-            <VExpansionPanel v-for="(x, i) in store.proposals">
-              <VExpansionPanelTitle disable-icon-rotate>
-                    <VChip label color="primary" class="mr-2">{{x.proposalId}}</VChip>
-                    <div class="w-100">{{ x.content?.title }}
-                      <div class="d-flex mt-1">
-                        <small class="text-secondary me-auto"> {{ format.toDay(x.votingEndTime, 'from') }}</small>      
-                        <ProposalProcess style="width:300px;" :pool="store.pool" :tally="store.tally[Number(x.proposalId)]"></ProposalProcess> 
-                        <span></span>
-                      </div>              
-                    </div>
-                <template #actions>    
-                  <VIcon
-                    icon="mdi-check"
-                    color="success"
-                    class="ml-2"
-                  />
-                </template>
-              </VExpansionPanelTitle>
-              <VExpansionPanelText>
-                <VCard class="card-box">         
-                  <VCardText>
-                    <MdEditor :model-value="x.content?.description" previewOnly></MdEditor> 
-                  </VCardText>
-                  <div class="text-center w-100 my-2">
-                    <VBtn color="primary" variant="flat">Vote</VBtn>
-                  </div>
-                </VCard>
-              </VExpansionPanelText>
-            </VExpansionPanel>
-          </VExpansionPanels>          
-        </VCardItem>   
-        <VCardText v-if="store.proposals.length === 0">No active proposals</VCardText>
+      <VCardItem class="pb-0">
+        <VCardTitle>Active Proposals</VCardTitle>
+      </VCardItem>
+      <VCardItem>
+        <VExpansionPanels variant="accordion">
+          <VExpansionPanel v-for="(x, i) in store.proposals">
+            <VExpansionPanelTitle disable-icon-rotate>
+              <VChip label color="primary" class="mr-2">{{
+                x.proposalId
+              }}</VChip>
+              <div class="w-100">
+                {{ x.content?.title }}
+                <div class="d-flex mt-1">
+                  <small class="text-secondary me-auto">
+                    {{ format.toDay(x.votingEndTime, "from") }}</small
+                  >
+                  <ProposalProcess
+                    style="width: 300px"
+                    :pool="store.pool"
+                    :tally="store.tally[Number(x.proposalId)]"
+                  ></ProposalProcess>
+                  <span></span>
+                </div>
+              </div>
+              <template #actions>
+                <VIcon icon="mdi-check" color="success" class="ml-2" />
+              </template>
+            </VExpansionPanelTitle>
+            <VExpansionPanelText>
+              <VCard class="card-box">
+                <VCardText>
+                  <MdEditor
+                    :model-value="x.content?.description"
+                    previewOnly
+                  ></MdEditor>
+                </VCardText>
+                <div class="text-center w-100 my-2">
+                  <VBtn color="primary" variant="flat">Vote</VBtn>
+                </div>
+              </VCard>
+            </VExpansionPanelText>
+          </VExpansionPanel>
+        </VExpansionPanels>
+      </VCardItem>
+      <VCardText v-if="store.proposals.length === 0"
+        >No active proposals</VCardText
+      >
     </VCard>
 
-    <VBtn block color='secondary' variant="outlined" class="mt-5">
+    <VBtn block color="secondary" variant="outlined" class="mt-5">
       Connect Wallet
     </VBtn>
   </div>
diff --git a/src/components/CardStatisticsVertical.vue b/src/components/CardStatisticsVertical.vue
index 796fa7a6..e1d874ef 100644
--- a/src/components/CardStatisticsVertical.vue
+++ b/src/components/CardStatisticsVertical.vue
@@ -1,34 +1,28 @@
 <script setup lang="ts">
 interface Props {
-  title: string
-  color?: string
-  icon: string
-  stats: string
-  change?: number
-  subtitle?: string
+  title: string;
+  color?: string;
+  icon: string;
+  stats: string;
+  change?: number;
+  subtitle?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
   color: 'primary',
-})
+});
 
-const isPositive = controlledComputed(() => props.change, () => Math.sign(props.change||0) === 1)
+const isPositive = controlledComputed(
+  () => props.change,
+  () => Math.sign(props.change || 0) === 1
+);
 </script>
 
 <template>
   <VCard class="h-full flex-col content-between">
     <VCardText class="d-flex align-center justify-between">
-      <VAvatar
-        v-if="props.icon"
-        rounded
-        size="38"
-        variant="tonal"
-        :color="props.color"
-      >
-        <VIcon
-          :icon="props.icon"
-          size="24"
-        />
+      <VAvatar v-if="props.icon" rounded size="38" variant="tonal" :color="props.color">
+        <VIcon :icon="props.icon" size="24" />
       </VAvatar>
 
       <div
@@ -50,11 +44,7 @@ const isPositive = controlledComputed(() => props.change, () => Math.sign(props.
         {{ props.title }}
       </p>
 
-      <VChip
-        v-if="props.subtitle"
-        size="x-small"
-        class="font-weight-medium"
-      >
+      <VChip v-if="props.subtitle" size="x-small" class="font-weight-medium">
         <span class="text-truncate">{{ props.subtitle }}</span>
       </VChip>
     </VCardText>
diff --git a/src/components/ProposalListItem.vue b/src/components/ProposalListItem.vue
index f2ef0b3b..ef002436 100644
--- a/src/components/ProposalListItem.vue
+++ b/src/components/ProposalListItem.vue
@@ -1,14 +1,13 @@
 <script lang="ts" setup>
-import MdEditor from 'md-editor-v3';
 import { useBlockchain, useFormatter, useStakingStore } from '@/stores';
-import type { GovProposal, PaginatedProposals } from '@/types';
+import type { PaginatedProposals } from '@/types';
 import ProposalProcess from './ProposalProcess.vue';
 import type { PropType } from 'vue';
 
-const props = defineProps({
+defineProps({
   proposals: { type: Object as PropType<PaginatedProposals> },
 });
-// const list = computed(()=> proposl)
+
 const format = useFormatter();
 const staking = useStakingStore();
 const chain = useBlockchain();
@@ -48,12 +47,26 @@ const statusMap: Record<string, string> = {
           </div>
         </div>
 
-        <div 
-          class=" flex items-center mb-3"
-          :class="statusMap?.[item?.status] === 'PASSED'?'text-yes':statusMap?.[item?.status] === 'REJECTED' ?'text-no':'text-inProgress'">
-          <div 
+        <div
+          class="flex items-center mb-3"
+          :class="
+            statusMap?.[item?.status] === 'PASSED'
+              ? 'text-yes'
+              : statusMap?.[item?.status] === 'REJECTED'
+              ? 'text-no'
+              : 'text-info'
+          "
+        >
+          <div
             class="w-1 h-1 rounded-full mr-2"
-            :class="statusMap?.[item?.status] === 'PASSED'?'bg-yes':statusMap?.[item?.status] === 'REJECTED' ?'bg-no':'bg-inProgress'"></div>
+            :class="
+              statusMap?.[item?.status] === 'PASSED'
+                ? 'bg-yes'
+                : statusMap?.[item?.status] === 'REJECTED'
+                ? 'bg-no'
+                : 'bg-info'
+            "
+          ></div>
           <div class="text-xs">{{ statusMap?.[item?.status] || item?.status }}</div>
         </div>
 
diff --git a/src/modules/[chain]/index.vue b/src/modules/[chain]/index.vue
index 3282d129..b75a32ec 100644
--- a/src/modules/[chain]/index.vue
+++ b/src/modules/[chain]/index.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import MdEditor from 'md-editor-v3';
-import PriceMarketChart from '@/components/charts/PriceMarketChart.vue'
+import PriceMarketChart from '@/components/charts/PriceMarketChart.vue';
 
 import { useBlockchain, useFormatter } from '@/stores';
 import { onMounted, ref } from 'vue';
@@ -10,31 +10,30 @@ import { computed } from '@vue/reactivity';
 import CardStatisticsVertical from '@/components/CardStatisticsVertical.vue';
 import ProposalListItem from '@/components/ProposalListItem.vue';
 
-const blockchain = useBlockchain()
-const store = useIndexModule()
+const blockchain = useBlockchain();
+const store = useIndexModule();
 
 const coinInfo = computed(() => {
-  return store.coinInfo
-})
+  return store.coinInfo;
+});
 
 onMounted(() => {
-  store.loadDashboard()
-})
+  store.loadDashboard();
+});
 
-const format = useFormatter()
-const ticker = computed(() => store.coinInfo.tickers[store.tickerIndex])
+const format = useFormatter();
+const ticker = computed(() => store.coinInfo.tickers[store.tickerIndex]);
 
 blockchain.$subscribe((m, s) => {
-  console.log('index:', m)
-  if(!Array.isArray(m.events) && ['chainName', 'endpoint'].includes(m.events.key)) {
-    console.log(m.events.key)
-    store.loadDashboard()
+  console.log('index:', m);
+  if (!Array.isArray(m.events) && ['chainName', 'endpoint'].includes(m.events.key)) {
+    console.log(m.events.key);
+    store.loadDashboard();
   }
-})
+});
 function shortName(name: string, id: string) {
-  return name.toLowerCase().startsWith('ibc/') || name.toLowerCase().startsWith('0x') ? id: name
+  return name.toLowerCase().startsWith('ibc/') || name.toLowerCase().startsWith('0x') ? id : name;
 }
-
 </script>
 
 <template>
@@ -44,58 +43,75 @@ function shortName(name: string, id: string) {
         <VCol md="5">
           <VCardItem>
             <VCardTitle>
-              {{ coinInfo.name }} (<span class="text-uppercase">{{ coinInfo.symbol }}</span>)
+              {{ coinInfo.name }} (
+              <span class="text-uppercase">{{ coinInfo.symbol }}</span>
+              )
             </VCardTitle>
             <VCardSubtitle>
-              Rank:  <VChip color="error" size="x-small">#{{ coinInfo.market_cap_rank }}</VChip>
+              Rank:
+              <VChip color="error" size="x-small">#{{ coinInfo.market_cap_rank }}</VChip>
             </VCardSubtitle>
           </VCardItem>
-          <VDivider/>
-          <VCardItem>              
-            <VBtn variant="text" size="small" :href="store.homepage" prependIcon="mdi-web">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>
+          <VDivider />
+          <VCardItem>
+            <VBtn variant="text" size="small" :href="store.homepage" prependIcon="mdi-web">
+              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>
           </VCardItem>
           <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 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">
-                      {{ ticker?.market?.name || ''}}
+                      {{ ticker?.market?.name || '' }}
                     </h3>
-                    <span class="text-primary text-xs">{{ shortName(ticker?.base, ticker.coin_id) }}/{{ shortName(ticker?.target, ticker.target_coin_id) }}</span>
+                    <span class="text-primary text-xs">
+                      {{ shortName(ticker?.base, ticker.coin_id) }}/{{
+                        shortName(ticker?.target, ticker.target_coin_id)
+                      }}
+                    </span>
                   </div>
                 </template>
-                <VList style="max-height: 300px;">
+                <VList style="max-height: 300px">
                   <VListItem
                     v-for="(item, i) in store.coinInfo.tickers"
                     :key="i"
                     rounded
                     @click="store.selectTicker(i)"
                   >
-                    <template #prepend>
-                    </template>
+                    <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>
+                    <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)}`">{{ item.converted_last.usd }}</span>
+                      <span class="ml-3" :class="`text-${store.tickerColor(item.trust_score)}`">
+                        {{ item.converted_last.usd }}
+                      </span>
                     </template>
                   </VListItem>
                 </VList>
               </VMenu>
 
-
               <VSpacer />
 
               <div class="d-flex align-center">
@@ -107,14 +123,9 @@ function shortName(name: string, id: string) {
             </div>
             <!-- !SECTION -->
             <VSpacer />
-          <VBtn
-            block
-            :color="store.trustColor"
-            class="mt-3"
-            :href="ticker.trade_url"
-          >
-            Buy {{ coinInfo.symbol || '' }}
-          </VBtn>
+            <VBtn block :color="store.trustColor" class="mt-3" :href="ticker.trade_url">
+              Buy {{ coinInfo.symbol || '' }}
+            </VBtn>
           </VCardItem>
         </VCol>
         <VCol md="7">
@@ -124,31 +135,31 @@ function shortName(name: string, id: string) {
         </VCol>
       </VRow>
       <VDivider />
-      <VCardText style="max-height: 250px; overflow:auto;"><MdEditor :model-value="coinInfo.description?.en" previewOnly></MdEditor></VCardText>
+      <VCardText style="max-height: 250px; overflow: auto">
+        <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>
     </VCard>
 
-    <VRow>
-      <VCol v-for="item in store.stats" cols="12" sm="6" md="2">
+    <div class="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-6">
+      <div v-for="item in store.stats">
         <CardStatisticsVertical v-bind="item" />
-      </VCol>
-    </VRow>
+      </div>
+    </div>
 
     <VCard class="my-5">
-        <VCardItem class="pb-0">
-          <VCardTitle>Active Proposals</VCardTitle>
-        </VCardItem>
-        <VCardItem>
-          <ProposalListItem :proposals="store.proposals"/>      
-        </VCardItem>   
-        <VCardText v-if="store.proposals.length === 0">No active proposals</VCardText>
+      <VCardItem class="pb-0">
+        <VCardTitle>Active Proposals</VCardTitle>
+      </VCardItem>
+      <VCardItem>
+        <ProposalListItem :proposals="store.proposals" />
+      </VCardItem>
+      <VCardText v-if="store.proposals.length === 0">No active proposals</VCardText>
     </VCard>
 
-    <VBtn block color='secondary' variant="outlined" class="mt-5">
-      Connect Wallet
-    </VBtn>
+    <VBtn block color="secondary" variant="outlined" class="mt-5">Connect Wallet</VBtn>
   </div>
 </template>
 
diff --git a/tailwind.config.js b/tailwind.config.js
index bda85761..e50eb1c7 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -7,7 +7,6 @@ module.exports = {
       colors: {
         main: '#5973fe',
         yes: '#3fb68b',
-        inProgress: '#4472de',
         no: '#ff5353',
         info: '#00b2ff',
         textMain: '#333',

From e88fff9e3df4c86574975f9f6ec0244b998c7c93 Mon Sep 17 00:00:00 2001
From: alisa <alisa@side.one>
Date: Tue, 25 Apr 2023 21:08:32 +0800
Subject: [PATCH 08/11] feat: code prettierrc

---
 .prettierrc.json | 9 +++++++++
 1 file changed, 9 insertions(+)
 create mode 100644 .prettierrc.json

diff --git a/.prettierrc.json b/.prettierrc.json
new file mode 100644
index 00000000..0ed67ee7
--- /dev/null
+++ b/.prettierrc.json
@@ -0,0 +1,9 @@
+{
+  "tabWidth": 2,
+  "singleQuote": true,
+  "semi": true,
+  "endOfLine": "auto",
+  "bracketSpacing": true,
+  "TrailingCooma": true,
+  "arrowParens": "always"
+}

From a3a869d9c19e57653eed65a24499a1c2ac2fa59f Mon Sep 17 00:00:00 2001
From: alisa <alisa@side.one>
Date: Tue, 25 Apr 2023 21:45:33 +0800
Subject: [PATCH 09/11] feat: tailwindcss dark mode color

---
 src/style.css      | 18 ++++++++++++++++++
 tailwind.config.js |  7 +++++--
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/style.css b/src/style.css
index b5c61c95..2c25f20c 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,3 +1,21 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer base {
+  :root {
+    --text-main: #333;
+    --text-secondary: #4b525d;
+    --bg-card: #fff;
+    --bg-active: #fbfbfc;
+    --bg-hover: #eee;
+  }
+
+  html.dark {
+    --text-main: #f7f7f7;
+    --text-secondary: #6f6e84;
+    --bg-card: #28334e;
+    --bg-active: #242b40;
+    --bg-hover: #303044;
+  }
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index e50eb1c7..bbade89b 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -5,12 +5,15 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        main: '#5973fe',
         yes: '#3fb68b',
         no: '#ff5353',
         info: '#00b2ff',
-        textMain: '#333',
         primary: '#666cff',
+        main: 'var(--text-main)',
+        secondary: 'var(--text-secondary)',
+        card: 'var(--bg-card)',
+        hover: 'var(--bg-hover)',
+        active: 'var(--bg-active)',
       },
     },
   },

From b8b56021948ec4b9e0d66c3e1da971010ba39ba2 Mon Sep 17 00:00:00 2001
From: alisa <alisa@side.one>
Date: Tue, 25 Apr 2023 21:45:44 +0800
Subject: [PATCH 10/11] feat: add Parameters Page

---
 packages/dashboard/src/pages/[...all].vue | 43 +++++++++++++++--------
 src/components/ProposalListItem.vue       | 15 +++++---
 src/modules/[chain]/Parameters.vue        | 12 +++++++
 3 files changed, 52 insertions(+), 18 deletions(-)
 create mode 100644 src/modules/[chain]/Parameters.vue

diff --git a/packages/dashboard/src/pages/[...all].vue b/packages/dashboard/src/pages/[...all].vue
index e5a39b58..0d6bd766 100644
--- a/packages/dashboard/src/pages/[...all].vue
+++ b/packages/dashboard/src/pages/[...all].vue
@@ -1,29 +1,44 @@
 <script setup lang="ts">
-import misc404 from '@images/pages/404.png'
+import misc404 from "@images/pages/404.png";
 
-import miscObj from '@images/pages/misc-404-object.png'
-import miscMaskDark from '@images/pages/misc-mask-dark.png'
-import miscMaskLight from '@images/pages/misc-mask-light.png'
+import miscObj from "@images/pages/misc-404-object.png";
+import miscMaskDark from "@images/pages/misc-mask-dark.png";
+import miscMaskLight from "@images/pages/misc-mask-light.png";
 
-import { useGenerateImageVariant } from '@/plugins/vuetify/@core/composable/useGenerateImageVariant'
+import { useGenerateImageVariant } from "@/plugins/vuetify/@core/composable/useGenerateImageVariant";
 
-const miscThemeMask = useGenerateImageVariant(miscMaskLight, miscMaskDark)
+const miscThemeMask = useGenerateImageVariant(miscMaskLight, miscMaskDark);
 </script>
 
 <template>
   <div class="misc-wrapper">
-    <ErrorHeader error-code="404" error-title="Page Not Found ⚠️"
-      error-description="We couldn't find the page you are looking for." />
+    <ErrorHeader
+      error-code="404"
+      error-title="Page Not Found ⚠️"
+      error-description="We couldn't find the page you are looking for."
+    />
 
     <!-- 👉 Image -->
     <div class="misc-avatar w-100 text-center">
-      <VImg :src="misc404" alt="Coming Soon" :height="$vuetify.display.xs ? 400 : 500" class="my-sm-4" />
-      <VBtn to="/" class="mt-10">
-        Back to Home
-      </VBtn>
-      <VImg :src="miscThemeMask" class="d-none d-md-block footer-coming-soon" cover />
+      <VImg
+        :src="misc404"
+        alt="Coming Soon"
+        :height="$vuetify.display.xs ? 400 : 500"
+        class="my-sm-4"
+      />
+      <VBtn to="/" class="mt-10"> Back to Home </VBtn>
+      <VImg
+        :src="miscThemeMask"
+        class="d-none d-md-block footer-coming-soon"
+        cover
+      />
 
-      <VImg :src="miscObj" class="d-none d-md-block footer-coming-soon-obj" :max-width="174" height="158" />
+      <VImg
+        :src="miscObj"
+        class="d-none d-md-block footer-coming-soon-obj"
+        :max-width="174"
+        height="158"
+      />
     </div>
   </div>
 </template>
diff --git a/src/components/ProposalListItem.vue b/src/components/ProposalListItem.vue
index ef002436..9681016d 100644
--- a/src/components/ProposalListItem.vue
+++ b/src/components/ProposalListItem.vue
@@ -33,9 +33,11 @@ const statusMap: Record<string, string> = {
       class="py-4 px-4 hover:bg-gray-100 dark:hover:bg-[#353f5a] block rounded cursor-pointer"
     >
       <div class="grid grid-cols-6 md:grid-cols-11 flex-1">
-        <div class="text-textMain dark:text-white mb-3">#{{ item?.proposal_id }}</div>
+        <div class="text-main dark:text-white mb-3">
+          #{{ item?.proposal_id }}
+        </div>
 
-        <div class="col-span-5 md:pr-10 text-textMain dark:text-white truncate">
+        <div class="col-span-5 md:pr-10 text-main dark:text-white truncate">
           {{ item?.content?.title }}
         </div>
 
@@ -67,7 +69,9 @@ const statusMap: Record<string, string> = {
                 : 'bg-info'
             "
           ></div>
-          <div class="text-xs">{{ statusMap?.[item?.status] || item?.status }}</div>
+          <div class="text-xs">
+            {{ statusMap?.[item?.status] || item?.status }}
+          </div>
         </div>
 
         <div
@@ -76,7 +80,10 @@ const statusMap: Record<string, string> = {
           {{ format.toDay(item.voting_end_time, 'from') }}
         </div>
       </div>
-      <ProposalProcess :pool="staking.pool" :tally="item.final_tally_result"></ProposalProcess>
+      <ProposalProcess
+        :pool="staking.pool"
+        :tally="item.final_tally_result"
+      ></ProposalProcess>
     </RouterLink>
   </div>
 </template>
diff --git a/src/modules/[chain]/Parameters.vue b/src/modules/[chain]/Parameters.vue
new file mode 100644
index 00000000..29ce3712
--- /dev/null
+++ b/src/modules/[chain]/Parameters.vue
@@ -0,0 +1,12 @@
+<template>
+  <div class="text-main text-h5 mb-4">Parameters</div>
+  <div class="bg-card px-4 pt-3 pb-4 rounded-sm">
+    <div class="text-base mb-3 text-main">Minting Parameters</div>
+    <div class="grid grid-cols-5 gap-4">
+      <div v-for="item in 10" :key="item" class="rounded-sm bg-active px-4 py-2">
+        <div class="text-xs mb-2 text-secondary">Blocks Per Year</div>
+        <div class="text-base text-main">4,360,000</div>
+      </div>
+    </div>
+  </div>
+</template>

From 9fa425df536e8c3b933a4d65a2bd1b845903eaba Mon Sep 17 00:00:00 2001
From: alisa <alisa@side.one>
Date: Tue, 25 Apr 2023 21:57:52 +0800
Subject: [PATCH 11/11] feat: format code

---
 .../src/modules/[chain]/block/index.vue       | 147 +++++++++--------
 .../src/plugins/i18n/locales/en.json          |   2 +-
 src/layouts/components/DefaultLayout.vue      |  17 +-
 src/layouts/components/NavSearchBar.vue       | 154 +++++++++++++-----
 src/layouts/default.vue                       |  14 +-
 src/modules/[chain]/block/index.vue           | 137 +++++++++-------
 src/plugins/i18n/locales/en.json              |   2 +-
 7 files changed, 286 insertions(+), 187 deletions(-)

diff --git a/packages/dashboard/src/modules/[chain]/block/index.vue b/packages/dashboard/src/modules/[chain]/block/index.vue
index b80e0e94..729d8dbf 100644
--- a/packages/dashboard/src/modules/[chain]/block/index.vue
+++ b/packages/dashboard/src/modules/[chain]/block/index.vue
@@ -1,74 +1,87 @@
 <script lang="ts" setup>
-import TxsElement from '@/components/dynamic/TxsElement.vue';
-import { useBlockModule } from './block'
-import DynamicComponent from '@/components/dynamic/DynamicComponent.vue';
-import { computed } from '@vue/reactivity';
-import { toBase64, toHex } from '@cosmjs/encoding';
-import { useFormatter } from '@/stores';
+import TxsElement from "@/components/dynamic/TxsElement.vue";
+import { useBlockModule } from "./block";
+import DynamicComponent from "@/components/dynamic/DynamicComponent.vue";
+import { computed } from "@vue/reactivity";
+import { toBase64, toHex } from "@cosmjs/encoding";
+import { useFormatter } from "@/stores";
 const props = defineProps(["height", "chain"]);
 
-const store = useBlockModule()
-store.fetchBlock(props.height)
-const tab = ref('blocks')
+const store = useBlockModule();
+store.fetchBlock(props.height);
+const tab = ref("blocks");
 
-const format = useFormatter()
+const format = useFormatter();
 </script>
 <template>
-    
-    <VCard>
-        <VCardTitle class="d-flex justify-space-between">
-            <VTabs v-model="tab">
-                <VTab value="blocks">Blocks</VTab>
-                <VTab value="transactions">Transactions</VTab>
-            </VTabs>
-        </VCardTitle>
-        <VWindow v-model="tab">
-            <VWindowItem value="blocks">
-                <VTable>
-                    <thead>
-                        <tr>
-                            <th>Height</th><th>Hash</th><th>Proposor</th><th>Txs</th><th>Time</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr v-for="item in store.recents">
-                            <td><RouterLink :to="`/${props.chain}/block/${item.block?.header?.height}`">{{ item.block?.header?.height }}</RouterLink></td>
-                            <td>{{ toBase64(item.blockId?.hash) }}</td>
-                            <td>{{ format.validator(item.block?.header?.proposerAddress) }}</td>
-                            <td>{{ item.block?.data?.txs.length }}</td>
-                            <td>{{ format.toDay(item.block?.header?.time, 'from') }}</td>
-                        </tr>
-                    </tbody>
-                </VTable>
-            </VWindowItem>
-            <VWindowItem value="transactions">
-                <VTable>
-                    <thead>
-                        <tr>
-                            <th>Hash</th><th>Messages</th><th>Fees</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr v-for="item in store.txsInRecents">
-                            <td><RouterLink :to="`/${props.chain}/tx/${item.hash}`">{{ item.hash }}</RouterLink></td>
-                            <td>{{ format.messages(item.tx.body.messages) }}</td>
-                            <td>{{ format.formatTokens(item.tx.authInfo.fee?.amount) }}</td>
-                        </tr>
-                    </tbody>
-                </VTable>
+  <VCard>
+    <VCardTitle class="d-flex justify-space-between">
+      <VTabs v-model="tab">
+        <VTab value="blocks">Blocks</VTab>
+        <VTab value="transactions">Transactions</VTab>
+      </VTabs>
+    </VCardTitle>
+    <VWindow v-model="tab">
+      <VWindowItem value="blocks">
+        <VTable>
+          <thead>
+            <tr>
+              <th>Height</th>
+              <th>Hash</th>
+              <th>Proposor</th>
+              <th>Txs</th>
+              <th>Time</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="item in store.recents">
+              <td>
+                <RouterLink
+                  :to="`/${props.chain}/block/${item.block?.header?.height}`"
+                  >{{ item.block?.header?.height }}</RouterLink
+                >
+              </td>
+              <td>{{ toBase64(item.blockId?.hash) }}</td>
+              <td>
+                {{ format.validator(item.block?.header?.proposerAddress) }}
+              </td>
+              <td>{{ item.block?.data?.txs.length }}</td>
+              <td>{{ format.toDay(item.block?.header?.time, "from") }}</td>
+            </tr>
+          </tbody>
+        </VTable>
+      </VWindowItem>
+      <VWindowItem value="transactions">
+        <VTable>
+          <thead>
+            <tr>
+              <th>Hash</th>
+              <th>Messages</th>
+              <th>Fees</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="item in store.txsInRecents">
+              <td>
+                <RouterLink :to="`/${props.chain}/tx/${item.hash}`">{{
+                  item.hash
+                }}</RouterLink>
+              </td>
+              <td>{{ format.messages(item.tx.body.messages) }}</td>
+              <td>{{ format.formatTokens(item.tx.authInfo.fee?.amount) }}</td>
+            </tr>
+          </tbody>
+        </VTable>
 
-                <VCardItem>
-                    <v-alert
-                        type="info"
-                        text="Only show txs in recent blocks"
-                        variant="tonal"
-                    ></v-alert>
-                </VCardItem>
-            </VWindowItem>
-        </VWindow>
-        <VCardActions>
-
-        </VCardActions>
-    </VCard>
- 
-</template>
\ No newline at end of file
+        <VCardItem>
+          <v-alert
+            type="info"
+            text="Only show txs in recent blocks"
+            variant="tonal"
+          ></v-alert>
+        </VCardItem>
+      </VWindowItem>
+    </VWindow>
+    <VCardActions> </VCardActions>
+  </VCard>
+</template>
diff --git a/packages/dashboard/src/plugins/i18n/locales/en.json b/packages/dashboard/src/plugins/i18n/locales/en.json
index e95911cb..eb0d8d98 100644
--- a/packages/dashboard/src/plugins/i18n/locales/en.json
+++ b/packages/dashboard/src/plugins/i18n/locales/en.json
@@ -9,7 +9,7 @@
     "add_to_favorite": "Add to favorite"
   },
   "Ecosystem": "Ecosystem",
-  "All Blockchains": "All Blockchain222",
+  "All Blockchains": "All Blockchain",
   "Favorite": "Favorite"
   
 }
diff --git a/src/layouts/components/DefaultLayout.vue b/src/layouts/components/DefaultLayout.vue
index 309525fc..077db9e7 100644
--- a/src/layouts/components/DefaultLayout.vue
+++ b/src/layouts/components/DefaultLayout.vue
@@ -17,15 +17,22 @@ import TheCustomizer from '@/plugins/vuetify/@core/components/TheCustomizer.vue'
 import Breadcrumbs from './Breadcrumbs.vue';
 import { useBlockchain } from '@/stores';
 
-const { appRouteTransition, isLessThanOverlayNavBreakpoint, isVerticalNavCollapsed } =
-  useThemeConfig();
+const {
+  appRouteTransition,
+  isLessThanOverlayNavBreakpoint,
+  isVerticalNavCollapsed,
+} = useThemeConfig();
 const { width: windowWidth } = useWindowSize();
 
 // ℹ️ Provide animation name for vertical nav collapse icon.
-const verticalNavHeaderActionAnimationName = ref<null | 'rotate-180' | 'rotate-back-180'>(null);
+const verticalNavHeaderActionAnimationName = ref<
+  null | 'rotate-180' | 'rotate-back-180'
+>(null);
 
-watch(isVerticalNavCollapsed, val => {
-  verticalNavHeaderActionAnimationName.value = val ? 'rotate-180' : 'rotate-back-180';
+watch(isVerticalNavCollapsed, (val) => {
+  verticalNavHeaderActionAnimationName.value = val
+    ? 'rotate-180'
+    : 'rotate-back-180';
 });
 
 const dashboard = useDashboard();
diff --git a/src/layouts/components/NavSearchBar.vue b/src/layouts/components/NavSearchBar.vue
index a9c29318..a7431d59 100644
--- a/src/layouts/components/NavSearchBar.vue
+++ b/src/layouts/components/NavSearchBar.vue
@@ -1,66 +1,126 @@
 <script setup lang="ts">
-import type { SearchHeader, SearchItem } from '@/@fake-db/types'
-import axios from 'axios'
-import { useThemeConfig } from '@core/composable/useThemeConfig'
+import type { SearchHeader, SearchItem } from '@/@fake-db/types';
+import axios from 'axios';
+import { useThemeConfig } from '@core/composable/useThemeConfig';
 
 interface Suggestion {
-  icon: string
-  title: string
-  url: object
+  icon: string;
+  title: string;
+  url: object;
 }
-const { appContentLayoutNav } = useThemeConfig()
+const { appContentLayoutNav } = useThemeConfig();
 
 interface SuggestionGroup {
-  title: string
-  content: Suggestion[]
+  title: string;
+  content: Suggestion[];
 }
 
 defineOptions({
   inheritAttrs: false,
-})
+});
 
 // 👉 Is App Search Bar Visible
-const isAppSearchBarVisible = ref(false)
+const isAppSearchBarVisible = ref(false);
 
 // 👉 Default suggestions
 const suggestionGroups: SuggestionGroup[] = [
   {
     title: 'Popular Searches',
     content: [
-      { icon: 'mdi-chart-donut', title: 'Analytics', url: { name: 'dashboards-analytics' } },
-      { icon: 'mdi-chart-bubble', title: 'CRM', url: { name: 'dashboards-crm' } },
-      { icon: 'mdi-file-outline', title: 'Invoice List', url: { name: 'apps-invoice-list' } },
-      { icon: 'mdi-account-group-outline', title: 'User List', url: { name: 'apps-user-list' } },
+      {
+        icon: 'mdi-chart-donut',
+        title: 'Analytics',
+        url: { name: 'dashboards-analytics' },
+      },
+      {
+        icon: 'mdi-chart-bubble',
+        title: 'CRM',
+        url: { name: 'dashboards-crm' },
+      },
+      {
+        icon: 'mdi-file-outline',
+        title: 'Invoice List',
+        url: { name: 'apps-invoice-list' },
+      },
+      {
+        icon: 'mdi-account-group-outline',
+        title: 'User List',
+        url: { name: 'apps-user-list' },
+      },
     ],
   },
   {
     title: 'Apps & Pages',
     content: [
-      { icon: 'mdi-calendar', title: 'Calendar', url: { name: 'apps-calendar' } },
-      { icon: 'mdi-file-plus-outline', title: 'Invoice Add', url: { name: 'apps-invoice-add' } },
-      { icon: 'mdi-currency-usd', title: 'Pricing', url: { name: 'pages-pricing' } },
-      { icon: 'mdi-account-cog-outline', title: 'Account Settings', url: { name: 'pages-account-settings-tab', params: { tab: 'account' } } },
+      {
+        icon: 'mdi-calendar',
+        title: 'Calendar',
+        url: { name: 'apps-calendar' },
+      },
+      {
+        icon: 'mdi-file-plus-outline',
+        title: 'Invoice Add',
+        url: { name: 'apps-invoice-add' },
+      },
+      {
+        icon: 'mdi-currency-usd',
+        title: 'Pricing',
+        url: { name: 'pages-pricing' },
+      },
+      {
+        icon: 'mdi-account-cog-outline',
+        title: 'Account Settings',
+        url: { name: 'pages-account-settings-tab', params: { tab: 'account' } },
+      },
     ],
   },
   {
     title: 'User Interface',
     content: [
-      { icon: 'mdi-alpha-a-box-outline', title: 'Typography', url: { name: 'pages-typography' } },
+      {
+        icon: 'mdi-alpha-a-box-outline',
+        title: 'Typography',
+        url: { name: 'pages-typography' },
+      },
       { icon: 'mdi-tab', title: 'Tabs', url: { name: 'components-tabs' } },
-      { icon: 'mdi-gesture-tap-button', title: 'Buttons', url: { name: 'components-button' } },
-      { icon: 'mdi-keyboard-settings-outline', title: 'Statistics', url: { name: 'pages-cards-card-statistics' } },
+      {
+        icon: 'mdi-gesture-tap-button',
+        title: 'Buttons',
+        url: { name: 'components-button' },
+      },
+      {
+        icon: 'mdi-keyboard-settings-outline',
+        title: 'Statistics',
+        url: { name: 'pages-cards-card-statistics' },
+      },
     ],
   },
   {
     title: 'Popular Searches',
     content: [
-      { icon: 'mdi-format-list-checkbox', title: 'Select', url: { name: 'forms-select' } },
-      { icon: 'mdi-lastpass', title: 'Combobox', url: { name: 'forms-combobox' } },
-      { icon: 'mdi-calendar-range-outline', title: 'Date & Time Picker', url: { name: 'forms-date-time-picker' } },
-      { icon: 'mdi-hexagram-outline', title: 'Rating', url: { name: 'forms-rating' } },
+      {
+        icon: 'mdi-format-list-checkbox',
+        title: 'Select',
+        url: { name: 'forms-select' },
+      },
+      {
+        icon: 'mdi-lastpass',
+        title: 'Combobox',
+        url: { name: 'forms-combobox' },
+      },
+      {
+        icon: 'mdi-calendar-range-outline',
+        title: 'Date & Time Picker',
+        url: { name: 'forms-date-time-picker' },
+      },
+      {
+        icon: 'mdi-hexagram-outline',
+        title: 'Rating',
+        url: { name: 'forms-rating' },
+      },
     ],
   },
-]
+];
 
 // 👉 No Data suggestion
 const noDataSuggestions: Suggestion[] = [
@@ -79,32 +139,36 @@ const noDataSuggestions: Suggestion[] = [
     icon: 'mdi-cash',
     url: { name: 'pages-pricing' },
   },
-]
+];
 
-const searchQuery = ref('')
-const searchResult = ref<(SearchItem | SearchHeader)[]>([])
-const router = useRouter()
+const searchQuery = ref('');
+const searchResult = ref<(SearchItem | SearchHeader)[]>([]);
+const router = useRouter();
 
 // 👉 fetch search result API
 watchEffect(() => {
-  axios.get('/app-bar/search', {
-    params: {
-      q: searchQuery.value,
-    },
-  }).then(response => {
-    searchResult.value = response.data
-  })
-})
+  axios
+    .get('/app-bar/search', {
+      params: {
+        q: searchQuery.value,
+      },
+    })
+    .then((response) => {
+      searchResult.value = response.data;
+    });
+});
 
 // 👉 redirect the selected page
 const redirectToSuggestedOrSearchedPage = (selected: Suggestion) => {
-  router.push(selected.url)
+  router.push(selected.url);
 
-  isAppSearchBarVisible.value = false
-  searchQuery.value = ''
-}
+  isAppSearchBarVisible.value = false;
+  searchQuery.value = '';
+};
 
-const LazyAppBarSearch = defineAsyncComponent(() => import('@core/components/AppBarSearch.vue'))
+const LazyAppBarSearch = defineAsyncComponent(
+  () => import('@core/components/AppBarSearch.vue')
+);
 </script>
 
 <template>
@@ -157,7 +221,7 @@ const LazyAppBarSearch = defineAsyncComponent(() => import('@core/components/App
 </template>
 
 <style lang="scss" scoped>
-@use "@styles/variables/_vuetify.scss";
+@use '@styles/variables/_vuetify.scss';
 
 .meta-key {
   border: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
diff --git a/src/layouts/default.vue b/src/layouts/default.vue
index 98d223d1..be184465 100644
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@@ -1,12 +1,14 @@
 <script lang="ts" setup>
-import { useSkins } from '@core/composable/useSkins'
-import { useThemeConfig } from '@core/composable/useThemeConfig'
+import { useSkins } from '@core/composable/useSkins';
+import { useThemeConfig } from '@core/composable/useThemeConfig';
 
-const DefaultLayout = defineAsyncComponent(() => import('./components/DefaultLayout.vue'))
+const DefaultLayout = defineAsyncComponent(
+  () => import('./components/DefaultLayout.vue')
+);
 
-const { layoutAttrs, injectSkinClasses } = useSkins()
+const { layoutAttrs, injectSkinClasses } = useSkins();
 
-injectSkinClasses()
+injectSkinClasses();
 </script>
 
 <template>
@@ -15,5 +17,5 @@ injectSkinClasses()
 
 <style lang="scss">
 // As we are using `layouts` plugin we need its styles to be imported
-@use "@layouts/styles/default-layout";
+@use '@layouts/styles/default-layout';
 </style>
diff --git a/src/modules/[chain]/block/index.vue b/src/modules/[chain]/block/index.vue
index 29a43005..7b2d9986 100644
--- a/src/modules/[chain]/block/index.vue
+++ b/src/modules/[chain]/block/index.vue
@@ -1,73 +1,86 @@
 <script lang="ts" setup>
-import { useBlockModule } from './block'
+import { useBlockModule } from './block';
 import { computed, ref } from '@vue/reactivity';
 import { useFormatter } from '@/stores';
-const props = defineProps(["height", "chain"]);
+const props = defineProps(['height', 'chain']);
 
-const store = useBlockModule()
+const store = useBlockModule();
 // store.fetchBlock(props.height)
-const tab = ref('blocks')
+const tab = ref('blocks');
 
-const format = useFormatter()
+const format = useFormatter();
 </script>
 <template>
-    
-    <VCard>
-        <VCardTitle class="d-flex justify-space-between">
-            <VTabs v-model="tab">
-                <VTab value="blocks">Blocks</VTab>
-                <VTab value="transactions">Transactions</VTab>
-            </VTabs>
-        </VCardTitle>
-        <VWindow v-model="tab">
-            <VWindowItem value="blocks">
-                <VTable>
-                    <thead>
-                        <tr>
-                            <th>Height</th><th>Hash</th><th>Proposer</th><th>Txs</th><th>Time</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr v-for="item in store.recents">
-                            <td class="text-sm text-primary"><RouterLink :to="`/${props.chain}/block/${item.block?.header?.height}`">{{ item.block?.header?.height }}</RouterLink></td>
-                            <td>{{ item.block_id?.hash }}</td>
-                            <td>{{ format.validator(item.block?.header?.proposer_address) }}</td>
-                            <td>{{ item.block?.data?.txs.length }}</td>
-                            <td>{{ format.toDay(item.block?.header?.time, 'from') }}</td>
-                        </tr>
-                    </tbody>
-                </VTable>
-            </VWindowItem>
-            <VWindowItem value="transactions">
-                <VTable>
-                    <thead>
-                        <tr>
-                            <th>Hash</th><th>Messages</th><th>Fees</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr v-for="item in store.txsInRecents">
-                            <td><RouterLink :to="`/${props.chain}/tx/${item.hash}`">{{ item.hash }}</RouterLink></td>
-                            <td>{{ format.messages(item.tx.body.messages) }}</td>
-                            <td>{{ format.formatTokens(item.tx.authInfo.fee?.amount) }}</td>
-                        </tr>
-                    </tbody>
-                </VTable>
+  <VCard>
+    <VCardTitle class="d-flex justify-space-between">
+      <VTabs v-model="tab">
+        <VTab value="blocks">Blocks</VTab>
+        <VTab value="transactions">Transactions</VTab>
+      </VTabs>
+    </VCardTitle>
+    <VWindow v-model="tab">
+      <VWindowItem value="blocks">
+        <VTable>
+          <thead>
+            <tr>
+              <th>Height</th>
+              <th>Hash</th>
+              <th>Proposer</th>
+              <th>Txs</th>
+              <th>Time</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="item in store.recents">
+              <td class="text-sm text-primary">
+                <RouterLink
+                  :to="`/${props.chain}/block/${item.block?.header?.height}`"
+                  >{{ item.block?.header?.height }}</RouterLink
+                >
+              </td>
+              <td>{{ item.block_id?.hash }}</td>
+              <td>
+                {{ format.validator(item.block?.header?.proposer_address) }}
+              </td>
+              <td>{{ item.block?.data?.txs.length }}</td>
+              <td>{{ format.toDay(item.block?.header?.time, 'from') }}</td>
+            </tr>
+          </tbody>
+        </VTable>
+      </VWindowItem>
+      <VWindowItem value="transactions">
+        <VTable>
+          <thead>
+            <tr>
+              <th>Hash</th>
+              <th>Messages</th>
+              <th>Fees</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="item in store.txsInRecents">
+              <td>
+                <RouterLink :to="`/${props.chain}/tx/${item.hash}`">{{
+                  item.hash
+                }}</RouterLink>
+              </td>
+              <td>{{ format.messages(item.tx.body.messages) }}</td>
+              <td>{{ format.formatTokens(item.tx.authInfo.fee?.amount) }}</td>
+            </tr>
+          </tbody>
+        </VTable>
 
-                <VCardItem>
-                    <v-alert
-                        type="info"
-                        text="Only show txs in recent blocks"
-                        variant="tonal"
-                    ></v-alert>
-                </VCardItem>
-            </VWindowItem>
-        </VWindow>
-        <VCardActions>
-
-        </VCardActions>
-    </VCard>
- 
+        <VCardItem>
+          <v-alert
+            type="info"
+            text="Only show txs in recent blocks"
+            variant="tonal"
+          ></v-alert>
+        </VCardItem>
+      </VWindowItem>
+    </VWindow>
+    <VCardActions> </VCardActions>
+  </VCard>
 </template>
 
 <route>
@@ -76,4 +89,4 @@ const format = useFormatter()
         i18n: 'blocks'
       }
     }
-  </route>
\ No newline at end of file
+  </route>
diff --git a/src/plugins/i18n/locales/en.json b/src/plugins/i18n/locales/en.json
index 0b33c531..953f4229 100644
--- a/src/plugins/i18n/locales/en.json
+++ b/src/plugins/i18n/locales/en.json
@@ -11,7 +11,7 @@
     "add_to_favorite": "Add to favorite"
   },
   "Ecosystem": "Ecosystem",
-  "All Blockchains": "All Blockchain222",
+  "All Blockchains": "All Blockchain",
   "Favorite": "Favorite"
   
 }