Inprove chain home ui
This commit is contained in:
liangping
parent
036273b6a5
commit
505bc90830
72
README.md
72
README.md
@ -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
|
||||
@ -7,6 +7,7 @@
|
||||
"akash": "Akash Decloud",
|
||||
"iris": "Iris Hub",
|
||||
"crypto": "Crypto.com",
|
||||
"osmosis": "Osmosis",
|
||||
|
||||
"staking": "Staking",
|
||||
"governance": "Governance",
|
||||
|
||||
@ -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}`
|
||||
}
|
||||
return ''
|
||||
return `${token.amount} ${denom}`
|
||||
}
|
||||
return token
|
||||
}
|
||||
|
||||
const COUNT_ABBRS = ['', 'K', 'M', 'B', 'T', 'P', 'E', 'Z', 'Y']
|
||||
|
||||
@ -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')
|
||||
})
|
||||
|
||||
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])
|
||||
|
||||
@ -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: () => {},
|
||||
},
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user