improve UX

This commit is contained in:
liangping 2021-12-05 12:20:29 +08:00
parent 543118ba92
commit dcd26824f9
5 changed files with 56 additions and 23 deletions

View File

@ -75,6 +75,16 @@
</small>
</div>
</b-card-body>
<b-card-body class="pt-0">
<b-button
v-b-modal.withdraw-commission-window
block
size="sm"
variant="primary"
>
Withdraw Commission
</b-button>
</b-card-body>
<operation-withdraw-commission-component
:validator-address="validator"
:address="address"
@ -84,12 +94,13 @@
<script>
import {
BCard, BCardHeader, BCardTitle, BCardBody, BMediaBody, BMedia, BMediaAside, BAvatar,
BCard, BCardHeader, BCardTitle, BCardBody, BMediaBody, BMedia, BMediaAside, BAvatar, BButton,
} from 'bootstrap-vue'
import OperationWithdrawCommissionComponent from './OperationWithdrawCommissionComponent.vue'
export default {
components: {
BButton,
BCard,
BCardHeader,
BCardTitle,

View File

@ -111,11 +111,10 @@ export default {
if (cached) {
this.validators = cached
} else {
}
this.$http.getValidatorList().then(res => {
this.validators = res
})
}
this.initBlocks()
},
beforeDestroy() {

View File

@ -13,6 +13,10 @@
</div>
</b-alert>
<b-row>
<span
v-if="uptime.length===0"
class="text-danger"
> Your node is out of active validator set</span>
<b-col
v-for="(x,index) in uptime"
:key="index"

View File

@ -130,7 +130,7 @@
class="mr-25"
>
<feather-icon
icon="PlusIcon"
icon="LogInIcon"
class="d-md-none"
/><small class="d-none d-md-block">Delegate</small>
</b-button>
@ -141,7 +141,7 @@
size="sm"
>
<feather-icon
icon="MinusIcon"
icon="ShareIcon"
class="d-md-none"
/><small class="d-none d-md-block"> Withdraw Rewards</small>
</b-button>

View File

@ -191,22 +191,22 @@
<div
v-for="b,i in balances[acc.addr]"
:key="i"
class="d-flex justify-content-between align-items-center"
class="d-flex justify-content-between"
>
<div
class="ml-25 font-weight-bolder text-uppercase text-success"
class="ml-25 font-weight-bolder text-uppercase text-success d-flex flex-column text-left"
title="Balance"
>
{{ formatDenom(b.denom) }}
{{ formatAmount(b.amount, b.denom) }} {{ formatDenom(b.denom) }}
<span class="font-small-2 text-muted text-nowrap">{{ currency }}{{ formatCurrency(b.amount, b.denom) }}</span>
</div>
<div class="d-flex flex-column text-right">
<span class="font-weight-bold mb-0">{{ currency }}{{ formatPrice(b.denom) }}</span>
<small
:class="priceColor(b.denom)"
class="py-0"
>{{ formatChanges(b.denom) }}</small>
</div>
<div class="d-flex flex-column text-right">
<span class="font-weight-bold mb-0">{{ formatAmount(b.amount, b.denom) }}</span>
<span class="font-small-2 text-muted text-nowrap">{{ currency }}{{ formatCurrency(b.amount, b.denom) }}</span>
</div>
</div>
<div
v-for="b,i in delegations[acc.addr]"
@ -214,19 +214,19 @@
class="d-flex justify-content-between align-items-center"
>
<div
class="ml-25 font-weight-bolder text-uppercase text-primary"
title="Delegations"
class="ml-25 font-weight-bolder text-uppercase text-primary d-flex flex-column text-left"
title="Balance"
>
{{ formatDenom(b.denom) }}
{{ formatAmount(b.amount, b.denom) }} {{ formatDenom(b.denom) }}
<span class="font-small-2 text-muted text-nowrap">{{ currency }}{{ formatCurrency(b.amount, b.denom) }}</span>
</div>
<div class="d-flex flex-column text-right">
<span class="font-weight-bold mb-0">{{ currency }}{{ formatPrice(b.denom) }}</span>
<small
:class="priceColor(b.denom)"
class="py-0"
>{{ formatChanges(b.denom) }}</small>
</div>
<div class="d-flex flex-column text-right">
<span class="font-weight-bold mb-0">{{ formatAmount(b.amount, b.denom) }}</span>
<span class="font-small-2 text-muted text-nowrap">{{ currency }}{{ formatCurrency(b.amount, b.denom) }}</span>
</div>
</div>
</app-collapse-item>
</app-collapse>
@ -515,8 +515,16 @@ export default {
})
this.$http.getStakingDelegations(add.addr, chains[add.chain]).then(res => {
if (res.delegation_responses) {
const delegation = res.delegation_responses.map(x => x.balance)
this.$set(this.delegations, add.addr, delegation)
const delegation = res.delegation_responses.map(x => x.balance).reduce((t, c) => {
const t1 = t
if (t1[c.denom]) {
t1[c.denom] += Number(c.amount)
} else {
t1[c.denom] = Number(c.amount)
}
return t1
}, {})
this.$set(this.delegations, add.addr, Object.keys(delegation).map(x => ({ amount: String(delegation[x]), denom: x })))
}
}).catch(() => {})
})
@ -536,10 +544,12 @@ export default {
this.$bvModal.hide('add-account')
},
formatDenom(v) {
if (!v) return ''
const denom = (v.startsWith('ibc') ? this.ibcDenom[v] : v)
return formatTokenDenom(denom)
},
formatAmount(v, denom = 'uatom') {
if (!v) return ''
return formatTokenAmount(v, 2, denom)
},
formatAddr(v) {
@ -577,6 +587,15 @@ export default {
const price = this.getChanges(denom)
return price === 0 ? '' : `${parseFloat(price.toFixed(2))}%`
},
formatPrice(denom) {
const d2 = this.formatDenom(denom)
const quote = this.$store.state.chains.quotes[d2]
if (quote) {
const price = quote[this.currency2]
return price
}
return 0
},
formatBalance(v) {
let total = 0
const balance = this.balances[v]