From a6facd9e92006cf0da706ec26559f8e8fd0ac7fc Mon Sep 17 00:00:00 2001
From: Pham Tu <tubackkhoa@gmail.com>
Date: Fri, 19 Jan 2024 10:26:47 +0700
Subject: [PATCH] staking fix

---
 src/components/ValidatorCommissionRate.vue  | 16 +++++++++++-----
 src/modules/[chain]/staking/[validator].vue |  4 ++--
 src/stores/useFormatter.ts                  | 10 +++++++---
 3 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/src/components/ValidatorCommissionRate.vue b/src/components/ValidatorCommissionRate.vue
index b42692d1..dd057344 100644
--- a/src/components/ValidatorCommissionRate.vue
+++ b/src/components/ValidatorCommissionRate.vue
@@ -7,15 +7,23 @@ import type { Commission } from 'cosmjs-types/cosmos/staking/v1beta1/staking';
 const props = defineProps({
   commission: { type: Object as PropType<Commission> },
 });
+const format = useFormatter();
 
 let rate = computed(
-  () => Number(props.commission?.commissionRates.rate || 0) * 100
+  () =>
+    (format.toDecimal(props.commission?.commissionRates.rate)?.value() || 0) *
+    100
 );
 let change = computed(
-  () => Number(props.commission?.commissionRates.maxChangeRate || 0) * 100
+  () =>
+    (format
+      .toDecimal(props.commission?.commissionRates.maxChangeRate)
+      ?.value() || 0) * 100
 );
 let max = computed(
-  () => Number(props.commission?.commissionRates.maxRate || 1) * 100
+  () =>
+    (format.toDecimal(props.commission?.commissionRates.maxRate)?.value() ||
+      1) * 100
 );
 
 const left = rate;
@@ -37,8 +45,6 @@ const s5 = computed(() =>
 
 const series = computed(() => [s1.value, s2.value, s3, s4.value, s5.value]);
 
-const format = useFormatter();
-
 const chartConfig = computed(() => {
   const secondaryText = `hsl(var(--bc))`;
   const primaryText = `hsl(var(--bc))`;
diff --git a/src/modules/[chain]/staking/[validator].vue b/src/modules/[chain]/staking/[validator].vue
index 64fcea73..ba77d49b 100644
--- a/src/modules/[chain]/staking/[validator].vue
+++ b/src/modules/[chain]/staking/[validator].vue
@@ -79,7 +79,7 @@ blockchain.rpc.getTxsBySender(addresses.value.account).then((x) => {
 });
 
 const apr = computed(() => {
-  const rate = v.value?.commission.commissionRates || 0;
+  const rate = v.value?.commission?.commissionRates || 0;
   const inflation = useMintStore().inflation;
   if (Number(inflation)) {
     return format.percent((1 - Number(rate)) * Number(inflation));
@@ -821,7 +821,7 @@ function mapDelegators(messages: any[]) {
           </tbody>
         </table>
         <PaginationBar
-          :total="events.totalCount.toString()"
+          :total="events.totalCount?.toString() || '0'"
           :limit="page.limit"
           :callback="pagePowerEvents"
         />
diff --git a/src/stores/useFormatter.ts b/src/stores/useFormatter.ts
index 8fbfe540..79d5a739 100644
--- a/src/stores/useFormatter.ts
+++ b/src/stores/useFormatter.ts
@@ -331,8 +331,8 @@ export const useFormatter = defineStore('formatter', {
       if (!rate) return '-';
       return this.percent(rate);
     },
-    percent(decimal?: string | number) {
-      if (!decimal) return '-';
+    toDecimal(decimal?: string | number) {
+      if (!decimal) return;
 
       let decimalFormat = numeral(decimal);
 
@@ -340,7 +340,11 @@ export const useFormatter = defineStore('formatter', {
       if (decimalValue && decimalValue > 1e6) {
         decimalFormat = decimalFormat.divide('1000000000000000000');
       }
-
+      return decimalFormat;
+    },
+    percent(decimal?: string | number) {
+      const decimalFormat = this.toDecimal(decimal);
+      if (!decimalFormat) return '-';
       return decimalFormat.format('0.[00]%');
     },
     formatNumber(input?: number, fmt = '0.[00]') {