Merge pull request #21 from ping-pub/master

merge

chains/mainnet/axelar.json

@@ -8,6 +8,7 @@
     "min_tx_fee": "800",
     "addr_prefix": "axelar",
     "logo": "/logos/axelar.svg",
+    "theme_color": "#000000",
     "assets": [{
         "base": "uaxl",
         "symbol": "AXL",

chains/mainnet/cosmos.json

@@ -3,7 +3,12 @@
     "registry_name": "cosmoshub",
     "api": [
         "https://api-cosmoshub-ia.cosmosia.notional.ventures",
-        "https://lcd-cosmoshub.blockapsis.com:443"
+        "https://lcd-cosmoshub.blockapsis.com:443",
+        "https://lcd-cosmoshub.whispernode.com:443",
+        "https://api-cosmoshub.pupmos.network",
+        "https://cosmos-rest.publicnode.com",
+        "https://cosmos-rest.staketab.org",
+        "https://api.cosmos.nodestake.top"
     ],
     "rpc": ["https://rpc.cosmos.network:443", "https://cosmos-rpc.icycro.org", "https://rpc.cosmos.dragonstake.io"],
     "sdk_version": "0.45.1",

chains/mainnet/neutron.json

@@ -1,11 +1,11 @@
 {
     "chain_name": "neutron",
-    "api": ["https://neutron-api.lavenderfive.com/"],
+    "api": ["https://neutron-api.polkachu.com/"],
-    "rpc": ["https://neutron-rpc.lavenderfive.com"],
+    "rpc": ["https://neutron-rpc.polkachu.com/"],
     "provider_chain": {
         "api": ["https://api-cosmoshub-ia.cosmosia.notional.ventures"]
     },
-    "features": ["dashboard", "blocks", "ibc", "cosmwasm", "uptime", "parameters", "state-sync"],
+    "features": ["dashboard", "blocks", "ibc", "cosmwasm", "uptime", "parameters", "state-sync", "consensus", "supply", "widget"],
     "sdk_version": "0.45.1",
     "coin_type": "118",
     "min_tx_fee": "8000",
@@ -17,6 +17,6 @@
         "logo": "/logos/neutron.svg"
     }],
     "addr_prefix": "neutron",
-    "theme_color": "",
+    "theme_color": "#000000",
     "logo": "/logos/neutron.svg"
 }

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.40",
     "pinia": "^2.0.28",
     "postcss": "^8.4.23",
     "qrcode": "^1.5.3",

src/components/Countdown.vue

@@ -11,7 +11,6 @@ const props = defineProps({
     :time="time > 0 ? time : 0"
     v-slot="{ days, hours, minutes, seconds }"
   >
-    Time Remaining：{{ days }} days, {{ hours }} hours, {{ minutes }} minutes,
+    {{ days }} days {{ hours }} hours {{ minutes }} minutes {{ seconds }} seconds
-    {{ seconds }} seconds.
   </Countdown>
 </template>

src/components/TxDialog.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
-import { useTxDialog } from '@/stores';
+import { useTxDialog, useBlockchain } from '@/stores';
 const store = useTxDialog();
+const chainStore = useBlockchain()
 </script>
 <template>
   <ping-tx-dialog
@@ -9,6 +10,7 @@ const store = useTxDialog();
     :endpoint="store.endpoint"
     :params='store.params'
     :hd-path="store.hdPaths"
+    :registry-name="chainStore.current?.prettyName || chainStore.chainName"
     @view="store.view"
     @confirmed="store.confirmed"
   ></ping-tx-dialog>

src/layouts/components/DefaultLayout.vue

@@ -117,7 +117,7 @@ function selected(route: any, nav: NavLink) {
             </div>
             <div
               v-if="item?.badgeContent"
-              class="mr-6 badge badge-sm text-white"
+              class="mr-6 badge badge-sm text-white border-none"
               :class="item?.badgeClass"
             >
               {{ item?.badgeContent }}
@@ -189,7 +189,7 @@ function selected(route: any, nav: NavLink) {
           </div>
           <div
             v-if="item?.badgeContent"
-            class="badge badge-sm text-white"
+            class="badge badge-sm text-white border-none" 
             :class="item?.badgeClass"
           >
             {{ item?.badgeContent }}

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/layouts/components/NavbarSearch.vue

@@ -31,7 +31,7 @@ function confirm() {
   }
   const height = /^\d+$/;
   const txhash = /^[A-Z\d]{64}$/;
-  const addr = /^[a-z]+1[a-z\d]{38,58}$/;
+  const addr = /^[a-z\d]+1[a-z\d]{38,58}$/;
 
   const current = blockStore?.current?.chainName || '';
   const routeParams = vueRouters?.currentRoute?.value;

src/libs/client.ts

@@ -31,8 +31,10 @@ export class CosmosRestClient extends BaseRestClient<RequestRegistry> {
     return new CosmosRestClient(endpoint, DEFAULT)
   }
   // Auth Module
-  async getAuthAccounts() {
+  async getAuthAccounts(page?: PageRequest) {
-    return this.request(this.registry.auth_accounts, {});
+    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() {
+  async getBankSupply(page?: PageRequest) {    if(!page) page = new PageRequest()
-    return this.request(this.registry.bank_supply, {});
+    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/[address].vue

@@ -19,6 +19,7 @@ import type {
   UnbondingResponses,
 } from '@/types';
 import type { Coin } from '@cosmjs/amino';
+import Countdown from '@/components/Countdown.vue';
 
 const props = defineProps(['address', 'chain']);
 
@@ -65,6 +66,26 @@ const totalAmount = computed(() => {
   return totalAmountByCategory.value.reduce((p, c) => c + p, 0);
 });
 
+const totalValue = computed(() => {
+  let value = 0;
+  delegations.value?.forEach((x) => {
+    value += format.tokenValueNumber(x.balance);
+  });
+  rewards.value?.total?.forEach((x) => {
+    value += format.tokenValueNumber(x);
+  });
+  balances.value?.forEach((x) => {
+    value += format.tokenValueNumber(x);
+  });
+  unbonding.value?.forEach((x) => {
+    x.entries?.forEach((y) => {
+      value += format.tokenValueNumber({amount: y.balance, denom: stakingStore.params.bond_denom});
+    });
+  });
+  return format.formatNumber(value, '0,0.00');
+});
+
+
 function loadAccount(address: string) {
   blockchain.rpc.getAuthAccount(address).then((x) => {
     account.value = x.account;
@@ -125,14 +146,10 @@ function updateEvent() {
 
     <!-- Assets -->
     <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
-      <h2 class="card-title mb-4">Assets</h2>
+      <div class="flex justify-between">
-      <div class="grid md:!grid-cols-3">
+        <h2 class="card-title mb-4">Assets</h2>
-        <div class="md:!col-span-1">
+        <!-- button -->
-          <DonutChart :series="totalAmountByCategory" :labels="labels" />
+        <div class="flex justify-end mb-4 pr-5">
-        </div>
-        <div class="mt-4 md:!col-span-2 md:!mt-0 md:!ml-4">
-          <!-- button -->
-          <div class="flex justify-end mb-4 pr-5">
             <label
               for="send"
               class="btn btn-primary btn-sm mr-2"
@@ -154,6 +171,12 @@ function updateEvent() {
               >transfer</label
             >
           </div>
+      </div>
+      <div class="grid md:!grid-cols-3">
+        <div class="md:!col-span-1">
+          <DonutChart :series="totalAmountByCategory" :labels="labels" />
+        </div>
+        <div class="mt-4 md:!col-span-2 md:!mt-0 md:!ml-4">          
           <!-- list-->
           <div class="">
             <!--balances  -->
@@ -299,7 +322,7 @@ function updateEvent() {
             </div>
           </div>
           <div class="mt-4 text-lg font-semibold mr-5 pl-5 border-t pt-4">
-            {{ totalAmount }}
+            Total Value: ${{ totalValue }}
           </div>
         </div>
       </div>
@@ -307,20 +330,22 @@ function updateEvent() {
 
     <!-- Delegations -->
     <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
-      <h2 class="card-title mb-4">Delegations</h2>
+      <div class="flex justify-between">
-      <div class="flex justify-end mb-4">
+        <h2 class="card-title mb-4">Delegations</h2>
-        <label
+        <div class="flex justify-end mb-4">
-          for="delegate"
+          <label
-          class="btn btn-primary btn-sm mr-2"
+            for="delegate"
-          @click="dialog.open('delegate', {}, updateEvent)"
+            class="btn btn-primary btn-sm mr-2"
-          >Delegate</label
+            @click="dialog.open('delegate', {}, updateEvent)"
-        >
+            >Delegate</label
-        <label
+          >
-          for="withdraw"
+          <label
-          class="btn btn-primary btn-sm"
+            for="withdraw"
-          @click="dialog.open('withdraw', {}, updateEvent)"
+            class="btn btn-primary btn-sm"
-          >Withdraw</label
+            @click="dialog.open('withdraw', {}, updateEvent)"
-        >
+            >Withdraw</label
+          >
+        </div>
       </div>
       <div class="overflow-x-auto">
         <table class="table w-full text-sm table-zebra">
@@ -338,12 +363,12 @@ function updateEvent() {
                 <RouterLink
                   :to="`/${chain}/staking/${v.delegation.validator_address}`"
                   >{{
-                    format.validatorFromBech32(v.delegation.validator_address)
+                    format.validatorFromBech32(v.delegation.validator_address) || v.delegation.validator_address
                   }}</RouterLink
                 >
               </td>
               <td class="py-3">
-                {{ format.formatToken(v.balance, true, '0,0.[00]') }}
+                {{ format.formatToken(v.balance, true, '0,0.[000000]') }}
               </td>
               <td class="py-3">
                 {{
@@ -356,7 +381,7 @@ function updateEvent() {
                 }}
               </td>
               <td class="py-3">
-                <div class="flex justify-end">
+                <div v-if="v.balance" class="flex justify-end">
                   <label
                     for="delegate"
                     class="btn btn-primary btn-xs mr-2"
@@ -423,14 +448,13 @@ function updateEvent() {
               <th class="py-3">Completion Time</th>
             </tr>
           </thead>
-          <tbody class="text-sm">
+          <tbody class="text-sm" v-for="(v, index) in unbonding" :key="index">
-            <div v-for="(v, index) in unbonding" :key="index">
               <tr>
-                <td class="text-caption text-primary py-3">
+                <td class="text-caption text-primary py-3 bg-slate-200" colspan="10">
                   <RouterLink
                     :to="`/${chain}/staking/${v.validator_address}`"
                     >{{
-                      format.validatorFromBech32(v.validator_address)
+                      v.validator_address
                     }}</RouterLink
                   >
                 </td>
@@ -462,10 +486,9 @@ function updateEvent() {
                   }}
                 </td>
                 <td class="py-3">
-                  {{ format.toDay(entry.completion_time, 'to') }}
+                  <Countdown :time="new Date(entry.completion_time).getTime() - new Date().getTime()" />
                 </td>
               </tr>
-            </div>
           </tbody>          
         </table>
       </div>

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

@@ -0,0 +1,77 @@
+<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>

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/pages/index.vue

@@ -11,9 +11,6 @@ import { useBlockchain } from '@/stores';
 
 const dashboard = useDashboard();
 
-dashboard.$subscribe((mutation, state) => {
-  localStorage.setItem('favorite', JSON.stringify(state.favorite));
-});
 const keywords = ref('');
 const chains = computed(() => {
   if (keywords.value) {

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 ... 🛠",

src/stores/useDashboard.ts

@@ -252,18 +252,14 @@ export enum ConfigSource {
 
 export const useDashboard = defineStore('dashboard', {
   state: () => {
-    const fav = JSON.parse(
-      localStorage.getItem('favorite') || '["cosmoshub", "osmosis"]'
-    );
     const favMap = JSON.parse(
       localStorage.getItem('favoriteMap') ||
-        '{"cosmoshub":true, "osmosis":true}'
+        '{"cosmos":true, "osmosis":true}'
     );
     return {
       status: LoadingStatus.Empty,
       source: ConfigSource.MainnetCosmosDirectory,
       networkType: NetworkType.Mainnet,
-      favorite: fav as string[],
       favoriteMap: favMap as Record<string, boolean>,
       chains: {} as Record<string, ChainConfig>,
       prices: {} as Record<string, any>,
@@ -284,7 +280,7 @@ export const useDashboard = defineStore('dashboard', {
       const coinIds = [] as string[]
       Object.keys(this.favoriteMap).forEach(k => {
         if(this.chains[k]) this.chains[k].assets.forEach(a => {
-          if(a.coingecko_id !== undefined) {
+          if(a.coingecko_id !== undefined && a.coingecko_id.length > 0) {
             coinIds.push(a.coingecko_id)
             a.denom_units.forEach(u => {
               this.coingecko[u.denom] = {
@@ -330,9 +326,10 @@ export const useDashboard = defineStore('dashboard', {
     setupDefault() {
       if (this.length > 0) {
         const blockchain = useBlockchain();
-        for (let i = 0; i < this.favorite.length; i++) {
+        const keys = Object.keys(this.favoriteMap)
-          if (!blockchain.chainName && this.chains[this.favorite[i]]) {
+        for (let i = 0; i < keys.length; i++) {
-            blockchain.setCurrent(this.favorite[i]);
+          if (!blockchain.chainName && this.chains[keys[i]] && this.favoriteMap[keys[i]]) {
+            blockchain.setCurrent(keys[i]);
             break
           }
         }

src/stores/useFormatter.ts

@@ -85,6 +85,7 @@ export const useFormatter = defineStore('formatter', {
       }
     },
     price(denom: string, currency = "usd") {
+      if(!denom || denom.length < 2) return 0
       const info = this.priceInfo(denom);
       return info ? info[currency] || 0 : 0;
     },
@@ -101,13 +102,21 @@ export const useFormatter = defineStore('formatter', {
       }
       return ""
     },
+    specialDenom(denom: string) {
+      switch(true) {
+        case denom.startsWith('u'): return 6
+        case denom.startsWith("a"): return 18
+        case denom==='inj': return 18
+      }
+      return 0
+    },
     tokenValueNumber(token?: Coin) {
-      if(!token) return 0
+      if(!token || !token.denom) return 0
       // find the symbol, 
-      const symbol = this.dashboard.coingecko[token.denom]?.symbol || "" 
+      const symbol = this.dashboard.coingecko[token.denom]?.symbol || token.denom 
       // convert denomation to to symbol
       const exponent =
-        this.dashboard.coingecko[symbol.toLowerCase()]?.exponent || 0;
+        this.dashboard.coingecko[symbol?.toLowerCase()]?.exponent || this.specialDenom(token.denom);
       // cacualte amount of symbol
       const amount = Number(token.amount) / (10 ** exponent)
       const value = amount * this.price(token.denom)

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:
+ping-widget@^0.0.40:
-  version "0.0.38"
+  version "0.0.40"
-  resolved "https://registry.yarnpkg.com/ping-widget/-/ping-widget-0.0.38.tgz#ab25e3f24d1b53002c552a181431a96f4340a1e8"
+  resolved "https://registry.yarnpkg.com/ping-widget/-/ping-widget-0.0.40.tgz#e72f4381bd55cdc3b6bcfe7a15210d130a708b01"
-  integrity sha512-x1VwKvV71Ds7BW1U4RiGCYVVb45XU4M/b09j2wpt8MdMZ8uo5y1eFnwsABJfGVQV2MuBSgXg626uhfCIBkH3TQ==
+  integrity sha512-RIJ9vRA2v7ZQTsRwbUef9tSFWBH6fuCfspXc58zsLtc0yNC/kc6/C6HglNhi5wCpFWbMi+fl6Ea+GP2Jl+8iqw==
   dependencies:
     "@cosmjs/amino" "^0.30.1"
     "@cosmjs/cosmwasm-stargate" "^0.30.1"