add onchain asset and band protocal

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]
-        fetch(`${chain.api}/blocks/latest`).then(res => res.json()).then(b => {
+        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))
-        })
+            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',
-          thClass: 'text-right',
+          tdClass: 'text-right d-none d-md-block',
+          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>