From e34a82402fed4093d03e91020926f407c21844af Mon Sep 17 00:00:00 2001 From: liangping <18786721@qq.com> Date: Thu, 7 Oct 2021 21:25:33 +0800 Subject: [PATCH] Optimize quotes loading --- src/App.vue | 2 + src/lang/locales/en.json | 5 +- src/libs/data/data.js | 38 ++++- src/libs/fetch.js | 10 ++ src/libs/osmos.js | 11 ++ src/navigation/vertical/index.js | 15 +- src/router/index.js | 20 ++- src/store/chains/index.js | 12 +- src/views/ChartComponentDoughnut.vue | 73 +++++++++ src/views/ChartjsComponentBar.vue | 31 ++++ src/views/OsmosisPools.vue | 110 +++++++++++++ src/views/StakingAddressComponent.vue | 2 +- src/views/WalletAccountDetail.vue | 66 ++------ src/views/WalletAccounts.vue | 225 ++++++++++++++++++++++---- 14 files changed, 533 insertions(+), 87 deletions(-) create mode 100644 src/libs/osmos.js create mode 100644 src/views/ChartComponentDoughnut.vue create mode 100644 src/views/ChartjsComponentBar.vue create mode 100644 src/views/OsmosisPools.vue diff --git a/src/App.vue b/src/App.vue index b63ef411..bbe1a1f7 100644 --- a/src/App.vue +++ b/src/App.vue @@ -94,6 +94,8 @@ export default { store.commit('app/UPDATE_WINDOW_WIDTH', val) }) + store.dispatch('chains/getQuotes') + return { skinClasses, } diff --git a/src/lang/locales/en.json b/src/lang/locales/en.json index 16d5ba6a..0a7c267e 100644 --- a/src/lang/locales/en.json +++ b/src/lang/locales/en.json @@ -15,7 +15,7 @@ "regen": "Regen Network", "secret": "Secret Network", "desmos": "Desmos", - "juno": "Juno Hera", + "juno": "Juno", "certik": "Certik", "sentinel": "Sentinel", @@ -26,7 +26,8 @@ "blockchains": "Blockchains", "uptime": "Uptime", - "gravity": "Gravity", + "gravity": "Gravity(WIP)", + "pools": "Pools(WIP)", "proposal_id": "Proposal ID", "proposal_type": "Proposal Type", diff --git a/src/libs/data/data.js b/src/libs/data/data.js index 175194c3..89db9a97 100644 --- a/src/libs/data/data.js +++ b/src/libs/data/data.js @@ -13,6 +13,7 @@ import dayjs from 'dayjs' import duration from 'dayjs/plugin/duration' import relativeTime from 'dayjs/plugin/relativeTime' import localeData from 'dayjs/plugin/localeData' +import { $themeColors } from '@themeConfig' dayjs.extend(localeData) dayjs.extend(duration) @@ -76,6 +77,41 @@ export function addressEnCode(prefix, pubkey) { return Bech32.encode(prefix, pubkey) } +export function getUserCurrency() { + const currency = localStorage.getItem('currency') + return currency || 'usd' +} + +export function setUserCurrency(currency) { + localStorage.setItem('currency', currency) +} + +export function chartColors() { + const colors = ['#6610f2', '#20c997', '#000000', '#FF0000', + '#800000', '#FFFF00', '#808000', '#00FF00', '#008000', '#00FFFF', + '#008080', '#0000FF', '#000080', '#FF00FF', '#800080'] + return Object.values($themeColors).concat(colors) +} + +export function getUserCurrencySign() { + let s = '' + switch (getUserCurrency()) { + case 'cny': + case 'jpy': + s = '¥' + break + case 'krw': + s = '₩' + break + case 'eur': + s = '€' + break + default: + s = '$' + } + return s +} + export function consensusPubkeyToHexAddress(consensusPubkey) { let raw = null if (typeof consensusPubkey === 'object') { @@ -218,7 +254,7 @@ export function isToken(value) { export function formatTokenDenom(tokenDenom) { if (tokenDenom) { - let denom = tokenDenom.toUpperCase() + let denom = tokenDenom.denom_trace ? tokenDenom.denom_trace.base_denom.toUpperCase() : tokenDenom.toUpperCase() if (denom.charAt(0) === 'U') { denom = denom.substring(1) } else if (denom === 'BASECRO') { diff --git a/src/libs/fetch.js b/src/libs/fetch.js index e42e9ad6..9255ce42 100644 --- a/src/libs/fetch.js +++ b/src/libs/fetch.js @@ -328,6 +328,7 @@ const chainAPI = class ChainFetch { return ChainFetch.fetchCoinMarketCap(`/quote/${symbol}`) } + // Tx Submit async broadcastTx(bodyBytes, config = null) { const txString = toBase64(TxRaw.encode(bodyBytes).finish()) const txRaw = { @@ -365,6 +366,15 @@ const chainAPI = class ChainFetch { // const response = axios.post((config ? config.api : this.config.api) + url, data) return response.json() // parses JSON response into native JavaScript objects } + + // Custom Module + async getOsmosisPools() { + return this.get('/osmosis/gamm/v1beta1/pools') + } + + async getOsmosisIncentivesPools() { + return this.get('/osmosis/pool-incentives/v1beta1/incentivized_pools') + } } export default chainAPI diff --git a/src/libs/osmos.js b/src/libs/osmos.js new file mode 100644 index 00000000..84634c1c --- /dev/null +++ b/src/libs/osmos.js @@ -0,0 +1,11 @@ +import fetch from 'node-fetch' + +export default class OsmosAPI { + static async get(url) { + return fetch(url) + } + + static async getPools() { + return OsmosAPI.get('/osmosis/gamm/v1beta1/pools') + } +} diff --git a/src/navigation/vertical/index.js b/src/navigation/vertical/index.js index 922fb012..7a1d8744 100644 --- a/src/navigation/vertical/index.js +++ b/src/navigation/vertical/index.js @@ -26,11 +26,16 @@ const modules = [ title: 'uptime', route: 'uptime', }, - // { - // scope: 'cosmos', - // title: 'gravity', - // route: 'gravity', - // }, + { + scope: 'cosmos', + title: 'gravity', + route: 'gravity', + }, + { + scope: 'osmosis', + title: 'pools', + route: 'osmosis-pool', + }, ] function processMenu() { diff --git a/src/router/index.js b/src/router/index.js index 39bd09b4..a4a2768f 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -258,8 +258,10 @@ const router = new VueRouter({ ], }, }, + // custom modules for specified chains + // 1. cosmos { - path: '/cosmos/gravity', + path: '/:chain/cosmos/pools', name: 'gravity', component: () => import('@/views/GravityPool.vue'), meta: { @@ -272,6 +274,22 @@ const router = new VueRouter({ ], }, }, + // 2. OSMOSIS + { + path: '/:chain/osmosis/pools', + name: 'osmosis-pool', + component: () => import('@/views/OsmosisPools.vue'), + meta: { + pageTitle: 'Pools', + breadcrumb: [ + { + text: 'Pools', + active: true, + }, + ], + }, + }, + // common modules { path: '/user/login', name: 'login', diff --git a/src/store/chains/index.js b/src/store/chains/index.js index 09f191c7..66556fd0 100644 --- a/src/store/chains/index.js +++ b/src/store/chains/index.js @@ -48,6 +48,7 @@ export default { avatars: {}, height: 0, ibcChannels: {}, + quotes: {}, }, getters: { getchains: state => state.chains, @@ -69,6 +70,15 @@ export default { setChannels(state, { chain, channels }) { state.chains.ibcChannels[chain] = channels }, + setQuotes(state, quotes) { + state.quotes = quotes + }, + }, + actions: { + async getQuotes(context) { + fetch('https://price.ping.pub/quotes').then(data => data.json()).then(data => { + context.commit('setQuotes', data) + }) + }, }, - actions: {}, } diff --git a/src/views/ChartComponentDoughnut.vue b/src/views/ChartComponentDoughnut.vue new file mode 100644 index 00000000..172fbdc9 --- /dev/null +++ b/src/views/ChartComponentDoughnut.vue @@ -0,0 +1,73 @@ + + + diff --git a/src/views/ChartjsComponentBar.vue b/src/views/ChartjsComponentBar.vue new file mode 100644 index 00000000..0fb3cd1d --- /dev/null +++ b/src/views/ChartjsComponentBar.vue @@ -0,0 +1,31 @@ + diff --git a/src/views/OsmosisPools.vue b/src/views/OsmosisPools.vue new file mode 100644 index 00000000..bcb5ece5 --- /dev/null +++ b/src/views/OsmosisPools.vue @@ -0,0 +1,110 @@ + + + diff --git a/src/views/StakingAddressComponent.vue b/src/views/StakingAddressComponent.vue index 54d9e4b1..df08181e 100644 --- a/src/views/StakingAddressComponent.vue +++ b/src/views/StakingAddressComponent.vue @@ -72,7 +72,7 @@
Consensus Public Address
- {{ consensusPubkey }} + {{ consensusPubkey }} - +
{{ formatAmount(token.amount) }} {{ formatDenom(token.denom) }} - ${{ token.currency }} + {{ currency }}{{ token.currency }}
-

Total: ${{ assetTable.currency }}

+

Total: {{ currency }}{{ assetTable.currency }}

 @@ -363,17 +364,16 @@ import Ripple from 'vue-ripple-directive' import VueQr from 'vue-qr' import chainAPI from '@/libs/fetch' import { - formatToken, formatTokenAmount, formatTokenDenom, getStakingValidatorOperator, percent, tokenFormatter, toDay, toDuration, abbrMessage, abbrAddress, + formatToken, formatTokenAmount, formatTokenDenom, getStakingValidatorOperator, percent, tokenFormatter, toDay, toDuration, abbrMessage, abbrAddress, getUserCurrency, getUserCurrencySign, chartColors, } from '@/libs/data' -import { $themeColors } from '@themeConfig' import ObjectFieldComponent from './ObjectFieldComponent.vue' -import ChartjsComponentDoughnutChart from './ChartjsComponentDoughnutChart.vue' import OperationTransferComponent from './OperationTransferComponent.vue' import OperationWithdrawComponent from './OperationWithdrawComponent.vue' import OperationUnbondComponent from './OperationUnbondComponent.vue' import OperationDelegateComponent from './OperationDelegateComponent.vue' import OperationRedelegateComponent from './OperationRedelegateComponent.vue' import OperationTransfer2Component from './OperationTransfer2Component.vue' +import ChartComponentDoughnut from './ChartComponentDoughnut.vue' export default { components: { @@ -398,13 +398,13 @@ export default { // eslint-disable-next-line vue/no-unused-components ToastificationContent, ObjectFieldComponent, - ChartjsComponentDoughnutChart, OperationTransferComponent, OperationWithdrawComponent, OperationDelegateComponent, OperationRedelegateComponent, OperationUnbondComponent, OperationTransfer2Component, + ChartComponentDoughnut, }, directives: { 'b-modal': VBModal, @@ -414,6 +414,7 @@ export default { data() { const { address } = this.$route.params return { + currency: getUserCurrencySign(), selectedValidator: '', totalCurrency: 0, address, @@ -426,39 +427,6 @@ export default { unbonding: [], quotes: {}, transactions: [], - doughnutChart: { - options: { - responsive: true, - maintainAspectRatio: false, - responsiveAnimationDuration: 500, - cutoutPercentage: 60, - legend: { - display: true, - title: { - display: true, - }, - }, - tooltips: { - callbacks: { - label(tooltipItem, data) { - const label = data.datasets[0].labels[tooltipItem.index] || '' - const value = data.datasets[0].data[tooltipItem.index] - const total = data.datasets[0].data.reduce((t, c) => t + c) - const output = ` ${label} : ${percent(value / total)} %` - return output - }, - }, - // Updated default tooltip UI - shadowOffsetX: 1, - shadowOffsetY: 1, - shadowBlur: 8, - // shadowColor: chartColors.tooltipShadow, - // backgroundColor: $themeColors.light, - // titleFontColor: $themeColors.dark, - // bodyFontColor: $themeColors.dark, - }, - }, - }, } }, computed: { @@ -581,7 +549,7 @@ export default { { labels: Object.keys(data), data: Object.values(data), - backgroundColor: [$themeColors.primary, $themeColors.success, $themeColors.warning, $themeColors.danger, $themeColors.info], + backgroundColor: chartColors, borderWidth: 0, pointStyle: 'rectRounded', }, @@ -680,10 +648,10 @@ export default { formatCurrency(amount, denom) { const qty = this.formatAmount(amount) const d2 = this.formatDenom(denom) - const userCurrency = 'USD' - const quote = this.quotes[d2] - if (quote && quote.quote) { - const { price } = quote.quote[userCurrency] + const userCurrency = getUserCurrency() + const quote = this.$store.state.chains.quotes[d2] + if (quote) { + const price = quote[userCurrency] return parseFloat((qty * price).toFixed(2)) } return 0 diff --git a/src/views/WalletAccounts.vue b/src/views/WalletAccounts.vue index ca8ec113..1bf487b5 100644 --- a/src/views/WalletAccounts.vue +++ b/src/views/WalletAccounts.vue @@ -1,5 +1,57 @@