forked from cerc-io/cosmos-explorer
Merge branch 'trade' of github.com:ping-pub/explorer into trade
# Conflicts: # src/views/OsmosisTrade.vue
This commit is contained in:
ding
commit
d94a933325
@ -5,8 +5,45 @@
|
||||
* @LastEditors: dingyiming
|
||||
* @LastEditTime: 2021-11-25 00:45:16
|
||||
*/
|
||||
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() {
|
||||
|
||||
@ -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,
|
||||
},
|
||||
],
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
class="d-flex justify-content-begin align-items-center mb-1"
|
||||
>
|
||||
<b-button
|
||||
id="popover-button-3"
|
||||
id="popover-trading-pairs"
|
||||
variant="flat-primary"
|
||||
class="mr-3"
|
||||
@click="show = !show"
|
||||
@ -21,29 +21,37 @@
|
||||
|
||||
<b-popover
|
||||
:show.sync="show"
|
||||
target="popover-button-3"
|
||||
target="popover-trading-pairs"
|
||||
placement="bottom"
|
||||
triggers="click"
|
||||
style="width:300px;"
|
||||
triggers="hover"
|
||||
boundary="scrollParent"
|
||||
boundary-padding="0"
|
||||
>
|
||||
<template #title>
|
||||
Pairs
|
||||
</template>
|
||||
<b-table
|
||||
striped
|
||||
hover
|
||||
:small="true"
|
||||
:items="pairs"
|
||||
class="m-0"
|
||||
class="m-0 p-0"
|
||||
>
|
||||
|
||||
<template #cell(pair)="data">
|
||||
<router-link
|
||||
:to="`/osmosis/osmosis/trade/${data.item.pair}`"
|
||||
:to="`/osmosis/osmosis/trade/${data.item.id}`"
|
||||
>
|
||||
{{ data.item.pair }}
|
||||
{{ data.item.pair[0] }}/{{ data.item.pair[1] }}
|
||||
</router-link>
|
||||
</template>
|
||||
<template #cell(price)="data">
|
||||
<div class="text-right">
|
||||
<small class="">{{ data.item.price }}</small>
|
||||
</div>
|
||||
</template>
|
||||
<template #cell(change)="data">
|
||||
<div class="text-right">
|
||||
<small :class="data.item.change > 0 ? 'text-success': 'text-danger'">{{ data.item.change }}%</small>
|
||||
</div>
|
||||
</template>
|
||||
</b-table>
|
||||
</b-popover>
|
||||
<div class="mr-3 text-success font-weight-bolder">
|
||||
@ -77,8 +85,8 @@
|
||||
>
|
||||
<b-card>
|
||||
<Place
|
||||
:base="base"
|
||||
:target="target"
|
||||
:pool.sync="current"
|
||||
:denom-trace="denomTrace"
|
||||
/>
|
||||
</b-card>
|
||||
</b-col>
|
||||
@ -90,6 +98,8 @@
|
||||
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'
|
||||
import Kline from './components/tvjs/index.vue'
|
||||
@ -108,28 +118,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' },
|
||||
],
|
||||
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 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,
|
||||
price: this.getPrice(pair),
|
||||
change: this.getChanges(pair),
|
||||
}
|
||||
})
|
||||
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() {
|
||||
@ -140,23 +163,37 @@ export default {
|
||||
this.$http.osmosis.getOHCL4Pairs(
|
||||
this.$http.osmosis.getCoinGeckoId(base),
|
||||
this.$http.osmosis.getCoinGeckoId(target),
|
||||
)
|
||||
.then(data => {
|
||||
console.log(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'
|
||||
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]
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
@ -12,277 +12,279 @@
|
||||
@hidden="resetModal"
|
||||
@ok="handleOk"
|
||||
@show="loadBalance"
|
||||
><b-overlay
|
||||
:show="channels.length === 0"
|
||||
rounded="sm"
|
||||
>
|
||||
<template #overlay>
|
||||
<div class="text-center">
|
||||
<p>
|
||||
IBC Module is not enabled.
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
<validation-observer ref="simpleRules">
|
||||
<b-form>
|
||||
<b-row>
|
||||
<b-col>
|
||||
<b-form-group
|
||||
label="Sender"
|
||||
label-for="Account"
|
||||
>
|
||||
<b-input-group class="mb-25">
|
||||
<b-input-group-prepend is-text>
|
||||
<b-avatar
|
||||
:src="account?account.logo:''"
|
||||
size="18"
|
||||
variant="light-primary"
|
||||
rounded
|
||||
/>
|
||||
</b-input-group-prepend>
|
||||
<b-form-input
|
||||
:value="account?account.addr:address"
|
||||
readonly
|
||||
/>
|
||||
</b-input-group>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col>
|
||||
<b-form-group
|
||||
label="Available Token"
|
||||
label-for="Token"
|
||||
>
|
||||
<validation-provider
|
||||
#default="{ errors }"
|
||||
rules="required"
|
||||
name="Token"
|
||||
>
|
||||
<b-form-select
|
||||
v-model="token"
|
||||
@change="tokenChange"
|
||||
>
|
||||
<template #first>
|
||||
<b-form-select-option
|
||||
value=""
|
||||
>
|
||||
-- Please select a token --
|
||||
</b-form-select-option>
|
||||
</template>
|
||||
<b-form-select-option
|
||||
v-for="item in balance"
|
||||
:key="item.denom"
|
||||
:value="item.denom"
|
||||
>
|
||||
{{ format(item) }}
|
||||
</b-form-select-option>
|
||||
</b-form-select>
|
||||
<small class="text-danger">{{ errors[0] }}</small>
|
||||
</validation-provider>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col>
|
||||
<b-form-group
|
||||
label="Amount"
|
||||
label-for="Amount"
|
||||
>
|
||||
<validation-provider
|
||||
v-slot="{ errors }"
|
||||
rules="required|regex:^([0-9\.]+)$"
|
||||
name="amount"
|
||||
<template #modal-header="" />
|
||||
<b-overlay
|
||||
:show="channels.length === 0"
|
||||
rounded="sm"
|
||||
>
|
||||
<template #overlay>
|
||||
<div class="text-center">
|
||||
<p>
|
||||
IBC Module is not enabled.
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
<validation-observer ref="simpleRules">
|
||||
<b-form>
|
||||
<b-row>
|
||||
<b-col>
|
||||
<b-form-group
|
||||
label="Sender"
|
||||
label-for="Account"
|
||||
>
|
||||
<b-input-group class="mb-25">
|
||||
<b-input-group-prepend is-text>
|
||||
<b-avatar
|
||||
:src="account?account.logo:''"
|
||||
size="18"
|
||||
variant="light-primary"
|
||||
rounded
|
||||
/>
|
||||
</b-input-group-prepend>
|
||||
<b-form-input
|
||||
id="Amount"
|
||||
v-model="amount"
|
||||
:state="errors.length > 0 ? false:null"
|
||||
placeholder="Input a number"
|
||||
:value="account?account.addr:address"
|
||||
readonly
|
||||
/>
|
||||
</b-input-group>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col>
|
||||
<b-form-group
|
||||
label="Available Token"
|
||||
label-for="Token"
|
||||
>
|
||||
<validation-provider
|
||||
#default="{ errors }"
|
||||
rules="required"
|
||||
name="Token"
|
||||
>
|
||||
<b-form-select
|
||||
v-model="token"
|
||||
@change="tokenChange"
|
||||
>
|
||||
<template #first>
|
||||
<b-form-select-option
|
||||
value=""
|
||||
>
|
||||
-- Please select a token --
|
||||
</b-form-select-option>
|
||||
</template>
|
||||
<b-form-select-option
|
||||
v-for="item in balance"
|
||||
:key="item.denom"
|
||||
:value="item.denom"
|
||||
>
|
||||
{{ format(item) }}
|
||||
</b-form-select-option>
|
||||
</b-form-select>
|
||||
<small class="text-danger">{{ errors[0] }}</small>
|
||||
</validation-provider>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col>
|
||||
<b-form-group
|
||||
label="Amount"
|
||||
label-for="Amount"
|
||||
>
|
||||
<validation-provider
|
||||
v-slot="{ errors }"
|
||||
rules="required|regex:^([0-9\.]+)$"
|
||||
name="amount"
|
||||
>
|
||||
<b-input-group class="mb-25">
|
||||
<b-form-input
|
||||
id="Amount"
|
||||
v-model="amount"
|
||||
:state="errors.length > 0 ? false:null"
|
||||
placeholder="Input a number"
|
||||
type="number"
|
||||
/>
|
||||
<b-input-group-append is-text>
|
||||
{{ printDenom() }}
|
||||
</b-input-group-append>
|
||||
</b-input-group>
|
||||
<small class="text-danger">{{ errors[0] }}</small>
|
||||
</validation-provider>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col>
|
||||
<b-form-group
|
||||
label="Destination"
|
||||
label-for="destination"
|
||||
>
|
||||
<validation-provider
|
||||
#default="{ errors }"
|
||||
rules="required"
|
||||
name="destination"
|
||||
>
|
||||
<v-select
|
||||
v-model="destination"
|
||||
name="destination"
|
||||
:options="destinationOptions"
|
||||
placeholder="Select a channel"
|
||||
/>
|
||||
<small class="text-danger">{{ errors[0] }}</small>
|
||||
</validation-provider>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col>
|
||||
<b-form-group
|
||||
label="Recipient"
|
||||
label-for="Recipient"
|
||||
>
|
||||
<validation-provider
|
||||
#default="{ errors }"
|
||||
rules="required"
|
||||
name="recipient"
|
||||
>
|
||||
<b-input-group class="mb-25">
|
||||
<b-form-input
|
||||
id="Recipient"
|
||||
v-model="recipient"
|
||||
:state="errors.length > 0 ? false:null"
|
||||
:placeholder="placeholder"
|
||||
/>
|
||||
</b-input-group>
|
||||
<small class="text-danger">{{ errors[0] }}</small>
|
||||
</validation-provider>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col>
|
||||
<b-form-group
|
||||
label="Fee"
|
||||
label-for="Fee"
|
||||
>
|
||||
<validation-provider
|
||||
v-slot="{ errors }"
|
||||
rules="required|integer"
|
||||
name="fee"
|
||||
>
|
||||
<b-input-group>
|
||||
<b-form-input v-model="fee" />
|
||||
<b-input-group-append>
|
||||
<b-form-select
|
||||
v-model="feeDenom"
|
||||
:options="feeDenoms"
|
||||
value-field="denom"
|
||||
text-field="denom"
|
||||
/>
|
||||
</b-input-group-append>
|
||||
</b-input-group>
|
||||
<small class="text-danger">{{ errors[0] }}</small>
|
||||
</validation-provider>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
<b-col cols="12">
|
||||
<b-form-group>
|
||||
<b-form-checkbox
|
||||
v-model="advance"
|
||||
name="advance"
|
||||
value="true"
|
||||
>
|
||||
<small>Advance</small>
|
||||
</b-form-checkbox>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row v-if="advance">
|
||||
<b-col cols="12">
|
||||
<b-form-group
|
||||
label="Gas"
|
||||
label-for="gas"
|
||||
>
|
||||
<validation-provider
|
||||
v-slot="{ errors }"
|
||||
name="gas"
|
||||
>
|
||||
<b-form-input
|
||||
id="gas"
|
||||
v-model="gas"
|
||||
type="number"
|
||||
/>
|
||||
<b-input-group-append is-text>
|
||||
{{ printDenom() }}
|
||||
</b-input-group-append>
|
||||
</b-input-group>
|
||||
<small class="text-danger">{{ errors[0] }}</small>
|
||||
</validation-provider>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col>
|
||||
<b-form-group
|
||||
label="Destination"
|
||||
label-for="destination"
|
||||
>
|
||||
<validation-provider
|
||||
#default="{ errors }"
|
||||
rules="required"
|
||||
name="destination"
|
||||
<small class="text-danger">{{ errors[0] }}</small>
|
||||
</validation-provider>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
<b-col cols="12">
|
||||
<b-form-group
|
||||
label="Memo"
|
||||
label-for="Memo"
|
||||
>
|
||||
<v-select
|
||||
v-model="destination"
|
||||
name="destination"
|
||||
:options="destinationOptions"
|
||||
placeholder="Select a channel"
|
||||
/>
|
||||
<small class="text-danger">{{ errors[0] }}</small>
|
||||
</validation-provider>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col>
|
||||
<b-form-group
|
||||
label="Recipient"
|
||||
label-for="Recipient"
|
||||
>
|
||||
<validation-provider
|
||||
#default="{ errors }"
|
||||
rules="required"
|
||||
name="recipient"
|
||||
>
|
||||
<b-input-group class="mb-25">
|
||||
<b-form-input
|
||||
id="Recipient"
|
||||
v-model="recipient"
|
||||
:state="errors.length > 0 ? false:null"
|
||||
:placeholder="placeholder"
|
||||
/>
|
||||
</b-input-group>
|
||||
<small class="text-danger">{{ errors[0] }}</small>
|
||||
</validation-provider>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col>
|
||||
<b-form-group
|
||||
label="Fee"
|
||||
label-for="Fee"
|
||||
>
|
||||
<validation-provider
|
||||
v-slot="{ errors }"
|
||||
rules="required|integer"
|
||||
name="fee"
|
||||
>
|
||||
<b-input-group>
|
||||
<b-form-input v-model="fee" />
|
||||
<b-input-group-append>
|
||||
<b-form-select
|
||||
v-model="feeDenom"
|
||||
:options="feeDenoms"
|
||||
value-field="denom"
|
||||
text-field="denom"
|
||||
/>
|
||||
</b-input-group-append>
|
||||
</b-input-group>
|
||||
<small class="text-danger">{{ errors[0] }}</small>
|
||||
</validation-provider>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
<b-col cols="12">
|
||||
<b-form-group>
|
||||
<b-form-checkbox
|
||||
v-model="advance"
|
||||
name="advance"
|
||||
value="true"
|
||||
>
|
||||
<small>Advance</small>
|
||||
</b-form-checkbox>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row v-if="advance">
|
||||
<b-col cols="12">
|
||||
<b-form-group
|
||||
label="Gas"
|
||||
label-for="gas"
|
||||
>
|
||||
<validation-provider
|
||||
v-slot="{ errors }"
|
||||
name="gas"
|
||||
>
|
||||
<b-form-input
|
||||
id="gas"
|
||||
v-model="gas"
|
||||
type="number"
|
||||
/>
|
||||
<small class="text-danger">{{ errors[0] }}</small>
|
||||
</validation-provider>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
<b-col cols="12">
|
||||
<b-form-group
|
||||
label="Memo"
|
||||
label-for="Memo"
|
||||
>
|
||||
<validation-provider
|
||||
v-slot="{ errors }"
|
||||
name="memo"
|
||||
>
|
||||
<b-form-input
|
||||
id="Memo"
|
||||
v-model="memo"
|
||||
max="2"
|
||||
/>
|
||||
<small class="text-danger">{{ errors[0] }}</small>
|
||||
</validation-provider>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
</b-row>
|
||||
|
||||
<b-row>
|
||||
<b-col>
|
||||
<b-form-group
|
||||
label="Wallet"
|
||||
label-for="wallet"
|
||||
>
|
||||
<validation-provider
|
||||
v-slot="{ errors }"
|
||||
rules="required"
|
||||
name="wallet"
|
||||
>
|
||||
<b-form-radio-group
|
||||
v-model="wallet"
|
||||
stacked
|
||||
class="demo-inline-spacing"
|
||||
<validation-provider
|
||||
v-slot="{ errors }"
|
||||
name="memo"
|
||||
>
|
||||
<b-form-radio
|
||||
<b-form-input
|
||||
id="Memo"
|
||||
v-model="memo"
|
||||
max="2"
|
||||
/>
|
||||
<small class="text-danger">{{ errors[0] }}</small>
|
||||
</validation-provider>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
</b-row>
|
||||
|
||||
<b-row>
|
||||
<b-col>
|
||||
<b-form-group
|
||||
label="Wallet"
|
||||
label-for="wallet"
|
||||
>
|
||||
<validation-provider
|
||||
v-slot="{ errors }"
|
||||
rules="required"
|
||||
name="wallet"
|
||||
>
|
||||
<b-form-radio-group
|
||||
v-model="wallet"
|
||||
name="wallet"
|
||||
value="keplr"
|
||||
class="d-none d-md-block"
|
||||
stacked
|
||||
class="demo-inline-spacing"
|
||||
>
|
||||
Keplr
|
||||
</b-form-radio>
|
||||
<b-form-radio
|
||||
v-model="wallet"
|
||||
name="wallet"
|
||||
value="ledgerUSB"
|
||||
>
|
||||
<small>Ledger(USB)</small>
|
||||
</b-form-radio>
|
||||
<b-form-radio
|
||||
v-model="wallet"
|
||||
name="wallet"
|
||||
value="ledgerBle"
|
||||
class="mr-0"
|
||||
>
|
||||
<small>Ledger(Bluetooth)</small>
|
||||
</b-form-radio>
|
||||
</b-form-radio-group>
|
||||
<small class="text-danger">{{ errors[0] }}</small>
|
||||
</validation-provider>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-form>
|
||||
</validation-observer>
|
||||
{{ error }}
|
||||
</b-overlay></b-modal>
|
||||
<b-form-radio
|
||||
v-model="wallet"
|
||||
name="wallet"
|
||||
value="keplr"
|
||||
class="d-none d-md-block"
|
||||
>
|
||||
Keplr
|
||||
</b-form-radio>
|
||||
<b-form-radio
|
||||
v-model="wallet"
|
||||
name="wallet"
|
||||
value="ledgerUSB"
|
||||
>
|
||||
<small>Ledger(USB)</small>
|
||||
</b-form-radio>
|
||||
<b-form-radio
|
||||
v-model="wallet"
|
||||
name="wallet"
|
||||
value="ledgerBle"
|
||||
class="mr-0"
|
||||
>
|
||||
<small>Ledger(Bluetooth)</small>
|
||||
</b-form-radio>
|
||||
</b-form-radio-group>
|
||||
<small class="text-danger">{{ errors[0] }}</small>
|
||||
</validation-provider>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-form>
|
||||
</validation-observer>
|
||||
{{ error }}
|
||||
</b-overlay></b-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -18,8 +18,8 @@
|
||||
</b-tabs>
|
||||
<PlaceForm
|
||||
:type="tabIndex"
|
||||
:base="base"
|
||||
:target="target"
|
||||
:pool.sync="pool"
|
||||
:denom-trace="denomTrace"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@ -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: () => ({
|
||||
|
||||
@ -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
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user