feat: allow to import in myWitWallet from XPRV using a QR code

package.json

@@ -59,6 +59,7 @@
     "vue-i18n": "8.26.7",
     "vue-json-tree": "0.4.3",
     "vue-observe-visibility": "^0.4.6",
+    "vue-qr": "^4.0.9",
     "vue-router": "3.5.3",
     "vuex": "3.6.2",
     "witnet-radon-js": "0.10.0",

src/App.vue

@@ -9,6 +9,7 @@
     <DescriptionModal v-if="isWalletDescriptionVisible" />
     <RenameConfirmation v-if="isRenameWalletConfirmationVisible" />
     <DeleteWalletConfirmation v-if="isDeleteWalletConfirmationVisible" />
+    <ExportXprvModal v-if="isExportXprvQrVisible" />
   </div>
 </template>
 
@@ -19,6 +20,7 @@ import LogoutModal from '@/components/LogoutModal.vue'
 import DescriptionModal from '@/components/DescriptionModal.vue'
 import RenameConfirmation from '@/components/RenameConfirmation.vue'
 import DeleteWalletConfirmation from '@/components/DeleteWalletConfirmation.vue'
+import ExportXprvModal from '@/components/ExportXprvModal.vue'
 
 export default {
   name: 'App',
@@ -29,6 +31,7 @@ export default {
     RenameConfirmation,
     DeleteWalletConfirmation,
     ResyncConfirmation: () => import('@/components/ResyncConfirmation.vue'),
+    ExportXprvModal,
   },
   data() {
     return {
@@ -53,6 +56,9 @@ export default {
       isDeleteWalletConfirmationVisible: state => {
         return state.uiInteractions.isDeleteWalletConfirmationVisible
       },
+      isExportXprvQrVisible: state => {
+        return state.uiInteractions.isExportXprvQrVisible
+      },
     }),
   },
   watch: {

src/components/ExportXprv.vue

@@ -24,6 +24,16 @@
     </div>
 
     <div class="submit">
+      <el-button
+        tabindex="5"
+        type="primary"
+        data-test="export-btn"
+        @keydown.enter.esc.prevent="encryptAndExport"
+        @click="showQR"
+      >
+        Show QR
+      </el-button>
+
       <el-button
         tabindex="5"
         type="primary"
@@ -60,6 +70,7 @@ export default {
       openingLine: this.$t('please_note').toUpperCase(),
       text: this.$t('encrypt_xprv'),
       exportNameAndDescription: false,
+      showXprvQrModal: false,
     }
   },
   computed: {
@@ -94,6 +105,8 @@ export default {
     ...mapMutations({
       clearError: 'clearError',
       validatePassword: 'validatePassword',
+      showExportXprvQrVisible: 'showExportXprvQrVisible',
+      closeExportXprvQrVisible: 'closeExportXprvQrVisible',
     }),
     ...mapActions({
       exportMasterKey: 'exportMasterKey',
@@ -131,6 +144,16 @@ export default {
         this.clear()
       }
     },
+    async showQR() {
+      await this.validatePassword({
+        password: this.password,
+        repeatedPassword: this.repeatedPassword,
+      })
+      if (this.validatedPassword) {
+        this.showExportXprvQrVisible()
+        await this.exportMasterKey({ password: this.password })
+      }
+    },
   },
 }
 </script>

src/components/ExportXprvModal.vue

@@ -0,0 +1,140 @@
+<template>
+  <el-dialog
+    class="info"
+    :title="$t('close_session_info_title')"
+    width="50%"
+    :visible="true"
+    :show-close="true"
+    :close-on-click-modal="false"
+    @close="close"
+  >
+    <div slot="title" class="title-container">
+      <font-awesome-icon class="icon" icon="info-circle" />
+      <p class="title">{{ $t('export_xprv_modal_title') }}</p>
+    </div>
+
+    <div class="content">
+      <i18n path="export_xprv_modal_warning" tag="p" class="warning">
+        <a class="link" href="#" target="_blank">myWitWallet</a>
+      </i18n>
+
+      <div class="qr" :class="{ blur: !isQrVisible }">
+        <VueQr :text="xprv.master_key" :size="225" />
+      </div>
+      <el-button class="show" type="secondary" @click="toggleQR">{{
+        !isQrVisible
+          ? $t('export_xprv_modal_show_qr')
+          : $t('export_xprv_modal_hide_qr')
+      }}</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { mapActions, mapMutations, mapState } from 'vuex'
+import VueQr from 'vue-qr'
+
+export default {
+  name: 'LogoutModal',
+  components: {
+    VueQr,
+  },
+  data() {
+    return {
+      avoidShowModalAgain: false,
+      isQrVisible: false,
+    }
+  },
+  computed: {
+    ...mapState({
+      sessionExpirationMin: state => state.wallet.sessionExpirationSecs / 60,
+      xprv: state => state.wallet.xprv,
+    }),
+    checked: {
+      get() {
+        return this.notShowModalAgain
+      },
+      set(val) {
+        this.avoidShowModalAgain = val
+        this.saveShowModalAgain(val)
+        return this.avoidShowModalAgain
+      },
+    },
+  },
+  methods: {
+    ...mapMutations({
+      close: 'closeExportXprvQrVisible',
+    }),
+    ...mapActions({
+      saveShowModalAgain: 'saveShowModalAgain',
+    }),
+    toggleQR() {
+      this.isQrVisible = !this.isQrVisible
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/styles/_colors.scss';
+@import '@/styles/theme.scss';
+
+.info {
+  .title-container {
+    align-items: center;
+    color: var(--info-title);
+    display: flex;
+
+    .title {
+      color: var(--info-title);
+      font-size: 32px;
+    }
+
+    .icon {
+      font-size: 36px;
+      margin-right: 8px;
+    }
+  }
+
+  .content {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 16px;
+
+    .warning {
+      margin-bottom: 16px;
+
+      .link {
+        color: var(--text-medium-emphasis);
+        font-weight: 500;
+        text-decoration: underline;
+      }
+    }
+
+    .qr {
+      height: 225px;
+      margin-bottom: 16px;
+      width: 225px;
+
+      &.blur {
+        background-color: #ccc;
+        -webkit-filter: blur(5px);
+        -moz-filter: blur(5px);
+        -o-filter: blur(5px);
+        -ms-filter: blur(5px);
+        filter: blur(7px);
+      }
+    }
+  }
+
+  .el-dialog__body {
+    padding: 10px 20px;
+    word-break: break-word;
+
+    .text {
+      margin-bottom: 8px;
+    }
+  }
+}
+</style>

src/locales/en.json

@@ -431,5 +431,9 @@
   "estimating_fees": "Estimating fees",
   "recommended": "Recommended",
   "timelock_tooltip": "The recipient will not be able to spend the coins before this date and time",
-  "miner": "Miner"
+  "miner": "Miner",
+  "export_xprv_modal_title": "Export XPRV",
+  "export_xprv_modal_warning": "You can use this QR code to import your wallet in {0}. Make sure you are the only person who can see this QR before showing it.",
+  "export_xprv_modal_show_qr": "Show QR",
+  "export_xprv_modal_hide_qr": "Hide QR"
 }

src/locales/es.json

@@ -429,5 +429,9 @@
   "estimating_fees": "Estimando tasas",
   "recommended": "Recomendada",
   "timelock_tooltip": "El destinatario no podrá gastar sus Wit coins antes de la fecha y hora seleccionada",
-  "miner": "Minero"
+  "miner": "Minero",
+  "export_xprv_modal_title": "Exportar XPRV",
+  "export_xprv_modal_warning": "Puedes utilizar este código QR para importar tu wallet en {0}. Asegúrese que es la única persona que puede ver este QR antes de mostrarlo.",
+  "export_xprv_modal_show_qr": "Mostrar QR",
+  "export_xprv_modal_hide_qr": "Ocultar QR"
 }

src/store/uiInteractions.js

@@ -14,8 +14,15 @@ export default {
     isWalletDescriptionVisible: false,
     isRenameWalletConfirmationVisible: false,
     isDeleteWalletConfirmationVisible: false,
+    isExportXprvQrVisible: false,
   },
   mutations: {
+    showExportXprvQrVisible(state) {
+      state.isExportXprvQrVisible = true
+    },
+    closeExportXprvQrVisible(state) {
+      state.isExportXprvQrVisible = false
+    },
     showResyncConfirmation(state) {
       state.isResyncConfirmationVisible = true
     },

tests/unit/src/components/ExportXprv.spec.js

@@ -4,6 +4,7 @@ describe('ExportXprv', () => {
   const exportMasterKeyMock = jest.fn()
   const clearErrorMock = jest.fn()
   const validatePasswordMock = jest.fn()
+  const showExportXprvQrVisibleMock = jest.fn()
 
   const wrapper = mount(ExportXprv, {
     ...createComponentMocks({
@@ -25,6 +26,7 @@ describe('ExportXprv', () => {
           mutations: {
             validatePassword: validatePasswordMock,
             clearError: clearErrorMock,
+            showExportXprvQrVisible: showExportXprvQrVisibleMock,
           },
         },
       },