From 8e37979b88db07396b7314da3b76e0ba286934e3 Mon Sep 17 00:00:00 2001 From: liangping <18786721@qq.com> Date: Thu, 25 Nov 2021 19:20:58 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=E9=87=8D=E6=96=B0=E6=A2=B3=E7=90=86?= =?UTF-8?q?=E6=B5=81=E7=A8=8B=EF=BC=8C=E6=9B=B4=E5=A5=BD=E9=9B=86=E6=88=90?= =?UTF-8?q?=E4=BA=A4=E6=98=93=E6=89=80=E6=8E=A5=E5=8F=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/libs/osmos.js | 61 ++++++++++++++- src/router/index.js | 10 ++- src/views/OsmosisTrade.vue | 74 +++++++++++++------ src/views/components/KlineTrade/Place.vue | 16 ++-- src/views/components/KlineTrade/PlaceForm.vue | 53 +++++++------ 5 files changed, 154 insertions(+), 60 deletions(-) diff --git a/src/libs/osmos.js b/src/libs/osmos.js index 0a294eb2..b8852b02 100644 --- a/src/libs/osmos.js +++ b/src/libs/osmos.js @@ -5,8 +5,45 @@ * @LastEditors: dingyiming * @LastEditTime: 2021-11-23 11:19:51 */ +import { sha256 } from '@cosmjs/crypto' +import { toHex } from '@cosmjs/encoding' import fetch from 'node-fetch' -import { getLocalChains } from './data/data' +import { formatTokenDenom, getLocalChains } from './data/data' + +export const poolIds = { + 1: true, + 2: true, + 3: true, + 4: true, + 5: true, + 6: true, + 7: true, + 8: true, + 9: true, + 10: true, + 13: true, + 15: true, + 461: true, + 482: true, + 497: true, + 498: true, + 548: true, + 557: true, + 558: true, + 571: true, + 572: true, +} + +export function getPairName(pool, denomTrace, type = 'base') { + 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) + } + return '-' +} export default class OsmosAPI { constructor() { @@ -76,7 +113,27 @@ export default class OsmosAPI { // Custom Module async getPools() { - return this.get('/osmosis/gamm/v1beta1/pools?pagination.limit=700') + const tradeable = [] + Object.keys(poolIds).forEach(k => { + if (poolIds[k]) { + tradeable.push(k) + } + }) + return this.get('/osmosis/gamm/v1beta1/pools?pagination.limit=700').then(res => { + const output = res.pools.filter(x => tradeable.includes(x.id)) + return output + }) + } + + async getDenomTraces() { + return this.get('/ibc/applications/transfer/v1beta1/denom_traces?pagination.limit=300').then(x => { + const combined = {} + x.denom_traces.forEach(item => { + const k = 'ibc/'.concat(toHex(sha256(new TextEncoder('utf-8').encode(`${item.path}/${item.base_denom}`))).toUpperCase()) + combined[k] = item + }) + return combined + }) } async getIncentivesPools() { diff --git a/src/router/index.js b/src/router/index.js index a5de62d1..5cce269c 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -295,14 +295,18 @@ const router = new VueRouter({ }, // 2. OSMOSIS { - path: '/:chain/osmosis/trade/:base?/:target?', + path: '/:chain/osmosis/trade/:poolid?', name: 'osmosis-trade', component: () => import('@/views/OsmosisTrade.vue'), meta: { - pageTitle: 'Trade', + pageTitle: 'Classic Trade', breadcrumb: [ { - text: 'Trade', + text: 'DEX', + active: true, + }, + { + text: 'Classic Trade', active: true, }, ], diff --git a/src/views/OsmosisTrade.vue b/src/views/OsmosisTrade.vue index f6c6a09e..3547bd66 100644 --- a/src/views/OsmosisTrade.vue +++ b/src/views/OsmosisTrade.vue @@ -36,9 +36,9 @@ @@ -70,8 +70,8 @@ > @@ -83,6 +83,7 @@ import { BRow, BCol, BCard, BButton, BPopover, BTable, } from 'bootstrap-vue' +import { getPairName } from '@/libs/osmos' import Place from './components/KlineTrade/Place.vue' import Kline from './components/kline/index.vue' @@ -100,19 +101,41 @@ export default { data() { return { show: false, - base: 'ATOM', - target: 'OSMO', - pairs: [ - { pair: 'ATOM/OSMO' }, - { pair: 'IRIS/OSMO' }, - { pair: 'AKT/OSMO' }, - { pair: 'ATOM/OSMO' }, - { pair: 'ATOM/OSMO' }, - ], + // pairs: [ + // { pair: 'ATOM/OSMO' }, + // { pair: 'IRIS/OSMO' }, + // { pair: 'AKT/OSMO' }, + // { pair: 'ATOM/OSMO' }, + // { pair: 'ATOM/OSMO' }, + // ], + pools: [], + current: {}, + denomTrace: [], klineData: [], } }, computed: { + base() { + return getPairName(this.current, this.denomTrace, 'base') + }, + target() { + return getPairName(this.current, this.denomTrace, 'target') + }, + pairs() { + const pairs = this.pools.map(x => { + const x2 = { + id: x.id, + pair: x.poolAssets.map(t => { + if (t.token.denom.startsWith('ibc/')) { + return (this.denomTrace[t.token.denom] ? this.denomTrace[t.token.denom].base_denom : ' ') + } + return t.token.denom + }), + } + return x2 + }) + return pairs + }, latestPrice() { const p1 = this.$store.state.chains.quotes[this.base] const p2 = this.$store.state.chains.quotes[this.target] @@ -131,22 +154,27 @@ export default { this.$http.osmosis.getOHCL4Pairs( this.$http.osmosis.getCoinGeckoId(base), this.$http.osmosis.getCoinGeckoId(target), - ) - .then(data => { - this.klineData = data - }) + ).then(data => { + this.klineData = data + }) + 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] + }) }, beforeRouteUpdate(to, from, next) { - const { base, target } = to.params - this.init(base, target) - console.log(base, target) + const { poolid } = to.params + this.init(poolid) next() // } }, methods: { - init(base, target) { - this.base = base || 'ATOM' - this.target = target || 'OSMO' + init(poolid) { + this.current = this.pools.find(p => p.id === poolid) || this.pools[0] }, }, } diff --git a/src/views/components/KlineTrade/Place.vue b/src/views/components/KlineTrade/Place.vue index 3c923bdd..0865a7f5 100644 --- a/src/views/components/KlineTrade/Place.vue +++ b/src/views/components/KlineTrade/Place.vue @@ -18,8 +18,8 @@ @@ -37,13 +37,13 @@ export default { PlaceForm, }, props: { - base: { - type: String, - required: true, + pool: { + type: Object, + default: () => {}, }, - target: { - type: String, - required: true, + denomTrace: { + type: [Array, Object], + default: () => [], }, }, data: () => ({ diff --git a/src/views/components/KlineTrade/PlaceForm.vue b/src/views/components/KlineTrade/PlaceForm.vue index cfd9f288..e82b370c 100644 --- a/src/views/components/KlineTrade/PlaceForm.vue +++ b/src/views/components/KlineTrade/PlaceForm.vue @@ -141,6 +141,7 @@ import { } from 'bootstrap-vue' import FeatherIcon from '@/@core/components/feather-icon/FeatherIcon.vue' import { /* abbrAddress, */ formatTokenAmount, getLocalAccounts } from '@/libs/data' +import { getPairName } from '@/libs/osmos' import DepositeWindow from './DepositeWindow.vue' export default { @@ -160,13 +161,13 @@ export default { type: Number, required: true, }, - base: { - type: String, - required: true, + pool: { + type: Object, + default: () => {}, }, - target: { - type: String, - required: true, + denomTrace: { + type: [Array, Object], + default: () => [], }, }, data() { @@ -176,11 +177,18 @@ export default { total: 0, slippage: 0.05, marks: [0, 0.01, 0.025, 0.05], - baseAmount: 0, - targetAmount: 0, + balance: {}, + // base: '', + // target: '', } }, computed: { + base() { + return getPairName(this.pool, this.denomTrace, 'base') + }, + target() { + return getPairName(this.pool, this.denomTrace, 'target') + }, price() { const p1 = this.$store.state.chains.quotes[this.base] const p2 = this.$store.state.chains.quotes[this.target] @@ -190,28 +198,25 @@ export default { return '' }, available() { - const denom = this.$http.osmosis.getMinDenom(this.type === 0 ? this.base : this.target) - return formatTokenAmount(this.type === 0 ? this.targetAmount : this.baseAmount, 2, denom) + if (this.pool && this.pool.poolAssets) { + const mode = this.type === 1 ? 0 : 1 + const { denom } = this.pool.poolAssets[mode].token + let amount = 0 + this.balance.forEach(x => { + if (x.denom === denom) { + amount = x.amount + } + }) + return formatTokenAmount(amount, 6, denom) + } + return 0 }, }, created() { this.initialAddress() - console.log('address', this.address) this.$http.getBankBalances(this.address).then(res => { - console.log(res, this.base, this.target) if (res && res.length > 0) { - const baseHash = this.$http.osmosis.getIBCDenomHash(this.base) - const targetHash = this.$http.osmosis.getIBCDenomHash(this.target) - res.forEach(token => { - console.log('token:', token) - if (token.denom === baseHash) { - this.baseAmount = token.amount - } - if (token.denom === targetHash) { - this.targetAmount = token.amount - } - }) - console.log(this.baseAmount, this.targetAmount) + this.balance = res } }) }, From ee50dd70c0d758ce74cf8c3832fea61e3d00eff8 Mon Sep 17 00:00:00 2001 From: liangping <18786721@qq.com> Date: Thu, 25 Nov 2021 20:41:47 +0800 Subject: [PATCH 2/2] load price for key pairs --- src/views/OsmosisTrade.vue | 70 ++- .../components/KlineTrade/DepositeWindow.vue | 524 +++++++++--------- 2 files changed, 303 insertions(+), 291 deletions(-) diff --git a/src/views/OsmosisTrade.vue b/src/views/OsmosisTrade.vue index 3547bd66..60c8cb1c 100644 --- a/src/views/OsmosisTrade.vue +++ b/src/views/OsmosisTrade.vue @@ -8,7 +8,7 @@
- + +
@@ -84,6 +92,7 @@ import { BRow, BCol, BCard, BButton, BPopover, BTable, } from 'bootstrap-vue' import { getPairName } from '@/libs/osmos' +import { formatTokenDenom } from '@/libs/data' import Place from './components/KlineTrade/Place.vue' import Kline from './components/kline/index.vue' @@ -101,13 +110,6 @@ export default { data() { return { show: false, - // pairs: [ - // { pair: 'ATOM/OSMO' }, - // { pair: 'IRIS/OSMO' }, - // { pair: 'AKT/OSMO' }, - // { pair: 'ATOM/OSMO' }, - // { pair: 'ATOM/OSMO' }, - // ], pools: [], current: {}, denomTrace: [], @@ -123,28 +125,26 @@ export default { }, pairs() { const pairs = this.pools.map(x => { - const x2 = { + const pair = x.poolAssets.map(t => { + if (t.token.denom.startsWith('ibc/')) { + return formatTokenDenom(this.denomTrace[t.token.denom] ? this.denomTrace[t.token.denom].base_denom : ' ') + } + return formatTokenDenom(t.token.denom) + }) + return { id: x.id, - pair: x.poolAssets.map(t => { - if (t.token.denom.startsWith('ibc/')) { - return (this.denomTrace[t.token.denom] ? this.denomTrace[t.token.denom].base_denom : ' ') - } - return t.token.denom - }), + pair, + price: this.getPrice(pair), + change: this.getChanges(pair), } - return x2 }) return pairs }, latestPrice() { - const p1 = this.$store.state.chains.quotes[this.base] - const p2 = this.$store.state.chains.quotes[this.target] - return p1 && p2 ? (p1.usd / p2.usd).toFixed(4) : '-' + return this.getPrice([this.base, this.target]) }, changesIn24H() { - const p1 = this.$store.state.chains.quotes[this.base] - const p2 = this.$store.state.chains.quotes[this.target] - return p1 && p2 ? (p1.usd_24h_change / p2.usd_24h_change).toFixed(2) : '-' + return this.getChanges([this.base, this.target]) }, }, created() { @@ -173,6 +173,16 @@ export default { // } }, methods: { + getPrice(symbol) { + const p1 = this.$store.state.chains.quotes[symbol[0]] + const p2 = this.$store.state.chains.quotes[symbol[1]] + return p1 && p2 ? (p1.usd / p2.usd).toFixed(4) : '-' + }, + getChanges(symbol) { + const p1 = this.$store.state.chains.quotes[symbol[0]] + const p2 = this.$store.state.chains.quotes[symbol[1]] + return p1 && p2 ? (p1.usd_24h_change / p2.usd_24h_change).toFixed(2) : '-' + }, init(poolid) { this.current = this.pools.find(p => p.id === poolid) || this.pools[0] }, diff --git a/src/views/components/KlineTrade/DepositeWindow.vue b/src/views/components/KlineTrade/DepositeWindow.vue index 437b8eaf..dd16ad24 100644 --- a/src/views/components/KlineTrade/DepositeWindow.vue +++ b/src/views/components/KlineTrade/DepositeWindow.vue @@ -12,277 +12,279 @@ @hidden="resetModal" @ok="handleOk" @show="loadBalance" - > - - - - - - - - - - - - - - - - - - - - - - - {{ format(item) }} - - - {{ errors[0] }} - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + {{ format(item) }} + + + {{ errors[0] }} + + + + + + + + + + + + {{ printDenom() }} + + + {{ errors[0] }} + + + + + + + + + + {{ errors[0] }} + + + + + + + + + + + + {{ errors[0] }} + + + + + + + + + + + + + + + {{ errors[0] }} + + + + + + + Advance + + + + + + + + + - - {{ printDenom() }} - - - {{ errors[0] }} - - - - - - - - {{ errors[0] }} + + + + + - - {{ errors[0] }} - - - - - - - - - - - - {{ errors[0] }} - - - - - - - - - - - - - - - {{ errors[0] }} - - - - - - - Advance - - - - - - - - - - {{ errors[0] }} - - - - - - - - {{ errors[0] }} - - - - - - - - - - - + {{ errors[0] }} + + + + + + + + + + - Keplr - - - Ledger(USB) - - - Ledger(Bluetooth) - - - {{ errors[0] }} - - - - - - - {{ error }} - + + Keplr + + + Ledger(USB) + + + Ledger(Bluetooth) + + + {{ errors[0] }} + + + + + + + {{ error }} +