add paginations

src/components/PaginationBar.vue

@@ -2,29 +2,29 @@
 import TwoFactorAuthDialog from '@/plugins/vuetify/@core/components/TwoFactorAuthDialog.vue';
 import { PageRequest } from '@/types';
 import type { PropType } from 'vue';
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 
 const props = defineProps({
     total: { type: Number },
     limit: { type: Number },
-    current: { type: Number, default: 1},
+    callback: { type: Function, required: true },
-    load: { type: Function, required: true },
 });
+const current = ref(1)
 const showSize = 3
 const pages = computed(() => {
     const pages: {color: string, page: number}[] = [] 
     if(props.total && props.limit && props.total > props.limit) {
         let page = 0
         while(true) {
-            page += 1
             if( page * props.limit > props.total ) break
-            if( page > showSize && page < (props.total / props.limit - showSize + 1)) {
+            page += 1
-                if(!(page >= props.current - 1 && page <= props.current + 1)){
+            if( props.total / props.limit > 10 && page > showSize && page < (props.total / props.limit - showSize + 1)) {
+                if(!(page >= current.value - 1 && page <= current.value + 1)){
                     continue
                 }
             } 
             pages.push({
-                color: page === props.current? 'btn-primary': '',
+                color: page === current.value? 'btn-primary': '',
                 page: page,
             })
         }
@@ -32,11 +32,16 @@ const pages = computed(() => {
     return pages
 })
 
+function gotoPage(pageNum: number) {
+    current.value = pageNum
+    props.callback(pageNum)
+}
+
 </script>
 <template>
     <div class="my-5 text-center">
         <div v-if="total && limit" class="btn-group">
-            <button v-for="{page, color} in pages" class="btn btn-md" :class="color" @click="load(page)">{{ page }}</button>
+            <button v-for="{page, color} in pages" class="btn btn-md" :class="color" @click="gotoPage(page)">{{ page }}</button>
         </div>
     </div>
 </template>

src/libs/client.ts

@@ -199,14 +199,12 @@ export class CosmosRestClient extends BaseRestClient<RequestRegistry> {
     return this.request(this.registry.base_tendermint_node_info, {});
   }
   async getBaseValidatorsetAt(height: string | number, offset: number) {
-    console.log("offset", offset)
     const query = `?pagination.limit=100&pagination.offset=${offset}`
     return this.request(this.registry.base_tendermint_validatorsets_height, {
       height,
     }, query);
   }
   async getBaseValidatorsetLatest(offset: number) {
-    console.log(offset)
     const query = `?pagination.limit=100&pagination.offset=${offset}`
     return this.request(this.registry.base_tendermint_validatorsets_latest, {}, query);
   }
@@ -239,8 +237,10 @@ export class CosmosRestClient extends BaseRestClient<RequestRegistry> {
       hash,
     });
   }
-  async getIBCConnections() {
+  async getIBCConnections(page?: PageRequest) {
-    return this.request(this.registry.ibc_core_connection_connections, {});
+    if(!page) page = new PageRequest()
+    const query =`?${page.toQueryString()}`;
+    return this.request(this.registry.ibc_core_connection_connections, {}, query);
   }
   async getIBCConnectionsById(connection_id: string) {
     return this.request(

src/modules/[chain]/cosmwasm/WasmStore.ts

@@ -12,6 +12,7 @@ import type {
 } from './types';
 import { toBase64 } from '@cosmjs/encoding';
 import { useBlockchain } from '@/stores';
+import { PageRequest } from '@/types';
 
 export interface WasmRequestRegistry extends AbstractRegistry {
   cosmwasm_code: Request<PaginabledCodeInfos>;
@@ -59,14 +60,18 @@ export const DEFAULT: WasmRequestRegistry = {
 };
 
 class WasmRestClient extends BaseRestClient<WasmRequestRegistry> {
-  getWasmCodeList() {
+  getWasmCodeList(pr?: PageRequest) {
-    return this.request(this.registry.cosmwasm_code, {});
+    if(!pr) pr = new PageRequest()
+    const query = `?${pr.toQueryString()}`
+    return this.request(this.registry.cosmwasm_code, {}, query);
   }
   getWasmCodeById(code_id: string) {
     return this.request(this.registry.cosmwasm_code, { code_id }); // `code_id` is a param in above url
   }
-  getWasmCodeContracts(code_id: string) {
+  getWasmCodeContracts(code_id: string, page?: PageRequest) {
-    return this.request(this.registry.cosmwasm_code_id_contracts, { code_id });
+    if(!page) page = new PageRequest()
+    const query = `?${page.toQueryString()}`
+    return this.request(this.registry.cosmwasm_code_id_contracts, { code_id }, query);
   }
   getWasmParams() {
     return this.request(this.registry.cosmwasm_param, {});
@@ -93,10 +98,12 @@ class WasmRestClient extends BaseRestClient<WasmRequestRegistry> {
       { address, query_data }
     );
   }
-  getWasmContractStates(address: string) {
+  getWasmContractStates(address: string, pr: PageRequest) {    
+    if(!pr) pr = new PageRequest()
+    const query = `?${pr.toQueryString()}`
     return this.request(this.registry.cosmwasm_contract_address_state, {
       address,
-    });
+    }, query);
   }
 }
 

src/modules/[chain]/cosmwasm/[code_id]/contracts.vue

@@ -9,15 +9,24 @@ import type {
 import DynamicComponent from '@/components/dynamic/DynamicComponent.vue';
 import type { CustomInputContent } from '@/plugins/vuetify/@core/types';
 import { useFormatter } from '@/stores';
+import PaginationBar from '@/components/PaginationBar.vue';
+import { PageRequest } from '@/types';
 
 const props = defineProps(['code_id', 'chain']);
 
+const pageRequest = ref(new PageRequest())
 const response = ref({} as PaginabledContracts);
 
 const wasmStore = useWasmStore();
-wasmStore.wasmClient.getWasmCodeContracts(props.code_id).then((x) => {
+function loadContract(pageNum: number) {
+  const pr = new PageRequest()
+  pr.setPage(pageNum)
+  wasmStore.wasmClient.getWasmCodeContracts(props.code_id, pr).then((x) => {
     response.value = x;
   });
+}
+loadContract(1)
+
 const format = useFormatter();
 const infoDialog = ref(false);
 const stateDialog = ref(false);
@@ -32,10 +41,17 @@ function showInfo(address: string) {
   });
 }
 function showState(address: string) {
-  wasmStore.wasmClient.getWasmContractStates(address).then((x) => {
+  selected.value = address
+  pageload(1)
+}
+
+function pageload(p: number) {
+  pageRequest.value.setPage(p)
+  wasmStore.wasmClient.getWasmContractStates(selected.value, pageRequest.value).then((x) => {
     state.value = x;
   });
 }
+
 function showQuery(address: string) {
   selected.value = address;
   query.value = '';
@@ -129,6 +145,7 @@ const result = ref('');
             </tr>
           </tbody>
         </table>
+        <PaginationBar :limit="50" :total="response.pagination?.total" :callback="loadContract"/>
       </div>
     </div>
 
@@ -154,7 +171,7 @@ const result = ref('');
 
     <input type="checkbox" id="modal-contract-states" class="modal-toggle" />
     <label for="modal-contract-states" class="modal cursor-pointer">
-      <label class="modal-box relative p-2" for="">
+      <label class="modal-box w-11/12 max-w-5xl" for="">
         <div>
           <div class="flex items-center justify-between px-3 pt-2">
             <div class="text-lg">Contract States</div>
@@ -168,22 +185,23 @@ const result = ref('');
           <div class="overflow-auto">
             <table class="table table-compact w-full text-sm">
               <tr v-for="(v, index) in state.models" :key="index">
-                <td class="">
+                <td class="text-right" :data-tip="format.hexToString(v.key)">
-                  {{ format.hexToString(v.key) }}
+                    <span class="font-bold float-right">{{ format.hexToString(v.key) }}</span>
                 </td>
-                <td class="" :title="format.base64ToString(v.value)">
+                <td class="text-left w-3/4" :title="format.base64ToString(v.value)">
                   {{ format.base64ToString(v.value) }}
                 </td>
               </tr>
             </table>            
+            <PaginationBar :limit="pageRequest.limit" :total="state.pagination?.total" :callback="pageload"/>
           </div>
         </div>
       </label>
     </label>
 
     <input type="checkbox" id="modal-contract-query" class="modal-toggle" />
-    <label for="modal-contract-states" class="modal cursor-pointer">
+    <label for="modal-contract-query" class="modal cursor-pointer">
-      <label class="modal-box relative p-2" for="">
+      <label class="modal-box w-11/12 max-w-5xl" for="">
         <div>
           <div class="flex items-center justify-between px-3 pt-2 mb-4">
             <div class="text-lg font-semibold">Query Contract</div>

src/modules/[chain]/cosmwasm/index.vue

@@ -3,15 +3,23 @@ import { useBlockchain, useFormatter } from '@/stores';
 import { useWasmStore } from './WasmStore';
 import { ref } from 'vue';
 import type { PaginabledCodeInfos } from './types';
+import { PageRequest } from '@/types';
+import PaginationBar from '@/components/PaginationBar.vue';
 
 const props = defineProps(['chain']);
 
 const codes = ref({} as PaginabledCodeInfos);
 
+const pageRequest = ref(new PageRequest())
 const wasmStore = useWasmStore();
-wasmStore.wasmClient.getWasmCodeList().then((x) => {
+
+function pageload(pageNum: number) {
+  pageRequest.value.setPage(pageNum)
+  wasmStore.wasmClient.getWasmCodeList(pageRequest.value).then((x) => {
     codes.value = x;
   });
+}
+pageload(1)
 </script>
 <template>
   <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
@@ -49,6 +57,7 @@ wasmStore.wasmClient.getWasmCodeList().then((x) => {
           </tr>
         </tbody>
       </table>
+      <PaginationBar :limit="pageRequest.limit" :total="codes.pagination?.total" :callback="pageload"/>
     </div>
   </div>
 </template>

src/modules/[chain]/gov/index.vue

@@ -7,7 +7,6 @@ import { PageRequest } from '@/types';
 
 const tab = ref('2');
 const store = useGovStore();
-const pageNo = ref({} as Record<string, number>)
 const pageRequest = ref(new PageRequest())
 
 onMounted(() => {
@@ -26,7 +25,6 @@ const changeTab = (val: '2' | '3' | '4') => {
 };
 
 function page(p: number) {
-  pageNo.value[tab.value] = p
   pageRequest.value.setPage(p)
   store.fetchProposals(tab.value, pageRequest.value)
 }
@@ -55,7 +53,7 @@ function page(p: number) {
       >
     </div>
     <ProposalListItem :proposals="store?.proposals[tab]"/>
-    <PaginationBar :total="store?.proposals[tab]?.pagination?.total" :limit="pageRequest.limit" :current="pageNo[tab]" :load="page"/>
+    <PaginationBar :total="store?.proposals[tab]?.pagination?.total" :limit="pageRequest.limit" :callback="page"/>
   </div>
 </template>
 <route>

src/modules/[chain]/ibc/index.vue

@@ -1,17 +1,27 @@
 <script lang="ts" setup>
+import PaginationBar from '@/components/PaginationBar.vue';
 import { useBlockchain, useFormatter } from '@/stores';
-import type { Connection } from '@/types';
+import { PageRequest, type Connection, type Pagination } from '@/types';
 import { onMounted } from 'vue';
 import { ref } from 'vue';
 
 const props = defineProps(['chain']);
 const chainStore = useBlockchain();
 const list = ref([] as Connection[]);
+const pageRequest = ref(new PageRequest())
+const pageResponse = ref({} as Pagination)
+
 onMounted(() => {
-  chainStore.rpc.getIBCConnections().then((x) => {
+  pageload(1)
+});
+
+function pageload(p: number) {
+  pageRequest.value.setPage(p)
+  chainStore.rpc.getIBCConnections(pageRequest.value).then((x) => {
     list.value = x.connections;
+    pageResponse.value = x.pagination
   });
-});
+}
 
 function color(v: string) {
   if (v && v.indexOf('_OPEN') > -1) {
@@ -62,6 +72,7 @@ function color(v: string) {
             </tr>
           </tbody>
         </table>
+        <PaginationBar :limit="pageRequest.limit" :total="pageResponse.total" :callback="pageload"/>
       </div>
     </div>
   </div>