Merge pull request #372 from alisaweb3/v3-single

UI Refactor: language switch, theme toggle,governance,block,staking
2023-05-06 15:58:55 +08:00 · 2023-05-06 15:58:55 +08:00 · 8da4118f31
commit 8da4118f31
parent 7a5368cd69 95ff1caed1
16 changed files with 558 additions and 491 deletions
--- a/src/components/CardParameter.vue
+++ b/src/components/CardParameter.vue
@ -25,7 +25,7 @@ function calculateValue(value: any){
 </script>
 <template>
  <div
-    class="bg-card px-4 pt-3 pb-4 rounded mt-5"
+    class="bg-base-100 px-4 pt-3 pb-4 rounded mt-5"
    v-if="props.cardItem?.items && props.cardItem?.items?.length > 0"
  >
    <div class="text-base mb-3 text-main">{{ props.cardItem?.title }}</div>
--- a/src/components/ChainSummary.vue
+++ b/src/components/ChainSummary.vue
@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { getLogo, useDashboard, } from '@/stores/useDashboard';
+import { getLogo, useDashboard } from '@/stores/useDashboard';
 import { computed } from 'vue';
-import { Icon } from '@iconify/vue'
+import { Icon } from '@iconify/vue';

 const props = defineProps({
  name: {
@ -10,28 +10,41 @@ const props = defineProps({
  },
 });

-const dashboardStore = useDashboard()
-const conf = computed(() => dashboardStore.chains[props.name] || {})
+const dashboardStore = useDashboard();
+const conf = computed(() => dashboardStore.chains[props.name] || {});

 const addFavor = (e: Event) => {
  e.stopPropagation();
  e.preventDefault();
-  dashboardStore.favoriteMap[props.name] = !dashboardStore?.favoriteMap?.[props.name];
-  window.localStorage.setItem('favoriteMap', JSON.stringify(dashboardStore.favoriteMap))
-}
-
+  dashboardStore.favoriteMap[props.name] =
+    !dashboardStore?.favoriteMap?.[props.name];
+  window.localStorage.setItem(
+    'favoriteMap',
+    JSON.stringify(dashboardStore.favoriteMap)
+  );
+};
 </script>
 <template>
-  <RouterLink :to="`/${name}`" class="bg-base-100 rounded shadow flex items-center px-3 py-3 cursor-pointer">
+  <RouterLink
+    :to="`/${name}`"
+    class="bg-base-100 hover:bg-base-content rounded shadow flex items-center px-3 py-3 cursor-pointer"
+  >
    <div class="w-8 h-8 rounded-full overflow-hidden">
      <img :src="conf.logo" />
    </div>
    <div class="font-semibold ml-4 text-base flex-1">
      {{ conf?.prettyName || props.name }}
    </div>
-    <div @click="addFavor" class="pl-4 text-xl"
-      :class="{ 'text-warning': dashboardStore?.favoriteMap?.[props.name], 'text-gray-300 dark:text-gray-500': !dashboardStore?.favoriteMap?.[props.name] }">
+    <div
+      @click="addFavor"
+      class="pl-4 text-xl"
+      :class="{
+        'text-warning': dashboardStore?.favoriteMap?.[props.name],
+        'text-gray-300 dark:text-gray-500':
+          !dashboardStore?.favoriteMap?.[props.name],
+      }"
+    >
      <Icon icon="mdi-star" />
    </div>
  </RouterLink>
-</template>
+</template>
--- a/src/components/ThemeSwitcher.vue
+++ b/src/components/ThemeSwitcher.vue
@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useThemeConfig } from '@core/composable/useThemeConfig';
 import type { ThemeSwitcherTheme } from '@layouts/types';
+import { Icon } from '@iconify/vue';
 import { onMounted, watch } from 'vue';

 const props = defineProps<{
@ -50,10 +51,12 @@ onMounted(() => {
 </script>

 <template>
-  <IconBtn @click="changeTheme">
-    <VIcon :icon="props.themes[currentThemeIndex].icon" />
-    <VTooltip activator="parent" open-delay="1000">
-      <span class="text-capitalize">{{ currentThemeName }}</span>
-    </VTooltip>
-  </IconBtn>
+  <div class="tooltip tooltip-bottom delay-1000" :data-tip="currentThemeName">
+    <button
+      class="btn btn-ghost btn-circle btn-sm mx-1"
+      @click="changeTheme"
+    >
+      <Icon :icon="props.themes[currentThemeIndex].icon" class="text-2xl" />
+    </button>
+  </div>
 </template>
--- a/src/components/dynamic/ObjectElement.vue
+++ b/src/components/dynamic/ObjectElement.vue
@ -6,14 +6,18 @@ const props = defineProps(["value"]);

 </script>
 <template>
-    <VTable>
-        <tbody>
-            <tr v-for="(v, k) of value">
-                <td class="text-capitalize" style="max-width: 200px;">{{ k }}</td>
-                <td><div class="overflow-hidden w-auto" style="max-width: 1000px;">
-                    <Component v-if="v" :is="select(v, 'horizontal')" :value="v"></Component></div>
-                </td>
-            </tr>
-        </tbody>
-    </VTable>
+    <div class="overflow-x-auto">
+        <table class="table  w-full text-sm">
+            <tbody>
+                <tr v-for="(v, k) of value">
+                    <td class="text-capitalize" style="max-width: 200px;">{{ k }}</td>
+                    <td>
+                        <div class="overflow-hidden w-auto whitespace-normal" style="max-width: 1000px;">
+                            <Component v-if="v" :is="select(v, 'horizontal')" :value="v"></Component>
+                        </div>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
 </template>
--- a/src/layouts/components/Footer.vue
+++ b/src/layouts/components/Footer.vue
@ -1,33 +0,0 @@
-<template>
-  <div class="h-100 d-flex align-center justify-space-between">
-    <!-- 👉 Footer: left content -->
-    <span class="d-flex align-center">
-      &copy;
-      {{ new Date().getFullYear() }}
-      Made With
-      <VIcon
-        icon="mdi-heart-outline"
-        color="error"
-        size="1.25rem"
-        class="mx-1"
-      />
-      By <a
-        href="https://ping.pub"
-        target="_blank"
-        rel="noopener noreferrer"
-        class="text-primary ms-1"
-      >Ping.pub</a>
-    </span>
-    <!-- 👉 Footer: right content -->
-    <span class="d-md-flex gap-x-4 text-primary d-none">
-      <a
-        href="https://github.com/ping-pub/explorer/blob/master/LICENSE"
-        target="noopener noreferrer"
-      >License</a>
-      <a
-        href="https://github.com/ping-pub/explorer"
-        target="noopener noreferrer"
-      >Github</a>
-    </span>
-  </div>
-</template>
--- a/src/layouts/components/NavbarThemeSwitcher.vue
+++ b/src/layouts/components/NavbarThemeSwitcher.vue
@ -20,6 +20,5 @@ const themes: ThemeSwitcherTheme[] = [
 <template>
  <div>
    <NewThemeSwitcher :themes="themes"/>
-    <!-- <ThemeSwitcher :themes="themes" /> -->
  </div>
 </template>
--- a/src/modules/[chain]/block/[height].vue
+++ b/src/modules/[chain]/block/[height].vue
@ -1,58 +1,66 @@
 <script lang="ts" setup>
 import TxsElement from '@/components/dynamic/TxsElement.vue';
-import { useBlockModule } from './block'
+import { useBlockModule } from './block';
 import DynamicComponent from '@/components/dynamic/DynamicComponent.vue';
 import { computed } from '@vue/reactivity';
 import { onBeforeRouteUpdate } from 'vue-router';
-const props = defineProps(["height", "chain"]);
+const props = defineProps(['height', 'chain']);

-const store = useBlockModule()
-store.fetchBlock(props.height)
-const tab = ref('summary')
+const store = useBlockModule();
+store.fetchBlock(props.height);
+const tab = ref('summary');

 const height = computed(() => {
-    return Number(store.current.block?.header?.height || props.height || 0)
-})
+  return Number(store.current.block?.header?.height || props.height || 0);
+});

 onBeforeRouteUpdate(async (to, from, next) => {
-    if (from.path !== to.path) {
-      store.fetchBlock(String(to.params.height))
-      next()
-    }
-}) 
-
+  if (from.path !== to.path) {
+    store.fetchBlock(String(to.params.height));
+    next();
+  }
+});
 </script>
 <template>
-<div>
+  <div>
    <VCard>
-        <VCardTitle class="d-flex justify-space-between">
-            <span class="mt-2">#{{ store.current.block?.header?.height }}</span>
-            <span v-if="props.height" class="mt-2">
-                <VBtn size="32" :to="`/${store.blockchain.chainName}/block/${height - 1}`" class="mr-2"><VIcon icon="mdi-arrow-left"/></VBtn> 
-                <VBtn size="32" :to="`/${store.blockchain.chainName}/block/${height + 1}`"><VIcon icon="mdi-arrow-right"/></VBtn>
-            </span>
-        </VCardTitle>
-        <VCardItem class="pt-0">
-            <DynamicComponent :value="store.current.block_id"/>
-        </VCardItem>
+      <VCardTitle class="d-flex justify-space-between">
+        <span class="mt-2">#{{ store.current.block?.header?.height }}</span>
+        <span v-if="props.height" class="mt-2">
+          <VBtn
+            size="32"
+            :to="`/${store.blockchain.chainName}/block/${height - 1}`"
+            class="mr-2"
+            ><VIcon icon="mdi-arrow-left"
+          /></VBtn>
+          <VBtn
+            size="32"
+            :to="`/${store.blockchain.chainName}/block/${height + 1}`"
+            ><VIcon icon="mdi-arrow-right"
+          /></VBtn>
+        </span>
+      </VCardTitle>
+      <VCardItem class="pt-0">
+        <DynamicComponent :value="store.current.block_id" />
+      </VCardItem>
    </VCard>

    <VCard title="Block Header" class="my-5">
-        <VCardItem class="pt-0">
-            <DynamicComponent :value="store.current.block?.header"/>
-        </VCardItem>
+      <VCardItem class="pt-0">
+        <DynamicComponent :value="store.current.block?.header" />
+      </VCardItem>
    </VCard>

    <VCard title="Transactions">
-        <VCardItem class="pt-0">
-            <TxsElement :value="store.current.block?.data?.txs"/>
-        </VCardItem>
+      <VCardItem class="pt-0">
+        <TxsElement :value="store.current.block?.data?.txs" />
+      </VCardItem>
    </VCard>

    <VCard title="Last Commit" class="mt-5">
-        <VCardItem class="pt-0">
-            <DynamicComponent :value="store.current.block?.last_commit"/>
-        </VCardItem>
+      <VCardItem class="pt-0">
+        <DynamicComponent :value="store.current.block?.last_commit" />
+      </VCardItem>
    </VCard>
-</div>
-</template>
+  </div>
+</template>
--- a/src/modules/[chain]/block/index.vue
+++ b/src/modules/[chain]/block/index.vue
@ -11,76 +11,82 @@ const tab = ref('blocks');
 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>
+  <div>
+    <div class="tabs tabs-boxed bg-transparent mb-4">
+      <a
+        class="tab text-gray-400 uppercase"
+        :class="{ 'tab-active': tab === 'blocks' }"
+        @click="tab = 'blocks'"
+        >Blocks</a
+      >
+      <a
+        class="tab text-gray-400 uppercase"
+        :class="{ 'tab-active': tab === 'transactions' }"
+        @click="tab = 'transactions'"
+        >Transactions</a
+      >
+    </div>

-        <VCardItem>
-          <v-alert
-            type="info"
-            text="Only show txs in recent blocks"
-            variant="tonal"
-          ></v-alert>
-        </VCardItem>
-      </VWindowItem>
-    </VWindow>
-    <VCardActions> </VCardActions>
-  </VCard>
+    <div v-if="tab === 'blocks'" class="bg-base-100 rounded">
+      <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>
+    </div>
+
+    <div class="bg-base-100 rounded" v-if="tab === '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>
+      <div class="p-4">
+        <v-alert
+          type="info"
+          text="Only show txs in recent blocks"
+          variant="tonal"
+        ></v-alert>
+      </div>
+    </div>
+  </div>
 </template>

 <route>
--- a/src/modules/[chain]/gov/[proposal_id].vue
+++ b/src/modules/[chain]/gov/[proposal_id].vue
@ -100,8 +100,11 @@ const total = computed(()=> {
 })

 const turnout = computed(() => {
+    if (total.value > 0) {
    const bonded = useStakingStore().pool?.bonded_tokens || "1"
    return format.percent(total.value / Number(bonded))
+    }
+    return 0
 })

 const yes = computed(()=> {
@ -135,75 +138,58 @@ const abstain = computed(()=> {
    }
    return 0
 })
+const processList = computed(()=>{
+    return [
+        {name: 'Turnout', value : turnout.value, class: 'bg-info' },
+        {name: 'Yes', value : yes.value, class: 'bg-success' },
+        {name: 'No', value : no.value, class: 'bg-error' },
+        {name: 'No With Veto', value : veto.value, class: 'bg-primary' },
+        {name: 'Abstain', value : abstain.value, class: 'bg-warning' }
+    ]
+})

 </script>

 <template>
 <div>
-    <VCard>
-        <VCardItem>
-        <VCardTitle>
-            {{ proposal_id }}. {{ proposal.content?.title }} <VChip label :color="color" class="float-right">{{ status }}</VChip>
-        </VCardTitle>
+    <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
+        <h2 class="card-title flex flex-col md:justify-between md:flex-row">
+            <p class="truncate w-full">{{ proposal_id }}. {{ proposal.content?.title }} </p>
+            <div 
+                class="badge badge-ghost"
+                :class="
+                    color === 'success'
+                    ? 'text-yes'
+                    : color === 'error'
+                    ? 'text-no'
+                    : 'text-info'
+                "
+            >{{ status }}</div>
+        </h2>
+        <div class="">
            <ObjectElement :value="proposal.content"/>
-        </VCardItem>
-    </VCard>
-    
-    <VRow class="my-5">
-        <VCol cols=12 md="4">
-            <VCard class="h-100">
-                <VCardItem>
-                    <VCardTitle>Tally</VCardTitle>
-                    <label>Turnout</label>
-                    <v-progress-linear
-                        :model-value="turnout"
-                        height="25"
-                        color="info"
-                        >
-                        <strong>{{ turnout }}</strong>
-                    </v-progress-linear>
-                    <label>Yes</label>
-                    <v-progress-linear
-                        :model-value="yes"
-                        height="25"
-                        color="success"
-                        >
-                        <strong>{{ yes }}</strong>
-                    </v-progress-linear>
-                    <label>No</label>
-                    <v-progress-linear
-                        :model-value="no"
-                        height="25"
-                        color="error"
-                        >
-                        <strong>{{ no }}</strong>
-                    </v-progress-linear>
-                    <label>No With Veto</label>
-                    <v-progress-linear
-                        :model-value="veto"
-                        height="25"
-                        color="primary"
-                        >
-                        <strong>{{ veto }}</strong>
-                    </v-progress-linear>
-                    <label>Abstain</label>
-                    <v-progress-linear
-                        :model-value="abstain"
-                        height="25"
-                        color="dark"
-                        >
-                        <strong>{{ abstain }}</strong>
-                    </v-progress-linear>
-                </VCardItem>
-            </VCard>
-        </VCol>
-        <VCol cols=12 md="8">
-            <VCard>
-                <VCardItem>
-                    <VCardTitle>
-                        Timeline
-                    </VCardTitle>
-                    <VTimeline
+        </div>
+    </div>
+    <!-- grid lg:grid-cols-3 auto-rows-max-->
+    <!-- flex-col lg:flex-row flex -->
+    <div class="gap-4 mb-4 grid lg:grid-cols-3 auto-rows-max ">
+        <!-- flex-1 -->
+        <div class="bg-base-100 px-4 pt-3 pb-4 rounded shadow ">
+            <h2 class="card-title">Tally</h2>
+            <div v-for="(item,index) of processList" :key="index">
+                <label class="block">{{item.name }}</label>
+                <div class="h-6 w-full relative">
+                    <div class="absolute inset-x-0 inset-y-0 w-full opacity-10" :class="`${item.class}`"></div>
+                    <div class="absolute inset-x-0 inset-y-0" :class="`${item.class}`" :style="`width: ${item.value}`"></div>
+                    <strong class="absolute inset-x-0 inset-y-0 text-center">{{ item.value }}</strong>
+                </div>
+            </div>
+        </div>
+        <!-- lg:col-span-2 -->
+        <!-- lg:flex-[2_2_0%] -->
+        <div class="h-max bg-base-100 px-4 pt-3 pb-4 rounded shadow lg:col-span-2">
+            <h2 class="card-title">Timeline</h2>
+           <VTimeline
                        class="mt-2"
                        side="end"
                        align="start"
@ -301,12 +287,23 @@ const abstain = computed(()=> {
                            </p>
                        </VTimelineItem>
                    </VTimeline>
-                </VCardItem>
-            </VCard>
-        </VCol>
-    </VRow>
+           
+        </div>
+    </div>
    
-    <VCard>
+    <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
+        <h2 class="card-title">Votes</h2>
+        <table class="table  w-full ">
+            <tbody>
+                <tr v-for="(item,index) of votes" :key="index">
+                    <td>{{ item.voter }}</td>
+                    <td>{{ item.option }}</td>
+                </tr>
+            </tbody>
+        </table>
+        <VBtn v-if="votePage.next_key" block variant="outlined" @click="loadMore()" :disabled="loading">Load more</VBtn>
+    </div>
+    <!-- <VCard>
        <VCardItem>
            <VCardTitle>
                Votes
@ -321,6 +318,6 @@ const abstain = computed(()=> {
            </VTable>
            <VBtn v-if="votePage.next_key" block variant="outlined" @click="loadMore()" :disabled="loading">Load more</VBtn>
        </VCardItem>
-    </VCard>
+    </VCard> -->
 </div>
 </template>
--- a/src/modules/[chain]/gov/index.vue
+++ b/src/modules/[chain]/gov/index.vue
@ -2,7 +2,7 @@
 import { useGovStore } from '@/stores';
 import ProposalListItem from '@/components/ProposalListItem.vue';
 import { ref, onMounted } from 'vue';
-const tab = ref('');
+const tab = ref('2');
 const store = useGovStore();

 onMounted(() => {
@ -13,33 +13,41 @@ onMounted(() => {
    }
  });
 });
+
+const changeTab = (val: '2' | '3' | '4') => {
+  tab.value = val;
+  store.fetchProposals(val);
+};
 </script>
 <template>
  <div>
-    <VTabs v-model="tab" class="v-tabs-pill">
-      <VTab value="2">Voting</VTab>
-      <VTab value="3" @click="store.fetchProposals('3')">Passed</VTab>
-      <VTab value="4" @click="store.fetchProposals('4')">Rejected</VTab>
-    </VTabs>
-    <VWindow v-model="tab" class="mt-5">
-      <VWindowItem value="2">
-        <ProposalListItem :proposals="store?.proposals['2']" />
-      </VWindowItem>
-
-      <VWindowItem value="3">
-        <ProposalListItem :proposals="store?.proposals['3']" />
-      </VWindowItem>
-
-      <VWindowItem value="4">
-        <ProposalListItem :proposals="store?.proposals['4']" />
-      </VWindowItem>
-    </VWindow>
+    <div class="tabs tabs-boxed bg-transparent mb-4">
+      <a
+        class="tab text-gray-400 uppercase"
+        :class="{ 'tab-active': tab === '2' }"
+        @click="changeTab('2')"
+        >Voting</a
+      >
+      <a
+        class="tab text-gray-400 uppercase"
+        :class="{ 'tab-active': tab === '3' }"
+        @click="changeTab('3')"
+        >Passed</a
+      >
+      <a
+        class="tab text-gray-400 uppercase"
+        :class="{ 'tab-active': tab === '4' }"
+        @click="changeTab('4')"
+        >Rejected</a
+      >
+    </div>
+    <ProposalListItem :proposals="store?.proposals[tab]" />
  </div>
 </template>
 <route>
-    {
-      meta: {
-        i18n: 'governance'
-      }
+  {
+    meta: {
+      i18n: 'governance'
    }
-  </route>
+  }
+</route>
--- a/src/modules/[chain]/params/index.vue
+++ b/src/modules/[chain]/params/index.vue
@ -14,7 +14,7 @@ onMounted(() => {
 <template>
  <div class="overflow-hidden">
    <!-- Chain ID -->
-    <div class="bg-card px-4 pt-3 pb-4 rounded">
+    <div class="bg-base-100 px-4 pt-3 pb-4 rounded">
      <div class="text-base mb-3 text-main">{{ chain.title }}</div>
      <div
        class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 2xl:grid-cols-6 gap-4"
@ -40,13 +40,13 @@ onMounted(() => {
        <!-- Slashing Parameters -->
        <CardParameter :cardItem="store.slashing"/>
        <!-- Application Version -->
-        <div class="bg-card px-4 pt-3 pb-4 rounded-sm mt-6">
+        <div class="bg-base-100 px-4 pt-3 pb-4 rounded-sm mt-6">
            <div class="text-base mb-3 text-main">{{ store.appVersion?.title }}</div>
            <ArrayObjectElement :value="store.appVersion?.items" :thead="false"/>
        </div>
        
        <!-- Node Information -->
-        <div class="bg-card px-4 pt-3 pb-4ß rounded-sm mt-6">
+        <div class="bg-base-100 px-4 pt-3 pb-4ß rounded-sm mt-6">
            <div class="text-base mb-3 text-main">{{ store.nodeVersion?.title }}</div>
            <ArrayObjectElement :value="store.nodeVersion?.items" :thead="false"/>
        </div>
--- a/src/modules/[chain]/staking/index.vue
+++ b/src/modules/[chain]/staking/index.vue
@ -1,36 +1,36 @@
-<script lang=ts setup>
+<script lang="ts" setup>
 import { useBaseStore, useFormatter, useStakingStore } from '@/stores';
 import { toBase64, toHex } from '@cosmjs/encoding';
 import { computed } from '@vue/reactivity';
 import { onMounted, ref, type DebuggerEvent } from 'vue';
-import { consensusPubkeyToHexAddress } from '@/libs'
+import { consensusPubkeyToHexAddress } from '@/libs';
 import type { Key, Validator } from '@/types';
-const staking = useStakingStore()
-const format = useFormatter()
+const staking = useStakingStore();
+const format = useFormatter();

-const cache = JSON.parse(localStorage.getItem('avatars')||'{}')
-const avatars = ref( cache || {} )
-const latest = ref({} as Record<string, number>)
-const yesterday = ref({} as Record<string, number>)
-const tab = ref('active')
-const unbondList = ref([] as Validator[])
-const base = useBaseStore()
-onMounted(()=> {
-  fetchChange(0)
-  staking.fetchInacitveValdiators().then(x => {
-    unbondList.value = x 
-  })
-})
+const cache = JSON.parse(localStorage.getItem('avatars') || '{}');
+const avatars = ref(cache || {});
+const latest = ref({} as Record<string, number>);
+const yesterday = ref({} as Record<string, number>);
+const tab = ref('active');
+const unbondList = ref([] as Validator[]);
+const base = useBaseStore();
+onMounted(() => {
+  fetchChange(0);
+  staking.fetchInacitveValdiators().then((x) => {
+    unbondList.value = x;
+  });
+});

 function fetchChange(offset: number) {
-  const base = useBaseStore()
-  const diff = 86400000 / base.blocktime
+  const base = useBaseStore();
+  const diff = 86400000 / base.blocktime;
  // base.fetchAbciInfo().then(h => {
  //   // console.log('block:', h)
  //   base.fetchValidatorByHeight(h.lastBlockHeight, offset).then(x => {
  //     x.validators.forEach(v => {
  //       if(v.pubkey) latest.value[pubkeyToAddress(v.pubkey.algorithm, v.pubkey.data)] = Number(v.votingPower)
-  //     })         
+  //     })
  //   })
  //   const height = Number(h.lastBlockHeight) - diff
  //   base.fetchValidatorByHeight(height > 0 ? height : 1, offset).then(old => {
@ -44,190 +44,233 @@ function fetchChange(offset: number) {

 const change24 = (key: Key) => {
  // console.log('hex key:', consensusPubkeyToHexAddress(key))
-  const txt = key.key
-  const n : number = latest.value[txt];
-  const o : number = yesterday.value[txt]
+  const txt = key.key;
+  const n: number = latest.value[txt];
+  const o: number = yesterday.value[txt];
  // console.log( txt, n, o)
-  return n >0 && o > 0 ? n - o : 0
-}
+  return n > 0 && o > 0 ? n - o : 0;
+};

 const change24Text = (key?: Key) => {
-  if(!key) return ''
-  const v = change24(key)
-  return v!==0 ? format.numberAndSign(v) : ''
-}
+  if (!key) return '';
+  const v = change24(key);
+  return v !== 0 ? format.numberAndSign(v) : '';
+};

 const change24Color = (key?: Key) => {
-  if(!key) return ''
-  const v = change24(key)
-  if(v > 0) return 'text-success'
-  if(v < 0) return 'text-error'
-}
+  if (!key) return '';
+  const v = change24(key);
+  if (v > 0) return 'text-success';
+  if (v < 0) return 'text-error';
+};

 const update = (m: DebuggerEvent) => {
-    if(m.key === 'validators') {
-        loadAvatars()
-    }
-}
+  if (m.key === 'validators') {
+    loadAvatars();
+  }
+};

 const list = computed(() => {
-  return tab.value === 'active' ? staking.validators: unbondList.value
+  return tab.value === 'active' ? staking.validators : unbondList.value;
  // return staking.validators
-})
+});

 const loadAvatars = () => {
-    // fetch avatar from keybase
-    let promise = Promise.resolve()
-    staking.validators.forEach(item => {
-        promise = promise.then(() => new Promise(resolve => {
-        const identity = item.description?.identity
-        if(identity && !avatars.value[identity]){
-            staking.keybase(identity).then(d => {
-                if (Array.isArray(d.them) && d.them.length > 0) {
-                    const uri = String(d.them[0]?.pictures?.primary?.url).replace("https://s3.amazonaws.com/keybase_processed_uploads/", "")
-                    if(uri) {
-                      avatars.value[identity] = uri
-                      localStorage.setItem('avatars', JSON.stringify(avatars.value))
-                    }
+  // fetch avatar from keybase
+  let promise = Promise.resolve();
+  staking.validators.forEach((item) => {
+    promise = promise.then(
+      () =>
+        new Promise((resolve) => {
+          const identity = item.description?.identity;
+          if (identity && !avatars.value[identity]) {
+            staking.keybase(identity).then((d) => {
+              if (Array.isArray(d.them) && d.them.length > 0) {
+                const uri = String(d.them[0]?.pictures?.primary?.url).replace(
+                  'https://s3.amazonaws.com/keybase_processed_uploads/',
+                  ''
+                );
+                if (uri) {
+                  avatars.value[identity] = uri;
+                  localStorage.setItem(
+                    'avatars',
+                    JSON.stringify(avatars.value)
+                  );
                }
-                resolve()
-            })
-        }else{
-            resolve()
-        }
-        }))
-    })
-}
-
-staking.$subscribe((m, s)=> {
-    if (Array.isArray(m.events)) {
-        m.events.forEach(x => {
-            update(x)
+              }
+              resolve();
+            });
+          } else {
+            resolve();
+          }
        })
-    } else {
-        update(m.events)
-    }
-})
-const logo = (identity?: string) => {
-    if(!identity) return ''
-    const url = avatars.value[identity] || ''
-    return url.startsWith('http')? url: `https://s3.amazonaws.com/keybase_processed_uploads/${url}`
-}
-const rank = function(position: number) {
-    let sum = 0
-    for(let i = 0;i < position; i++) {
-      sum += Number(staking.validators[i]?.delegator_shares)
-    }
-    const percent = (sum / staking.totalPower)
+    );
+  });
+};

-    switch (true) {
-        case tab.value ==='active' && percent < 0.33: return 'error'
-        case tab.value ==='active' && percent < 0.67: return 'warning'
-        default: return 'primary'
-    }    
-}
+staking.$subscribe((m, s) => {
+  if (Array.isArray(m.events)) {
+    m.events.forEach((x) => {
+      update(x);
+    });
+  } else {
+    update(m.events);
+  }
+});
+const logo = (identity?: string) => {
+  if (!identity) return '';
+  const url = avatars.value[identity] || '';
+  return url.startsWith('http')
+    ? url
+    : `https://s3.amazonaws.com/keybase_processed_uploads/${url}`;
+};
+const rank = function (position: number) {
+  let sum = 0;
+  for (let i = 0; i < position; i++) {
+    sum += Number(staking.validators[i]?.delegator_shares);
+  }
+  const percent = sum / staking.totalPower;
+
+  switch (true) {
+    case tab.value === 'active' && percent < 0.33:
+      return 'error';
+    case tab.value === 'active' && percent < 0.67:
+      return 'warning';
+    default:
+      return 'primary';
+  }
+};
 </script>
 <template>
+  <div>
+    <div class="flex items-center justify-between">
+      <div class="tabs tabs-boxed bg-transparent mb-4">
+        <a
+          class="tab text-gray-400"
+          :class="{ 'tab-active': tab === 'active' }"
+          @click="tab = 'active'"
+          >Active</a
+        >
+        <a
+          class="tab text-gray-400"
+          :class="{ 'tab-active': tab === 'inactive' }"
+          @click="tab = 'inactive'"
+          >Inactive</a
+        >
+      </div>
+
+      <div class="text-lg font-semibold">
+        {{ list.length }}/{{ staking.params.max_validators }}
+      </div>
+    </div>
    <div>
-        <VCard>
-            <VCardTitle class="d-flex justify-space-between">
-                <VBtnToggle v-model="tab" size="small" color="primary">
-                    <VBtn value="active" variant="outlined" >Active</VBtn>
-                    <VBtn value="inactive" variant="outlined">Inactive</VBtn>
-                </VBtnToggle>
-                <span class="mt-2">{{ list.length }}/{{ staking.params.max_validators }}</span>
-            </VCardTitle>
+      <VCard>
        <VTable class="text-no-wrap table-header-bg rounded-0">
-            <thead>
-          <tr>
-            <th
-              scope="col"
-              style="width: 3rem;"
-            >#</th>
-            <th scope="col">
-              VALIDATOR
-            </th>
-            <th scope="col" class="text-right">
-              VOTING POWER
-            </th>
-            <th scope="col" class="text-right">
-              24h CHANGES
-            </th>
-            <th scope="col" class="text-right">
-              COMMISSION
-            </th>
-            <th scope="col">
-              ACTIONS
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-            <tr
-            v-for="(v, i) in list"
-            :key="v.operator_address"
-          >
-            <!-- 👉 rank -->
-            <td>
-              <VChip label :color="rank(i)">
-                {{ i + 1 }}
-              </VChip>
-            </td>
+          <thead>
+            <tr>
+              <th scope="col" style="width: 3rem">#</th>
+              <th scope="col">VALIDATOR</th>
+              <th scope="col" class="text-right">VOTING POWER</th>
+              <th scope="col" class="text-right">24h CHANGES</th>
+              <th scope="col" class="text-right">COMMISSION</th>
+              <th scope="col">ACTIONS</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(v, i) in list" :key="v.operator_address">
+              <!-- 👉 rank -->
+              <td>
+                <VChip label :color="rank(i)">
+                  {{ i + 1 }}
+                </VChip>
+              </td>

-            <!-- 👉 Validator -->
-            <td>
-              <div class="d-flex align-center overflow-hidden" style="max-width: 400px;">
-                <VAvatar
-                  variant="tonal"
-                  class="me-3"
-                  size="34"
-                  icon="mdi-help-circle-outline"
-                  :image="logo(v.description?.identity)"
-                />
-                <div class="d-flex flex-column">
-                  <h6 class="text-sm text-primary">
-                    <RouterLink
-                      :to="{name: 'chain-staking-validator', params: {validator: v.operator_address}}"
-                      class="font-weight-medium user-list-name"
-                    >
-                      {{ v.description?.moniker }}
-                    </RouterLink>
-
-                  </h6>
-                  <span class="text-xs">{{ v.description?.website || v.description?.identity || '-' }}</span>
+              <!-- 👉 Validator -->
+              <td>
+                <div
+                  class="d-flex align-center overflow-hidden"
+                  style="max-width: 400px"
+                >
+                  <VAvatar
+                    variant="tonal"
+                    class="me-3"
+                    size="34"
+                    icon="mdi-help-circle-outline"
+                    :image="logo(v.description?.identity)"
+                  />
+                  <div class="d-flex flex-column">
+                    <h6 class="text-sm text-primary">
+                      <RouterLink
+                        :to="{
+                          name: 'chain-staking-validator',
+                          params: { validator: v.operator_address },
+                        }"
+                        class="font-weight-medium user-list-name"
+                      >
+                        {{ v.description?.moniker }}
+                      </RouterLink>
+                    </h6>
+                    <span class="text-xs">{{
+                      v.description?.website || v.description?.identity || '-'
+                    }}</span>
+                  </div>
                </div>
-              </div>
-            </td>
+              </td>

-            <!-- 👉 Voting Power -->
-            <td class="text-right">
+              <!-- 👉 Voting Power -->
+              <td class="text-right">
                <div class="d-flex flex-column">
                  <h6 class="text-sm font-weight-medium">
-                    {{ format.formatToken( {amount: parseInt(v.tokens).toString(), denom: staking.params.bond_denom }, true, "0,0") }}
+                    {{
+                      format.formatToken(
+                        {
+                          amount: parseInt(v.tokens).toString(),
+                          denom: staking.params.bond_denom,
+                        },
+                        true,
+                        '0,0'
+                      )
+                    }}
                  </h6>
-                  <span class="text-xs">{{ format.calculatePercent(v.delegator_shares, staking.totalPower) }}</span>
+                  <span class="text-xs">{{
+                    format.calculatePercent(
+                      v.delegator_shares,
+                      staking.totalPower
+                    )
+                  }}</span>
                </div>
-            </td>
-            <!-- 👉 24h Changes -->
-            <td class="text-right text-xs" :class="change24Color(v.consensus_pubkey)">
-              {{ change24Text(v.consensus_pubkey) }} <VChip label v-if="v.jailed" color="error">Jailed</VChip>
-            </td>
-            <!-- 👉 commission -->
-            <td  class="text-right">
-              {{ format.formatCommissionRate(v.commission?.commission_rates?.rate) }}
-            </td>
-            <!-- 👉 Action -->
-            <td>
-              {{ 2 }}
-            </td>
+              </td>
+              <!-- 👉 24h Changes -->
+              <td
+                class="text-right text-xs"
+                :class="change24Color(v.consensus_pubkey)"
+              >
+                {{ change24Text(v.consensus_pubkey) }}
+                <VChip label v-if="v.jailed" color="error">Jailed</VChip>
+              </td>
+              <!-- 👉 commission -->
+              <td class="text-right">
+                {{
+                  format.formatCommissionRate(
+                    v.commission?.commission_rates?.rate
+                  )
+                }}
+              </td>
+              <!-- 👉 Action -->
+              <td>
+                {{ 2 }}
+              </td>
            </tr>
-        </tbody>
+          </tbody>
        </VTable>
-        <VDivider/>
+        <VDivider />
        <VCardActions class="py-2">
-            <VChip label color="error">Top 33%</VChip> <VChip label color="warning" class="mx-2">Top 67%</VChip>
+          <VChip label color="error">Top 33%</VChip>
+          <VChip label color="warning" class="mx-2">Top 67%</VChip>
        </VCardActions>
-        </VCard>
+      </VCard>
    </div>
+  </div>
 </template>

 <route>
@ -236,4 +279,4 @@ const rank = function(position: number) {
      i18n: 'staking'
    }
  }
-</route>
+</route>
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@ -1,24 +1,29 @@
 <script lang="ts" setup>
-import { useDashboard, LoadingStatus, type ChainConfig } from '@/stores/useDashboard';
+import {
+  useDashboard,
+  LoadingStatus,
+  type ChainConfig,
+} from '@/stores/useDashboard';
 import ChainSummary from '@/components/ChainSummary.vue';
 import { computed, ref } from 'vue';
 import { useBlockchain } from '@/stores';

-const dashboard = useDashboard()
+const dashboard = useDashboard();

 dashboard.$subscribe((mutation, state) => {
-  localStorage.setItem('favorite', JSON.stringify(state.favorite))
-})
-const keywords = ref('')
+  localStorage.setItem('favorite', JSON.stringify(state.favorite));
+});
+const keywords = ref('');
 const chains = computed(() => {
  if (keywords.value) {
-    return Object.values(dashboard.chains).filter((x: ChainConfig) => x.chainName.indexOf(keywords.value) > -1)
+    return Object.values(dashboard.chains).filter(
+      (x: ChainConfig) => x.chainName.indexOf(keywords.value) > -1
+    );
  } else {
-    return Object.values(dashboard.chains)
+    return Object.values(dashboard.chains);
  }
-})
-const chain = useBlockchain()
-
+});
+const chain = useBlockchain();
 </script>
 <template>
  <div class="">
@ -29,29 +34,43 @@ const chain = useBlockchain()
      <h1 class="text-primary text-3xl md:text-6xl font-bold mr-2">
        Ping dashboard
      </h1>
-      <div class="badge badge-info badge-outline mt-1 text-sm md:mt-8">Beta</div>
+      <div class="badge badge-info badge-outline mt-1 text-sm md:mt-8">
+        Beta
+      </div>
    </div>
    <div class="text-center text-base">
      <p class="mb-1">
        {{ $t('index.slogan') }}
      </p>
-      <h2 class="mb-6">
-        Cosmos Ecosystem Blockchains 🚀
-      </h2>
+      <h2 class="mb-6">Cosmos Ecosystem Blockchains 🚀</h2>
+    </div>
+    <div
+      v-if="dashboard.status !== LoadingStatus.Loaded"
+      class="flex justify-center"
+    >
+      <progress class="progress progress-info w-80 h-1"></progress>
    </div>
-    <div v-if="dashboard.status !== LoadingStatus.Loaded" class="flex justify-center"><progress
-        class="progress progress-info w-80 h-1"></progress></div>

-    <VTextField v-model="keywords" variant="underlined" :placeholder="$t('index.search_placeholder')"
-      style="max-width: 300px;" app>
+    <VTextField
+      v-model="keywords"
+      variant="underlined"
+      :placeholder="$t('index.search_placeholder')"
+      style="max-width: 300px"
+      app
+    >
      <template #append-inner>
        {{ chains.length }}/{{ dashboard.length }}
      </template>
    </VTextField>

-    <div class="grid grid-cols-2 gap-4 mt-6 md:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-5">
-      <ChainSummary v-for="(chain, index) in chains" :key="index" :name="chain.chainName" />
+    <div
+      class="grid grid-cols-2 gap-4 mt-6 md:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-5"
+    >
+      <ChainSummary
+        v-for="(chain, index) in chains"
+        :key="index"
+        :name="chain.chainName"
+      />
    </div>
-
  </div>
 </template>
--- a/src/plugins/vuetify/@core/components/I18n.vue
+++ b/src/plugins/vuetify/@core/components/I18n.vue
@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue';
+import { defineEmits, ref, watch } from 'vue'
 import type { Anchor } from 'vuetify/lib/components';
 import type { I18nLanguage } from '@layouts/types';

@ -7,7 +8,7 @@ const props = withDefaults(defineProps<Props>(), {
  location: 'bottom end',
 });

-defineEmits<{
+const emit = defineEmits<{
  (e: 'change', id: string): void;
 }>();

@ -16,30 +17,37 @@ interface Props {
  location?: Anchor;
 }

-const { locale } = useI18n({ useScope: 'global' });
-
-watch(locale, (val) => {
+let locale = ref(useI18n({ useScope: 'global' }).locale)
+watch(locale, (val: string) => {
  document.documentElement.setAttribute('lang', val as string);
 });

-const currentLang = ref([localStorage.getItem('lang') || 'en']);
+let currentLang = ref(localStorage.getItem('lang') || 'en');
+
+function changeLang(lang: string){
+  locale.value = lang
+  currentLang.value = lang
+  emit('change', lang)
+}
 </script>

 <template>
-  <div class="dropdown dropdown-end">
+  <div 
+    class="dropdown"
+    :class="currentLang === 'ar'?'dropdown-right': 'dropdown-bottom dropdown-end'"
+   >
    <label tabindex="0" class="btn btn-ghost btn-circle btn-sm mx-1">
-      <Icon icon="mdi-translate" style="font-size: 24px" />
+      <Icon icon="mdi-translate" class="text-2xl" />
    </label>
    <ul
      tabindex="0"
-      class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52"
+      class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-40"
    >
      <li v-for="lang in props.languages" :key="lang.i18nLang">
        <a
-          @click="
-            locale = lang.i18nLang;
-            $emit('change', lang.i18nLang);
-          "
+          class="hover:bg-base-content"
+          :class="{ 'text-primary': currentLang === lang.i18nLang }"
+          @click="changeLang(lang.i18nLang)"
          >{{ lang.label }}</a
        >
      </li>
--- a/src/style.css
+++ b/src/style.css
@ -6,16 +6,12 @@
  :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;
  }
 }
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -11,34 +11,30 @@ module.exports = {
        primary: '#666cff',
        main: 'var(--text-main)',
        secondary: 'var(--text-secondary)',
-        card: 'var(--bg-card)',
-        hover: 'var(--bg-hover)',
        active: 'var(--bg-active)',
      },
    },
  },
-  plugins: [
-    require("daisyui")
-  ],
+  plugins: [require('daisyui')],
  daisyui: {
    themes: [
-      {
-        myTheme: {
-          info: "#666CFF",
-        }
-      },
      {
        light: {
-          ...require("daisyui/src/colors/themes")["[data-theme=light]"],
-          info: "#666CFF",
-        }
+          ...require('daisyui/src/colors/themes')['[data-theme=light]'],
+          primary: '#666cff',
+          info: '#666CFF',
+          'base-content': '#e9eaeb'
+        },
      },
      {
        dark: {
-          ...require("daisyui/src/colors/themes")["[data-theme=dark]"],
-          info: "#666CFF",
-        }
+          ...require('daisyui/src/colors/themes')['[data-theme=dark]'],
+          primary: '#666cff',
+          info: '#666CFF',
+          'base-100': '#2a334c',
+          'base-content': '#373f57'
+        },
      },
    ],
-  }
+  },
 };