From b5d52f1d9004cd8c3670db45fef988013f5068be Mon Sep 17 00:00:00 2001 From: liangping <18786721@qq.com> Date: Mon, 9 Aug 2021 22:18:27 +0800 Subject: [PATCH] add onchain asset and band protocal --- src/lang/locales/en.json | 1 + src/libs/data/data.js | 4 +- src/libs/fetch.js | 24 +++++++-- src/store/chains/band.json | 5 ++ src/store/chains/index.js | 16 ++++-- src/views/Home.vue | 29 ++++++----- src/views/Staking.vue | 9 ++-- src/views/Summary.vue | 78 ++++++++++++++++++++++++++++ src/views/SummaryAssetsComponent.vue | 52 +++++++++++++++++++ 9 files changed, 189 insertions(+), 29 deletions(-) create mode 100644 src/store/chains/band.json create mode 100644 src/views/SummaryAssetsComponent.vue diff --git a/src/lang/locales/en.json b/src/lang/locales/en.json index 2c931a12..7d87bf06 100644 --- a/src/lang/locales/en.json +++ b/src/lang/locales/en.json @@ -9,6 +9,7 @@ "crypto": "Crypto.com", "osmosis": "Osmosis", "okexchain": "OKEX Chain", + "band": "Band Protocal", "staking": "Staking", "governance": "Governance", diff --git a/src/libs/data/data.js b/src/libs/data/data.js index bf1cd07d..b07a9c4e 100644 --- a/src/libs/data/data.js +++ b/src/libs/data/data.js @@ -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 diff --git a/src/libs/fetch.js b/src/libs/fetch.js index 9b5aadc1..f6b5386e 100644 --- a/src/libs/fetch.js +++ b/src/libs/fetch.js @@ -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))) } diff --git a/src/store/chains/band.json b/src/store/chains/band.json new file mode 100644 index 00000000..537bfa81 --- /dev/null +++ b/src/store/chains/band.json @@ -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" +} \ No newline at end of file diff --git a/src/store/chains/index.js b/src/store/chains/index.js index 7a263a43..de696148 100644 --- a/src/store/chains/index.js +++ b/src/store/chains/index.js @@ -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)) }) }) diff --git a/src/views/Home.vue b/src/views/Home.vue index 3842ec22..208ae296 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -10,7 +10,7 @@
- +

@@ -18,14 +18,14 @@

-

+ +

+ Ping explorer is not just an explorer but also a wallet and more ... 🛠 +

+

Cosmos Ecosystem Blockchains 🚀

-

- It's not just an explorer but also a wallet and more ... 🛠 -

-
- + @@ -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)) + }) + } }) }, }, diff --git a/src/views/Staking.vue b/src/views/Staking.vue index 9e57a7ba..51fe1262 100644 --- a/src/views/Staking.vue +++ b/src/views/Staking.vue @@ -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', diff --git a/src/views/Summary.vue b/src/views/Summary.vue index a9f7b197..cef456b1 100644 --- a/src/views/Summary.vue +++ b/src/views/Summary.vue @@ -5,6 +5,11 @@ + + + + + @@ -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() { diff --git a/src/views/SummaryAssetsComponent.vue b/src/views/SummaryAssetsComponent.vue new file mode 100644 index 00000000..b0075186 --- /dev/null +++ b/src/views/SummaryAssetsComponent.vue @@ -0,0 +1,52 @@ + + + + +