zramsay/cosmos-explorer
1
0
Fork 0
forked from cerc-io/cosmos-explorer
Code Pull Requests Actions 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
README.md
View File

@ -1,3 +1,71 @@
# Vuexy - Vuejs, React, HTML & Laravel Admin Dashboard Template
# Ping Explorer
**Vuexy – Vuejs, React, HTML & Laravel Admin Dashboard Template** – is the most developer friendly & highly customizable Admin Dashboard Template based on Bootstrap 4, Bootstrap Vue & Reactstrap.
Look is a light explorer for Cosmos-based Blockchains. https://ping.pub .
## What is the difference between Look and other explorers?
Look is designed to explore blockchain data as real as possible, therefore there is no cache, no analysis. Look does not cache/save blockchain data on its server. Look only fetch data from Cosmos full node via LCD/RPC endpoints. We call it "Light Explorer".
## Do you want Look to explore your blockchain?
If you want Look to explore your blockchain, pull a request [here](https://github.com/liangping/look/issues), We will explore your chains as soon as possibe. And the most important thing is that Look is free for all public cosmos-based blockchains.
## Why LOOK explorer use official/trusted third party public LCD/rpc server?
We have two considerations: 1, Trust, In decentralize system, everything controled by one single team/orgnization could be risks. So we decided to co-build LOOK explorer with the community. 2. Look explorer will explose handreds and thousands cosmos-based blockchains in the future, it's impossible for our team to run validators or fullnodes for all of those chains.
## Contributors
Developers: @liangping @dingyiming
Data providers: [full list](https://github.com/ping-pub/look/blob/master/hosts.json)
* irisnet.org,
* nylira.net,
* kava.io
*If you don't want to provide data services for LOOK exporer, let us know.*
## Blockchains on LOOK explorer:
* https://ping.pub/cosmos
* https://ping.pub/iris
* https://ping.pub/akash
* https://ping.pub/kava
# LOOK 浏览器
Look是一个轻浏览器，免费为所有的基于Cosmos-SDK开发的区块链提供浏览服务
## Look 和其他区块链浏览器有什么不同？
Look的设计理念是尽可能的保持数据的真实性，所以，他不会在服务器端缓存或者保存任何数据，也不会增加任何分析处理。它仅仅通过LCD/RPC来获取他所需要的所有数据。因此我们叫它“轻浏览器”。
## 你希望Look来浏览你的区块链吗？
如果你需要Look来浏览你的区块链，请在[这里](https://github.com/liangping/look/issues) 提交申请，我们会尽快开通。而且是免费的。
## 为什么LOOK要使用官方或者可信赖的第三方的LCD/RPC服务器?
我们主要是基于以下两个考虑：1，可信，在去中心化的系统里，任何有一个由单个团队或者实体控制的事情都是有风险的，所以我们选择和社区一起来共建LOOK浏览器。2，LOOK浏览器计划在未来支持成百上千条区块链，因此对我们团队来说，不可能为所有这些链去提供一个验证人节点或者全节点。
## 项目贡献者
开发者: @liangping @dingyiming
数据服务方: [列表](https://github.com/ping-pub/look/blob/master/hosts.json)
* irisnet.org,
* nylira.net,
* 01node.com,
* kava.io
*如果你觉得我们滥用了你的服务器资源，请告知我们。*
## LOOK explorer 上的区块链:
* https://ping.pub/cosmos
* https://ping.pub/iris
* https://ping.pub/akash
* https://ping.pub/kava
# Contact Us
Email：18786721#qq.com

1
src/lang/locales/en.json
View File

@ -7,6 +7,7 @@
"akash": "Akash Decloud",
"iris": "Iris Hub",
"crypto": "Crypto.com",
"osmosis": "Osmosis",
"staking": "Staking",
"governance": "Governance",

13
src/libs/data/data.js
View File

@ -39,14 +39,15 @@ export function formatToken(token) {
let denom = token.denom.toUpperCase()
if (denom.charAt(0) === 'U') {
denom = denom.substring(1)
const amount = token.amount / 1000000
if (amount > 10) {
return `${amount.toFixed()} ${denom}`
}
return `${amount} ${denom}`
}
const amount = token.amount / 1000000
if (amount > 10) {
return `${amount.toFixed()} ${denom}`
}
return `${amount} ${denom}`
return `${token.amount} ${denom}`
}
return ''
return token
}
const COUNT_ABBRS = ['', 'K', 'M', 'B', 'T', 'P', 'E', 'Z', 'Y']

51
src/views/Summary.vue
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])

49
src/views/SummaryParmetersComponent.vue
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: () => {},
},
},