From 607fb8663fa60ca0a2e12dacc6c2c56c354209cc Mon Sep 17 00:00:00 2001
From: pbca26 <pbca26@gmail.com>
Date: Thu, 20 Jul 2017 06:16:31 -0700
Subject: [PATCH] minor html cleanup

---
 .../notifications/notifications.render.js     |  10 +-
 .../receiveCoin/receiveCoin.render.js         |   4 +-
 .../components/dashboard/sendCoin/sendCoin.js |  10 +-
 .../dashboard/sendCoin/sendCoin.render.js     |  17 +-
 .../components/dashboard/settings/settings.js |   2 +-
 .../dashboard/settings/settings.render.js     |  60 +++----
 .../dashboard/walletsData/walletsData.js      |   8 +-
 .../walletsData/walletsData.render.js         |  38 ++--
 .../dashboard/walletsNative/walletsNative.js  |   2 +-
 .../walletsNativeInfo.render.js               | 170 +++++++++---------
 .../walletsNativeSend/walletsNativeSend.js    |  11 +-
 .../walletsNativeSyncProgress.js              | 147 ---------------
 .../walletsNativeTxHistory.js                 |   2 +-
 .../walletsNativeTxHistory.render.js          |   5 +-
 .../dashboard/walletsNav/walletsNav.render.js |   6 +-
 .../walletsNotariesList.render.js             |   4 +-
 .../walletsTxInfo/walletsTxInfo.render.js     |   8 +-
 react/src/components/login/login.js           |  20 +--
 react/src/components/login/login.render.js    |   2 +-
 19 files changed, 189 insertions(+), 337 deletions(-)
 delete mode 100644 react/src/components/dashboard/walletsNativeSyncProgress/walletsNativeSyncProgress.js

diff --git a/react/src/components/dashboard/notifications/notifications.render.js b/react/src/components/dashboard/notifications/notifications.render.js
index 93c57b6..8a894c9 100644
--- a/react/src/components/dashboard/notifications/notifications.render.js
+++ b/react/src/components/dashboard/notifications/notifications.render.js
@@ -58,13 +58,13 @@ export const NotificationsModalRender = function() {
                 </ul>
                 <div className="panel-body panel-body-container">
                   <div className="tab-content">
-                    <div className={ this.state.activeTab === 0 ? 'tab-pane active' : 'tab-pane' }>
+                    <div className={ 'tab-pane' + (this.state.activeTab === 0 ? ' active' : '') }>
                       { this.renderNotificationsByType('success') }
                     </div>
-                    <div className={ this.state.activeTab === 1 ? 'tab-pane active' : 'tab-pane' }>
+                    <div className={ 'tab-pane' + (this.state.activeTab === 1 ? ' active' : '') }>
                       { this.renderNotificationsByType('error') }
                     </div>
-                    <div className={ this.state.activeTab === 2 ? 'tab-pane active' : 'tab-pane' }>
+                    <div className={ 'tab-pane' + (this.state.activeTab === 2 ? ' active' : '') }>
                       { this.renderNotificationsByType('pending') }
                     </div>
                   </div>
@@ -91,7 +91,7 @@ export const NotificationsRender = function() {
   return (
     <div>
       <div
-        className={ this.props.Dashboard.activeHandle && this.props.Dashboard.activeHandle.status === 'unlocked' ? 'notifications-badge stick-to-top' : 'notifications-badge' }
+        className={ 'notifications-badge' + (this.props.Dashboard.activeHandle && this.props.Dashboard.activeHandle.status === 'unlocked' ? ' stick-to-top' : '') }
         onClick={ this.state.debug ? this.toggleNotificationsModal : null }>
         <span className={ this.state.debug ? 'badge success' : 'hide' }>
           { this.state.calls.success }
@@ -102,7 +102,7 @@ export const NotificationsRender = function() {
         <span className={ this.state.debug ? 'badge pending' : 'hide' }>
           { this.state.calls.pending }
         </span>
-        <div className={ this.state.calls.pending === 0 ? 'spinner spinner-hide' : 'spinner' }>
+        <div className={ 'spinner' + (this.state.calls.pending === 0 ? ' spinner-hide' : '') }>
           <div className="rect1"></div>
           <div className="rect2"></div>
           <div className="rect3"></div>
diff --git a/react/src/components/dashboard/receiveCoin/receiveCoin.render.js b/react/src/components/dashboard/receiveCoin/receiveCoin.render.js
index d922d69..f5acf16 100644
--- a/react/src/components/dashboard/receiveCoin/receiveCoin.render.js
+++ b/react/src/components/dashboard/receiveCoin/receiveCoin.render.js
@@ -32,8 +32,8 @@ export const AddressActionsBasiliskModeRender = function(address) {
 export const AddressActionsNonBasiliskModeRender = function(address, type) {
   return (
     <td>
-      <span className={ type === 'public' ? 'label label-default' : 'label label-dark' }>
-        <i className={ type === 'public' ? 'icon fa-eye' : 'icon fa-eye-slash' }></i>
+      <span className={ 'label label-' + (type === 'public' ? 'default' : 'dark') }>
+        <i className={ 'icon fa-eye' + (type === 'public' ? '' : '-slash') }></i>
         { type === 'public' ? translate('IAPI.PUBLIC_SM') : translate('KMD_NATIVE.PRIVATE') }
       </span>
       <button
diff --git a/react/src/components/dashboard/sendCoin/sendCoin.js b/react/src/components/dashboard/sendCoin/sendCoin.js
index 87e5d5e..4436cc5 100644
--- a/react/src/components/dashboard/sendCoin/sendCoin.js
+++ b/react/src/components/dashboard/sendCoin/sendCoin.js
@@ -33,7 +33,7 @@ import {
 
 import { SocketProvider } from 'socket.io-react';
 import io from 'socket.io-client';
-const socket = io.connect('http://127.0.0.1:' + Config.agamaPort);
+const socket = io.connect(`http://127.0.0.1:${Config.agamaPort}`);
 
 // TODO: prevent any cache updates rather than utxo while on send coin form
 //       fix a bug - total amount is incorrect when switching between steps
@@ -213,7 +213,7 @@ class SendCoin extends React.Component {
             key={ mainAddress }
             className={ mainAddressAmount <= 0 ? 'hide' : '' }>
             <a onClick={ () => this.updateAddressSelection(mainAddress, type, mainAddressAmount) }>
-              <i className={ type === 'public' ? 'icon fa-eye' : 'icon fa-eye-slash' }></i>&nbsp;&nbsp;
+              <i className={ 'icon fa-eye' + (type === 'public' ? '' : '-slash') }></i>&nbsp;&nbsp;
               <span className="text">
                 [ { mainAddressAmount } { this.props.ActiveCoin.coin } ]&nbsp;&nbsp;
                 { mainAddress }
@@ -243,7 +243,7 @@ class SendCoin extends React.Component {
                 key={ address }
                 className={ _amount <= 0 ? 'hide' : '' }>
                 <a onClick={ () => this.updateAddressSelection(address, type, _amount) }>
-                  <i className={ type === 'public' ? 'icon fa-eye' : 'icon fa-eye-slash' }></i>&nbsp;&nbsp;
+                  <i className={ 'icon fa-eye' + (type === 'public' ? '' : '-slash') }></i>&nbsp;&nbsp;
                   <span className="text">[ { _amount } { _coin } ]  { address }</span>
                   <span className="glyphicon glyphicon-ok check-mark"></span>
                 </a>
@@ -276,7 +276,7 @@ class SendCoin extends React.Component {
 
       return (
         <span>
-          <i className={ this.state.addressType === 'public' ? 'icon fa-eye' : 'icon fa-eye-slash' }></i>&nbsp;&nbsp;
+          <i className={ 'icon fa-eye' + (this.state.addressType === 'public' ? '' : '-slash') }></i>&nbsp;&nbsp;
           <span className="text">[ { _amount } { _coin } ]  { _sendFrom }</span>
         </span>
       );
@@ -286,7 +286,7 @@ class SendCoin extends React.Component {
 
       return (
         <span>
-          <i className={ this.state.addressType === 'public' ? 'icon fa-eye' : 'icon fa-eye-slash' }></i>&nbsp;&nbsp;
+          <i className={ 'icon fa-eye' + (this.state.addressType === 'public' ? '' : '-slash') }></i>&nbsp;&nbsp;
           <span className="text">[ { mainAddressAmount } { this.props.ActiveCoin.coin } ]  { mainAddress }</span>
         </span>
       );
diff --git a/react/src/components/dashboard/sendCoin/sendCoin.render.js b/react/src/components/dashboard/sendCoin/sendCoin.render.js
index 61cf784..a7fc0a5 100644
--- a/react/src/components/dashboard/sendCoin/sendCoin.render.js
+++ b/react/src/components/dashboard/sendCoin/sendCoin.render.js
@@ -163,21 +163,21 @@ export const SendCoinRender = function () {
     <div className="col-sm-12 padding-top-10">
       <div className="col-xlg-12 col-md-12 col-sm-12 col-xs-12">
         <div className="steps row margin-top-10">
-          <div className={ this.state.currentStep === 0 ? 'step col-md-4 current' : 'step col-md-4' }>
+          <div className={ 'step col-md-4' + (this.state.currentStep === 0 ? ' current' : '') }>
             <span className="step-number">1</span>
             <div className="step-desc">
               <span className="step-title">{ translate('INDEX.FILL_SEND_FORM') }</span>
               <p>{ translate('INDEX.FILL_SEND_DETAILS') }</p>
             </div>
           </div>
-          <div className={ this.state.currentStep === 1 ? 'step col-md-4 current' : 'step col-md-4' }>
+          <div className={ 'step col-md-4' + (this.state.currentStep === 1 ? ' current' : '') }>
             <span className="step-number">2</span>
             <div className="step-desc">
               <span className="step-title">{ translate('INDEX.CONFIRMING') }</span>
               <p>{ translate('INDEX.CONFIRM_DETAILS') }</p>
             </div>
           </div>
-          <div className={ this.state.currentStep === 2 ? 'step col-md-4 current' : 'step col-md-4' }>
+          <div className={ 'step col-md-4' + (this.state.currentStep === 2 ? ' current' : '') }>
             <span className="step-number">3</span>
             <div className="step-desc">
               <span className="step-title">{ translate('INDEX.PROCESSING_TX') }</span>
@@ -186,14 +186,17 @@ export const SendCoinRender = function () {
           </div>
         </div>
 
-        <div className={ this.state.currentStep === 0 ? 'panel' : 'panel hide' }>
+        <div className={ 'panel' + (this.state.currentStep === 0 ? '' : ' hide') }>
           <div className="panel-heading">
             <h3 className="panel-title">
               { translate('INDEX.SEND') } { this.props.ActiveCoin.coin }
             </h3>
           </div>
           <div className="panel-body container-fluid">
-            <form className="edexcoin-send-form" method="post" autoComplete="off">
+            <form
+              className="edexcoin-send-form"
+              method="post"
+              autoComplete="off">
               { this.renderSendApiTypeSelector() }
               <div className="row">
                 <div className={ this.props.ActiveCoin.mode === 'basilisk' ? 'col-xlg-12 form-group form-material' : 'hide' }>
@@ -299,7 +302,7 @@ export const SendCoinRender = function () {
         </div>
       </div>
 
-      <div className={ this.state.currentStep === 1 ? 'col-xlg-12 col-md-12 col-sm-12 col-xs-12' : 'col-xlg-12 col-md-12 col-sm-12 col-xs-12 hide' }>
+      <div className={ 'col-xlg-12 col-md-12 col-sm-12 col-xs-12' + (this.state.currentStep === 1 ? '' : ' hide') }>
         <div className="panel">
           <div className="panel-body">
             <div className="row">
@@ -345,7 +348,7 @@ export const SendCoinRender = function () {
         </div>
       </div>
 
-      <div className={ this.state.currentStep === 2 ? 'col-xlg-12 col-md-12 col-sm-12 col-xs-12' : 'col-xlg-12 col-md-12 col-sm-12 col-xs-12 hide' }>
+      <div className={ 'col-xlg-12 col-md-12 col-sm-12 col-xs-12' + (this.state.currentStep === 2 ? '' : ' hide') }>
         <div className="panel">
           <div className="panel-heading">
             <h4 className="panel-title">
diff --git a/react/src/components/dashboard/settings/settings.js b/react/src/components/dashboard/settings/settings.js
index ca777af..3d3a7a8 100644
--- a/react/src/components/dashboard/settings/settings.js
+++ b/react/src/components/dashboard/settings/settings.js
@@ -27,7 +27,7 @@ import {
 import { SocketProvider } from 'socket.io-react';
 import io from 'socket.io-client';
 
-const socket = io.connect('http://127.0.0.1:' + Config.agamaPort);
+const socket = io.connect(`http://127.0.0.1:${Config.agamaPort}`);
 let updateProgressBar = {
   patch: -1,
 };
diff --git a/react/src/components/dashboard/settings/settings.render.js b/react/src/components/dashboard/settings/settings.render.js
index 9b40e82..084bb90 100644
--- a/react/src/components/dashboard/settings/settings.render.js
+++ b/react/src/components/dashboard/settings/settings.render.js
@@ -11,12 +11,12 @@ export const AppUpdateTabRender = function() {
       id="AppUpdate"
       onClick={ () => this.openTab('AppUpdate', 10) }>
       <div className="panel-heading">
-        <a className={ this.state.activeTab === 10 ? 'panel-title' : 'panel-title collapsed' }>
+        <a className={ 'panel-title' + (this.state.activeTab === 10 ? '' : ' collapsed') }>
           <i className="icon fa fa-life-ring"></i> { translate('INDEX.UPDATE') }
         </a>
       </div>
       <div
-        className={ this.state.activeTab === 10 ? 'panel-collapse collapse in' : 'panel-collapse collapse' }
+        className={ 'panel-collapse collapse' + (this.state.activeTab === 10 ? ' in' : '') }
         style={{ height: this.state.activeTab === 10 ? `${this.state.activeTabHeight}px` : '0' }}>
         <div className="panel-body">
           <div className="col-sm-4 padding-top-15">
@@ -62,12 +62,12 @@ export const AppInfoTabRender = function() {
       id="AppInfo"
       onClick={ () => this.openTab('AppInfo', 8) }>
       <div className="panel-heading">
-        <a className={ this.state.activeTab === 8 ? 'panel-title' : 'panel-title collapsed' }>
+        <a className={ 'panel-title' + (this.state.activeTab === 8 ? '' : ' collapsed') }>
           <i className="icon md-info"></i>{ translate('SETTINGS.APP_INFO') }
         </a>
       </div>
       <div
-        className={ this.state.activeTab === 8 ? 'panel-collapse collapse in' : 'panel-collapse collapse' }
+        className={ 'panel-collapse collapse' + (this.state.activeTab === 8 ? ' in' : '') }
         style={{ height: this.state.activeTab === 8 ? `${this.state.activeTabHeight}px` : '0' }}>
         <div className="panel-body">
           <div className="col-sm-12 padding-top-15">
@@ -159,14 +159,14 @@ export const SettingsRender = function() {
                   <div
                     id="WalletInfo"
                     onClick={ () => this.openTab('WalletInfo', 0) }
-                    className={ this.state.nativeOnly ? 'panel hide' : 'panel' }>
+                    className={ 'panel' + (this.state.nativeOnly ? ' hide' : '') }>
                     <div className="panel-heading">
-                      <a className={ this.state.activeTab === 0 ? 'panel-title' : 'panel-title collapsed' }>
+                      <a className={ 'panel-title' + (this.state.activeTab === 0 ? '' : ' collapsed') }>
                         <i className="icon md-balance-wallet"></i>{ translate('INDEX.WALLET_INFO') }
                       </a>
                     </div>
                     <div
-                      className={ this.state.activeTab === 0 ? 'panel-collapse collapse in' : 'panel-collapse collapse' }
+                      className={ 'panel-collapse collapse' + (this.state.activeTab === 0 ? ' in' : '') }
                       style={{ height: this.state.activeTab === 0 ? `${this.state.activeTabHeight}px` : '0' }}>
                       <div className="panel-body">
                         <table className="table">
@@ -210,14 +210,14 @@ export const SettingsRender = function() {
                   <div
                     id="AddNodeforCoin"
                     onClick={ () => this.openTab('AddNodeforCoin', 1) }
-                    className={ this.state.nativeOnly ? 'panel hide' : 'panel' }>
+                    className={ 'panel' + (this.state.nativeOnly ? ' hide' : '') }>
                     <div className="panel-heading">
-                      <a className={ this.state.activeTab === 1 ? 'panel-title' : 'panel-title collapsed' }>
+                      <a className={ 'panel-title' + (this.state.activeTab === 1 ? '' : ' collapsed') }>
                         <i className="icon md-plus-square"></i>{ translate('INDEX.ADD_NODE') }
                       </a>
                     </div>
                     <div
-                      className={ this.state.activeTab === 1 ? 'panel-collapse collapse in' : 'panel-collapse collapse' }
+                      className={ 'panel-collapse collapse' + (this.state.activeTab === 1 ? ' in' : '') }
                       style={{ height: this.state.activeTab === 1 ? `${this.state.activeTabHeight}px` : '0' }}>
                       <div className="panel-body">
                         <div className="row">
@@ -296,14 +296,14 @@ export const SettingsRender = function() {
                   <div
                     id="DumpWallet"
                     onClick={ () => this.openTab('DumpWallet', 2) }
-                    className={ this.state.nativeOnly ? 'panel hide' : 'panel' }>
+                    className={ 'panel' + (this.state.nativeOnly ? ' hide' : '') }>
                     <div className="panel-heading">
-                      <a className={ this.state.activeTab === 2 ? 'panel-title' : 'panel-title collapsed' }>
+                      <a className={ 'panel-title' + (this.state.activeTab === 2 ? '' : ' collapsed') }>
                         <i className="icon wb-briefcase"></i>{ translate('INDEX.WALLET_BACKUP') }
                       </a>
                     </div>
                     <div
-                      className={ this.state.activeTab === 2 ? 'panel-collapse collapse in' : 'panel-collapse collapse' }
+                      className={ 'panel-collapse collapse' + (this.state.activeTab === 2 ? ' in' : '') }
                       style={{ height: this.state.activeTab === 2 ? `${this.state.activeTabHeight}px` : '0' }}>
                       <div className="panel-body">Wallet Backup section to be updated soon.</div>
                     </div>
@@ -312,14 +312,14 @@ export const SettingsRender = function() {
                   <div
                     id="FiatCurrencySettings"
                     onClick={ () => this.openTab('FiatCurrencySettings', 3) }
-                    className={ this.state.nativeOnly ? 'panel hide' : 'panel' }>
+                    className={ 'panel' + (this.state.nativeOnly ? ' hide' : '') }>
                     <div className="panel-heading">
-                      <a className={ this.state.activeTab === 3 ? 'panel-title' : 'panel-title collapsed' }>
+                      <a className={ 'panel-title' + (this.state.activeTab === 3 ? '' : ' collapsed') }>
                         <i className="icon fa-money"></i>{ translate('INDEX.FIAT_CURRENCY') }
                       </a>
                     </div>
                     <div
-                      className={ this.state.activeTab === 3 ? 'panel-collapse collapse in' : 'panel-collapse collapse' }
+                      className={ 'panel-collapse collapse' + (this.state.activeTab === 3 ? ' in' : '') }
                       style={{ height: this.state.activeTab === 3 ? `${this.state.activeTabHeight}px` : '0' }}>
                       <div className="panel-body">Fiat currency settings section to be updated soon.</div>
                     </div>
@@ -328,14 +328,14 @@ export const SettingsRender = function() {
                   <div
                     id="ExportKeys"
                     onClick={ () => this.openTab('ExportKeys', 4) }
-                    className={ this.state.nativeOnly ? 'panel hide' : 'panel' }>
+                    className={ 'panel' + (this.state.nativeOnly ? ' hide' : '') }>
                     <div className="panel-heading">
-                      <a className={ this.state.activeTab === 4 ? 'panel-title' : 'panel-title collapsed' }>
+                      <a className={ 'panel-title' + (this.state.activeTab === 4 ? '' : ' collapsed') }>
                         <i className="icon md-key"></i>{ translate('INDEX.EXPORT_KEYS') }
                       </a>
                     </div>
                     <div
-                      className={ this.state.activeTab === 4 ? 'panel-collapse collapse in' : 'panel-collapse collapse' }
+                      className={ 'panel-collapse collapse' + (this.state.activeTab === 4 ? ' in' : '') }
                       style={{ height: this.state.activeTab === 4 ? `${this.state.activeTabHeight}px` : '0' }}>
                       <div className="panel-body">
                         <p>
@@ -368,7 +368,7 @@ export const SettingsRender = function() {
                               onChange={ this.updateInput }
                               value={ this.state.wifkeysPassphrase }></textarea>
                             <i
-                              className={ !this.state.seedInputVisibility ? 'seed-toggle fa fa-eye-slash' : 'seed-toggle fa fa-eye' }
+                              className={ 'seed-toggle fa fa-eye' + (!this.state.seedInputVisibility ? '-slash' : '') }
                               onClick={ this.toggleSeedInputVisibility }></i>
                             <label
                               className="floating-label"
@@ -405,14 +405,14 @@ export const SettingsRender = function() {
                   <div
                     id="ImportKeys"
                     onClick={ () => this.openTab('ImportKeys', 5) }
-                    className={ this.state.nativeOnly ? 'panel hide' : 'panel' }>
+                    className={ 'panel' + (this.state.nativeOnly ? ' hide' : '') }>
                     <div className="panel-heading">
-                      <a className={ this.state.activeTab === 5 ? 'panel-title' : 'panel-title collapsed' }>
+                      <a className={ 'panel-title' + (this.state.activeTab === 5 ? '' : ' collapsed') }>
                         <i className="icon md-key"></i>{ translate('INDEX.IMPORT_KEYS') }
                       </a>
                     </div>
                     <div
-                      className={ this.state.activeTab === 5 ? 'panel-collapse collapse in' : 'panel-collapse collapse' }
+                      className={ 'panel-collapse collapse' + (this.state.activeTab === 5 ? ' in' : '') }
                       style={{ height: this.state.activeTab === 5 ? `${this.state.activeTabHeight}px` : '0' }}>
                       <div className="panel-body">
                         <div>{ translate('INDEX.IMPORT_KEYS_DESC_P1') }</div><br/>
@@ -456,12 +456,12 @@ export const SettingsRender = function() {
                     id="DebugLog"
                     onClick={ () => this.openTab('DebugLog', 6) }>
                     <div className="panel-heading">
-                      <a className={ this.state.activeTab === 6 ? 'panel-title' : 'panel-title collapsed' }>
+                      <a className={ 'panel-title' + (this.state.activeTab === 6 ? '' : ' collapsed') }>
                         <i className="icon fa-bug"></i>{ translate('INDEX.DEBUG_LOG') }
                       </a>
                     </div>
                     <div
-                      className={ this.state.activeTab === 6 ? 'panel-collapse collapse in' : 'panel-collapse collapse' }
+                      className={ 'panel-collapse collapse' + (this.state.activeTab === 6 ? ' in' : '') }
                       style={{ height: this.state.activeTab === 6 ? `${this.state.activeTabHeight}px` : '0' }}>
                       <div className="panel-body">
                         <p>{ translate('INDEX.DEBUG_LOG_DESC') }</p>
@@ -515,12 +515,12 @@ export const SettingsRender = function() {
                     id="AppSettings"
                     onClick={ () => this.openTab('AppSettings', 7) }>
                     <div className="panel-heading">
-                      <a className={ this.state.activeTab === 7 ? 'panel-title' : 'panel-title collapsed' }>
+                      <a className={ 'panel-title' + (this.state.activeTab === 7 ? '' : ' collapsed') }>
                         <i className="icon fa-wrench"></i>{ translate('SETTINGS.APP_CONFIG') } (config.json)
                       </a>
                     </div>
                     <div
-                      className={ this.state.activeTab === 7 ? 'panel-collapse collapse in' : 'panel-collapse collapse' }
+                      className={ 'panel-collapse collapse' + (this.state.activeTab === 7 ? ' in' : '') }
                       style={{ height: this.state.activeTab === 7 ? `${this.state.activeTabHeight}px` : '0' }}>
                       <div className="panel-body">
                         <p>
@@ -547,14 +547,14 @@ export const SettingsRender = function() {
                   <div
                     id="Cli"
                     onClick={ () => this.openTab('Cli', 9) }
-                    className={ !this.props.Main.coins.native.length ? 'panel hide' : 'panel' }>
+                    className={ 'panel' + (!this.props.Main.coins.native.length ? ' hide' : '') }>
                     <div className="panel-heading">
-                      <a className={ this.state.activeTab === 9 ? 'panel-title' : 'panel-title collapsed' }>
+                      <a className={ 'panel-title' + (this.state.activeTab === 9 ? '' : ' collapsed') }>
                         <i className="icon fa-code"></i> CLI
                       </a>
                     </div>
                     <div
-                      className={ this.state.activeTab === 9 ? 'panel-collapse collapse in' : 'panel-collapse collapse' }
+                      className={ 'panel-collapse collapse' + (this.state.activeTab === 9 ? ' in' : '') }
                       style={{ height: this.state.activeTab === 9 ? `${this.state.activeTabHeight}px` : '0' }}>
                       <div className="panel-body">
                         <p>{ translate('INDEX.CLI_SELECT_A_COIN') }</p>
diff --git a/react/src/components/dashboard/walletsData/walletsData.js b/react/src/components/dashboard/walletsData/walletsData.js
index 72400e9..33d2891 100644
--- a/react/src/components/dashboard/walletsData/walletsData.js
+++ b/react/src/components/dashboard/walletsData/walletsData.js
@@ -24,7 +24,6 @@ import {
   PaginationItemsPerPageSelectorRender,
   PaginationRender,
   TxHistoryListRender,
-  UseCacheToggleRender,
   AddressListRender,
   WalletsDataRender
 } from  './walletsData.render';
@@ -421,7 +420,7 @@ class WalletsData extends React.Component {
           items.push(
             <li key={address}>
               <a onClick={ () => this.updateAddressSelection(address, type, _amount) }>
-                <i className={ type === 'public' ? 'icon fa-eye' : 'icon fa-eye-slash' }></i>&nbsp;&nbsp;
+                <i className={ 'icon fa-eye' + (type === 'public' ? '' : '-slash') }></i>&nbsp;&nbsp;
                 <span className="text">[ { _amount } { _coin } ]  { address }</span>
                 <span className="glyphicon glyphicon-ok check-mark"></span>
               </a>
@@ -470,7 +469,10 @@ class WalletsData extends React.Component {
       return (
         <span>
           <i className={ 'icon fa-eye' + (this.state.addressType === 'public' ? '' : '-slash') }></i>&nbsp;&nbsp;
-          <span className="text">[ { this.renderAddressAmount() } { this.props.ActiveCoin.coin } ]  { this.state.currentAddress }</span>
+          <span className="text">
+            [ { this.renderAddressAmount() } { this.props.ActiveCoin.coin } ]&nbsp;&nbsp;
+            { this.state.currentAddress }
+          </span>
         </span>
       );
     } else {
diff --git a/react/src/components/dashboard/walletsData/walletsData.render.js b/react/src/components/dashboard/walletsData/walletsData.render.js
index 2e1432f..4aca129 100644
--- a/react/src/components/dashboard/walletsData/walletsData.render.js
+++ b/react/src/components/dashboard/walletsData/walletsData.render.js
@@ -12,7 +12,7 @@ export const PaginationItemRender = function(i) {
   return (
     <li
       key={ `${i}-pagination-link` }
-      className={ this.state.activePage === i + 1 ? 'paginate_button active' : 'paginate_button' }>
+      className={ 'paginate_button' + (this.state.activePage === i + 1 ? ' active' : '') }>
       <a
         key={ `${i}-pagination` }
         onClick={ this.state.activePage !== (i + 1) ? () => this.updateCurrentPage(i + 1) : null }>{ i + 1 }</a>
@@ -41,6 +41,8 @@ export const PaginationItemsPerPageSelectorRender = function() {
 };
 
 export const PaginationRender = function(paginationFrom, paginationTo) {
+  const disableNextBtn = this.state.activePage >= Math.floor(this.props.ActiveCoin.txhistory.length / this.state.itemsPerPage);
+
   return (
     <div className="row unselectable">
       <div className="col-sm-5">
@@ -57,11 +59,11 @@ export const PaginationRender = function(paginationFrom, paginationTo) {
       <div className="col-sm-7">
         <div className="dataTables_paginate paging_simple_numbers">
           <ul className="pagination">
-            <li className={ this.state.activePage === 1 ? 'paginate_button previous disabled' : 'paginate_button previous' }>
+            <li className={ 'paginate_button previous' + (this.state.activePage === 1 ? ' disabled' : '') }>
               <a 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' }>
+            <li className={ 'paginate_button next' + (disableNextBtn ? ' disabled' : '') }>
               <a onClick={ () => this.updateCurrentPage(this.state.activePage + 1) }>{ translate('INDEX.NEXT') }</a>
             </li>
           </ul>
@@ -91,17 +93,6 @@ export const TxHistoryListRender = function(tx, index) {
   );
 };
 
-export const UseCacheToggleRender = function() {
-  return (
-    <div className="col-sm-2">
-      <div className="pull-left margin-right-10">
-        <input type="checkbox" id="edexcoin_cache_api" checked={this.state.useCache} />
-      </div>
-      <label className="padding-top-3" htmlFor="edexcoin_cache_api" onClick={this.toggleCacheApi}>Use cache</label>
-    </div>
-  );
-};
-
 export const AddressListRender = function() {
   return (
     <div className={ `btn-group bootstrap-select form-control form-material showkmdwalletaddrs show-tick ${(this.state.addressSelectorOpen ? 'open' : '')}` }>
@@ -141,7 +132,7 @@ export const WalletsDataRender = function() {
               <div className="col-xlg-12 col-lg-12 col-sm-12 col-xs-12">
                 <div className="panel">
                   <header className="panel-heading z-index-10">
-                    <div className={ this.props.ActiveCoin.mode === 'basilisk' ? 'panel-actions' : 'panel-actions hide' }>
+                    <div className={ 'panel-actions' + (this.props.ActiveCoin.mode === 'basilisk' ? '' : ' hide') }>
                       <div className={ 'margin-bottom-3 ' + (this.state.currentStackLength === 1 || (this.state.currentStackLength === 0 && this.state.totalStackLength === 0) ? 'hide' : 'progress progress-sm') }>
                         <div
                           className="progress-bar progress-bar-striped active progress-bar-indicating progress-bar-success font-size-80-percent"
@@ -150,7 +141,7 @@ export const WalletsDataRender = function() {
                         </div>
                       </div>
                       <div
-                        className={ this.state.basiliskActionsMenu ? 'dropdown open' : 'dropdown' }
+                        className={ 'dropdown' + (this.state.basiliskActionsMenu ? ' open' : '') }
                         onClick={ this.toggleBasiliskActionsMenu }>
                         <a className="dropdown-toggle btn-xs btn-default">
                           <i className="icon fa-magic margin-right-10"></i> { translate('INDEX.BASILISK_ACTIONS') } <span className="caret"></span>
@@ -181,11 +172,6 @@ export const WalletsDataRender = function() {
                               <i className="icon fa-history"></i> { translate('INDEX.REFETCH_WALLET_DATA') }
                             </a>
                           </li>
-                          <li className={ 'hide ' + (!this.state.useCache ? 'hide' : '') }>
-                            <a onClick={ this.restartBasiliskInstance }>
-                              <i className="icon fa-refresh"></i> Restart Basilisk Instance (unsafe!)
-                            </a>
-                          </li>
                           <li className={ !this.state.useCache ? 'hide' : '' }>
                             <a onClick={ this._toggleViewCacheModal }>
                               <i className="icon fa-list-alt"></i> { translate('INDEX.VIEW_CACHE_DATA') }
@@ -216,7 +202,9 @@ export const WalletsDataRender = function() {
                       </div>
                     </div>
                     <div className="row">
-                      <table className="table table-hover dataTable table-striped" width="100%">
+                      <table
+                        className="table table-hover dataTable table-striped"
+                        width="100%">
                         <thead>
                           <tr>
                             <th>{ translate('INDEX.DIRECTION') }</th>
@@ -224,11 +212,11 @@ export const WalletsDataRender = function() {
                             <th>{ translate('INDEX.AMOUNT') }</th>
                             <th>{ translate('INDEX.TIME') }</th>
                             <th className={ this.props.ActiveCoin.mode === 'basilisk' ? 'hide' : '' }>{ translate('INDEX.DEST_ADDRESS') }</th>
-                            <th className={ this.props.ActiveCoin.mode === 'basilisk' ? 'hidden-xs hidden-sm text-center' : 'hidden-xs hidden-sm' }>{ translate('INDEX.TX_DETAIL') }</th>
+                            <th className={ 'hidden-xs hidden-sm' + (this.props.ActiveCoin.mode === 'basilisk' ? ' text-center' : '') }>{ translate('INDEX.TX_DETAIL') }</th>
                           </tr>
                         </thead>
                         <tbody>
-                        { this.renderTxHistoryList() }
+                          { this.renderTxHistoryList() }
                         </tbody>
                         <tfoot>
                           <tr>
@@ -237,7 +225,7 @@ export const WalletsDataRender = function() {
                             <th>{ translate('INDEX.AMOUNT') }</th>
                             <th>{ translate('INDEX.TIME') }</th>
                             <th className={ this.props.ActiveCoin.mode === 'basilisk' ? 'hide' : '' }>{ translate('INDEX.DEST_ADDRESS') }</th>
-                            <th className={ this.props.ActiveCoin.mode === 'basilisk' ? 'hidden-xs hidden-sm text-center' : 'hidden-xs hidden-sm' }>{ translate('INDEX.TX_DETAIL') }</th>
+                            <th className={ 'hidden-xs hidden-sm' + (this.props.ActiveCoin.mode === 'basilisk' ? ' text-center' : '') }>{ translate('INDEX.TX_DETAIL') }</th>
                           </tr>
                         </tfoot>
                       </table>
diff --git a/react/src/components/dashboard/walletsNative/walletsNative.js b/react/src/components/dashboard/walletsNative/walletsNative.js
index ce31818..0168910 100644
--- a/react/src/components/dashboard/walletsNative/walletsNative.js
+++ b/react/src/components/dashboard/walletsNative/walletsNative.js
@@ -11,7 +11,7 @@ import Store from '../../../store';
 import { SocketProvider } from 'socket.io-react';
 import io from 'socket.io-client';
 
-const socket = io.connect('http://127.0.0.1:' + Config.agamaPort);
+const socket = io.connect(`http://127.0.0.1:${Config.agamaPort}`);
 
 class WalletsNative extends React.Component {
   constructor(props) {
diff --git a/react/src/components/dashboard/walletsNativeInfo/walletsNativeInfo.render.js b/react/src/components/dashboard/walletsNativeInfo/walletsNativeInfo.render.js
index 9a62ad6..07bd784 100644
--- a/react/src/components/dashboard/walletsNativeInfo/walletsNativeInfo.render.js
+++ b/react/src/components/dashboard/walletsNativeInfo/walletsNativeInfo.render.js
@@ -52,91 +52,91 @@ const WalletsNativeInfoRender = function() {
           <div className="table-responsive">
             <table className="table table-striped">
               <tbody>
-              <tr>
-                <td>{ translate('INDEX.VERSION') }</td>
-                <td>
-                  { this.props.Dashboard.progress.KMDversion }
-                </td>
-              </tr>
-              <tr>
-                <td>{ translate('INDEX.PROTOCOL_VERSION') }</td>
-                <td>
-                  { this.props.Dashboard.progress.protocolversion }
-                </td>
-              </tr>
-              <tr>
-                <td>{ translate('INDEX.NOTARIZED') }</td>
-                <td>
-                  { this.props.Dashboard.progress.notarized }
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  { translate('INDEX.NOTARIZED') } Hash
-                </td>
-                <td>
-                  { this.props.Dashboard.progress.notarizedhash ?
-                    this.props.Dashboard.progress.notarizedhash.substring(
-                      0,
-                      Math.floor(this.props.Dashboard.progress.notarizedhash.length / 2)
-                    ) +
-                    '\t' +
-                    this.props.Dashboard.progress.notarizedhash.substring(
-                      Math.floor(this.props.Dashboard.progress.notarizedhash.length / 2),
-                      this.props.Dashboard.progress.notarizedhash.length
-                    )
-                    : ''
-                  }
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  { translate('INDEX.NOTARIZED') } BTC
-                </td>
-                <td></td>
-              </tr>
-              <tr>
-                <td>{ translate('INDEX.BLOCKS') }</td>
-                <td>
-                  { this.props.Dashboard.progress.blocks }
-                </td>
-              </tr>
-              <tr>
-                <td>{ translate('INDEX.CONNECTIONS') }</td>
-                <td>
-                  { this.props.Dashboard.progress.connections }
-                </td>
-              </tr>
-              <tr>
-                <td>{ translate('INDEX.DIFFICULTY') }</td>
-                <td>
-                  { this.props.Dashboard.progress.difficulty }
-                </td>
-              </tr>
-              <tr>
-                <td>Testnet</td>
-                <td>
-                  { this.props.Dashboard.progress.testnet }
-                </td>
-              </tr>
-              <tr>
-                <td>{ translate('INDEX.PAY_TX_FEE') }</td>
-                <td>
-                  { this.props.Dashboard.progress.paytxfee }
-                </td>
-              </tr>
-              <tr>
-                <td>{ translate('INDEX.RELAY_FEE') }</td>
-                <td>
-                  { this.props.Dashboard.progress.relayfee }
-                </td>
-              </tr>
-              <tr>
-                <td>{ translate('INDEX.ERRORS') }</td>
-                <td>
-                  { this.props.Dashboard.progress.errors }
-                </td>
-              </tr>
+                <tr>
+                  <td>{ translate('INDEX.VERSION') }</td>
+                  <td>
+                    { this.props.Dashboard.progress.KMDversion }
+                  </td>
+                </tr>
+                <tr>
+                  <td>{ translate('INDEX.PROTOCOL_VERSION') }</td>
+                  <td>
+                    { this.props.Dashboard.progress.protocolversion }
+                  </td>
+                </tr>
+                <tr>
+                  <td>{ translate('INDEX.NOTARIZED') }</td>
+                  <td>
+                    { this.props.Dashboard.progress.notarized }
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    { translate('INDEX.NOTARIZED') } Hash
+                  </td>
+                  <td>
+                    { this.props.Dashboard.progress.notarizedhash ?
+                      this.props.Dashboard.progress.notarizedhash.substring(
+                        0,
+                        Math.floor(this.props.Dashboard.progress.notarizedhash.length / 2)
+                      ) +
+                      '\t' +
+                      this.props.Dashboard.progress.notarizedhash.substring(
+                        Math.floor(this.props.Dashboard.progress.notarizedhash.length / 2),
+                        this.props.Dashboard.progress.notarizedhash.length
+                      )
+                      : ''
+                    }
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    { translate('INDEX.NOTARIZED') } BTC
+                  </td>
+                  <td></td>
+                </tr>
+                <tr>
+                  <td>{ translate('INDEX.BLOCKS') }</td>
+                  <td>
+                    { this.props.Dashboard.progress.blocks }
+                  </td>
+                </tr>
+                <tr>
+                  <td>{ translate('INDEX.CONNECTIONS') }</td>
+                  <td>
+                    { this.props.Dashboard.progress.connections }
+                  </td>
+                </tr>
+                <tr>
+                  <td>{ translate('INDEX.DIFFICULTY') }</td>
+                  <td>
+                    { this.props.Dashboard.progress.difficulty }
+                  </td>
+                </tr>
+                <tr>
+                  <td>Testnet</td>
+                  <td>
+                    { this.props.Dashboard.progress.testnet }
+                  </td>
+                </tr>
+                <tr>
+                  <td>{ translate('INDEX.PAY_TX_FEE') }</td>
+                  <td>
+                    { this.props.Dashboard.progress.paytxfee }
+                  </td>
+                </tr>
+                <tr>
+                  <td>{ translate('INDEX.RELAY_FEE') }</td>
+                  <td>
+                    { this.props.Dashboard.progress.relayfee }
+                  </td>
+                </tr>
+                <tr>
+                  <td>{ translate('INDEX.ERRORS') }</td>
+                  <td>
+                    { this.props.Dashboard.progress.errors }
+                  </td>
+                </tr>
               </tbody>
             </table>
           </div>
diff --git a/react/src/components/dashboard/walletsNativeSend/walletsNativeSend.js b/react/src/components/dashboard/walletsNativeSend/walletsNativeSend.js
index df08fb4..3bc67df 100644
--- a/react/src/components/dashboard/walletsNativeSend/walletsNativeSend.js
+++ b/react/src/components/dashboard/walletsNativeSend/walletsNativeSend.js
@@ -67,7 +67,14 @@ class WalletsNativeSend extends React.Component {
         this.props.ActiveCoin.addresses[type].length) {
       return this.props.ActiveCoin.addresses[type].map((address) =>
         <li key={ address.address } className={ address.amount <= 0 ? 'hide' : '' }>
-          <a onClick={ () => this.updateAddressSelection(address.address, type, address.amount) }><i className={ type === 'public' ? 'icon fa-eye' : 'icon fa-eye-slash' }></i>  <span className="text">[ { address.amount } { this.props.ActiveCoin.coin } ]  { type === 'public' ? address.address : address.address.substring(0, 34) + '...' }</span><span className="glyphicon glyphicon-ok check-mark"></span></a>
+          <a onClick={ () => this.updateAddressSelection(address.address, type, address.amount) }>
+            <i className={ 'icon fa-eye' + (type === 'public' ? '' : '-slash') }></i>&nbsp;&nbsp;
+            <span className="text">
+              [ { address.amount } { this.props.ActiveCoin.coin } ]&nbsp;&nbsp;
+              { type === 'public' ? address.address : address.address.substring(0, 34) + '...' }
+            </span>
+            <span className="glyphicon glyphicon-ok check-mark"></span>
+          </a>
         </li>
       );
     } else {
@@ -79,7 +86,7 @@ class WalletsNativeSend extends React.Component {
     if (this.state.sendFrom) {
       return (
         <span>
-          <i className={ this.state.addressType === 'public' ? 'icon fa-eye' : 'icon fa-eye-slash' }></i>
+          <i className={ 'icon fa-eye' + this.state.addressType === 'public' ? '' : '-slash' }></i>
           <span className="text">
             [ { this.state.sendFromAmount } { this.props.ActiveCoin.coin } ]  
             { this.state.sendFrom }
diff --git a/react/src/components/dashboard/walletsNativeSyncProgress/walletsNativeSyncProgress.js b/react/src/components/dashboard/walletsNativeSyncProgress/walletsNativeSyncProgress.js
deleted file mode 100644
index 3d49782..0000000
--- a/react/src/components/dashboard/walletsNativeSyncProgress/walletsNativeSyncProgress.js
+++ /dev/null
@@ -1,147 +0,0 @@
-import React from 'react';
-import { translate } from '../../../translate/translate';
-import {
-  ChainActivationNotificationRender,
-  WalletsNativeSyncProgressRender
-} from './walletsNativeSyncProgress.render';
-
-class WalletsNativeSyncProgress extends React.Component {
-  renderSyncPercentagePlaceholder() {
-    if (this.props.Dashboard.progress &&
-        this.props.Dashboard.progress.blocks > 0 &&
-        this.props.Dashboard.progress.longestchain === 0) {
-      return (
-        <div className="progress-bar progress-bar-info progress-bar-striped active full-width font-size-80-percent">
-          <span className="full-width">{ translate('INDEX.SYNC_ERR_LONGESTCHAIN') }</span>
-        </div>
-      );
-    } else if (this.props.Dashboard.progress && this.props.Dashboard.progress.blocks === 0) {
-      return (
-        <div className="progress-bar progress-bar-info progress-bar-striped active full-width font-size-80-percent">
-          <span className="full-width">{ translate('INDEX.SYNC_ERR_BLOCKS') }</span>
-        </div>
-      );
-    } else {
-      if (this.props.Dashboard.progress &&
-          this.props.Dashboard.progress.blocks) {
-        const 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 font-size-80-percent"
-            style={{ width: syncPercentage }}>
-            <span style={{ width: syncPercentage }}>{ syncPercentage }</span> | { this.props.Dashboard.progress.blocks } / { this.props.Dashboard.progress.longestchain } | { translate('INDEX.CONNECTIONS') }: { this.props.Dashboard.progress.connections }
-          </div>
-        );
-      } else {
-        return (
-          <div
-            className="progress-bar progress-bar-info progress-bar-striped active font-size-80-percent"
-            style={{ width: '100%' }}>
-            <span style={{ width: '100%' }}>{ translate('INDEX.LOADING_BLOCKS') }</span>
-          </div>
-        );
-      }
-    }
-  }
-
-  renderActivatingBestChainProgress() {
-    if (this.props.Settings &&
-        this.props.Settings.debugLog) {
-      if (this.props.Settings.debugLog.indexOf('UpdateTip') > -1 &&
-          !this.props.Dashboard.progress &&
-          !this.props.Dashboard.progress.blocks) {
-        const temp = this.props.Settings.debugLog.split(' ');
-        let currentBestChain;
-        let currentProgress;
-
-        for (let i = 0; i < temp.length; i++) {
-          if (temp[i].indexOf('height=') > -1) {
-            currentBestChain = temp[i].replace('height=', '');
-          }
-          if (temp[i].indexOf('progress=') > -1) {
-            currentProgress = Number(temp[i].replace('progress=', '')) * 100;
-          }
-        }
-
-        // fallback to local data if remote node is inaccessible
-        if (this.props.Dashboard.progress.remoteKMDNode &&
-            !this.props.Dashboard.progress.remoteKMDNode.blocks) {
-          return (
-            `: ${currentProgress}% (activating)`
-          );
-        } else {
-          if (this.props.Dashboard.progress.remoteKMDNode &&
-              this.props.Dashboard.progress.remoteKMDNode.blocks) {
-            return(
-              `: ${Math.floor(currentBestChain * 100 / this.props.Dashboard.progress.remoteKMDNode.blocks)}% (${ translate('INDEX.BLOCKS_SM') } ${currentBestChain} / ${this.props.Dashboard.progress.remoteKMDNode.blocks})`
-            );
-          }
-        }
-      } else if (
-          this.props.Settings.debugLog.indexOf('Still rescanning') > -1 &&
-          !this.props.Dashboard.progress ||
-          !this.props.Dashboard.progress.blocks
-        ) {
-        const temp = this.props.Settings.debugLog.split(' ');
-        let currentProgress;
-
-        for (let i = 0; i < temp.length; i++) {
-          if (temp[i].indexOf('Progress=') > -1) {
-            currentProgress = (Number(temp[i].replace('Progress=', '')) * 100).toFixed(2);
-          }
-        }
-
-        return (
-          `: ${currentProgress}% (${ translate('INDEX.RESCAN_SM') })`
-        );
-      } else if (
-          this.props.Settings.debugLog.indexOf('LoadExternalBlockFile:') > -1 ||
-          this.props.Settings.debugLog.indexOf('Reindexing block file') > -1 
-        ) {
-        return (
-          `: (${ translate('INDEX.REINDEX') })`
-        );
-      } else {
-        return (
-          <span> ({ translate('INDEX.DL_BLOCKS') })</span>
-        );
-      }
-    }
-  }
-
-  renderLB(_translationID) {
-    const _translationComponents = translate(_translationID).split('<br>');
-
-    return _translationComponents.map((_translation) =>
-      <span>
-        { _translation }
-        <br />
-      </span>
-    );
-  }
-
-  renderChainActivationNotification() {
-    return ChainActivationNotificationRender.call(this);
-
-    /* if (this.props.Dashboard.progress) {
-      if ((!this.props.Dashboard.progress.blocks && !this.props.Dashboard.progress.longestchain) ||
-          (this.props.Dashboard.progress.blocks < this.props.Dashboard.progress.longestchain)) {
-        return ChainActivationNotificationRender.call(this);
-      }
-    } else {
-      return null;
-    } */
-  }
-
-  render() {
-    if (this.props &&
-        this.props.Dashboard) {
-      return WalletsNativeSyncProgressRender.call(this);
-    }
-
-    return null;
-  }
-}
-
-export default WalletsNativeSyncProgress;
diff --git a/react/src/components/dashboard/walletsNativeTxHistory/walletsNativeTxHistory.js b/react/src/components/dashboard/walletsNativeTxHistory/walletsNativeTxHistory.js
index 935c907..f26611b 100644
--- a/react/src/components/dashboard/walletsNativeTxHistory/walletsNativeTxHistory.js
+++ b/react/src/components/dashboard/walletsNativeTxHistory/walletsNativeTxHistory.js
@@ -141,7 +141,7 @@ 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' }>
+        <li className={ 'paginate_button' + this.state.activePage === i + 1 ? ' active' : '' }>
           <a
             key={ `${i}-pagination` }
             onClick={ this.state.activePage !== (i + 1) ? () => this.updateCurrentPage(i + 1) : null }>{ i + 1 }</a>
diff --git a/react/src/components/dashboard/walletsNativeTxHistory/walletsNativeTxHistory.render.js b/react/src/components/dashboard/walletsNativeTxHistory/walletsNativeTxHistory.render.js
index e0a72fc..233aac2 100644
--- a/react/src/components/dashboard/walletsNativeTxHistory/walletsNativeTxHistory.render.js
+++ b/react/src/components/dashboard/walletsNativeTxHistory/walletsNativeTxHistory.render.js
@@ -39,12 +39,11 @@ export const PaginationRender = function(paginationStart, paginationEnd, paginat
       <div className="col-sm-7">
         <div className="dataTables_paginate paging_simple_numbers">
           <ul className="pagination">
-            <li className={ this.state.activePage
-            === 1 ? 'paginate_button previous disabled' : 'paginate_button previous' }>
+            <li className={ 'paginate_button previous' + (this.state.activePage === 1 ? ' disabled' : '') }>
               <a onClick={ () => this.updateCurrentPage(this.state.activePage - 1) }>{ translate('INDEX.PREVIOUS') }</a>
             </li>
             { this.renderPaginationItems() }
-            <li className={ paginationNextState ? 'paginate_button next disabled' : 'paginate_button next' }>
+            <li className={ 'paginate_button next' + (paginationNextState ? ' disabled' : '') }>
               <a onClick={ () => this.updateCurrentPage(this.state.activePage + 1) }>{ translate('INDEX.NEXT') }</a>
             </li>
           </ul>
diff --git a/react/src/components/dashboard/walletsNav/walletsNav.render.js b/react/src/components/dashboard/walletsNav/walletsNav.render.js
index 9a5374d..d740cea 100644
--- a/react/src/components/dashboard/walletsNav/walletsNav.render.js
+++ b/react/src/components/dashboard/walletsNav/walletsNav.render.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { translate } from '../../../translate/translate';
 
-export const WalletsNavNoWalletRender = function () {
+export const WalletsNavNoWalletRender = function() {
   return (
     <div>
       <div className="col-xs-12 padding-top-20">
@@ -20,11 +20,11 @@ export const WalletsNavNoWalletRender = function () {
   );
 };
 
-export const WalletsNavWithWalletRender = function () {
+export const WalletsNavWithWalletRender = function() {
   return (
     <div>
       <div
-        className={ 'page-header page-header-bordered header-easydex ' + (this.state.nativeOnly ? 'padding-bottom-40' : 'padding-bottom-20') }
+        className={ 'page-header page-header-bordered header-easydex padding-bottom-' + (this.state.nativeOnly ? '40' : '20') }
         id="header-dashboard"
         style={{ marginBottom: this.props.ActiveCoin.mode === 'basilisk' ? '30px' : '0' }}>
         <ol className={ this.state.nativeOnly ? 'hide' : 'breadcrumb' }>
diff --git a/react/src/components/dashboard/walletsNotariesList/walletsNotariesList.render.js b/react/src/components/dashboard/walletsNotariesList/walletsNotariesList.render.js
index aa64dee..4f45cc4 100644
--- a/react/src/components/dashboard/walletsNotariesList/walletsNotariesList.render.js
+++ b/react/src/components/dashboard/walletsNotariesList/walletsNotariesList.render.js
@@ -3,7 +3,7 @@ import { translate } from '../../../translate/translate';
 import Tree, { TreeNode } from 'rc-tree';
 import { animation } from '../../../util/rc-tree-animate';
 
-export const NotariesListRender = function (node, index) {
+export const NotariesListRender = function(node, index) {
   return (
     <TreeNode
       title={ `Node ${index}` }
@@ -21,7 +21,7 @@ export const NotariesListRender = function (node, index) {
   );
 };
 
-export const WalletsNotariesListRender = function () {
+export const WalletsNotariesListRender = function() {
   return (
     <div onKeyDown={ (event) => this.handleKeydown(event) }>
       <div
diff --git a/react/src/components/dashboard/walletsTxInfo/walletsTxInfo.render.js b/react/src/components/dashboard/walletsTxInfo/walletsTxInfo.render.js
index 983060d..bd7ea05 100644
--- a/react/src/components/dashboard/walletsTxInfo/walletsTxInfo.render.js
+++ b/react/src/components/dashboard/walletsTxInfo/walletsTxInfo.render.js
@@ -43,7 +43,7 @@ const WalletsTxInfoRender = function(txInfo) {
                 </ul>
                 <div className="panel-body">
                   <div className="tab-content">
-                    <div className={ this.state.activeTab === 0 ? 'tab-pane active' : 'tab-pane' }>
+                    <div className={ 'tab-pane' + (this.state.activeTab === 0 ? ' active' : '') }>
                       <table className="table table-striped">
                         <tbody>
                         <tr>
@@ -119,7 +119,7 @@ const WalletsTxInfoRender = function(txInfo) {
                       </table>
                     </div>
 
-                    <div className={ this.state.activeTab === 1 ? 'tab-pane active' : 'tab-pane' }>
+                    <div className={ 'tab-pane' + (this.state.activeTab === 1 ? ' active' : '') }>
                       <table className="table table-striped">
                         <tbody>
                         <tr>
@@ -137,7 +137,7 @@ const WalletsTxInfoRender = function(txInfo) {
                         </tbody>
                       </table>
                     </div>
-                    <div className={ this.state.activeTab === 2 ? 'tab-pane active' : 'tab-pane' }>
+                    <div className={ 'tab-pane' + (this.state.activeTab === 2 ? ' active' : '') }>
                       <textarea
                         className="full-width height-170"
                         rows="10"
@@ -146,7 +146,7 @@ const WalletsTxInfoRender = function(txInfo) {
                         disabled></textarea>
                     </div>
 
-                    <div className={ this.state.activeTab === 3 ? 'tab-pane active' : 'tab-pane' }>
+                    <div className={ 'tab-pane' + (this.state.activeTab === 3 ? ' active' : '') }>
                       <textarea
                         className="full-width height-400"
                         rows="40"
diff --git a/react/src/components/login/login.js b/react/src/components/login/login.js
index a23460d..44dae9e 100644
--- a/react/src/components/login/login.js
+++ b/react/src/components/login/login.js
@@ -116,19 +116,19 @@ class Login extends React.Component {
 
   componentWillReceiveProps(props) {
     if (props &&
-      props.Main &&
-      props.Main.isLoggedIn) {
-      this.setState({
-        display: false,
-      });
+        props.Main &&
+        props.Main.isLoggedIn) {
+        this.setState({
+          display: false,
+        });
     }
 
     if (props &&
-      props.Main &&
-      !props.Main.isLoggedIn) {
-      this.setState({
-        display: true,
-      });
+        props.Main &&
+        !props.Main.isLoggedIn) {
+        this.setState({
+          display: true,
+        });
 
       if (!this.props.Interval.interval.activeCoins) {
         const _iguanaActiveCoins = setInterval(() => {
diff --git a/react/src/components/login/login.render.js b/react/src/components/login/login.render.js
index 1cb06e5..5d8c7c0 100644
--- a/react/src/components/login/login.render.js
+++ b/react/src/components/login/login.render.js
@@ -74,7 +74,7 @@ const LoginRender = function () {
                 onKeyDown={ (event) => this.handleKeydown(event) }
                 value={ this.state.loginPassphrase }></textarea>
               <i
-                className={ !this.state.seedInputVisibility ? 'seed-toggle fa fa-eye-slash' : 'seed-toggle fa fa-eye' }
+                className={ 'seed-toggle fa fa-eye' +  (!this.state.seedInputVisibility ? '-slash' : '') }
                 onClick={ this.toggleSeedInputVisibility }></i>
               <label
                 className="floating-label"