classic-ui/components/settings/tabs/RelayerTab.vue

267 lines
7.7 KiB
Vue
Raw Permalink Normal View History

2022-04-22 06:05:56 +03:00
<template>
2022-05-16 15:08:17 +03:00
<b-tab-item :label="$t('relayer')" value="relayer" header-class="withdrawal_settings_relayer_tab">
2022-04-22 06:05:56 +03:00
<div class="field">
2022-05-16 15:08:17 +03:00
<b-field :label="$t('relayer')" data-test="withdrawal_settings_relayer_dropdown">
2022-04-22 06:05:56 +03:00
<b-dropdown v-model="selectedRelayer" expanded aria-role="list" @change="onChangeRelayer">
<div slot="trigger" class="control" :class="{ 'is-loading': checkingRelayer || isLoadingRelayers }">
<div class="input">
<span>{{ dropdownValue }}</span>
</div>
</div>
<b-dropdown-item
v-for="{ name, tornadoServiceFee } in relayers"
v-show="!isLoadingRelayers"
:key="name"
:value="name"
aria-role="listitem"
>
{{ getRelayerName({ name, tornadoServiceFee }) }}
</b-dropdown-item>
<b-dropdown-item value="custom" aria-role="listitem">
{{ $t('custom') }}
</b-dropdown-item>
</b-dropdown>
</b-field>
<div v-if="isCustomRelayer" class="field has-custom-field">
<b-input
ref="customInput"
v-model="customRelayerUrl"
type="url"
2022-05-16 15:08:17 +03:00
data-test="enter_relayer_url_field"
2022-04-22 06:05:56 +03:00
:placeholder="$t('pasteYourRelayerUrlorEnsRecord')"
:custom-class="hasErrorRelayer.type"
:use-html5-validation="false"
@input="onInputCustomRelayer"
></b-input>
</div>
<div class="withdraw-data is-spaced">
<div class="withdraw-data-item">
{{ $t('relayerFee') }}
<span> {{ relayer.tornadoServiceFee }}% </span>
</div>
</div>
<p v-if="hasErrorRelayer.msg" class="help" :class="hasErrorRelayer.type">
{{ hasErrorRelayer.msg }}
</p>
</div>
<eth-purchase
v-if="isEnabledEthPurchase"
v-model="ethToReceive"
:default-eth-to-receive="defaultEthToReceive"
@isValidEthToReceive="ethToReceiveErrorHandler"
/>
<WithdrawTotal
:currency="currency"
withdraw-type="relayer"
:eth-to-receive="ethToReceiveToWei"
:service-fee="relayer.tornadoServiceFee"
/>
<div class="buttons buttons__halfwidth mt-5">
2022-05-16 15:08:17 +03:00
<b-button
type="is-primary"
outlined
data-test="withdrawal_settings_reset_button"
@mousedown.prevent
@click="onReset"
>
2022-04-22 06:05:56 +03:00
{{ $t('reset') }}
</b-button>
<b-button
type="is-primary"
:disabled="isDisabledSave"
:loading="checkingRelayer || isLoadingRelayers"
2022-05-16 15:08:17 +03:00
data-test="withdrawal_settings_save_button"
2022-04-22 06:05:56 +03:00
@click="onSave"
>
{{ $t('save') }}
</b-button>
</div>
</b-tab-item>
</template>
<script>
import { mapState, mapGetters, mapMutations } from 'vuex'
import EthPurchase from '@/components/settings/EthPurchase'
import WithdrawTotal from '@/components/withdraw/WithdrawTotal'
import { debounce } from '@/utils'
const { fromWei, toWei } = require('web3-utils')
export default {
components: {
EthPurchase,
WithdrawTotal
},
inject: ['currency', 'save'],
data() {
return {
selectedRelayer: 'custom',
checkingRelayer: false,
customRelayerUrl: '',
hasErrorRelayer: { type: '', msg: '' },
isValidEthToReceive: true,
isValidRelayer: true,
ethToReceive: 0.02,
relayer: {
name: 'custom',
url: '',
address: '',
tornadoServiceFee: 0.0,
ethPrices: {
torn: '1'
}
}
}
},
computed: {
...mapGetters('token', ['toDecimals']),
...mapGetters('metamask', ['networkConfig', 'nativeCurrency']),
...mapGetters('metamask', {
networkCurrency: 'currency'
}),
...mapState('relayer', ['isLoadingRelayers']),
...mapState('relayer', {
defaultRelayer: (state) => state.selectedRelayer,
relayers: (state) => state.validRelayers
}),
...mapState('application', {
ethToReceiveFromStore: (state) => Number(fromWei(state.ethToReceive)),
defaultEthToReceive: (state) => Number(fromWei(state.defaultEthToReceive))
}),
isEnabledEthPurchase() {
return this.currency.toLowerCase() !== this.nativeCurrency
},
ethToReceiveToWei() {
return toWei(this.ethToReceive.toString())
},
isCustomRelayer() {
return this.selectedRelayer === 'custom'
},
dropdownValue() {
if (this.isLoadingRelayers) {
return this.$t('loading')
}
if (this.isCustomRelayer) {
return this.$t('custom')
}
return this.selectedRelayer
},
isDisabledSave() {
return !this.isValidRelayer || this.hasErrorRelayer.type === 'is-warning' || !this.isValidEthToReceive
}
},
watch: {
defaultRelayer: {
handler(relayer) {
this.setRelayer(relayer)
},
immediate: true
}
},
created() {
this.setEthToReceive(this.ethToReceiveFromStore)
},
mounted() {
this.$root.$on('resetSettings', this.onReset)
},
beforeDestroy() {
this.$root.$off('resetSettings', this.onReset)
},
methods: {
...mapMutations('relayer', ['SET_SELECTED_RELAYER']),
...mapMutations('application', ['SAVE_ETH_TO_RECEIVE']),
getRelayerName({ name, tornadoServiceFee }) {
return `${name} - ${tornadoServiceFee}%`
},
onInputCustomRelayer(url) {
const trimmedUrl = url.toLowerCase().trim()
if (!trimmedUrl) {
this.hasErrorRelayer = { type: '', msg: '' }
this.isValidRelayer = false
return
}
if (
window.location.protocol !== 'http:' &&
trimmedUrl.startsWith('http:') &&
!trimmedUrl.includes('.onion')
) {
this.hasErrorRelayer.type = 'is-warning'
this.hasErrorRelayer.msg = this.$t('relayerShouldSupportSSL')
this.isValidRelayer = false
return
}
debounce(this.checkRelayer, { url, name: 'custom' })
},
onChangeRelayer(keyName) {
if (keyName === 'custom') {
this.hasErrorRelayer = { type: '', msg: '' }
this.isValidRelayer = false
this.customRelayerUrl = ''
return
}
const { realUrl: url, name } = this.relayers.find((el) => el.name === keyName)
debounce(this.checkRelayer, { url, name })
},
async checkRelayer({ url, name }) {
this.hasErrorRelayer = { type: '', msg: '' }
this.isValidRelayer = false
this.checkingRelayer = true
const { isValid, error, ...relayer } = await this.$store.dispatch('relayer/setupRelayer', {
name,
url
})
if (isValid) {
this.hasErrorRelayer.type = 'is-primary'
this.hasErrorRelayer.msg = this.$t('relayerStatusOk')
this.relayer = relayer
} else {
this.hasErrorRelayer.type = 'is-warning'
this.hasErrorRelayer.msg = error
}
this.checkingRelayer = false
this.isValidRelayer = isValid
},
ethToReceiveErrorHandler(value) {
this.isValidEthToReceive = value
},
setEthToReceive(ethToReceive) {
if (this.isEnabledEthPurchase) {
this.ethToReceive = ethToReceive
}
},
setRelayer(relayer) {
this.relayer = relayer
this.selectedRelayer = relayer.name
if (this.selectedRelayer === 'custom') {
this.customRelayerUrl = relayer.url
}
},
onReset() {
this.hasErrorRelayer = { type: '', msg: '' }
this.checkingRelayer = false
this.isValidRelayer = true
this.setRelayer(this.defaultRelayer)
this.setEthToReceive(this.defaultEthToReceive)
},
onSave() {
this.SET_SELECTED_RELAYER(this.relayer)
if (this.isEnabledEthPurchase) {
this.SAVE_ETH_TO_RECEIVE({
ethToReceive: this.ethToReceiveToWei
})
}
this.save()
}
}
}
</script>