Merge pull request #130 from SuperNETorg/settings-wif

Settings wif

react/change.log

@@ -1,5 +1,7 @@
 v0.2.0.2a-beta
+--------------
 front:
+- fixed native t to t bug that led to interest loss
 - added pending request(s) spinner
 - added missing native z_balance api call for z-addresses
 - fixed native t to z address send bug
@@ -8,6 +10,8 @@ front:
 - minor UI reorder change
 - limit http stack history to 150 calls of each type
 - sort http stack history desc
+- swapped gettotalbalance interest with getinfo interest
+- extended settings / export keys ui
 
 back:
 - added cli route

react/src/actions/actions/settings.js

@@ -42,7 +42,7 @@ export function getAppInfo() {
 export function settingsWifkeyState(json, coin) {
   return {
     type: GET_WIF_KEY,
-    wifkey: json[`${coin}wif`],
+    wifkey: json,
     address: json[coin],
   }
 }

react/src/components/dashboard/settings.js

@@ -26,7 +26,6 @@ import {
   2) add fiat section
   3) kickstart section
   4) batch export/import wallet addresses
-  5) export keys, add coin selector
 */
 class Settings extends React.Component {
   constructor(props) {
@@ -41,6 +40,8 @@ class Settings extends React.Component {
       cliCmdString: null,
       cliCoin: null,
       cliResponse: null,
+      exportWifKeysRaw: false,
+      seedInputVisibility: false,
     };
     this.exportWifKeys = this.exportWifKeys.bind(this);
     this.updateInput = this.updateInput.bind(this);
@@ -52,6 +53,8 @@ class Settings extends React.Component {
     this.renderPeersList = this.renderPeersList.bind(this);
     this.renderSNPeersList = this.renderSNPeersList.bind(this);
     this._saveAppConfig = this._saveAppConfig.bind(this);
+    this.exportWifKeysRaw = this.exportWifKeysRaw.bind(this);
+    this.toggleSeedInputVisibility = this.toggleSeedInputVisibility.bind(this);
   }
 
   componentDidMount() {
@@ -72,6 +75,12 @@ class Settings extends React.Component {
     }
   }
 
+  toggleSeedInputVisibility() {
+    this.setState({
+      seedInputVisibility: !this.state.seedInputVisibility,
+    });
+  }
+
   execCliCmd() {
     Store.dispatch(shepherdCli('passthru', this.state.cliCoin, this.state.cliCmd));
   }
@@ -114,12 +123,14 @@ class Settings extends React.Component {
 
   renderPeersList() {
     if (this.state.getPeersCoin) {
-      const coin = this.state.getPeersCoin.split('|')[0];
-
-      if (this.props.Settings.rawPeers &&
-          this.state.getPeersCoin &&
-          this.props.Settings.rawPeers[coin]) {
-        return this.props.Settings.rawPeers[coin].map((ip) =>
+      const _getPeersCoin = this.state.getPeersCoin;
+      const _rawPeers = this.props.Settings.rawPeers;
+      const coin = _getPeersCoin.split('|')[0];
+
+      if (_rawPeers &&
+          _getPeersCoin &&
+          _rawPeers[coin]) {
+        return _rawPeers[coin].map((ip) =>
           <div key={ ip }>{ ip }</div>
         );
       } else {
@@ -142,12 +153,14 @@ class Settings extends React.Component {
 
   renderSNPeersList() {
     if (this.state.getPeersCoin) {
-      const coin = this.state.getPeersCoin.split('|')[0];
-
-      if (this.props.Settings.supernetPeers &&
-          this.state.getPeersCoin &&
-          this.props.Settings.supernetPeers[coin]) {
-        return this.props.Settings.supernetPeers[coin].map((ip) =>
+      const _getPeersCoin = this.state.getPeersCoin;
+      const _supernetPeers = this.props.Settings.supernetPeers;
+      const coin = _getPeersCoin.split('|')[0];
+
+      if (_supernetPeers &&
+          _getPeersCoin &&
+          _supernetPeers[coin]) {
+        return _supernetPeers[coin].map((ip) =>
           <div key={ ip }>{ ip }</div>
         );
       } else {
@@ -331,6 +344,60 @@ class Settings extends React.Component {
     }
   }
 
+  renderExportWifKeysRaw() {
+    const _wifKeysResponse = this.props.Settings.wifkey;
+
+    if (_wifKeysResponse &&
+        this.state.exportWifKeysRaw) {
+      return (
+        <div className="padding-bottom-30 padding-top-30">{ JSON.stringify(_wifKeysResponse, null, '\t') }</div>
+      );
+    } else {
+      return null;
+    }
+  }
+
+  renderWifKeys() {
+    let items = [];
+
+    if (this.props.Settings.wifkey) {
+      const _wifKeys = this.props.Settings.wifkey;
+
+      for (let i = 0; i < 2; i++) {
+        items.push(
+          <tr key={ `wif-export-table-header-${i}` }>
+            <td className="padding-bottom-10 padding-top-10">
+              <strong>{ i === 0 ? 'Address list' : 'Wif key list' }</strong>
+            </td>
+            <td className="padding-bottom-10 padding-top-10"></td>
+          </tr>
+        );
+
+        for (let _key in _wifKeys) {
+          if ((i === 0 && _key.length === 3 && _key !== 'tag') ||
+              (i === 1 && _key.indexOf('wif') > -1)) {
+            items.push(
+              <tr key={ _key }>
+                <td>{ _key }</td>
+                <td className="padding-left-15">{ _wifKeys[_key] }</td>
+              </tr>
+            );
+          }
+        }
+      }
+
+      return items;
+    } else {
+      return null;
+    }
+  }
+
+  exportWifKeysRaw() {
+    this.setState(Object.assign({}, this.state, {
+      exportWifKeysRaw: !this.state.exportWifKeysRaw,
+    }));
+  }
+
   render() {
     return SettingsRender.call(this);
   }

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

@@ -278,7 +278,10 @@ export const SettingsRender = function() {
                       style={{ height: this.state.activeTab === 4 ? this.state.activeTabHeight + 'px' : '0' }}>
                       <div className="panel-body">
                         <p>
-                          <div>{ this.renderLB('INDEX.ONLY_ACTIVE_WIF_KEYS') }</div><br/>
+                          <div className="padding-bottom-20">{ this.renderLB('INDEX.ONLY_ACTIVE_WIF_KEYS') }</div>
+                          <div className="padding-bottom-20">
+                            <i>{ this.renderLB('SETTINGS.EXPORT_KEYS_NOTE') }</i>
+                          </div>
                           <strong>
                             <i>{ translate('INDEX.PLEASE_KEEP_KEYS_SAFE') }</i>
                           </strong>
@@ -287,11 +290,14 @@ export const SettingsRender = function() {
                         <form className="wifkeys-form" method="post" action="javascript:" autoComplete="off">
                           <div className="form-group form-material floating">
                             <input
-                              type="password"
+                              type={ this.state.seedInputVisibility ? 'text' : 'password' }
                               className="form-control"
                               name="wifkeysPassphrase"
                               id="wifkeysPassphrase"
                               onChange={ this.updateInput } />
+                            <i
+                              className={ this.state.seedInputVisibility ? 'seed-toggle fa fa-eye-slash' : 'seed-toggle fa fa-eye' }
+                              onClick={ this.toggleSeedInputVisibility }></i>
                             <label className="floating-label" htmlFor="wifkeysPassphrase">{ translate('INDEX.PASSPHRASE') }</label>
                           </div>
                           <div className="col-sm-12 col-xs-12 text-align-center">
@@ -304,20 +310,18 @@ export const SettingsRender = function() {
 
                         <div className="col-sm-12 padding-top-15">
                           <div className="row">
-                            <table className={ this.props.Settings && this.props.Settings.address ? 'table show' : 'table hide' }>
-                              <tr>
-                                <td>
-                                  <strong>{ this.props.ActiveCoin.coin }</strong>
-                                </td>
-                                <td className="padding-left-15">{ this.props.Settings.address }</td>
-                              </tr>
-                              <tr>
-                                <td>
-                                  <strong>{ this.props.ActiveCoin.coin }Wif</strong>
-                                </td>
-                                <td className="padding-left-15">{ this.props.Settings.wifkey }</td>
-                              </tr>
+                            <table className="table">
+                              { this.renderWifKeys() }
                             </table>
+                            <div className={ this.props.Settings.wifkey ? 'col-sm-12 col-xs-12 text-align-center' : 'hide' }>
+                              <button
+                                type="button"
+                                className="btn btn-primary waves-effect waves-light"
+                                onClick={ this.exportWifKeysRaw }>{ this.state.exportWifKeysRaw ? 'Hide' : 'Show' } raw data</button>
+                            </div>
+                            <div className={ this.state.exportWifKeysRaw ? 'col-sm-12 col-xs-12 text-align-center' : 'hide' }>
+                              { this.renderExportWifKeysRaw() }
+                            </div>
                           </div>
                         </div>
                       </div>

react/src/translate/en.js

@@ -426,7 +426,9 @@ export const _lang = {
       'BIN': 'Bin',
       'DIR': 'Dir',
       'ADD_PEER_IP': 'Add Peer IP',
-      'APP_SESSION': 'App Session'
+      'APP_SESSION': 'App Session',
+      'EXPORT_KEYS_NOTE': 'Note: it\'s important that you provide the same passphrase you used to login to the wallet!<br>' +
+                          'In case passphrases will not match wallet is going to log you out of current session.'
     },
     'TX_INFO': {
       'ADDRESS': 'address',