Add Back button to Create Wallet modal

PIVX-Labs · Jul 23, 2023 · fd963ce · fd963ce
1 parent b2d3fad
commit fd963ce
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 4 deletions.
diff --git a/assets/style/style.css b/assets/style/style.css
@@ -2722,6 +2722,15 @@ input {
     }
 }
 
+.topRightButton {
+    margin: 0;
+    padding: 0;
+    position: absolute;
+    right: 20px;
+    top: 15px;
+    z-index: 1000;
+}
+
 .closeCross {
     color: #fff;
     font-size: 20px;

diff --git a/index.template.html b/index.template.html
@@ -130,9 +130,12 @@ <h5 class="modal-title" id="walletBreakdownModalLabel">Wallet Breakdown</h5>
 
         <br />
         <!-- // MNEMONIC MODAL -->
-        <div class="modal fade" id="mnemonicModal" tabindex="-1" role="dialog" aria-labelledby="qrModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
+        <div class="modal fade" id="mnemonicModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
           <div class="modal-dialog" role="document">
             <div class="modal-content">
+              <button type="button" id="ModalMnemonicBack" class="close topRightButton" data-dismiss="modal" aria-label="Close">
+                <i class="fa-solid fa-xmark closeCross" style="color: #000"></i>
+              </button>
               <div class="modal-body center-text">
                 <p id="ModalMnemonicLabel" class="modal-label"></p>
                 <div id="ModalMnemonic" class="auto-fit">

diff --git a/scripts/global.js b/scripts/global.js
@@ -211,6 +211,7 @@ export async function start() {
         domMnemonicModalContent: document.getElementById(
             'ModalMnemonicContent'
         ),
+        domMnemonicModalBack: document.getElementById('ModalMnemonicBack'),
         domMnemonicModalButton: document.getElementById(
             'modalMnemonicConfirmButton'
         ),

diff --git a/scripts/wallet.js b/scripts/wallet.js
@@ -773,9 +773,13 @@ export async function generateWallet(noUI = false) {
     if (walletConfirm) {
         const mnemonic = generateMnemonic();
 
-        const passphrase = !noUI
-            ? await informUserOfMnemonic(mnemonic)
-            : undefined;
+        const passphrase = !noUI ? await informUserOfMnemonic(mnemonic) : '';
+
+        // If the Wallet Creation was cancelled, just back out
+        if (typeof passphrase !== 'string' && !passphrase) {
+            return;
+        }
+
         const seed = await mnemonicToSeed(mnemonic, passphrase);
 
         // Prompt the user to encrypt the seed
@@ -841,6 +845,8 @@ function informUserOfMnemonic(mnemonic) {
     return new Promise((res, _) => {
         $('#mnemonicModal').modal({ keyboard: false });
         doms.domMnemonicModalContent.innerText = mnemonic;
+
+        // Confirm the wallet generation and return the Passphrase (if one was provided)
         doms.domMnemonicModalButton.onclick = () => {
             res(doms.domMnemonicModalPassphrase.value);
             $('#mnemonicModal').modal('hide');
@@ -849,6 +855,17 @@ function informUserOfMnemonic(mnemonic) {
             doms.domMnemonicModalContent.innerText = '';
             doms.domMnemonicModalPassphrase.value = '';
         };
+
+        // Cancel the wallet generation and return 'false' to signify to the caller
+        doms.domMnemonicModalBack.onclick = () => {
+            res(false);
+            $('#mnemonicModal').modal('hide');
+
+            // Wipe the mnemonic displays of sensitive data
+            doms.domMnemonicModalContent.innerText = '';
+            doms.domMnemonicModalPassphrase.value = '';
+        };
+
         $('#mnemonicModal').modal('show');
     });
 }