add delegations

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

@@ -15,7 +15,8 @@ import {
   pubKeyToValcons,
   valoperToPrefix,
 } from '@/libs';
-import type { Coin, Delegation, PaginatedTxs, Validator } from '@/types';
+import { PageRequest, type Coin, type Delegation, type PaginatedDelegations, type PaginatedTxs, type Validator } from '@/types';
+import PaginationBar from '@/components/PaginationBar.vue';
 
 const props = defineProps(['validator', 'chain']);
 
@@ -23,6 +24,7 @@ const staking = useStakingStore();
 const blockchain = useBlockchain();
 const format = useFormatter();
 const dialog = useTxDialog();
+const page = new PageRequest();
 
 const validator: string = props.validator;
 
@@ -32,6 +34,7 @@ const avatars = ref(cache || {});
 const identity = ref('');
 const rewards = ref([] as Coin[] | undefined);
 const commission = ref([] as Coin[] | undefined);
+const delegations = ref({} as PaginatedDelegations)
 const addresses = ref(
   {} as {
     account: string;
@@ -133,6 +136,13 @@ onMounted(() => {
         }
       });
     });
+
+    pageload(1)
+
+    // blockchain.rpc.getDistributionValidatorSlashes(validator).then(res => {
+    //   // delegations.value = res
+    //   console.log('slashs:', res)
+    // }) 
   }
 });
 let showCopyToast = ref(0);
@@ -158,6 +168,13 @@ const tipMsg = computed(() => {
     ? { class: 'error', msg: 'Copy Error!' }
     : { class: 'success', msg: 'Copy Success!' };
 });
+
+function pageload(p: number) {
+  page.setPage(p);
+  blockchain.rpc.getStakingValidatorsDelegations(validator, page).then(res => {
+      delegations.value = res
+  }) 
+}
 </script>
 <template>
   <div>
@@ -241,10 +258,25 @@ const tipMsg = computed(() => {
                 <span> {{ v.jailed || '-' }} </span>
               </div>
             </div>
+            <p class="text-sm mt-4 mb-3 font-medium">{{ $t('staking.liquid_staking') }}</p>
+            <div class="card-list">
+              <div class="flex items-center mb-2">
+                <Icon icon="mdi-lock" class="text-xl mr-1" />
+                <span class="font-bold mr-2">{{ $t('staking.validator_bond_share') }}: </span>
+                <span> {{ format.formatToken( {amount: v.validator_bond_shares, denom: staking.params.bond_denom }, false) }} </span>
+              </div>
+              <div class="flex items-center">
+                <Icon icon="mdi-waves-arrow-right" class="text-xl mr-1" />
+                <span class="font-bold mr-2">{{ $t('staking.liquid_staking_shares') }}: </span>
+                <span>
+                  {{ format.formatToken( {amount: v.liquid_shares, denom: staking.params.bond_denom }, false) }}
+                </span>
+              </div>
+            </div>
           </div>
         </div>
         <div class="flex-1">
-          <div class="flex flex-col justify-between">
+          <div class="flex flex-col mt-10">
             <div class="flex mb-2">
               <div
                 class="flex items-center justify-center rounded w-10 h-10"
@@ -348,7 +380,7 @@ const tipMsg = computed(() => {
           {{ $t('staking.commissions_&_rewards') }}
         </div>
         <div
-          class="px-4 mt-1 flex flex-col justify-between pb-4"
+          class="px-4 mt-1 flex flex-col justify-between pb-4 max-h-72"
           style="height: calc(100% - 50px)"
         >
           <div class="overflow-auto flex-1">
@@ -455,6 +487,34 @@ const tipMsg = computed(() => {
         </div>
       </div>
     </div>
+    <div class="mt-5 bg-base-100 shadow rounded p-4">
+      <div class="text-lg mb-4 font-semibold">{{ $t('account.delegations') }}
+        <span class="float-right"> {{ delegations.delegation_responses?.length || 0 }} / {{ delegations.pagination?.total || 0 }} </span>
+      </div>
+      <div class="rounded overflow-auto">
+        <table class="table validatore-table w-full">
+          <thead>
+            <th class="text-left pl-4" style="position: relative; z-index: 2">
+              {{ $t('account.delegator') }}
+            </th>
+            <th class="text-left pl-4">{{ $t('account.delegation') }}</th>
+          </thead>
+          <tbody>
+            <tr v-for="{balance, delegation} in delegations.delegation_responses">
+              <td class="text-sm text-primary">
+                {{ delegation.delegator_address }}
+              </td>
+              <td class="truncate text-primary">
+                {{ format.formatToken(balance)}}
+              </td>
+              
+            </tr>
+          </tbody>
+        </table>
+        <PaginationBar :total="delegations.pagination?.total" :limit="page.limit" :callback="pageload"/>
+      </div>
+    </div>
+
     <div class="mt-5 bg-base-100 shadow rounded p-4">
       <div class="text-lg mb-4 font-semibold">{{ $t('account.transactions') }}</div>
       <div class="rounded overflow-auto">