deep-stack/cosmos-explorer
4
0
Fork 0
forked from LaconicNetwork/cosmos-explorer
Code Pull Requests Activity

Inprove chain home ui

Browse Source
This commit is contained in:
liangping
2021-08-06 21:21:08 +08:00
parent 036273b6a5
commit 505bc90830
5 changed files with 153 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/Summary.vue
+31 -20
View File
@@ -35,7 +35,9 @@
<script>
import { BRow, BCol } from 'bootstrap-vue'
import { formatNumber, percent, tokenFormatter } from '@/libs/data'
import {
formatNumber, isToken, percent, tokenFormatter,
} from '@/libs/data'
import dayjs from 'dayjs'
import duration from 'dayjs/plugin/duration'
import relativeTime from 'dayjs/plugin/relativeTime'
@@ -58,7 +60,12 @@ export default {
chain: {
title: '',
class: 'border-primary',
items: [],
items: [
{ subtitle: 'chain_id', icon: 'LinkIcon', color: 'light-primary' },
{ subtitle: 'height', icon: 'BoxIcon', color: 'light-success' },
{ subtitle: 'bonded_and_supply', icon: 'DollarSignIcon', color: 'light-danger' },
{ subtitle: 'bonded_ratio', icon: 'PercentIcon', color: 'light-warning' },
],
},
staking: {
title: 'Staking Parameters',
@@ -73,8 +80,8 @@ export default {
items: [],
},
mint: {
title: 'Distribution Parameters',
items: [],
title: 'Mint Parameters',
items: null,
},
gov: {
title: 'Governance Parameters',
@@ -84,12 +91,11 @@ export default {
},
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',
})
const chainIndex = this.chain.items.findIndex(x => x.subtitle === 'chain_id')
const height = this.chain.items.findIndex(x => x.subtitle === 'height')
this.$set(this.chain.items[chainIndex], 'title', res.block.header.chain_id)
this.$set(this.chain.items[height], 'title', res.block.header.height)
})
this.$http.getStakingParameters().then(res => {
@@ -97,20 +103,25 @@ export default {
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',
})
const bondedAndSupply = this.chain.items.findIndex(x => x.subtitle === 'bonded_and_supply')
this.$set(this.chain.items[bondedAndSupply], 'title', `${formatNumber(pool[0].bondedToken / nano, true, 1)} / ${formatNumber(pool[1].amount / nano, true, 1)}`)
const bondedRatio = this.chain.items.findIndex(x => x.subtitle === 'bonded_ratio')
this.$set(this.chain.items[bondedRatio], 'title', `${percent(pool[0].bondedToken / pool[1].amount)}%`)
})
})
this.$http.getSlashingParameters().then(res => {
this.slasing = this.normalize(res, 'Slasing Parameters')
})
this.$http.getMintParameters().then(res => {
this.mint = this.normalize(res, 'Minting Parameters')
})
const selected = this.$route.params.chain
if (selected === 'iris') {
this.mint = null
} else {
this.$http.getMintParameters().then(res => {
this.mint = this.normalize(res, 'Minting Parameters')
})
}
this.$http.getDistributionParameters().then(res => {
this.distribution = this.normalize(res, 'Distribution Parameters')
})
@@ -138,7 +149,7 @@ export default {
},
makeItems(data) {
return Object.keys(data).map(k => {
if (Array.isArray(data[k])) {
if (isToken(data[k])) {
return { title: tokenFormatter(data[k]), subtitle: k }
}
const d = Number(data[k])
src/views/SummaryParmetersComponent.vue
+44 -5
View File
@@ -17,9 +17,42 @@
sm="6"
:class="item.customClass"
>
<b-media no-body>
<div
v-if="typeof item.title ==='object'"
>
<b-button
:id="item.subtitle"
variant="outline-primary"
class="ml-2"
size="sm"
>
{{ item.subtitle }}
</b-button>
<b-popover
:target="item.subtitle"
variant="primary"
triggers="hover"
placement="bottom"
>
<template #title>
<span>{{ item.subtitle }}</span>
</template>
<span>
<array-field-component
v-if="Array.isArray(item.title)"
:tablefield="item.title"
/>
<object-field-component
v-else
:tablefield="item.title"
/></span>
</b-popover>
</div>
<b-media
v-else
no-body
>
<b-media-aside
class="mr-2"
>
<b-avatar
@@ -35,7 +68,7 @@
</b-media-aside>
<b-media-body class="my-auto">
<h4 class="font-weight-bolder mb-0">
{{ item.title }}
{{ item.title || '-' }}
</h4>
<b-card-text class="font-small-3 mb-1">
{{ item.subtitle }}
@@ -50,8 +83,10 @@
<script>
import {
BCard, BCardHeader, BCardTitle, BCardText, BCardBody, BRow, BCol, BMedia, BMediaAside, BAvatar, BMediaBody,
BCard, BCardHeader, BCardTitle, BCardText, BCardBody, BRow, BCol, BMedia, BMediaAside, BAvatar, BMediaBody, BPopover, BButton,
} from 'bootstrap-vue'
import ObjectFieldComponent from './ObjectFieldComponent.vue'
import ArrayFieldComponent from './ArrayFieldComponent.vue'
export default {
components: {
@@ -66,10 +101,14 @@ export default {
BAvatar,
BMediaAside,
BMediaBody,
BPopover,
BButton,
ObjectFieldComponent,
ArrayFieldComponent,
},
props: {
data: {
type: Object,
type: [Object, Array],
default: () => {},
},
},