From 4044df4cf62098f26c35e47b830cc19eefcaa195 Mon Sep 17 00:00:00 2001 From: liangping <18786721@qq.com> Date: Wed, 24 Nov 2021 16:33:25 +0800 Subject: [PATCH] add deposit window --- src/libs/osmos.js | 86 +-- .../components/KlineTrade/DepositeWindow.vue | 572 ++++++++++++++++++ src/views/components/KlineTrade/PlaceForm.vue | 92 ++- 3 files changed, 690 insertions(+), 60 deletions(-) create mode 100644 src/views/components/KlineTrade/DepositeWindow.vue diff --git a/src/libs/osmos.js b/src/libs/osmos.js index 3b19c790..0a294eb2 100644 --- a/src/libs/osmos.js +++ b/src/libs/osmos.js @@ -9,6 +9,15 @@ import fetch from 'node-fetch' import { getLocalChains } from './data/data' 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 = '' } @@ -20,54 +29,49 @@ export default class OsmosAPI { } async getOHCL4Pairs(from, to) { - this.exe_time = '' - return Promise.all( - [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]] - for (let j = 1; j <= 4; j += 1) { - price.push(e[j] / ohlc?.[1]?.[i]?.[j]) - } - output.push(price) - }) - const result = [] - for (let i = 0; i < output.length; i += 1) { - const itemArr = output[i] - result.push({ - time: itemArr[0], - volume: 0, - open: itemArr[1], - high: itemArr[2], - low: itemArr[3], - close: itemArr[4], + if (from && to) { + this.exe_time = '' + return Promise.all( + [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]] + for (let j = 1; j <= 4; j += 1) { + price.push(e[j] / ohlc?.[1]?.[i]?.[j]) + } + output.push(price) }) - } - return result - }) + const result = [] + for (let i = 0; i < output.length; i += 1) { + const itemArr = output[i] + result.push({ + time: itemArr[0], + volume: 0, + open: itemArr[1], + high: itemArr[2], + low: itemArr[3], + close: itemArr[4], + }) + } + return result + }) + } + return null } getCoinGeckoId(symbol) { - this.pairs = { - ATOM: 'cosmos', - OSMO: 'osmosis', - IRIS: 'iris-network', - AKT: 'akash-network', - } - return this.pairs[symbol] + return symbol ? this.pairs[symbol.toUpperCase()].coingecko : '' } getIBCDenomHash(symbol) { - this.IBChash = { - ATOM: 'cosmos', - OSMO: 'uosmo', - IRIS: 'iris-network', - AKT: 'akash-network', - } - return this.IBChash[symbol] + return symbol ? this.pairs[symbol.toUpperCase()].ibcDenomHash : '' + } + + getMinDenom(symbol) { + return symbol ? this.pairs[symbol.toUpperCase()].minDenom : '' } // Custom Module diff --git a/src/views/components/KlineTrade/DepositeWindow.vue b/src/views/components/KlineTrade/DepositeWindow.vue new file mode 100644 index 00000000..437b8eaf --- /dev/null +++ b/src/views/components/KlineTrade/DepositeWindow.vue @@ -0,0 +1,572 @@ + + + + + + + IBC Module is not enabled. + + + + + + + + + + + + + + + + + + + + + + + + + -- Please select a token -- + + + + {{ format(item) }} + + + {{ errors[0] }} + + + + + + + + + + + + {{ printDenom() }} + + + {{ errors[0] }} + + + + + + + + + + {{ errors[0] }} + + + + + + + + + + + + {{ errors[0] }} + + + + + + + + + + + + + + + {{ errors[0] }} + + + + + + + Advance + + + + + + + + + + {{ errors[0] }} + + + + + + + + {{ errors[0] }} + + + + + + + + + + + + Keplr + + + Ledger(USB) + + + Ledger(Bluetooth) + + + {{ errors[0] }} + + + + + + + {{ error }} + + + + + + diff --git a/src/views/components/KlineTrade/PlaceForm.vue b/src/views/components/KlineTrade/PlaceForm.vue index 3d830026..cfd9f288 100644 --- a/src/views/components/KlineTrade/PlaceForm.vue +++ b/src/views/components/KlineTrade/PlaceForm.vue @@ -1,9 +1,13 @@ - Available + Available {{ computeAccounts }} - {{ 0 }} {{ type === 0 ? target: base }} + + {{ available }} {{ type === 0 ? target: base }} @@ -66,34 +70,52 @@ Slippage tolerance - + 1% 2.5% 5% - {{ type === 0 ? `Buy ${ base }` : `Sell ${ base }` }} - + + + Connect Wallet + + + + @@ -116,7 +140,8 @@ import { BFormInput, BButton, BAlert, BFormGroup, BInputGroup, BInputGroupAppend, BFormRadio, } from 'bootstrap-vue' import FeatherIcon from '@/@core/components/feather-icon/FeatherIcon.vue' -import { abbrAddress, getLocalAccounts } from '@/libs/data' +import { /* abbrAddress, */ formatTokenAmount, getLocalAccounts } from '@/libs/data' +import DepositeWindow from './DepositeWindow.vue' export default { components: { @@ -128,6 +153,7 @@ export default { BInputGroup, BInputGroupAppend, FeatherIcon, + DepositeWindow, }, props: { type: { @@ -145,13 +171,13 @@ export default { }, data() { return { - selectedAddress: this.computeAccounts()[0], - available: 0, + address: '', amount: 0, total: 0, - // price: 50000, slippage: 0.05, marks: [0, 0.01, 0.025, 0.05], + baseAmount: 0, + targetAmount: 0, } }, computed: { @@ -161,19 +187,47 @@ export default { return p1 && p2 ? (p1.usd / p2.usd).toFixed(4) : '-' }, computeAccounts() { - const accounts = getLocalAccounts() - const values = accounts ? Object.values(accounts) : [] - let array = [] - for (let i = 0; i < values.length; i += 1) { - const addrs = values[i].address.filter(x => x.chain === this.$route.params.chain) - if (addrs && addrs.length > 0) { - array = array.concat(addrs.map(x => ({ value: x.addr, label: values[i].name.concat(' - ', abbrAddress(x.addr)) }))) - } - } - return array + 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) }, }, + 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) + } + }) + }, methods: { + initialAddress() { + const accounts = getLocalAccounts() + const current = this.$store.state.chains.defaultWallet + if (accounts && accounts[current]) { + const acc = accounts[current].address.find(x => x.chain === 'osmosis') + if (acc) { + this.address = acc.addr + } + } + }, + formatAvailable() { + }, changeAmount() { this.total = this.amount * this.price },
+ IBC Module is not enabled. +