finish parameters

src/libs/data/data.js

@@ -20,9 +20,20 @@ export function formatToken(token) {
   return `${(token.amount / 1000000).toFixed()} ${denom}`
 }
 
+const COUNT_ABBRS = ['', 'K', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y']
+
+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) {
+    result += `${COUNT_ABBRS[i]}`
+  }
+  return result
+}
+
 export function tokenFormatter(tokens) {
   if (Array.isArray(tokens)) {
-    return tokens.map(t => formatToken(t))
+    return tokens.map(t => formatToken(t)).join()
   }
   return formatToken(tokens)
 }

src/libs/fetch.js

@@ -1,5 +1,6 @@
 import fetch from 'node-fetch'
 import store from '@/store'
+import compareVersions from 'compare-versions'
 import {
   Proposal, ProposalTally, Proposer, StakingPool, Votes, Deposit,
   Validator, StakingParameters, Block, ValidatorDistribution, StakingDelegation,
@@ -41,6 +42,13 @@ const chainAPI = class ChainFetch {
     return this.get(`/staking/delegators/${delegatorAddr}/delegations/${validatorAddr}`).then(data => StakingDelegation.create(commonProcess(data)))
   }
 
+  async getBankTotal(denom) {
+    if (compareVersions(this.config.sdk_version, '0.40') < 0) {
+      return this.get(`/supply/total/${denom}`).then(data => ({ amount: commonProcess(data), denom }))
+    }
+    return this.get(`/bank/total/${denom}`).then(data => commonProcess(data))
+  }
+
   async getStakingPool() {
     return this.get('/staking/pool').then(data => new StakingPool().init(commonProcess(data)))
   }
@@ -61,6 +69,30 @@ const chainAPI = class ChainFetch {
     return this.get(`/staking/validators/${address}`).then(data => new Validator().init(commonProcess(data)))
   }
 
+  async getSlashingParameters() {
+    return this.get('/slashing/parameters').then(data => commonProcess(data))
+  }
+
+  async getMintParameters() {
+    return this.get('/minting/parameters').then(data => commonProcess(data))
+  }
+
+  async getDistributionParameters() {
+    return this.get('/distribution/parameters').then(data => commonProcess(data))
+  }
+
+  async getGovernanceParameterDeposit() {
+    return this.get('/gov/parameters/deposit').then(data => commonProcess(data))
+  }
+
+  async getGovernanceParameterTallying() {
+    return this.get('/gov/parameters/tallying').then(data => commonProcess(data))
+  }
+
+  async getGovernanceParameterVoting() {
+    return this.get('/gov/parameters/voting').then(data => commonProcess(data))
+  }
+
   async getGovernanceTally(pid, total) {
     return this.get(`/gov/proposals/${pid}/tally`).then(data => new ProposalTally().init(commonProcess(data), total))
   }

src/router/index.js

@@ -31,7 +31,7 @@ const router = new VueRouter({
       path: '/:chain/info',
       name: 'info',
       alias: '/:chain',
-      component: () => import('@/views/Info.vue'),
+      component: () => import('@/views/Summary.vue'),
       meta: {
         pageTitle: 'Home',
         breadcrumb: [

src/views/Info.vue

@@ -1,34 +0,0 @@
-<template>
-  <b-card title="Create Awesome 🙌">
-    <b-card-text>This is your second page. ]] {{ $t('staking') }} </b-card-text>
-    <b-card-text> {{ info }} Chocolate sesame snaps pie carrot cake pastry pie lollipop muffin. Carrot cake dragée chupa chups jujubes. Macaroon liquorice cookie wafer tart marzipan bonbon. Gingerbread jelly-o dragée chocolate.</b-card-text>
-  </b-card>
-</template>
-
-<script>
-import { BCard, BCardText } from 'bootstrap-vue'
-// import fetch from 'node-fetch'
-
-export default {
-  components: {
-    BCard,
-    BCardText,
-  },
-  data() {
-    return {
-      info: 'unloaded',
-    }
-  },
-  mounted() {
-    // this.$http.get('/api/node_info', { crossdomain: true }).then(response => {
-    //   this.info = response.data
-    // }).catch(e => {
-    //   console.log(e)
-    // })
-  },
-}
-</script>
-
-<style>
-
-</style>

src/views/Summary.vue

@@ -0,0 +1,160 @@
+<template>
+  <div>
+    <b-row>
+      <b-col>
+        <summary-parmeters-component :data="chain" />
+      </b-col>
+    </b-row>
+    <b-row>
+      <b-col>
+        <summary-parmeters-component :data="mint" />
+      </b-col>
+    </b-row>
+    <b-row>
+      <b-col>
+        <summary-parmeters-component :data="staking" />
+      </b-col>
+    </b-row>
+    <b-row>
+      <b-col>
+        <summary-parmeters-component :data="gov" />
+      </b-col>
+    </b-row>
+    <b-row>
+      <b-col>
+        <summary-parmeters-component :data="distribution" />
+      </b-col>
+    </b-row>
+    <b-row>
+      <b-col>
+        <summary-parmeters-component :data="slasing" />
+      </b-col>
+    </b-row>
+  </div>
+</template>
+
+<script>
+import { BRow, BCol } from 'bootstrap-vue'
+import { formatNumber, percent, tokenFormatter } from '@/libs/data'
+import dayjs from 'dayjs'
+import duration from 'dayjs/plugin/duration'
+import relativeTime from 'dayjs/plugin/relativeTime'
+
+import localeData from 'dayjs/plugin/localeData'
+import SummaryParmetersComponent from './SummaryParmetersComponent.vue'
+
+dayjs.extend(duration)
+dayjs.extend(relativeTime)
+dayjs.extend(localeData)
+
+export default {
+  components: {
+    BRow,
+    BCol,
+    SummaryParmetersComponent,
+  },
+  data() {
+    return {
+      chain: {
+        title: '',
+        class: 'border-primary',
+        items: [],
+      },
+      staking: {
+        title: 'Staking Parameters',
+        items: [],
+      },
+      distribution: {
+        title: 'Distribution Parameters',
+        items: [],
+      },
+      slasing: {
+        title: 'Slasing Parameters',
+        items: [],
+      },
+      mint: {
+        title: 'Distribution Parameters',
+        items: [],
+      },
+      gov: {
+        title: 'Governance Parameters',
+        items: [],
+      },
+    }
+  },
+  created() {
+    this.$http.getLatestBlock().then(res => {
+      this.chain.items.push({
+        title: res.block.header.chain_id, subtitle: 'chain_id', icon: 'LinkIcon', color: 'light-primary',
+      })
+      this.chain.items.push({
+        title: res.block.header.height, subtitle: 'height', icon: 'BoxIcon', color: 'light-success',
+      })
+    })
+
+    this.$http.getStakingParameters().then(res => {
+      this.staking = this.normalize(res, 'Staking Parameters')
+      Promise.all([this.$http.getStakingPool(), this.$http.getBankTotal(res.bond_denom)])
+        .then(pool => {
+          const nano = 1000000
+          this.chain.items.push({
+            title: `${formatNumber(pool[0].bondedToken / nano, true, 0)} / ${formatNumber(pool[1].amount / nano, true, 0)}`, subtitle: 'bonded_and_supply', icon: 'DollarSignIcon', color: 'light-danger',
+          })
+          this.chain.items.push({
+            title: `${percent(pool[0].bondedToken / pool[1].amount)}%`, subtitle: 'bonded_ratio', icon: 'PercentIcon', color: 'light-warning',
+          })
+        })
+    })
+    this.$http.getSlashingParameters().then(res => {
+      this.slasing = this.normalize(res, 'Slasing Parameters')
+    })
+    this.$http.getMintParameters().then(res => {
+      this.mint = this.normalize(res, 'Minting Parameters')
+    })
+    this.$http.getDistributionParameters().then(res => {
+      this.distribution = this.normalize(res, 'Distribution Parameters')
+    })
+    Promise.all([
+      this.$http.getGovernanceParameterDeposit(),
+      this.$http.getGovernanceParameterTallying(),
+      this.$http.getGovernanceParameterVoting(),
+    ]).then(data => {
+      let items = []
+      data.forEach(item => {
+        const values = this.normalize(item, '').items
+        items = items.concat(values)
+      })
+      this.gov.items = items
+      this.$set(this.gov, 'items', items)
+    })
+  },
+  methods: {
+    normalize(data, title) {
+      const items = this.makeItems(data)
+      return {
+        title,
+        items,
+      }
+    },
+    makeItems(data) {
+      return Object.keys(data).map(k => {
+        if (Array.isArray(data[k])) {
+          return { title: tokenFormatter(data[k]), subtitle: k }
+        }
+        const d = Number(data[k])
+        if (d < 1.01) {
+          return { title: `${percent(d)}%`, subtitle: k }
+        }
+        if (d > 1000000000) {
+          return { title: `${dayjs.duration(d / 1000000).humanize()}`, subtitle: k }
+        }
+        return { title: data[k], subtitle: k }
+      })
+    },
+  },
+}
+</script>
+
+<style>
+
+</style>

src/views/SummaryParmetersComponent.vue

@@ -0,0 +1,77 @@
+<template>
+  <b-card
+    v-if="data"
+    no-body
+    :class="`card-statistics ${data.class} `"
+  >
+    <b-card-header>
+      <b-card-title>{{ data.title }}</b-card-title>
+    </b-card-header>
+    <b-card-body class="statistics-body">
+      <b-row>
+        <b-col
+          v-for="item in data.items"
+          :key="item.icon"
+          xl="3"
+          md="6"
+          sm="6"
+          :class="item.customClass"
+        >
+          <b-media no-body>
+            <b-media-aside
+
+              class="mr-2"
+            >
+              <b-avatar
+                v-if="item.icon"
+                size="48"
+                :variant="item.color"
+              >
+                <feather-icon
+                  size="24"
+                  :icon="item.icon"
+                />
+              </b-avatar>
+            </b-media-aside>
+            <b-media-body class="my-auto">
+              <h4 class="font-weight-bolder mb-0">
+                {{ item.title }}
+              </h4>
+              <b-card-text class="font-small-3 mb-1">
+                {{ item.subtitle }}
+              </b-card-text>
+            </b-media-body>
+          </b-media>
+        </b-col>
+      </b-row>
+    </b-card-body>
+  </b-card>
+</template>
+
+<script>
+import {
+  BCard, BCardHeader, BCardTitle, BCardText, BCardBody, BRow, BCol, BMedia, BMediaAside, BAvatar, BMediaBody,
+} from 'bootstrap-vue'
+
+export default {
+  components: {
+    BRow,
+    BCol,
+    BCard,
+    BCardHeader,
+    BCardTitle,
+    BCardText,
+    BCardBody,
+    BMedia,
+    BAvatar,
+    BMediaAside,
+    BMediaBody,
+  },
+  props: {
+    data: {
+      type: Object,
+      default: () => {},
+    },
+  },
+}
+</script>