classic-ui/components/Deposit.vue
Danil Kovtonyuk 44f31f8b9f
init
2022-04-22 13:14:19 +10:00

177 lines
5.5 KiB
Vue

<template>
<b-tab-item :label="$t('deposit')">
<fieldset>
<b-field :label="$t('token')">
<b-dropdown v-model="selectedToken" expanded aria-role="list">
<div slot="trigger" class="control">
<div class="input">
<span>{{ selectedCurrency }}</span>
</div>
</div>
<b-dropdown-item v-for="(token, key) in tokens" :key="key" aria-role="listitem" :value="key">
{{ token.symbol }}
</b-dropdown-item>
</b-dropdown>
</b-field>
<b-field>
<template slot="label">
{{ $t('amount') }}
<b-tooltip :label="$t('amountTooltip')" size="is-small" position="is-right" multilined>
<button class="button is-primary has-icon">
<span class="icon icon-info"></span>
</button>
</b-tooltip>
</template>
<b-steps
v-model="currentStep"
size="is-small"
:has-navigation="false"
:mobile-mode="null"
@input="changeAmount"
>
<template v-for="({ amount, address }, key) in amounts">
<b-step-item :key="key" :label="shortenAmount(amount)" :clickable="address !== ''"></b-step-item>
</template>
</b-steps>
</b-field>
</fieldset>
<connect-button v-if="!isLoggedIn" type="is-primary is-fullwidth" />
<b-button v-else type="is-primary is-fullwidth" :loading="isDepositBtnClicked" @click="onDeposit">
{{ $t('depositButton') }}
</b-button>
</b-tab-item>
</template>
<script>
/* eslint-disable no-console */
import { mapGetters } from 'vuex'
import ApproveModalBox from '@/components/ApproveModalBox'
import BalanceModalBox from '@/components/BalanceModalBox'
import DepositModalBox from '@/components/DepositModalBox'
import { ConnectButton } from '@/components/web3Connect'
export default {
components: {
ConnectButton
},
data() {
return {
currentStep: 0,
amounts: [],
isDepositBtnClicked: false,
isDepositModalOpened: false
}
},
computed: {
...mapGetters('token', ['isSufficientAllowance', 'isSufficientBalance']),
...mapGetters('metamask', ['networkConfig', 'netId', 'isLoggedIn', 'nativeCurrency']),
...mapGetters('application', ['selectedCurrency']),
selectedAmount: {
get() {
return this.$store.state.application.selectedInstance.amount
},
set(selectedAmount) {
const currency = this.selectedToken
const amount = selectedAmount
this.$store.commit('application/SET_SELECTED_INSTANCE', { currency, amount })
this.$store.dispatch('application/setAndUpdateStatistic', { currency, amount })
}
},
tokens() {
return this.networkConfig.tokens
},
selectedToken: {
get() {
return this.$store.state.application.selectedInstance.currency
},
set(selectedToken) {
this.currentStep = 0
const currency = selectedToken
const amount = this.sortAmounts(currency)[0].amount
this.$store.commit('application/SET_SELECTED_INSTANCE', { currency, amount })
this.$store.dispatch('application/setAndUpdateStatistic', { currency, amount })
}
}
},
watch: {
netId: {
handler(netId) {
this.sortAmounts()
}
}
},
beforeMount() {
this.sortAmounts()
},
methods: {
shortenAmount(n) {
return `${this.$n(n, 'compact')} ${this.tokens[this.selectedToken].symbol}`
},
changeAmount(i) {
this.selectedAmount = Number(this.amounts[i].amount)
},
sortAmounts(currency = this.selectedToken) {
this.amounts = Object.entries(this.tokens[currency].instanceAddress)
.sort((a, b) => {
return a[0] - b[0]
})
.map(([amount, address]) => {
return { amount: Number(amount), address }
})
return this.amounts
},
openDepositModal() {
this.$store.dispatch('application/prepareDeposit', {
prefix: `tornado-${this.selectedToken}-${this.selectedAmount}-${this.netId}`
})
const depositModal = this.$buefy.modal.open({
parent: this,
component: DepositModalBox,
hasModalCard: true,
width: 440,
customClass: 'is-pinned',
canCancel: false
})
depositModal.$on('close', () => {
this.isDepositModalOpened = false
})
},
async onDeposit() {
const onApproval = () => {
if (this.isSufficientAllowance) {
if (!this.isDepositModalOpened) {
this.isDepositModalOpened = true
this.openDepositModal()
}
}
}
this.isDepositBtnClicked = true
await this.$store.dispatch('token/fetchTokenAllowance', {}, { root: true })
await this.$store.dispatch('token/fetchTokenBalance', {}, { root: true })
await this.$store.dispatch('metamask/updateAccountBalance')
if (!this.isSufficientBalance) {
this.$buefy.modal.open({
parent: this,
component: BalanceModalBox,
hasModalCard: true,
width: 440
})
} else if (this.isSufficientAllowance || this.selectedToken === this.nativeCurrency) {
this.openDepositModal()
} else {
const parent = this
const approveModal = this.$buefy.modal.open({
parent,
component: ApproveModalBox,
hasModalCard: true,
width: 440
})
approveModal.$on('close', onApproval)
}
this.isDepositBtnClicked = false
}
}
}
</script>