Merge pull request #21 from ping-pub/master

merge
2023-06-12 11:04:12 +08:00 · 2023-06-12 11:04:12 +08:00 · eff43c87b1
commit eff43c87b1
parent 116be4db63 8ec5a9822a
19 changed files with 247 additions and 71 deletions
--- a/chains/mainnet/axelar.json
+++ b/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",
--- a/chains/mainnet/cosmos.json
+++ b/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",
--- a/chains/mainnet/neutron.json
+++ b/chains/mainnet/neutron.json
@ -1,11 +1,11 @@
 {
    "chain_name": "neutron",
-    "api": ["https://neutron-api.lavenderfive.com/"],
-    "rpc": ["https://neutron-rpc.lavenderfive.com"],
+    "api": ["https://neutron-api.polkachu.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"
 }
--- a/package.json
+++ b/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",
--- a/src/components/Countdown.vue
+++ b/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,
-    {{ seconds }} seconds.
+    {{ days }} days {{ hours }} hours {{ minutes }} minutes {{ seconds }} seconds
  </Countdown>
 </template>
--- a/src/components/TxDialog.vue
+++ b/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>
--- a/src/layouts/components/DefaultLayout.vue
+++ b/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 }}
--- a/src/layouts/components/NavBarWallet.vue
+++ b/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()"
    />
--- a/src/layouts/components/NavbarSearch.vue
+++ b/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;
--- a/src/libs/client.ts
+++ b/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 });
--- a/src/modules/[chain]/account/[address].vue
+++ b/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="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">
-          <!-- button -->
-          <div class="flex justify-end mb-4 pr-5">
+      <div class="flex justify-between">
+        <h2 class="card-title mb-4">Assets</h2>
+        <!-- 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-end mb-4">
-        <label
-          for="delegate"
-          class="btn btn-primary btn-sm mr-2"
-          @click="dialog.open('delegate', {}, updateEvent)"
-          >Delegate</label
-        >
-        <label
-          for="withdraw"
-          class="btn btn-primary btn-sm"
-          @click="dialog.open('withdraw', {}, updateEvent)"
-          >Withdraw</label
-        >
+      <div class="flex justify-between">
+        <h2 class="card-title mb-4">Delegations</h2>
+        <div class="flex justify-end mb-4">
+          <label
+            for="delegate"
+            class="btn btn-primary btn-sm mr-2"
+            @click="dialog.open('delegate', {}, updateEvent)"
+            >Delegate</label
+          >
+          <label
+            for="withdraw"
+            class="btn btn-primary btn-sm"
+            @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">
-            <div v-for="(v, index) in unbonding" :key="index">
+          <tbody class="text-sm" 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,11 +486,10 @@ 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>
+          </tbody>          
        </table>
      </div>
    </div>
--- a/src/modules/[chain]/account/index.vue
+++ b/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>
--- a/src/modules/[chain]/supply/index.vue
+++ b/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>
--- a/src/pages/index.vue
+++ b/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) {
--- a/src/plugins/i18n/locales/cn.json
+++ b/src/plugins/i18n/locales/cn.json
@ -6,7 +6,9 @@
    "governance": "社区治理",
    "parameters": "参数",
    "uptime": "状态",
-    "consensus": "Consensus"
+    "consensus": "共识引擎",
+    "supply": "资产供应量",
+    "account": "账户列表"
  },
  "index": {
    "slogan": "Ping Dashboard 是一个区块链浏览器，也是一个网页钱包，还有更多 ... 🛠",
--- a/src/plugins/i18n/locales/en.json
+++ b/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 ... 🛠",
--- a/src/stores/useDashboard.ts
+++ b/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++) {
-          if (!blockchain.chainName && this.chains[this.favorite[i]]) {
-            blockchain.setCurrent(this.favorite[i]);
+        const keys = Object.keys(this.favoriteMap)
+        for (let i = 0; i < keys.length; i++) {
+          if (!blockchain.chainName && this.chains[keys[i]] && this.favoriteMap[keys[i]]) {
+            blockchain.setCurrent(keys[i]);
            break
          }
        }
--- a/src/stores/useFormatter.ts
+++ b/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)
--- a/yarn.lock
+++ b/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.40:
+  version "0.0.40"
+  resolved "https://registry.yarnpkg.com/ping-widget/-/ping-widget-0.0.40.tgz#e72f4381bd55cdc3b6bcfe7a15210d130a708b01"
+  integrity sha512-RIJ9vRA2v7ZQTsRwbUef9tSFWBH6fuCfspXc58zsLtc0yNC/kc6/C6HglNhi5wCpFWbMi+fl6Ea+GP2Jl+8iqw==
  dependencies:
    "@cosmjs/amino" "^0.30.1"
    "@cosmjs/cosmwasm-stargate" "^0.30.1"