From 7ef710637b56495551079fbcfbc777be87696c74 Mon Sep 17 00:00:00 2001
From: petitPapillon <ivana.trajanovska@yahoo.com>
Date: Mon, 5 Jun 2017 23:09:58 +0200
Subject: [PATCH] Merge redux into decouple-jsx-out-of-js

---
 .../src/components/addcoin/addcoin.render.js  | 21 ++---
 .../addcoin/coin-selectors.render.js          | 50 ++++++-----
 .../src/components/dashboard/atomic.render.js | 13 +--
 .../components/dashboard/coinTile.render.js   |  2 +-
 .../dashboard/coinTileItem.render.js          |  6 +-
 .../src/components/dashboard/jumblr.render.js | 82 ++++++-------------
 .../src/components/dashboard/navbar.render.js | 40 ++++-----
 .../dashboard/receiveCoin.render.js           | 23 +++---
 react/src/components/login/login.render.js    | 26 ++----
 .../components/login/swall-modal.render.js    |  2 +-
 10 files changed, 102 insertions(+), 163 deletions(-)

diff --git a/react/src/components/addcoin/addcoin.render.js b/react/src/components/addcoin/addcoin.render.js
index 491aa51..e686803 100644
--- a/react/src/components/addcoin/addcoin.render.js
+++ b/react/src/components/addcoin/addcoin.render.js
@@ -4,21 +4,15 @@ import { translate } from '../../translate/translate';
 const AddCoinRender = function() {
   return (
     <div onKeyDown={ (event) => this.handleKeydown(event) }>
-      <div
-        className={ 'modal modal-3d-sign add-coin-modal ' + this.state.modalClassName }
-        id="AddCoinDilogModel-login"
-        aria-hidden="true"
-        aria-labelledby="AddCoinDilogModel-login"
-        role="dialog"
-        tabIndex="-1">
+      <div className={ 'modal modal-3d-sign add-coin-modal ' + this.state.modalClassName }>
         <div className="modal-dialog modal-center modal-lg">
           <div className="modal-content">
             <div className="modal-header bg-orange-a400 wallet-send-header">
               <button
                 type="button"
                 className="close white"
-                aria-label="Close" onClick={ this.dismiss }>
-                <span aria-hidden="true">×</span>
+                onClick={ this.dismiss }>
+                <span>×</span>
               </button>
               <h4 className="modal-title white">{ translate('INDEX.SELECT_A_COIN') }</h4>
             </div>
@@ -41,7 +35,6 @@ const AddCoinRender = function() {
                 <button
                   type="button"
                   className="btn btn-primary col-sm-4 float-none"
-                  id="mdl_addcoin_done_btn-login"
                   onClick={ this.activateAllCoins }>{ translate('ADD_COIN.ACTIVATE_ALL') }</button>
               </div>
               <div className="col-sm-12">
@@ -54,11 +47,11 @@ const AddCoinRender = function() {
                 <p>
                   <strong>{ translate('INDEX.NATIVE_MODE') }:</strong> { translate('INDEX.NATIVE_MODE_DESC1') } <strong>Komodo Daemon</strong> { translate('INDEX.NATIVE_MODE_DESC2') } <i>Iguana Daemon</i> { translate('INDEX.NATIVE_MODE_DESC3') }.
                 </p>
-                <div className="alert alert-icon alert-primary" role="alert">
-                  <button type="button" className="close" aria-label="Close">
-                    <span aria-hidden="true">×</span>
+                <div className="alert alert-icon alert-primary">
+                  <button type="button" className="close">
+                    <span>×</span>
                   </button>
-                  <i className="icon md-info-outline" aria-hidden="true"></i> <strong>{ translate('INDEX.NATIVE_MODE') }</strong> { translate('INDEX.NATIVE_MODE_DESC4') } <strong>{ translate('INDEX.NATIVE_MODE_DESC5') }</strong>, <i>{ translate('INDEX.NATIVE_MODE_DESC5') }</i>.
+                  <i className="icon md-info-outline"></i> <strong>{ translate('INDEX.NATIVE_MODE') }</strong> { translate('INDEX.NATIVE_MODE_DESC4') } <strong>{ translate('INDEX.NATIVE_MODE_DESC5') }</strong>, <i>{ translate('INDEX.NATIVE_MODE_DESC5') }</i>.
                 </div>
               </div>
             </div>
diff --git a/react/src/components/addcoin/coin-selectors.render.js b/react/src/components/addcoin/coin-selectors.render.js
index e0b20e1..1c98a18 100644
--- a/react/src/components/addcoin/coin-selectors.render.js
+++ b/react/src/components/addcoin/coin-selectors.render.js
@@ -8,14 +8,13 @@ import AddCoinOptionsACFiat from '../addcoin/addcoinOptionsACFiat';
 const CoinSelectorsRender = function(item, coin, i) {
   return (
     <div
-      className={ this.hasMoreThanOneCoin() > 1 ? 'multi' : 'single' }
+      className={ this.hasMoreThanOneCoin() ? 'multi' : 'single' }
       key={ `add-coin-${i}` }>
       <div className="col-sm-8">
         <div className="form-group">
           <select
             className="form-control form-material"
             name="selectedCoin"
-            id="addcoin_select_coin_mdl_options-login"
             value={ coin }
             onChange={ (event) => this.updateSelectedCoin(event, i) }
             autoFocus>
@@ -29,8 +28,7 @@ const CoinSelectorsRender = function(item, coin, i) {
       <div className={ this.hasMoreThanOneCoin() ? 'hide' : 'col-sm-4' }>
         <button
           type="button"
-          className="btn btn-primary mdl_addcoin_done_btn-login"
-          id="mdl_addcoin_done_btn-login"
+          className="btn btn-primary"
           onClick={ () => this.activateCoin(i) }
           disabled={ item.mode === -2 }>{ translate('INDEX.ACTIVATE_COIN') }</button>
       </div>
@@ -42,23 +40,23 @@ const CoinSelectorsRender = function(item, coin, i) {
             name={ `mode-${i}` }
             id={ `addcoin_mdl_full_mode_login-${i}` }
             disabled={ item.fullMode.disabled }
-            checked={ item.fullMode.checked }/>
+            checked={ item.fullMode.checked } />
           <label
             htmlFor={ `addcoin_mdl_full_mode_login-${i}` }
             onClick={ () => this.updateSelectedMode('1', i) }
-            style={{pointerEvents: item.fullMode.disabled ? 'none' : 'all'}}>
+            style={{ pointerEvents: item.fullMode.disabled ? 'none' : 'all' }}>
                 <span
                   className="labelauty-unchecked-image"
-                  style={{display: item.fullMode.checked ? 'none' : 'inline-block'}}></span>
+                  style={{ display: item.fullMode.checked ? 'none' : 'inline-block' }}></span>
             <span
               className="labelauty-unchecked"
-              style={{display: item.fullMode.checked ? 'none' : 'inline-block'}}>{ translate('INDEX.FULL_MODE') }</span>
+              style={{ display: item.fullMode.checked ? 'none' : 'inline-block' }}>{ translate('INDEX.FULL_MODE') }</span>
             <span
               className="labelauty-checked-image"
-              style={{display: item.fullMode.checked ? 'inline-block' : 'none'}}></span>
+              style={{ display: item.fullMode.checked ? 'inline-block' : 'none' }}></span>
             <span
               className="labelauty-checked"
-              style={{display: item.fullMode.checked ? 'inline-block' : 'none'}}>{ translate('INDEX.FULL_MODE') }</span>
+              style={{ display: item.fullMode.checked ? 'inline-block' : 'none' }}>{ translate('INDEX.FULL_MODE') }</span>
           </label>
         </div>
         <div className="form-group col-lg-4 col-md-4 col-sm-6 col-xs-6 style-addcoin-lbl-mdl-login">
@@ -68,23 +66,23 @@ const CoinSelectorsRender = function(item, coin, i) {
             name={ `mode-${i}` }
             id={ `addcoin_mdl_basilisk_mode_login-${i}` }
             disabled={ item.basiliskMode.disabled }
-            checked={ item.basiliskMode.checked }/>
+            checked={ item.basiliskMode.checked } />
           <label
             htmlFor={ `addcoin_mdl_basilisk_mode_login-${i}` }
             onClick={ () => this.updateSelectedMode('0', i) }
-            style={{pointerEvents: item.basiliskMode.disabled ? 'none' : 'all'}}>
+            style={{ pointerEvents: item.basiliskMode.disabled ? 'none' : 'all' }}>
                 <span
                   className="labelauty-unchecked-image"
-                  style={{display: item.basiliskMode.checked ? 'none' : 'inline-block'}}></span>
+                  style={{ display: item.basiliskMode.checked ? 'none' : 'inline-block' }}></span>
             <span
               className="labelauty-unchecked"
-              style={{display: item.basiliskMode.checked ? 'none' : 'inline-block'}}>{ translate('INDEX.BASILISK_MODE') }</span>
+              style={{ display: item.basiliskMode.checked ? 'none' : 'inline-block' }}>{ translate('INDEX.BASILISK_MODE') }</span>
             <span
               className="labelauty-checked-image"
-              style={{display: item.basiliskMode.checked ? 'inline-block' : 'none'}}></span>
+              style={{ display: item.basiliskMode.checked ? 'inline-block' : 'none' }}></span>
             <span
               className="labelauty-checked"
-              style={{display: item.basiliskMode.checked ? 'inline-block' : 'none'}}>{ translate('INDEX.BASILISK_MODE') }</span>
+              style={{ display: item.basiliskMode.checked ? 'inline-block' : 'none' }}>{ translate('INDEX.BASILISK_MODE') }</span>
           </label>
         </div>
         <div className="form-group col-lg-4 col-md-4 col-sm-12 col-xs-12 style-addcoin-lbl-mdl-login">
@@ -94,31 +92,30 @@ const CoinSelectorsRender = function(item, coin, i) {
             name={ `mode-${i}` }
             id={ `addcoin_mdl_native_mode_login-${i}` }
             disabled={ item.nativeMode.disabled }
-            checked={ item.nativeMode.checked }/>
+            checked={ item.nativeMode.checked } />
           <label
             htmlFor={ `addcoin_mdl_native_mode_login-${i}` }
             onClick={ () => this.updateSelectedMode('-1', i) }
-            style={{pointerEvents: item.nativeMode.disabled ? 'none' : 'all'}}>
+            style={{ pointerEvents: item.nativeMode.disabled ? 'none' : 'all' }}>
                 <span
                   className="labelauty-unchecked-image"
-                  style={{display: item.nativeMode.checked ? 'none' : 'inline-block'}}></span>
+                  style={{ display: item.nativeMode.checked ? 'none' : 'inline-block' }}></span>
             <span
               className="labelauty-unchecked"
-              style={{display: item.nativeMode.checked ? 'none' : 'inline-block'}}>{ translate('INDEX.NATIVE_MODE') }</span>
+              style={{ display: item.nativeMode.checked ? 'none' : 'inline-block' }}>{ translate('INDEX.NATIVE_MODE') }</span>
             <span
               className="labelauty-checked-image"
-              style={{display: item.nativeMode.checked ? 'inline-block' : 'none'}}></span>
+              style={{ display: item.nativeMode.checked ? 'inline-block' : 'none' }}></span>
             <span
               className="labelauty-checked"
-              style={{display: item.nativeMode.checked ? 'inline-block' : 'none'}}>{ translate('INDEX.NATIVE_MODE') }</span>
+              style={{ display: item.nativeMode.checked ? 'inline-block' : 'none' }}>{ translate('INDEX.NATIVE_MODE') }</span>
           </label>
         </div>
       </div>
       <div className={ this.hasMoreThanOneCoin() && i !== 0 ? 'col-sm-1' : 'hide' }>
         <button
           type="button"
-          className="btn btn-primary mdl_addcoin_done_btn-login"
-          id="mdl_addcoin_done_btn-login"
+          className="btn btn-primary"
           onClick={ () => this.removeCoin(i) }>
           <i className="fa fa-trash-o"></i>
         </button>
@@ -127,11 +124,10 @@ const CoinSelectorsRender = function(item, coin, i) {
         <div className="toggle-box padding-top-3 padding-bottom-10">
               <span className="pointer">
                 <label className="switch">
-                  <input type="checkbox" checked={ item.syncOnly }/>
+                  <input type="checkbox" checked={ item.syncOnly } />
                   <div className="slider" onClick={ () => this.toggleSyncOnlyMode(i) }></div>
                 </label>
-                <div className="toggle-label"
-                     onClick={ () => this.toggleSyncOnlyMode(i) }>{ translate('ADD_COIN.SYNC_ONLY') }</div>
+                <div className="toggle-label" onClick={ () => this.toggleSyncOnlyMode(i) }>{ translate('ADD_COIN.SYNC_ONLY') }</div>
               </span>
         </div>
       </div>
diff --git a/react/src/components/dashboard/atomic.render.js b/react/src/components/dashboard/atomic.render.js
index b29440a..7b352ad 100644
--- a/react/src/components/dashboard/atomic.render.js
+++ b/react/src/components/dashboard/atomic.render.js
@@ -8,8 +8,8 @@ import AddCoinOptionsACFiat from '../addcoin/addcoinOptionsACFiat';
 const AtomicRender = function () {
   return (
     <div className="page margin-left-0">
-      <div className="page-content" id="section-iguana-atomic-explorer">
-        <div className="row" id="atomic-explorer">
+      <div className="page-content">
+        <div className="row">
           <div className="col-xlg-12 col-md-12">
             <h4 className="font-size-14 text-uppercase">Atomic Explorer</h4>
             <div className="panel panel-bordered">
@@ -17,9 +17,7 @@ const AtomicRender = function () {
                 <div className="col-sm-4 col-xs-12">
                   <div className="form-group">
                     <select
-                      className="form-control
-                        form-material"
-                      id="atomic_explorer_select_coin_options"
+                      className="form-control form-material"
                       onChange={ this.updateSelectedCoin }>
                       <option value="-">{ translate('INDEX.SELECT_COIN') }</option>
                       <AddCoinOptionsCrypto />
@@ -31,7 +29,6 @@ const AtomicRender = function () {
                 <div className="col-sm-4 col-xs-12 text-align-center">
                   <select
                     className="form-control form-material"
-                    id="atomic_explorer_select_command_options"
                     onChange={ this.updateSelectedAPI }>
                     <option value="">-{ translate('ATOMIC.SELECT_COMMAND') }-</option>
                     { this.renderAtomicOptions() }
@@ -41,7 +38,6 @@ const AtomicRender = function () {
                   <input
                     type="text"
                     className="form-control"
-                    id="atomic_explorer_input_data"
                     name="atomic_explorer_input_data"
                     placeholder={ translate('ATOMIC.INPUT_PLACEHOLDER') }
                     onChange={ this.updateInput } />
@@ -50,7 +46,6 @@ const AtomicRender = function () {
                   <button
                     type="button"
                     className="btn btn-primary waves-effect waves-light"
-                    id="atomic_explorer_getcoinpeers_btn"
                     onClick={ this.getAtomicData }>{ translate('ATOMIC.SUBMIT') }</button>
                 </div>
               </div>
@@ -63,7 +58,7 @@ const AtomicRender = function () {
               </div>
               <div className="panel-body">
                 <div className="tab-content">
-                  <pre id="atomic-explorer-commands-output">{ this.state.output }</pre>
+                  <pre>{ this.state.output }</pre>
                 </div>
               </div>
             </div>
diff --git a/react/src/components/dashboard/coinTile.render.js b/react/src/components/dashboard/coinTile.render.js
index a772a58..fd92159 100644
--- a/react/src/components/dashboard/coinTile.render.js
+++ b/react/src/components/dashboard/coinTile.render.js
@@ -16,7 +16,7 @@ const CoinTileRender = function () {
                 <button type="submit" className="input-search-btn">
                   <i className="icon md-search"></i>
                 </button>
-                <input type="text" className="form-control" name="" placeholder="Search..." disabled />
+                <input type="text" className="form-control" placeholder="Search..." disabled />
               </div>
             </div>
             <h3 className="panel-title">{ translate('INDEX.ACTIVE_COINS') }</h3>
diff --git a/react/src/components/dashboard/coinTileItem.render.js b/react/src/components/dashboard/coinTileItem.render.js
index fadb72b..be4391c 100644
--- a/react/src/components/dashboard/coinTileItem.render.js
+++ b/react/src/components/dashboard/coinTileItem.render.js
@@ -7,14 +7,14 @@ const CoinTileItemRender = function () {
     <div className="list-group-item col-xlg-6 col-lg-12 wallet-widgets-info pointer">
       <div className={ this.props.ActiveCoin.coin === item.coin ? 'widget widget-shadow active' : 'widget widget-shadow' }>
         <div
-          className="widget-content text-center bg-white padding-20 edexcoin-logo"
+          className="widget-content text-center bg-white padding-20"
           onClick={ () => this.dashboardChangeActiveCoin(item.coin, item.mode) }>
-          <a className="avatar margin-bottom-5" id="edexcoin-logo">
+          <a className="avatar margin-bottom-5">
             <img
               className="img-responsive"
               src={ `assets/images/cryptologo/${item.coinlogo}.png` }
               alt={ item.coinname }/>
-            <span className={ `badge up badge-${item.modecolor}` } id="basfull">{ item.modecode }</span>
+            <span className={ `badge up badge-${item.modecolor}` }>{ item.modecode }</span>
           </a>
           <div className="coin-name">{ item.coinname } ({ item.coinlogo.toUpperCase() })</div>
         </div>
diff --git a/react/src/components/dashboard/jumblr.render.js b/react/src/components/dashboard/jumblr.render.js
index 6acc630..96a932d 100644
--- a/react/src/components/dashboard/jumblr.render.js
+++ b/react/src/components/dashboard/jumblr.render.js
@@ -7,23 +7,23 @@ const JumblrRender = function () {
   return (
     <div className="page margin-left-0">
       <WalletsHeader activeSection="jumblr" />
-      <div className="page-content margin-top-30" id="section-jumblr">
-        <div className="row" id="jumblr_dashboard">
-          <div className="col-xs-12" id="jumblr_testing_alert">
+      <div className="page-content margin-top-30">
+        <div className="row">
+          <div className="col-xs-12">
             <div className="alert alert-danger">
               <button type="button" className="close">
                 <span>×</span>
               </button>
               <span className="jumblr-header">
-                  <i className="icon fa-paw" aria-hidden="true"></i> { translate('JUMBLR.NOTICE') }
+                  <i className="icon fa-paw"></i> { translate('JUMBLR.NOTICE') }
                 </span>
               <br />
               { translate('JUMBLR.DESCRIPTION') }
             </div>
           </div>
 
-          <div className="col-xs-12" id="jumblr_no_native_kmd_alert">
-            <div className="alert alert-info alert-dismissible" role="alert">
+          <div className="col-xs-12">
+            <div className="alert alert-info alert-dismissible">
               <button type="button" className="close">
                 <span>×</span>
               </button>
@@ -42,17 +42,14 @@ const JumblrRender = function () {
           </div>
 
           <div className="col-xs-12">
-            <div className="panel-group" id="jumber_quick_info">
+            <div className="panel-group">
               <div className="panel">
                 <div
                   className="panel-heading"
-                  id="jumblr_security_notes"
                   onClick={ () => this.openTab(0) }>
                   <a className={ this.state.activeTab === 0 ? 'panel-title' : 'panel-title collapsed' }>{ translate('JUMBLR.FEW_SECURITY_NOTES') }</a>
                 </div>
-                <div
-                  className={ this.state.activeTab === 0 ? 'panel-collapse collapse in' : 'panel-collapse collapse' }
-                  id="jumblr_security_notes_1">
+                <div className={ this.state.activeTab === 0 ? 'panel-collapse collapse in' : 'panel-collapse collapse' }>
                   <div className="panel-body">
                     <ul>
                       <li>{ translate('JUMBLR.FEW_SECURITY_NOTES_DESC1') }</li>
@@ -67,13 +64,10 @@ const JumblrRender = function () {
               <div className="panel">
                 <div
                   className="panel-heading"
-                  id="jumblr_access_funds"
                   onClick={ () => this.openTab(1) }>
                   <a className={ this.state.activeTab === 1 ? 'panel-title' : 'panel-title collapsed' }>{ translate('JUMBLR.ACCESS_JUMBLR_FUNDS') }</a>
                 </div>
-                <div
-                  className={ this.state.activeTab === 1 ? 'panel-collapse collapse in' : 'panel-collapse collapse' }
-                  id="jumblr_access_funds_2">
+                <div className={ this.state.activeTab === 1 ? 'panel-collapse collapse in' : 'panel-collapse collapse' }>
                   <div className="panel-body">
                     <p>{ translate('JUMBLR.ADDRESS_ACCESSIBLE_EASILY') }</p>
                     <ul>
@@ -102,12 +96,10 @@ const JumblrRender = function () {
                 </div>
               </div>
               <div className="panel">
-                <div className="panel-heading" id="jumblr_using_jumblr" onClick={ () => this.openTab(2) }>
+                <div className="panel-heading" onClick={ () => this.openTab(2) }>
                   <a className={ this.state.activeTab === 2 ? 'panel-title' : 'panel-title collapsed' }>{ translate('JUMBLR.USING_JUMBLR') }</a>
                 </div>
-                <div
-                  className={ this.state.activeTab === 2 ? 'panel-collapse collapse in' : 'panel-collapse collapse' }
-                  id="jumblr_using_jumblr_3">
+                <div className={ this.state.activeTab === 2 ? 'panel-collapse collapse in' : 'panel-collapse collapse' }>
                   <div className="panel-body">
                     <ul>
                       <li>{ translate('JUMBLR.RUN_KMD') }</li>
@@ -131,54 +123,46 @@ const JumblrRender = function () {
 
           <div className="col-xlg-12 col-md-12">
             <h4 className="font-size-14 text-uppercase">{ translate('JUMBLR.JADDR') }</h4>
-            <div className="panel" id="projects">
+            <div className="panel">
               <div className="table-responsive">
                 <table className="table table-striped">
                   <tbody>
                   <tr>
                     <td width="20%">{ translate('JUMBLR.BTC_DEPOSIT') }</td>
                     <td>
-                      <span id="jumblr_BTCdeposit"></span>
+                      <span></span>
                     </td>
                   </tr>
                   <tr>
                     <td>BTC Jumblr</td>
                     <td>
-                      <button type="button" className="btn btn-animate btn-animate-side btn-default btn-sm waves-effect waves-light jumblr_show_hide_addr_btc_btn">
+                      <button type="button" className="btn btn-animate btn-animate-side btn-default btn-sm waves-effect waves-light">
                             <span>
                               <i className="icon fa-eye"></i> { translate('JUMBLR.SHOW_HIDE') }
                             </span>
                       </button>
                       <span
                         className="label label-lg label-outline label-success"
-                        id="jumblr_BTCjumblr"
                         style={{ display: 'none' }}></span>
-                      <span
-                        className="label label-lg label-outline label-default"
-                        id="jumblr_BTCjumblr_showhide">{ translate('JUMBLR.HIDDEN') }</span>
+                      <span className="label label-lg label-outline label-default">{ translate('JUMBLR.HIDDEN') }</span>
                     </td>
                   </tr>
                   <tr>
                     <td>{ translate('JUMBLR.KMD_DEPOSIT') }</td>
-                    <td>
-                      <span id="jumblr_KMDdeposit"></span>
-                    </td>
+                    <td></td>
                   </tr>
                   <tr>
                     <td>KMD Jumblr</td>
                     <td>
-                      <button type="button" className="btn btn-animate btn-animate-side btn-default btn-sm waves-effect waves-light jumblr_show_hide_addr_kmd_btn">
+                      <button type="button" className="btn btn-animate btn-animate-side btn-default btn-sm waves-effect waves-light">
                             <span>
-                              <i className="icon fa-eye" aria-hidden="true"></i> { translate('JUMBLR.SHOW_HIDE') }
+                              <i className="icon fa-eye"></i> { translate('JUMBLR.SHOW_HIDE') }
                             </span>
                       </button>
                       <span
                         className="label label-lg label-outline label-success"
-                        id="jumblr_KMDjumblr"
                         style={{ display: 'none' }}></span>
-                      <span
-                        className="label label-lg label-outline label-default"
-                        id="jumblr_KMDjumblr_showhide">{ translate('JUMBLR.HIDDEN') }</span>
+                      <span className="label label-lg label-outline label-default">{ translate('JUMBLR.HIDDEN') }</span>
                     </td>
                   </tr>
                   </tbody>
@@ -189,51 +173,39 @@ const JumblrRender = function () {
 
           <div className="col-xlg-12 col-md-12">
             <h4 className="font-size-14 text-uppercase">{ translate('JUMBLR.JSTATUS') }</h4>
-            <div className="panel" id="projects">
+            <div className="panel">
               <div className="table-responsive">
                 <table className="table table-striped">
                   <tbody>
                   <tr>
                     <td width="20%">{ translate('JUMBLR.RESULT') }</td>
                     <td>
-                      <span id="jumblr_status_result" className="label label-success"></span>
+                      <span className="label label-success"></span>
                     </td>
                   </tr>
                   <tr>
                     <td>{ translate('JUMBLR.DEPOSITED') }</td>
-                    <td>
-                      <span id="jumblr_status_deposited"></span>
-                    </td>
+                    <td></td>
                   </tr>
                   <tr>
                     <td>{ translate('JUMBLR.PUB_TO_PRIV') }</td>
-                    <td>
-                      <span id="jumblr_status_t_to_z"></span>
-                    </td>
+                    <td></td>
                   </tr>
                   <tr>
                     <td>{ translate('JUMBLR.PRIV_TO_PRIV') }</td>
-                    <td>
-                      <span id="jumblr_status_z_to_z"></span>
-                    </td>
+                    <td></td>
                   </tr>
                   <tr>
                     <td>{ translate('JUMBLR.PRIV_TO_PUB') }</td>
-                    <td>
-                      <span id="jumblr_status_z_to_t"></span>
-                    </td>
+                    <td></td>
                   </tr>
                   <tr>
                     <td>{ translate('JUMBLR.FINISHED') }</td>
-                    <td>
-                      <span id="jumblr_status_finished"></span>
-                    </td>
+                    <td></td>
                   </tr>
                   <tr>
                     <td>{ translate('JUMBLR.PENDING') }</td>
-                    <td>
-                      <span id="jumblr_status_pending"></span>
-                    </td>
+                    <td></td>
                   </tr>
                   </tbody>
                 </table>
diff --git a/react/src/components/dashboard/navbar.render.js b/react/src/components/dashboard/navbar.render.js
index fadae35..ba7ec2e 100644
--- a/react/src/components/dashboard/navbar.render.js
+++ b/react/src/components/dashboard/navbar.render.js
@@ -28,9 +28,9 @@ const NavbarRender = function () {
         </button>
       </div>
       <div className="navbar-container container-fluid">
-        <div className="collapse navbar-collapse navbar-collapse-toolbar" id="site-navbar-collapse">
+        <div className="collapse navbar-collapse navbar-collapse-toolbar">
           <ul className="nav navbar-toolbar">
-            <li className="hidden-float display-none" id="toggleMenubar">
+            <li className="hidden-float display-none">
               <a>
                 <i className="icon hamburger hamburger-arrow-left">
                   <span className="sr-only">{ translate('INDEX.TOGGLE_MENUBAR') }</span>
@@ -38,32 +38,30 @@ const NavbarRender = function () {
                 </i>
               </a>
             </li>
-            <li className={ this.props.Dashboard.activeSection === 'wallets' ? 'active nav-top-menu' : 'nav-top-menu' }>
-              <a id="nav-dashboard" onClick={ () => this.dashboardChangeSection('wallets') }>
+            <li className={ this.isSectionActive('wallets') ? 'active nav-top-menu' : 'nav-top-menu' }>
+              <a onClick={ () => this.dashboardChangeSection('wallets') }>
                 <i className="site-menu-icon"></i> { translate('INDEX.WALLETS') }
               </a>
             </li>
-            <li className={ this.props.Dashboard.activeSection === 'edex' ? 'active nav-top-menu' : 'nav-top-menu' }>
-              <a id="nav-easydex" onClick={ () => this.dashboardChangeSection('edex') }>
-                <i className="site-menu-icon" aria-hidden="true"></i> EasyDEX
+            <li className={ this.isSectionActive('edex') ? 'active nav-top-menu' : 'nav-top-menu' }>
+              <a onClick={ () => this.dashboardChangeSection('edex') }>
+                <i className="site-menu-icon"></i> EasyDEX
               </a>
             </li>
-            <li
-              className={'display-none ' + (this.props.Dashboard.activeSection === 'jumblr' ? 'active nav-top-menu' : 'nav-top-menu') }>
-              <a id="nav-jumblr" onClick={ () => this.dashboardChangeSection('jumblr') }>
+            <li className={ 'display-none ' + (this.isSectionActive('jumblr') ? 'active nav-top-menu' : 'nav-top-menu') }>
+              <a onClick={ () => this.dashboardChangeSection('jumblr') }>
                 <i className="site-menu-icon"></i> Jumblr
               </a>
             </li>
-            <li className={ this.props.Dashboard.activeSection === 'atomic' ? 'active nav-top-menu' : 'nav-top-menu' }>
-              <a id="nav-iguana-atomic-explorer" onClick={ () => this.dashboardChangeSection('atomic') }>
+            <li className={ this.isSectionActive('atomic') ? 'active nav-top-menu' : 'nav-top-menu' }>
+              <a onClick={ () => this.dashboardChangeSection('atomic') }>
                 <i className="site-menu-icon"></i> Atomic Explorer
               </a>
             </li>
           </ul>
           <ul className="nav navbar-toolbar navbar-right navbar-toolbar-right">
-            <li role="presentation">
+            <li>
               <a
-                id="btn_edexcoin_addcoin"
                 className="pointer padding-bottom-10 padding-top-16"
                 onClick={ this.toggleAddCoinModal }>
                   <span>
@@ -82,29 +80,23 @@ const NavbarRender = function () {
               </a>
               <ul className="dropdown-menu">
                 <li>
-                  <a
-                    id="nav-iguana-wallet-settings"
-                    onClick={ () => this.dashboardChangeSection('settings') }>
+                  <a onClick={ () => this.dashboardChangeSection('settings') }>
                     <i className="icon md-settings"></i> { translate('INDEX.SETTINGS') }
                   </a>
                 </li>
                 <li>
-                  <a
-                    id="nav-iguana-sync-only"
-                    onClick={ () => this.openSyncOnlyModal() }>
+                  <a onClick={ () => this.openSyncOnlyModal() }>
                     <i className="icon fa-cubes"></i> { translate('ADD_COIN.SYNC_ONLY') }
                   </a>
                 </li>
                 <li>
-                  <a
-                    id="nav-about-iguana"
-                    onClick={ () => this.dashboardChangeSection('about') }>
+                  <a onClick={ () => this.dashboardChangeSection('about') }>
                     <i className="icon fa-users"></i> { translate('INDEX.ABOUT_IGUANA') }
                   </a>
                 </li>
                 <li className="divider"></li>
                 <li>
-                  <a id="logout-account" onClick={ this.logout }>
+                  <a onClick={ this.logout }>
                     <i className="icon md-power"></i> { translate('INDEX.LOGOUT') }
                   </a>
                 </li>
diff --git a/react/src/components/dashboard/receiveCoin.render.js b/react/src/components/dashboard/receiveCoin.render.js
index dd4e5d5..85462a7 100644
--- a/react/src/components/dashboard/receiveCoin.render.js
+++ b/react/src/components/dashboard/receiveCoin.render.js
@@ -4,25 +4,25 @@ import { translate } from '../../translate/translate';
 export const AddressActionsBasiliskModeRender = function (address) {
   return (
     <td>
-          <span className="label label-default">
-            <i className="icon fa-eye"></i> { translate('IAPI.PUBLIC_SM') }
-          </span>
+      <span className="label label-default">
+        <i className="icon fa-eye"></i> { translate('IAPI.PUBLIC_SM') }
+      </span>
       <button
         className="btn btn-default btn-xs clipboard-edexaddr margin-left-10"
-        id="edexcoin_active_addr_clipboard"
-        onClick={ () => this._copyCoinAddress(address) }><i className="icon wb-copy" aria-hidden="true"></i> { translate('INDEX.COPY') }</button>
+        title={ translate('INDEX.COPY_TO_CLIPBOARD') }
+        onClick={ () => this._copyCoinAddress(address) }><i className="icon wb-copy"></i> { translate('INDEX.COPY') }</button>
       <span
         className="label label-default margin-left-10 action"
         title={ translate('INDEX.CHECK') }
         onClick={ () => this._checkAddressBasilisk(address) }>
-            <i className="icon fa-database"></i>
-          </span>
+        <i className="icon fa-database"></i>
+      </span>
       <span
         className="label label-default margin-left-10 action"
         title={ translate('INDEX.VALIDATE') }
         onClick={ () => this._validateAddressBasilisk(address) }>
             <i className="icon fa-info-circle"></i>
-          </span>
+      </span>
     </td>
   );
 };
@@ -35,7 +35,6 @@ export const AddressActionsNonBasiliskModeRender = function (address) {
       </span>
       <button
         className="btn btn-default btn-xs clipboard-edexaddr margin-left-10"
-        id="edexcoin_active_addr_clipboard"
         onClick={ () => this._copyCoinAddress(address) }><i className="icon wb-copy"></i> { translate('INDEX.COPY') }</button>
     </td>
   );
@@ -54,10 +53,10 @@ export const AddressItemRender = function (address) {
 
 export const ReceiveCoinRender = function () {
   return (
-    <div id="edexcoin_recieve">
+    <div>
       <div className="col-xs-12 margin-top-20">
         <div className="panel nav-tabs-horizontal">
-          <div id="edexcoin_recieve_section">
+          <div>
             <div className="col-xlg-12 col-lg-12 col-sm-12 col-xs-12">
               <div className="panel">
                 <header className="panel-heading">
@@ -65,7 +64,7 @@ export const ReceiveCoinRender = function () {
                   <h4 className="panel-title">{ translate('INDEX.RECEIVING_ADDRESS') }</h4>
                 </header>
                 <div className="panel-body">
-                  <table className="table table-hover dataTable table-striped" id="edexcoin-recieve-addr-tbl">
+                  <table className="table table-hover dataTable table-striped">
                     <thead>
                     <tr>
                       <th>{ translate('INDEX.TYPE') }</th>
diff --git a/react/src/components/login/login.render.js b/react/src/components/login/login.render.js
index ef98c9d..bbfbaf4 100644
--- a/react/src/components/login/login.render.js
+++ b/react/src/components/login/login.render.js
@@ -3,7 +3,7 @@ import { translate } from "../../translate/translate";
 
 const LoginRender = function () {
   return (
-    <div id="wallet-login">
+    <div>
       { this.renderSwallModal() }
       <div className="page animsition vertical-align text-center fade-in">
         <div className="page-content vertical-align-middle">
@@ -17,13 +17,13 @@ const LoginRender = function () {
                 </span>
           </div>
 
-          <div id="section-ie-warning" className={ this.state.activeLoginSection === 'ieWarning' ? 'show' : 'hide' }>
+          <div className={ this.state.activeLoginSection === 'ieWarning' ? 'show' : 'hide' }>
             <div className="panel">
               <div className="panel-heading">
                 <h3 className="panel-title">{ translate('INDEX.UNSUPPORTED_BROWSER') }</h3>
               </div>
-              <div className="alert alert-danger alert-dismissible" role="alert">
-                <button type="button" className="close">
+              <div className="alert alert-danger alert-dismissible">
+                <button type="button">
                   <span>&times;</span>
                   <span className="sr-only">{ translate('INDEX.CLOSE') }</span>
                 </button>
@@ -43,15 +43,14 @@ const LoginRender = function () {
             </div>
           </div>
 
-          <div id="section-login" className={ this.state.activeLoginSection === 'login' ? 'show' : 'hide' }>
-            <h4 className="color-white" id="login-welcome">{translate('INDEX.WELCOME_LOGIN')}</h4>
+          <div className={ this.state.activeLoginSection === 'login' ? 'show' : 'hide' }>
+            <h4 className="color-white">{translate('INDEX.WELCOME_LOGIN')}</h4>
             <div className="login-form">
               <div className="form-group form-material floating">
                 <input
                   type={ this.state.seedInputVisibility ? 'text' : 'password' }
                   className="form-control"
                   name="loginPassphrase"
-                  id="password"
                   onChange={ this.updateInput }
                   onKeyDown={ (event) => this.handleKeydown(event) } />
                 <i
@@ -62,7 +61,6 @@ const LoginRender = function () {
               <button
                 type="button"
                 className="btn btn-primary btn-block"
-                id="loginbtn"
                 onClick={ this.loginSeed }
                 disabled={ !this.state.loginPassphrase || !this.state.loginPassphrase.length }>{ translate('INDEX.SIGN_IN') }</button>
               <div className="form-group form-material floating">
@@ -84,15 +82,12 @@ const LoginRender = function () {
             </div>
           </div>
 
-          <div
-            id="section-login-addcoin-btn"
-            className={ this.state.activeLoginSection === 'activateCoin' ? 'show' : 'hide' }>
-            <h4 className="color-white" id="login-welcome">{ translate('INDEX.WELCOME_PLEASE_ADD') }</h4>
+          <div className={ this.state.activeLoginSection === 'activateCoin' ? 'show' : 'hide' }>
+            <h4 className="color-white">{ translate('INDEX.WELCOME_PLEASE_ADD') }</h4>
             <div
               className="form-group form-material floating width-540 vertical-margin-30 horizontal-margin-0">
               <button
                 className="btn btn-lg btn-primary btn-block ladda-button"
-                id="start-coin-login"
                 onClick={ this.toggleActivateCoinForm }
                 disabled={ !this.props.Main }>
                 <span className="ladda-label">{ translate('INDEX.ACTIVATE_COIN') }</span>
@@ -100,9 +95,7 @@ const LoginRender = function () {
             </div>
           </div>
 
-          <div
-            id="section-register"
-            className={ this.state.activeLoginSection === 'signup' ? 'show' : 'hide' }>
+          <div className={ this.state.activeLoginSection === 'signup' ? 'show' : 'hide' }>
             <div className="register-form">
               <h4 className="hint color-white">
                 { translate('INDEX.SELECT_SEED_TYPE') }:
@@ -157,7 +150,6 @@ const LoginRender = function () {
               </div>
               <button
                 type="button"
-                id="register-submit-btn"
                 className="btn btn-primary btn-block"
                 onClick={ this.handleRegisterWallet }>{ translate('INDEX.REGISTER') }</button>
               <div className="form-group form-material floating">
diff --git a/react/src/components/login/swall-modal.render.js b/react/src/components/login/swall-modal.render.js
index 5b3b2d2..110ee3e 100644
--- a/react/src/components/login/swall-modal.render.js
+++ b/react/src/components/login/swall-modal.render.js
@@ -9,7 +9,7 @@ const SwallModalRender = function () {
         <div className="swal2-icon swal2-warning pulse-warning display-block">!</div>
         <h2>{ translate('LOGIN.SAVED_WALLET_SEED') }</h2>
         <div className="swal2-content display-block">{ translate('LOGIN.SEED_MAKE_SURE_BACKUP') }</div>
-        <hr className="swal2-spacer display-block"/>
+        <hr className="swal2-spacer display-block" />
         <button
           className="swal2-confirm styled swal2-confirm-container"
           onClick={ this.execWalletCreate }>{ translate('LOGIN.YES_I_BACKUP') }</button>