add delegations

src/libs/client.ts

@@ -204,10 +204,17 @@ export class CosmosRestClient extends BaseRestClient<RequestRegistry> {
       validator_addr,
     });
   }
-  async getStakingValidatorsDelegations(validator_addr: string) {
+  async getStakingValidatorsDelegations(validator_addr: string, page?: PageRequest) {
+    if(!page) {
+      page = new PageRequest()
+      // page.reverse = true
+      page.count_total = true
+      page.offset = 0
+    } 
+    const query =`?${page.toQueryString()}`;
     return this.request(this.registry.staking_validators_delegations, {
       validator_addr,
-    });
+    }, query);
   }
   async getStakingValidatorsDelegationsDelegator(
     validator_addr: string,

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">

src/plugins/i18n/locales/en.json

@@ -51,6 +51,7 @@
     "btn_unbond": "Unbond",
     "validator": "Validator",
     "delegation": "Delegation",
+    "delegator": "Delegator",
     "rewards": "Rewards",
     "action": "Action",
     "unbonding_delegations": "Unbonding Delegations",
@@ -217,7 +218,10 @@
     "operator_addr": "Operator Address",
     "hex_addr": "Hex Address",
     "signer_addr": "Signer Address",
-    "consensus_pub_key": "Consensus Public Key"
+    "consensus_pub_key": "Consensus Public Key",
+    "liquid_staking": "Liquid Staking",
+    "liquid_staking_shares":"Liquid Shares",
+    "validator_bond_share":"Validator Bonded"
   },
   "statesync": {
     "title": "What's State Sync?",

src/stores/useFormatter.ts

@@ -255,6 +255,11 @@ export const useFormatter = defineStore('formatter', {
             denom = unit.denom.toUpperCase();
           }
         }
+
+        if(amount < 0.01) {
+          fmt = '0.[000000]'
+        }
+
         return `${numeral(amount).format(fmt)} ${
           withDenom ? denom.substring(0, 10) : ''
         }`;

src/types/common.ts

@@ -28,7 +28,7 @@ export class PageRequest {
         const query = []
         if(this.key) query.push(`pagination.key=${this.key}`)
         if(this.limit) query.push(`pagination.limit=${this.limit}`)
-        if(this.offset) query.push(`pagination.offset=${this.offset}`)
+        if(this.offset !== undefined) query.push(`pagination.offset=${this.offset}`)
         if(this.count_total) query.push(`pagination.count_total=${this.count_total}`)
         if(this.reverse) query.push(`pagination.reverse=${this.reverse}`)
         return query.join('&')

src/types/staking.ts

@@ -17,7 +17,9 @@ export interface Validator {
     "unbonding_height": string,
     "unbonding_time": string,
     "commission": CommissionRate,
-    "min_self_delegation": string
+    "min_self_delegation": string,
+    "liquid_shares": string,
+    "validator_bond_shares": string
 }
 
 export interface CommissionRate {