Merge pull request #95 from pbca26/redux

Redux

react/src/actions/actionCreators.js

@@ -47,10 +47,13 @@ export function toggleDashboardActiveSection(name) {
   }
 }
 
-export function toggleDashboardTxInfoModal(display) {
+export function toggleDashboardTxInfoModal(display, txIndex) {
+      console.log('toggleTxInfoModal', txIndex);
+
   return {
     type: DASHBOARD_ACTIVE_TXINFO_MODAL,
     showTransactionInfo: display,
+    showTransactionInfoTxIndex: txIndex,
   }
 }
 
@@ -801,6 +804,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/dashboard.js

@@ -16,6 +16,7 @@ import About from './about';
 import WalletsBasiliskRefresh from './walletsBasiliskRefresh';
 import WalletsBasiliskConnection from './walletsBasiliskConnection';
 import WalletsNative from './walletsNative';
+import WalletsNativeTxInfo from './walletsNativeTxInfo';
 
 class Dashboard extends React.Component {
   constructor(props) {
@@ -42,6 +43,7 @@ class Dashboard extends React.Component {
             <WalletsBasiliskRefresh {...this.props} />
             <WalletsBasiliskConnection {...this.props} />
             <WalletsNative {...this.props} />
+            <WalletsNativeTxInfo {...this.props} />
           </div>
           <div className={this.props.Dashboard.activeSection === 'edex' ? 'show' : 'hide'}>
             <EDEX {...this.props} />

react/src/components/dashboard/walletsNative.js

@@ -7,17 +7,12 @@ import WalletsNativeReceive from './walletsNativeReceive';
 import WalletsNativeSend from './walletsNativeSend';
 import WalletsNativeSyncProgress from './walletsNativeSyncProgress';
 import WalletsNativeTxHistory from './walletsNativeTxHistory';
-import WalletsNativeTxInfo from './walletsNativeTxInfo';
 
 class WalletsNative extends React.Component {
   constructor(props) {
     super(props);
   }
 
-      /*$('.header-easydex-section')
-      .html('<img src="assets/images/native/' + imgSrcName + '_header_title_logo.png"> <span style="font-size: 35px; vertical-align: middle">' + _coin + '</span>');
-    $('#easydex-header-div').css('background-image', 'url("assets/images/bg/' + imgBgName + '_transparent_header_bg.png")');*/
-
   render() {
     if (this.props && this.props.ActiveCoin && this.props.ActiveCoin.mode === 'native') {
       return (
@@ -42,7 +37,6 @@ class WalletsNative extends React.Component {
                 <WalletsNativeInfo {...this.props} />
               </div>
             </div>
-            <WalletsNativeTxInfo {...this.props} />
           </div>
         </div>
       );

react/src/components/dashboard/walletsNativeBalance.js

@@ -3,6 +3,7 @@ import { translate } from '../../translate/translate';
 
 class WalletsNativeBalance extends React.Component {
   render() {
+    if (this.props && this.props.ActiveCoin.nativeActiveSection === 'default') {
       return (
         <div className="col-xs-12">
           <div className="col-lg-3 col-xs-12" data-extcoin="COIN" id="kmd_widget_get_total_balance_t">
@@ -66,6 +67,9 @@ class WalletsNativeBalance extends React.Component {
           </div>
         </div>
       );
+    } else {
+      return null;
+    }
   }
 }
 

react/src/components/dashboard/walletsNativeInfo.js

@@ -7,7 +7,7 @@ class WalletsNativeInfo extends React.Component {
   }
 
   render() {
-    if (this.props && this.props.Dashboard && this.props.Dashboard.progress) {
+    if (this.props && this.props.Dashboard && this.props.Dashboard.progress && this.props.ActiveCoin.nativeActiveSection === 'settings') {
       return (
         <div data-extcoin="COIN" id="kmd_wallet_settings">
           <div className="col-xlg-6 col-md-4">

react/src/components/dashboard/walletsNativeReceive.js

@@ -2,8 +2,41 @@ 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) {
+    if (this.props && this.props.ActiveCoin && this.props.ActiveCoin.nativeActiveSection === 'receive') {
       return (
         <div data-extcoin="COIN" id="kmd_wallet_recieve">
           <div className="col-xs-12 margin-top-20">
@@ -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/walletsNativeSend.js

@@ -3,7 +3,7 @@ import { translate } from '../../translate/translate';
 
 class WalletsNativeSend extends React.Component {
   render() {
-    if (this.props && this.props.ActiveCoin && this.props.ActiveCoin.send) {
+    if (this.props && this.props.ActiveCoin && this.props.ActiveCoin.nativeActiveSection === 'send') {
       return (
         <div data-extcoin="COIN" id="kmd_wallet_send">
           <div className="col-xlg-12 col-md-12 col-sm-12 col-xs-12">

react/src/components/dashboard/walletsNativeTxHistory.js

@@ -1,9 +1,91 @@
 import React from 'react';
 import { translate } from '../../translate/translate';
+import { secondsToString } from '../../util/time';
+import { toggleDashboardTxInfoModal } from '../../actions/actionCreators';
+import Store from '../../store';
 
 class WalletsNativeTxHistory extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  // TODO: implement sorting and pagination
+
+  toggleTxInfoModal(display, txIndex) {
+    Store.dispatch(toggleDashboardTxInfoModal(display, txIndex));
+  }
+
+  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>
+      );
+    }
+  }
+
+  renderAddress(tx) {
+    if (!tx.address) {
+      return (
+        <span>
+          <i className="icon fa-bullseye"></i> <span className="label label-dark">{translate('DASHBOARD.ZADDR_NOT_LISTED')}</span>
+        </span>
+      );
+    } else {
+      return (tx.address);
+    }
+  }
+
+  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}>
+          <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>{tx.confirmations}</td>
+          <td>{tx.amount}</td>
+          <td>{secondsToString(tx.time)}</td>
+          <td>{this.renderAddress(tx)}</td>
+          <td>
+            <button type="button" className="btn btn-xs white btn-info waves-effect waves-light btn-kmdtxid" onClick={() => this.toggleTxInfoModal(!this.props.ActiveCoin.showTransactionInfo, index)}><i className="icon fa-search"></i></button>
+          </td>
+        </tr>
+      );
+    } else {
+      return null;
+    }
+  }
+
   render() {
+    if (this.props && this.props.ActiveCoin.nativeActiveSection === 'default') {
       return (
+        <div className="native-transactions">
           <div data-extcoin="COIN" id="kmd_wallet_dashboardinfo">
             <div className="col-xs-12 margin-top-20">
               <div className="panel nav-tabs-horizontal">
@@ -26,6 +108,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>
@@ -45,7 +130,11 @@ class WalletsNativeTxHistory extends React.Component {
               </div>
             </div>
           </div>
+        </div>
       );
+    } else {
+      return null;
+    }
   }
 }
 

react/src/components/dashboard/walletsNativeTxInfo.js

@@ -1,128 +1,159 @@
 import React from 'react';
 import { translate } from '../../translate/translate';
+import { secondsToString } from '../../util/time';
+import { toggleDashboardTxInfoModal } from '../../actions/actionCreators';
+import Store from '../../store';
 
 class WalletsNativeTxInfo extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      activeTab: 0,
+    };
+    this.toggleTxInfoModal = this.toggleTxInfoModal.bind(this);
+  }
+
+  toggleTxInfoModal() {
+    Store.dispatch(toggleDashboardTxInfoModal(false));
+  }
+
+  openTab(tab) {
+    this.setState(Object.assign({}, this.state, {
+      activeTab: tab,
+    }));
+  }
+
   render() {
-    if (this.props && this.props.ActiveCoin && this.props.ActiveCoin.showTransactionInfo) {
+    if (this.props && this.props.ActiveCoin.showTransactionInfo && this.props.ActiveCoin.nativeActiveSection === 'default') {
+      const txInfo = this.props.ActiveCoin.txhistory[this.props.ActiveCoin.showTransactionInfoTxIndex];
+
       return (
         <div>
           <div className="modal show" data-extcoin="COIN" id="kmd_txid_info_mdl" aria-hidden="false" role="dialog">
             <div className="modal-dialog modal-center modal-lg">
               <div className="modal-content">
-                <div className="modal-body">
+                <div className="modal-body" style={{height: '590px'}}>
                   <div className="panel nav-tabs-horizontal">
                     <ul className="nav nav-tabs nav-tabs-line" data-plugin="nav-tabs" role="tablist">
-                      <li className="active" role="presentation">
-                        <a data-toggle="tab" href="#KmdTxIDInfotab1" data-extcoin="COIN" aria-controls="KmdTxIDInfotab1" role="tab">
+                      <li className={this.state.activeTab === 0 ? 'active' : ''} role="presentation">
+                        <a data-toggle="tab" data-extcoin="COIN" aria-controls="KmdTxIDInfotab1" role="tab" onClick={() => this.openTab(0)}>
                           <i className="icon md-balance-wallet" aria-hidden="true"></i>TxID Info
                         </a>
                       </li>
-                      <li role="presentation">
-                        <a data-toggle="tab" href="#KmdTxIDInfotab2" data-extcoin="COIN" aria-controls="KmdTxIDInfotab2" role="tab">
-                          <i className="icon md-plus-square" aria-hidden="true"></i>vjointsplits, details
+                      <li className={this.state.activeTab === 1 ? 'active' : ''} role="presentation">
+                        <a data-toggle="tab" data-extcoin="COIN" aria-controls="KmdTxIDInfotab2" role="tab" onClick={() => this.openTab(1)}>
+                          <i className="icon md-plus-square" aria-hidden="true"></i>Vjointsplits, Details
                         </a>
                       </li>
-                      <li role="presentation">
-                        <a data-toggle="tab" href="#KmdTxIDInfotab3" data-extcoin="COIN" aria-controls="KmdTxIDInfotab3" role="tab">
-                          <i className="icon wb-briefcase" aria-hidden="true"></i>hex
+                      <li className={this.state.activeTab === 2 ? 'active' : ''} role="presentation">
+                        <a data-toggle="tab" data-extcoin="COIN" aria-controls="KmdTxIDInfotab3" role="tab" onClick={() => this.openTab(2)}>
+                          <i className="icon wb-briefcase" aria-hidden="true"></i>Hex
+                        </a>
+                      </li>
+                      <li className={this.state.activeTab === 3 ? 'active' : ''} role="presentation">
+                        <a data-toggle="tab" data-extcoin="COIN" aria-controls="KmdTxIDInfotab4" role="tab" onClick={() => this.openTab(3)}>
+                          <i className="icon wb-file" aria-hidden="true"></i>Raw info
                         </a>
                       </li>
                     </ul>
                     <div className="panel-body">
                       <div className="tab-content">
-                        <div className="tab-pane active" id="KmdTxIDInfotab1" data-extcoin="COIN" role="tabpanel">
+                        <div className={this.state.activeTab === 0 ? 'tab-pane active' : 'tab-pane'} id="KmdTxIDInfotab1" data-extcoin="COIN" role="tabpanel">
                           <table className="table table-striped">
                             <tbody>
                               <tr>
                                 <td>amount</td>
                                 <td>
-                                  <span data-extcoin="COIN" id="kmd_txid_info_amount"></span>
+                                {txInfo.amount}
                                 </td>
                               </tr>
                               <tr>
                                 <td>fee</td>
                                 <td>
-                                  <span data-extcoin="COIN" id="kmd_txid_info_fee"></span>
+                                  {txInfo.fee}
                                 </td>
                               </tr>
                               <tr>
                                 <td>confirmations</td>
                                 <td>
-                                  <span data-extcoin="COIN" id="kmd_txid_info_confirmations"></span>
+                                  {txInfo.confirmations}
                                 </td>
                               </tr>
                               <tr>
                                 <td>blockhash</td>
                                 <td>
-                                  <span data-extcoin="COIN" id="kmd_txid_info_blockhash"></span>
+                                  {txInfo.blockhash}
                                 </td>
                               </tr>
                               <tr>
                                 <td>blockindex</td>
                                 <td>
-                                  <span data-extcoin="COIN" id="kmd_txid_info_blockindex"></span>
+                                  {txInfo.blockindex}
                                 </td>
                               </tr>
                               <tr>
                                 <td>blocktime</td>
                                 <td>
-                                  <span data-extcoin="COIN" id="kmd_txid_info_blocktime"></span>
+                                  {secondsToString(txInfo.blocktime)}
                                 </td>
                               </tr>
                               <tr>
                                 <td>txid</td>
                                 <td>
-                                  <span data-extcoin="COIN" id="kmd_txid_info_txid"></span>
+                                  {txInfo.txid}
                                 </td>
                               </tr>
                               <tr>
                                 <td>walletconflicts</td>
                                 <td>
-                                  <span data-extcoin="COIN" id="kmd_txid_info_walletconflicts"></span>
+                                  {txInfo.walletconflicts.length}
                                 </td>
                               </tr>
                               <tr>
                                 <td>time</td>
                                 <td>
-                                  <span data-extcoin="COIN" id="kmd_txid_info_time"></span>
+                                  {secondsToString(txInfo.time)}
                                 </td>
                               </tr>
                               <tr>
                                 <td>timereceived</td>
                                 <td>
-                                  <span data-extcoin="COIN" id="kmd_txid_info_timereceived"></span>
+                                  {secondsToString(txInfo.timereceived)}
                                 </td>
                               </tr>
                             </tbody>
                           </table>
                         </div>
-                        <div className="tab-pane" id="KmdTxIDInfotab2" data-extcoin="COIN" role="tabpanel">
+                        <div className={this.state.activeTab === 1 ? 'tab-pane active' : 'tab-pane'} id="KmdTxIDInfotab2" data-extcoin="COIN" role="tabpanel">
                           <table className="table table-striped">
                             <tbody>
                               <tr>
                                 <td>vjoinsplit</td>
                                 <td>
-                                  <span data-extcoin="COIN" id="kmd_txid_info_vjoinsplit"></span>
+                                  {txInfo.vjoinsplit}
                                 </td>
                               </tr>
                               <tr>
                                 <td>details</td>
                                 <td>
-                                  <span data-extcoin="COIN" id="kmd_txid_info_details"></span>
+                                  {txInfo.details}
                                 </td>
                               </tr>
                             </tbody>
                           </table>
                         </div>
-                        <div className="tab-pane" id="KmdTxIDInfotab3" data-extcoin="COIN" role="tabpanel">
-                          <textarea id="kmd_txid_info_hex" data-extcoin="COIN" style={{width: '100%', height: '170px'}} rows="10" cols="80" disabled></textarea>
+                        <div className={this.state.activeTab === 2 ? 'tab-pane active' : 'tab-pane'} id="KmdTxIDInfotab3" data-extcoin="COIN" role="tabpanel">
+                          <textarea id="kmd_txid_info_hex" data-extcoin="COIN" style={{width: '100%', height: '170px'}} rows="10" cols="80" disabled>{txInfo.hex}</textarea>
+                        </div>
+                        <div className={this.state.activeTab === 3 ? 'tab-pane active' : 'tab-pane'} id="KmdTxIDInfotab4" data-extcoin="COIN" role="tabpanel">
+                          <textarea id="kmd_txid_info_hex" data-extcoin="COIN" style={{width: '100%', height: '400px'}} rows="40" cols="80" disabled>{JSON.stringify(txInfo, null, '\t')}</textarea>
                         </div>
                       </div>
                     </div>
                   </div>
                 </div>
                 <div className="modal-footer">
-                  <button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
+                  <button type="button" className="btn btn-default" data-dismiss="modal" onClick={this.toggleTxInfoModal}>Close</button>
                 </div>
               </div>
             </div>

react/src/components/dashboard/walletsNav.js

@@ -5,7 +5,8 @@ import {
   iguanaEdexBalance,
   toggleSendCoinForm,
   toggleReceiveCoinForm,
-  toggleSendReceiveCoinForms
+  toggleSendReceiveCoinForms,
+  toggleDashboardActiveSection
 } from '../../actions/actionCreators';
 import Store from '../../store';
 
@@ -24,16 +25,28 @@ class WalletsNav extends React.Component {
   }
 
   toggleSendReceiveCoinForms() {
+    if (this.props.ActiveCoin.mode === 'native') {
+      Store.dispatch(toggleDashboardActiveSection(this.props.ActiveCoin.nativeActiveSection === 'settings' ? 'default' : 'settings'));
+    } else {
       Store.dispatch(toggleSendReceiveCoinForms());
     }
+  }
 
   toggleSendCoinForm(display) {
+    if (this.props.ActiveCoin.mode === 'native') {
+      Store.dispatch(toggleDashboardActiveSection(this.props.ActiveCoin.nativeActiveSection === 'send' ? 'default' : 'send'));
+    } else {
       Store.dispatch(toggleSendCoinForm(display));
     }
+  }
 
   toggleReceiveCoinForm(display) {
+    if (this.props.ActiveCoin.mode === 'native') {
+      Store.dispatch(toggleDashboardActiveSection(this.props.ActiveCoin.nativeActiveSection === 'receive' ? 'default' : 'receive'));
+    } else {
       Store.dispatch(toggleReceiveCoinForm(display));
     }
+  }
 
   render() {
     if (this.props && this.props.ActiveCoin && !this.props.ActiveCoin.coin) {

react/src/reducers/activeCoin.js

@@ -19,6 +19,7 @@ export function ActiveCoin(state = {
   balance: 0,
   nativeActiveSection: 'default',
   showTransactionInfo: false,
+  showTransactionInfoTxIndex: null,
   txhistory: [],
 }, action) {
   switch (action.type) {
@@ -56,7 +57,8 @@ export function ActiveCoin(state = {
       });
     case DASHBOARD_ACTIVE_TXINFO_MODAL:
       return Object.assign({}, state, {
-        showTransactionInfo: action.display,
+        showTransactionInfo: action.showTransactionInfo,
+        showTransactionInfoTxIndex: action.showTransactionInfoTxIndex,
       });
     case DASHBOARD_ACTIVE_COIN_NATIVE_BALANCE:
       return Object.assign({}, state, {

react/src/styles/index.scss

@@ -77,7 +77,8 @@ body {
 }
 
 #edexcoin_dashboardinfo a,
-.nav-top-menu {
+.nav-top-menu,
+#kmd_txid_info_mdl .nav-tabs li {
   cursor: pointer;
   cursor: hand;
 }