zramsay/cosmos-explorer
1
0
Fork 0
forked from cerc-io/cosmos-explorer
Code Pull Requests Actions Activity

add onchain asset and band protocal

Browse Source
This commit is contained in:
liangping 2021-08-09 22:18:27 +08:00
parent bf5a0f7bf3
commit b5d52f1d90
9 changed files with 189 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,6 +9,7 @@
"crypto": "Crypto.com",
"osmosis": "Osmosis",
"okexchain": "OKEX Chain",
"band": "Band Protocal",
"staking": "Staking",
"governance": "Governance",

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

@ -92,12 +92,12 @@ export function formatToken(token) {
return token
}
const COUNT_ABBRS = ['', 'K', 'M', 'B', 'T', 'P', 'E', 'Z', 'Y']
const COUNT_ABBRS = ['', 'K', 'M', 'B', 't', 'q', 's', 'S', 'o', 'n', 'd', 'U', 'D', 'T', 'Qt', 'Qd', 'Sd', 'St']
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) {
if (withAbbr && COUNT_ABBRS[i]) {
result += `${COUNT_ABBRS[i]}`
}
return result

24
src/libs/fetch.js
View File

@ -23,10 +23,16 @@ async function refetchVersion(chain) {
await fetch(`${chain.api}/node_info`)
.then(res => res.json())
.then(json => {
const sdk = json.application_version.build_deps.find(e => e.startsWith('github.com/cosmos/cosmos-sdk'))
const re = /(\d+(\.\d+)*)/i
const version = sdk.match(re)
return version[0]
const { build_deps } = json.application_version
// eslint-disable-next-line camelcase
if (build_deps) {
const sdk = build_deps.find(e => e.startsWith('github.com/cosmos/cosmos-sdk'))
const re = /(\d+(\.\d+)*)/i
const version = sdk.match(re)
// eslint-disable-next-line prefer-destructuring
return version[0]
}
return json.node_info.version
}).catch(() => null)
}
@ -40,6 +46,9 @@ const chainAPI = class ChainFetch {
if (!chain.sdk_version) {
chain.sdk_version = refetchVersion(chain)
}
if (!chain.sdk_version) {
chain.sdk_version = '0.33'
}
this.config = chain
return this.config
}
@ -87,6 +96,13 @@ const chainAPI = class ChainFetch {
return this.get(`/bank/total/${denom}`).then(data => commonProcess(data))
}
async getBankTotals() {
if (compareVersions(this.config.sdk_version, '0.40') < 0) {
return this.get('/supply/total').then(data => commonProcess(data))
}
return this.get('/cosmos/bank/v1beta1/supply').then(data => data.supply)
}
async getStakingPool() {
return this.get('/staking/pool').then(data => new StakingPool().init(commonProcess(data)))
}

5
src/store/chains/band.json Normal file
View File

@ -0,0 +1,5 @@
{
"chain_name": "band",
"api": "https://api-gm-lb.bandchain.org",
"logo": "https://dl.airtable.com/.attachments/472ae99a508e32b4439b416beddd4eb9/c5166f62/band-symbol-blue-bg.75a3ad91.svg"
}

16
src/store/chains/index.js
View File

@ -20,11 +20,17 @@ Object.keys(update).forEach(key => {
fetch(`${chain.api}/node_info`)
.then(res => res.json())
.then(json => {
const sdk = json.application_version.build_deps.find(e => e.startsWith('github.com/cosmos/cosmos-sdk'))
const re = /(\d+(\.\d+)*)/i
const version = sdk.match(re)
// eslint-disable-next-line prefer-destructuring
chain.sdk_version = version[0]
const { build_deps } = json.application_version
// eslint-disable-next-line camelcase
if (build_deps) {
const sdk = build_deps.find(e => e.startsWith('github.com/cosmos/cosmos-sdk'))
const re = /(\d+(\.\d+)*)/i
const version = sdk.match(re)
// eslint-disable-next-line prefer-destructuring
chain.sdk_version = version[0]
} else {
chain.sdk_version = json.node_info.version
}
localStorage.setItem('chains', JSON.stringify(update))
})
})

29
src/views/Home.vue
View File

@ -10,7 +10,7 @@
</b-nav>
<b-link>
<div class="d-flex justify-content-center align-items-center">
<vuexy-logo class="mr-1" />
<vuexy-logo />
<h1
class="text-primary display-4 font-weight-bolder d-none d-md-block"
>
@ -18,14 +18,14 @@
</h1>
</div>
</b-link>
<h2 class="mb-1">
<p class="mb-1">
Ping explorer is not just an explorer but also a wallet and more ... 🛠
</p>
<h2 class="mb-3">
Cosmos Ecosystem Blockchains 🚀
</h2>
<p class="mb-3">
It's not just an explorer but also a wallet and more ... 🛠
</p>
<div>
<b-row class="match-height">
<b-col
@ -82,7 +82,7 @@
<!--/ no result found -->
</b-row>
</div>
<app-footer class="mb-1" />
<!-- <app-footer class="mb-1" /> -->
</div>
</template>
@ -96,7 +96,7 @@ import store from '@/store/index'
import { toDay } from '@/libs/data'
import DarkToggler from '@/@core/layouts/components/app-navbar/components/DarkToggler.vue'
import Locale from '@/@core/layouts/components/app-navbar/components/Locale.vue'
import AppFooter from '@/@core/layouts/components/AppFooter.vue'
// import AppFooter from '@/@core/layouts/components/AppFooter.vue'
export default {
components: {
@ -112,7 +112,6 @@ export default {
VuexyLogo,
DarkToggler,
Locale,
AppFooter,
},
data() {
return {
@ -141,12 +140,14 @@ export default {
fetch() {
Object.keys(this.chains).forEach(k => {
const chain = this.chains[k]
fetch(`${chain.api}/blocks/latest`).then(res => res.json()).then(b => {
if (chain.api) {
fetch(`${chain.api}/blocks/latest`).then(res => res.json()).then(b => {
// console.log(b.block.header)
const { header } = b.block
this.$set(chain, 'height', header.height)
this.$set(chain, 'time', toDay(header.time))
})
const { header } = b.block
this.$set(chain, 'height', header.height)
this.$set(chain, 'time', toDay(header.time))
})
}
})
},
},

9
src/views/Staking.vue
View File

@ -117,8 +117,10 @@ export default {
{
key: 'index',
label: '#',
tdClass: 'text-right d-none d-md-block',
thClass: 'text-right d-none d-md-block',
},
{ key: 'description', label: 'Validator', sortable: true },
{ key: 'description', label: 'Validator' },
{
key: 'tokens',
label: 'Voting Power',
@ -129,10 +131,9 @@ export default {
},
{
key: 'commission',
sortable: true,
formatter: value => `${percent(value.rate)}%`,
tdClass: 'text-right',
thClass: 'text-right',
tdClass: 'text-right d-none d-md-block',
thClass: 'text-right d-none d-md-block',
},
{
key: 'operation',

78
src/views/Summary.vue
View File

@ -5,6 +5,11 @@
<summary-parmeters-component :data="chain" />
</b-col>
</b-row>
<b-row>
<b-col>
<summary-assets-component />
</b-col>
</b-row>
<b-row>
<b-col>
<summary-parmeters-component :data="mint" />
@ -40,12 +45,14 @@ import {
} from '@/libs/data'
import SummaryParmetersComponent from './SummaryParmetersComponent.vue'
import SummaryAssetsComponent from './SummaryAssetsComponent.vue'
export default {
components: {
BRow,
BCol,
SummaryParmetersComponent,
SummaryAssetsComponent,
},
data() {
return {
@ -79,6 +86,77 @@ export default {
title: 'Governance Parameters',
items: [],
},
aaaa: {
options: {
elements: {
rectangle: {
borderWidth: 2,
borderSkipped: 'top',
},
},
tooltips: {
// Updated default tooltip UI
shadowOffsetX: 1,
shadowOffsetY: 1,
shadowBlur: 8,
// shadowColor: chartColors.tooltipShadow,
// backgroundColor: this.$themeColors.light,
// titleFontColor: this.$themeColors.dark,
// bodyFontColor: this.$themeColors.dark,
},
responsive: true,
maintainAspectRatio: false,
responsiveAnimationDuration: 500,
legend: {
display: false,
},
scales: {
xAxes: [
{
display: true,
gridLines: {
// zeroLineColor: chartColors.grid_line_color,
borderColor: 'transparent',
// color: chartColors.grid_line_color,
drawTicks: false,
},
scaleLabel: {
display: true,
},
ticks: {
min: 0,
// fontColor: chartColors.labelColor,
},
},
],
yAxes: [
{
display: true,
gridLines: {
display: false,
},
scaleLabel: {
display: true,
},
ticks: {
// fontColor: chartColors.labelColor,
},
},
],
},
},
data: {
labels: ['MON', 'TUE', 'WED ', 'THU', 'FRI', 'SAT', 'SUN'],
datasets: [
{
data: [710, 350, 470, 580, 230, 460, 120],
// backgroundColor: this.$themeColors.info,
borderColor: 'transparent',
barThickness: 15,
},
],
},
},
}
},
created() {

52
src/views/SummaryAssetsComponent.vue Normal file
View File

@ -0,0 +1,52 @@
<template>
<b-card v-if="assets">
<b-card-title>
Onchain Assets
</b-card-title>
<b-table
:items="assets"
hover
striped
sticky-header="true"
responsive="xs"
/>
</b-card>
</template>
<script>
import { BTable, BCardTitle, BCard } from 'bootstrap-vue'
import { formatNumber } from '@/libs/data'
export default {
components: {
BCard,
BTable,
BCardTitle,
},
data() {
return {
assets: [],
field: [
{
key: 'denom',
tdClass: 'text-nowrap text-truncate overflow-hidden',
},
],
}
},
created() {
this.$http.getBankTotals().then(res => {
const toshow = res.sort()
this.assets = toshow.reverse().map(x => {
const xh = x
const amount = Number(x.amount) / 1000000
xh.abbr = amount > 1 ? formatNumber(amount, true) : amount
return xh
})
})
},
}
</script>
<style>
</style>