classic-ui/components/governance/manage/tabs/DelegateTab.vue

85 lines
2.2 KiB
Vue
Raw Normal View History

2022-04-22 06:05:56 +03:00
<template>
<b-tab-item :label="$t('delegate')">
<div class="p">
{{ $t('delegateTabDesc') }}
</div>
<b-field :label="$t('recipient')">
<b-input
v-model="delegatee"
:placeholder="$t('address')"
:size="!delegatee ? '' : isValidAddress ? 'is-primary' : 'is-warning'"
></b-input>
</b-field>
<div class="label-with-value">
{{ $t('currentDelegate') }}:
2022-06-06 17:26:00 +03:00
<a target="_blank" :href="addressExplorerUrl(currentDelegate)" rel="noopener noreferrer">{{
delegateMsg
}}</a>
2022-04-22 06:05:56 +03:00
</div>
<div>
<b-tooltip
class="is-block"
:label="`${$t('pleaseLockBalance')}`"
position="is-top"
:active="!canDelegate"
multilined
>
<b-button
:disabled="!canDelegate || !isValidAddress"
type="is-primary is-fullwidth"
outlined
@click="onDelegate"
>
{{ $t('delegate') }}
</b-button>
</b-tooltip>
</div>
</b-tab-item>
</template>
<script>
import { isAddress } from 'web3-utils'
import { BigNumber as BN } from 'bignumber.js'
import { mapActions, mapState, mapGetters } from 'vuex'
export default {
data() {
return {
delegatee: ''
}
},
inject: ['close'],
computed: {
...mapState('torn', ['signature', 'balance', 'allowance']),
...mapState('governance/gov', ['lockedBalance', 'timestamp', 'currentDelegate']),
...mapGetters('token', ['toDecimals']),
...mapGetters('txHashKeeper', ['addressExplorerUrl']),
isValidAddress() {
return isAddress(this.delegatee)
},
canDelegate() {
return new BN(this.lockedBalance).gt(new BN('0'))
},
canUndelegate() {
return this.currentDelegate !== '0x0000000000000000000000000000000000000000'
},
delegateMsg() {
if (!this.canUndelegate) {
return this.$t('none')
} else {
return this.currentDelegate
}
}
},
methods: {
...mapActions('governance/gov', ['delegate']),
async onDelegate() {
this.$store.dispatch('loading/enable', { message: this.$t('preparingTransactionData') })
await this.delegate({ delegatee: this.delegatee })
this.$store.dispatch('loading/disable')
this.close()
}
}
}
</script>