From 78ccbca1177f56e00b7a5625a28e1a1b0583736b Mon Sep 17 00:00:00 2001
From: Petr Balashov <pbca26@gmail.com>
Date: Mon, 15 May 2017 13:43:32 +0200
Subject: [PATCH] cleanup

---
 .../dashboard/walletsNativeSyncProgress.js    |  60 +++++---
 .../dashboard/walletsNativeTxHistory.js       | 136 +++++++++++-------
 .../dashboard/walletsNativeTxInfo.js          |  99 +++++++++----
 react/src/components/dashboard/walletsNav.js  |  43 ++++--
 .../dashboard/walletsNotariesList.js          |  29 ++--
 .../components/dashboard/walletsProgress.js   |  51 +++++--
 .../src/components/dashboard/walletsTxInfo.js |  62 +++++---
 react/src/translate/en.js                     |   8 ++
 8 files changed, 334 insertions(+), 154 deletions(-)

diff --git a/react/src/components/dashboard/walletsNativeSyncProgress.js b/react/src/components/dashboard/walletsNativeSyncProgress.js
index 7ab91ff..abce78d 100644
--- a/react/src/components/dashboard/walletsNativeSyncProgress.js
+++ b/react/src/components/dashboard/walletsNativeSyncProgress.js
@@ -3,31 +3,52 @@ import { translate } from '../../translate/translate';
 
 class WalletsNativeSyncProgress extends React.Component {
   renderSyncPercentagePlaceholder() {
-    if (this.props.Dashboard.progress.blocks > 0 && this.props.Dashboard.progress.longestchain === 0) {
+    if (this.props.Dashboard.progress.blocks > 0 &&
+        this.props.Dashboard.progress.longestchain === 0) {
       return (
-        <div className="progress-bar progress-bar-info progress-bar-striped active" style={{width: '100%', fontSize: '80%'}} role="progressbar" id="extcoin-sync">
-          <span id="extcoin-sync-percent" style={{width: '100%'}}>{translate('INDEX.SYNC_ERR_LONGESTCHAIN')}</span>
+        <div
+          className="progress-bar progress-bar-info progress-bar-striped active"
+          style={{ width: '100%', fontSize: '80%' }}
+          role="progressbar"
+          id="extcoin-sync">
+          <span
+            id="extcoin-sync-percent"
+            style={{ width: '100%' }}>{ translate('INDEX.SYNC_ERR_LONGESTCHAIN') }</span>
         </div>
       );
     } else if (this.props.Dashboard.progress.blocks === 0) {
       return (
-        <div className="progress-bar progress-bar-info progress-bar-striped active" style={{width: '100%', fontSize: '80%'}} role="progressbar" id="extcoin-sync">
-          <span id="extcoin-sync-percent" style={{width: '100%'}}>{translate('INDEX.SYNC_ERR_BLOCKS')}</span>
+        <div
+          className="progress-bar progress-bar-info progress-bar-striped active"
+          style={{ width: '100%', fontSize: '80%' }}
+          role="progressbar"
+          id="extcoin-sync">
+          <span
+            id="extcoin-sync-percent"
+            style={{ width: '100%' }}>{ translate('INDEX.SYNC_ERR_BLOCKS') }</span>
         </div>
       );
     } else {
       var syncPercentage = (parseFloat(parseInt(this.props.Dashboard.progress.blocks, 10) * 100 / parseInt(this.props.Dashboard.progress.longestchain, 10)).toFixed(2) + '%').replace('NaN', 0);
 
       return (
-        <div className="progress-bar progress-bar-info progress-bar-striped active" style={{width: syncPercentage, fontSize: '80%'}} role="progressbar" id="extcoin-sync">
-          <span id="extcoin-sync-percent" style={{width: syncPercentage}}>{syncPercentage}</span> | <span id="extcoin-synced-blocks">{this.props.Dashboard.progress.blocks}</span> / <span id="extcoin-longestchain">{this.props.Dashboard.progress.longestchain}</span> | {translate('INDEX.CONNECTIONS')}: <span id="extcoin-connections">{this.props.Dashboard.progress.connections}</span>
+        <div
+          className="progress-bar progress-bar-info progress-bar-striped active"
+          style={{ width: syncPercentage, fontSize: '80%' }}
+          role="progressbar"
+          id="extcoin-sync">
+          <span
+            id="extcoin-sync-percent"
+            style={{ width: syncPercentage }}>{ syncPercentage }</span> | <span id="extcoin-synced-blocks">{ this.props.Dashboard.progress.blocks }</span> / <span id="extcoin-longestchain">{ this.props.Dashboard.progress.longestchain }</span> | { translate('INDEX.CONNECTIONS') }: <span id="extcoin-connections">{ this.props.Dashboard.progress.connections }</span>
         </div>
       );
     }
   }
 
   renderActivatingBestChainProgress() {
-    if (this.props.Settings && this.props.Settings.debugLog && this.props.Dashboard.progress.remoteKMDNode) {
+    if (this.props.Settings &&
+        this.props.Settings.debugLog &&
+        this.props.Dashboard.progress.remoteKMDNode) {
       if (this.props.Settings.debugLog.indexOf('UpdateTip') > -1) {
         let temp = this.props.Settings.debugLog.split(' ');
         let currentBestChain;
@@ -46,16 +67,21 @@ class WalletsNativeSyncProgress extends React.Component {
   }
 
   renderChainActivationNotification() {
-    if ((this.props.Dashboard.progress.blocks < this.props.Dashboard.progress.longestchain) || this.props.Dashboard.progress.remoteKMDNode) {
+    if ((this.props.Dashboard.progress.blocks < this.props.Dashboard.progress.longestchain) ||
+        this.props.Dashboard.progress.remoteKMDNode) {
       return (
-        <div role="alert" className="alert alert-info alert-dismissible" id="extcoin-wallet-activating-alert" style={{marginBottom: '40px'}}>
+        <div
+          role="alert"
+          className="alert alert-info alert-dismissible"
+          id="extcoin-wallet-activating-alert"
+          style={{ marginBottom: '40px' }}>
           <button aria-label="Close" data-dismiss="alert" className="close" type="button">
             <span aria-hidden="true">×</span>
           </button>
           <h4>
-            {translate('INDEX.ACTIVATING_CHAIN')}{this.renderActivatingBestChainProgress()}
+            { translate('INDEX.ACTIVATING_CHAIN') }{ this.renderActivatingBestChainProgress() }
           </h4>
-          <p id="extcoin-wallet-connection-alert-text">{translate('INDEX.KMD_STARTED')}</p>
+          <p id="extcoin-wallet-connection-alert-text">{ translate('INDEX.KMD_STARTED') }</p>
         </div>
       );
     } else {
@@ -64,14 +90,16 @@ class WalletsNativeSyncProgress extends React.Component {
   }
 
   render() {
-    if (this.props && this.props.Dashboard && this.props.Dashboard.progress) {
+    if (this.props &&
+        this.props.Dashboard &&
+        this.props.Dashboard.progress) {
       return (
         <div>
-          {this.renderChainActivationNotification()}
-          <div className="row" style={{margin: '-20px 0px 10px 0px'}}>
+          { this.renderChainActivationNotification() }
+          <div className="row" style={{ margin: '-20px 0px 10px 0px' }}>
             <div className="col-xs-12" id="extcoin-progressbars">
               <div className="progress">
-                {this.renderSyncPercentagePlaceholder()}
+                { this.renderSyncPercentagePlaceholder() }
               </div>
             </div>
           </div>
diff --git a/react/src/components/dashboard/walletsNativeTxHistory.js b/react/src/components/dashboard/walletsNativeTxHistory.js
index f20baf7..b0db73f 100644
--- a/react/src/components/dashboard/walletsNativeTxHistory.js
+++ b/react/src/components/dashboard/walletsNativeTxHistory.js
@@ -37,31 +37,31 @@ class WalletsNativeTxHistory extends React.Component {
   }
 
   renderTxType(category) {
-    if ( category === 'send' ) {
+    if (category === 'send') {
       return (
         <span className="label label-danger">
-          <i className="icon fa-arrow-circle-left"></i> <span>{translate('DASHBOARD.OUT')}</span>
+          <i className="icon fa-arrow-circle-left"></i> <span>{ translate('DASHBOARD.OUT') }</span>
         </span>
       );
     }
-    if ( category === 'receive' ) {
+    if (category === 'receive') {
       return (
         <span className="label label-success">
-          <i className="icon fa-arrow-circle-right"></i> <span>{translate('DASHBOARD.IN')}</span>
+          <i className="icon fa-arrow-circle-right"></i> <span>{ translate('DASHBOARD.IN') }</span>
         </span>
       );
     }
-    if ( category === 'generate' ) {
+    if (category === 'generate') {
       return (
         <span>
-          <i className="icon fa-cogs"></i> <span>{translate('DASHBOARD.MINED')}</span>
+          <i className="icon fa-cogs"></i> <span>{ translate('DASHBOARD.MINED') }</span>
         </span>
       );
     }
-    if ( category === 'immature' ) {
+    if (category === 'immature') {
       return (
         <span>
-          <i className="icon fa-clock-o"></i> <span>{translate('DASHBOARD.IMMATURE')}</span>
+          <i className="icon fa-clock-o"></i> <span>{ translate('DASHBOARD.IMMATURE') }</span>
         </span>
       );
     }
@@ -71,7 +71,7 @@ class WalletsNativeTxHistory extends React.Component {
     if (!tx.address) {
       return (
         <span>
-          <i className="icon fa-bullseye"></i> <span className="label label-dark">{translate('DASHBOARD.ZADDR_NOT_LISTED')}</span>
+          <i className="icon fa-bullseye"></i> <span className="label label-dark">{ translate('DASHBOARD.ZADDR_NOT_LISTED') }</span>
         </span>
       );
     } else {
@@ -109,8 +109,11 @@ class WalletsNativeTxHistory extends React.Component {
 
     for (let i=0; i < Math.floor(this.props.ActiveCoin.txhistory.length / this.state.itemsPerPage); i++) {
       items.push(
-        <li className={this.state.activePage === i + 1 ? 'paginate_button active' : 'paginate_button'}>
-          <a aria-controls="kmd-tx-history-tbl" tabIndex="0" key={i + '-pagination'} onClick={this.state.activePage !== (i + 1) ? () => this.updateCurrentPage(i + 1) : null}>{i + 1}</a>
+        <li className={ this.state.activePage === i + 1 ? 'paginate_button active' : 'paginate_button' }>
+          <a
+            aria-controls="kmd-tx-history-tbl"
+            tabIndex="0" key={i + '-pagination'}
+            onClick={ this.state.activePage !== (i + 1) ? () => this.updateCurrentPage(i + 1) : null }>{ i + 1 }</a>
         </li>
       );
     }
@@ -126,7 +129,11 @@ class WalletsNativeTxHistory extends React.Component {
         <div className="dataTables_length" id="kmd-tx-history-tbl_length">
           <label>
             {translate('INDEX.SHOW')}&nbsp;
-            <select name="itemsPerPage" aria-controls="kmd-tx-history-tbl" className="form-control input-sm" onChange={this.updateInput}>
+            <select
+              name="itemsPerPage"
+              aria-controls="kmd-tx-history-tbl"
+              className="form-control input-sm"
+              onChange={this.updateInput}>
               <option value="10">10</option>
               <option value="25">25</option>
               <option value="50">50</option>
@@ -145,20 +152,38 @@ class WalletsNativeTxHistory extends React.Component {
     if (this.props.ActiveCoin.txhistory &&
         this.props.ActiveCoin.txhistory !== 'loading' &&
         this.props.ActiveCoin.txhistory.length > 10) {
+      const _paginationStart = ((this.state.activePage - 1) * this.state.itemsPerPage) + 1;
+      const _paginationEnd = this.state.activePage * this.state.itemsPerPage;
+      const _paginationNextState = this.state.activePage > Math.floor(this.props.ActiveCoin.txhistory.length / this.state.itemsPerPage);
+
       return (
         <div className="row unselectable">
           <div className="col-sm-5">
-            <div className="dataTables_info" id="kmd-tx-history-tbl_info" role="status" aria-live="polite">{translate('INDEX.SHOWING')} {((this.state.activePage - 1) * this.state.itemsPerPage) + 1} {translate('INDEX.TO')} {this.state.activePage * this.state.itemsPerPage} {translate('INDEX.OF')} {this.props.ActiveCoin.txhistory.length} {translate('INDEX.ENTRIES_SM')}</div>
+            <div
+              className="dataTables_info"
+              id="kmd-tx-history-tbl_info"
+              role="status"
+              aria-live="polite">{ translate('INDEX.SHOWING') } { _paginationStart } { translate('INDEX.TO') } { _paginationEnd } { translate('INDEX.OF') } { this.props.ActiveCoin.txhistory.length } { translate('INDEX.ENTRIES_SM') }</div>
           </div>
           <div className="col-sm-7">
             <div className="dataTables_paginate paging_simple_numbers" id="kmd-tx-history-tbl_paginate">
               <ul className="pagination">
-                <li className={this.state.activePage === 1 ? 'paginate_button previous disabled' : 'paginate_button previous'} id="kmd-tx-history-tbl_previous">
-                  <a aria-controls="kmd-tx-history-tbl" tabIndex="0" onClick={() => this.updateCurrentPage(this.state.activePage - 1)}>{translate('INDEX.PREVIOUS')}</a>
+                <li
+                  className={ this.state.activePage === 1 ? 'paginate_button previous disabled' : 'paginate_button previous' }
+                  id="kmd-tx-history-tbl_previous">
+                  <a
+                    aria-controls="kmd-tx-history-tbl"
+                    tabIndex="0"
+                    onClick={ () => this.updateCurrentPage(this.state.activePage - 1) }>{ translate('INDEX.PREVIOUS') }</a>
                 </li>
                 {this.renderPaginationItems()}
-                <li className={this.state.activePage > Math.floor(this.props.ActiveCoin.txhistory.length / this.state.itemsPerPage) ? 'paginate_button next disabled' : 'paginate_button next'} id="kmd-tx-history-tbl_next">
-                  <a aria-controls="kmd-tx-history-tbl" tabIndex="0" onClick={() => this.updateCurrentPage(this.state.activePage + 1)}>{translate('INDEX.NEXT')}</a>
+                <li
+                  className={ _paginationNextState ? 'paginate_button next disabled' : 'paginate_button next' }
+                  id="kmd-tx-history-tbl_next">
+                  <a
+                    aria-controls="kmd-tx-history-tbl"
+                    tabIndex="0"
+                    onClick={ () => this.updateCurrentPage(this.state.activePage + 1) }>{ translate('INDEX.NEXT') }</a>
                 </li>
               </ul>
             </div>
@@ -171,28 +196,36 @@ class WalletsNativeTxHistory extends React.Component {
   }
 
   renderTxHistoryList() {
-    if (this.props.ActiveCoin.txhistory && this.props.ActiveCoin.txhistory === 'no data') {
-      return 'no data';
-    } else if (this.props.ActiveCoin.txhistory && this.props.ActiveCoin.txhistory === 'loading') {
-      return 'loading history...';
+    if (this.props.ActiveCoin.txhistory &&
+        this.props.ActiveCoin.txhistory === 'no data') {
+      return translate('INDEX.NO_DATA');
+    } else if (
+      this.props.ActiveCoin.txhistory &&
+      this.props.ActiveCoin.txhistory === 'loading') {
+      return translate('INDEX.LOADING_HISTORY');
     } else if (
       this.props.ActiveCoin.txhistory &&
       (this.props.ActiveCoin.txhistory !== 'loading' && this.props.ActiveCoin.txhistory !== 'no data')) {
-      if (this.state.itemsList && this.state.itemsList.length && this.props.ActiveCoin.nativeActiveSection === 'default') {
+      if (this.state.itemsList &&
+          this.state.itemsList.length &&
+          this.props.ActiveCoin.nativeActiveSection === 'default') {
         return this.state.itemsList.map((tx, index) =>
           <tr key={tx.txid + tx.amount}>
             <td>
               <span className="label label-default">
-                <i className="icon fa-eye"></i> {translate('IAPI.PUBLIC_SM')}
+                <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>{ 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>
+              <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>
         );
@@ -203,27 +236,28 @@ class WalletsNativeTxHistory extends React.Component {
   }
 
   render() {
-    if (this.props && this.props.ActiveCoin.nativeActiveSection === 'default') {
+    if (this.props &&
+        this.props.ActiveCoin.nativeActiveSection === 'default') {
       return (
         <div className="native-transactions">
-          <div data-extcoin="COIN" id="kmd_wallet_dashboardinfo">
+          <div id="kmd_wallet_dashboardinfo">
             <div className="col-xs-12 margin-top-20">
               <div className="panel nav-tabs-horizontal">
-                <div data-extcoin="COIN" id="kmd_wallet_dashoard_section">
+                <div id="kmd_wallet_dashoard_section">
                   <div className="col-xlg-12 col-lg-12 col-sm-12 col-xs-12">
                     <div className="panel">
                       <header className="panel-heading">
-                        <h3 className="panel-title">{translate('INDEX.TRANSACTION_HISTORY')}</h3>
+                        <h3 className="panel-title">{ translate('INDEX.TRANSACTION_HISTORY') }</h3>
                       </header>
                       <div className="panel-body">
                         <div className="row">
                           <div className="col-sm-6">
-                            {this.renderPaginationItemsPerPageSelector()}
+                            { this.renderPaginationItemsPerPageSelector() }
                           </div>
                           <div className="col-sm-6">
                             <div id="kmd-tx-history-tbl_filter" className="dataTables_filter">
                               <label>
-                                {translate('INDEX.SEARCH')}: <input type="search" className="form-control input-sm" aria-controls="kmd-tx-history-tbl" disabled="true" />
+                                { translate('INDEX.SEARCH') }: <input type="search" className="form-control input-sm" aria-controls="kmd-tx-history-tbl" disabled="true" />
                               </label>
                             </div>
                           </div>
@@ -232,32 +266,32 @@ class WalletsNativeTxHistory extends React.Component {
                           <table className="table table-hover dataTable table-striped" id="kmd-tx-history-tbl" width="100%">
                             <thead>
                               <tr>
-                                <th>{translate('INDEX.TYPE')}</th>
-                                <th>{translate('INDEX.DIRECTION')}</th>
-                                <th>{translate('INDEX.CONFIRMATIONS')}</th>
-                                <th>{translate('INDEX.AMOUNT')}</th>
-                                <th>{translate('INDEX.TIME')}</th>
-                                <th>{translate('INDEX.DEST_ADDRESS')}</th>
-                                <th>{translate('INDEX.TX_DETAIL')}</th>
+                                <th>{ translate('INDEX.TYPE') }</th>
+                                <th>{ translate('INDEX.DIRECTION') }</th>
+                                <th>{ translate('INDEX.CONFIRMATIONS') }</th>
+                                <th>{ translate('INDEX.AMOUNT') }</th>
+                                <th>{ translate('INDEX.TIME') }</th>
+                                <th>{ translate('INDEX.DEST_ADDRESS') }</th>
+                                <th>{ translate('INDEX.TX_DETAIL') }</th>
                               </tr>
                             </thead>
                             <tbody>
-                            {this.renderTxHistoryList()}
+                            { this.renderTxHistoryList() }
                             </tbody>
                             <tfoot>
                               <tr>
-                                <th>{translate('INDEX.TYPE')}</th>
-                                <th>{translate('INDEX.DIRECTION')}</th>
-                                <th>{translate('INDEX.CONFIRMATIONS')}</th>
-                                <th>{translate('INDEX.AMOUNT')}</th>
-                                <th>{translate('INDEX.TIME')}</th>
-                                <th>{translate('INDEX.DEST_ADDRESS')}</th>
-                                <th>{translate('INDEX.TX_DETAIL')}</th>
+                                <th>{ translate('INDEX.TYPE') }</th>
+                                <th>{ translate('INDEX.DIRECTION') }</th>
+                                <th>{ translate('INDEX.CONFIRMATIONS') }</th>
+                                <th>{ translate('INDEX.AMOUNT') }</th>
+                                <th>{ translate('INDEX.TIME') }</th>
+                                <th>{ translate('INDEX.DEST_ADDRESS') }</th>
+                                <th>{ translate('INDEX.TX_DETAIL') }</th>
                               </tr>
                             </tfoot>
                           </table>
                         </div>
-                        {this.renderPagination()}
+                        { this.renderPagination() }
                       </div>
                     </div>
                   </div>
diff --git a/react/src/components/dashboard/walletsNativeTxInfo.js b/react/src/components/dashboard/walletsNativeTxInfo.js
index a312712..ae4bbfd 100644
--- a/react/src/components/dashboard/walletsNativeTxInfo.js
+++ b/react/src/components/dashboard/walletsNativeTxInfo.js
@@ -35,57 +35,76 @@ class WalletsNativeTxInfo extends React.Component {
           <div className="modal show" 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" style={{height: '590px'}}>
+                <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={this.state.activeTab === 0 ? 'active' : ''} role="presentation">
-                        <a data-toggle="tab" aria-controls="KmdTxIDInfotab1" role="tab" onClick={() => this.openTab(0)}>
+                    <ul className="nav nav-tabs nav-tabs-line" role="tablist">
+                      <li className={ this.state.activeTab === 0 ? 'active' : '' } role="presentation">
+                        <a
+                          data-toggle="tab"
+                          aria-controls="KmdTxIDInfotab1"
+                          role="tab"
+                          onClick={ () => this.openTab(0) }>
                           <i className="icon md-balance-wallet" aria-hidden="true"></i>TxID Info
                         </a>
                       </li>
-                      <li className={this.state.activeTab === 1 ? 'active' : ''} role="presentation">
-                        <a data-toggle="tab" aria-controls="KmdTxIDInfotab2" role="tab" onClick={() => this.openTab(1)}>
+                      <li className={ this.state.activeTab === 1 ? 'active' : '' } role="presentation">
+                        <a
+                          data-toggle="tab"
+                          aria-controls="KmdTxIDInfotab2"
+                          role="tab"
+                          onClick={ () => this.openTab(1) }>
                           <i className="icon md-plus-square" aria-hidden="true"></i>Vjointsplits, Details
                         </a>
                       </li>
-                      <li className={this.state.activeTab === 2 ? 'active' : ''} role="presentation">
-                        <a data-toggle="tab" aria-controls="KmdTxIDInfotab3" role="tab" onClick={() => this.openTab(2)}>
+                      <li className={ this.state.activeTab === 2 ? 'active' : '' } role="presentation">
+                        <a
+                          data-toggle="tab"
+                          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" aria-controls="KmdTxIDInfotab4" role="tab" onClick={() => this.openTab(3)}>
+                      <li className={ this.state.activeTab === 3 ? 'active' : '' } role="presentation">
+                        <a
+                          data-toggle="tab"
+                          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={this.state.activeTab === 0 ? 'tab-pane active' : 'tab-pane'} id="KmdTxIDInfotab1" role="tabpanel">
+                        <div
+                          className={ this.state.activeTab === 0 ? 'tab-pane active' : 'tab-pane' }
+                          id="KmdTxIDInfotab1"
+                          role="tabpanel">
                           <table className="table table-striped">
                             <tbody>
                               <tr>
                                 <td>amount</td>
                                 <td>
-                                {txInfo.amount}
+                                { txInfo.amount }
                                 </td>
                               </tr>
                               <tr>
                                 <td>fee</td>
                                 <td>
-                                  {txInfo.fee}
+                                  { txInfo.fee }
                                 </td>
                               </tr>
                               <tr>
                                 <td>confirmations</td>
                                 <td>
-                                  {txInfo.confirmations}
+                                  { txInfo.confirmations }
                                 </td>
                               </tr>
                               <tr>
                                 <td>blockhash</td>
                                 <td>
-                                  {txInfo.blockhash}
+                                  { txInfo.blockhash }
                                 </td>
                               </tr>
                               <tr>
@@ -97,66 +116,90 @@ class WalletsNativeTxInfo extends React.Component {
                               <tr>
                                 <td>blocktime</td>
                                 <td>
-                                  {secondsToString(txInfo.blocktime)}
+                                  { secondsToString(txInfo.blocktime) }
                                 </td>
                               </tr>
                               <tr>
                                 <td>txid</td>
                                 <td>
-                                  {txInfo.txid}
+                                  { txInfo.txid }
                                 </td>
                               </tr>
                               <tr>
                                 <td>walletconflicts</td>
                                 <td>
-                                  {txInfo.walletconflicts.length}
+                                  { txInfo.walletconflicts.length }
                                 </td>
                               </tr>
                               <tr>
                                 <td>time</td>
                                 <td>
-                                  {secondsToString(txInfo.time)}
+                                  { secondsToString(txInfo.time) }
                                 </td>
                               </tr>
                               <tr>
                                 <td>timereceived</td>
                                 <td>
-                                  {secondsToString(txInfo.timereceived)}
+                                  { secondsToString(txInfo.timereceived) }
                                 </td>
                               </tr>
                             </tbody>
                           </table>
                         </div>
-                        <div className={this.state.activeTab === 1 ? 'tab-pane active' : 'tab-pane'} id="KmdTxIDInfotab2" role="tabpanel">
+                        <div
+                          className={ this.state.activeTab === 1 ? 'tab-pane active' : 'tab-pane' }
+                          id="KmdTxIDInfotab2"
+                          role="tabpanel">
                           <table className="table table-striped">
                             <tbody>
                               <tr>
                                 <td>vjoinsplit</td>
                                 <td>
-                                  {txInfo.vjoinsplit}
+                                  { txInfo.vjoinsplit }
                                 </td>
                               </tr>
                               <tr>
                                 <td>details</td>
                                 <td>
-                                  {txInfo.details}
+                                  { txInfo.details }
                                 </td>
                               </tr>
                             </tbody>
                           </table>
                         </div>
-                        <div className={this.state.activeTab === 2 ? 'tab-pane active' : 'tab-pane'} id="KmdTxIDInfotab3" role="tabpanel">
-                          <textarea id="kmd_txid_info_hex" style={{width: '100%', height: '170px'}} rows="10" cols="80" defaultValue={txInfo.hex} disabled></textarea>
+                        <div
+                          className={ this.state.activeTab === 2 ? 'tab-pane active' : 'tab-pane' }
+                          id="KmdTxIDInfotab3"
+                          role="tabpanel">
+                          <textarea
+                            id="kmd_txid_info_hex"
+                            style={{ width: '100%', height: '170px' }}
+                            rows="10"
+                            cols="80"
+                            defaultValue={ txInfo.hex } disabled></textarea>
                         </div>
-                        <div className={this.state.activeTab === 3 ? 'tab-pane active' : 'tab-pane'} id="KmdTxIDInfotab4" role="tabpanel">
-                          <textarea id="kmd_txid_info_hex" style={{width: '100%', height: '400px'}} rows="40" cols="80" defaultValue={JSON.stringify(txInfo, null, '\t')} disabled></textarea>
+                        <div
+                          className={ this.state.activeTab === 3 ? 'tab-pane active' : 'tab-pane' }
+                          id="KmdTxIDInfotab4"
+                          role="tabpanel">
+                          <textarea
+                            id="kmd_txid_info_hex"
+                            style={{ width: '100%', height: '400px' }}
+                            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" data-dismiss="modal" onClick={this.toggleTxInfoModal}>{translate('INDEX.CLOSE')}</button>
+                  <button
+                    type="button"
+                    className="btn btn-default"
+                    data-dismiss="modal"
+                    onClick={ this.toggleTxInfoModal }>{ translate('INDEX.CLOSE') }</button>
                 </div>
               </div>
             </div>
diff --git a/react/src/components/dashboard/walletsNav.js b/react/src/components/dashboard/walletsNav.js
index 4b15fdc..02c5d75 100644
--- a/react/src/components/dashboard/walletsNav.js
+++ b/react/src/components/dashboard/walletsNav.js
@@ -49,17 +49,19 @@ class WalletsNav extends React.Component {
   }
 
   render() {
-    if (this.props && this.props.ActiveCoin && !this.props.ActiveCoin.coin) {
+    if (this.props &&
+        this.props.ActiveCoin &&
+        !this.props.ActiveCoin.coin) {
       return (
         <div>
           <div className="col-xs-12 padding-top-20" id="no_wallet_selected">
             <div className="alert alert-info alert-dismissible" role="alert">
               <button type="button" className="close" data-dismiss="alert" aria-label="Close"></button>
-              <span style={{fontSize: '24px', textAlign: 'center'}}>
-                <i className="icon fa-paw" aria-hidden="true"></i> {translate('INDEX.NO_WALLET_CAPS')}
+              <span style={{ fontSize: '24px', textAlign: 'center' }}>
+                <i className="icon fa-paw" aria-hidden="true"></i> { translate('INDEX.NO_WALLET_CAPS') }
               </span>
               <br/>
-              {translate('INDEX.PLEASE_SELECT_A_WALLET')}.
+              { translate('INDEX.PLEASE_SELECT_A_WALLET') }.
             </div>
           </div>
         </div>
@@ -67,20 +69,35 @@ class WalletsNav extends React.Component {
     } else {
       return (
         <div>
-          <div className="page-header page-header-bordered header-easydex" id="header-dashboard" style={{paddingBottom: '20px', marginBottom: this.props.ActiveCoin.mode !== 'basilisk' && this.props.Dashboard.progress ? '0' : '30px'}}>
+          <div
+            className="page-header page-header-bordered header-easydex"
+            id="header-dashboard"
+            style={{ paddingBottom: '20px', marginBottom: this.props.ActiveCoin.mode !== 'basilisk' && this.props.Dashboard.progress ? '0' : '30px' }}>
             <ol className="breadcrumb">
-              <strong>{translate('INDEX.MY')} <span data-edexcoin="COIN" id="edexcoin-active">{this.props && this.props.ActiveCoin ? this.props.ActiveCoin.coin : '-'}</span> {translate('INDEX.ADDRESS')}: </strong> <span id="edexcoin_active_addr">{this.props && this.props.Dashboard && this.props.Dashboard.activeHandle ? this.props.Dashboard.activeHandle[this.props.ActiveCoin.coin] : '-'}</span> <button className="btn btn-default btn-xs clipboard-edexaddr" id="edexcoin_active_addr_clipboard" onClick={() => this.copyMyAddress(this.props.Dashboard.activeHandle[this.props.ActiveCoin.coin])}><i className="icon wb-copy" aria-hidden="true"></i> {translate('INDEX.COPY')}</button>
+              <strong>{ translate('INDEX.MY') } <span id="edexcoin-active">{ this.props && this.props.ActiveCoin ? this.props.ActiveCoin.coin : '-' }</span> { translate('INDEX.ADDRESS') }: </strong> <span id="edexcoin_active_addr">{ this.props && this.props.Dashboard && this.props.Dashboard.activeHandle ? this.props.Dashboard.activeHandle[this.props.ActiveCoin.coin] : '-' }</span> <button className="btn btn-default btn-xs clipboard-edexaddr" id="edexcoin_active_addr_clipboard" onClick={ () => this.copyMyAddress(this.props.Dashboard.activeHandle[this.props.ActiveCoin.coin]) }><i className="icon wb-copy" aria-hidden="true"></i> { translate('INDEX.COPY') }</button>
             </ol>
-            <div className="page-header-actions" data-edexcoin="COIN" id="edexcoin-actions">
+            <div className="page-header-actions" id="edexcoin-actions">
               <div id="kmd_header_button">
-                <button type="button" className="btn btn-dark waves-effect waves-light" id="btn_edexcoin_dashboard" onClick={this.toggleSendReceiveCoinForms}>
-                  <i className="icon md-view-dashboard" aria-hidden="true"></i> {this.props.ActiveCoin.mode !== 'native' ? translate('INDEX.DASHBOARD') : 'Settings'}
+                <button
+                  type="button"
+                  className="btn btn-dark waves-effect waves-light"
+                  id="btn_edexcoin_dashboard"
+                  onClick={ this.toggleSendReceiveCoinForms }>
+                  <i className="icon md-view-dashboard" aria-hidden="true"></i> { this.props.ActiveCoin.mode !== 'native' ? translate('INDEX.DASHBOARD') : 'Settings' }
                 </button>
-                <button type="button" className="btn btn-primary waves-effect waves-light" id="btn_edexcoin_send" onClick={() => this.toggleSendCoinForm(!this.props.ActiveCoin.send)}>
-                  <i className="icon fa-send" aria-hidden="true"></i> {translate('INDEX.SEND')}
+                <button
+                  type="button"
+                  className="btn btn-primary waves-effect waves-light"
+                  id="btn_edexcoin_send"
+                  onClick={ () => this.toggleSendCoinForm(!this.props.ActiveCoin.send) }>
+                  <i className="icon fa-send" aria-hidden="true"></i> { translate('INDEX.SEND') }
                 </button>
-                <button type="button" className="btn btn-info waves-effect waves-light" id="btn_edexcoin_recieve" onClick={() => this.toggleReceiveCoinForm(!this.props.ActiveCoin.receive)}>
-                  <i className="icon fa-inbox" aria-hidden="true"></i> {translate('INDEX.RECEIVE')}
+                <button
+                  type="button"
+                  className="btn btn-info waves-effect waves-light"
+                  id="btn_edexcoin_recieve"
+                  onClick={ () => this.toggleReceiveCoinForm(!this.props.ActiveCoin.receive) }>
+                  <i className="icon fa-inbox" aria-hidden="true"></i> { translate('INDEX.RECEIVE') }
                 </button>
               </div>
             </div>
diff --git a/react/src/components/dashboard/walletsNotariesList.js b/react/src/components/dashboard/walletsNotariesList.js
index 5f7b69c..148eadd 100644
--- a/react/src/components/dashboard/walletsNotariesList.js
+++ b/react/src/components/dashboard/walletsNotariesList.js
@@ -18,11 +18,11 @@ class WalletsNotariesList extends React.Component {
   renderNotariesFetching() {
     if (!this.props.ActiveCoin.notaries) {
       return (
-        <div>{translate('INDEX.FETCHING_NOTARIES_LIST')}...</div>
+        <div>{ translate('INDEX.FETCHING_NOTARIES_LIST') }...</div>
       );
     } else {
       return (
-        <div>{translate('INDEX.TOTAL_NOTARIES')}: {this.props.ActiveCoin.notaries.numnotaries}</div>
+        <div>{ translate('INDEX.TOTAL_NOTARIES') }: { this.props.ActiveCoin.notaries.numnotaries }</div>
       );
     }
   }
@@ -32,10 +32,10 @@ class WalletsNotariesList extends React.Component {
         this.props.ActiveCoin.notaries.notaries &&
         this.props.ActiveCoin.notaries.notaries.length) {
       return this.props.ActiveCoin.notaries.notaries.map((node, index) =>
-        <TreeNode title={`Node ${index}`} key={`node-${index}`}>
-          <TreeNode key={`node-${index}-btc`} title={`BTC: ${node.BTCaddress}`} />
-          <TreeNode key={`node-${index}-kmd`} title={`KMD: ${node.KMDaddress}`} />
-          <TreeNode key={`node-${index}-pubkey`} title={`Pubkey: ${node.pubkey}`} />
+        <TreeNode title={ `Node ${index}` } key={ `node-${index}` }>
+          <TreeNode key={ `node-${index}-btc` } title={ `BTC: ${node.BTCaddress}` } />
+          <TreeNode key={ `node-${index}-kmd` } title={ `KMD: ${node.KMDaddress}` } />
+          <TreeNode key={ `node-${index}-pubkey` } title={ `Pubkey: ${node.pubkey}` } />
         </TreeNode>
       );
     } else {
@@ -44,7 +44,9 @@ class WalletsNotariesList extends React.Component {
   }
 
   render() {
-    if (this.props && this.props.ActiveCoin.mode === 'basilisk' && this.props.ActiveCoin.displayNotariesModal) {
+    if (this.props &&
+        this.props.ActiveCoin.mode === 'basilisk' &&
+        this.props.ActiveCoin.displayNotariesModal) {
       const notariesData = this.props.ActiveCoin.notaries ? this.props.ActiveCoin.notaries.notaries : null;
 
       return (
@@ -52,14 +54,14 @@ class WalletsNotariesList extends React.Component {
           <div className="modal show" 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" style={{height: '590px'}}>
+                <div className="modal-body" style={{ height: '590px' }}>
                   <div className="panel nav-tabs-horizontal">
                     <div className="panel-body">
                       <div className="tab-content">
                         <div className="tab-pane active" role="tabpanel">
-                          {this.renderNotariesFetching()}
-                          <Tree defaultExpandAll={false} openAnimation={animation}>
-                          {this.renderNotariesList()}
+                          { this.renderNotariesFetching() }
+                          <Tree defaultExpandAll={ false } openAnimation={ animation }>
+                          { this.renderNotariesList() }
                           </Tree>
                         </div>
                       </div>
@@ -67,7 +69,10 @@ class WalletsNotariesList extends React.Component {
                   </div>
                 </div>
                 <div className="modal-footer">
-                  <button type="button" className="btn btn-default" onClick={this.closeNotariesModal}>{translate('INDEX.CLOSE')}</button>
+                  <button
+                    type="button"
+                    className="btn btn-default"
+                    onClick={ this.closeNotariesModal }>{ translate('INDEX.CLOSE') }</button>
                 </div>
               </div>
             </div>
diff --git a/react/src/components/dashboard/walletsProgress.js b/react/src/components/dashboard/walletsProgress.js
index 4a5510c..b3780de 100644
--- a/react/src/components/dashboard/walletsProgress.js
+++ b/react/src/components/dashboard/walletsProgress.js
@@ -23,36 +23,59 @@ class WalletsProgress extends React.Component {
         this.props.ActiveCoin &&
         this.props.ActiveCoin.mode === 'full' &&
         this.props.Dashboard.progress) {
-      if (this.props.Dashboard.progress && this.props.Dashboard.progress.error) {
-        return (<div style={{textAlign: 'center', padding: '10px'}}>{translate('INDEX.COIN_IS_BUSY')}</div>);
+      if (this.props.Dashboard.progress &&
+          this.props.Dashboard.progress.error) {
+        return (
+          <div style={{ textAlign: 'center', padding: '10px' }}>{ translate('INDEX.COIN_IS_BUSY') }</div>
+        );
       } else {
         return (
-          <div id="edex-footer" style={{marginBottom: '20px'}}>
+          <div id="edex-footer" style={{ marginBottom: '20px' }}>
             <div className="row no-space">
               <div id="currency-progressbars">
                 <div className="progress progress-sm">
-                  <div className={this.isFullySynced() ? 'progress-bar progress-bar-striped active progress-bar-indicating progress-bar-success' : 'hide'} style={{width: '100%', fontSize: '80%'}} role="progressbar" id="currency-bundles">
-                    {translate('INDEX.BUNDLES')} <span id="currency-bundles-percent">({this.props.ActiveCoin.coin}) 100.00% - ( {this.props.Dashboard.progress.blocks} / {this.props.Dashboard.progress.blocks} ) ==&gt;&gt; RT{this.props.Dashboard.progress.RTheight}</span>
+                  <div
+                    className={ this.isFullySynced() ? 'progress-bar progress-bar-striped active progress-bar-indicating progress-bar-success' : 'hide' }
+                    style={{ width: '100%', fontSize: '80%' }}
+                    role="progressbar"
+                    id="currency-bundles">
+                    { translate('INDEX.BUNDLES') } <span id="currency-bundles-percent">({ this.props.ActiveCoin.coin }) 100.00% - ( { this.props.Dashboard.progress.blocks } / { this.props.Dashboard.progress.blocks } ) ==&gt;&gt; RT{ this.props.Dashboard.progress.RTheight }</span>
                   </div>
-                  <div className={this.isFullySynced() ? 'hide' : 'progress-bar progress-bar-info progress-bar-striped active'} style={{width: this.props.Dashboard.progress.bundles + '%', fontSize: '80%'}} role="progressbar" id="currency-bundles">
-                    {translate('INDEX.BUNDLES')} <span id="currency-bundles-percent">{this.props.Dashboard.progress.bundles}%</span>
+                  <div
+                    className={ this.isFullySynced() ? 'hide' : 'progress-bar progress-bar-info progress-bar-striped active' }
+                    style={{ width: this.props.Dashboard.progress.bundles + '%', fontSize: '80%' }}
+                    role="progressbar"
+                    id="currency-bundles">
+                    { translate('INDEX.BUNDLES') } <span id="currency-bundles-percent">{ this.props.Dashboard.progress.bundles }%</span>
                   </div>
                 </div>
               </div>
-              <div id="additional-progress-bars" className={this.isFullySynced() ? 'hide' : ''}>
+              <div id="additional-progress-bars" className={ this.isFullySynced() ? 'hide' : '' }>
                 <div className="progress progress-sm">
-                  <div className="progress-bar progress-bar-warning progress-bar-striped active" style={{width: this.props.Dashboard.progress.utxo + '%', fontSize: '80%'}} role="progressbar" id="currency-utxo">
-                    utxo <span id="currency-utxo-percent">{this.props.Dashboard.progress.utxo}%</span>
+                  <div
+                    className="progress-bar progress-bar-warning progress-bar-striped active"
+                    style={{ width: this.props.Dashboard.progress.utxo + '%', fontSize: '80%' }}
+                    role="progressbar"
+                    id="currency-utxo">
+                    utxo <span id="currency-utxo-percent">{ this.props.Dashboard.progress.utxo }%</span>
                   </div>
                 </div>
                 <div className="progress progress-sm">
-                  <div className="progress-bar progress-bar-danger progress-bar-striped active" style={{width: this.props.Dashboard.progress.balances + '%', fontSize: '80%'}} role="progressbar" id="currency-balances">
-                    {translate('INDEX.BALANCES')} <span id="currency-balances-percent">{this.props.Dashboard.progress.balances}%</span>
+                  <div
+                    className="progress-bar progress-bar-danger progress-bar-striped active"
+                    style={{ width: this.props.Dashboard.progress.balances + '%', fontSize: '80%' }}
+                    role="progressbar"
+                    id="currency-balances">
+                    { translate('INDEX.BALANCES') } <span id="currency-balances-percent">{ this.props.Dashboard.progress.balances }%</span>
                   </div>
                 </div>
                 <div className="progress progress-sm">
-                  <div className="progress-bar progress-bar-success progress-bar-striped active" style={{width: this.props.Dashboard.progress.validated + '%', fontSize: '80%'}} role="progressbar" id="currency-validated">
-                    {translate('INDEX.VALIDATED')} <span id="currency-validated-percent">{this.props.Dashboard.progress.validated}%</span>
+                  <div
+                    className="progress-bar progress-bar-success progress-bar-striped active"
+                    style={{ width: this.props.Dashboard.progress.validated + '%', fontSize: '80%' }}
+                    role="progressbar"
+                    id="currency-validated">
+                    { translate('INDEX.VALIDATED') } <span id="currency-validated-percent">{ this.props.Dashboard.progress.validated }%</span>
                   </div>
                 </div>
               </div>
diff --git a/react/src/components/dashboard/walletsTxInfo.js b/react/src/components/dashboard/walletsTxInfo.js
index 185b504..6e262d3 100644
--- a/react/src/components/dashboard/walletsTxInfo.js
+++ b/react/src/components/dashboard/walletsTxInfo.js
@@ -34,79 +34,101 @@ class WalletsTxInfo extends React.Component {
           <div className="modal show" 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" style={{height: '590px'}}>
+                <div className="modal-body" style={{ height: '590px' }}>
                   <div className="panel nav-tabs-horizontal">
                     <ul className="nav nav-tabs nav-tabs-line" role="tablist">
-                      <li className={this.state.activeTab === 0 ? 'active' : ''} role="presentation">
-                        <a data-toggle="tab" aria-controls="KmdTxIDInfotab1" role="tab" onClick={() => this.openTab(0)}>
+                      <li className={ this.state.activeTab === 0 ? 'active' : '' } role="presentation">
+                        <a
+                          data-toggle="tab"
+                          aria-controls="KmdTxIDInfotab1"
+                          role="tab"
+                          onClick={ () => this.openTab(0) }>
                           <i className="icon md-balance-wallet" aria-hidden="true"></i>TxID Info
                         </a>
                       </li>
-                      <li className={this.state.activeTab === 1 ? 'active' : ''} role="presentation">
-                        <a data-toggle="tab" aria-controls="KmdTxIDInfotab4" role="tab" onClick={() => this.openTab(1)}>
+                      <li className={ this.state.activeTab === 1 ? 'active' : '' } role="presentation">
+                        <a
+                          data-toggle="tab"
+                          aria-controls="KmdTxIDInfotab4"
+                          role="tab"
+                          onClick={ () => this.openTab(1) }>
                           <i className="icon wb-file" aria-hidden="true"></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'} id="KmdTxIDInfotab1" role="tabpanel">
+                        <div
+                          className={ this.state.activeTab === 0 ? 'tab-pane active' : 'tab-pane' }
+                          id="KmdTxIDInfotab1"
+                          role="tabpanel">
                           <table className="table table-striped">
                             <tbody>
                               <tr>
-                                <td>address</td>
+                                <td>{ translate('TX_INFO.ADDRESS') }</td>
                                 <td>
-                                {txInfo.address}
+                                { txInfo.address }
                                 </td>
                               </tr>
                               <tr>
-                                <td>amount</td>
+                                <td>{ translate('TX_INFO.AMOUNT') }</td>
                                 <td>
-                                {txInfo.amount}
+                                { txInfo.amount }
                                 </td>
                               </tr>
                               <tr>
-                                <td>category</td>
+                                <td>{ translate('TX_INFO.CATEGORY') }</td>
                                 <td>
-                                  {txInfo.category || txInfo.type}
+                                  { txInfo.category || txInfo.type }
                                 </td>
                               </tr>
                               <tr>
-                                <td>confirmations</td>
+                                <td>{ translate('TX_INFO.CONFIRMATIONS') }</td>
                                 <td>
-                                  {txInfo.confirmations}
+                                  { txInfo.confirmations }
                                 </td>
                               </tr>
                               <tr>
                                 <td>blockhash</td>
                                 <td>
-                                  {txInfo.blockhash}
+                                  { txInfo.blockhash }
                                 </td>
                               </tr>
                               <tr>
                                 <td>blocktime</td>
                                 <td>
-                                  {secondsToString(txInfo.blocktime || txInfo.timestamp)}
+                                  { secondsToString(txInfo.blocktime || txInfo.timestamp) }
                                 </td>
                               </tr>
                               <tr>
                                 <td>txid</td>
                                 <td>
-                                  {txInfo.txid}
+                                  { txInfo.txid }
                                 </td>
                               </tr>
                             </tbody>
                           </table>
                         </div>
-                        <div className={this.state.activeTab === 1 ? 'tab-pane active' : 'tab-pane'} id="KmdTxIDInfotab4" role="tabpanel">
-                          <textarea id="kmd_txid_info_hex" style={{width: '100%', height: '400px'}} rows="40" cols="80" defaultValue={JSON.stringify(txInfo, null, '\t')} disabled></textarea>
+                        <div
+                          className={ this.state.activeTab === 1 ? 'tab-pane active' : 'tab-pane' }
+                          id="KmdTxIDInfotab4" role="tabpanel">
+                          <textarea
+                            id="kmd_txid_info_hex"
+                            style={{ width: '100%', height: '400px' }}
+                            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" data-dismiss="modal" onClick={this.toggleTxInfoModal}>Close</button>
+                  <button
+                    type="button"
+                    className="btn btn-default"
+                    data-dismiss="modal"
+                    onClick={ this.toggleTxInfoModal }>{ translate('INDEX.CLOSE') }</button>
                 </div>
               </div>
             </div>
diff --git a/react/src/translate/en.js b/react/src/translate/en.js
index 31f90d7..03f4d27 100644
--- a/react/src/translate/en.js
+++ b/react/src/translate/en.js
@@ -1,6 +1,8 @@
 export const _lang = {
   'EN': {
     'INDEX': {
+      'NO_DATA': 'No history available',
+      'LOADING_HISTORY': 'Loading transaction history',
       'FETCHING_NOTARIES_LIST': 'Fetching notaries list data',
       'TOTAL_NOTARIES': 'Notaries list. Total nodes count',
       'CLOSE': 'Close',
@@ -386,6 +388,12 @@ export const _lang = {
       'SAVE_APP_CONFIG': 'Save app config',
       'CONFIG_RESTART_REQUIRED': 'Most changes to app config require wallet restart!',
       'APP_CONFIG': 'App Config',
+    },
+    'TX_INFO': {
+      'ADDRESS': 'address',
+      'AMOUNT': 'amount',
+      'CATEGORY': 'category',
+      'CONFIRMATIONS': 'confirmations'
     }
   }
 };
\ No newline at end of file