onboarding: warning on copy/paste seed (#420)

kyokan · Apr 20, 2022 · 66ade64 · 66ade64
1 parent be5fb10
commit 66ade64
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 7 deletions.
diff --git a/app/pages/CopySeed/copy.scss b/app/pages/CopySeed/copy.scss
@@ -9,6 +9,12 @@
     box-sizing: border-box;
   }
 
+  &__warning {
+    @extend %h4;
+    margin: 0.2rem 0;
+    color: $orange-red;
+  }
+
   &__textarea {
     @extend %col-nowrap;
     @extend %box-input;

diff --git a/app/pages/CopySeed/index.js b/app/pages/CopySeed/index.js
@@ -3,6 +3,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import classNames from 'classnames';
+import copy from 'copy-to-clipboard';
 import { shell } from 'electron'
 import './copy.scss';
 import WizardHeader from '../../components/WizardHeader';
@@ -26,6 +27,11 @@ export default class CopySeed extends Component {
 
   static contextType = I18nContext;
 
+  state = {
+    copyWarningVisible: false,
+    copied: false,
+  };
+
   render() {
     const {
       currentStep,
@@ -36,6 +42,8 @@ export default class CopySeed extends Component {
       seedphrase
     } = this.props;
 
+    const {copyWarningVisible, copied} = this.state;
+
     const {t} = this.context;
 
     return (
@@ -49,19 +57,39 @@ export default class CopySeed extends Component {
         <div className="create-password__content">
           <div className="backup-warning__header_text">{t('backupWarningHeader')}</div>
           <div className="import_warning_text">
-            {t('backupWarningText')}
+            {t('backupWarningText')}{' '}
             <span
               className="import-learn-more-text"
               onClick={() => shell.openExternal('https://en.bitcoinwiki.org/wiki/Mnemonic_phrase')}
             >
               {t('learnMore')}
             </span>
           </div>
+          {copyWarningVisible ? (
+            <div className="copy-seed__warning">
+              {t(copied ? 'seedCopyDone' : 'seedCopyWarning')}{' '}
+              {copied ? null : (
+                <span
+                  className="import-learn-more-text"
+                  onClick={() => {
+                    copy(seedphrase);
+                    this.setState({ copied: true });
+                  }}
+                >
+                  {t('copy')}
+                </span>
+              )}
+            </div>
+          ) : null}
           <div className="import-enter__textarea-container">
             <textarea
               className="import_enter_textarea"
               value={seedphrase}
               onClick={e => e.target.select()}
+              onCopy={e => {
+                e.preventDefault();
+                this.setState({ copyWarningVisible: true, copied: false });
+              }}
               readOnly
             />
           </div>

diff --git a/app/pages/Onboarding/ConfirmSeed/confirm-seed.scss b/app/pages/Onboarding/ConfirmSeed/confirm-seed.scss
@@ -1,6 +1,12 @@
 @import '../../../variables';
 
 .confirm-seed {
+  &__warning {
+    @extend %h4;
+    margin: 0.2rem 0;
+    color: $orange-red;
+  }
+
   &__editable {
     display: flex;
     flex-flow: row wrap;

diff --git a/app/pages/Onboarding/ConfirmSeed/index.js b/app/pages/Onboarding/ConfirmSeed/index.js
@@ -20,7 +20,8 @@ export default class ConfirmSeed extends Component {
 
   state = {
     words: '',
-    pasteAttempted: false
+    seedphraseNotMatching: false,
+    pasted: false,
   };
 
   handleKeyDown = e => {
@@ -39,6 +40,8 @@ export default class ConfirmSeed extends Component {
       seedphrase
     } = this.props;
 
+    const {pasted} = this.state;
+
     const {t} = this.context;
 
     return (
@@ -56,16 +59,22 @@ export default class ConfirmSeed extends Component {
           <div className="import_warning_text">
             {t('obConfirmSeedBody')}
           </div>
+          {pasted ? (
+            <div className="confirm-seed__warning">
+              {t('seedPasteWarning')}
+            </div>
+          ) : null}
           <div
             className={c('import-enter__textarea-container', {
-              'copy-seed__textarea--shake': this.state.pasteAttempted
+              'copy-seed__textarea--shake': this.state.seedphraseNotMatching
             })}
           >
             <textarea
               className="import_enter_textarea"
               placeholder={t('obConfirmSeedPlaceholder')}
               onKeyDown={this.handleKeyDown}
               onChange={e => this.setState({ words: e.target.value })}
+              onPaste={() => this.setState({ pasted: true })}
               value={this.state.words}
               autoFocus
             />
@@ -83,9 +92,9 @@ export default class ConfirmSeed extends Component {
               if (this.state.words.trim() === seedphrase) {
                 onNext();
               } else {
-                this.setState({ pasteAttempted: true });
+                this.setState({ seedphraseNotMatching: true });
                 setTimeout(
-                  () => this.setState({ pasteAttempted: false }),
+                  () => this.setState({ seedphraseNotMatching: false }),
                   1000
                 );
               }

diff --git a/app/pages/Onboarding/ImportSeedEnterMnemonic/index.js b/app/pages/Onboarding/ImportSeedEnterMnemonic/index.js
@@ -10,7 +10,8 @@ export default class ImportSeedEnterMnemonic extends Component {
     super(props);
 
     this.state = {
-      mnemonic: ''
+      mnemonic: '',
+      pasted: false,
     };
   }
 
@@ -32,6 +33,7 @@ export default class ImportSeedEnterMnemonic extends Component {
 
   render() {
     const { currentStep, totalSteps, onBack, onNext } = this.props;
+    const { pasted } = this.state;
     const {t} = this.context;
     const importPlaceholder = t('obImportSeedPlaceholder');
 
@@ -49,12 +51,18 @@ export default class ImportSeedEnterMnemonic extends Component {
           <div className="import_warning_text">
             {t('obImportSeedWarning')}
           </div>
+          {pasted ? (
+            <div className="confirm-seed__warning">
+              {t('seedPasteWarning')}
+            </div>
+          ) : null}
           <div className="import-enter__textarea-container">
             <textarea
               className="import_enter_textarea"
               placeholder={importPlaceholder}
               value={this.state.mnemonic}
               onChange={this.onChangeMnemonic}
+              onPaste={() => this.setState({ pasted: true })}
               autoFocus
             />
           </div>

diff --git a/locales/en.json b/locales/en.json
@@ -72,6 +72,7 @@
   "comingSoon": "Coming Soon",
   "confirmFee": "Confirm Fee",
   "confirmReset": "Confirm Reset",
+  "copy": "Copy",
   "createListing": "Create Listing",
   "createNewTransaction": "Create New Transaction",
   "createNewWallet": "Create new wallet",
@@ -215,7 +216,7 @@
   "obBackupSeedCTA": "I agree",
   "obBackupSeedHeader": "Back up your recovery seed phrase",
   "obBackupSeedWarning": "I understand that if I lose my seed phrase, I will no longer be able to access my wallet.",
-  "obConfirmSeedBody": "Type in your recovery words below. Pasting is disabled to ensure that you have securely backed up your wallet on paper.",
+  "obConfirmSeedBody": "Type in your recovery words below.",
   "obConfirmSeedCTA": "Create New Wallet",
   "obConfirmSeedHeader": "Confirm your recovery phrase",
   "obConfirmSeedPlaceholder": "Enter your seed phrase",
@@ -359,6 +360,9 @@
   "sdBackupReminder": "Reminder: Don't forget to backup your exchange data in %s",
   "searchInputPlaceholder": "Search a top-level domain",
   "searchYourBids": "Search your bids",
+  "seedCopyWarning": "Copying the seed phrase is not safe as all other programs can read the clipboard. Copy anyway?",
+  "seedCopyDone": "Copied! Make sure to clear your clipboard after the seed phrase is backed up.",
+  "seedPasteWarning": "Make sure to clear the recovery phrase from your clipboard after pasting.",
   "sendAmountLabel": "Amount to send:",
   "sendAvailableText": "Available to send (including fee): %s",
   "sendConfirmTitle": "Confirm Transaction",