classic-ui/components/withdraw/WithdrawModalBox.vue

<template>
  <div class="modal-card box box-modal">
    <header class="box-modal-header is-spaced">
      <div class="box-modal-title">{{ $t('withdrawalConfirmation') }}</div>
      <button type="button" class="delete" @click="$emit('close')" />
    </header>
    <div class="note" data-test="withdrawal_confirmation_text">
      {{ message }}
    </div>
    <b-button type="is-primary is-fullwidth" data-test="withdrawal_confirm_button" @click="_sendWithdraw">
      {{ $t('confirm') }}
    </b-button>
  </div>
</template>
<script>
/* eslint-disable no-console */
import { mapState } from 'vuex'

export default {
  props: {
    note: {
      type: String,
      required: true
    },
    withdrawType: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      message: ''
    }
  },
  computed: {
    ...mapState('application', ['notes', 'errors']),
    withdrawalMethod() {
      if (this.withdrawType === 'wallet') {
        return 'application/withdraw'
      }

      return 'relayer/relayTornadoWithdraw'
    }
  },
  watch: {
    notes(newNotes) {
      if (newNotes[this.note]) {
        this.$store.dispatch('loading/disable')
        this.message = this.$t('yourZkSnarkProofHasBeenSuccesfullyGenerated')
      }
    },
    errors: {
      handler(type) {
        this.$store.dispatch('loading/disable')
        this.$parent.close()
      },
      deep: true
    }
  },
  beforeCreate() {
    this.$store.dispatch('loading/enable', { message: this.$t('generatingProof') })
  },
  methods: {
    async _sendWithdraw() {
      this.$store.dispatch('loading/enable', { message: this.$t('preparingTransactionData') })

      try {
        await this.$store.dispatch(this.withdrawalMethod, {
          note: this.note
        })
        this.$root.$emit('resetWithdraw')
      } catch (e) {
        console.error(e)
        this.$store.dispatch('notice/addNoticeWithInterval', {
          notice: {
            untranslatedTitle: e.message,
            type: 'danger'
          },
          interval: 3000
        })
      } finally {
        this.$store.dispatch('loading/disable')
        this.$parent.close()
      }
    }
  }
}
</script>