native wallet components #1

react/src/actions/actionCreators.js

@@ -801,6 +801,96 @@ export function getSyncInfo(coin) {
   }
 }
 
+function getKMDAddressesNativeState(json) {
+  return {
+    type: ACTIVE_COIN_GET_ADDRESSES,
+    addresses: json,
+  }
+}
+
+export function getKMDAddressesNative(coin, pubpriv) {
+  var payload,
+      ajax_data_to_hex = '',
+      ajax_function_input = '',
+      tmplistaddr_hex_input = '',
+      passthru_agent = getPassthruAgent(coin),
+      tmpIguanaRPCAuth = 'tmpIgRPCUser@' + sessionStorage.getItem('IguanaRPCAuth');
+
+  if ( pubpriv === 'public' ) {
+    ajax_function_input = 'getaddressesbyaccount';
+    tmplistaddr_hex_input = '222200';
+  }
+  if ( pubpriv === 'private' ) {
+    ajax_function_input = 'z_listaddresses';
+    tmplistaddr_hex_input = '';
+  }
+
+  if (passthru_agent === 'iguana') {
+    payload = {
+      'userpass': tmpIguanaRPCAuth,
+      'agent': passthru_agent,
+      'method': 'passthru',
+      'asset': coin,
+      'function': ajax_function_input,
+      'hex': tmplistaddr_hex_input
+    };
+  } else {
+    payload = {
+      'userpass': tmpIguanaRPCAuth,
+      'agent': passthru_agent,
+      'method': 'passthru',
+      'function': ajax_function_input,
+      'hex': tmplistaddr_hex_input
+    };
+  }
+
+  return dispatch => {
+    return fetch('http://127.0.0.1:' + Config.iguanaCorePort, {
+      method: 'POST',
+      body: JSON.stringify(payload),
+    })
+    .catch(function(error) {
+      console.log(error);
+      dispatch(triggerToaster(true, 'getKMDAddressesNative', 'Error', 'error'));
+    })
+    .then(response => response.json())
+    .then(json => dispatch(getKMDAddressesNativeState(json, dispatch)))
+  }
+}
+
+/*function KMDListAddresses(pubpriv) {
+  NProgress.done(true);
+  NProgress.configure({
+    template: templates.nprogressBar
+  });
+  NProgress.start();
+
+
+
+  $.ajax({
+    async: false,
+    type: 'POST',
+    data: JSON.stringify(ajax_data),
+    url: 'http://127.0.0.1:' + config.iguanaPort,
+    success: function(data, textStatus, jqXHR) {
+      var AjaxOutputData = JSON.parse(data); // Ajax output gets the whole list of unspent coin with addresses
+      result = AjaxOutputData;
+    },
+    error: function(xhr, textStatus, error) {
+      console.log('failed getting Coin History.');
+      console.log(xhr.statusText);
+      if ( xhr.readyState == 0 ) {
+        Iguana_ServiceUnavailable();
+      }
+      console.log(textStatus);
+      console.log(error);
+    }
+  });
+
+  NProgress.done();
+  return result;
+}*/
+
 function getDebugLogState(json) {
   const _data = json.result.replace('\n', '\r\n');
 

react/src/components/dashboard/coinTileItem.js

@@ -10,7 +10,8 @@ import {
   iguanaEdexBalance,
   getSyncInfoNative,
   getKMDBalanceTotal,
-  getNativeTxHistory
+  getNativeTxHistory,
+  getKMDAddressesNative
 } from '../../actions/actionCreators';
 import Store from '../../store';
 
@@ -27,24 +28,27 @@ class CoinTileItem extends React.Component {
       var _iguanaActiveHandle = setInterval(function() {
         Store.dispatch(getSyncInfo(coin));
         Store.dispatch(iguanaEdexBalance(coin, mode));
+        Store.dispatch(getAddressesByAccount(coin));
       }, 3000);
       Store.dispatch(startInterval('sync', _iguanaActiveHandle));
     } else if (mode === 'native' && coin !== this.props.ActiveCoin.coin) {
       Store.dispatch(stopInterval('sync', this.props.Interval.interval));
+      // TODO: add conditions to skip txhistory, balances, addresses while "activating best chain"
       var _iguanaActiveHandle = setInterval(function() {
         Store.dispatch(getSyncInfoNative(coin));
         Store.dispatch(getKMDBalanceTotal(coin));
         Store.dispatch(getNativeTxHistory(coin));
-      }, 3000);
+        Store.dispatch(getKMDAddressesNative(coin, 'public'));
+      }, coin === 'KMD' ? 15000 : 3000);
       Store.dispatch(startInterval('sync', _iguanaActiveHandle));
     } else {
       Store.dispatch(stopInterval('sync', this.props.Interval.interval));
+      Store.dispatch(getAddressesByAccount(coin));
       // basilisk
     }
 
     Store.dispatch(dashboardChangeActiveCoin(coin, mode));
     Store.dispatch(iguanaActiveHandle(true));
-    Store.dispatch(getAddressesByAccount(coin));
 
     /*this.setState(Object.assign({}, this.state, {
       activeHandleInterval: _iguanaActiveHandle,

react/src/components/dashboard/walletsNativeReceive.js

@@ -2,6 +2,39 @@ import React from 'react';
 import { translate } from '../../translate/translate';
 
 class WalletsNativeReceive extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      openDropMenu: false,
+    };
+    this.openDropMenu = this.openDropMenu.bind(this);
+  }
+
+  openDropMenu() {
+    this.setState(Object.assign({}, this.state, {
+      openDropMenu: !this.state.openDropMenu,
+    }));
+  }
+
+  renderAddressList() {
+    if (this.props.ActiveCoin.addresses && this.props.ActiveCoin.addresses.length) {
+      return this.props.ActiveCoin.addresses.map((address) =>
+        <tr key={address}>
+          <td>
+            <span className="label label-default">
+              <i className="icon fa-eye"></i> {translate('IAPI.PUBLIC_SM')}
+            </span>
+          </td>
+          <td>{address}</td>
+          <td></td>
+          <td></td>
+        </tr>
+      );
+    } else {
+      return null;
+    }
+  }
+
   render() {
     if (this.props && this.props.ActiveCoin && this.props.ActiveCoin.receive) {
       return (
@@ -13,7 +46,7 @@ class WalletsNativeReceive extends React.Component {
                   <div className="panel">
                     <header className="panel-heading">
                       <div className="panel-actions">
-                        <div className="dropdown">
+                        <div className={'dropdown' + (this.state.openDropMenu ? ' open' : '')} onClick={this.openDropMenu}>
                           <a className="dropdown-toggle white btn btn-warning" data-extcoin="COIN" id="GetNewRecievingAddress" data-toggle="dropdown" href="javascript:void(0)" aria-expanded="false" role="button">
                             <i className="icon md-arrows margin-right-10" aria-hidden="true"></i> {translate('INDEX.GET_NEW_ADDRESS')} <span className="caret"></span>
                           </a>
@@ -41,6 +74,9 @@ class WalletsNativeReceive extends React.Component {
                             <th>{translate('INDEX.ADDRESS')}</th>
                           </tr>
                         </thead>
+                        <tbody>
+                        {this.renderAddressList()}
+                        </tbody>
                         <tfoot>
                           <tr>
                             <th>{translate('INDEX.TYPE')}</th>

react/src/components/dashboard/walletsNativeTxHistory.js

@@ -2,6 +2,56 @@ import React from 'react';
 import { translate } from '../../translate/translate';
 
 class WalletsNativeTxHistory extends React.Component {
+  renderTxType(category) {
+    if ( category == 'send' ) {
+      return (
+        <span>
+          <i className="icon fa-arrow-circle-left"></i> <span>{translate('DASHBOARD.OUT')}</span>
+        </span>
+      );
+    }
+    if ( category == 'receive' ) {
+      return (
+        <span>
+          <i className="icon fa-arrow-circle-right"></i> <span>{translate('DASHBOARD.IN')}</span>
+        </span>
+      );
+    }
+    if ( category == 'generate' ) {
+      return (
+        <span>
+          <i className="icon fa-cogs"></i> <span>{translate('DASHBOARD.MINED')}</span>
+        </span>
+      );
+    }
+    if ( category == 'immature' ) {
+      return (
+        <span>
+          <i className="icon fa-clock-o"></i> <span>{translate('DASHBOARD.IMMATURE')}</span>
+        </span>
+      );
+    }
+  }
+
+  renderTxHistoryList() {
+    if (this.props.ActiveCoin.txhistory && this.props.ActiveCoin.txhistory.length) {
+      return this.props.ActiveCoin.txhistory.map((tx) =>
+        <tr key={tx.txid}>
+          <td>
+            <span className="label label-default">
+              <i className="icon fa-eye"></i> {translate('IAPI.PUBLIC_SM')}
+            </span>
+          </td>
+          <td>{this.renderTxType(tx.category)}</td>
+          <td></td>
+          <td></td>
+        </tr>
+      );
+    } else {
+      return null;
+    }
+  }
+
   render() {
     return (
       <div data-extcoin="COIN" id="kmd_wallet_dashboardinfo">
@@ -26,6 +76,9 @@ class WalletsNativeTxHistory extends React.Component {
                           <th>{translate('INDEX.TX_DETAIL')}</th>
                         </tr>
                       </thead>
+                      <tbody>
+                      {this.renderTxHistoryList()}
+                      </tbody>
                       <tfoot>
                         <tr>
                           <th>{translate('INDEX.TYPE')}</th>