From a2b4cf5c59a1430a3e6e5e17142abef8949980eb Mon Sep 17 00:00:00 2001
From: Pham Tu <tubackkhoa@gmail.com>
Date: Wed, 17 Jan 2024 18:29:46 +0700
Subject: [PATCH] fix proto

---
 src/components/CardParameter.vue              |  14 +-
 src/components/dynamic/DynamicComponent.vue   |   2 +-
 src/libs/utils.ts                             |  40 +-
 src/modules/[chain]/block/index.vue           |   7 +-
 .../ibc/connection/[connection_id].vue        |  12 +-
 src/modules/[chain]/staking/index.vue         | 806 ++++++++++--------
 src/stores/useFormatter.ts                    |   4 +-
 7 files changed, 488 insertions(+), 397 deletions(-)

diff --git a/src/components/CardParameter.vue b/src/components/CardParameter.vue
index b8635c76..2e4312ef 100644
--- a/src/components/CardParameter.vue
+++ b/src/components/CardParameter.vue
@@ -10,17 +10,17 @@ const props = defineProps({
 });
 
 const formatter = useFormatter();
-function calculateValue(value: any, item: any) {
+function calculateValue(value: any) {
+  if (!value) return;
   if (value instanceof Uint8Array) return fromAscii(value);
   if (Array.isArray(value)) {
     return (value[0] && value[0].amount) || '-';
   }
 
-  if (typeof value === 'object' && 'seconds' in value) {
-    return value.seconds.toString() + ' seconds';
-  }
-
-  if (String(value).search(/^\d+s$/g) > -1) {
+  if (
+    (typeof value === 'object' && 'seconds' in value) ||
+    String(value).search(/^\d+s$/g) > -1
+  ) {
     return formatSeconds(value);
   }
   const newValue = Number(value);
@@ -57,7 +57,7 @@ function formatTitle(v: string) {
           {{ formatTitle(item?.subtitle) }}
         </div>
         <div class="text-base text-main">
-          {{ calculateValue(item?.value, item) }}
+          {{ calculateValue(item?.value) }}
         </div>
       </div>
     </div>
diff --git a/src/components/dynamic/DynamicComponent.vue b/src/components/dynamic/DynamicComponent.vue
index 60a9875b..a25fa392 100644
--- a/src/components/dynamic/DynamicComponent.vue
+++ b/src/components/dynamic/DynamicComponent.vue
@@ -2,7 +2,7 @@
 import { select, decodeProto } from './index';
 
 const props = defineProps(['value', 'direct']);
-if (props.value.typeUrl) {
+if (props.value?.typeUrl) {
   props.value.value = decodeProto(props.value);
 }
 </script>
diff --git a/src/libs/utils.ts b/src/libs/utils.ts
index d7548afa..7463b768 100644
--- a/src/libs/utils.ts
+++ b/src/libs/utils.ts
@@ -1,3 +1,5 @@
+import type { Timestamp } from 'cosmjs-types/google/protobuf/timestamp';
+
 export function getLocalObject(name: string) {
   const text = localStorage.getItem(name);
   if (text) {
@@ -67,10 +69,11 @@ export function formatTokenAmount(
   tokenDenom = 'uatom',
   format = true
 ) {
-  const denom = typeof tokenDenom === 'string'
-    ? tokenDenom
-    // @ts-ignore
-    : tokenDenom?.denom_trace?.base_denom;
+  const denom =
+    typeof tokenDenom === 'string'
+      ? tokenDenom
+      : // @ts-ignore
+        tokenDenom?.denom_trace?.base_denom;
   let amount = 0;
   const asset = assets.find((a: any) => a.base === denom);
   let exp = asset
@@ -120,24 +123,25 @@ export function isHexAddress(v: any) {
 }
 
 export function isBech32Address(v?: string) {
-  if(!v) return ""
-  const pattern = /^[a-z\d]+1[a-z\d]{38}$/g
-  return String(v).search(pattern) > -1
+  if (!v) return '';
+  const pattern = /^[a-z\d]+1[a-z\d]{38}$/g;
+  return String(v).search(pattern) > -1;
 }
 
-export function formatSeconds(value?: string) {
-  if(!value) return ''
-  const duration = Number(value.replace(/s/, ''))
-  if(duration > 24*60*60) {
-    return `${(duration / ( 24 * 60 * 60)).toFixed()} days`
+export function formatSeconds(value?: string | Timestamp) {
+  if (!value) return '';
+  const seconds = typeof value === 'string' ? value : value.seconds.toString();
+  const duration = Number(seconds.replace(/s/, ''));
+  if (duration > 24 * 60 * 60) {
+    return `${(duration / (24 * 60 * 60)).toFixed()} days`;
   }
-  if(duration > 60*60) {
-    return `${(duration / (60 * 60)).toFixed()} hours`
-  }    
-  if(duration > 60) {
-    return `${duration / 60} mins`
+  if (duration > 60 * 60) {
+    return `${(duration / (60 * 60)).toFixed()} hours`;
   }
-  return value
+  if (duration > 60) {
+    return `${duration / 60} mins`;
+  }
+  return seconds;
 }
 
 export function hexToRgb(hex: string) {
diff --git a/src/modules/[chain]/block/index.vue b/src/modules/[chain]/block/index.vue
index f55f67fd..3b66ae7a 100644
--- a/src/modules/[chain]/block/index.vue
+++ b/src/modules/[chain]/block/index.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { computed, ref } from '@vue/reactivity';
 import { useBaseStore, useFormatter } from '@/stores';
-import { fromAscii } from '@cosmjs/encoding';
+import { fromAscii, toBase64 } from '@cosmjs/encoding';
 const props = defineProps(['chain']);
 
 const tab = ref('blocks');
@@ -64,7 +64,10 @@ const list = computed(() => {
         <div class="flex justify-between tooltip" data-tip="Block Proposor">
           <div class="mt-2 hidden text-sm sm:!block truncate">
             <span>{{
-              format.validator(fromAscii(item.block?.header?.proposerAddress))
+              format.validator(
+                item.block?.header?.proposerAddress &&
+                  toBase64(item.block?.header?.proposerAddress)
+              )
             }}</span>
           </div>
           <span class="text-right mt-1 whitespace-nowrap">
diff --git a/src/modules/[chain]/ibc/connection/[connection_id].vue b/src/modules/[chain]/ibc/connection/[connection_id].vue
index 1e85ff33..9c6593a6 100644
--- a/src/modules/[chain]/ibc/connection/[connection_id].vue
+++ b/src/modules/[chain]/ibc/connection/[connection_id].vue
@@ -210,25 +210,19 @@ function color(v: string) {
             <tr>
               <td class="w-52">{{ $t('ibc.trusting_period') }}:</td>
               <td>
-                {{
-                  formatSeconds(clientState?.trustingPeriod.seconds.toString())
-                }}
+                {{ formatSeconds(clientState?.trustingPeriod) }}
               </td>
             </tr>
             <tr>
               <td class="w-52">{{ $t('ibc.unbonding_period') }}:</td>
               <td>
-                {{
-                  formatSeconds(clientState?.unbondingPeriod.seconds.toString())
-                }}
+                {{ formatSeconds(clientState?.unbondingPeriod) }}
               </td>
             </tr>
             <tr>
               <td class="w-52">{{ $t('ibc.max_clock_drift') }}:</td>
               <td>
-                {{
-                  formatSeconds(clientState?.maxClockDrift.seconds.toString())
-                }}
+                {{ formatSeconds(clientState?.maxClockDrift) }}
               </td>
             </tr>
             <tr>
diff --git a/src/modules/[chain]/staking/index.vue b/src/modules/[chain]/staking/index.vue
index e93aa69d..ff988ba3 100644
--- a/src/modules/[chain]/staking/index.vue
+++ b/src/modules/[chain]/staking/index.vue
@@ -1,24 +1,31 @@
 <script lang="ts" setup>
 import {
-    useBaseStore,
-    useBlockchain,
-    useFormatter,
-    useMintStore,
-    useStakingStore,
-    useTxDialog,
+  useBaseStore,
+  useBlockchain,
+  useFormatter,
+  useMintStore,
+  useStakingStore,
+  useTxDialog,
 } from '@/stores';
 import { computed } from '@vue/reactivity';
 import { onMounted, ref } from 'vue';
 import { Icon } from '@iconify/vue';
-import type { Key, SlashingParam, Validator } from '@/types';
-import { formatSeconds}  from '@/libs/utils'
+import type { Key, SlashingParam } from '@/types';
+import { formatSeconds } from '@/libs/utils';
+import type { Validator } from 'cosmjs-types/cosmos/staking/v1beta1/staking';
+import type { Params } from 'cosmjs-types/cosmos/slashing/v1beta1/slashing';
+import { fromAscii, toBase64 } from '@cosmjs/encoding';
+import { decodeProto } from '@/components/dynamic';
+import type { Any } from 'cosmjs-types/google/protobuf/any';
+import { PubKey as Ed25519PubKey } from 'cosmjs-types/cosmos/crypto/ed25519/keys';
+import { PubKey as Secp256k1PubKey } from 'cosmjs-types/cosmos/crypto/secp256k1/keys';
 
 const staking = useStakingStore();
 const base = useBaseStore();
 const format = useFormatter();
 const dialog = useTxDialog();
 const chainStore = useBlockchain();
-const mintStore = useMintStore()
+const mintStore = useMintStore();
 
 const cache = JSON.parse(localStorage.getItem('avatars') || '{}');
 const avatars = ref(cache || {});
@@ -26,119 +33,162 @@ const latest = ref({} as Record<string, number>);
 const yesterday = ref({} as Record<string, number>);
 const tab = ref('active');
 const unbondList = ref([] as Validator[]);
-const slashing =ref({} as SlashingParam)
+const slashing = ref({} as Params);
 
 onMounted(() => {
-    staking.fetchUnbondingValdiators().then((res) => {
-        unbondList.value = res.concat(unbondList.value);
-    });
-    staking.fetchInacitveValdiators().then((res) => {
-        unbondList.value = unbondList.value.concat(res);
-    });
-    chainStore.rpc.getSlashingParams().then(res => {
-        slashing.value = res.params
-    })
+  staking.fetchUnbondingValdiators().then((res) => {
+    unbondList.value = res.concat(unbondList.value);
+  });
+  staking.fetchInacitveValdiators().then((res) => {
+    unbondList.value = unbondList.value.concat(res);
+  });
+  chainStore.rpc.getSlashingParams().then((res) => {
+    slashing.value = res.params;
+    console.log('slashing', slashing.value);
+  });
 });
 
 async function fetchChange() {
-    let page = 0;
+  let page = 0;
 
-    let height = Number(base.latest?.block?.header?.height || 0);
-    if (height > 14400) {
-        height -= 14400;
-    } else {
-        height = 1;
-    }
-    // voting power in 24h ago
-    while (page < staking.validators.length && height > 0) {
-        await base.fetchValidatorByHeight(height, page).then((x) => {
-            x.validators.forEach((v) => {
-                yesterday.value[v.pub_key.key] = Number(v.voting_power);
-            });
-        });
-        page += 100;
-    }
+  let height = Number(base.latest?.block?.header?.height || 0);
+  if (height > 14400) {
+    height -= 14400;
+  } else {
+    height = 1;
+  }
+  // voting power in 24h ago
+  while (page < staking.validators.length && height > 0) {
+    await base.fetchValidatorByHeight(height, page).then((x) => {
+      x.validators.forEach((v) => {
+        yesterday.value[toBase64(v.pubkey?.data!)] = Number(v.votingPower);
+      });
+    });
+    page += 100;
+  }
 
-    page = 0;
-    // voting power for now
-    while (page < staking.validators.length) {
-        await base.fetchLatestValidators(page).then((x) => {
-            x.validators.forEach((v) => {
-                latest.value[v.pub_key.key] = Number(v.voting_power);
-            });
-        });
-        page += 100;
-    }
+  page = 0;
+  // voting power for now
+  while (page < staking.validators.length) {
+    await base.fetchLatestValidators(page).then((x) => {
+      x.validators.forEach((v) => {
+        latest.value[toBase64(v.pubkey?.data!)] = Number(v.votingPower);
+      });
+    });
+    page += 100;
+  }
 }
 
 const changes = computed(() => {
-    const changes = {} as Record<string, number>;
-    Object.keys(latest.value).forEach((k) => {
-        const l = latest.value[k] || 0;
-        const y = yesterday.value[k] || 0;
-        changes[k] = l - y;
-    });
-    return changes;
+  const changes = {} as Record<string, number>;
+  Object.keys(latest.value).forEach((k) => {
+    const l = latest.value[k] || 0;
+    const y = yesterday.value[k] || 0;
+    changes[k] = l - y;
+  });
+  return changes;
 });
 
 const change24 = (key: Key) => {
-    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 changes.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 changes.value[txt];
 };
 
-const change24Text = (key?: Key) => {
-    if (!key) return '';
-    const v = change24(key);
-    return v && v !== 0 ? format.showChanges(v) : '';
+const decodeKey = (value: Any): Key => {
+  const key: Key = {
+    '@type': value.typeUrl,
+    key: '',
+  };
+  switch (value.typeUrl) {
+    case '/cosmos.crypto.ed25519.PubKey':
+      key.key = toBase64(Ed25519PubKey.decode(value.value).key);
+      break;
+    default:
+      key.key = toBase64(Secp256k1PubKey.decode(value.value).key);
+      break;
+  }
+  return key;
 };
 
-const change24Color = (key?: Key) => {
-    if (!key) return '';
-    const v = change24(key);
-    if (v > 0) return 'text-success';
-    if (v < 0) return 'text-error';
+const change24Text = (value?: Any) => {
+  if (!value) return '';
+  const key = decodeKey(value);
+  const v = change24(key);
+  return v && v !== 0 ? format.showChanges(v) : '';
+};
+
+const change24Color = (value?: Any) => {
+  if (!value) return '';
+  const key = decodeKey(value);
+  const v = change24(key);
+  if (v > 0) return 'text-success';
+  if (v < 0) return 'text-error';
 };
 
 const calculateRank = 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;
+  let sum = 0;
+  for (let i = 0; i < position; i++) {
+    sum += Number(staking.validators[i]?.delegatorShares);
+  }
+  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';
-    }
+  switch (true) {
+    case tab.value === 'active' && percent < 0.33:
+      return 'error';
+    case tab.value === 'active' && percent < 0.67:
+      return 'warning';
+    default:
+      return 'primary';
+  }
 };
 
-function isFeatured(endpoints: string[], who?: {website?: string, moniker: string }) {
-    if(!endpoints || !who) return false
-    return endpoints.findIndex(x => who.website && who.website?.substring(0, who.website?.lastIndexOf('.')).endsWith(x) || who?.moniker?.toLowerCase().search(x.toLowerCase()) > -1) > -1
+function isFeatured(
+  endpoints: string[],
+  who?: { website?: string; moniker: string }
+) {
+  if (!endpoints || !who) return false;
+  return (
+    endpoints.findIndex(
+      (x) =>
+        (who.website &&
+          who.website
+            ?.substring(0, who.website?.lastIndexOf('.'))
+            .endsWith(x)) ||
+        who?.moniker?.toLowerCase().search(x.toLowerCase()) > -1
+    ) > -1
+  );
 }
 
 const list = computed(() => {
-    if (tab.value === 'active') {
-        return staking.validators.map((x, i) => ({v: x, rank: calculateRank(i), logo: logo(x.description.identity)}));
-    } else if (tab.value === 'featured') {
-        const endpoint = chainStore.current?.endpoints?.rest?.map(x => x.provider)
-        if(endpoint) {
-            endpoint.push('ping')
-            return staking.validators
-                .filter(x => isFeatured(endpoint, x.description))
-                .map((x, i) => ({v: x, rank: 'primary', logo: logo(x.description.identity)}));
-        }
-        return []        
+  if (tab.value === 'active') {
+    return staking.validators.map((x, i) => ({
+      v: x,
+      rank: calculateRank(i),
+      logo: logo(x.description.identity),
+    }));
+  } else if (tab.value === 'featured') {
+    const endpoint = chainStore.current?.endpoints?.rpc?.map((x) => x.provider);
+    if (endpoint) {
+      endpoint.push('ping');
+      return staking.validators
+        .filter((x) => isFeatured(endpoint, x.description))
+        .map((x, i) => ({
+          v: x,
+          rank: 'primary',
+          logo: logo(x.description.identity),
+        }));
     }
-    return unbondList.value.map((x, i) => ({v: x, rank: 'primary', logo: logo(x.description.identity)}));
+    return [];
+  }
+  return unbondList.value.map((x, i) => ({
+    v: x,
+    rank: 'primary',
+    logo: logo(x.description.identity),
+  }));
 });
 
 const fetchAvatar = (identity: string) => {
@@ -190,284 +240,322 @@ const loadAvatars = () => {
 };
 
 const logo = (identity?: string) => {
-    if (!identity || !avatars.value[identity]) return '';
-    const url = avatars.value[identity] || '';
-    return url.startsWith('http')
-        ? url
-        : `https://s3.amazonaws.com/keybase_processed_uploads/${url}`;
+  if (!identity || !avatars.value[identity]) return '';
+  const url = avatars.value[identity] || '';
+  return url.startsWith('http')
+    ? url
+    : `https://s3.amazonaws.com/keybase_processed_uploads/${url}`;
 };
 
 fetchChange();
 loadAvatars();
 </script>
 <template>
-<div>
-    <div class="bg-base-100 rounded-lg grid sm:grid-cols-1 md:grid-cols-4 p-4" >    
-        <div class="flex">
-            <span>
-                <div class="relative w-9 h-9 rounded overflow-hidden flex items-center justify-center mr-2">
-                    <Icon class="text-success" icon="mdi:trending-up" size="32" />
-                    <div class="absolute top-0 left-0 bottom-0 right-0 opacity-20 bg-success"></div>
-                </div>
-            </span>
-            <span>
-                <div class="font-bold">{{ format.percent(mintStore.inflation) }}</div>
-                <div class="text-xs">{{ $t('staking.inflation') }}</div>
-            </span>
-        </div>
-        <div class="flex">
-            <span>
-                <div class="relative w-9 h-9 rounded overflow-hidden flex items-center justify-center mr-2">
-                    <Icon class="text-primary" icon="mdi:lock-open-outline" size="32" />
-                    <div class="absolute top-0 left-0 bottom-0 right-0 opacity-20 bg-primary"></div>
-                </div>
-            </span>
-            <span>
-                <div class="font-bold">{{ formatSeconds(staking.params?.unbonding_time) }}</div>
-                <div class="text-xs">{{ $t('staking.unbonding_time') }}</div>
-            </span>
-        </div> 
-        <div class="flex">
-            <span>
-                <div class="relative w-9 h-9 rounded overflow-hidden flex items-center justify-center mr-2">
-                    <Icon class="text-error" icon="mdi:alert-octagon-outline" size="32" />
-                    <div class="absolute top-0 left-0 bottom-0 right-0 opacity-20 bg-error"></div>
-                </div>
-            </span>
-            <span>
-            <div class="font-bold">{{ format.percent(slashing.slash_fraction_double_sign) }}</div>
-            <div class="text-xs">{{ $t('staking.double_sign_slashing') }}</div>
-            </span>
-        </div> 
-        <div class="flex">
-            <span>
-                <div class="relative w-9 h-9 rounded overflow-hidden flex items-center justify-center mr-2">
-                    <Icon class="text-error" icon="mdi:pause" size="32" />
-                    <div class="absolute top-0 left-0 bottom-0 right-0 opacity-20 bg-error"></div>
-                </div>
-            </span>
-            <span>
-            <div class="font-bold">{{ format.percent(slashing.slash_fraction_downtime) }}</div>
-            <div class="text-xs">{{ $t('staking.downtime_slashing') }}</div>
-            </span>
-        </div>  
+  <div>
+    <div class="bg-base-100 rounded-lg grid sm:grid-cols-1 md:grid-cols-4 p-4">
+      <div class="flex">
+        <span>
+          <div
+            class="relative w-9 h-9 rounded overflow-hidden flex items-center justify-center mr-2"
+          >
+            <Icon class="text-success" icon="mdi:trending-up" size="32" />
+            <div
+              class="absolute top-0 left-0 bottom-0 right-0 opacity-20 bg-success"
+            ></div>
+          </div>
+        </span>
+        <span>
+          <div class="font-bold">{{ format.percent(mintStore.inflation) }}</div>
+          <div class="text-xs">{{ $t('staking.inflation') }}</div>
+        </span>
+      </div>
+      <div class="flex">
+        <span>
+          <div
+            class="relative w-9 h-9 rounded overflow-hidden flex items-center justify-center mr-2"
+          >
+            <Icon class="text-primary" icon="mdi:lock-open-outline" size="32" />
+            <div
+              class="absolute top-0 left-0 bottom-0 right-0 opacity-20 bg-primary"
+            ></div>
+          </div>
+        </span>
+        <span>
+          <div class="font-bold">
+            {{ formatSeconds(staking.params?.unbondingTime) }}
+          </div>
+          <div class="text-xs">{{ $t('staking.unbonding_time') }}</div>
+        </span>
+      </div>
+      <div class="flex">
+        <span>
+          <div
+            class="relative w-9 h-9 rounded overflow-hidden flex items-center justify-center mr-2"
+          >
+            <Icon
+              class="text-error"
+              icon="mdi:alert-octagon-outline"
+              size="32"
+            />
+            <div
+              class="absolute top-0 left-0 bottom-0 right-0 opacity-20 bg-error"
+            ></div>
+          </div>
+        </span>
+        <span>
+          <div class="font-bold">
+            {{
+              format.percent(
+                slashing.slashFractionDoubleSign &&
+                  fromAscii(slashing.slashFractionDoubleSign)
+              )
+            }}
+          </div>
+          <div class="text-xs">{{ $t('staking.double_sign_slashing') }}</div>
+        </span>
+      </div>
+      <div class="flex">
+        <span>
+          <div
+            class="relative w-9 h-9 rounded overflow-hidden flex items-center justify-center mr-2"
+          >
+            <Icon class="text-error" icon="mdi:pause" size="32" />
+            <div
+              class="absolute top-0 left-0 bottom-0 right-0 opacity-20 bg-error"
+            ></div>
+          </div>
+        </span>
+        <span>
+          <div class="font-bold">
+            {{
+              format.percent(
+                slashing.slashFractionDowntime &&
+                  fromAscii(slashing.slashFractionDowntime)
+              )
+            }}
+          </div>
+          <div class="text-xs">{{ $t('staking.downtime_slashing') }}</div>
+        </span>
+      </div>
     </div>
 
     <div>
-        <div class="flex items-center justify-between py-1">
-            <div class="tabs tabs-boxed bg-transparent">
-                <a
-                    class="tab text-gray-400"
-                    :class="{ 'tab-active': tab === 'featured' }"
-                    @click="tab = 'featured'"
-                    >{{ $t('staking.popular') }}</a
-                >
-                <a
-                    class="tab text-gray-400"
-                    :class="{ 'tab-active': tab === 'active' }"
-                    @click="tab = 'active'"
-                    >{{ $t('staking.active') }}</a
-                >
-                <a
-                    class="tab text-gray-400"
-                    :class="{ 'tab-active': tab === 'inactive' }"
-                    @click="tab = 'inactive'"
-                    >{{ $t('staking.inactive') }}</a
-                >
-            </div>
-
-            <div class="text-lg font-semibold">
-                {{ list.length }}/{{ staking.params.max_validators }}
-            </div>
+      <div class="flex items-center justify-between py-1">
+        <div class="tabs tabs-boxed bg-transparent">
+          <a
+            class="tab text-gray-400"
+            :class="{ 'tab-active': tab === 'featured' }"
+            @click="tab = 'featured'"
+            >{{ $t('staking.popular') }}</a
+          >
+          <a
+            class="tab text-gray-400"
+            :class="{ 'tab-active': tab === 'active' }"
+            @click="tab = 'active'"
+            >{{ $t('staking.active') }}</a
+          >
+          <a
+            class="tab text-gray-400"
+            :class="{ 'tab-active': tab === 'inactive' }"
+            @click="tab = 'inactive'"
+            >{{ $t('staking.inactive') }}</a
+          >
         </div>
 
-        <div class="bg-base-100 px-4 pt-3 pb-4 rounded shadow">
-            <div class="overflow-x-auto">
-                <table class="table staking-table w-full">
-                    <thead>
-                        <tr>
-                            <th
-                                scope="col"
-                                class="uppercase"
-                                style="width: 3rem; position: relative"
-                            >
-                            {{ $t('staking.rank') }}    
-                            </th>
-                            <th scope="col" class="uppercase">{{ $t('staking.validator') }}</th>
-                            <th scope="col" class="text-right uppercase">{{ $t('staking.voting_power') }}</th>
-                            <th scope="col" class="text-right uppercase">{{ $t('staking.24h_changes') }}</th>
-                            <th scope="col" class="text-right uppercase">{{ $t('staking.commission') }}</th>
-                            <th scope="col" class="text-center uppercase">{{ $t('staking.actions') }}</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr
-                            v-for="({v, rank, logo}, i) in list"
-                            :key="v.operator_address"
-                            class="hover:bg-gray-100 dark:hover:bg-[#384059]"
+        <div class="text-lg font-semibold">
+          {{ list.length }}/{{ staking.params.maxValidators }}
+        </div>
+      </div>
+
+      <div class="bg-base-100 px-4 pt-3 pb-4 rounded shadow">
+        <div class="overflow-x-auto">
+          <table class="table staking-table w-full">
+            <thead>
+              <tr>
+                <th
+                  scope="col"
+                  class="uppercase"
+                  style="width: 3rem; position: relative"
+                >
+                  {{ $t('staking.rank') }}
+                </th>
+                <th scope="col" class="uppercase">
+                  {{ $t('staking.validator') }}
+                </th>
+                <th scope="col" class="text-right uppercase">
+                  {{ $t('staking.voting_power') }}
+                </th>
+                <th scope="col" class="text-right uppercase">
+                  {{ $t('staking.24h_changes') }}
+                </th>
+                <th scope="col" class="text-right uppercase">
+                  {{ $t('staking.commission') }}
+                </th>
+                <th scope="col" class="text-center uppercase">
+                  {{ $t('staking.actions') }}
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr
+                v-for="({ v, rank, logo }, i) in list"
+                :key="v.operatorAddress"
+                class="hover:bg-gray-100 dark:hover:bg-[#384059]"
+              >
+                <!-- 👉 rank -->
+                <td>
+                  <div
+                    class="text-xs truncate relative px-2 py-1 rounded-full w-fit"
+                    :class="`text-${rank}`"
+                  >
+                    <span
+                      class="inset-x-0 inset-y-0 opacity-10 absolute"
+                      :class="`bg-${rank}`"
+                    ></span>
+                    {{ i + 1 }}
+                  </div>
+                </td>
+                <!-- 👉 Validator -->
+                <td>
+                  <div
+                    class="flex items-center overflow-hidden"
+                    style="max-width: 300px"
+                  >
+                    <div class="avatar mr-4 relative w-8 h-8 rounded-full">
+                      <div
+                        class="w-8 h-8 rounded-full bg-gray-400 absolute opacity-10"
+                      ></div>
+                      <div class="w-8 h-8 rounded-full">
+                        <img
+                          v-if="logo"
+                          :src="logo"
+                          class="object-contain"
+                          @error="
+                            (e) => {
+                              const identity = v.description?.identity;
+                              if (identity) loadAvatar(identity);
+                            }
+                          "
+                        />
+                        <Icon
+                          v-else
+                          class="text-3xl"
+                          :icon="`mdi-help-circle-outline`"
+                        />
+                      </div>
+                    </div>
+
+                    <div class="flex flex-col">
+                      <span
+                        class="text-sm text-primary dark:invert whitespace-nowrap overflow-hidden"
+                      >
+                        <RouterLink
+                          :to="{
+                            name: 'chain-staking-validator',
+                            params: {
+                              validator: v.operatorAddress,
+                            },
+                          }"
+                          class="font-weight-medium"
                         >
-                            <!-- 👉 rank -->
-                            <td>
-                                <div
-                                    class="text-xs truncate relative px-2 py-1 rounded-full w-fit"
-                                    :class="`text-${rank}`"
-                                >
-                                    <span
-                                        class="inset-x-0 inset-y-0 opacity-10 absolute"
-                                        :class="`bg-${rank}`"
-                                    ></span>
-                                    {{ i + 1 }}
-                                </div>
-                            </td>
-                            <!-- 👉 Validator -->
-                            <td>
-                                <div
-                                    class="flex items-center overflow-hidden"
-                                    style="max-width: 300px"
-                                >
-                                    <div
-                                        class="avatar mr-4 relative w-8 h-8 rounded-full"
-                                    >
-                                        <div
-                                            class="w-8 h-8 rounded-full bg-gray-400 absolute opacity-10"
-                                        ></div>
-                                        <div class="w-8 h-8 rounded-full">
-                                            <img
-                                                v-if="logo"
-                                                :src="logo"
-                                                class="object-contain"
-                                                @error="
-                                                    (e) => {
-                                                        const identity = v.description?.identity;
-                                                        if (identity) loadAvatar(identity);
-                                                    }
-                                                "
-                                            />
-                                            <Icon
-                                                v-else
-                                                class="text-3xl"
-                                                :icon="`mdi-help-circle-outline`"
-                                            />
-                                            
-                                        </div>
-                                    </div>
+                          {{ v.description?.moniker }}
+                        </RouterLink>
+                      </span>
+                      <span class="text-xs">{{
+                        v.description?.website || v.description?.identity || '-'
+                      }}</span>
+                    </div>
+                  </div>
+                </td>
 
-                                    <div class="flex flex-col">
-                                        <span class="text-sm text-primary dark:invert whitespace-nowrap overflow-hidden">
-                                            <RouterLink
-                                                :to="{
-                                                    name: 'chain-staking-validator',
-                                                    params: {
-                                                        validator:
-                                                            v.operator_address,
-                                                    },
-                                                }"
-                                                class="font-weight-medium"
-                                            >
-                                                {{ v.description?.moniker }}
-                                            </RouterLink>
-                                        </span>
-                                        <span class="text-xs">{{
-                                            v.description?.website ||
-                                            v.description?.identity ||
-                                            '-'
-                                        }}</span>
-                                    </div>
-                                </div>
-                            </td>
-
-                            <!-- 👉 Voting Power -->
-                            <td class="text-right">
-                                <div class="flex flex-col">
-                                    <h6 class="text-sm font-weight-medium whitespace-nowrap ">
-                                        {{
-                                            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>
-                                </div>
-                            </td>
-                            <!-- 👉 24h Changes -->
-                            <td
-                                class="text-right text-xs"
-                                :class="change24Color(v.consensus_pubkey)"
-                            >
-                                {{ change24Text(v.consensus_pubkey) }}
-                            </td>
-                            <!-- 👉 commission -->
-                            <td class="text-right text-xs">
-                                {{
-                                    format.formatCommissionRate(
-                                        v.commission?.commission_rates?.rate
-                                    )
-                                }}
-                            </td>
-                            <!-- 👉 Action -->
-                            <td class="text-center">
-                                <div
-                                    v-if="v.jailed"
-                                    class="badge badge-error gap-2 text-white"
-                                >
-                                {{ $t('staking.jailed') }}
-                                </div>
-                                <label
-                                    v-else
-                                    for="delegate"
-                                    class="btn btn-xs btn-primary rounded-sm capitalize"
-                                    @click="
-                                        dialog.open('delegate', {
-                                            validator_address:
-                                                v.operator_address,
-                                        })
-                                    "
-                                    >{{ $t('account.btn_delegate') }}</label
-                                >
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <div class="divider"></div>
-            <div class="flex flex-row items-center">
-                <div
-                    class="text-xs truncate relative py-2 px-4 rounded-md w-fit text-error mr-2"
+                <!-- 👉 Voting Power -->
+                <td class="text-right">
+                  <div class="flex flex-col">
+                    <h6 class="text-sm font-weight-medium whitespace-nowrap">
+                      {{
+                        format.formatToken(
+                          {
+                            amount: parseInt(v.tokens).toString(),
+                            denom: staking.params.bondDenom,
+                          },
+                          true,
+                          '0,0'
+                        )
+                      }}
+                    </h6>
+                    <span class="text-xs">{{
+                      format.calculatePercent(
+                        v.delegatorShares,
+                        staking.totalPower
+                      )
+                    }}</span>
+                  </div>
+                </td>
+                <!-- 👉 24h Changes -->
+                <td
+                  class="text-right text-xs"
+                  :class="change24Color(v.consensusPubkey)"
                 >
-                    <span
-                        class="inset-x-0 inset-y-0 opacity-10 absolute bg-error"
-                    ></span>
-                    {{ $t('staking.top') }} 33%
-                </div>
-                <div
-                    class="text-xs truncate relative py-2 px-4 rounded-md w-fit text-warning"
-                >
-                    <span
-                        class="inset-x-0 inset-y-0 opacity-10 absolute bg-warning"
-                    ></span>
-                    {{ $t('staking.top') }} 67%
-                </div>
-                <div class="text-xs hidden md:!block pl-2">
-                    {{ $t('staking.description') }}
-                </div>
-            </div>
+                  {{ change24Text(v.consensusPubkey) }}
+                </td>
+                <!-- 👉 commission -->
+                <td class="text-right text-xs">
+                  {{
+                    format.formatCommissionRate(
+                      v.commission?.commissionRates?.rate
+                    )
+                  }}
+                </td>
+                <!-- 👉 Action -->
+                <td class="text-center">
+                  <div
+                    v-if="v.jailed"
+                    class="badge badge-error gap-2 text-white"
+                  >
+                    {{ $t('staking.jailed') }}
+                  </div>
+                  <label
+                    v-else
+                    for="delegate"
+                    class="btn btn-xs btn-primary rounded-sm capitalize"
+                    @click="
+                      dialog.open('delegate', {
+                        validator_address: v.operatorAddress,
+                      })
+                    "
+                    >{{ $t('account.btn_delegate') }}</label
+                  >
+                </td>
+              </tr>
+            </tbody>
+          </table>
         </div>
+
+        <div class="divider"></div>
+        <div class="flex flex-row items-center">
+          <div
+            class="text-xs truncate relative py-2 px-4 rounded-md w-fit text-error mr-2"
+          >
+            <span
+              class="inset-x-0 inset-y-0 opacity-10 absolute bg-error"
+            ></span>
+            {{ $t('staking.top') }} 33%
+          </div>
+          <div
+            class="text-xs truncate relative py-2 px-4 rounded-md w-fit text-warning"
+          >
+            <span
+              class="inset-x-0 inset-y-0 opacity-10 absolute bg-warning"
+            ></span>
+            {{ $t('staking.top') }} 67%
+          </div>
+          <div class="text-xs hidden md:!block pl-2">
+            {{ $t('staking.description') }}
+          </div>
+        </div>
+      </div>
     </div>
-</div>
+  </div>
 </template>
 
 <route>
@@ -481,7 +569,7 @@ loadAvatars();
 
 <style>
 .staking-table.table :where(th, td) {
-    padding: 8px 5px;
-    background: transparent;
+  padding: 8px 5px;
+  background: transparent;
 }
 </style>
diff --git a/src/stores/useFormatter.ts b/src/stores/useFormatter.ts
index 00986d23..f985fd5a 100644
--- a/src/stores/useFormatter.ts
+++ b/src/stores/useFormatter.ts
@@ -332,7 +332,9 @@ export const useFormatter = defineStore('formatter', {
       return this.percent(rate);
     },
     percent(decimal?: string | number) {
-      return decimal ? numeral(decimal).format('0.[00]%') : '-';
+      return decimal
+        ? numeral(decimal).divide('1000000000000000000').format('0.[00]%')
+        : '-';
     },
     formatNumber(input?: number, fmt = '0.[00]') {
       if (!input) return '';