From 48a73eddd05aa36b1c44d66df03f933943d46ddf Mon Sep 17 00:00:00 2001
From: petitPapillon <ivana.trajanovska@yahoo.com>
Date: Sat, 17 Jun 2017 23:34:46 +0200
Subject: [PATCH] Merge the walletsTxInfo and walletsNativeTxInfo components

---
 .../dashboard/main/dashboard.render.js        |   2 -
 .../walletsNative/walletsNative.render.js     |   1 -
 .../walletsNativeTxInfo.js                    |  44 -----
 .../walletsNativeTxInfo.render.js             | 156 ------------------
 .../dashboard/walletsTxInfo/walletsTxInfo.js  |   4 +
 .../walletsTxInfo/walletsTxInfo.render.js     |  66 +++++++-
 6 files changed, 68 insertions(+), 205 deletions(-)
 delete mode 100644 react/src/components/dashboard/walletsNativeTxInfo/walletsNativeTxInfo.js
 delete mode 100644 react/src/components/dashboard/walletsNativeTxInfo/walletsNativeTxInfo.render.js

diff --git a/react/src/components/dashboard/main/dashboard.render.js b/react/src/components/dashboard/main/dashboard.render.js
index 32a36c9..0bd6116 100644
--- a/react/src/components/dashboard/main/dashboard.render.js
+++ b/react/src/components/dashboard/main/dashboard.render.js
@@ -14,7 +14,6 @@ import Settings from '../settings/settings';
 import ReceiveCoin from '../receiveCoin/receiveCoin';
 import About from '../about/about';
 import WalletsNative from '../walletsNative/walletsNative';
-import WalletsNativeTxInfo from '../walletsNativeTxInfo/walletsNativeTxInfo';
 import WalletsTxInfo from '../walletsTxInfo/walletsTxInfo';
 
 const DashboardRender = function() {
@@ -34,7 +33,6 @@ const DashboardRender = function() {
           <WalletsData {...this.props} />
           <WalletsTxInfo {...this.props} />
           <WalletsNative {...this.props} />
-          <WalletsNativeTxInfo {...this.props} />
         </div>
         <div className={ this.isSectionActive('edex') ? 'show' : 'hide' }>
           <EDEX {...this.props} />
diff --git a/react/src/components/dashboard/walletsNative/walletsNative.render.js b/react/src/components/dashboard/walletsNative/walletsNative.render.js
index c661416..c59e429 100644
--- a/react/src/components/dashboard/walletsNative/walletsNative.render.js
+++ b/react/src/components/dashboard/walletsNative/walletsNative.render.js
@@ -30,7 +30,6 @@ const WalletsNativeRender = function() {
             <WalletsNativeTxHistory {...this.props} />
             <WalletsNativeReceive {...this.props} />
             <WalletsNativeSend {...this.props} />
-            <WalletsNativeInfo {...this.props} />
           </div>
         </div>
       </div>
diff --git a/react/src/components/dashboard/walletsNativeTxInfo/walletsNativeTxInfo.js b/react/src/components/dashboard/walletsNativeTxInfo/walletsNativeTxInfo.js
deleted file mode 100644
index 39deb98..0000000
--- a/react/src/components/dashboard/walletsNativeTxInfo/walletsNativeTxInfo.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import React from 'react';
-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,
-    }));
-  }
-
-  handleKeydown(e) {
-    if (e.key === 'Escape') {
-      this.toggleTxInfoModal();
-    }
-  }
-
-  render() {
-    if (this.props &&
-        this.props.ActiveCoin.showTransactionInfo &&
-        this.props.ActiveCoin.nativeActiveSection === 'default' &&
-        this.props.ActiveCoin.mode === 'native') {
-      const txInfo = this.props.ActiveCoin.txhistory[this.props.ActiveCoin.showTransactionInfoTxIndex];
-
-      return WalletsNativeTxInfoRender.call(this, txInfo);
-    } else {
-      return null;
-    }
-  }
-}
-
-export default WalletsNativeTxInfo;
diff --git a/react/src/components/dashboard/walletsNativeTxInfo/walletsNativeTxInfo.render.js b/react/src/components/dashboard/walletsNativeTxInfo/walletsNativeTxInfo.render.js
deleted file mode 100644
index 064d597..0000000
--- a/react/src/components/dashboard/walletsNativeTxInfo/walletsNativeTxInfo.render.js
+++ /dev/null
@@ -1,156 +0,0 @@
-import React from 'react';
-import { translate } from '../../../translate/translate';
-import { secondsToString } from '../../../util/time';
-
-const WalletsNativeTxInfoRender = function(txInfo) {
-  return (
-    <div onKeyDown={ (event) => this.handleKeydown(event) }>
-      <div
-        className="modal show"
-        id="kmd_txid_info_mdl">
-        <div className="modal-dialog modal-center modal-lg">
-          <div className="modal-content">
-            <div className="modal-body modal-body-container">
-              <div className="panel nav-tabs-horizontal">
-                <ul className="nav nav-tabs nav-tabs-line">
-                  <li className={ this.state.activeTab === 0 ? 'active' : '' }>
-                    <a onClick={ () => this.openTab(0) }>
-                      <i className="icon md-balance-wallet"></i>TxID Info
-                    </a>
-                  </li>
-                  <li className={ this.state.activeTab === 1 ? 'active' : '' }>
-                    <a onClick={ () => this.openTab(1) }>
-                      <i className="icon md-plus-square"></i>Vjointsplits, Details
-                    </a>
-                  </li>
-                  <li className={ this.state.activeTab === 2 ? 'active' : '' }>
-                    <a onClick={ () => this.openTab(2) }>
-                      <i className="icon wb-briefcase"></i>Hex
-                    </a>
-                  </li>
-                  <li className={ this.state.activeTab === 3 ? 'active' : '' }>
-                    <a onClick={ () => this.openTab(3) }>
-                      <i className="icon wb-file"></i>Raw info
-                    </a>
-                  </li>
-                </ul>
-                <div className="panel-body">
-                  <div className="tab-content">
-                    <div className={ this.state.activeTab === 0 ? 'tab-pane active' : 'tab-pane' }>
-                      <table className="table table-striped">
-                        <tbody>
-                        <tr>
-                          <td>amount</td>
-                          <td>
-                            { txInfo.amount }
-                          </td>
-                        </tr>
-                        <tr>
-                          <td>fee</td>
-                          <td>
-                            { txInfo.fee }
-                          </td>
-                        </tr>
-                        <tr>
-                          <td>confirmations</td>
-                          <td>
-                            { txInfo.confirmations }
-                          </td>
-                        </tr>
-                        <tr>
-                          <td>blockhash</td>
-                          <td>
-                            { txInfo.blockhash }
-                          </td>
-                        </tr>
-                        <tr>
-                          <td>blockindex</td>
-                          <td>
-                            { txInfo.blockindex }
-                          </td>
-                        </tr>
-                        <tr>
-                          <td>blocktime</td>
-                          <td>
-                            { secondsToString(txInfo.blocktime) }
-                          </td>
-                        </tr>
-                        <tr>
-                          <td>txid</td>
-                          <td>
-                            { txInfo.txid }
-                          </td>
-                        </tr>
-                        <tr>
-                          <td>walletconflicts</td>
-                          <td>
-                            { txInfo.walletconflicts.length }
-                          </td>
-                        </tr>
-                        <tr>
-                          <td>time</td>
-                          <td>
-                            { secondsToString(txInfo.time) }
-                          </td>
-                        </tr>
-                        <tr>
-                          <td>timereceived</td>
-                          <td>
-                            { secondsToString(txInfo.timereceived) }
-                          </td>
-                        </tr>
-                        </tbody>
-                      </table>
-                    </div>
-                    <div className={ this.state.activeTab === 1 ? 'tab-pane active' : 'tab-pane' }>
-                      <table className="table table-striped">
-                        <tbody>
-                        <tr>
-                          <td>vjoinsplit</td>
-                          <td>
-                            { txInfo.vjoinsplit }
-                          </td>
-                        </tr>
-                        <tr>
-                          <td>details</td>
-                          <td>
-                            { txInfo.details }
-                          </td>
-                        </tr>
-                        </tbody>
-                      </table>
-                    </div>
-                    <div className={ this.state.activeTab === 2 ? 'tab-pane active' : 'tab-pane' }>
-                      <textarea
-                        className="full-width height-170"
-                        rows="10"
-                        cols="80"
-                        defaultValue={ txInfo.hex } disabled></textarea>
-                    </div>
-                    <div className={ this.state.activeTab === 3 ? 'tab-pane active' : 'tab-pane' }>
-                      <textarea
-                        className="full-width height-400"
-                        rows="40"
-                        cols="80"
-                        defaultValue={ JSON.stringify(txInfo, null, '\t') }
-                        disabled></textarea>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div className="modal-footer">
-              <button
-                type="button"
-                className="btn btn-default"
-                onClick={ this.toggleTxInfoModal }>{ translate('INDEX.CLOSE') }</button>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div className="modal-backdrop show in"></div>
-    </div>
-  );
-};
-
-export default WalletsNativeTxInfoRender;
\ No newline at end of file
diff --git a/react/src/components/dashboard/walletsTxInfo/walletsTxInfo.js b/react/src/components/dashboard/walletsTxInfo/walletsTxInfo.js
index 0eac017..3742cea 100644
--- a/react/src/components/dashboard/walletsTxInfo/walletsTxInfo.js
+++ b/react/src/components/dashboard/walletsTxInfo/walletsTxInfo.js
@@ -28,6 +28,10 @@ class WalletsTxInfo extends React.Component {
     }
   }
 
+  isNativeMode() {
+    return this.props.ActiveCoin.mode === 'native';
+  }
+
   render() {
     if (this.props &&
         this.props.ActiveCoin.showTransactionInfo &&
diff --git a/react/src/components/dashboard/walletsTxInfo/walletsTxInfo.render.js b/react/src/components/dashboard/walletsTxInfo/walletsTxInfo.render.js
index 093aab2..a9dfa98 100644
--- a/react/src/components/dashboard/walletsTxInfo/walletsTxInfo.render.js
+++ b/react/src/components/dashboard/walletsTxInfo/walletsTxInfo.render.js
@@ -18,8 +18,25 @@ const WalletsTxInfoRender = function(txInfo) {
                       <i className="icon md-balance-wallet"></i>TxID Info
                     </a>
                   </li>
-                  <li className={ this.state.activeTab === 1 ? 'active' : '' }>
-                    <a onClick={ () => this.openTab(1) }>
+
+                  { this.isNativeMode() &&
+                    <li className={ this.state.activeTab === 1 ? 'active' : '' }>
+                      <a onClick={ () => this.openTab(1) }>
+                        <i className="icon md-plus-square"></i>Vjointsplits, Details
+                      </a>
+                    </li>
+                  }
+
+                  { this.isNativeMode() &&
+                    <li className={ this.state.activeTab === 2 ? 'active' : '' }>
+                      <a onClick={ () => this.openTab(2) }>
+                        <i className="icon wb-briefcase"></i>Hex
+                      </a>
+                    </li>
+                  }
+
+                  <li className={ this.state.activeTab === 3 ? 'active' : '' }>
+                    <a onClick={ () => this.openTab(3) }>
                       <i className="icon wb-file"></i>Raw info
                     </a>
                   </li>
@@ -71,10 +88,55 @@ const WalletsTxInfoRender = function(txInfo) {
                             { txInfo.txid }
                           </td>
                         </tr>
+                        <tr>
+                          <td>walletconflicts</td>
+                          <td>
+                            { txInfo.walletconflicts.length }
+                          </td>
+                        </tr>
+                        <tr>
+                          <td>time</td>
+                          <td>
+                            { secondsToString(txInfo.time) }
+                          </td>
+                        </tr>
+                        <tr>
+                          <td>timereceived</td>
+                          <td>
+                            { secondsToString(txInfo.timereceived) }
+                          </td>
+                        </tr>
                         </tbody>
                       </table>
                     </div>
+
                     <div className={ this.state.activeTab === 1 ? 'tab-pane active' : 'tab-pane' }>
+                      <table className="table table-striped">
+                        <tbody>
+                        <tr>
+                          <td>vjoinsplit</td>
+                          <td>
+                            { txInfo.vjoinsplit }
+                          </td>
+                        </tr>
+                        <tr>
+                          <td>details</td>
+                          <td>
+                            { txInfo.details }
+                          </td>
+                        </tr>
+                        </tbody>
+                      </table>
+                    </div>
+                    <div className={ this.state.activeTab === 2 ? 'tab-pane active' : 'tab-pane' }>
+                      <textarea
+                        className="full-width height-170"
+                        rows="10"
+                        cols="80"
+                        defaultValue={ txInfo.hex } disabled></textarea>
+                    </div>
+
+                    <div className={ this.state.activeTab === 3 ? 'tab-pane active' : 'tab-pane' }>
                       <textarea
                         className="full-width height-400"
                         rows="40"