classic-ui/components/DepositModalBox.vue
2022-06-15 16:32:38 +10:00

152 lines
4.8 KiB
Vue

<template>
<div class="modal-card box box-modal">
<header class="box-modal-header is-spaced">
<div class="box-modal-title">{{ $t('yourNote') }}</div>
<button type="button" class="delete" @click="$emit('close')" />
</header>
<div class="note">
<div>{{ $t('pleaseBackupYourNote') }}</div>
<div>{{ $t('treatYourNote') }}</div>
</div>
<div class="znote">
{{ prefix }}-{{ note }}
<b-tooltip :label="tooltipCopy" position="is-top">
<button
v-clipboard:copy="`${prefix}-${note}`"
v-clipboard:success="onCopy"
class="button is-primary has-icon"
>
<span class="icon icon-copy"></span>
</button>
</b-tooltip>
<b-tooltip :label="$t('saveNote')" position="is-top">
<button class="button is-primary has-icon" @click="onSave">
<span class="icon icon-save"></span>
</button>
</b-tooltip>
</div>
<div v-show="isEnabledSaveFile" class="note">
{{ $t('saveAsFile') }} <span class="has-text-primary">{{ filename }}</span>
</div>
<gas-price-slider v-if="!eipSupported" v-model="gasPrice" @validate="onGasPriceValidate" />
<template v-if="!isSetupAccount">
<i18n tag="div" path="yourDontHaveAccount" class="notice">
<template v-slot:account>
<a @click="_redirectToAccount">{{ $t('account.button') }}</a>
</template>
</i18n>
</template>
<b-checkbox v-if="isSetupAccount" v-model="isEncrypted">
<i18n v-show="isSetupAccount" tag="div" path="iEncryptedTheNote">
<template v-slot:address>
<b-tooltip :label="tooltipCopy" position="is-top">
<a class="has-text-primary" @click.prevent.stop="copyNoteAccount">{{ getEncryptAccount }}</a>
</b-tooltip>
</template>
</i18n>
</b-checkbox>
<template v-if="!isSetupAccount || !isEncrypted">
<b-checkbox v-model="isBackuped" data-test="backup_note_checkbox">{{
$t('iBackedUpTheNote')
}}</b-checkbox>
<div v-if="isBackuped && isIPFS" class="notice is-warning">
<div class="notice__p">{{ $t('yourNoteWontBeSaved') }}</div>
</div>
</template>
<connect-button v-if="!isLoggedIn" type="is-primary is-fullwidth" />
<b-button
v-else
type="is-primary is-fullwidth"
:disabled="disableButton || (!isValidGasPrice && !eipSupported)"
data-test="send_deposit_button"
@click="_sendDeposit"
>
{{ $t('sendDeposit') }}
</b-button>
</div>
</template>
<script>
/* eslint-disable no-console */
import { mapActions, mapState, mapGetters } from 'vuex'
import { sliceAddress } from '@/utils'
import GasPriceSlider from '@/components/GasPriceSlider'
import { ConnectButton } from '@/components/web3Connect'
export default {
components: {
ConnectButton,
GasPriceSlider
},
data() {
return {
isBackuped: false,
tooltipCopy: this.$t('clickToCopy'),
gasPrice: undefined,
isValidGasPrice: false,
isEncrypted: false,
copyTimer: null
}
},
computed: {
...mapGetters('metamask', ['isLoggedIn']),
...mapGetters('gasPrices', ['eipSupported']),
...mapGetters('txHashKeeper', ['addressExplorerUrl']),
...mapGetters('encryptedNote', ['isSetupAccount', 'accounts', 'isEnabledSaveFile']),
...mapState('application', ['note', 'prefix']),
isIPFS() {
return this.$isLoadedFromIPFS()
},
filename() {
return `backup-${this.prefix}-${this.note.slice(0, 10)}.txt`
},
getEncryptAccount() {
return sliceAddress(this.accounts.encrypt)
},
disableButton() {
if (this.isBackuped) {
return !this.isBackuped
} else {
return !this.isEncrypted || !this.isSetupAccount
}
}
},
beforeMount() {
this.isEncrypted = this.isSetupAccount
},
beforeDestroy() {
clearTimeout(this.copyTimer)
},
methods: {
...mapActions('application', ['sendDeposit', 'saveFile']),
...mapActions('encryptedNote', ['redirectToAccount']),
onCopy() {
this.tooltipCopy = this.$t('copied')
this.copyTimer = setTimeout(() => {
this.tooltipCopy = this.$t('clickToCopy')
}, 1500)
},
onSave() {
this.saveFile({ note: this.note, prefix: this.prefix })
},
_redirectToAccount() {
this.redirectToAccount()
this.$emit('close')
},
async _sendDeposit() {
this.$store.dispatch('loading/enable', { message: this.$t('preparingTransactionData') })
await this.sendDeposit({ gasPrice: this.gasPrice, isEncrypted: this.isEncrypted })
this.$store.dispatch('loading/disable')
this.$parent.close()
},
onGasPriceValidate(value) {
this.isValidGasPrice = value
},
async copyNoteAccount() {
await this.$copyText(this.accounts.encrypt)
this.onCopy()
}
}
}
</script>