add price, pairs select

This commit is contained in:
liangping 2021-11-22 17:41:55 +08:00
parent 88df26263d
commit 66af13f684
4 changed files with 82 additions and 20 deletions

View File

@ -14,11 +14,12 @@ export default class OsmosAPI {
async getOHCL4Pairs(from, to) { async getOHCL4Pairs(from, to) {
this.exe_time = '' this.exe_time = ''
const ohlc = await Promise.all( return Promise.all(
[fetch(`https://api.coingecko.com/api/v3/coins/${from}/ohlc?vs_currency=usd&days=7`).then(res => res.json()), [fetch(`https://api.coingecko.com/api/v3/coins/${from}/ohlc?vs_currency=usd&days=7`).then(res => res.json()),
fetch(`https://api.coingecko.com/api/v3/coins/${to}/ohlc?vs_currency=usd&days=7`).then(res => res.json())], fetch(`https://api.coingecko.com/api/v3/coins/${to}/ohlc?vs_currency=usd&days=7`).then(res => res.json())],
) ).then(ohlc => {
const output = [] const output = []
console.log(ohlc)
ohlc[0].forEach((e, i) => { ohlc[0].forEach((e, i) => {
console.log(e, i, ohlc[1][i]) console.log(e, i, ohlc[1][i])
const price = [e[0]] const price = [e[0]]
@ -27,8 +28,28 @@ export default class OsmosAPI {
} }
output.push(price) output.push(price)
}) })
return output return output
})
}
getCoinGeckoId(symbol) {
this.pairs = {
ATOM: 'cosmos',
OSMO: 'osmosis',
IRIS: 'iris-network',
AKT: 'akash-network',
}
return this.pairs[symbol]
}
getIBCDenomHash(symbol) {
this.IBChash = {
ATOM: 'cosmos',
OSMO: 'uosmo',
IRIS: 'iris-network',
AKT: 'akash-network',
}
return this.IBChash[symbol]
} }
// Custom Module // Custom Module

View File

@ -9,7 +9,6 @@
<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-button-3"
v-ripple.400="'rgba(113, 102, 240, 0.15)'"
variant="flat-primary" variant="flat-primary"
class="mr-3" class="mr-3"
@click="show = !show" @click="show = !show"
@ -45,11 +44,11 @@
</b-table> </b-table>
</b-popover> </b-popover>
<div class="mr-3"> <div class="mr-3">
59300 {{ latestPrice }}
</div> </div>
<div class="mr-3"> <div class="mr-3">
<small>24h Change</small> <small>24h Change</small>
<div>460 +0.78%</div> <div>{{ changesIn24H }}%</div>
</div> </div>
<div class="mr-3"> <div class="mr-3">
<small>24h High</small> <small>24h High</small>
@ -68,7 +67,10 @@
sm="12" sm="12"
> >
<b-card> <b-card>
<Place /> <Place
:base="base"
:target="target"
/>
</b-card> </b-card>
</b-col> </b-col>
</b-row> </b-row>
@ -107,11 +109,23 @@ export default {
], ],
} }
}, },
computed: {
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) : '-'
},
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) : '-'
},
},
created() { created() {
const { base, target } = this.$route.params const { base, target } = this.$route.params
this.init(base, target) this.init(base, target)
// $http.osmosis // $http.osmosis
this.$http.osmosis.getOHCL4Pairs('cosmos', 'osmosis').then(data => { this.$http.osmosis.getOHCL4Pairs(this.$http.osmosis.getCoinGeckoId(this.base), this.$http.osmosis.getCoinGeckoId(this.target)).then(data => {
console.log(data) console.log(data)
}) })
}, },

View File

@ -16,7 +16,11 @@
no-body no-body
/> />
</b-tabs> </b-tabs>
<PlaceForm :type="tabIndex" /> <PlaceForm
:type="tabIndex"
:base="base"
:target="target"
/>
</div> </div>
</template> </template>
@ -32,6 +36,16 @@ export default {
BTabs, BTabs,
PlaceForm, PlaceForm,
}, },
props: {
base: {
type: String,
required: true,
},
target: {
type: String,
required: true,
},
},
data: () => ({ data: () => ({
tabIndex: 0, tabIndex: 0,
}), }),

View File

@ -122,22 +122,35 @@ export default {
}, },
props: { props: {
type: { type: {
type: Number,
required: true,
},
base: {
type: String,
required: true,
},
target: {
type: String, type: String,
required: true, required: true,
}, },
}, },
data() { data() {
return { return {
base: 'ATOM',
target: 'OSMO',
available: 0, available: 0,
amount: 0, amount: 0,
total: 0, total: 0,
price: 50000, // price: 50000,
slippage: 0.05, slippage: 0.05,
marks: [0, 0.01, 0.025, 0.05], marks: [0, 0.01, 0.025, 0.05],
} }
}, },
computed: {
price() {
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) : '-'
},
},
methods: { methods: {
changeAmount() { changeAmount() {
this.total = this.amount * this.price this.total = this.amount * this.price