Merge pull request #29 from SuperNETorg/v0.25

V0.25

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') {
+    const newValue = e.target.value;
-      // remove any empty chars from the start/end of the string
-      const newValue = e.target.value;
 
-      clearTimeout(this.state.trimPassphraseTimer);
+    clearTimeout(this.state.trimPassphraseTimer);
 
-      const _trimPassphraseTimer = setTimeout(() => {
+    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/sendCoin/sendCoin.js

@@ -60,7 +60,7 @@ class SendCoin extends React.Component {
       btcFeesAdvancedStep: 9,
       btcFeesSize: 0,
       btcFeesTimeBasedStep: 1,
-      btcPreflightRes: null,
+      spvPreflightRes: null,
     };
     this.defaultState = JSON.parse(JSON.stringify(this.state));
     this.updateInput = this.updateInput.bind(this);
@@ -262,7 +262,7 @@ class SendCoin extends React.Component {
     if (_coinAddresses &&
         _coinAddresses[type] &&
         _coinAddresses[type].length) {
-        _coinAddresses[type].map((address) => {
+      _coinAddresses[type].map((address) => {
         if (address.amount > 0 &&
             (type !== 'public' || (address.canspend && type === 'public'))) {
           _items.push(
@@ -486,7 +486,12 @@ class SendCoin extends React.Component {
               this.setState(Object.assign({}, this.state, {
                 spvVerificationWarning: !sendPreflight.result.utxoVerified,
                 spvPreflightSendInProgress: false,
-                btcPreflightRes: this.props.ActiveCoin.coin === 'BTC' ? { fee: sendPreflight.result.fee, value: sendPreflight.result.value, change: sendPreflight.result.change } : null,
+                spvPreflightRes: {
+                  fee: sendPreflight.result.fee,
+                  value: sendPreflight.result.value,
+                  change: sendPreflight.result.change,
+                  estimatedFee: sendPreflight.result.estimatedFee,
+                },
               }));
             } else {
               this.setState(Object.assign({}, this.state, {

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

@@ -244,17 +244,17 @@ export const SendRender = function() {
                   </div>
                 </div>
               }
-              { this.state.btcPreflightRes &&
+              { this.state.spvPreflightRes &&
                 <div className="row padding-top-20">
                   <div className="col-xs-12">
                     <strong>Fee</strong>
                   </div>
-                  <div className="col-lg-12 col-sm-12 col-xs-12">{ formatValue(this.state.btcPreflightRes.fee * 0.00000001) } ({ this.state.btcPreflightRes.fee } sats)</div>
+                  <div className="col-lg-12 col-sm-12 col-xs-12">{ formatValue(this.state.spvPreflightRes.fee * 0.00000001) } ({ this.state.spvPreflightRes.fee } sats)</div>
                 </div>
               }
-              { this.state.btcPreflightRes &&
+              { this.state.spvPreflightRes &&
                 <div className="row padding-top-20">
-                  { this.state.btcPreflightRes.change === 0 &&
+                  { this.state.spvPreflightRes.change === 0 &&
                     <div className="col-lg-12 col-sm-12 col-xs-12">
                       <strong>Adjusted amount</strong>
                       <span>
@@ -265,13 +265,19 @@ export const SendRender = function() {
                           effect="solid"
                           className="text-left" />
                       </span>
-                      &nbsp;{ formatValue((this.state.btcPreflightRes.value * 0.00000001) - (this.state.btcPreflightRes.fee * 0.00000001)) }
+                      &nbsp;{ formatValue((this.state.spvPreflightRes.value * 0.00000001) - (this.state.spvPreflightRes.fee * 0.00000001)) }
                     </div>
                   }
-                  { this.state.btcPreflightRes.change > 0 &&
+                  { this.state.spvPreflightRes.estimatedFee < 0 &&
+                    <div className="col-lg-12 col-sm-12 col-xs-12 padding-bottom-20">
+                      <strong>KMD interest</strong>&nbsp;
+                      { Math.abs(formatValue(this.state.spvPreflightRes.estimatedFee * 0.00000001)) } to { this.props.Dashboard.electrumCoins[this.props.ActiveCoin.coin].pub }
+                    </div>
+                  }
+                  { this.state.spvPreflightRes.change > 0 &&
                     <div className="col-lg-12 col-sm-12 col-xs-12">
                       <strong>Total (amount + transaction fee)</strong>&nbsp;
-                      { formatValue((this.state.btcPreflightRes.value * 0.00000001) + (this.state.btcPreflightRes.fee * 0.00000001)) }
+                      { formatValue((this.state.spvPreflightRes.value * 0.00000001) + (this.state.spvPreflightRes.fee * 0.00000001)) }
                     </div>
                   }
                 </div>

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') {
+    const newValue = e.target.value;
-      // remove any empty chars from the start/end of the string
-      const newValue = e.target.value;
 
-      clearTimeout(this.state.trimPassphraseTimer);
+    clearTimeout(this.state.trimPassphraseTimer);
 
-      const _trimPassphraseTimer = setTimeout(() => {
+    const _trimPassphraseTimer = setTimeout(() => {
+      if (newValue[0] === ' ' ||
+          newValue[newValue.length - 1] === ' ') {
+        this.setState({
+          seedExtraSpaces: true,
+        });
+      } else {
         this.setState({
-          passphrase: newValue ? newValue.trim() : '', // hardcoded field name
+          seedExtraSpaces: false,
         });
-      }, 2000);
+      }
+    }, 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') {
+    const newValue = e.target.value;
-      // remove any empty chars from the start/end of the string
-      const newValue = e.target.value;
 
-      clearTimeout(this.state.trimPassphraseTimer);
+    clearTimeout(this.state.trimPassphraseTimer);
 
-      const _trimPassphraseTimer = setTimeout(() => {
+    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({
@@ -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(() => {
-      this.setState({
+      if (newValue[0] === ' ' ||
-        loginPassphrase: newValue ? newValue.trim() : '', // hardcoded field name
+          newValue[newValue.length - 1] === ' ') {
-        loginPassPhraseSeedType: this.getLoginPassPhraseSeedType(newValue),
+        this.setState({
-      });
+          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%;