try to reduce confusion between seeds and private keys (Nault#384)

RickiNano · May 18, 2021 · 74d4907 · 74d4907
1 parent 7ffeece
commit 74d4907
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 6 deletions.
diff --git a/src/app/components/configure-wallet/configure-wallet.component.html b/src/app/components/configure-wallet/configure-wallet.component.html
@@ -213,6 +213,34 @@ <h2>BIP39<br>Mnemonic</h2>
   </div>
 </div>
 
+<div
+  *ngIf="(activePanel === panels.import) && ( (selectedImportOption === 'seed') )"
+>
+  <div class="uk-alert uk-alert-info nlt-inline-alert">
+    <div class="icon-column">
+      <div uk-icon="icon: info; ratio: 2;"></div>
+    </div>
+    <p style="max-width: 580px;">
+      <b>Note:</b> A secret seed provides access to 4,294,967,295 accounts.<br>
+      To import a single-account private key instead, <a class="inline-link" (click)="selectedImportOption = 'privateKey';">click here</a>
+    </p>
+  </div>
+</div>
+
+<div
+  *ngIf="(activePanel === panels.import) && ( (selectedImportOption === 'privateKey') )"
+>
+  <div class="uk-alert uk-alert-info nlt-inline-alert">
+    <div class="icon-column">
+      <div uk-icon="icon: info; ratio: 2;"></div>
+    </div>
+    <p style="max-width: 580px;">
+      <b>Note:</b> A private key provides access to exactly one account.<br>
+      To import a multi-account secret seed instead, <a class="inline-link" (click)="selectedImportOption = 'seed';">click here</a>
+    </p>
+  </div>
+</div>
+
 <div class="uk-card uk-card-default" *ngIf="activePanel === panels.import">
   <div class="uk-card-body">
     <div uk-grid *ngIf="selectedImportOption === 'file'">
@@ -227,7 +255,7 @@ <h3>Import File</h3>
       <div class="uk-width-1-1">
         <h3>Import Seed</h3>
         <p>
-          Enter your seed from any Nano wallet to import it below.
+          Enter your Nano secret seed below.
         </p>
         <div class="uk-inline uk-width-1-1">
           <a class="uk-form-icon uk-form-icon-flip" uk-icon="icon: camera" (click)="openQR('seed1','hash')" uk-tooltip title="Scan from QR code"></a>
@@ -239,27 +267,27 @@ <h3>Import Seed</h3>
       <div class="uk-width-1-1">
         <h3>Import Nano Mnemonic</h3>
         <p>
-          Enter your mnemonic generated by Nault or other Nano wallets.<br>If it came from a Ledger device or certain multi-currency wallets, use <a (click)="selectedImportOption = 'bip39-mnemonic';">BIP39 Mnemonic</a> import type instead.
+          Enter your Nano mnemonic phrase below.<br>If it came from a Ledger device or certain multi-currency wallets, use <a (click)="selectedImportOption = 'bip39-mnemonic';">BIP39 Mnemonic</a> import type instead.
         </p>
         <div class="uk-inline uk-width-1-1">
           <a class="uk-form-icon uk-form-icon-flip" uk-icon="icon: camera" (click)="openQR('mnemo1','mnemonic')" uk-tooltip title="Scan from QR code"></a>
-          <textarea class="uk-textarea" rows="3" [(ngModel)]="importSeedMnemonicModel" placeholder="24-words mnemonic"></textarea>
+          <textarea class="uk-textarea" rows="3" [(ngModel)]="importSeedMnemonicModel" placeholder="24-words mnemonic phrase"></textarea>
         </div>
       </div>
     </div>
     <div uk-grid *ngIf="selectedImportOption === 'bip39-mnemonic'" class="uk-margin-top">
       <div class="uk-width-1-1">
         <h3>Import BIP39 Mnemonic</h3>
         <p>
-          Enter your mnemonic generated by a Ledger device or certain multi-currency wallets.<br>If it was generated in Nault, use <a (click)="selectedImportOption = 'mnemonic';">Nano Mnemonic</a> import type instead.
+          Enter your BIP39 mnemonic phrase below. It is typically generated by Ledger devices and certain multi-currency wallets.<br>If it was generated in Nault, use <a (click)="selectedImportOption = 'mnemonic';">Nano Mnemonic</a> import type instead.
         </p>
         <div class="uk-form-horizontal">
           <div class="uk-margin">
             <label class="uk-form-label" for="form-horizontal-select">BIP39 Mnemonic</label>
             <div class="uk-form-controls">
               <div class="uk-inline uk-width-expand">
                 <a class="uk-form-icon uk-form-icon-flip" uk-icon="icon: camera" (click)="openQR('mnemo2','mnemonic')" uk-tooltip title="Scan from QR code"></a>
-                <textarea class="uk-textarea" rows="2" [(ngModel)]="importSeedBip39MnemonicModel" placeholder="12,15,18,21 or 24-words mnemonic" autocomplete="off"></textarea>
+                <textarea class="uk-textarea" rows="2" [(ngModel)]="importSeedBip39MnemonicModel" placeholder="12,15,18,21 or 24-words mnemonic phrase" autocomplete="off"></textarea>
               </div>
            </div>
           </div>
@@ -344,7 +372,7 @@ <h3>Use Ledger Hardware Wallet</h3>
       <div class="uk-width-1-1">
         <h3>Import Private Key</h3>
         <p>
-          Enter your Nano private key below. These are not to be confused with Nano seeds, which are more common, and produce many private keys.
+          Enter your Nano private key below.
         </p>
         <div class="uk-inline uk-width-1-1">
           <a class="uk-form-icon uk-form-icon-flip" uk-icon="icon: camera" (click)="openQR('priv1','hash')" uk-tooltip title="Scan from QR code"></a>

diff --git a/src/less/nault-theme.less b/src/less/nault-theme.less
@@ -94,6 +94,19 @@ h1, h2, h3, h4, h5, .uk-text-lead, .uk-button, .uk-alert, .uk-description-list d
 	> p {
 		margin-top: 0;
 	}
+
+	.inline-link {
+		font-weight: 600;
+		color: currentColor;
+		text-decoration: none !important;
+		border-bottom: 2px dotted rgba(255, 255, 255, 0.6);
+		transition: border-color 100ms ease-in-out;
+
+		&:hover {
+			border-bottom-style: solid;
+			border-bottom-color: currentColor;
+		}
+	}
 }
 
 .nlt-dropdown {