forked from LaconicNetwork/cosmos-explorer
finish parameters
This commit is contained in:
liangping
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user