add accounts and supply

package.json

@@ -35,7 +35,7 @@
     "md-editor-v3": "^2.8.1",
     "numeral": "^2.0.6",
     "osmojs": "^14.0.0-rc.0",
-    "ping-widget": "^0.0.38",
+    "ping-widget": "^0.0.39",
     "pinia": "^2.0.28",
     "postcss": "^8.4.23",
     "qrcode": "^1.5.3",

src/layouts/components/NavBarWallet.vue

@@ -108,7 +108,7 @@ const tipMsg = computed(() => {
     <ping-connect-wallet
       :chain-id="baseStore.currentChainId"
       :hd-path="chainStore.defaultHDPath"
-      :prefix="chainStore.current?.bech32Prefix"
+      :addr-prefix="chainStore.current?.bech32Prefix||'cosmos'"
       @connect="walletStateChange"
       @keplr-config="walletStore.suggestChain()"
     />

src/libs/client.ts

@@ -31,8 +31,10 @@ export class CosmosRestClient extends BaseRestClient<RequestRegistry> {
     return new CosmosRestClient(endpoint, DEFAULT)
   }
   // Auth Module
-  async getAuthAccounts() {
-    return this.request(this.registry.auth_accounts, {});
+  async getAuthAccounts(page?: PageRequest) {
+    if(!page) page = new PageRequest()
+    const query =`?${page.toQueryString()}`;
+    return this.request(this.registry.auth_accounts, {}, query);
   }
   async getAuthAccount(address: string) {
     return this.request(this.registry.auth_account_address, { address });
@@ -47,8 +49,9 @@ export class CosmosRestClient extends BaseRestClient<RequestRegistry> {
   async getBankDenomMetadata() {
     return this.request(this.registry.bank_denoms_metadata, {});
   }
-  async getBankSupply() {
-    return this.request(this.registry.bank_supply, {});
+  async getBankSupply(page?: PageRequest) {    if(!page) page = new PageRequest()
+    const query =`?${page.toQueryString()}`;
+    return this.request(this.registry.bank_supply, {}, query);
   }
   async getBankSupplyByDenom(denom: string) {
     return this.request(this.registry.bank_supply_by_denom, { denom });

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

@@ -0,0 +1,86 @@
+<script lang="ts" setup>
+import { computed, ref } from '@vue/reactivity';
+import { useBaseStore, useBlockchain, useFormatter } from '@/stores';
+import { PageRequest, type AuthAccount, type Pagination } from '@/types';
+import { onMounted } from 'vue';
+import PaginationBar from '@/components/PaginationBar.vue';
+const props = defineProps(['chain']);
+
+const chainStore = useBlockchain()
+
+const accounts = ref([] as AuthAccount[])
+const pageRequest = ref(new PageRequest())
+const pageResponse = ref({} as Pagination)
+
+onMounted(() => {
+  pageload(1)
+});
+
+function pageload(p: number) {
+  pageRequest.value.setPage(p)
+  chainStore.rpc.getAuthAccounts(pageRequest.value).then(x => {
+    accounts.value = x.accounts
+    pageResponse.value = x.pagination
+  });
+}
+
+function showType(v: string) {
+    return v.replace("/cosmos.auth.v1beta1.", "")
+}
+function findField(v: any, field: string) {
+    if(!v || Array.isArray(v) || typeof v === 'string') return null
+    const fields = Object.keys(v)
+    if(fields.includes(field)) {
+        return v[field]
+    }
+    for(let i= 0; i < fields.length; i++) {
+        const re: any = findField(v[fields[i]], field)
+        if(re) return re
+    }
+}
+function showAddress(v: any) {
+    return findField(v, 'address')
+}
+function showAccountNumber(v: any) {
+    return findField(v, 'account_number')
+}
+function showSequence(v: any) {
+    return findField(v, 'sequence')
+}
+function showPubkey(v: any) {
+    return findField(v, 'pub_key')
+}
+
+</script>
+<template>
+    <div class=" overflow-x-auto">
+        <table class="table table-compact">
+            <thead>
+                <tr>
+                    <td>Type</td>
+                    <td>Address</td>
+                    <td>Account Number</td>
+                    <td>Sequence</td>
+                    <td>Public Key</td>
+                </tr>
+            </thead>
+            <tr v-for="acc in accounts">
+                <td>{{ showType(acc['@type']) }}</td>
+                <td><RouterLink :to="`/${chain}/account/${showAddress(acc)}`">{{ showAddress(acc) }}</RouterLink></td>
+                <td>{{ showAccountNumber(acc) }}</td>
+                <td>{{ showSequence(acc) }}</td>
+                <td>{{ showPubkey(acc) }}</td>
+            </tr>
+        </table>
+        <PaginationBar :limit="pageRequest.limit" :total="pageResponse.total" :callback="pageload" />
+    </div>
+</template>
+
+<route>
+    {
+      meta: {
+        i18n: 'account',
+        order: 16
+      }
+    }
+  </route>

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

@@ -0,0 +1,59 @@
+<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 { onMounted } from 'vue';
+import PaginationBar from '@/components/PaginationBar.vue';
+const props = defineProps(['chain']);
+
+const format = useFormatter();
+const chainStore = useBlockchain()
+
+const list = ref([] as Coin[])
+
+function showType(v: string) {
+    return v.replace("/cosmos.auth.v1beta1.", "")
+}
+
+const pageRequest = ref(new PageRequest())
+const pageResponse = ref({} as Pagination)
+
+onMounted(() => {
+  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
+  });
+}
+
+</script>
+<template>
+    <div>
+        <table class="table">
+            <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>
+    {
+      meta: {
+        i18n: 'supply',
+        order: 17
+      }
+    }
+  </route>

src/plugins/i18n/locales/cn.json

@@ -6,7 +6,9 @@
     "governance": "社区治理",
     "parameters": "参数",
     "uptime": "状态",
-    "consensus": "Consensus"
+    "consensus": "共识引擎",
+    "supply": "资产供应量",
+    "account": "账户列表"
   },
   "index": {
     "slogan": "Ping Dashboard 是一个区块链浏览器，也是一个网页钱包，还有更多 ... 🛠",

src/plugins/i18n/locales/en.json

@@ -10,7 +10,9 @@
     "cosmwasm": "Cosmwasm",
     "widget": "Widgets",
     "ibc": "IBC",
-    "consensus": "Consensus"
+    "consensus": "Consensus",
+    "supply": "Supply",
+    "account": "Accounts"
   },
   "index": {
     "slogan": "Ping Dashboard is not just an explorer but also a wallet and more ... 🛠",

yarn.lock

@@ -5675,10 +5675,10 @@ ping-widget@^0.0.33:
     vue "^3.2.47"
     vue3-webcomponent-wrapper "^0.2.0"
 
-ping-widget@^0.0.38:
-  version "0.0.38"
-  resolved "https://registry.yarnpkg.com/ping-widget/-/ping-widget-0.0.38.tgz#ab25e3f24d1b53002c552a181431a96f4340a1e8"
-  integrity sha512-x1VwKvV71Ds7BW1U4RiGCYVVb45XU4M/b09j2wpt8MdMZ8uo5y1eFnwsABJfGVQV2MuBSgXg626uhfCIBkH3TQ==
+ping-widget@^0.0.39:
+  version "0.0.39"
+  resolved "https://registry.yarnpkg.com/ping-widget/-/ping-widget-0.0.39.tgz#53e8807186f363c08c4921e50aa972a8be0b7a7c"
+  integrity sha512-2PRXs+CNOA5G6Qq3bQeIENctj9h1v9ZBNfP1GQJYHfsFcAXAW0JcKcdPwbX7kEyx9gYNctUIB6NkUflHeLWAsg==
   dependencies:
     "@cosmjs/amino" "^0.30.1"
     "@cosmjs/cosmwasm-stargate" "^0.30.1"