load price for key pairs

This commit is contained in:
liangping 2021-11-25 20:41:47 +08:00
parent 8e37979b88
commit ee50dd70c0
2 changed files with 303 additions and 291 deletions

View File

@ -8,7 +8,7 @@
<b-card> <b-card>
<div class="d-flex justify-content-begin align-items-center mb-1"> <div class="d-flex justify-content-begin align-items-center mb-1">
<b-button <b-button
id="popover-button-3" id="popover-trading-pairs"
variant="flat-primary" variant="flat-primary"
class="mr-3" class="mr-3"
@click="show = !show" @click="show = !show"
@ -18,29 +18,37 @@
<b-popover <b-popover
:show.sync="show" :show.sync="show"
target="popover-button-3" target="popover-trading-pairs"
placement="bottom" placement="bottom"
triggers="click" triggers="hover"
style="width:300px;" boundary="scrollParent"
boundary-padding="0"
> >
<template #title>
Pairs
</template>
<b-table <b-table
striped striped
hover hover
:small="true" :small="true"
:items="pairs" :items="pairs"
class="m-0" class="m-0 p-0"
> >
<template #cell(pair)="data"> <template #cell(pair)="data">
<router-link <router-link
:to="`/osmosis/osmosis/trade/${data.item.id}`" :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> </router-link>
</template> </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-table>
</b-popover> </b-popover>
<div class="mr-3 text-success font-weight-bolder"> <div class="mr-3 text-success font-weight-bolder">
@ -84,6 +92,7 @@ import {
BRow, BCol, BCard, BButton, BPopover, BTable, BRow, BCol, BCard, BButton, BPopover, BTable,
} from 'bootstrap-vue' } from 'bootstrap-vue'
import { getPairName } from '@/libs/osmos' import { getPairName } from '@/libs/osmos'
import { formatTokenDenom } from '@/libs/data'
import Place from './components/KlineTrade/Place.vue' import Place from './components/KlineTrade/Place.vue'
import Kline from './components/kline/index.vue' import Kline from './components/kline/index.vue'
@ -101,13 +110,6 @@ export default {
data() { data() {
return { return {
show: false, show: false,
// pairs: [
// { pair: 'ATOM/OSMO' },
// { pair: 'IRIS/OSMO' },
// { pair: 'AKT/OSMO' },
// { pair: 'ATOM/OSMO' },
// { pair: 'ATOM/OSMO' },
// ],
pools: [], pools: [],
current: {}, current: {},
denomTrace: [], denomTrace: [],
@ -123,28 +125,26 @@ export default {
}, },
pairs() { pairs() {
const pairs = this.pools.map(x => { 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, id: x.id,
pair: x.poolAssets.map(t => { pair,
if (t.token.denom.startsWith('ibc/')) { price: this.getPrice(pair),
return (this.denomTrace[t.token.denom] ? this.denomTrace[t.token.denom].base_denom : ' ') change: this.getChanges(pair),
}
return t.token.denom
}),
} }
return x2
}) })
return pairs return pairs
}, },
latestPrice() { latestPrice() {
const p1 = this.$store.state.chains.quotes[this.base] return this.getPrice([this.base, this.target])
const p2 = this.$store.state.chains.quotes[this.target]
return p1 && p2 ? (p1.usd / p2.usd).toFixed(4) : '-'
}, },
changesIn24H() { changesIn24H() {
const p1 = this.$store.state.chains.quotes[this.base] return this.getChanges([this.base, this.target])
const p2 = this.$store.state.chains.quotes[this.target]
return p1 && p2 ? (p1.usd_24h_change / p2.usd_24h_change).toFixed(2) : '-'
}, },
}, },
created() { created() {
@ -173,6 +173,16 @@ export default {
// } // }
}, },
methods: { 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) { init(poolid) {
this.current = this.pools.find(p => p.id === poolid) || this.pools[0] this.current = this.pools.find(p => p.id === poolid) || this.pools[0]
}, },

View File

@ -12,277 +12,279 @@
@hidden="resetModal" @hidden="resetModal"
@ok="handleOk" @ok="handleOk"
@show="loadBalance" @show="loadBalance"
><b-overlay
:show="channels.length === 0"
rounded="sm"
> >
<template #overlay> <template #modal-header="" />
<div class="text-center"> <b-overlay
<p> :show="channels.length === 0"
IBC Module is not enabled. rounded="sm"
</p> >
</div> <template #overlay>
</template> <div class="text-center">
<validation-observer ref="simpleRules"> <p>
<b-form> IBC Module is not enabled.
<b-row> </p>
<b-col> </div>
<b-form-group </template>
label="Sender" <validation-observer ref="simpleRules">
label-for="Account" <b-form>
> <b-row>
<b-input-group class="mb-25"> <b-col>
<b-input-group-prepend is-text> <b-form-group
<b-avatar label="Sender"
:src="account?account.logo:''" label-for="Account"
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 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 <b-form-input
id="Amount" :value="account?account.addr:address"
v-model="amount" readonly
:state="errors.length > 0 ? false:null" />
placeholder="Input a number" </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" type="number"
/> />
<b-input-group-append is-text> <small class="text-danger">{{ errors[0] }}</small>
{{ printDenom() }} </validation-provider>
</b-input-group-append> </b-form-group>
</b-input-group> </b-col>
<small class="text-danger">{{ errors[0] }}</small> <b-col cols="12">
</validation-provider> <b-form-group
</b-form-group> label="Memo"
</b-col> label-for="Memo"
</b-row>
<b-row>
<b-col>
<b-form-group
label="Destination"
label-for="destination"
>
<validation-provider
#default="{ errors }"
rules="required"
name="destination"
> >
<v-select <validation-provider
v-model="destination" v-slot="{ errors }"
name="destination" name="memo"
: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"
> >
<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" v-model="wallet"
name="wallet" stacked
value="keplr" class="demo-inline-spacing"
class="d-none d-md-block"
> >
Keplr <b-form-radio
</b-form-radio> v-model="wallet"
<b-form-radio name="wallet"
v-model="wallet" value="keplr"
name="wallet" class="d-none d-md-block"
value="ledgerUSB" >
> Keplr
<small>Ledger(USB)</small> </b-form-radio>
</b-form-radio> <b-form-radio
<b-form-radio v-model="wallet"
v-model="wallet" name="wallet"
name="wallet" value="ledgerUSB"
value="ledgerBle" >
class="mr-0" <small>Ledger(USB)</small>
> </b-form-radio>
<small>Ledger(Bluetooth)</small> <b-form-radio
</b-form-radio> v-model="wallet"
</b-form-radio-group> name="wallet"
<small class="text-danger">{{ errors[0] }}</small> value="ledgerBle"
</validation-provider> class="mr-0"
</b-form-group> >
</b-col> <small>Ledger(Bluetooth)</small>
</b-row> </b-form-radio>
</b-form> </b-form-radio-group>
</validation-observer> <small class="text-danger">{{ errors[0] }}</small>
{{ error }} </validation-provider>
</b-overlay></b-modal> </b-form-group>
</b-col>
</b-row>
</b-form>
</validation-observer>
{{ error }}
</b-overlay></b-modal>
</div> </div>
</template> </template>