settings native wallet.dat fetch panel

react/src/actions/actions/settings.js

@@ -396,7 +396,7 @@ export function coindGetStdout(chain) {
       method: 'GET',
       headers: {
         'Content-Type': 'application/json',
-      }
+      },
     })
     .catch((error) => {
       console.log(error);
@@ -414,3 +414,30 @@ export function coindGetStdout(chain) {
     });
   });
 }
+
+export function getWalletDatKeys(chain, keyMatchPattern) {
+  const _chain = chain === 'KMD' ? null : chain;
+
+  return new Promise((resolve, reject) => {
+    fetch(keyMatchPattern ? `http://127.0.0.1:${Config.agamaPort}/shepherd/coindwalletkeys?chain=${_chain}&search=${keyMatchPattern}` : `http://127.0.0.1:${Config.agamaPort}/shepherd/coindwalletkeys?chain=${_chain}`, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    })
+    .catch((error) => {
+      console.log(error);
+      dispatch(
+        triggerToaster(
+          'getWalletDatKeys',
+          'Error',
+          'error'
+        )
+      );
+    })
+    .then(response => response.json())
+    .then(json => {
+      resolve(json);
+    });
+  });
+}

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

@@ -51,7 +51,7 @@ class DaemonStdoutPanel extends React.Component {
     for (let i = 0; i < _nativeCoins.length; i++) {
       _items.push(
         <option
-          key={ `coind-stdout-coins-${ coin }` }
+          key={ `coind-stdout-coins-${i}` }
           value={ `${_nativeCoins[i]}` }>{ `${_nativeCoins[i]}` }</option>
       );
     }

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

@@ -0,0 +1,188 @@
+import React from 'react';
+import { translate } from '../../../translate/translate';
+import { connect } from 'react-redux';
+import { getWalletDatKeys } from '../../../actions/actionCreators';
+import { coindList } from '../../../util/coinHelper';
+import Store from '../../../store';
+
+class NativeWalletDatKeysPanel extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      coin: 'none',
+      keys: null,
+      keyMatchPattern: '',
+      loading: false,
+    };
+    this._getWalletDatKeys = this._getWalletDatKeys.bind(this);
+    this.updateInput = this.updateInput.bind(this);
+  }
+
+  componentWillReceiveProps(props) {
+    if (props.Dashboard &&
+        props.Dashboard.activeSection !== 'settings') {
+      this.setState(Object.assign({}, this.state, {
+        keys: null,
+        keyMatchPattern: null,
+      }));
+    }
+  }
+
+  _getWalletDatKeys() {
+    const _coin = this.state.coin;
+
+    this.setState({
+      loading: true,
+      keys: null,
+    });
+
+    setTimeout(() => {
+      getWalletDatKeys(_coin, this.state.keyMatchPattern.length ? this.state.keyMatchPattern : null)
+      .then((res) => {
+        this.setState({
+          keys: res,
+          loading: false,
+        });
+
+        if (res.msg === 'success' &&
+            res.result.length > 0) {
+          setTimeout(() => {
+            document.querySelector('#coind-keys-textarea-left').style.height = '1px';
+            document.querySelector('#coind-keys-textarea-left').style.height = `${(15 + document.querySelector('#coind-keys-textarea-left').scrollHeight)}px`;
+            document.querySelector('#coind-keys-textarea-right').style.height = `${(15 + document.querySelector('#coind-keys-textarea-right').scrollHeight)}px`;
+          }, 100);
+        }
+      });
+    }, 100);
+  }
+
+  updateInput(e) {
+    this.setState({
+      [e.target.name]: e.target.value,
+    });
+  }
+
+  renderCoinListSelectorOptions() {
+    let _items = [];
+    let _nativeCoins = coindList();
+
+    _items.push(
+      <option
+        key={ `coind-walletdat-coins-none` }
+        value="none">Pick a coin</option>
+    );
+    for (let i = 0; i < _nativeCoins.length; i++) {
+      _items.push(
+        <option
+          key={ `coind-walletdat-coins-${ _nativeCoins[i] }` }
+          value={ `${_nativeCoins[i]}` }>{ `${_nativeCoins[i]}` }</option>
+      );
+    }
+
+    return _items;
+  }
+
+  renderKeys() {
+    let _items = [];
+
+    const _keys = this.state.keys;
+
+    if (_keys.msg === 'error') {
+      return (
+        <div>{ _keys.result }</div>
+      );
+    } else {
+      let _addresses = '';
+      let _wifs = '';
+
+      for (let i = 0; i < _keys.result.length; i++) {
+        _addresses += _keys.result[i].pub + '\n';
+        _wifs += _keys.result[i].priv + '\n';
+      }
+
+      return (
+        <div>
+          <div className="col-sm-12 margin-bottom-20">
+            Found <strong>{ _keys.result.length }</strong> keys
+          </div>
+          { _keys.result.length > 0 &&
+            <div className="col-sm-6">
+              <div>
+                <strong>Address</strong>
+              </div>
+              <textarea
+                readOnly
+                id="coind-keys-textarea-left"
+                className="form-control settings-coind-stdout-textarea"
+                value={ _addresses }></textarea>
+            </div>
+          }
+          { _keys.result.length > 0 &&
+            <div className="col-sm-6">
+              <div>
+                <strong>WIF</strong>
+              </div>
+              <textarea
+                readOnly
+                id="coind-keys-textarea-right"
+                className="form-control settings-coind-stdout-textarea"
+                value={ _wifs }></textarea>
+            </div>
+          }
+        </div>
+      );
+    }
+  }
+
+  render() {
+    return (
+      <div>
+        <div className="row">
+          <div className="col-sm-12 padding-bottom-10">
+            <div>
+              <div className="col-sm-4 no-padding-left text-center">
+                <select
+                  className="form-control form-material"
+                  name="coin"
+                  value={ this.state.coin }
+                  onChange={ (event) => this.updateInput(event) }
+                  autoFocus>
+                  { this.renderCoinListSelectorOptions() }
+                </select>
+                <input
+                  type="text"
+                  className="form-control margin-top-10"
+                  autoComplete="off"
+                  name="keyMatchPattern"
+                  onChange={ this.updateInput }
+                  placeholder="Search key pattern"
+                  value={ this.state.keyMatchPattern } />
+                <button
+                  type="button"
+                  className="btn btn-primary waves-effect waves-light margin-top-20"
+                  disabled={ this.state.loading || this.state.coin === 'none' }
+                  onClick={ this._getWalletDatKeys }>{ this.state.loading ? 'Fetching keys...' : 'Get keys' }</button>
+              </div>
+            </div>
+          </div>
+          { this.state.keys &&
+            <div className="col-sm-12">
+              <div className="form-group form-material floating no-padding-left">
+              <hr />
+              { this.renderKeys() }
+              </div>
+            </div>
+          }
+        </div>
+      </div>
+    );
+  };
+}
+
+const mapStateToProps = (state) => {
+  return {
+    Dashboard: state.Dashboard,
+  };
+};
+
+export default connect(mapStateToProps)(NativeWalletDatKeysPanel);

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

@@ -15,6 +15,7 @@ import ExportKeysPanel from './settings.exportKeysPanel';
 import SupportPanel from './settings.supportPanel';
 import SPVServersPanel from './settings.spvServersPanel';
 import DaemonStdoutPanel from './settings.daemonStdoutPanel';
+import NativeWalletDatKeysPanel from './settings.nativeWalletDatKeysPanel';
 
 // import WalletInfoPanel from './settings.walletInfoPanel';
 // import WalletBackupPanel from './settings.walletBackupPanel';
@@ -104,6 +105,15 @@ export const SettingsRender = function() {
                     <ExportKeysPanel />
                   </PanelSection>
                 }
+                { this.props.Main.coins &&
+                  this.props.Main.coins.native &&
+                  Object.keys(this.props.Main.coins.native).length > 0 &&
+                  <PanelSection
+                    title={ 'Wallet.dat keys' }
+                    icon="icon md-key">
+                    <NativeWalletDatKeysPanel />
+                  </PanelSection>
+                }
                 { this.props.Main.coins &&
                   this.props.Main.coins.spv &&
                   Object.keys(this.props.Main.coins.spv).length &&

react/src/util/coinHelper.js

@@ -403,3 +403,30 @@ export function getModeInfo(mode) {
     color: modecolor,
   };
 }
+
+export function coindList() {
+  const _coins = [
+    'KMD',
+    'CHIPS',
+    'BET',
+    'BOTS',
+    'CEAL',
+    'COQUI',
+    'CRYPTO',
+    'HODL',
+    'DEX',
+    'JUMBLR',
+    'KV',
+    'MGW',
+    'MVP',
+    'MNZ',
+    'PANGEA',
+    'REVS',
+    'SHARK',
+    'MESH',
+    'SUPERNET',
+    'WLC',
+  ];
+
+  return _coins;
+}