switch force seed trim with a warning icon

react/src/components/dashboard/importKeyModal/importKeyModal.js

@@ -15,6 +15,8 @@ import {
   ImportKeyModalRender,
 } from './importKeyModal.render';
 
+const SEED_TRIM_TIMEOUT = 5000;
+
 // import gen komodo keys utils
 import '../../../util/crypto/gen/array.map.js';
 import '../../../util/crypto/gen/cryptojs.js';
@@ -44,6 +46,7 @@ class ImportKeyModal extends React.Component {
       seedInputVisibility: false,
       wifInputVisibility: false,
       trimPassphraseTimer: null,
+      seedExtraSpaces: false,
     };
     this.generateKeysFromPassphrase = this.generateKeysFromPassphrase.bind(this);
     this.toggleImportWithRescan = this.toggleImportWithRescan.bind(this);
@@ -62,18 +65,24 @@ class ImportKeyModal extends React.Component {
   }
 
   updateInput(e) {
-    if (e.target.name === 'wifkeysPassphrase') {
-      // remove any empty chars from the start/end of the string
     const newValue = e.target.value;
 
     clearTimeout(this.state.trimPassphraseTimer);
 
     const _trimPassphraseTimer = setTimeout(() => {
+      if (newValue[0] === ' ' ||
+          newValue[newValue.length - 1] === ' ') {
         this.setState({
-          wifkeysPassphrase: newValue ? newValue.trim() : '', // hardcoded field name
+          seedExtraSpaces: true,
         });
-      }, 2000);
+      } else {
+        this.setState({
+          seedExtraSpaces: false,
+        });
+      }
+    }, SEED_TRIM_TIMEOUT);
 
+    if (e.target.name === 'wifkeysPassphrase') {
       this.resizeLoginTextarea();
 
       this.setState({

react/src/components/dashboard/importKeyModal/importKeyModal.render.js

@@ -64,6 +64,16 @@ export const ImportKeyModalRender = function() {
                     <label
                       className="floating-label"
                       htmlFor="wifkeysPassphrase">{ translate('INDEX.PASSPHRASE') }</label>
+                    { this.state.seedExtraSpaces &&
+                      <span>
+                        <i className="icon fa-warning seed-extra-spaces-warning"
+                          data-tip="Your seed contains leading/trailing space characters"
+                          data-html={ true }></i>
+                        <ReactTooltip
+                          effect="solid"
+                          className="text-left" />
+                      </span>
+                    }
                   </div>
                   <div className="text-align-center">
                     <button

react/src/components/dashboard/importKeyModal/importKeyModal.scss

@@ -33,4 +33,10 @@
       top: -4px;
     }
   }
+  .seed-extra-spaces-warning {
+    position: absolute;
+    right: -3px;
+    font-size: 20px;
+    color: rgb(255, 75, 0);
+  }
 }

react/src/components/dashboard/navbar/navbar.render.js

@@ -69,8 +69,7 @@ const NavbarRender = function() {
                 </a>
               </li>
             }
-            { this.props.ActiveCoin.coin !== 'CHIPS' &&
-              this.props.ActiveCoin.mode !== 'spv' &&
+            { this.props.ActiveCoin.mode !== 'spv' &&
               <li className="nav-top-menu">
                 <a onClick={ this.openImportKeyModal }>
                   <i className="site-menu-icon"></i> { translate('IMPORT_KEY.IMPORT_KEY') }

react/src/components/dashboard/settings/settings.bip39KeysPanel.js

@@ -7,6 +7,9 @@ import {
   triggerToaster,
 } from '../../../actions/actionCreators';
 import Store from '../../../store';
+import ReactTooltip from 'react-tooltip';
+
+const SEED_TRIM_TIMEOUT = 5000;
 
 class Bip39KeysPanel extends React.Component {
   constructor() {
@@ -15,6 +18,7 @@ class Bip39KeysPanel extends React.Component {
       keys: null,
       match: '',
       passphrase: '',
+      seedExtraSpaces: false,
       seedInputVisibility: false,
       trimPassphraseTimer: null,
       addressdepth: 20,
@@ -51,18 +55,24 @@ class Bip39KeysPanel extends React.Component {
   }
 
   updateInput(e) {
-    if (e.target.name === 'passphrase') {
-      // remove any empty chars from the start/end of the string
     const newValue = e.target.value;
 
     clearTimeout(this.state.trimPassphraseTimer);
 
     const _trimPassphraseTimer = setTimeout(() => {
+      if (newValue[0] === ' ' ||
+          newValue[newValue.length - 1] === ' ') {
         this.setState({
-          passphrase: newValue ? newValue.trim() : '', // hardcoded field name
+          seedExtraSpaces: true,
         });
-      }, 2000);
+      } else {
+        this.setState({
+          seedExtraSpaces: false,
+        });
+      }
+    }, SEED_TRIM_TIMEOUT);
 
+    if (e.target.name === 'passphrase') {
       this.resizeLoginTextarea();
 
       this.setState({
@@ -103,12 +113,6 @@ class Bip39KeysPanel extends React.Component {
     });
   }
 
-  updateInput(e) {
-    this.setState({
-      [e.target.name]: e.target.value,
-    });
-  }
-
   render() {
     return (
       <div>
@@ -145,6 +149,16 @@ class Bip39KeysPanel extends React.Component {
                   <label
                     className="floating-label"
                     htmlFor="passphrase">{ translate('INDEX.PASSPHRASE') }</label>
+                  { this.state.seedExtraSpaces &&
+                    <span>
+                      <i className="icon fa-warning seed-extra-spaces-warning"
+                        data-tip="Your seed contains leading/trailing space characters"
+                        data-html={ true }></i>
+                      <ReactTooltip
+                        effect="solid"
+                        className="text-left" />
+                    </span>
+                  }
                 </div>
               </div>
               <div className="col-sm-5 no-padding-left">

react/src/components/dashboard/settings/settings.exportKeysPanel.js

@@ -7,6 +7,9 @@ import {
   triggerToaster,
 } from '../../../actions/actionCreators';
 import Store from '../../../store';
+import ReactTooltip from 'react-tooltip';
+
+const SEED_TRIM_TIMEOUT = 5000;
 
 class ExportKeysPanel extends React.Component {
   constructor() {
@@ -16,6 +19,7 @@ class ExportKeysPanel extends React.Component {
       trimPassphraseTimer: null,
       wifkeysPassphrase: '',
       keys: null,
+      seedExtraSpaces: false,
     };
     this.exportWifKeys = this.exportWifKeys.bind(this);
     this.toggleSeedInputVisibility = this.toggleSeedInputVisibility.bind(this);
@@ -109,18 +113,24 @@ class ExportKeysPanel extends React.Component {
   }
 
   updateInput(e) {
-    if (e.target.name === 'wifkeysPassphrase') {
-      // remove any empty chars from the start/end of the string
     const newValue = e.target.value;
 
     clearTimeout(this.state.trimPassphraseTimer);
 
     const _trimPassphraseTimer = setTimeout(() => {
+      if (newValue[0] === ' ' ||
+          newValue[newValue.length - 1] === ' ') {
+        this.setState({
+          seedExtraSpaces: true,
+        });
+      } else {
         this.setState({
-          wifkeysPassphrase: newValue ? newValue.trim() : '', // hardcoded field name
+          seedExtraSpaces: false,
         });
-      }, 2000);
+      }
+    }, SEED_TRIM_TIMEOUT);
 
+    if (e.target.name === 'wifkeysPassphrase') {
       this.resizeLoginTextarea();
 
       this.setState({
@@ -198,6 +208,16 @@ class ExportKeysPanel extends React.Component {
                 <label
                   className="floating-label"
                   htmlFor="wifkeysPassphrase">{ translate('INDEX.PASSPHRASE') } / WIF</label>
+                { this.state.seedExtraSpaces &&
+                  <span>
+                    <i className="icon fa-warning seed-extra-spaces-warning"
+                      data-tip="Your seed contains leading/trailing space characters"
+                      data-html={ true }></i>
+                    <ReactTooltip
+                      effect="solid"
+                      className="text-left" />
+                  </span>
+                }
               </div>
               <div className="col-sm-12 col-xs-12 text-align-center">
                 <button

react/src/components/dashboard/settings/settings.scss

@@ -130,6 +130,12 @@
       content: '\F273';
     }
   }
+  .seed-extra-spaces-warning {
+    position: absolute;
+    right: -3px;
+    font-size: 20px;
+    color: rgb(255, 75, 0);
+  }
 }
 
 @keyframes max-height {

react/src/components/login/login.js

@@ -31,6 +31,7 @@ import { md5 } from '../../util/crypto/md5';
 
 const IGUNA_ACTIVE_HANDLE_TIMEOUT = 3000;
 const IGUNA_ACTIVE_COINS_TIMEOUT = 10000;
+const SEED_TRIM_TIMEOUT = 5000;
 
 // TODO: remove duplicate activehandle and activecoins calls
 
@@ -64,6 +65,7 @@ class Login extends React.Component {
       enableEncryptSeed: false,
       selectedShortcutNative: '',
       selectedShortcutSPV: '',
+      seedExtraSpaces: false,
     };
     this.defaultState = JSON.parse(JSON.stringify(this.state));
     this.toggleActivateCoinForm = this.toggleActivateCoinForm.bind(this);
@@ -290,22 +292,27 @@ class Login extends React.Component {
   }
 
   updateLoginPassPhraseInput(e) {
-    // remove any empty chars from the start/end of the string
     const newValue = e.target.value;
 
     clearTimeout(this.state.trimPassphraseTimer);
 
     const _trimPassphraseTimer = setTimeout(() => {
+      if (newValue[0] === ' ' ||
+          newValue[newValue.length - 1] === ' ') {
         this.setState({
-        loginPassphrase: newValue ? newValue.trim() : '', // hardcoded field name
-        loginPassPhraseSeedType: this.getLoginPassPhraseSeedType(newValue),
+          seedExtraSpaces: true,
         });
-    }, 2000);
+      } else {
+        this.setState({
+          seedExtraSpaces: false,
+        });
+      }
+    }, SEED_TRIM_TIMEOUT);
 
     this.resizeLoginTextarea();
 
     this.setState({
-      trimPassphraseTimer: _trimPassphraseTimer,
+      // trimPassphraseTimer: _trimPassphraseTimer,
       [e.target.name === 'loginPassphraseTextarea' ? 'loginPassphrase' : e.target.name]: newValue,
       loginPassPhraseSeedType: this.getLoginPassPhraseSeedType(newValue),
     });

react/src/components/login/login.render.js

@@ -102,6 +102,16 @@ const LoginRender = function() {
                 <div className="placeholder-label">{ this.state.loginPassPhraseSeedType }</div>
               </div>
             }
+            { this.state.seedExtraSpaces &&
+              <span>
+                <i className="icon fa-warning seed-extra-spaces-warning"
+                  data-tip="Your seed contains leading/trailing space characters"
+                  data-html={ true }></i>
+                <ReactTooltip
+                  effect="solid"
+                  className="text-left" />
+              </span>
+            }
             { this.state.loginPassphrase &&
               this.state.enableEncryptSeed &&
               <div className="row">

react/src/components/login/login.scss

@@ -187,6 +187,13 @@ option.login-option {
 }
 
 .page-login {
+  .seed-extra-spaces-warning {
+    position: absolute;
+    right: -30px;
+    margin-top: 54px;
+    font-size: 20px;
+    color: rgb(255, 75, 0);
+  }
   .addcoin-shortcut {
     display: inline-block;
     width: 46%;