forked from cerc-io/cosmos-explorer
load price for key pairs
This commit is contained in:
liangping
parent
8e37979b88
commit
ee50dd70c0
@ -8,7 +8,7 @@
|
||||
<b-card>
|
||||
<div 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"
|
||||
@ -18,29 +18,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.id}`"
|
||||
>
|
||||
{{ data.item.pair[0] }} / {{ data.item.pair[1] }}
|
||||
{{ 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">
|
||||
@ -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]
|
||||
},
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user