feat: delegrations rewards

src/components/Countdown.vue

@@ -1,17 +1,17 @@
 <script lang="ts" setup>
-import VueCountdown from '@chenfengyuan/vue-countdown';
+import Countdown from '@chenfengyuan/vue-countdown';
 
 const props = defineProps({
   time: { type: Number },
 });
 </script>
 <template>
-  <vue-countdown
+  <Countdown
     v-if="time"
     :time="time > 0 ? time : 0"
     v-slot="{ days, hours, minutes, seconds }"
   >
     Time Remaining：{{ days }} days, {{ hours }} hours, {{ minutes }} minutes,
     {{ seconds }} seconds.
-  </vue-countdown>
+  </Countdown>
 </template>

src/modules/[chain]/index.vue

@@ -317,10 +317,13 @@ const color = computed(() => {
               <td>{{ format.formatToken(item?.balance) }}</td>
               <td>
                 {{
-                  format.formatToken({
+                  format.formatToken(
-                    denom: item?.balance?.denom,
+                    walletStore?.rewards?.rewards?.find(
-                    amount: item?.delegation?.shares,
+                      (el) =>
-                  })
+                        el?.validator_address ===
+                        item?.delegation?.validator_address
+                    )?.reward?.[0]
+                  )
                 }}
               </td>
               <td>

src/modules/[chain]/staking/[validator].vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import {
-  useBankStore,
   useBlockchain,
   useFormatter,
   useMintStore,
@@ -9,7 +8,7 @@ import {
 } from '@/stores';
 import { onMounted, computed, ref } from 'vue';
 import { Icon } from '@iconify/vue';
-import ValidatorCommissionRate from '@/components/ValidatorCommissionRate.vue';
+import CommissionRate from '@/components/ValidatorCommissionRate.vue';
 import {
   consensusPubkeyToHexAddress,
   operatorAddressToAccount,
@@ -301,9 +300,7 @@ onMounted(() => {
 
     <div class="mt-3 grid grid-cols-1 md:grid-cols-3 gap-4">
       <div class="h-100">
-        <ValidatorCommissionRate
+        <CommissionRate :commission="v.commission"></CommissionRate>
-          :commission="v.commission"
-        ></ValidatorCommissionRate>
       </div>
       <div>
         <div class="h-100 bg-base-100 rounded shadow">

src/modules/[chain]/tx/[hash].vue

@@ -3,7 +3,7 @@ import { useBlockchain, useFormatter } from '@/stores';
 import DynamicComponent from '@/components/dynamic/DynamicComponent.vue';
 import { computed, ref } from '@vue/reactivity';
 import type { Tx, TxResponse } from '@/types';
-import VueJsonPretty from 'vue-json-pretty';
+import JsonPretty from 'vue-json-pretty';
 import 'vue-json-pretty/lib/styles.css';
 
 const props = defineProps(['hash', 'chain']);
@@ -119,7 +119,7 @@ const messages = computed(() => {
       class="bg-base-100 px-4 pt-3 pb-4 rounded shadow"
     >
       <h2 class="card-title truncate mb-2">JSON</h2>
-      <vue-json-pretty :data="tx" :deep="3" />
+      <JsonPretty :data="tx" :deep="3" />
     </div>
   </div>
 </template>