fix: withdraw modal

components/withdraw/Withdraw.vue

@@ -189,7 +189,7 @@ export default {
     }
   },
   computed: {
-    ...mapState('application', ['note', 'errors', 'withdrawType', 'ethToReceive']),
+    ...mapState('application', ['note', 'withdrawType', 'ethToReceive']),
     ...mapState('relayer', ['isLoadingRelayers']),
     ...mapGetters('txHashKeeper', ['txExplorerUrl']),
     ...mapGetters('application', ['isNotEnoughTokens', 'selectedStatisticCurrency']),
@@ -291,24 +291,6 @@ export default {
         }
       }
     },
-    errors: {
-      handler(errors) {
-        console.log('error', errors)
-        this.error = {
-          type: errors.length ? this.$t('error') : null,
-          message: errors[errors.length - 1]
-        }
-        if (this.error.message) {
-          this.$store.dispatch('notice/addNoticeWithInterval', {
-            notice: {
-              untranslatedTitle: this.error.message,
-              type: 'warning'
-            }
-          })
-        }
-      },
-      deep: true
-    },
     withdrawNote: {
       async handler(withdrawNote) {
         this.error = {
@@ -450,7 +432,7 @@ export default {
         console.log(`Get logs: ${err.message}`)
       }
     },
-    onWithdraw() {
+    async onWithdraw() {
       const note = this.withdrawNote.split('-')[4]
       if (note.length !== 126) {
         this.error = {
@@ -459,14 +441,26 @@ export default {
         }
         return
       }
+
       try {
         this.withdrawAddress = toChecksumAddress(this.withdrawAddress)
-        this.$store.dispatch('application/prepareWithdraw', {
+      } catch {
+        this.error = {
+          type: this.$t('validationError'),
+          message: this.$t('recipientAddressIsInvalid')
+        }
+        return
+      }
+
+      try {
+        this.$store.dispatch('loading/enable', { message: this.$t('generatingProof') })
+
+        await this.$store.dispatch('application/prepareWithdraw', {
           note: this.withdrawNote,
           recipient: this.withdrawAddress
         })
-        this.error.type = null
-        this.currentModal = this.$buefy.modal.open({
+
+        this.$buefy.modal.open({
           parent: this,
           component: WithdrawModalBox,
           hasModalCard: true,
@@ -476,12 +470,20 @@ export default {
             withdrawType: this.withdrawType
           }
         })
-      } catch (e) {
+      } catch (err) {
         this.error = {
-          type: this.$t('validationError'),
-          message: this.$t('recipientAddressIsInvalid')
+          type: this.$t('error'),
+          message: err.message
         }
-        console.error('error', e)
+
+        this.$store.dispatch('notice/addNoticeWithInterval', {
+          notice: {
+            untranslatedTitle: err.message,
+            type: 'warning'
+          }
+        })
+      } finally {
+        this.$store.dispatch('loading/disable')
       }
     },
     onSettings() {

components/withdraw/WithdrawModalBox.vue

@@ -5,7 +5,7 @@
       <button type="button" class="delete" @click="$emit('close')" />
     </header>
     <div class="note" data-test="withdrawal_confirmation_text">
-      {{ message }}
+      {{ $t('yourZkSnarkProofHasBeenSuccesfullyGenerated') }}
     </div>
     <b-button type="is-primary is-fullwidth" data-test="withdrawal_confirm_button" @click="_sendWithdraw">
       {{ $t('confirm') }}
@@ -14,7 +14,6 @@
 </template>
 <script>
 /* eslint-disable no-console */
-import { mapState } from 'vuex'
 
 export default {
   props: {
@@ -27,13 +26,7 @@ export default {
       required: true
     }
   },
-  data() {
-    return {
-      message: ''
-    }
-  },
   computed: {
-    ...mapState('application', ['notes', 'errors']),
     withdrawalMethod() {
       if (this.withdrawType === 'wallet') {
         return 'application/withdraw'
@@ -42,24 +35,6 @@ export default {
       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') })

store/application.js

@@ -55,7 +55,6 @@ const state = () => {
     note: null,
     commitment: null,
     prefix: null,
-    errors: [],
     notes: {},
     statistic: defaultStatistics,
     ip: {},
@@ -80,12 +79,6 @@ const mutations = {
   REMOVE_PROOF(state, { note }) {
     this._vm.$delete(state.notes, note)
   },
-  SAVE_ERROR(state, message) {
-    state.errors.push(message)
-  },
-  REMOVE_ERRORS(state) {
-    this._vm.$set(state, 'errors', [])
-  },
   SAVE_LAST_INDEX(state, { nextDepositIndex, anonymitySet, currency, amount }) {
     const currentState = state.statistic[currency][amount]
     this._vm.$set(state.statistic[currency], `${amount}`, { ...currentState, nextDepositIndex, anonymitySet })
@@ -765,7 +758,6 @@ const actions = {
     return { args, proof }
   },
   async prepareWithdraw({ dispatch, getters, commit }, { note, recipient }) {
-    commit('REMOVE_ERRORS')
     commit('REMOVE_PROOF', { note })
     try {
       const parsedNote = parseNote(note)
@@ -789,7 +781,7 @@ const actions = {
       commit('SAVE_PROOF', { proof, args, note })
     } catch (e) {
       console.error('prepareWithdraw', e)
-      commit('SAVE_ERROR', e.message)
+      throw new Error(e.message)
     }
   },
   async withdraw({ state, rootState, dispatch, getters }, { note }) {
@@ -951,7 +943,6 @@ const actions = {
       }
     } catch (e) {
       console.error(`Method loadWithdrawalData has error: ${e}`)
-      commit('SAVE_ERROR', e.message)
     }
   },
   calculateEthToReceive({ commit, state, rootGetters }, { currency }) {