zramsay/cosmos-explorer
1
0
Fork 0
forked from cerc-io/cosmos-explorer
Code Pull Requests Actions Activity

add loading

Browse Source
This commit is contained in:
liangping 2021-11-28 21:24:29 +08:00
parent 273d382b87
commit 6a1158a47d
1 changed files with 18 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/views/OsmosisTrade.vue
View File

@ -16,7 +16,6 @@
<b-button <b-button
id="popover-trading-pairs" id="popover-trading-pairs"
variant="gradient-primary" variant="gradient-primary"
@click="show = !show"
> >
<feather-icon <feather-icon
icon="ListIcon" icon="ListIcon"
@ -26,7 +25,6 @@
{{ base }} / {{ target }} {{ base }} / {{ target }}
</h4> </h4>
<b-popover <b-popover
:show.sync="show"
target="popover-trading-pairs" target="popover-trading-pairs"
placement="rightbottom" placement="rightbottom"
triggers="hover" triggers="hover"
@ -84,9 +82,16 @@
</b-col> </b-col>
</b-row> </b-row>
<summary-price-chart <summary-price-chart
v-if="!loading"
:chart-data="marketChartData" :chart-data="marketChartData"
:min-height="150" :min-height="150"
/> />
<div
v-else
class="d-flex justify-content-center mt-3"
>
<b-spinner label="Loading..." /> {{ error }}
</div>
</b-card> </b-card>
</b-col> </b-col>
<b-col <b-col
@ -106,7 +111,7 @@
<script> <script>
import { import {
BRow, BCol, BCard, BButton, BPopover, BTable, BRow, BCol, BCard, BButton, BPopover, BTable, BSpinner,
} from 'bootstrap-vue' } from 'bootstrap-vue'
import { CoinGeckoMap, getPairName } from '@/libs/osmos' import { CoinGeckoMap, getPairName } from '@/libs/osmos'
import { formatTokenDenom } from '@/libs/data' import { formatTokenDenom } from '@/libs/data'
@ -122,6 +127,7 @@ export default {
BButton, BButton,
BPopover, BPopover,
BTable, BTable,
BSpinner,
Place, Place,
BCard, BCard,
SummaryPriceChart, SummaryPriceChart,
@ -129,6 +135,8 @@ export default {
}, },
data() { data() {
return { return {
loading: true,
error: '',
base: '', base: '',
target: '', target: '',
fields: ['pair', 'price', 'change'], fields: ['pair', 'price', 'change'],
@ -192,10 +200,10 @@ export default {
const { poolid } = this.$route.params const { poolid } = this.$route.params
this.$http.osmosis.getDenomTraces().then(x => { this.$http.osmosis.getDenomTraces().then(x => {
this.denomTrace = x this.denomTrace = x
}) this.$http.osmosis.getPools().then(pools => {
this.$http.osmosis.getPools().then(x => { this.pools = pools
this.pools = x this.init(poolid)
this.init(poolid) })
}) })
}, },
beforeRouteUpdate(to, from, next) { beforeRouteUpdate(to, from, next) {
@ -223,6 +231,7 @@ export default {
this.target = getPairName(this.current, this.denomTrace, 'target') this.target = getPairName(this.current, this.denomTrace, 'target')
this.$http.osmosis.getMarketData(CoinGeckoMap[this.base], CoinGeckoMap[this.target]).then(res => { this.$http.osmosis.getMarketData(CoinGeckoMap[this.base], CoinGeckoMap[this.target]).then(res => {
this.marketData = res this.marketData = res
this.loading = false
const start = Date.now() - 8.64e+7 const start = Date.now() - 8.64e+7
res.prices.forEach(x => { res.prices.forEach(x => {
if (x[0] > start) { if (x[0] > start) {
@ -236,6 +245,8 @@ export default {
} }
} }
}) })
}).catch(e => {
this.error = `This feature is not avalable in your country. 这个功能尚未对你的国家开放。${e}`
}) })
}, },
}, },