combine native addr and their balances

react/src/actions/actionCreators.js

@@ -863,8 +863,89 @@ export function getKMDAddressesNative(coin) {
       });
     }))
     .then(result => {
-      dispatch(getKMDAddressesNativeState(result[0].concat(result[1])));
-    });
+      // TODO: split into 2 functions
+      const passthru_agent = getPassthruAgent(coin),
+            tmpIguanaRPCAuth = 'tmpIgRPCUser@' + sessionStorage.getItem('IguanaRPCAuth');
+      var payload;
+
+      if (passthru_agent == 'iguana') {
+        payload = {
+          'userpass': 'tmpIgRPCUser@' + sessionStorage.getItem('IguanaRPCAuth'),
+          'agent': passthru_agent,
+          'method': 'passthru',
+          'asset': coin,
+          'function': 'listunspent',
+          'hex': ''
+        };
+      } else {
+        payload = {
+          'userpass': 'tmpIgRPCUser@' + sessionStorage.getItem('IguanaRPCAuth'),
+          'agent': passthru_agent,
+          'method': 'passthru',
+          'function': 'listunspent',
+          'hex': ''
+        };
+      }
+
+      fetch('http://127.0.0.1:' + Config.iguanaCorePort, {
+        method: 'POST',
+        body: JSON.stringify(payload),
+      })
+      .catch(function(error) {
+        console.log(error);
+        dispatch(triggerToaster(true, 'getKMDAddressesNative+Balance', 'Error', 'error'));
+      })
+      .then(response => response.json())
+      .then(function(json) {
+        const allAddrArray = json.map(res => res.address).filter((x, i, a) => a.indexOf(x) == i);
+        for (let a=0; a < allAddrArray.length; a++) {
+          const filteredArray = json.filter(res => res.address === allAddrArray[a]).map(res => res.amount);
+
+          let isNewAddr = true;
+          for (let x=0; x < 2 && isNewAddr; x++) {
+            for (let y=0; y < result[x].length && isNewAddr; y++) {
+              if (allAddrArray[a] === result[x][y]) {
+                isNewAddr = false;
+              }
+            }
+          }
+
+          if (isNewAddr) {
+            if (allAddrArray[a].substring(0, 2) === 'zc' || allAddrArray[a].substring(0, 2) === 'zt') {
+              result[1][result[1].length] = allAddrArray[a];
+            } else {
+              result[0][result[0].length] = allAddrArray[a];
+            }
+            console.log('new addr ' + allAddrArray[a] + ' | ' + allAddrArray[a].substring(0, 2));
+          }
+        }
+
+        let newAddressArray = [];
+
+        for (let a=0; a < 2; a++) {
+          newAddressArray[a] = [];
+
+          for (let b=0; b < result[a].length; b++) {
+            const filteredArray = json.filter(res => res.address === result[a][b]).map(res => res.amount);
+            let sum = 0;
+
+            for (let i=0; i < filteredArray.length; i++) {
+              sum += filteredArray[i];
+            }
+
+            newAddressArray[a][b] = {
+              address: result[a][b],
+              amount: sum,
+            };
+          }
+        }
+
+        dispatch(getKMDAddressesNativeState({
+          'public': newAddressArray[0],
+          'private': newAddressArray[1]
+        }));
+      })
+    })
   }
 }
 
@@ -1202,6 +1283,69 @@ export function getNewKMDAddresses(coin, pubpriv) {
   }
 }
 
+export function iguanaHashHex(data) {
+  const payload = {
+    'userpass': 'tmpIgRPCUser@' + sessionStorage.getItem('IguanaRPCAuth'),
+    'agent': 'hash',
+    'method': 'hex',
+    'message': data
+  };
+
+  return new Promise((resolve, reject) => {
+    fetch('http://127.0.0.1:' + Config.iguanaCorePort, {
+      method: 'POST',
+      body: JSON.stringify(payload),
+    })
+    .catch(function(error) {
+      console.log(error);
+      dispatch(triggerToaster(true, 'iguanaHashHex', 'Error', 'error'));
+    })
+    .then(response => response.json())
+    .then(json => resolve(json.hex))
+  })
+}
+
+export function sendNativeTx(coin, _payload) {
+  const ajax_data_to_hex = '["' + _payload.sendFrom + '",[{"address":"' + _payload.sendTo + '","amount":' + (Number(_payload.amount) - Number(_payload.fee)) + '}]]';
+  var payload;
+
+  return dispatch => {
+    return iguanaHashHex(ajax_data_to_hex).then((hashHexJson) => {
+      console.log('sendNativeTx', hashHexJson);
+
+      if (getPassthruAgent(coin) == 'iguana') {
+        payload = {
+          'userpass': 'tmpIgRPCUser@' + sessionStorage.getItem('IguanaRPCAuth'),
+          'agent': getPassthruAgent(coin),
+          'method': 'passthru',
+          'asset': coin,
+          'function': 'z_sendmany',
+          'hex': hashHexJson
+        };
+      } else {
+        payload = {
+          'userpass': 'tmpIgRPCUser@' + sessionStorage.getItem('IguanaRPCAuth'),
+          'agent': getPassthruAgent(coin),
+          'method': 'passthru',
+          'function': 'z_sendmany',
+          'hex': hashHexJson
+        };
+      }
+
+      fetch('http://127.0.0.1:' + Config.iguanaCorePort, {
+        method: 'POST',
+        body: JSON.stringify(payload),
+      })
+      .catch(function(error) {
+        console.log(error);
+        dispatch(triggerToaster(true, 'sendNativeTx', 'Error', 'error'));
+      })
+      .then(response => response.json())
+      .then(json => dispatch(triggerToaster(true, translate('TOASTR.TX_SENT_ALT'), translate('TOASTR.WALLET_NOTIFICATION'), 'success')));
+    });
+  }
+}
+
 /*function Shepherd_SendPendValue() {
   Shepherd_SysInfo().then(function(result){
     var ram_data = formatBytes(result.totalmem_bytes)

react/src/components/dashboard/coinTileItem.js

@@ -66,7 +66,7 @@ class CoinTileItem extends React.Component {
               <img className="img-responsive" src={'assets/images/cryptologo/' + item.coinlogo + '.png'} alt="{item.coinname}"/>
               <span className={'badge up badge-' + item.modecolor} id="basfull" data-edexcoincode="{item.coin}" data-toggle="tooltip" data-placement="top" data-original-title="{item.modetip}">{item.modecode}</span>
             </a>
-            <div className="coin-name">{item.coinname} ({item.coinlogo})</div>
+            <div className="coin-name">{item.coinname} ({item.coinlogo.toUpperCase()})</div>
           </div>
         </div>
       </div>

react/src/components/dashboard/walletsNativeReceive.js

@@ -3,6 +3,8 @@ import { translate } from '../../translate/translate';
 import { getNewKMDAddresses } from '../../actions/actionCreators';
 import Store from '../../store';
 
+// TODO: add addr balance
+
 class WalletsNativeReceive extends React.Component {
   constructor(props) {
     super(props);
@@ -18,17 +20,18 @@ class WalletsNativeReceive extends React.Component {
     }));
   }
 
-  renderAddressList() {
-    if (this.props.ActiveCoin.addresses && this.props.ActiveCoin.addresses.length) {
-      return this.props.ActiveCoin.addresses.map((address) =>
-        <tr key={address}>
+  renderAddressList(type) {
+        console.log(this.props.ActiveCoin.addresses[type]);
+    if (this.props.ActiveCoin.addresses[type] && this.props.ActiveCoin.addresses[type].length) {
+      return this.props.ActiveCoin.addresses[type].map((address) =>
+        <tr key={address.address}>
           <td>
-            <span className="label label-default">
-              <i className="icon fa-eye"></i> {translate('IAPI.PUBLIC_SM')}
+            <span className={type === 'public' ? 'label label-default' : 'label label-dark'}>
+              <i className={type === 'public' ? 'icon fa-eye' : 'icon fa-eye-slash'}></i> {type === 'public' ? translate('IAPI.PUBLIC_SM') : translate('KMD_NATIVE.PRIVATE')}
             </span>
           </td>
-          <td>{address}</td>
-          <td></td>
+          <td>{type === 'public' ? address.address : address.address.substring(0, 34) + '...'}</td>
+          <td>{address.amount}</td>
           <td></td>
         </tr>
       );
@@ -78,15 +81,18 @@ class WalletsNativeReceive extends React.Component {
                           <tr>
                             <th>{translate('INDEX.TYPE')}</th>
                             <th>{translate('INDEX.ADDRESS')}</th>
+                            <th>{translate('INDEX.AMOUNT')}</th>
                           </tr>
                         </thead>
                         <tbody>
-                        {this.renderAddressList()}
+                        {this.renderAddressList('public')}
+                        {this.renderAddressList('private')}
                         </tbody>
                         <tfoot>
                           <tr>
                             <th>{translate('INDEX.TYPE')}</th>
                             <th>{translate('INDEX.ADDRESS')}</th>
+                            <th>{translate('INDEX.AMOUNT')}</th>
                           </tr>
                         </tfoot>
                       </table>

react/src/components/dashboard/walletsNativeSend.js

@@ -1,25 +1,85 @@
 import React from 'react';
 import { translate } from '../../translate/translate';
+import { sendNativeTx } from '../../actions/actionCreators';
+import Store from '../../store';
 
 class WalletsNativeSend extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      form: null,
-      to: null,
+      addressType: null,
+      sendFrom: null,
+      sendFromAmount: 0,
+      sendTo: null,
       amount: 0,
       fee: 0.0001,
+      addressSelectorOpen: false,
     };
     this.updateInput = this.updateInput.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
+    this.openDropMenu = this.openDropMenu.bind(this);
+  }
+
+  renderAddressByType(type) {
+    if (this.props.ActiveCoin.addresses[type] && this.props.ActiveCoin.addresses[type].length) {
+      return this.props.ActiveCoin.addresses[type].map((address) =>
+        <li data-original-index="2" key={address.address} className={address.amount <= 0 ? 'hide' : ''}>
+          <a tabIndex="0" data-tokens="null" onClick={() => this.updateAddressSelection(address.address, type, address.amount)}><i className={type === 'public' ? 'icon fa-eye' : 'icon fa-eye-slash'}></i>  <span className="text">[ {address.amount} {this.props.ActiveCoin.coin} ]  {address.address}</span><span className="glyphicon glyphicon-ok check-mark"></span></a>
+        </li>
+      );
+    } else {
+      return null;
+    }
+  }
+
+  renderSelectorCurrentLabel() {
+    if (this.state.sendFrom) {
+      return (
+        <span>
+          <i className={this.state.addressType === 'public' ? 'icon fa-eye' : 'icon fa-eye-slash'}></i>  <span className="text">[ {this.state.sendFromAmount} {this.props.ActiveCoin.coin} ]  {this.state.sendFrom}</span>
+        </span>
+      );
+    } else {
+      return (
+        <span>- Select Transparent or Private Address -</span>
+      );
+    }
   }
 
   renderAddressList() {
-    return this.props.ActiveCoin.addresses.map((address) =>
-      <option key={address} value={address}>{address}</option>
+    return (
+      <div className={'btn-group bootstrap-select form-control form-material showkmdwalletaddrs show-tick ' + (this.state.addressSelectorOpen ? 'open' : '')}>
+        <button type="button" className="btn dropdown-toggle btn-info" data-toggle="dropdown" data-id="kmd_wallet_send_from" title="- Select Transparent or Private Address -" aria-expanded="true" onClick={this.openDropMenu}>
+          <span className="filter-option pull-left">{this.renderSelectorCurrentLabel()} </span>&nbsp;<span className="bs-caret"><span className="caret"></span></span>
+        </button>
+        <div className="dropdown-menu open">
+          <ul className="dropdown-menu inner" role="menu">
+            <li data-original-index="1" className="selected">
+              <a tabIndex="0" data-tokens="null"><span className="text"> - Select Transparent or Private Address - </span><span className="glyphicon glyphicon-ok check-mark"></span></a>
+            </li>
+            {this.renderAddressByType('public')}
+            {this.renderAddressByType('private')}
+          </ul>
+        </div>
+      </div>
     );
   }
 
+  openDropMenu() {
+    this.setState(Object.assign({}, this.state, {
+      addressSelectorOpen: !this.state.addressSelectorOpen,
+    }));
+  }
+
+  updateAddressSelection(address, type, amount) {
+    this.setState(Object.assign({}, this.state, {
+      sendFrom: address,
+      addressType: type,
+      sendFromAmount: amount,
+      addressSelectorOpen: !this.state.addressSelectorOpen,
+    }));
+  }
+
   updateInput(e) {
     this.setState({
       [e.target.name]: e.target.value,
@@ -28,6 +88,7 @@ class WalletsNativeSend extends React.Component {
 
   handleSubmit() {
     console.log(this.state);
+    Store.dispatch(sendNativeTx(this.props.ActiveCoin.coin, this.state));
   }
 
   render() {
@@ -46,13 +107,11 @@ class WalletsNativeSend extends React.Component {
                   <div className="row">
                     <div className="col-xlg-12 form-group form-material">
                       <label className="control-label" data-extcoin="COIN" htmlFor="kmd_wallet_send_from">{translate('INDEX.SEND_FROM')}</label>
-                      <select className="form-control form-material showkmdwalletaddrs show-tick" name="from" onChange={this.updateInput} data-extcoin="COIN" id="kmd_wallet_send_from" title="Select Transparent or Private Address" data-size="5">
                       {this.renderAddressList()}
-                      </select>
                     </div>
                     <div className="col-xlg-12 form-group form-material">
                       <label className="control-label" data-extcoin="COIN" htmlFor="kmd_wallet_sendto">{translate('INDEX.SEND_TO')}</label>
-                      <input type="text" className="form-control" data-extcoin="COIN" name="to" onChange={this.updateInput} id="kmd_wallet_sendto" placeholder="Enter Transparent or Private address" autoComplete="off" required />
+                      <input type="text" className="form-control" data-extcoin="COIN" name="sendTo" onChange={this.updateInput} id="kmd_wallet_sendto" placeholder="Enter Transparent or Private address" autoComplete="off" required />
                     </div>
                     <div className="col-lg-6 form-group form-material">
                       <label className="control-label" htmlFor="kmd_wallet_amount" data-extcoin="COIN" id="kmd_wallet_amount_label">
@@ -66,7 +125,7 @@ class WalletsNativeSend extends React.Component {
                     </div>
                     <div className="col-lg-12">
                       <span data-extcoin="KMD">
-                        <b>{translate('INDEX.TOTAL')}:</b> {this.state.amount} + {this.state.fee}/kb {this.props.ActiveCoin.coin}
+                        <b>{translate('INDEX.TOTAL')}:</b> {this.state.amount} - {this.state.fee}/kb = {Number(this.state.amount) - Number(this.state.fee)} {this.props.ActiveCoin.coin}
                       </span>
                     </div>
                     <div className="col-lg-12">

react/src/components/dashboard/walletsNativeTxHistory.js

@@ -11,6 +11,7 @@ class WalletsNativeTxHistory extends React.Component {
 
   // TODO: implement sorting and pagination
   //       z transactions
+  //       filter based on addr
 
   toggleTxInfoModal(display, txIndex) {
     Store.dispatch(toggleDashboardTxInfoModal(display, txIndex));
@@ -62,7 +63,7 @@ class WalletsNativeTxHistory extends React.Component {
   renderTxHistoryList() {
     if (this.props.ActiveCoin.txhistory && this.props.ActiveCoin.txhistory.length && this.props.ActiveCoin.nativeActiveSection === 'default') {
       return this.props.ActiveCoin.txhistory.map((tx, index) =>
-        <tr key={tx.txid}>
+        <tr key={tx.txid + tx.amount}>
           <td>
             <span className="label label-default">
               <i className="icon fa-eye"></i> {translate('IAPI.PUBLIC_SM')}