Improve Mnemonic handling + UX, Add Advanced Mode (#189)

* Improve Mnemonic handling + UX, Add Advanced Mode * Fleek pls build * Add JSDocs for cleanAndVerifySeedPhrase() * Fix type primitive Co-authored-by: Duddino <duddino@duddino.com> * Fix type primitive Co-authored-by: Duddino <duddino@duddino.com> * Fix type primitive Co-authored-by: Duddino <duddino@duddino.com> * Reset Mnemonic inputs on Advanced Mode switch --------- Co-authored-by: Duddino <duddino@duddino.com>
PIVX-Labs · Sep 5, 2023 · d3335aa · d3335aa
1 parent 91af6e0
commit d3335aa
Show file tree

Hide file tree

Showing 13 changed files with 254 additions and 38 deletions.
diff --git a/index.template.html b/index.template.html
@@ -779,7 +779,7 @@ <h3 class="pivx-bold-title-smaller">
                         <!-- IMPORT WALLET -->
                         <input class="hide-element" type="text" id="clipboard" />
                         <div id="importWallet" style="display: none;">
-                          <input type="password" class="textbox-opacity-trans" id="privateKey" placeholder="Seed Phrase, XPriv or WIF Private Key" oninput="MPW.onPrivateKeyChanged()" />
+                          <input type="password" class="textbox-opacity-trans" id="privateKey" placeholder="Seed Phrase, XPriv or WIF Private Key" oninput="MPW.guiUpdateImportInput()" />
                           <input hidden type="password" id="privateKeyPassword" placeholder="Password" />
                           <button class="pivx-button-big" onclick="MPW.guiImportWallet()">
                             <span class="buttoni-icon"><i class="fas fa-file-upload fa-tiny-margin"></i></span>
@@ -1183,16 +1183,26 @@ <h2 id="mnLastSeen" class="stake-balances" style="overflow-wrap: anywhere; top:
                       </div>
 
                       <!-- Default switch -->
-                      <div class="custom-control custom-switch" style="margin-bottom:15px;">
+                      <div class="custom-control custom-switch">
                         <input type="checkbox" class="custom-control-input" id="debugToggler" onclick="MPW.toggleDebug()">
                         <label data-i18n="settingsToggleDebug" class="custom-control-label" for="debugToggler">Debug Mode</label>
                       </div>
 
+                      <br>
+
                       <div class="custom-control custom-switch">
                         <input type="checkbox" class="custom-control-input" id="testnetToggler" onclick="MPW.toggleTestnet()">
                         <label data-i18n="settingsToggleTestnet" class="custom-control-label" for="testnetToggler">Testnet Mode</label>
                       </div>
 
+                      <br>
+
+                      <div class="custom-control custom-switch">
+                        <input type="checkbox" class="custom-control-input" id="advancedModeToggler" onclick="MPW.toggleAdvancedMode()">
+                        <label data-i18n="settingsToggleAdvancedMode" class="custom-control-label" for="advancedModeToggler">Advanced Mode</label>
+                        <p style="opacity: 0.6; margin-top: 5px;"><i class="fa-solid fa-triangle-exclamation" style="margin-right: 5px;"></i><span data-i18n="settingsToggleAdvancedModeSubtext">This unlocks deeper functionality and customisation, but may be overwhelming and potentially dangerous for unexperienced users!</p>
+                      </div>
+
                     </div>
 
                     <div id="settingsDisplay" class="d-none settingsContent">

diff --git a/locale/de/translation.js b/locale/de/translation.js
@@ -66,9 +66,16 @@ export const de_translation = {
         'Jeder mit einer Kopie der Phrase hat Zugriff auf <b>deine Brieftasche</b>.', //Anyone with a copy of it can access <b>all</b> of your funds.
     doNotShare: 'Teile Sie unter keinen Umständen mit dritten.', //Do NOT share it with anybody.
     digitalStoreNotAdvised: 'Es wird empfohlen diese nicht digital zu sichern', //It is <b>NOT</b> advised to store this digitally.
-    optionalPassphrase: 'Optionale Pass Phrase', //Optional Passphrase
+    optionalPassphrase: 'Optionale Pass Phrase (BIP39)', //Optional Passphrase (BIP39)
     writtenDown: 'Ich bestätige, dass ich die Seed Phrase notiert habe', //I have written down my seed phrase
 
+    // Seed Phrase Import
+    importSeedValid: '', //Seed Phrase is valid!
+    importSeedError: '', //Seed Phrase is invalid!
+    importSeedErrorSize: '', //A Seed Phrase should be 12 or 24 words long!
+    importSeedErrorTypo: '', //Seed Phrase contains typing errors! Check your input carefully
+    importSeedErrorSkip: '', //Seed Phrase appears invalid, but the warning was skipped by the user
+
     // Wallet Dashboard
     gettingStarted: 'Erste Schritte', //Getting Started
     secureYourWallet: 'Verschlüssel deine Geldbörse', //Secure your wallet
@@ -181,6 +188,8 @@ export const de_translation = {
     settingsAnalytics: 'Wähle die verwendeten Analysedaten dieser Sitzung', //Choose your analytics contribution level:
     settingsToggleDebug: 'Debug Modus', //Debug Mode
     settingsToggleTestnet: 'Testnet Modus', //Testnet Mode
+    settingsToggleAdvancedMode: '', //Advanced Mode
+    settingsToggleAdvancedModeSubtext: '', //This unlocks deeper functionality and customisation, but may be overwhelming and potentially dangerous for unexperienced users!
 
     // Transparency Report
     transparencyReport: 'Transparenz-Bericht', //Transparency Report

diff --git a/locale/en/translation.js b/locale/en/translation.js
@@ -63,9 +63,18 @@ export const en_translation = {
         'Anyone with a copy of it can access <b>all</b> of your funds.', //
     doNotShare: 'Do NOT share it with anyone.', //
     digitalStoreNotAdvised: 'It is <b>NOT</b> advised to store this digitally.', //
-    optionalPassphrase: 'Optional Passphrase', //
+    optionalPassphrase: 'Optional Passphrase (BIP39)', //
     writtenDown: 'I have written down my seed phrase', //
 
+    // Seed Phrase Import
+    importSeedValid: 'Seed Phrase is valid!', //
+    importSeedError: 'Seed Phrase is invalid!', //
+    importSeedErrorSize: 'A Seed Phrase should be 12 or 24 words long!', //
+    importSeedErrorTypo:
+        'Seed Phrase contains typing errors! Check your input carefully', //
+    importSeedErrorSkip:
+        'Seed Phrase appears invalid, but the warning was skipped by the user', //
+
     // Wallet Dashboard
     gettingStarted: 'Getting Started', //
     secureYourWallet: 'Secure your wallet', //
@@ -182,6 +191,9 @@ export const en_translation = {
     settingsAnalytics: 'Choose your analytics contribution level:', //
     settingsToggleDebug: 'Debug Mode', //
     settingsToggleTestnet: 'Testnet Mode', //
+    settingsToggleAdvancedMode: 'Advanced Mode', //
+    settingsToggleAdvancedModeSubtext:
+        'This unlocks deeper functionality and customisation, but may be overwhelming and potentially dangerous for unexperienced users!', //
 
     // Network switching (mainnet <---> testnet)
     netSwitchUnsavedWarningTitle: "Your {network} wallet isn't saved!", //

diff --git a/locale/fr/translation.js b/locale/fr/translation.js
@@ -66,9 +66,16 @@ export const fr_translation = {
     doNotShare: 'Ne le partagez avec personne.', //Do NOT share it with anybody.
     digitalStoreNotAdvised:
         '<b>NON</b> il est conseillé de les stocker sous forme numérique.', //It is <b>NOT</b> advised to store this digitally.
-    optionalPassphrase: 'Phrase mot de passe Facultatif', //Optional Passphrase
+    optionalPassphrase: 'Phrase mot de passe Facultatif (BIP39)', //Optional Passphrase
     writtenDown: "J'ai écrit ma phrase d'introduction", //I have written down my seed phrase
 
+    // Seed Phrase Import
+    importSeedValid: '', //Seed Phrase is valid!
+    importSeedError: '', //Seed Phrase is invalid!
+    importSeedErrorSize: '', //A Seed Phrase should be 12 or 24 words long!
+    importSeedErrorTypo: '', //Seed Phrase contains typing errors! Check your input carefully
+    importSeedErrorSkip: '', //Seed Phrase appears invalid, but the warning was skipped by the user
+
     // Wallet Dashboard
     gettingStarted: 'Démarrer', //Getting Started
     secureYourWallet: 'Protégez votre portefeuille', //Secure your wallet
@@ -181,6 +188,8 @@ export const fr_translation = {
     settingsAnalytics: "Choisissez votre niveau d'analyse :", //Choose your analytics contribution level:
     settingsToggleDebug: 'Mode de débogage', //Debug Mode
     settingsToggleTestnet: 'Mode testnet', //Testnet Mode
+    settingsToggleAdvancedMode: '', //Advanced Mode
+    settingsToggleAdvancedModeSubtext: '', //This unlocks deeper functionality and customisation, but may be overwhelming and potentially dangerous for unexperienced users!
 
     // Network switching (mainnet <---> testnet)
     netSwitchUnsavedWarningTitle: '', //Your {network} wallet isn\'t saved!

diff --git a/locale/ph/translation.js b/locale/ph/translation.js
@@ -67,9 +67,16 @@ export const ph_translation = {
     doNotShare: 'WAG mo itong ibibigay kahit kanino', //Do NOT share it with anybody.
     digitalStoreNotAdvised:
         'Ito ay <b>HINDI</b> payo upang itago ito digitally', //It is <b>NOT</b> advised to store this digitally.
-    optionalPassphrase: 'Optional Passphrase', //Optional Passphrase
+    optionalPassphrase: 'Optional Passphrase (BIP39)', //Optional Passphrase
     writtenDown: 'Isinulat ko na ang aking seed phrase', //I have written down my seed phrase
 
+    // Seed Phrase Import
+    importSeedValid: '', //Seed Phrase is valid!
+    importSeedError: '', //Seed Phrase is invalid!
+    importSeedErrorSize: '', //A Seed Phrase should be 12 or 24 words long!
+    importSeedErrorTypo: '', //Seed Phrase contains typing errors! Check your input carefully
+    importSeedErrorSkip: '', //Seed Phrase appears invalid, but the warning was skipped by the user
+
     // Wallet Dashboard
     gettingStarted: 'Magsimula', //Getting Started
     secureYourWallet: 'I-secure ang iyong wallet', //Secure your wallet
@@ -182,6 +189,8 @@ export const ph_translation = {
     settingsAnalytics: 'Pumili ng iyong analytics contribution level:', //Choose your analytics contribution level:
     settingsToggleDebug: 'Debug Mode', //Debug Mode
     settingsToggleTestnet: 'Testnet Mode', //Testnet Mode
+    settingsToggleAdvancedMode: '', //Advanced Mode
+    settingsToggleAdvancedModeSubtext: '', //This unlocks deeper functionality and customisation, but may be overwhelming and potentially dangerous for unexperienced users!
 
     // Network switching (mainnet <---> testnet)
     netSwitchUnsavedWarningTitle: '', //Your {network} wallet isn\'t saved!

diff --git a/locale/pt-br/translation.js b/locale/pt-br/translation.js
@@ -66,9 +66,16 @@ export const pt_br_translation = {
     doNotShare: 'NÃO a compartilhe com ninguém.', //Do NOT share it with anybody.
     digitalStoreNotAdvised:
         '<b>NÃO</b> é aconselhável armazená-la digitalmente.', //It is <b>NOT</b> advised to store this digitally.
-    optionalPassphrase: 'Frasse-Passe Opcional', //Optional Passphrase
+    optionalPassphrase: 'Frasse-Passe Opcional (BIP39)', //Optional Passphrase
     writtenDown: 'Eu escrevi a minha Seed Phrase', //I have written down my seed phrase
 
+    // Seed Phrase Import
+    importSeedValid: '', //Seed Phrase is valid!
+    importSeedError: '', //Seed Phrase is invalid!
+    importSeedErrorSize: '', //A Seed Phrase should be 12 or 24 words long!
+    importSeedErrorTypo: '', //Seed Phrase contains typing errors! Check your input carefully
+    importSeedErrorSkip: '', //Seed Phrase appears invalid, but the warning was skipped by the user
+
     // Wallet Dashboard
     gettingStarted: 'Começar', //Getting Started
     secureYourWallet: 'Proteja a sua carteira', //Secure your wallet
@@ -182,6 +189,8 @@ export const pt_br_translation = {
     settingsAnalytics: 'Escolha o seu nível de contribuição analítica:', //Choose your analytics contribution level:
     settingsToggleDebug: 'Modo de depuração', //Debug Mode
     settingsToggleTestnet: 'Modo Testnet', //Testnet Mode
+    settingsToggleAdvancedMode: '', //Advanced Mode
+    settingsToggleAdvancedModeSubtext: '', //This unlocks deeper functionality and customisation, but may be overwhelming and potentially dangerous for unexperienced users!
 
     // Network switching (mainnet <---> testnet)
     netSwitchUnsavedWarningTitle: '', //Your {network} wallet isn\'t saved!

diff --git a/locale/pt-pt/translation.js b/locale/pt-pt/translation.js
@@ -65,9 +65,16 @@ export const pt_pt_translation = {
     doNotShare: 'NÃO a compartilhe com ninguém.', //Do NOT share it with anybody.
     digitalStoreNotAdvised:
         '<b>NÃO</b> é aconselhável armazená-lo digitalmente.', //It is <b>NOT</b> advised to store this digitally.
-    optionalPassphrase: 'Frase Senha Opcional', //Optional Passphrase
+    optionalPassphrase: 'Frase Senha Opcional (BIP39)', //Optional Passphrase
     writtenDown: 'Eu escrevi a minha frase-inicial', //I have written down my seed phrase
 
+    // Seed Phrase Import
+    importSeedValid: '', //Seed Phrase is valid!
+    importSeedError: '', //Seed Phrase is invalid!
+    importSeedErrorSize: '', //A Seed Phrase should be 12 or 24 words long!
+    importSeedErrorTypo: '', //Seed Phrase contains typing errors! Check your input carefully
+    importSeedErrorSkip: '', //Seed Phrase appears invalid, but the warning was skipped by the user
+
     // Wallet Dashboard
     gettingStarted: 'A Começar', //Getting Started
     secureYourWallet: 'Proteja a sua carteira', //Secure your wallet
@@ -181,6 +188,8 @@ export const pt_pt_translation = {
     settingsAnalytics: 'Escolha o seu nível de contribuição analítica:', //Choose your analytics contribution level:
     settingsToggleDebug: 'Modo de depuração', //Debug Mode
     settingsToggleTestnet: 'Modo Testnet', //Testnet Mode
+    settingsToggleAdvancedMode: '', //Advanced Mode
+    settingsToggleAdvancedModeSubtext: '', //This unlocks deeper functionality and customisation, but may be overwhelming and potentially dangerous for unexperienced users!
 
     // Network switching (mainnet <---> testnet)
     netSwitchUnsavedWarningTitle: '', //Your {network} wallet isn\'t saved!

diff --git a/locale/template/translation.js b/locale/template/translation.js
@@ -78,9 +78,16 @@ var translation = {
     doNotShareWarning: '', //Anyone with a copy of it can access <b>all</b> of your funds.
     doNotShare: '', //Do NOT share it with anybody.
     digitalStoreNotAdvised: '', //It is <b>NOT</b> advised to store this digitally.
-    optionalPassphrase: '', //Optional Passphrase
+    optionalPassphrase: '', //Optional Passphrase (BIP39)
     writtenDown: '', //I have written down my seed phrase
 
+    // Seed Phrase Import
+    importSeedValid: '', //Seed Phrase is valid!
+    importSeedError: '', //Seed Phrase is invalid!
+    importSeedErrorSize: '', //A Seed Phrase should be 12 or 24 words long!
+    importSeedErrorTypo: '', //Seed Phrase contains typing errors! Check your input carefully
+    importSeedErrorSkip: '', //Seed Phrase appears invalid, but the warning was skipped by the user
+
     // Wallet Dashboard
     gettingStarted: '', //Getting Started
     secureYourWallet: '', //Secure your wallet
@@ -188,6 +195,8 @@ var translation = {
     settingsAnalytics: '', //Choose your analytics contribution level:
     settingsToggleDebug: '', //Debug Mode
     settingsToggleTestnet: '', //Testnet Mode
+    settingsToggleAdvancedMode: '', //Advanced Mode
+    settingsToggleAdvancedModeSubtext: '', //This unlocks deeper functionality and customisation, but may be overwhelming and potentially dangerous for unexperienced users!
 
     // Network switching (mainnet <---> testnet)
     netSwitchUnsavedWarningTitle: '', //Your {network} wallet isn\'t saved!

diff --git a/locale/uwu/translation.js b/locale/uwu/translation.js
@@ -65,9 +65,18 @@ export const uwu_translation = {
     doNotShare: 'Do NOT share it with anyuwu.', //Do NOT share it with anybody.
     digitalStoreNotAdvised:
         'It is <b>NAWT</b> advised to store this digitally.', //It is <b>NOT</b> advised to store this digitally.
-    optionalPassphrase: 'Optional Passphwase', //Optional Passphrase
+    optionalPassphrase: 'Optional Passphwase (BIP39)', //Optional Passphrase
     writtenDown: 'I haz written down my seed phrase', //I have written down my seed phrase
 
+    // Seed Phrase Import
+    importSeedValid: 'Seed Phwase iz valid!', //Seed Phrase is valid!
+    importSeedError: 'Seed Phwase iz invalid!', //Seed Phrase is invalid!
+    importSeedErrorSize: 'A Seed Phwase shwould be 12 or 24 words long!', //A Seed Phrase should be 12 or 24 words long!
+    importSeedErrorTypo:
+        'Seed Phwase contains typing ewrrors! Check ur input carefully', //Seed Phrase contains typing errors! Check your input carefully
+    importSeedErrorSkip:
+        'Seed Phwase appears invalid, but da warning was skipped by da user', //Seed Phrase appears invalid, but the warning was skipped by the user
+
     // Wallet Dashboard
     gettingStarted: 'Getting Stwarted', //Getting Started
     secureYourWallet: 'Secure ur wawwet', //Secure your wallet
@@ -185,6 +194,9 @@ export const uwu_translation = {
     settingsAutoSelectNet: 'Auto-select Expwowers and Nowodes', // Auto-select Explorers and Nodes
     settingsToggleDebug: 'Debug Mowode', //Debug Mode
     settingsToggleTestnet: 'Testnet Mowode', //Testnet Mode
+    settingsToggleAdvancedMode: 'Advwanced Mowode', //Advanced Mode
+    settingsToggleAdvancedModeSubtext:
+        'Dis unlocks deeper fwunctionality and cuwustomisatwion, but may be oveuhwhelming and potentially dangerwus for unexperienced bakas!', //This unlocks deeper functionality and customisation, but may be overwhelming and potentially dangerous for unexperienced users!
 
     // Network switching (mainnet <---> testnet)
     netSwitchUnsavedWarningTitle: "Ur {network} wawwet isn't saved!", //Your {network} wallet isn\'t saved!

diff --git a/scripts/global.js b/scripts/global.js
@@ -22,6 +22,7 @@ import {
     setColdStakingAddress,
     strColdStakingAddress,
     nDisplayDecimals,
+    fAdvancedMode,
 } from './settings.js';
 import { createAndSendTransaction, signTransaction } from './transactions.js';
 import {
@@ -319,6 +320,7 @@ export async function start() {
         domVersion: document.getElementById('version'),
         domFlipdown: document.getElementById('flipdown'),
         domTestnetToggler: document.getElementById('testnetToggler'),
+        domAdvancedModeToggler: document.getElementById('advancedModeToggler'),
     };
     await i18nStart();
     await loadImages();
@@ -1529,19 +1531,28 @@ export async function accessOrImportWallet() {
  *
  * Useful for adjusting the input types or displaying password prompts depending on the import scheme
  */
-export async function onPrivateKeyChanged() {
+export async function guiUpdateImportInput() {
     if (await hasEncryptedWallet()) return;
     // Check whether the string is Base64 (would likely be an MPW-encrypted import)
     // and it doesn't have any spaces (would be a mnemonic seed)
-    const fContainsSpaces = doms.domPrivKey.value.includes(' ');
+    const fContainsSpaces = doms.domPrivKey.value.trim().includes(' ');
+
+    // If this could require a Seed Passphrase (BIP39 Passphrase) and Advanced Mode is enabled
+    // ...or if this is an Encrypted Import (Encrypted Base64 MPW key)
+    const fBIP39Passphrase = fContainsSpaces && fAdvancedMode;
     doms.domPrivKeyPassword.hidden =
         (doms.domPrivKey.value.length < 128 ||
             !isBase64(doms.domPrivKey.value)) &&
-        !fContainsSpaces;
+        !fBIP39Passphrase;
 
     doms.domPrivKeyPassword.placeholder = fContainsSpaces
         ? translation.optionalPassphrase
         : translation.password;
+
+    // If the "Import Password/Passphrase" is hidden, we'll also wipe it's input, in the
+    // ... edge-case that a passphrase was entered, then the import key had changed.
+    if (doms.domPrivKeyPassword.hidden) doms.domPrivKeyPassword.value = '';
+
     // Uncloak the private input IF spaces are detected, to make Seed Phrases easier to input and verify
     doms.domPrivKey.setAttribute('type', fContainsSpaces ? 'text' : 'password');
 }

diff --git a/scripts/index.js b/scripts/index.js
@@ -19,7 +19,7 @@ export {
     accessOrImportWallet,
     guiImportWallet,
     guiSetColdStakingAddress,
-    onPrivateKeyChanged,
+    guiUpdateImportInput,
     toClipboard,
     toggleExportUI,
     wipePrivateData,
@@ -46,7 +46,12 @@ export {
     govVote,
 } from './global.js';
 export { generateWallet, getNewAddress, importWallet } from './wallet.js';
-export { toggleTestnet, toggleDebug, toggleAutoSwitch } from './settings.js';
+export {
+    toggleTestnet,
+    toggleDebug,
+    toggleAutoSwitch,
+    toggleAdvancedMode,
+} from './settings.js';
 export {
     createTxGUI,
     undelegateGUI,