finish tx detail

src/components/ProposalProcess.vue

@@ -1,31 +1,26 @@
 <script lang="ts" setup>
 import { useFormatter } from '@/stores';
+import type { Tally } from '@/types';
 import { computed } from '@vue/reactivity';
 import { ref, type PropType } from 'vue';
 
 
 const props = defineProps({
-  tally: { type: Object as PropType<{
-    yes: string,
-    no: string,
-    noWithVeto: string,
-    abstain: string
-  }>},
+  tally: { type: Object as PropType<Tally>},
   pool: {
     type: Object as PropType<{
-        notBondedTokens: string;
-        bondedTokens: string;
+        not_bonded_tokens: string;
+        bonded_tokens: string;
     }>,
   },
 })
+const total = computed(() => props.pool?.bonded_tokens)
 const format = useFormatter()
-const yes = computed(() => (format.calculatePercent(props.tally?.yes, props.pool?.bondedTokens)))
-const no = computed(() => ref(format.calculatePercent(props.tally?.no, props.pool?.bondedTokens)))
-const abstain = computed(() => (format.calculatePercent(props.tally?.abstain, props.pool?.bondedTokens)))
-const veto = computed(() => (format.calculatePercent(props.tally?.noWithVeto, props.pool?.bondedTokens)))
+const yes = computed(() => (format.calculatePercent(props.tally?.yes, total.value)))
+const no = computed(() => ref(format.calculatePercent(props.tally?.no, total.value)))
+const abstain = computed(() => (format.calculatePercent(props.tally?.abstain, total.value)))
+const veto = computed(() => (format.calculatePercent(props.tally?.no_with_veto, total.value)))
 
-
-console.log(yes.value, no.value, abstain.value, veto.value)
 </script>
 <template>
 <div class="progress">

src/components/ValidatorCommissionRate.vue

@@ -2,50 +2,33 @@
 import VueApexCharts from 'vue3-apexcharts'
 import { useTheme } from 'vuetify'
 import { hexToRgb } from '@/plugins/vuetify/@layouts/utils'
-import type { PropType } from 'vue';
+import { computed, type PropType } from 'vue';
 import { useFormatter } from '@/stores';
+import type { CommissionRate } from '@/types'
 
 const props = defineProps({
-  commission: { type: Object as PropType<{
-    commissionRates: {
-      rate: string,
-      maxRate: string,
-      maxChangeRate: string,
-    },
-    updateTime: string,
-  }>},
+  commission: { type: Object as PropType<CommissionRate>},
 })
-console.log('commission:', props)
 
-const zeros = Math.pow(10, 16)
-let rate = Number(props.commission?.commissionRates.rate || 0)
-let change = Number(props.commission?.commissionRates.maxChangeRate || 10)
-let max = Number(props.commission?.commissionRates.maxRate || 100)
+let rate = computed(() => Number(props.commission?.commission_rates.rate || 0) * 100)
+let change = computed(() => Number(props.commission?.commission_rates.max_change_rate || 0) * 100)
+let max = computed(() => Number(props.commission?.commission_rates.max_rate || 1) * 100)
 
-if(rate > 100) {
-  rate = rate / zeros
-}
-if(change > 100) {
-  change = change / zeros
-}
-if(max > 100) {
-  max = max / zeros
-}
 
 // const rate = 15 // props.commision?.commissionRates.rate
 // const change = 15
 // const max = 20
 
 const left = rate
-const right = max - rate
+const right = computed(() => max.value - rate.value)
 
-const s1 = left > change ? left - change : 0
-const s2 = left > change ? change: left
+const s1 = computed(() => left.value > change.value ? left.value - change.value : 0 )
+const s2 = computed(() => left.value > change.value ? change.value: left.value)
 const s3 = 2
-const s4 = right > change? change: right
-const s5 = right > change? right - change: 0
+const s4 = computed(() => right.value > change.value? change.value: right.value)
+const s5 = computed(() => right.value > change.value? right.value - change.value: 0)
 
-const series = [s1, s2, s3, s4, s5]
+const series = computed(() => [s1.value, s2.value, s3, s4.value, s5.value])
 
 const vuetifyTheme = useTheme()
 const format = useFormatter()
@@ -99,7 +82,7 @@ const chartConfig = computed(() => {
               offsetY: -15,
               fontWeight: 500,
               fontSize: '2.125rem',
-              formatter: (value: unknown) => `${rate}%`,
+              formatter: (value: unknown) => `${rate.value}%`,
               color: primaryText,
             },
             total: {
@@ -107,7 +90,7 @@ const chartConfig = computed(() => {
               label: 'Commission Rate',
               fontSize: '1rem',
               color: secondaryText,
-              formatter: ( ) => `${rate}%`,
+              formatter: ( ) => `${rate.value}%`,
             },
           },
         },
@@ -127,7 +110,7 @@ const chartConfig = computed(() => {
 </script>
 
 <template>
-  <VCard title="Commission Rate" :subtitle="`Updated at ${format.toDay(props.commision?.updateTime, 'short')}`">
+  <VCard title="Commission Rate" :subtitle="`Updated at ${format.toDay(props.commission?.update_time, 'short')}`">
     <VCardText>
       <VueApexCharts
         type="donut"

src/components/dynamic/TxsElement.vue

@@ -5,11 +5,11 @@ import { computed } from '@vue/reactivity';
 import { hashTx } from '@/libs'
 import { useBlockchain, useFormatter } from '@/stores';
 const props = defineProps({
-  value: { type: Array<Uint8Array>},
+  value: { type: Array<string>},
 });
 
 const txs = computed(() => {
-    return props.value?.map(x => ({ hash: hashTx(x) , tx: decodeTxRaw(x) })) || []
+    return props.value?.map(x => ({ hash: hashTx(fromBase64(x)) , tx: decodeTxRaw(fromBase64(x)) })) || []
 })
 
 const format = useFormatter()
@@ -26,7 +26,7 @@ const chain = useBlockchain()
         <tbody>
             <tr v-for="item in txs">
                 <td><RouterLink :to="`/${chain.chainName}/tx/${item.hash}`">{{ item.hash }}</RouterLink></td>
-                <td>{{ format.messages(item.tx.body.messages) }}</td>
+                <td>{{ format.messages(item.tx.body.messages.map(x => ({"@type": x.typeUrl}))) }}</td>
                 <td>{{ item.tx.body.memo }}</td>
             </tr>
         </tbody>