From 273d382b87ec8b23b14bc7bb9976447b1e20d533 Mon Sep 17 00:00:00 2001 From: liangping <18786721@qq.com> Date: Sun, 28 Nov 2021 20:47:08 +0800 Subject: [PATCH] Finish trade UI --- src/libs/osmos.js | 91 ++-- src/views/OsmosisTrade.vue | 190 ++++--- .../components/KlineTrade/DepositeWindow.vue | 510 +++++++++--------- src/views/components/KlineTrade/PlaceForm.vue | 183 ++++--- 4 files changed, 513 insertions(+), 461 deletions(-) diff --git a/src/libs/osmos.js b/src/libs/osmos.js index f75f8300..cebe89e4 100644 --- a/src/libs/osmos.js +++ b/src/libs/osmos.js @@ -28,33 +28,54 @@ export const poolIds = { 497: true, 498: true, 548: true, - 557: true, - 558: true, - 571: true, - 572: true, + // 557: true, + // 558: true, + // 571: true, + // 572: true, } -export function getPairName(pool, denomTrace, type = 'base') { +export const CoinGeckoMap = { + ATOM: 'cosmos', + OSMO: 'osmosis', + IRIS: 'iris-network', + AKT: 'akash-network', + LUNA: 'terra-luna', + UST: 'terrausd', + KRT: 'terra-krw', + BAND: 'band-protocol', + CRO: 'crypto-com-chain', + KAVA: 'kava', + OKT: 'okexchain', + CTK: 'certik', + XPRT: 'persistence', + REGEN: 'regen', + SCRT: 'secret', + DVPN: 'sentinel', + ION: 'ion', + ROWAN: 'sifchain', + IOV: 'starname', + BTSG: 'bitsong', + NGM: 'e-money', + EEUR: 'e-money-eur', + LIKE: 'likecoin', + JUNO: 'juno-network', + STGZ: 'stargaze-protocol', + VDL: 'vidulum', + XKI: 'ki', + INJ: 'injective-protocol', +} + +export function getPairName(pool, denomTrace, type = 'base', isFormat = true) { const index = type === 'base' ? 0 : 1 if (pool && pool.poolAssets) { - if (pool.poolAssets[index].token.denom.startsWith('ibc')) { - return formatTokenDenom(denomTrace[pool.poolAssets[index].token.denom]?.base_denom) || '-' - } - return formatTokenDenom(pool.poolAssets[index].token.denom) + const denom = pool.poolAssets[index].token.denom.startsWith('ibc') + ? denomTrace[pool.poolAssets[index].token.denom]?.base_denom : pool.poolAssets[index].token.denom + return isFormat ? formatTokenDenom(denom) : denom } return '-' } export default class OsmosAPI { - constructor() { - this.pairs = { - ATOM: { coingecko: 'cosmos', minDenom: 'uatom', ibcDenomHash: 'ibc/1480B8FD20AD5FCAE81EA87584D269547DD4D436843C1D20F15E00EB64743EF4' }, - OSMO: { coingecko: 'osmosis', minDenom: 'uosmo', ibcDenomHash: 'uosmo' }, - IRIS: { coingecko: 'iris-network', minDenom: 'uiris', ibcDenomHash: 'ibc/7C4D60AA95E5A7558B0A364860979CA34B7FF8AAF255B87AF9E879374470CEC0' }, - AKT: { coingecko: 'akash-network', minDenom: 'uakt', ibcDenomHash: 'ibc/7C4D60AA95E5A7558B0A364860979CA34B7FF8AAF255B87AF9E879374470CEC0' }, - } - } - preHandler() { this.version = '' } @@ -65,6 +86,27 @@ export default class OsmosAPI { return fetch(`${this.host}${url}`).then(res => res.json()) } + async getMarketData(from, to, days = 14) { + if (from && to) { + this.exe_time = '' + return Promise.all( + [fetch(`https://api.coingecko.com/api/v3/coins/${from}/market_chart?vs_currency=usd&days=${days}`).then(res => res.json()), + fetch(`https://api.coingecko.com/api/v3/coins/${to}/market_chart?vs_currency=usd&days=${days}`).then(res => res.json())], + ).then(data => { + const output = [] + if (data.length >= 2) { + data[0].prices.forEach((x, i) => { + if (data[1].prices[i]) { + output.push([x[0], (x[1] / data[1].prices[i][1]).toFixed(6)]) + } + }) + } + return { prices: output } + }) + } + return { prices: [] } + } + async getOHCL4Pairs(from, to) { if (from && to) { this.exe_time = '' @@ -72,7 +114,6 @@ export default class OsmosAPI { [fetch(`https://api.coingecko.com/api/v3/coins/${from}/ohlc?vs_currency=usd&days=1`).then(res => res.json()), fetch(`https://api.coingecko.com/api/v3/coins/${to}/ohlc?vs_currency=usd&days=1`).then(res => res.json())], ).then(ohlc => { - console.log(ohlc) const output = [] ohlc[0].forEach((e, i) => { const price = [e[0]] @@ -99,18 +140,6 @@ export default class OsmosAPI { return null } - getCoinGeckoId(symbol) { - return symbol ? this.pairs[symbol.toUpperCase()].coingecko : '' - } - - getIBCDenomHash(symbol) { - return symbol ? this.pairs[symbol.toUpperCase()].ibcDenomHash : '' - } - - getMinDenom(symbol) { - return symbol ? this.pairs[symbol.toUpperCase()].minDenom : '' - } - // Custom Module async getPools() { const tradeable = [] diff --git a/src/views/OsmosisTrade.vue b/src/views/OsmosisTrade.vue index 278f020c..b5cecdb0 100644 --- a/src/views/OsmosisTrade.vue +++ b/src/views/OsmosisTrade.vue @@ -6,72 +6,83 @@ sm="12" > -
- + - {{ base }} / {{ target }} - - - - + + +

+ {{ base }} / {{ target }} +

+ + - - - - - -
- {{ latestPrice }} -
-
- 24h Change -
- {{ changesIn24H }}% + + + + + + + +
+ {{ latestPrice }}
-
-
- 24h High -
-
-
-
- 24h Low -
-
-
-
+
+ 24h Change +
+ {{ changesIn24H }}% +
+
+
+ 24h High +
{{ high24 }}
+
+
+ 24h Low +
{{ low24 }}
+
+ + { const pair = x.poolAssets.map(t => { @@ -155,11 +167,9 @@ export default { return this.getChanges([this.base, this.target]) }, marketChartData() { - console.log(this.marketData) if (this.marketData && this.marketData.prices) { const labels = this.marketData.prices.map(x => x[0]) const data = this.marketData.prices.map(x => x[1]) - console.log('chart data:', data) return { labels, datasets: [ @@ -179,27 +189,13 @@ export default { }, }, created() { - const base = this.$route.params?.base || 'ATOM' - const target = this.$route.params?.target || 'OSMO' - this.init(base, target) - // 所有方法添加到 $http.osmosis - // this.$http.osmosis.getOHCL4Pairs( - // this.$http.osmosis.getCoinGeckoId(base), - // this.$http.osmosis.getCoinGeckoId(target), - // ).then(data => { - // this.klineData = data - // }) - this.$http.getMarketChart(14, 'cosmos').then(res => { - console.log('market data', res) - this.marketData = res - }) + const { poolid } = this.$route.params this.$http.osmosis.getDenomTraces().then(x => { this.denomTrace = x }) this.$http.osmosis.getPools().then(x => { this.pools = x - const id = this.$route.params.poolid || '1' - this.current = this.pools.find(p => p.id === id) || this.pools[0] + this.init(poolid) }) }, beforeRouteUpdate(to, from, next) { @@ -220,7 +216,27 @@ export default { return p1 && p2 ? (p1.usd_24h_change / p2.usd_24h_change).toFixed(2) : '-' }, init(poolid) { + this.high24 = 0 + this.low24 = 0 this.current = this.pools.find(p => p.id === poolid) || this.pools[0] + this.base = getPairName(this.current, this.denomTrace, 'base') + this.target = getPairName(this.current, this.denomTrace, 'target') + this.$http.osmosis.getMarketData(CoinGeckoMap[this.base], CoinGeckoMap[this.target]).then(res => { + this.marketData = res + const start = Date.now() - 8.64e+7 + res.prices.forEach(x => { + if (x[0] > start) { + if (x[1] > this.high24) { + // eslint-disable-next-line prefer-destructuring + this.high24 = x[1] + } + if (x[1] < this.low24 || this.low24 === 0) { + // eslint-disable-next-line prefer-destructuring + this.low24 = x[1] + } + } + }) + }) }, }, } diff --git a/src/views/components/KlineTrade/DepositeWindow.vue b/src/views/components/KlineTrade/DepositeWindow.vue index dd16ad24..681a14d1 100644 --- a/src/views/components/KlineTrade/DepositeWindow.vue +++ b/src/views/components/KlineTrade/DepositeWindow.vue @@ -14,277 +14,266 @@ @show="loadBalance" > @@ -292,7 +281,7 @@ import { ValidationProvider, ValidationObserver } from 'vee-validate' import { BModal, BRow, BCol, BInputGroup, BInputGroupAppend, BFormInput, BAvatar, BFormGroup, BFormSelect, BFormSelectOption, - BForm, BFormRadioGroup, BFormRadio, BInputGroupPrepend, BFormCheckbox, BOverlay, + BForm, BFormRadioGroup, BFormRadio, BInputGroupPrepend, BFormCheckbox, } from 'bootstrap-vue' import { required, email, url, between, alpha, integer, password, min, digits, alphaDash, length, @@ -324,7 +313,6 @@ export default { BFormRadio, BFormCheckbox, vSelect, - BOverlay, ValidationProvider, ValidationObserver, diff --git a/src/views/components/KlineTrade/PlaceForm.vue b/src/views/components/KlineTrade/PlaceForm.vue index 3b541127..4f900c95 100644 --- a/src/views/components/KlineTrade/PlaceForm.vue +++ b/src/views/components/KlineTrade/PlaceForm.vue @@ -1,46 +1,43 @@