Finish trade UI
This commit is contained in:
liangping
parent
a4ce55f36d
commit
273d382b87
@ -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 = []
|
||||
|
||||
@ -6,72 +6,83 @@
|
||||
sm="12"
|
||||
>
|
||||
<b-card>
|
||||
<div
|
||||
id="kline-area"
|
||||
class="d-flex justify-content-begin align-items-center mb-1"
|
||||
>
|
||||
<b-button
|
||||
id="popover-trading-pairs"
|
||||
variant="flat-primary"
|
||||
class="mr-3"
|
||||
@click="show = !show"
|
||||
<b-row class="mb-1">
|
||||
<b-col
|
||||
lg="4"
|
||||
md="6"
|
||||
sm="12"
|
||||
class="d-flex justify-content-begin align-items-center"
|
||||
>
|
||||
{{ base }} / {{ target }}
|
||||
</b-button>
|
||||
|
||||
<b-popover
|
||||
:show.sync="show"
|
||||
target="popover-trading-pairs"
|
||||
placement="bottom"
|
||||
triggers="hover"
|
||||
boundary="scrollParent"
|
||||
boundary-padding="0"
|
||||
>
|
||||
<b-table
|
||||
striped
|
||||
hover
|
||||
:small="true"
|
||||
:items="pairs"
|
||||
class="m-0 p-0"
|
||||
<b-button
|
||||
id="popover-trading-pairs"
|
||||
variant="gradient-primary"
|
||||
@click="show = !show"
|
||||
>
|
||||
<feather-icon
|
||||
icon="ListIcon"
|
||||
/>
|
||||
</b-button>
|
||||
<h4 class="text-primary font-weight-bolder text-nowrap ml-1">
|
||||
{{ base }} / {{ target }}
|
||||
</h4>
|
||||
<b-popover
|
||||
:show.sync="show"
|
||||
target="popover-trading-pairs"
|
||||
placement="rightbottom"
|
||||
triggers="hover"
|
||||
boundary="scrollParent"
|
||||
boundary-padding="0"
|
||||
class="px-0"
|
||||
>
|
||||
<b-table
|
||||
striped
|
||||
hover
|
||||
:fields="fields"
|
||||
:small="true"
|
||||
:items="pairs"
|
||||
class="ml-0 pl-0"
|
||||
>
|
||||
|
||||
<template #cell(pair)="data">
|
||||
<router-link
|
||||
:to="`/osmosis/osmosis/trade/${data.item.id}`"
|
||||
>
|
||||
{{ 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">
|
||||
{{ latestPrice }}
|
||||
</div>
|
||||
<div class="mr-3">
|
||||
<small>24h Change</small>
|
||||
<div :class="changesIn24H > 0 ? 'text-success': 'text-danger'">
|
||||
{{ changesIn24H }}%
|
||||
<template #cell(pair)="data">
|
||||
<router-link
|
||||
:to="`/osmosis/osmosis/trade/${data.item.id}`"
|
||||
>
|
||||
{{ 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>
|
||||
</b-col>
|
||||
<b-col class="d-flex justify-content-begin align-items-center">
|
||||
<div class="mr-3 text-success font-weight-bolder">
|
||||
{{ latestPrice }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="mr-3">
|
||||
<small>24h High</small>
|
||||
<div>-</div>
|
||||
</div>
|
||||
<div>
|
||||
<small>24h Low</small>
|
||||
<div>-</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mr-3">
|
||||
<small>24h Change</small>
|
||||
<div :class="changesIn24H > 0 ? 'text-success': 'text-danger'">
|
||||
{{ changesIn24H }}%
|
||||
</div>
|
||||
</div>
|
||||
<div class="mr-3">
|
||||
<small>24h High</small>
|
||||
<div>{{ high24 }}</div>
|
||||
</div>
|
||||
<div>
|
||||
<small>24h Low</small>
|
||||
<div>{{ low24 }}</div>
|
||||
</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<summary-price-chart
|
||||
:chart-data="marketChartData"
|
||||
:min-height="150"
|
||||
@ -97,8 +108,9 @@
|
||||
import {
|
||||
BRow, BCol, BCard, BButton, BPopover, BTable,
|
||||
} from 'bootstrap-vue'
|
||||
import { getPairName } from '@/libs/osmos'
|
||||
import { CoinGeckoMap, getPairName } from '@/libs/osmos'
|
||||
import { formatTokenDenom } from '@/libs/data'
|
||||
import FeatherIcon from '@/@core/components/feather-icon/FeatherIcon.vue'
|
||||
import Place from './components/KlineTrade/Place.vue'
|
||||
// import Kline from './components/kline/index.vue'
|
||||
import SummaryPriceChart from './SummaryPriceChart.vue'
|
||||
@ -113,24 +125,24 @@ export default {
|
||||
Place,
|
||||
BCard,
|
||||
SummaryPriceChart,
|
||||
FeatherIcon,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
base: '',
|
||||
target: '',
|
||||
fields: ['pair', 'price', 'change'],
|
||||
show: false,
|
||||
pools: [],
|
||||
current: {},
|
||||
denomTrace: [],
|
||||
klineData: [],
|
||||
marketData: {},
|
||||
high24: 0,
|
||||
low24: 0,
|
||||
}
|
||||
},
|
||||
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 => {
|
||||
@ -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]
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
@ -14,277 +14,266 @@
|
||||
@show="loadBalance"
|
||||
>
|
||||
<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"
|
||||
<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"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
<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"
|
||||
id="Amount"
|
||||
v-model="amount"
|
||||
:state="errors.length > 0 ? false:null"
|
||||
placeholder="Input a number"
|
||||
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"
|
||||
<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"
|
||||
>
|
||||
<validation-provider
|
||||
v-slot="{ errors }"
|
||||
name="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="Memo"
|
||||
v-model="memo"
|
||||
max="2"
|
||||
id="Recipient"
|
||||
v-model="recipient"
|
||||
:state="errors.length > 0 ? false:null"
|
||||
:placeholder="placeholder"
|
||||
/>
|
||||
<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"
|
||||
</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"
|
||||
>
|
||||
<validation-provider
|
||||
v-slot="{ errors }"
|
||||
rules="required"
|
||||
name="wallet"
|
||||
<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"
|
||||
>
|
||||
<b-form-radio-group
|
||||
<b-form-radio
|
||||
v-model="wallet"
|
||||
stacked
|
||||
class="demo-inline-spacing"
|
||||
name="wallet"
|
||||
value="keplr"
|
||||
class="d-none d-md-block"
|
||||
>
|
||||
<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>
|
||||
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-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -1,46 +1,43 @@
|
||||
<template>
|
||||
<div>
|
||||
<dl class="d-none">
|
||||
<dt>Available {{ computeAccounts }}</dt>
|
||||
<dd class="d-flex justify-content-between mt-1">
|
||||
<feather-icon
|
||||
v-b-modal.trading-deposte-window
|
||||
icon="PlusSquareIcon"
|
||||
/>
|
||||
<span> {{ available }} {{ type === 0 ? target: base }} </span>
|
||||
</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>Price</dt>
|
||||
<dd class="d-flex justify-content-end mt-1 align-items-end font-weight-bolder">
|
||||
1 <small class="text-muted mx-10"> {{ base }} ≈</small> {{ price }} <small class="text-muted mx-10">{{ target }}</small>
|
||||
</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>Swap Fee</dt>
|
||||
<dd class="d-flex justify-content-end mt-1 font-weight-bolder">
|
||||
{{ fee }}%
|
||||
</dd>
|
||||
</dl>
|
||||
<b-form-group>
|
||||
<b-card
|
||||
bg-variant="light-secondary"
|
||||
text-variant="black"
|
||||
>
|
||||
<div class="d-flex justify-content-between">
|
||||
<span>Amount</span>
|
||||
<small class="text-muted">Available {{ available }} {{ type === 0 ? target: base }}
|
||||
<span class="font-weight-bolder">Balance </span>
|
||||
<span>
|
||||
<feather-icon
|
||||
v-b-modal.trading-deposte-window
|
||||
icon="PlusSquareIcon"
|
||||
/></small>
|
||||
class="text-primary"
|
||||
/>
|
||||
<small> {{ available }} {{ type === 0 ? target: base }} </small>
|
||||
</span>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between mt-1">
|
||||
<span class="font-weight-bolder">Price</span>
|
||||
<span>{{ price }} <small class="text-muted mx-10">{{ target }} ≈</small> 1 <small class="text-muted mx-10"> {{ base }}</small> </span>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between mt-1">
|
||||
<span class="font-weight-bolder">Swap Fee</span>
|
||||
<span>{{ fee }}%</span>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-form-group>
|
||||
<div>
|
||||
<span>Quantity</span>
|
||||
</div>
|
||||
<b-input-group class="input-group-merge">
|
||||
<b-form-input
|
||||
id="amount"
|
||||
v-model="amount"
|
||||
type="number"
|
||||
placeholder="Amount"
|
||||
placeholder="Quantity"
|
||||
@change="changeAmount()"
|
||||
/>
|
||||
<b-input-group-append is-text>
|
||||
{{ type === 0 ? target: base }}
|
||||
{{ base }}
|
||||
</b-input-group-append>
|
||||
</b-input-group>
|
||||
<b-alert
|
||||
@ -54,19 +51,29 @@
|
||||
</b-form-group>
|
||||
<b-form-group>
|
||||
<div class="d-flex justify-content-between">
|
||||
<span>Total</span>
|
||||
<small class="text-muted">≈${{ localPrice }}</small>
|
||||
<span>Volume</span>
|
||||
<span>
|
||||
<small
|
||||
v-if="localPrice > 0"
|
||||
class="text-muted mr-1"
|
||||
>≈${{ localPrice }}</small>
|
||||
<feather-icon
|
||||
id="popover-trading-setting"
|
||||
icon="SettingsIcon"
|
||||
class="text-primary"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<b-input-group class="input-group-merge">
|
||||
<b-form-input
|
||||
id="total"
|
||||
v-model="total"
|
||||
type="number"
|
||||
placeholder="Total"
|
||||
placeholder="Volume"
|
||||
@change="changeTotal()"
|
||||
/>
|
||||
<b-input-group-append is-text>
|
||||
{{ type === 1 ? target: base }}
|
||||
{{ target }}
|
||||
</b-input-group-append>
|
||||
</b-input-group>
|
||||
<b-alert
|
||||
@ -78,39 +85,48 @@
|
||||
</div>
|
||||
</b-alert>
|
||||
</b-form-group>
|
||||
<b-form-group class="d-none">
|
||||
<label>
|
||||
Slippage Tolerance
|
||||
</label>
|
||||
<div>
|
||||
<b-form-radio
|
||||
v-model="slippage"
|
||||
value="0.01"
|
||||
button
|
||||
button-variant="outline-secondary"
|
||||
>
|
||||
1%
|
||||
</b-form-radio>
|
||||
<b-form-radio
|
||||
v-model="slippage"
|
||||
value="0.025"
|
||||
button
|
||||
block
|
||||
class="px-1"
|
||||
button-variant="outline-secondary"
|
||||
>
|
||||
2.5%
|
||||
</b-form-radio>
|
||||
<b-form-radio
|
||||
v-model="slippage"
|
||||
value="0.05"
|
||||
button
|
||||
button-variant="outline-secondary"
|
||||
>
|
||||
5%
|
||||
</b-form-radio>
|
||||
</div>
|
||||
</b-form-group>
|
||||
<b-popover
|
||||
target="popover-trading-setting"
|
||||
placement="left"
|
||||
triggers="hover"
|
||||
boundary="scrollParent"
|
||||
boundary-padding="0"
|
||||
class="px-0"
|
||||
>
|
||||
<b-form-group>
|
||||
<label>
|
||||
Slippage Tolerance
|
||||
</label>
|
||||
<div>
|
||||
<b-form-radio
|
||||
v-model="slippage"
|
||||
value="0.01"
|
||||
button
|
||||
button-variant="outline-secondary"
|
||||
>
|
||||
1%
|
||||
</b-form-radio>
|
||||
<b-form-radio
|
||||
v-model="slippage"
|
||||
value="0.025"
|
||||
button
|
||||
block
|
||||
class="px-1"
|
||||
button-variant="outline-secondary"
|
||||
>
|
||||
2.5%
|
||||
</b-form-radio>
|
||||
<b-form-radio
|
||||
v-model="slippage"
|
||||
value="0.05"
|
||||
button
|
||||
button-variant="outline-secondary"
|
||||
>
|
||||
5%
|
||||
</b-form-radio>
|
||||
</div>
|
||||
</b-form-group>
|
||||
</b-popover>
|
||||
<b-form-group
|
||||
label="Signer"
|
||||
label-for="wallet"
|
||||
@ -147,6 +163,7 @@
|
||||
<b-button
|
||||
v-if="address"
|
||||
block
|
||||
:disabled="type === 0? total > available : amount > available"
|
||||
:variant="type === 0 ? 'success': 'danger'"
|
||||
@click="sendTx()"
|
||||
>
|
||||
@ -164,7 +181,10 @@
|
||||
</b-form-group>
|
||||
<b-alert
|
||||
variant="danger"
|
||||
show
|
||||
:show="dismissCountDown"
|
||||
dismissible
|
||||
@dismissed="dismissCountDown=0"
|
||||
@dismiss-count-down="countDownChanged"
|
||||
>
|
||||
<div class="alert-body">
|
||||
{{ error }}
|
||||
@ -189,7 +209,7 @@
|
||||
|
||||
<script>
|
||||
import {
|
||||
BFormInput, BButton, BAlert, BFormGroup, BInputGroup, BInputGroupAppend, BFormRadio, BFormRadioGroup,
|
||||
BFormInput, BButton, BAlert, BFormGroup, BInputGroup, BInputGroupAppend, BFormRadio, BFormRadioGroup, BCard, BPopover,
|
||||
} from 'bootstrap-vue'
|
||||
import FeatherIcon from '@/@core/components/feather-icon/FeatherIcon.vue'
|
||||
import {
|
||||
@ -203,10 +223,12 @@ export default {
|
||||
components: {
|
||||
BAlert,
|
||||
BButton,
|
||||
BCard,
|
||||
BFormInput,
|
||||
BFormRadio,
|
||||
BFormRadioGroup,
|
||||
BFormGroup,
|
||||
BPopover,
|
||||
BInputGroup,
|
||||
BInputGroupAppend,
|
||||
FeatherIcon,
|
||||
@ -241,6 +263,8 @@ export default {
|
||||
wallet: 'keplr',
|
||||
// base: '',
|
||||
// target: '',
|
||||
dismissSecs: 15,
|
||||
dismissCountDown: 0,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -256,7 +280,7 @@ export default {
|
||||
return p1 && p2 ? (p1.usd / p2.usd).toFixed(4) : '-'
|
||||
},
|
||||
localPrice() {
|
||||
const p1 = this.$store.state.chains.quotes[this.type === 1 ? this.target : this.base]
|
||||
const p1 = this.$store.state.chains.quotes[this.target]
|
||||
return p1 && this.total > 0 ? (p1.usd * this.total).toFixed(2) : '-'
|
||||
},
|
||||
computeAccounts() {
|
||||
@ -280,10 +304,7 @@ export default {
|
||||
return 0
|
||||
},
|
||||
fee() {
|
||||
if (this.pool) {
|
||||
return percent(this.pool.poolParams.swapFee)
|
||||
}
|
||||
return '-'
|
||||
return percent(this.pool?.poolParams?.swapFee || '')
|
||||
},
|
||||
},
|
||||
created() {
|
||||
@ -318,18 +339,10 @@ export default {
|
||||
formatAvailable() {
|
||||
},
|
||||
changeAmount() {
|
||||
if (this.type === 0) {
|
||||
this.total = this.amount / this.price
|
||||
} else {
|
||||
this.total = this.amount * this.price
|
||||
}
|
||||
this.total = parseFloat((this.amount * this.price).toFixed(6))
|
||||
},
|
||||
changeTotal() {
|
||||
if (this.type === 0) {
|
||||
this.amount = this.total * this.price
|
||||
} else {
|
||||
this.amount = this.total / this.price
|
||||
}
|
||||
this.amount = parseFloat((this.total / this.price).toFixed(6))
|
||||
},
|
||||
async sendTx() {
|
||||
const tokenOutDenom = this.pool.poolAssets[this.type === 0 ? 0 : 1].token.denom
|
||||
@ -356,10 +369,12 @@ export default {
|
||||
|
||||
if (txMsgs.length === 0) {
|
||||
this.error = 'No delegation found'
|
||||
this.dismissCountDown = this.dismissSecs
|
||||
return ''
|
||||
}
|
||||
if (!this.accountNumber) {
|
||||
this.error = 'Account number should not be empty!'
|
||||
this.dismissCountDown = this.dismissSecs
|
||||
return ''
|
||||
}
|
||||
|
||||
@ -406,11 +421,15 @@ export default {
|
||||
// })
|
||||
}).catch(e => {
|
||||
this.error = e
|
||||
this.dismissCountDown = this.dismissSecs
|
||||
})
|
||||
// Send tokens
|
||||
// return client.sendTokens(this.address, this.recipient, sendCoins, this.memo)
|
||||
return ''
|
||||
},
|
||||
countDownChanged(dismissCountDown) {
|
||||
this.dismissCountDown = dismissCountDown
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user