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

138 lines
3.8 KiB
Vue
Raw Normal View History

2022-04-22 06:05:56 +03:00
<template>
<b-tab-item :label="$t('unlock')">
<div class="p">
{{ $t('unlockTabDesc') }}
</div>
<b-field :label="$t('amountToUnlock')" expanded>
<b-field :class="hasErrorAmount ? 'is-warning' : ''">
<b-input
v-model="computedAmountToUnlock"
step="0.01"
:min="minAmount"
:max="maxAmountToUnlock"
custom-class="hide-spinner"
:placeholder="$t('amount')"
:use-html5-validation="false"
expanded
></b-input>
<div class="control has-button">
<button
class="button is-primary is-small is-outlined"
@mousedown.prevent
@click="setMaxAmountToUnlock"
>
{{ $t('max') }}
</button>
</div>
</b-field>
</b-field>
<div class="label-with-value">
{{ $t('lockedBalance') }}: <span><number-format :value="maxAmountToUnlock" /> TORN</span>
</div>
<b-tooltip
class="is-block"
:label="unlockMsgErr"
position="is-top"
:active="!hasLockedBalance || !canWithdraw"
multilined
>
<b-button :disabled="disableUnlock" type="is-primary is-fullwidth" outlined @click="onUnlock">
{{ $t('unlock') }}
</b-button>
</b-tooltip>
</b-tab-item>
</template>
<script>
import { fromWei } from 'web3-utils'
import { BigNumber as BN } from 'bignumber.js'
import { mapActions, mapState, mapGetters } from 'vuex'
import { debounce } from '@/utils'
import NumberFormat from '@/components/NumberFormat'
export default {
components: {
NumberFormat
},
inject: ['close', 'formatNumber'],
data() {
return {
amountToUnlock: '',
minAmount: '0',
hasErrorAmount: false
}
},
computed: {
...mapState('torn', ['signature', 'balance', 'allowance']),
...mapState('governance/gov', ['lockedBalance', 'timestamp', 'currentDelegate']),
...mapGetters('token', ['toDecimals']),
...mapGetters('txHashKeeper', ['addressExplorerUrl']),
unlockMsgErr() {
if (this.hasLockedBalance && !this.canWithdraw) {
return this.$t('tokensLockedUntil', {
date: this.$moment.unix(this.timestamp).format('llll')
})
} else {
return this.$t('pleaseLockTornFirst')
}
},
maxAmountToUnlock() {
return fromWei(this.lockedBalance)
},
hasLockedBalance() {
return !new BN(this.lockedBalance).isZero()
},
disableUnlock() {
return !Number(this.amountToUnlock) || !this.hasLockedBalance || !this.canWithdraw
},
canWithdraw() {
return Date.now() > Number(this.timestamp) * 1000
},
computedAmountToUnlock: {
get() {
return this.amountToUnlock
},
set(value) {
this.amountToUnlock = this.formatNumber(value)
debounce(this.validateUnlock, this.amountToUnlock)
}
}
},
methods: {
...mapActions('governance/gov', ['unlock']),
async onUnlock() {
this.$store.dispatch('loading/enable', { message: this.$t('preparingTransactionData') })
await this.unlock({ amount: this.amountToUnlock })
this.$store.dispatch('loading/disable')
this.close()
},
setMaxAmountToUnlock() {
this.computedAmountToUnlock = this.maxAmountToUnlock
},
validateUnlock(value) {
this.amountToUnlock = this.validateAmount(value, this.maxAmountToUnlock)
},
validateAmount(value, maxAmount) {
this.hasErrorAmount = false
let amount = new BN(value)
if (amount.isZero()) {
amount = this.minAmount
this.hasErrorAmount = true
} else if (amount.lt(this.minAmount)) {
amount = this.minAmount
this.hasErrorAmount = true
} else if (amount.gt(maxAmount)) {
amount = maxAmount
this.hasErrorAmount = true
}
return amount.toString(10)
}
}
}
</script>