init

modules/account/modals/SetupAccount.vue

@@ -0,0 +1,134 @@
+<template>
+  <div class="modal-card box box-modal">
+    <header class="box-modal-header is-spaced">
+      <div class="box-modal-title">{{ $t('account.modals.setupAccount.title') }}</div>
+      <button type="button" class="delete" @click="$emit('close')" />
+    </header>
+    <div class="note">{{ $t('account.modals.setupAccount.description') }}</div>
+    <div class="field">
+      <div class="label-with-buttons">
+        <div class="label">{{ $t('account.modals.setupAccount.label') }}</div>
+        <b-button v-clipboard:copy="recoveryKey" v-clipboard:success="onCopy" type="is-primary-text">
+          {{ $t('copy') }}
+        </b-button>
+      </div>
+      <div class="notice is-recovery-key">
+        <div class="notice__p">{{ recoveryKey }}</div>
+      </div>
+    </div>
+    <b-notification class="main-notification" type="is-info" :closable="false">
+      {{ $t('account.modals.setupAccount.isNotSupportedWithHw') }}
+    </b-notification>
+    <b-checkbox v-model="isSaveOnChain" :disabled="isPartialSupport">{{
+      $t('account.modals.setupAccount.saveOnChain')
+    }}</b-checkbox>
+    <b-checkbox v-if="!isSaveOnChain" v-model="isBackuped">{{
+      $t('account.modals.setupAccount.backedUp')
+    }}</b-checkbox>
+    <b-notification
+      v-if="!isSaveOnChain && warningMessage"
+      class="main-notification"
+      type="is-warning"
+      :closable="false"
+    >
+      {{ warningMessage }}
+    </b-notification>
+    <b-notification
+      v-if="setupAccountRequest.isError"
+      class="main-notification"
+      type="is-warning"
+      :closable="false"
+    >
+      {{ setupAccountRequest.errorMessage }}
+    </b-notification>
+    <b-button
+      v-if="!isBackuped && isSaveOnChain"
+      type="is-primary is-fullwidth"
+      :loading="setupAccountRequest.isFetching"
+      @click="onSetupAccount"
+    >
+      {{ $t('account.modals.setupAccount.setupAccount') }}
+    </b-button>
+    <b-button v-else type="is-primary is-fullwidth" :disabled="!isBackuped" @click="setAccount">
+      {{ $t('account.modals.setupAccount.setAccount') }}
+    </b-button>
+  </div>
+</template>
+
+<script>
+import { setupMethods, setupComputed } from '../injectors'
+
+export default {
+  data() {
+    return {
+      timer: null,
+      recoveryKey: '',
+      isBackuped: false,
+      isSaveOnChain: true,
+      warningMessage: ''
+    }
+  },
+  computed: {
+    ...setupComputed
+  },
+  watch: {
+    isSaveOnChain() {
+      if (this.isSaveOnChain) {
+        this.isBackuped = false
+      }
+    }
+  },
+  beforeUpdate() {
+    if (this.setupAccountRequest.isSuccess) {
+      this.$parent.close()
+    }
+  },
+  mounted() {
+    this.recoveryKey = this.$provider.web3.eth.accounts.create().privateKey.slice(2)
+
+    if (this.isPartialSupport) {
+      this.isSaveOnChain = false
+    }
+
+    this.timer = setTimeout(() => {
+      this.saveRecoveryKeyOnFile({ recoveryKey: this.recoveryKey })
+    }, 1500)
+  },
+  beforeDestroy() {
+    clearTimeout(this.timer)
+    this.clearState({ key: 'setupAccount' })
+  },
+  methods: {
+    ...setupMethods,
+    onCopy() {
+      this.addNoticeWithInterval({
+        notice: {
+          title: 'copied',
+          type: 'info'
+        },
+        interval: 2000
+      })
+    },
+    async setAccount() {
+      try {
+        await this.recoverAccountFromKey({ recoveryKey: this.recoveryKey })
+        this.$emit('close')
+      } catch (err) {
+        this.warningMessage = err.message
+      }
+    },
+    async onSetupAccount() {
+      if (!this.isSaveOnChain) {
+        this.warningMessage = this.$t('account.modals.setupAccount.yourRecoveryKeyWontBeSaved')
+        return
+      }
+
+      try {
+        await this.setupAccount({ privateKey: this.recoveryKey })
+      } catch (err) {
+        this.warningMessage = err.message
+      }
+    }
+  }
+}
+</script>