From 15ed3e4df1812601ffa9089adc48a97564dfb4e5 Mon Sep 17 00:00:00 2001
From: Pham Tu <tubackkhoa@gmail.com>
Date: Thu, 18 Jan 2024 10:44:00 +0700
Subject: [PATCH] fix supply

---
 src/components/PaginationBar.vue              | 78 ++++++++++---------
 src/libs/client.ts                            | 22 ++++--
 src/modules/[chain]/account/index.vue         |  2 +-
 src/modules/[chain]/ibc/connection.vue        |  4 +-
 .../ibc/connection/[connection_id].vue        | 10 +--
 src/modules/[chain]/supply/index.vue          | 63 ++++++++-------
 6 files changed, 102 insertions(+), 77 deletions(-)

diff --git a/src/components/PaginationBar.vue b/src/components/PaginationBar.vue
index 28247b06..a927160f 100644
--- a/src/components/PaginationBar.vue
+++ b/src/components/PaginationBar.vue
@@ -2,49 +2,57 @@
 import { computed, ref } from 'vue';
 
 const props = defineProps({
-    total: { type: String },
-    limit: { type: Number },
-    callback: { type: Function, required: true },
+  total: { type: String },
+  limit: { type: Number },
+  callback: { type: Function, required: true },
 });
-const current = ref(1)
-const showSize = 3
+const current = ref(1);
+const showSize = 3;
 const pages = computed(() => {
-    const pages: { color: string, page: number }[] = []
-    const total = Number(props.total || 0)
-    if (total > 0 && props.limit && total > props.limit) {
-        let page = 0
-        while (true) {
-            if (page * props.limit >= total) break
-            page += 1
-            if (total / props.limit > 10 && page > showSize && page < (total / props.limit - showSize + 1)) {
-                if (!(page >= current.value - 1 && page <= current.value + 1)) {
-                    continue
-                }
-            }
-            pages.push({
-                color: page === current.value ? 'btn-primary' : '',
-                page: page,
-            })
+  const pages: { color: string; page: number }[] = [];
+  const total = Number(props.total || 0);
+  if (total > 0 && props.limit && total > props.limit) {
+    let page = 0;
+    while (true) {
+      if (page * props.limit >= total) break;
+      page += 1;
+      if (
+        total / props.limit > 10 &&
+        page > showSize &&
+        page < total / props.limit - showSize + 1
+      ) {
+        if (!(page >= current.value - 1 && page <= current.value + 1)) {
+          continue;
         }
+      }
+      pages.push({
+        color: page === current.value ? 'btn-primary' : '',
+        page: page,
+      });
     }
-    return pages
-})
+  }
+  return pages;
+});
 
 function gotoPage(pageNum: number) {
-    current.value = pageNum
-    props.callback(pageNum)
+  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" :key="page"
-                class="btn bg-gray-100 text-gray-500 hover:text-white border-none dark:bg-gray-800 dark:text-white" :class="{
-                    '!btn-primary': color === 'btn-primary',
-                }" @click="gotoPage(page)">
-                {{ page }}
-            </button>
-        </div>
+  <div class="my-5 text-center">
+    <div v-if="total && limit" class="btn-group">
+      <button
+        v-for="{ page, color } in pages"
+        :key="page"
+        class="btn bg-gray-100 text-gray-500 hover:text-white border-none dark:bg-gray-800 dark:text-white"
+        :class="{
+          '!btn-primary': color === 'btn-primary',
+        }"
+        @click="gotoPage(page)"
+      >
+        {{ page }}
+      </button>
     </div>
+  </div>
 </template>
diff --git a/src/libs/client.ts b/src/libs/client.ts
index 2aa97583..dad96487 100644
--- a/src/libs/client.ts
+++ b/src/libs/client.ts
@@ -44,7 +44,6 @@ import {
 } from './registry';
 import { buildQuery } from '@cosmjs/tendermint-rpc/build/tendermint37/requests';
 import { PageRequest } from '@/types';
-import { PageRequest as CosmosPageRequest } from 'cosmjs-types/cosmos/base/query/v1beta1/pagination';
 import type { BondStatusString } from '@cosmjs/stargate/build/modules/staking/queries';
 import type { ProposalStatus } from 'cosmjs-types/cosmos/gov/v1beta1/gov';
 import { fromBase64 } from '@cosmjs/encoding';
@@ -57,9 +56,10 @@ import {
   QueryClientImpl as GovQueryClientImpl,
   QueryProposalsResponse,
 } from 'cosmjs-types/cosmos/gov/v1beta1/query';
-
-import type { Any } from 'cosmjs-types/google/protobuf/any';
-import { BaseAccount } from 'cosmjs-types/cosmos/auth/v1beta1/auth';
+import {
+  QueryClientImpl as BankQueryClientImpl,
+  QueryTotalSupplyResponse,
+} from 'cosmjs-types/cosmos/bank/v1beta1/query';
 import type { SlashingExtension } from '@cosmjs/stargate/build/modules';
 import { longify } from '@cosmjs/stargate/build/queryclient';
 
@@ -74,16 +74,20 @@ export interface ExtraExtension {
       proposalStatus: ProposalStatus,
       page?: PageRequest
     ) => Promise<QueryProposalsResponse>;
+    readonly totalSupply: (
+      page?: PageRequest
+    ) => Promise<QueryTotalSupplyResponse>;
   };
 }
 function setupExtraExtension(base: QueryClient) {
   const rpc = createProtobufRpcClient(base);
   const authQueryService = new AuthQueryClientImpl(rpc);
   const govQueryService = new GovQueryClientImpl(rpc);
+  const bankQueryService = new BankQueryClientImpl(rpc);
   return {
     extra: {
       accounts: async (page?: PageRequest) => {
-        return await authQueryService.Accounts({
+        return authQueryService.Accounts({
           pagination: page?.toPagination(),
         });
       },
@@ -101,6 +105,11 @@ function setupExtraExtension(base: QueryClient) {
           pagination: page?.toPagination(),
         });
       },
+      totalSupply: async (page?: PageRequest) => {
+        return await bankQueryService.TotalSupply({
+          pagination: page?.toPagination(),
+        });
+      },
     },
   };
 }
@@ -239,8 +248,7 @@ export class CosmosRestClient extends BaseRestClient<RequestRegistry> {
     // if (!page) page = new PageRequest();
     // const query = `?${page.toQueryString()}`;
     // return this.request(this.registry.bank_supply, {}, query);
-    const paginationKey = page?.key ? fromBase64(page.key) : undefined;
-    const res = await this.queryClient.bank.totalSupply(paginationKey);
+    const res = await this.queryClient.extra.totalSupply(page);
     console.log(res);
     return res;
   }
diff --git a/src/modules/[chain]/account/index.vue b/src/modules/[chain]/account/index.vue
index 2f4ff935..410159b2 100644
--- a/src/modules/[chain]/account/index.vue
+++ b/src/modules/[chain]/account/index.vue
@@ -79,7 +79,7 @@ function showPubkey(v: any) {
     </table>
     <PaginationBar
       :limit="pageRequest.limit"
-      :total="pageResponse?.total.toString()"
+      :total="pageResponse?.total"
       :callback="pageload"
     />
   </div>
diff --git a/src/modules/[chain]/ibc/connection.vue b/src/modules/[chain]/ibc/connection.vue
index bbc3886b..7bb9d775 100644
--- a/src/modules/[chain]/ibc/connection.vue
+++ b/src/modules/[chain]/ibc/connection.vue
@@ -75,8 +75,8 @@ function pageload(p: number) {
               type="number"
               class="input input-bordered w-40 join-item"
               min="0"
-              :max="pageResponse?.total.toString()"
-              :placeholder="`0~${pageResponse?.total.toString()}`"
+              :max="pageResponse?.total ? pageResponse?.total.toString() : 0"
+              :placeholder="`0~${pageResponse?.total}`"
             />
             <button
               class="join-item btn btn-primary"
diff --git a/src/modules/[chain]/ibc/connection/[connection_id].vue b/src/modules/[chain]/ibc/connection/[connection_id].vue
index 9c6593a6..6e754e7a 100644
--- a/src/modules/[chain]/ibc/connection/[connection_id].vue
+++ b/src/modules/[chain]/ibc/connection/[connection_id].vue
@@ -202,8 +202,8 @@ function color(v: string) {
             <tr>
               <td class="w-52">{{ $t('ibc.trust_level') }}:</td>
               <td>
-                {{ clientState?.trustLevel.numerator }}/{{
-                  clientState?.trustLevel.denominator
+                {{ clientState?.trustLevel?.numerator }}/{{
+                  clientState?.trustLevel?.denominator
                 }}
               </td>
             </tr>
@@ -228,13 +228,13 @@ function color(v: string) {
             <tr>
               <td class="w-52">{{ $t('ibc.frozen_height') }}:</td>
               <td>
-                {{ clientState?.frozenHeight.revisionHeight.toString() }}
+                {{ clientState?.frozenHeight?.revisionHeight.toString() }}
               </td>
             </tr>
             <tr>
               <td class="w-52">{{ $t('ibc.latest_height') }}:</td>
               <td>
-                {{ clientState?.latestHeight.revisionHeight.toString() }}
+                {{ clientState?.latestHeight?.revisionHeight.toString() }}
               </td>
             </tr>
           </tbody>
@@ -265,7 +265,7 @@ function color(v: string) {
             <tr>
               <td class="w-52">{{ $t('ibc.upgrade_path') }}:</td>
               <td class="text-right">
-                {{ clientState?.upgradePath.join(', ') }}
+                {{ clientState?.upgradePath?.join(', ') }}
               </td>
             </tr>
           </tbody>
diff --git a/src/modules/[chain]/supply/index.vue b/src/modules/[chain]/supply/index.vue
index 7e8e5f2a..fab66048 100644
--- a/src/modules/[chain]/supply/index.vue
+++ b/src/modules/[chain]/supply/index.vue
@@ -1,52 +1,61 @@
 <script lang="ts" setup>
 import { computed, ref } from '@vue/reactivity';
 import { useBaseStore, useBlockchain, useFormatter } from '@/stores';
-import { PageRequest, type AuthAccount, type Pagination, type Coin } from '@/types';
+import {
+  PageRequest,
+  type AuthAccount,
+  type Pagination,
+  type Coin,
+} from '@/types';
 import { onMounted } from 'vue';
 import PaginationBar from '@/components/PaginationBar.vue';
+import type { PageResponse } from 'cosmjs-types/cosmos/base/query/v1beta1/pagination';
 const props = defineProps(['chain']);
 
 const format = useFormatter();
-const chainStore = useBlockchain()
+const chainStore = useBlockchain();
 
-const list = ref([] as Coin[])
+const list = ref([] as Coin[]);
 
 function showType(v: string) {
-    return v.replace("/cosmos.auth.v1beta1.", "")
+  return v.replace('/cosmos.auth.v1beta1.', '');
 }
 
-const pageRequest = ref(new PageRequest())
-const pageResponse = ref({} as Pagination)
+const pageRequest = ref(new PageRequest());
+const pageResponse = ref({} as PageResponse | undefined);
 
 onMounted(() => {
-  pageload(1)
+  pageload(1);
 });
 
 function pageload(p: number) {
-  pageRequest.value.setPage(p)
-  chainStore.rpc.getBankSupply(pageRequest.value).then(x => {
-    list.value = x.supply
-    pageResponse.value = x.pagination
+  pageRequest.value.setPage(p);
+  chainStore.rpc.getBankSupply(pageRequest.value).then((x) => {
+    list.value = x.supply;
+    pageResponse.value = x.pagination;
   });
 }
-
 </script>
 <template>
-    <div class="overflow-auto">
-        <table class="table table-compact">
-            <thead>
-                <tr>
-                    <td>Token</td>
-                    <td>Amount</td>
-                </tr>
-            </thead>
-            <tr v-for="item in list">
-                <td>{{ item.denom  }}</td>
-                <td>{{ item.amount  }}</td>
-            </tr>
-        </table>
-        <PaginationBar :limit="pageRequest.limit" :total="pageResponse.total" :callback="pageload" />
-    </div>
+  <div class="overflow-auto">
+    <table class="table table-compact">
+      <thead>
+        <tr>
+          <td>Token</td>
+          <td>Amount</td>
+        </tr>
+      </thead>
+      <tr v-for="item in list">
+        <td>{{ item.denom }}</td>
+        <td>{{ item.amount }}</td>
+      </tr>
+    </table>
+    <PaginationBar
+      :limit="pageRequest.limit"
+      :total="pageResponse?.total"
+      :callback="pageload"
+    />
+  </div>
 </template>
 
 <route>