add onchain asset and band protocal
This commit is contained in:
liangping
parent
bf5a0f7bf3
commit
b5d52f1d90
@ -9,6 +9,7 @@
|
||||
"crypto": "Crypto.com",
|
||||
"osmosis": "Osmosis",
|
||||
"okexchain": "OKEX Chain",
|
||||
"band": "Band Protocal",
|
||||
|
||||
"staking": "Staking",
|
||||
"governance": "Governance",
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
5
src/store/chains/band.json
Normal 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"
|
||||
}
|
||||
@ -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))
|
||||
})
|
||||
})
|
||||
|
||||
@ -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))
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
|
||||
@ -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',
|
||||
|
||||
@ -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
52
src/views/SummaryAssetsComponent.vue
Normal 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>
|
||||
Loading…
Reference in New Issue
Block a user