add onchain asset and band protocal

src/lang/locales/en.json

@@ -9,6 +9,7 @@
   "crypto": "Crypto.com",
   "osmosis": "Osmosis",
   "okexchain": "OKEX Chain",
+  "band": "Band Protocal",
   
   "staking": "Staking",
   "governance": "Governance",

src/libs/data/data.js

@@ -92,12 +92,12 @@ export function formatToken(token) {
   return token
 }
 
-const COUNT_ABBRS = ['', 'K', 'M', 'B', 'T', 'P', 'E', 'Z', 'Y']
+const COUNT_ABBRS = ['', 'K', 'M', 'B', 't', 'q', 's', 'S', 'o', 'n', 'd', 'U', 'D', 'T', 'Qt', 'Qd', 'Sd', 'St']
 
 export function formatNumber(count, withAbbr = false, decimals = 2) {
   const i = count === 0 ? count : Math.floor(Math.log(count) / Math.log(1000))
   let result = parseFloat((count / (1000 ** i)).toFixed(decimals))
-  if (withAbbr) {
+  if (withAbbr && COUNT_ABBRS[i]) {
     result += `${COUNT_ABBRS[i]}`
   }
   return result

src/libs/fetch.js

@@ -23,10 +23,16 @@ async function refetchVersion(chain) {
   await fetch(`${chain.api}/node_info`)
     .then(res => res.json())
     .then(json => {
-      const sdk = json.application_version.build_deps.find(e => e.startsWith('github.com/cosmos/cosmos-sdk'))
+      const { build_deps } = json.application_version
+      // eslint-disable-next-line camelcase
+      if (build_deps) {
+        const sdk = build_deps.find(e => e.startsWith('github.com/cosmos/cosmos-sdk'))
         const re = /(\d+(\.\d+)*)/i
         const version = sdk.match(re)
+        // eslint-disable-next-line prefer-destructuring
         return version[0]
+      }
+      return json.node_info.version
     }).catch(() => null)
 }
 
@@ -40,6 +46,9 @@ const chainAPI = class ChainFetch {
     if (!chain.sdk_version) {
       chain.sdk_version = refetchVersion(chain)
     }
+    if (!chain.sdk_version) {
+      chain.sdk_version = '0.33'
+    }
     this.config = chain
     return this.config
   }
@@ -87,6 +96,13 @@ const chainAPI = class ChainFetch {
     return this.get(`/bank/total/${denom}`).then(data => commonProcess(data))
   }
 
+  async getBankTotals() {
+    if (compareVersions(this.config.sdk_version, '0.40') < 0) {
+      return this.get('/supply/total').then(data => commonProcess(data))
+    }
+    return this.get('/cosmos/bank/v1beta1/supply').then(data => data.supply)
+  }
+
   async getStakingPool() {
     return this.get('/staking/pool').then(data => new StakingPool().init(commonProcess(data)))
   }

src/store/chains/band.json

@@ -0,0 +1,5 @@
+{
+    "chain_name": "band",
+    "api": "https://api-gm-lb.bandchain.org",
+    "logo": "https://dl.airtable.com/.attachments/472ae99a508e32b4439b416beddd4eb9/c5166f62/band-symbol-blue-bg.75a3ad91.svg"
+}

src/store/chains/index.js

@@ -20,11 +20,17 @@ Object.keys(update).forEach(key => {
   fetch(`${chain.api}/node_info`)
     .then(res => res.json())
     .then(json => {
-      const sdk = json.application_version.build_deps.find(e => e.startsWith('github.com/cosmos/cosmos-sdk'))
+      const { build_deps } = json.application_version
+      // eslint-disable-next-line camelcase
+      if (build_deps) {
+        const sdk = build_deps.find(e => e.startsWith('github.com/cosmos/cosmos-sdk'))
         const re = /(\d+(\.\d+)*)/i
         const version = sdk.match(re)
         // eslint-disable-next-line prefer-destructuring
         chain.sdk_version = version[0]
+      } else {
+        chain.sdk_version = json.node_info.version
+      }
       localStorage.setItem('chains', JSON.stringify(update))
     })
 })

src/views/Home.vue

@@ -10,7 +10,7 @@
     </b-nav>
     <b-link>
       <div class="d-flex justify-content-center align-items-center">
-        <vuexy-logo class="mr-1" />
+        <vuexy-logo />
         <h1
           class="text-primary display-4 font-weight-bolder d-none d-md-block"
         >
@@ -18,14 +18,14 @@
         </h1>
       </div>
     </b-link>
-    <h2 class="mb-1">
+
+    <p class="mb-1">
+      Ping explorer is not just an explorer but also a wallet and more ... 🛠
+    </p>
+    <h2 class="mb-3">
       Cosmos Ecosystem Blockchains 🚀
     </h2>
 
-    <p class="mb-3">
-      It's not just an explorer but also a wallet and more ... 🛠
-    </p>
-
     <div>
       <b-row class="match-height">
         <b-col
@@ -82,7 +82,7 @@
         <!--/ no result found -->
       </b-row>
     </div>
-    <app-footer class="mb-1" />
+    <!-- <app-footer class="mb-1" /> -->
   </div>
 </template>
 
@@ -96,7 +96,7 @@ import store from '@/store/index'
 import { toDay } from '@/libs/data'
 import DarkToggler from '@/@core/layouts/components/app-navbar/components/DarkToggler.vue'
 import Locale from '@/@core/layouts/components/app-navbar/components/Locale.vue'
-import AppFooter from '@/@core/layouts/components/AppFooter.vue'
+// import AppFooter from '@/@core/layouts/components/AppFooter.vue'
 
 export default {
   components: {
@@ -112,7 +112,6 @@ export default {
     VuexyLogo,
     DarkToggler,
     Locale,
-    AppFooter,
   },
   data() {
     return {
@@ -141,12 +140,14 @@ export default {
     fetch() {
       Object.keys(this.chains).forEach(k => {
         const chain = this.chains[k]
+        if (chain.api) {
           fetch(`${chain.api}/blocks/latest`).then(res => res.json()).then(b => {
           // console.log(b.block.header)
             const { header } = b.block
             this.$set(chain, 'height', header.height)
             this.$set(chain, 'time', toDay(header.time))
           })
+        }
       })
     },
   },

src/views/Staking.vue

@@ -117,8 +117,10 @@ export default {
         {
           key: 'index',
           label: '#',
+          tdClass: 'text-right d-none d-md-block',
+          thClass: 'text-right d-none d-md-block',
         },
-        { key: 'description', label: 'Validator', sortable: true },
+        { key: 'description', label: 'Validator' },
         {
           key: 'tokens',
           label: 'Voting Power',
@@ -129,10 +131,9 @@ export default {
         },
         {
           key: 'commission',
-          sortable: true,
           formatter: value => `${percent(value.rate)}%`,
-          tdClass: 'text-right',
+          tdClass: 'text-right d-none d-md-block',
-          thClass: 'text-right',
+          thClass: 'text-right d-none d-md-block',
         },
         {
           key: 'operation',

src/views/Summary.vue

@@ -5,6 +5,11 @@
         <summary-parmeters-component :data="chain" />
       </b-col>
     </b-row>
+    <b-row>
+      <b-col>
+        <summary-assets-component />
+      </b-col>
+    </b-row>
     <b-row>
       <b-col>
         <summary-parmeters-component :data="mint" />
@@ -40,12 +45,14 @@ import {
 } from '@/libs/data'
 
 import SummaryParmetersComponent from './SummaryParmetersComponent.vue'
+import SummaryAssetsComponent from './SummaryAssetsComponent.vue'
 
 export default {
   components: {
     BRow,
     BCol,
     SummaryParmetersComponent,
+    SummaryAssetsComponent,
   },
   data() {
     return {
@@ -79,6 +86,77 @@ export default {
         title: 'Governance Parameters',
         items: [],
       },
+      aaaa: {
+        options: {
+          elements: {
+            rectangle: {
+              borderWidth: 2,
+              borderSkipped: 'top',
+            },
+          },
+          tooltips: {
+            // Updated default tooltip UI
+            shadowOffsetX: 1,
+            shadowOffsetY: 1,
+            shadowBlur: 8,
+            // shadowColor: chartColors.tooltipShadow,
+            // backgroundColor: this.$themeColors.light,
+            // titleFontColor: this.$themeColors.dark,
+            // bodyFontColor: this.$themeColors.dark,
+          },
+          responsive: true,
+          maintainAspectRatio: false,
+          responsiveAnimationDuration: 500,
+          legend: {
+            display: false,
+          },
+          scales: {
+            xAxes: [
+              {
+                display: true,
+                gridLines: {
+                  // zeroLineColor: chartColors.grid_line_color,
+                  borderColor: 'transparent',
+                  // color: chartColors.grid_line_color,
+                  drawTicks: false,
+                },
+                scaleLabel: {
+                  display: true,
+                },
+                ticks: {
+                  min: 0,
+                  // fontColor: chartColors.labelColor,
+                },
+              },
+            ],
+            yAxes: [
+              {
+                display: true,
+                gridLines: {
+                  display: false,
+                },
+                scaleLabel: {
+                  display: true,
+                },
+                ticks: {
+                  // fontColor: chartColors.labelColor,
+                },
+              },
+            ],
+          },
+        },
+        data: {
+          labels: ['MON', 'TUE', 'WED ', 'THU', 'FRI', 'SAT', 'SUN'],
+          datasets: [
+            {
+              data: [710, 350, 470, 580, 230, 460, 120],
+              // backgroundColor: this.$themeColors.info,
+              borderColor: 'transparent',
+              barThickness: 15,
+            },
+          ],
+        },
+      },
     }
   },
   created() {

src/views/SummaryAssetsComponent.vue

@@ -0,0 +1,52 @@
+<template>
+  <b-card v-if="assets">
+    <b-card-title>
+      Onchain Assets
+    </b-card-title>
+    <b-table
+      :items="assets"
+      hover
+      striped
+      sticky-header="true"
+      responsive="xs"
+    />
+  </b-card>
+</template>
+
+<script>
+import { BTable, BCardTitle, BCard } from 'bootstrap-vue'
+import { formatNumber } from '@/libs/data'
+
+export default {
+  components: {
+    BCard,
+    BTable,
+    BCardTitle,
+  },
+  data() {
+    return {
+      assets: [],
+      field: [
+        {
+          key: 'denom',
+          tdClass: 'text-nowrap text-truncate overflow-hidden',
+        },
+      ],
+    }
+  },
+  created() {
+    this.$http.getBankTotals().then(res => {
+      const toshow = res.sort()
+      this.assets = toshow.reverse().map(x => {
+        const xh = x
+        const amount = Number(x.amount) / 1000000
+        xh.abbr = amount > 1 ? formatNumber(amount, true) : amount
+        return xh
+      })
+    })
+  },
+}
+</script>
+
+<style>
+</style>