Merge branch 'redux' of https://github.com/SuperNETorg/EasyDEX-GUI into decouple-jsx-out-of-js

react/change.log

@@ -0,0 +1,17 @@
+v0.2.0.2a-beta
+--------------
+front:
+- fixed native t to t bug that led to interest loss
+- added pending request(s) spinner
+- added missing native z_balance api call for z-addresses
+- fixed native t to z address send bug
+- added cli settings section
+- disabled initial basilisk connection process
+- minor UI reorder change
+- limit http stack history to 150 calls of each type
+- sort http stack history desc
+- swapped gettotalbalance interest with getinfo interest
+- extended settings / export keys ui
+
+back:
+- added cli route

react/src/actions/actionCreators.js

@@ -65,6 +65,7 @@ export * from './actions/dexCoins';
 export * from './actions/fullTxHistory';
 export * from './actions/basiliskTxHistory';
 export * from './actions/iguanaHelpers';
+export * from './actions/cli';
 
 export let Config;
 
@@ -189,13 +190,14 @@ export function toggleSendReceiveCoinFormsState() {
   }
 }
 
-export function triggerToaster(display, message, title, _type) {
+export function triggerToaster(display, message, title, _type, autoClose = true) {
   return {
     type: ADD_TOASTER_MESSAGE,
     display,
     message,
     title,
     _type,
+    autoClose
   }
 }
 

react/src/actions/actions/addressBalance.js

@@ -5,7 +5,8 @@ import {
   triggerToaster,
   Config,
   shepherdGroomPost,
-  getPassthruAgent
+  getPassthruAgent,
+  iguanaHashHex
 } from '../actionCreators';
 import {
   logGuiHttp,
@@ -171,7 +172,6 @@ export function getKMDAddressesNative(coin, mode, currentAddress) {
         };
       }
 
-      // if api cache option is off
       if (mode === 'basilisk') {
         payload = {
           'userpass': `tmpIgRPCUser@${sessionStorage.getItem('IguanaRPCAuth')}`,
@@ -235,17 +235,109 @@ export function getKMDAddressesNative(coin, mode, currentAddress) {
               sum += filteredArray[i];
             }
 
+            if (sum === 0 &&
+                a === 1) {
+
+            }
+
             newAddressArray[a][b] = {
               address: result[a][b],
               amount: currentAddress === result[a][b] || mode === 'native' ? sum : 'N/A',
+              type: a === 0 ? 'public': 'private',
             };
           }
         }
 
-        dispatch(getKMDAddressesNativeState({
-          'public': newAddressArray[0],
-          'private': newAddressArray[1]
-        }));
+        // get zaddr balance
+        if (result[1] &&
+            result[1].length) {
+          Promise.all(result[1].map((_address, index) => {
+            return new Promise((resolve, reject) => {
+              const _timestamp = Date.now();
+              let ajaxDataToHex = `["${_address}"]`;
+
+              iguanaHashHex(ajaxDataToHex, dispatch).then((hashHexJson) => {
+                if (getPassthruAgent(coin) === 'iguana') {
+                  payload = {
+                    'userpass': `tmpIgRPCUser@${sessionStorage.getItem('IguanaRPCAuth')}`,
+                    'agent': getPassthruAgent(coin),
+                    'method': 'passthru',
+                    'asset': coin,
+                    'function': 'z_getbalance',
+                    'hex': hashHexJson,
+                  };
+                } else {
+                  payload = {
+                    'userpass': `tmpIgRPCUser@${sessionStorage.getItem('IguanaRPCAuth')}`,
+                    'agent': getPassthruAgent(coin),
+                    'method': 'passthru',
+                    'function': 'z_getbalance',
+                    'hex': hashHexJson,
+                  };
+                }
+                dispatch(logGuiHttp({
+                  'timestamp': _timestamp,
+                  'function': 'getKMDAddressesNative+ZBalance',
+                  'type': 'post',
+                  'url': `http://127.0.0.1:${Config.iguanaCorePort}`,
+                  'payload': payload,
+                  'status': 'pending',
+                }));
+
+                fetch(`http://127.0.0.1:${Config.iguanaCorePort}`,
+                {
+                  method: 'POST',
+                  body: JSON.stringify(payload),
+                })
+                .catch(function(error) {
+                  console.log(error);
+                  dispatch(logGuiHttp({
+                    'timestamp': _timestamp,
+                    'status': 'error',
+                    'response': error,
+                  }));
+                  dispatch(triggerToaster(true, 'getKMDAddressesNative+ZBalance', 'Error', 'error'));
+                })
+                .then(response => response.json())
+                .then(function(json) {
+                  if (json &&
+                    json.error) {
+                    resolve(0);
+                    dispatch(logGuiHttp({
+                      'timestamp': _timestamp,
+                      'status': 'error',
+                      'response': json,
+                    }));
+                    dispatch(triggerToaster(true, 'getKMDAddressesNative+ZBalance', 'Error', 'error'));
+                  } else {
+                    resolve(json);
+                    newAddressArray[1][index] = {
+                      address: _address,
+                      amount: json,
+                      type: 'private',
+                    };
+                    dispatch(logGuiHttp({
+                      'timestamp': _timestamp,
+                      'status': 'success',
+                      'response': json,
+                    }));
+                  }
+                });
+              });
+            });
+          }))
+          .then(zresult => {
+            dispatch(getKMDAddressesNativeState({
+              'public': newAddressArray[0],
+              'private': newAddressArray[1]
+            }));
+          });
+        } else {
+          dispatch(getKMDAddressesNativeState({
+            'public': newAddressArray[0],
+            'private': newAddressArray[1]
+          }));
+        }
       }
 
       if (mode === 'basilisk') {

react/src/actions/actions/cli.js

@@ -0,0 +1,64 @@
+import {
+  triggerToaster,
+  Config
+} from '../actionCreators';
+import { CLI } from '../storeType';
+import {
+  logGuiHttp,
+  guiLogState
+} from './log';
+
+export function shepherdCliPromise(mode, chain, cmd) {
+  const _payload = {
+    mode,
+    chain,
+    cmd
+  };
+
+  return new Promise((resolve, reject) => {
+    fetch(`http://127.0.0.1:${Config.agamaPort}/shepherd/cli`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ 'payload': _payload }),
+    })
+    .catch(function(error) {
+      console.log(error);
+      dispatch(triggerToaster(true, 'shepherdCli', 'Error', 'error'));
+    })
+    .then(response => response.json())
+    .then(json => resolve(json))
+  });
+}
+
+export function shepherdCli(mode, chain, cmd) {
+  const _payload = {
+    mode,
+    chain,
+    cmd
+  };
+
+  return dispatch => {
+    return fetch(`http://127.0.0.1:${Config.agamaPort}/shepherd/cli`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ 'payload': _payload }),
+    })
+    .catch(function(error) {
+      console.log(error);
+      dispatch(triggerToaster(true, 'shepherdCli', 'Error', 'error'));
+    })
+    .then(response => response.json())
+    .then(json => dispatch(cliResponseState(json)))
+  }
+}
+
+export function cliResponseState(json) {
+  return {
+    type: CLI,
+    data: json,
+  }
+}

react/src/actions/actions/nativeSend.js

@@ -70,14 +70,8 @@ export function sendNativeTx(coin, _payload) {
         dispatch(triggerToaster(true, 'sendNativeTx', 'Error', 'error'));
       })
       .then(function(response) {
-        if (_apiMethod === 'sendtoaddress') {
-          const _response = response.text().then(function(text) { return text; });
-
-          console.log('native sendtoaddress', _response);
-          return _response;
-        } else {
-          return response.json();
-        }
+        const _response = response.text().then(function(text) { return text; });
+        return response.json();
       })
       .then(function(json) {
         dispatch(logGuiHttp({

react/src/actions/actions/settings.js

@@ -42,7 +42,7 @@ export function getAppInfo() {
 export function settingsWifkeyState(json, coin) {
   return {
     type: GET_WIF_KEY,
-    wifkey: json[`{$coin}wif`],
+    wifkey: json,
     address: json[coin],
   }
 }

react/src/actions/storeType.js

@@ -41,4 +41,5 @@ export const SAVE_APP_CONFIG = 'SAVE_APP_CONFIG';
 export const SERVICE_ERROR = 'SERVICE_ERROR';
 export const DASHBOARD_ACTIVE_ADDRESS = 'DASHBOARD_ACTIVE_ADDRESS';
 export const LOAD_APP_INFO = 'LOAD_APP_INFO';
-export const LOG_GUI_HTTP = 'LOG_GUI_HTTP';
+export const LOG_GUI_HTTP = 'LOG_GUI_HTTP';
+export const CLI = 'CLI';

react/src/components/addcoin/addcoin.render.js

@@ -4,44 +4,41 @@ 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>
             <div className="modal-body">
-              <button className="btn btn-primary btn-add-coin-item" onClick={ this.addNewItem }>+</button>
-              <button className="btn btn-outline-primary btn-add-coin-item-options" onClick={ this.toggleActionsMenu }>
+              <button
+                className="btn btn-primary btn-add-coin-item"
+                onClick={ this.addNewItem }>+</button>
+              <button
+                className="btn btn-outline-primary btn-add-coin-item-options"
+                onClick={ this.toggleActionsMenu }>
                 <i className={ this.state.actionsMenu ? 'fa-chevron-up' : 'fa-chevron-down' }></i>
               </button>
               <span className={ !this.state.actionsMenu ? 'hide' : '' }>
-                  <button
-                    className="btn btn-outline-primary btn-save-coin-selection"
-                    onClick={ this.saveCoinSelection }>{ translate('ADD_COIN.SAVE_SELECTION') }</button>
-                  <button
-                    className="btn btn-outline-primary btn-load-coin-selection"
-                    onClick={ this.loadCoinSelection }>{ translate('ADD_COIN.LOAD_SELECTION') }</button>
-                </span>
+                <button
+                  className="btn btn-outline-primary btn-save-coin-selection"
+                  onClick={ this.saveCoinSelection }>{ translate('ADD_COIN.SAVE_SELECTION') }</button>
+                <button
+                  className="btn btn-outline-primary btn-load-coin-selection"
+                  onClick={ this.loadCoinSelection }>{ translate('ADD_COIN.LOAD_SELECTION') }</button>
+              </span>
               { this.renderCoinSelectors() }
               <div
-                className={'text-align-center vertical-margin-20 horizontal-margin-0 ' + (this.hasMoreThanOneCoin() ? 'col-sm-12' : 'hide') }>
+                className={ 'text-align-center vertical-margin-20 horizontal-margin-0 ' + (this.hasMoreThanOneCoin() ? 'col-sm-12' : 'hide') }>
                 <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 +51,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>

react/src/components/addcoin/coin-selectors.render.js

@@ -7,13 +7,14 @@ import AddCoinOptionsACFiat from '../addcoin/addcoinOptionsACFiat';
 
 const CoinSelectorsRender = function(item, coin, i) {
   return (
-    <div className={ this.hasMoreThanOneCoin() ? 'multi' : 'single' } key={ `add-coin-${i}` }>
+    <div
+      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>
@@ -27,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>
@@ -40,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'}}>
-                <span
-                  className="labelauty-unchecked-image"
-                  style={{display: item.fullMode.checked ? 'none' : 'inline-block'}}></span>
+            style={{ pointerEvents: item.fullMode.disabled ? 'none' : 'all' }}>
+            <span
+              className="labelauty-unchecked-image"
+              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">
@@ -66,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'}}>
-                <span
-                  className="labelauty-unchecked-image"
-                  style={{display: item.basiliskMode.checked ? 'none' : 'inline-block'}}></span>
+            style={{ pointerEvents: item.basiliskMode.disabled ? 'none' : 'all' }}>
+            <span
+              className="labelauty-unchecked-image"
+              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">
@@ -92,45 +92,45 @@ 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'}}>
-                <span
-                  className="labelauty-unchecked-image"
-                  style={{display: item.nativeMode.checked ? 'none' : 'inline-block'}}></span>
+            style={{ pointerEvents: item.nativeMode.disabled ? 'none' : 'all' }}>
+            <span
+              className="labelauty-unchecked-image"
+              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>
       </div>
       <div className={ item.mode === '1' || item.mode === 1 ? 'col-sm-12' : 'hide' }>
         <div className="toggle-box padding-top-3 padding-bottom-10">
-              <span className="pointer">
-                <label className="switch">
-                  <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>
-              </span>
+          <span className="pointer">
+            <label className="switch">
+              <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>
+          </span>
         </div>
       </div>
     </div>

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>

react/src/components/dashboard/coinTile.render.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import { translate } from '../../translate/translate';
 
-const CoinTileRender = function () {
+const CoinTileRender = function() {
   return (
     <div className="page-aside padding-top-80">
       <div className="page-aside-switch">
-        <i className="icon md-chevron-left" aria-hidden="true"></i>
-        <i className="icon md-chevron-right" aria-hidden="true"></i>
+        <i className="icon md-chevron-left"></i>
+        <i className="icon md-chevron-right"></i>
       </div>
       <div className="page-aside-inner">
         <div className="search-wallet-widgets panel display-none">
@@ -14,17 +14,17 @@ const CoinTileRender = function () {
             <div className="panel-actions">
               <div className="input-search input-group-sm">
                 <button type="submit" className="input-search-btn">
-                  <i className="icon md-search" aria-hidden="true"></i>
+                  <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>
           </div>
         </div>
         <div className="wallet-widgets-list">
-          <div data-role="container">
-            <div data-role="content">
+          <div>
+            <div>
               <div className="list-group row wallet-widgets-row">
                 { this.renderTiles() }
               </div>

react/src/components/dashboard/coinTileItem.render.js

@@ -1,20 +1,20 @@
 import React from 'react';
 
-const CoinTileItemRender = function () {
+const CoinTileItemRender = function() {
   const { item } = this.props;
 
   return (
     <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>

react/src/components/dashboard/dashboard.render.js

@@ -17,7 +17,7 @@ import WalletsNative from './walletsNative';
 import WalletsNativeTxInfo from './walletsNativeTxInfo';
 import WalletsTxInfo from './walletsTxInfo';
 
-const DashboardRender = function () {
+const DashboardRender = function() {
   return (
     <div className="full-height">
       <div

react/src/components/dashboard/jumblr.render.js

@@ -3,32 +3,32 @@ import { translate } from '../../translate/translate';
 
 import WalletsHeader from './walletsHeader';
 
-const JumblrRender = function () {
+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="alert alert-danger" role="alert">
-              <button type="button" className="close" data-dismiss="alert" aria-label="Close">
-                <span aria-hidden="true">×</span>
+      <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">
-              <button type="button" className="close" data-dismiss="alert" aria-label="Close">
-                <span aria-hidden="true">×</span>
+          <div className="col-xs-12">
+            <div className="alert alert-info alert-dismissible">
+              <button type="button" className="close">
+                <span>×</span>
               </button>
               <span className="jumblr-header">
-                  <i className="icon fa-paw" aria-hidden="true"></i> { translate('JUMBLR.NEED_NATIVE') }
+                  <i className="icon fa-paw"></i> { translate('JUMBLR.NEED_NATIVE') }
                 </span>
               <br />
               { translate('JUMBLR.TO_USE_JUMBLR') }
@@ -42,23 +42,14 @@ const JumblrRender = function () {
           </div>
 
           <div className="col-xs-12">
-            <div className="panel-group" id="jumber_quick_info" aria-multiselectable="true" role="tablist">
+            <div className="panel-group">
               <div className="panel">
                 <div
                   className="panel-heading"
-                  id="jumblr_security_notes"
-                  role="tab"
                   onClick={ () => this.openTab(0) }>
-                  <a
-                    className={ this.state.activeTab === 0 ? 'panel-title' : 'panel-title collapsed' }
-                    aria-expanded="true"
-                    aria-controls="jumblr_security_notes_1">{ translate('JUMBLR.FEW_SECURITY_NOTES') }</a>
+                  <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"
-                  aria-labelledby="jumblr_security_notes"
-                  role="tabpanel">
+                <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>
@@ -73,19 +64,10 @@ const JumblrRender = function () {
               <div className="panel">
                 <div
                   className="panel-heading"
-                  id="jumblr_access_funds"
-                  role="tab"
                   onClick={ () => this.openTab(1) }>
-                  <a
-                    className={ this.state.activeTab === 1 ? 'panel-title' : 'panel-title collapsed' }
-                    aria-expanded="false"
-                    aria-controls="jumblr_access_funds_2">{ translate('JUMBLR.ACCESS_JUMBLR_FUNDS') }</a>
+                  <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"
-                  aria-labelledby="jumblr_access_funds"
-                  role="tabpanel">
+                <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>
@@ -114,17 +96,10 @@ const JumblrRender = function () {
                 </div>
               </div>
               <div className="panel">
-                <div className="panel-heading" id="jumblr_using_jumblr" role="tab" onClick={ () => this.openTab(2) }>
-                  <a
-                    className={ this.state.activeTab === 2 ? 'panel-title' : 'panel-title collapsed' }
-                    aria-expanded="false"
-                    aria-controls="jumblr_using_jumblr_3">{ translate('JUMBLR.USING_JUMBLR') }</a>
+                <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"
-                  aria-labelledby="jumblr_using_jumblr"
-                  role="tabpanel">
+                <div className={ this.state.activeTab === 2 ? 'panel-collapse collapse in' : 'panel-collapse collapse' }>
                   <div className="panel-body">
                     <ul>
                       <li>{ translate('JUMBLR.RUN_KMD') }</li>
@@ -148,52 +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">
-                        <span><i className="icon fa-eye" aria-hidden="true"></i> { translate('JUMBLR.SHOW_HIDE') }</span>
+                      <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">
-                            <span>
-                              <i className="icon fa-eye" aria-hidden="true"></i> { translate('JUMBLR.SHOW_HIDE') }
-                            </span>
+                      <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_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>
@@ -204,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>

react/src/components/dashboard/navbar.render.js

@@ -1,16 +1,16 @@
 import React from 'react';
 import { translate } from '../../translate/translate';
 
-const NavbarRender = function () {
+const NavbarRender = function() {
   return (
-    <nav className="site-navbar navbar navbar-default navbar-fixed-top navbar-mega" role="navigation">
+    <nav className="site-navbar navbar navbar-default navbar-fixed-top navbar-mega">
       <div className="navbar-header">
         <button type="button" className="navbar-toggle hamburger hamburger-close navbar-toggle-left hided">
           <span className="sr-only">{ translate('INDEX.TOGGLE_NAV') }</span>
           <span className="hamburger-bar"></span>
         </button>
         <button type="button" className="navbar-toggle collapsed">
-          <i className="icon md-more" aria-hidden="true"></i>
+          <i className="icon md-more"></i>
         </button>
         <div className="navbar-brand navbar-brand-center site-gridmenu-toggle">
           <img
@@ -24,14 +24,14 @@ const NavbarRender = function () {
         </div>
         <button type="button" className="navbar-toggle collapsed">
           <span className="sr-only">{ translate('INDEX.TOGGLE_SEARCH') }</span>
-          <i className="icon md-search" aria-hidden="true"></i>
+          <i className="icon md-search"></i>
         </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">
-              <a role="button">
+            <li className="hidden-float display-none">
+              <a>
                 <i className="icon hamburger hamburger-arrow-left">
                   <span className="sr-only">{ translate('INDEX.TOGGLE_MENUBAR') }</span>
                   <span className="hamburger-bar"></span>
@@ -39,32 +39,29 @@ const NavbarRender = function () {
               </a>
             </li>
             <li className={ this.isSectionActive('wallets') ? 'active nav-top-menu' : 'nav-top-menu' }>
-              <a id="nav-dashboard" onClick={ () => this.dashboardChangeSection('wallets') }>
-                <i className="site-menu-icon" aria-hidden="true"></i> { translate('INDEX.WALLETS') }
+              <a onClick={ () => this.dashboardChangeSection('wallets') }>
+                <i className="site-menu-icon"></i> { translate('INDEX.WALLETS') }
               </a>
             </li>
             <li className={ this.isSectionActive('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
+              <a onClick={ () => this.dashboardChangeSection('edex') }>
+                <i className="site-menu-icon"></i> EasyDEX
               </a>
             </li>
-            <li
-              className={'display-none ' + (this.isSectionActive('jumblr') ? 'active nav-top-menu' : 'nav-top-menu') }>
-              <a id="nav-jumblr" onClick={ () => this.dashboardChangeSection('jumblr') }>
-                <i className="site-menu-icon" aria-hidden="true"></i> 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.isSectionActive('atomic') ? 'active nav-top-menu' : 'nav-top-menu' }>
-              <a id="nav-iguana-atomic-explorer" onClick={ () => this.dashboardChangeSection('atomic') }>
-                <i className="site-menu-icon" aria-hidden="true"></i> Atomic Explorer
+              <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
-                role="menuitem"
-                id="btn_edexcoin_addcoin"
                 className="pointer padding-bottom-10 padding-top-16"
                 onClick={ this.toggleAddCoinModal }>
                   <span>
@@ -73,43 +70,34 @@ const NavbarRender = function () {
               </a>
             </li>
             <li
-              className={ 'dropdown' + (this.state.openDropMenu ? ' open' : '') }
+              className={ 'pointer dropdown' + (this.state.openDropMenu ? ' open' : '') }
               onClick={ this.openDropMenu }>
-              <a className="navbar-avatar dropdown-toggle" aria-expanded="false" role="button">
+              <a className="navbar-avatar dropdown-toggle">
                   <span className="avatar avatar-online">
                     <img src="assets/images/iguana_profile_02.jpg" alt="iguana profile pic" />
                     <i></i>
                   </span>
               </a>
-              <ul className="dropdown-menu" role="menu">
-                <li role="presentation">
-                  <a
-                    role="menuitem"
-                    id="nav-iguana-wallet-settings"
-                    onClick={ () => this.dashboardChangeSection('settings') }>
-                    <i className="icon md-settings" aria-hidden="true"></i> { translate('INDEX.SETTINGS') }
+              <ul className="dropdown-menu">
+                <li>
+                  <a onClick={ () => this.dashboardChangeSection('settings') }>
+                    <i className="icon md-settings"></i> { translate('INDEX.SETTINGS') }
                   </a>
                 </li>
-                <li role="presentation">
-                  <a
-                    role="menuitem"
-                    id="nav-iguana-sync-only"
-                    onClick={ () => this.openSyncOnlyModal() }>
-                    <i className="icon fa-cubes" aria-hidden="true"></i> { translate('ADD_COIN.SYNC_ONLY') }
+                <li>
+                  <a onClick={ () => this.openSyncOnlyModal() }>
+                    <i className="icon fa-cubes"></i> { translate('ADD_COIN.SYNC_ONLY') }
                   </a>
                 </li>
-                <li role="presentation">
-                  <a
-                    role="menuitem"
-                    id="nav-about-iguana"
-                    onClick={ () => this.dashboardChangeSection('about') }>
-                    <i className="icon fa-users" aria-hidden="true"></i> { translate('INDEX.ABOUT_IGUANA') }
+                <li>
+                  <a onClick={ () => this.dashboardChangeSection('about') }>
+                    <i className="icon fa-users"></i> { translate('INDEX.ABOUT_IGUANA') }
                   </a>
                 </li>
-                <li className="divider" role="presentation"></li>
-                <li role="presentation">
-                  <a role="menuitem" id="logout-account" onClick={ this.logout }>
-                    <i className="icon md-power" aria-hidden="true"></i> { translate('INDEX.LOGOUT') }
+                <li className="divider"></li>
+                <li>
+                  <a onClick={ this.logout }>
+                    <i className="icon md-power"></i> { translate('INDEX.LOGOUT') }
                   </a>
                 </li>
               </ul>

react/src/components/dashboard/notifications.render.js

@@ -4,7 +4,7 @@ import {
 } from '../../util/time';
 import { translate } from '../../translate/translate';
 
-export const NotificationsByTypeRender = function (logItem, type, index) {
+export const NotificationsByTypeRender = function(logItem, type, index) {
   return (
     <div key={ logItem.timestamp }>
       <div>{ index + 1 }.</div>
@@ -31,52 +31,46 @@ export const NotificationsByTypeRender = function (logItem, type, index) {
   );
 }
 
-export const NotificationsModalRender = function () {
+export const NotificationsModalRender = function() {
   return (
     <div onKeyDown={ (event) => this.handleKeydown(event) }>
-      <div className="modal show notifications-modal" aria-hidden="false" role="dialog">
+      <div className="modal show notifications-modal">
         <div className="modal-dialog modal-center modal-lg">
           <div className="modal-content">
             <div className="modal-body modal-body-container">
               <div className="panel nav-tabs-horizontal">
-                <ul className="nav nav-tabs nav-tabs-line" role="tablist">
-                  <li className={ this.state.activeTab === 0 ? 'active' : 'pointer' } role="presentation">
+                <ul className="nav nav-tabs nav-tabs-line">
+                  <li className={ this.state.activeTab === 0 ? 'active' : 'pointer' }>
                     <a
-                      role="tab"
                       onClick={ () => this.openTab(0) }>
-                      <i className="icon fa fa-thumbs-o-up" aria-hidden="true"></i> Success ({ this.state.calls.success })
+                      <i className="icon fa fa-thumbs-o-up"></i> Success ({ this.state.calls.success })
                     </a>
                   </li>
-                  <li className={ this.state.activeTab === 1 ? 'active' : 'pointer' } role="presentation">
+                  <li className={ this.state.activeTab === 1 ? 'active' : 'pointer' }>
                     <a
-                      role="tab"
                       onClick={ () => this.openTab(1) }>
-                      <i className="icon fa fa-exclamation-triangle" aria-hidden="true"></i> Error ({ this.state.calls.error })
+                      <i className="icon fa fa-exclamation-triangle"></i> Error ({ this.state.calls.error })
                     </a>
                   </li>
-                  <li className={ this.state.activeTab === 2 ? 'active' : 'pointer' } role="presentation">
+                  <li className={ this.state.activeTab === 2 ? 'active' : 'pointer' }>
                     <a
-                      role="tab"
                       onClick={ () => this.openTab(2) }>
-                      <i className="icon fa fa-clock-o" aria-hidden="true"></i> Pending ({ this.state.calls.pending })
+                      <i className="icon fa fa-clock-o"></i> Pending ({ this.state.calls.pending })
                     </a>
                   </li>
                 </ul>
                 <div className="panel-body panel-body-container">
                   <div className="tab-content">
                     <div
-                      className={ this.state.activeTab === 0 ? 'tab-pane active' : 'tab-pane' }
-                      role="tabpanel">
+                      className={ this.state.activeTab === 0 ? 'tab-pane active' : 'tab-pane' }>
                       { this.renderNotificationsByType('success') }
                     </div>
                     <div
-                      className={ this.state.activeTab === 1 ? 'tab-pane active' : 'tab-pane' }
-                      role="tabpanel">
+                      className={ this.state.activeTab === 1 ? 'tab-pane active' : 'tab-pane' }>
                       { this.renderNotificationsByType('error') }
                     </div>
                     <div
-                      className={ this.state.activeTab === 2 ? 'tab-pane active' : 'tab-pane' }
-                      role="tabpanel">
+                      className={ this.state.activeTab === 2 ? 'tab-pane active' : 'tab-pane' }>
                       { this.renderNotificationsByType('pending') }
                     </div>
                   </div>
@@ -87,7 +81,6 @@ export const NotificationsModalRender = function () {
               <button
                 type="button"
                 className="btn btn-default"
-                data-dismiss="modal"
                 onClick={ this.toggleNotificationsModal }>{ translate('INDEX.CLOSE') }</button>
             </div>
           </div>
@@ -98,7 +91,7 @@ export const NotificationsModalRender = function () {
   );
 };
 
-export const NotificationsRender = function () {
+export const NotificationsRender = function() {
   return (
     <div>
       <div

react/src/components/dashboard/receiveCoin.render.js

@@ -1,28 +1,28 @@
 import React from 'react';
 import { translate } from '../../translate/translate';
 
-export const AddressActionsBasiliskModeRender = function (address) {
+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="Check"
+        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="Import"
+        title={ translate('INDEX.VALIDATE') }
         onClick={ () => this._validateAddressBasilisk(address) }>
-            <i className="icon fa-info-circle"></i>
-          </span>
+        <i className="icon fa-info-circle"></i>
+      </span>
     </td>
   );
 };
@@ -35,8 +35,7 @@ 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" aria-hidden="true"></i> { translate('INDEX.COPY') }</button>
+        onClick={ () => this._copyCoinAddress(address) }><i className="icon wb-copy"></i> { translate('INDEX.COPY') }</button>
     </td>
   );
 };
@@ -54,19 +53,18 @@ 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">
-                  <div className="panel-actions">
-                  </div>
+                  <div className="panel-actions"></div>
                   <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>

react/src/components/dashboard/sendCoin.js

@@ -1,20 +1,14 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 import Config from '../../config';
 import { translate } from '../../translate/translate';
 import {
-  checkTimestamp,
-  secondsElapsedToString,
-  secondsToString
+  checkTimestamp
 } from '../../util/time';
 import {
   edexGetTxIDList,
   edexRemoveTXID
 } from '../../util/cacheFormat';
 import {
-  sendFromAddress,
-  sendNativeTx,
-  getKMDOPID,
   resolveOpenAliasAddress,
   triggerToaster,
   basiliskRefresh,
@@ -29,6 +23,13 @@ import {
   dexSendRawTX
 } from '../../actions/actionCreators';
 import Store from '../../store';
+import {
+  UTXOCacheInfoRender,
+  SendCoinResponseRender,
+  OASendUIRender,
+  SendApiTypeSelectorRender,
+  SendCoinRender
+} from './sendCoin.render';
 
 import { SocketProvider } from 'socket.io-react';
 import io from 'socket.io-client';
@@ -133,6 +134,7 @@ class SendCoin extends React.Component {
     if (this.props.ActiveCoin.mode === 'basilisk' &&
         this.state.sendFrom &&
         !this.state.sendApiType &&
+        this.props.ActiveCoin.cache &&
         this.props.ActiveCoin.cache[this.props.ActiveCoin.coin][this.state.sendFrom]) {
         let refreshCacheData,
             timestamp,
@@ -155,34 +157,10 @@ class SendCoin extends React.Component {
         timestamp = null;
       }
 
-      return (
-        <div className="col-lg-12">
-          <hr />
-          { translate('SEND.TOTAL_UTXO_AVAILABLE') }: { refreshCacheData ? refreshCacheData.data && refreshCacheData.data.length : translate('SEND.PRESS_UPDATE_BTN') }<br />
-          <div className={ !timestamp ? 'hide' : '' }>
-            { translate('SEND.LAST_UPDATED') } @ { secondsToString(refreshCacheData ? refreshCacheData.timestamp : 0, true) } | { secondsElapsedToString(timestamp || 0) } { translate('SEND.AGO') }<br />
-          </div>
-          <div className={ isReadyToUpdate ? 'hide' : '' }>{ translate('SEND.NEXT_UPDATE_IN') } { secondsElapsedToString(600 - timestamp) }s</div>
-          <div
-            className={ 'full-width margin-bottom-10 margin-top-10 ' + (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"
-              style={{ width: 100 - (this.state.currentStackLength * 100 / this.state.totalStackLength) + '%' }}>
-              { translate('SEND.PROCESSING_REQ') }: { this.state.currentStackLength } / { this.state.totalStackLength }
-            </div>
-          </div>
-          <button
-            type="button"
-            className={ 'margin-top-10 ' + (isReadyToUpdate ? 'btn btn-primary waves-effect waves-light' : 'hide') }
-            onClick={ this._fetchNewUTXOData }
-            disabled={ waitUntilCallIsFinished }>
-            { waitUntilCallIsFinished ? translate('SEND.LOCKED_PLEASE_WAIT') + '...' : translate('SEND.UPDATE') }
-          </button>
-        </div>
-      );
-    } else {
-      return null;
+      return UTXOCacheInfoRender.call(this, refreshCacheData, isReadyToUpdate, waitUntilCallIsFinished, timestamp);
     }
+
+    return null;
     /*
           <hr />
           <div>
@@ -230,7 +208,8 @@ class SendCoin extends React.Component {
           const address = this.props.ActiveCoin.addresses[type][i];
           let _amount = address.amount;
 
-          if (this.props.ActiveCoin.mode === 'basilisk') {
+          if (this.props.ActiveCoin.mode === 'basilisk' &&
+              this.props.ActiveCoin.cache) {
             _amount = this.props.ActiveCoin.cache[this.props.ActiveCoin.coin][address.address] && this.props.ActiveCoin.cache[this.props.ActiveCoin.coin][address.address].getbalance.data && this.props.ActiveCoin.cache[this.props.ActiveCoin.coin][address.address].getbalance.data.balance ? this.props.ActiveCoin.cache[this.props.ActiveCoin.coin][address.address].getbalance.data.balance : 'N/A';
           }
 
@@ -257,7 +236,8 @@ class SendCoin extends React.Component {
       let _amount;
 
       if (this.state.sendFromAmount === 0 &&
-          this.props.ActiveCoin.mode === 'basilisk') {
+          this.props.ActiveCoin.mode === 'basilisk' &&
+          this.props.ActiveCoin.cache) {
         _amount = this.props.ActiveCoin.cache[this.props.ActiveCoin.coin][this.state.sendFrom].getbalance.data && this.props.ActiveCoin.cache[this.props.ActiveCoin.coin][this.state.sendFrom].getbalance.data.balance ? this.props.ActiveCoin.cache[this.props.ActiveCoin.coin][this.state.sendFrom].getbalance.data.balance : 'N/A';
       } else {
         _amount = this.state.sendFromAmount;
@@ -318,7 +298,8 @@ class SendCoin extends React.Component {
   updateAddressSelection(address, type, amount) {
     let _sendFromAmount = amount ? amount : this.props.ActiveCoin.addresses[type][address].amount;
 
-    if (this.props.ActiveCoin.mode === 'basilisk') {
+    if (this.props.ActiveCoin.mode === 'basilisk' &&
+        this.props.ActiveCoin.cache) {
       _sendFromAmount = this.props.ActiveCoin.cache[this.props.ActiveCoin.coin][address].getbalance.data && this.props.ActiveCoin.cache[this.props.ActiveCoin.coin][address].getbalance.data.balance ? this.props.ActiveCoin.cache[this.props.ActiveCoin.coin][address].getbalance.data.balance : 'N/A';
     }
 
@@ -618,70 +599,7 @@ class SendCoin extends React.Component {
   }
 
   renderSendCoinResponse() {
-    if (this.props.ActiveCoin.lastSendToResponse) {
-      let items = [];
-      const _response = this.props.ActiveCoin.lastSendToResponse;
-
-      for (let key in _response) {
-        if (key !== 'tag') {
-          items.push(
-            <tr key={ key }>
-              <td>{ key }</td>
-              <td>{ this.renderKey(key) }</td>
-            </tr>
-          );
-        }
-      }
-
-      return items;
-    } else {
-      return (
-        <div className="padding-20 text-align-center">
-          <div className="vertical-padding-10 horizontal-padding-0">
-            { translate('SEND.PROCESSING_TRANSACTION') }...<br />
-            { translate('SEND.NOTE_IT_WILL_TAKE') }.
-          </div>
-          <div className="loader-wrapper active">
-            <div className="loader-layer loader-blue">
-              <div className="loader-circle-left">
-                <div className="circle"></div>
-              </div>
-              <div className="loader-circle-gap"></div>
-              <div className="loader-circle-right">
-                <div className="circle"></div>
-              </div>
-            </div>
-            <div className="loader-layer loader-red">
-              <div className="loader-circle-left">
-                <div className="circle"></div>
-              </div>
-              <div className="loader-circle-gap"></div>
-              <div className="loader-circle-right">
-                <div className="circle"></div>
-              </div>
-            </div>
-            <div className="loader-layer loader-green">
-              <div className="loader-circle-left">
-                <div className="circle"></div>
-              </div>
-              <div className="loader-circle-gap"></div>
-              <div className="loader-circle-right">
-                <div className="circle"></div>
-              </div>
-            </div>
-            <div className="loader-layer loader-yellow">
-              <div className="loader-circle-left">
-                <div className="circle"></div>
-              </div>
-              <div className="loader-circle-gap"></div>
-              <div className="loader-circle-right">
-                <div className="circle"></div>
-              </div>
-            </div>
-          </div>
-        </div>
-      );
-    }
+    return SendCoinResponseRender.call(this);
   }
 
   getOAdress() {
@@ -714,251 +632,28 @@ class SendCoin extends React.Component {
 
   renderOASendUI() {
     if (Config.openAlias) {
-      return (
-        <div className="row">
-          <div className="col-lg-6 form-group form-material">
-            <label
-              className="control-label"
-              htmlFor="kmdWalletSendTo">Fetch OpenAlias recipient address</label>
-            <input
-              type="text"
-              className="form-control"
-              name="sendToOA"
-              onChange={ this.updateInput }
-              id="kmdWalletSendTo"
-              placeholder="Enter an alias as address@site.com"
-              autoComplete="off"
-              required />
-          </div>
-          <div className="col-lg-6 form-group form-material">
-            <button
-              type="button"
-              className="btn btn-primary waves-effect waves-light"
-              onClick={ this.getOAdress }>
-              Get address
-            </button>
-          </div>
-        </div>
-      );
-    } else {
-      return null;
+      return OASendUIRender.call(this);
     }
+
+    return null;
   }
 
   renderSendApiTypeSelector() {
     if (this.props.ActiveCoin.mode === 'basilisk') {
-      return (
-        <div className="row">
-          <div className="col-lg-10 margin-bottom-10">
-            <span className="pointer">
-              <label className="switch">
-                <input type="checkbox" checked={ this.state.sendApiType } />
-                <div className="slider" onClick={ this.toggleSendAPIType }></div>
-              </label>
-              <div className="toggle-label" onClick={ this.toggleSendAPIType }>{ translate('SEND.SEND_VIA') } (sendtoaddress API)</div>
-            </span>
-          </div>
-        </div>
-      );
-    } else {
-      return null;
+      return SendApiTypeSelectorRender.call(this);
     }
+
+    return null;
   }
 
   render() {
     if (this.props.ActiveCoin &&
         this.props.ActiveCoin.send &&
         this.props.ActiveCoin.mode !== 'native') {
-      return (
-        <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' }>
-                <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' }>
-                <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' }>
-                <span className="step-number">3</span>
-                <div className="step-desc">
-                  <span className="step-title">{ translate('INDEX.PROCESSING_TX') }</span>
-                  <p>{ translate('INDEX.PROCESSING_DETAILS') }</p>
-                </div>
-              </div>
-            </div>
-
-            <div className={ this.state.currentStep === 0 ? 'panel' : 'panel 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">
-                  { this.renderSendApiTypeSelector() }
-                  <div className="row">
-                    <div className={ this.props.ActiveCoin.mode === 'basilisk' ? 'col-xlg-12 form-group form-material' : 'hide' }>
-                      <label className="control-label" htmlFor="edexcoinSendFrom">{ translate('INDEX.SEND_FROM') }</label>
-                      { this.renderAddressList() }
-                    </div>
-                  </div>
-                  { this.renderOASendUI() }
-                  <div className="row">
-                    <div className="col-xlg-12 form-group form-material">
-                      <label className="control-label" htmlFor="edexcoinSendTo">{ translate('INDEX.SEND_TO') }</label>
-                      <input
-                        type="text"
-                        className="form-control"
-                        id="edexcoinSendTo"
-                        name="sendTo"
-                        placeholder={ translate('SEND.ENTER_AN_ADDRESS') }
-                        autoComplete="off"
-                        value={ this.state.sendTo }
-                        onChange={ this.updateInput }
-                        required />
-                    </div>
-                    <div className="col-lg-6 form-group form-material">
-                      <label className="control-label" htmlFor="edexcoinAmount">
-                        { this.props.ActiveCoin.coin }
-                      </label>
-                      <input
-                        type="text"
-                        className="form-control"
-                        id="edexcoinAmount"
-                        name="amount"
-                        placeholder="0.000"
-                        autoComplete="off"
-                        onChange={ this.updateInput } />
-                    </div>
-                    <div className="col-lg-6 form-group form-material">
-                      <label className="control-label" htmlFor="edexcoinFee">{ translate('INDEX.FEE') }</label>
-                      <input
-                        type="text"
-                        className="form-control"
-                        id="edexcoinFee"
-                        name="fee"
-                        defaultValue={ this.state.fee }
-                        value={ this.state.fee }
-                        placeholder="0.000"
-                        autoComplete="off"
-                        onChange={ this.updateInput } />
-                    </div>
-                    <div className="col-lg-12">
-                      <span>
-                        <strong>{ translate('INDEX.TOTAL') } ({ translate('INDEX.AMOUNT_SM') } - txfee):</strong> { Number(this.state.amount) - Number(this.state.fee) } { this.props.ActiveCoin.coin }
-                      </span>
-                    </div>
-                    <div className={ this.state.sendApiType ? 'hide' : 'col-lg-10 margin-top-30' }>
-                      <span className="pointer">
-                        <label className="switch">
-                          <input type="checkbox" checked={ this.state.sendSig } />
-                          <div className="slider" onClick={ this.toggleSendSig }></div>
-                        </label>
-                        <div className="toggle-label" onClick={ this.toggleSendSig }>{ translate('INDEX.DONT_SEND') }</div>
-                      </span>
-                    </div>
-                    { this.renderUTXOCacheInfo()}
-                    <div className="col-lg-12">
-                      <button
-                        type="button"
-                        className="btn btn-primary waves-effect waves-light pull-right"
-                        onClick={ () => this.changeSendCoinStep(1) }
-                        disabled={ !this.state.sendFrom || !this.state.sendTo || !this.state.amount }>
-                        { translate('INDEX.SEND') } { Number(this.state.amount) - Number(this.state.fee) } { this.props.ActiveCoin.coin }
-                      </button>
-                    </div>
-                  </div>
-                </form>
-              </div>
-            </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="panel">
-              <div className="panel-body">
-                <div className="row">
-                  <div className="col-xs-12">
-                    <strong>{ translate('INDEX.TO') }</strong>
-                  </div>
-                  <div className="col-lg-6 col-sm-6 col-xs-12">{ this.state.sendTo }</div>
-                  <div className="col-lg-6 col-sm-6 col-xs-6">
-                    { this.state.amount } { this.props.ActiveCoin.coin }
-                  </div>
-                  <div className="col-lg-6 col-sm-6 col-xs-12">{ translate('INDEX.TX_FEE_REQ') }</div>
-                  <div className="col-lg-6 col-sm-6 col-xs-6">
-                    { this.state.fee } { this.props.ActiveCoin.coin }
-                  </div>
-                </div>
-                <br />
-
-                <div className="row">
-                  <div className="col-xs-12">
-                    <strong>{ translate('INDEX.FROM') }</strong>
-                  </div>
-                  <div className="col-lg-6 col-sm-6 col-xs-12">{ this.props.Dashboard.activeHandle[this.props.ActiveCoin.coin] }</div>
-                  <div className="col-lg-6 col-sm-6 col-xs-6 confirm-currency-send-container">
-                    { Number(this.state.amount) - Number(this.state.fee) } { this.props.ActiveCoin.coin }
-                  </div>
-                </div>
-                <div className="widget-body-footer">
-                  <a
-                    className="btn btn-default waves-effect waves-light"
-                    onClick={ () => this.changeSendCoinStep(0) }>{ translate('INDEX.BACK') }</a>
-                  <div className="widget-actions pull-right">
-                    <button
-                      type="button"
-                      className="btn btn-primary"
-                      onClick={ () => this.changeSendCoinStep(2) }>{ translate('INDEX.CONFIRM') }</button>
-                  </div>
-                </div>
-              </div>
-            </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="panel">
-              <div className="panel-heading">
-                <h4 className="panel-title">{ translate('INDEX.TRANSACTION_RESULT') }</h4>
-                <div className={ !this.state.sendSig ? 'hide' : 'center' }>
-                  { translate('SEND.YOU_PICKED_OPT') }
-                </div>
-                <table className="table table-hover table-striped">
-                  <thead>
-                    <tr>
-                      <th>{ translate('INDEX.KEY') }</th>
-                      <th>{ translate('INDEX.INFO') }</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                  { this.renderSendCoinResponse() }
-                  </tbody>
-                </table>
-                <div className="widget-body-footer">
-                  <div className="widget-actions margin-bottom-15 margin-right-15">
-                    <button
-                      type="button"
-                      className="btn btn-primary"
-                      onClick={ () => this.changeSendCoinStep(0) }
-                      disabled={ this.state.utxoMethodInProgress }>{ !this.state.utxoMethodInProgress ? translate('INDEX.MAKE_ANOTHER_TX') : translate('SEND.PLEASE_WAIT') + '...' }</button>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      );
-    } else {
-      return null;
+      return SendCoinRender.call(this);
     }
+
+    return null;
   }
 }
 

react/src/components/dashboard/sendCoin.render.js

@@ -0,0 +1,336 @@
+import React from 'react';
+import { translate } from '../../translate/translate';
+import {
+  secondsElapsedToString,
+  secondsToString
+} from '../../util/time';
+
+export const UTXOCacheInfoRender = function(refreshCacheData, isReadyToUpdate, waitUntilCallIsFinished, timestamp) {
+  return (
+    <div className="col-lg-12">
+      <hr />
+      { translate('SEND.TOTAL_UTXO_AVAILABLE') }: { refreshCacheData ? refreshCacheData.data && refreshCacheData.data.length : translate('SEND.PRESS_UPDATE_BTN') }<br />
+      <div className={ !timestamp ? 'hide' : '' }>
+        { translate('SEND.LAST_UPDATED') } @ { secondsToString(refreshCacheData ? refreshCacheData.timestamp : 0, true) } | { secondsElapsedToString(timestamp || 0) } { translate('SEND.AGO') }<br />
+      </div>
+      <div className={ isReadyToUpdate ? 'hide' : '' }>{ translate('SEND.NEXT_UPDATE_IN') } { secondsElapsedToString(600 - timestamp) }s</div>
+      <div
+        className={ 'full-width margin-bottom-10 margin-top-10 ' + (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"
+          style={{ width: 100 - (this.state.currentStackLength * 100 / this.state.totalStackLength) + '%' }}>
+          { translate('SEND.PROCESSING_REQ') }: { this.state.currentStackLength } / { this.state.totalStackLength }
+        </div>
+      </div>
+      <button
+        type="button"
+        className={ 'margin-top-10 ' + (isReadyToUpdate ? 'btn btn-primary waves-effect waves-light' : 'hide') }
+        onClick={ this._fetchNewUTXOData }
+        disabled={ waitUntilCallIsFinished }>
+        { waitUntilCallIsFinished ? translate('SEND.LOCKED_PLEASE_WAIT') + '...' : translate('SEND.UPDATE') }
+      </button>
+    </div>
+  );
+};
+
+export const SendCoinResponseRender = function () {
+  if (this.props.ActiveCoin.lastSendToResponse) {
+    let items = [];
+    const _response = this.props.ActiveCoin.lastSendToResponse;
+
+    for (let key in _response) {
+      if (key !== 'tag') {
+        items.push(
+          <tr key={ key }>
+            <td>{ key }</td>
+            <td>{ this.renderKey(key) }</td>
+          </tr>
+        );
+      }
+    }
+
+    return items;
+  } else {
+    return (
+      <div className="padding-20 text-align-center">
+        <div className="vertical-padding-10 horizontal-padding-0">
+          { translate('SEND.PROCESSING_TRANSACTION') }...<br />
+          { translate('SEND.NOTE_IT_WILL_TAKE') }.
+        </div>
+        <div className="loader-wrapper active">
+          <div className="loader-layer loader-blue">
+            <div className="loader-circle-left">
+              <div className="circle"></div>
+            </div>
+            <div className="loader-circle-gap"></div>
+            <div className="loader-circle-right">
+              <div className="circle"></div>
+            </div>
+          </div>
+          <div className="loader-layer loader-red">
+            <div className="loader-circle-left">
+              <div className="circle"></div>
+            </div>
+            <div className="loader-circle-gap"></div>
+            <div className="loader-circle-right">
+              <div className="circle"></div>
+            </div>
+          </div>
+          <div className="loader-layer loader-green">
+            <div className="loader-circle-left">
+              <div className="circle"></div>
+            </div>
+            <div className="loader-circle-gap"></div>
+            <div className="loader-circle-right">
+              <div className="circle"></div>
+            </div>
+          </div>
+          <div className="loader-layer loader-yellow">
+            <div className="loader-circle-left">
+              <div className="circle"></div>
+            </div>
+            <div className="loader-circle-gap"></div>
+            <div className="loader-circle-right">
+              <div className="circle"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export const OASendUIRender = function () {
+  return (
+    <div className="row">
+      <div className="col-lg-6 form-group form-material">
+        <label
+          className="control-label"
+          htmlFor="kmdWalletSendTo">Fetch OpenAlias recipient address</label>
+        <input
+          type="text"
+          className="form-control"
+          name="sendToOA"
+          onChange={ this.updateInput }
+          id="kmdWalletSendTo"
+          placeholder="Enter an alias as address@site.com"
+          autoComplete="off"
+          required />
+      </div>
+      <div className="col-lg-6 form-group form-material">
+        <button
+          type="button"
+          className="btn btn-primary waves-effect waves-light"
+          onClick={ this.getOAdress }>
+          Get address
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export const SendApiTypeSelectorRender = function () {
+  return (
+    <div className="row">
+      <div className="col-lg-10 margin-bottom-10">
+            <span className="pointer">
+              <label className="switch">
+                <input type="checkbox" checked={ this.state.sendApiType } />
+                <div className="slider" onClick={ this.toggleSendAPIType }></div>
+              </label>
+              <div className="toggle-label" onClick={ this.toggleSendAPIType }>{ translate('SEND.SEND_VIA') } (sendtoaddress API)</div>
+            </span>
+      </div>
+    </div>
+  );
+};
+
+export const SendCoinRender = function () {
+  return (
+    <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' }>
+            <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' }>
+            <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' }>
+            <span className="step-number">3</span>
+            <div className="step-desc">
+              <span className="step-title">{ translate('INDEX.PROCESSING_TX') }</span>
+              <p>{ translate('INDEX.PROCESSING_DETAILS') }</p>
+            </div>
+          </div>
+        </div>
+
+        <div className={ this.state.currentStep === 0 ? 'panel' : 'panel 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">
+              { this.renderSendApiTypeSelector() }
+              <div className="row">
+                <div className={ this.props.ActiveCoin.mode === 'basilisk' ? 'col-xlg-12 form-group form-material' : 'hide' }>
+                  <label className="control-label" htmlFor="edexcoinSendFrom">{ translate('INDEX.SEND_FROM') }</label>
+                  { this.renderAddressList() }
+                </div>
+              </div>
+              { this.renderOASendUI() }
+              <div className="row">
+                <div className="col-xlg-12 form-group form-material">
+                  <label className="control-label" htmlFor="edexcoinSendTo">{ translate('INDEX.SEND_TO') }</label>
+                  <input
+                    type="text"
+                    className="form-control"
+                    id="edexcoinSendTo"
+                    name="sendTo"
+                    placeholder={ translate('SEND.ENTER_AN_ADDRESS') }
+                    autoComplete="off"
+                    value={ this.state.sendTo }
+                    onChange={ this.updateInput }
+                    required />
+                </div>
+                <div className="col-lg-6 form-group form-material">
+                  <label className="control-label" htmlFor="edexcoinAmount">
+                    { this.props.ActiveCoin.coin }
+                  </label>
+                  <input
+                    type="text"
+                    className="form-control"
+                    id="edexcoinAmount"
+                    name="amount"
+                    placeholder="0.000"
+                    autoComplete="off"
+                    onChange={ this.updateInput } />
+                </div>
+                <div className="col-lg-6 form-group form-material">
+                  <label className="control-label" htmlFor="edexcoinFee">{ translate('INDEX.FEE') }</label>
+                  <input
+                    type="text"
+                    className="form-control"
+                    id="edexcoinFee"
+                    name="fee"
+                    defaultValue={ this.state.fee }
+                    value={ this.state.fee }
+                    placeholder="0.000"
+                    autoComplete="off"
+                    onChange={ this.updateInput } />
+                </div>
+                <div className="col-lg-12">
+                      <span>
+                        <strong>{ translate('INDEX.TOTAL') } ({ translate('INDEX.AMOUNT_SM') } - txfee):</strong> { Number(this.state.amount) - Number(this.state.fee) } { this.props.ActiveCoin.coin }
+                      </span>
+                </div>
+                <div className={ this.state.sendApiType ? 'hide' : 'col-lg-10 margin-top-30' }>
+                      <span className="pointer">
+                        <label className="switch">
+                          <input type="checkbox" checked={ this.state.sendSig } />
+                          <div className="slider" onClick={ this.toggleSendSig }></div>
+                        </label>
+                        <div className="toggle-label" onClick={ this.toggleSendSig }>{ translate('INDEX.DONT_SEND') }</div>
+                      </span>
+                </div>
+                { this.renderUTXOCacheInfo()}
+                <div className="col-lg-12">
+                  <button
+                    type="button"
+                    className="btn btn-primary waves-effect waves-light pull-right"
+                    onClick={ () => this.changeSendCoinStep(1) }
+                    disabled={ !this.state.sendFrom || !this.state.sendTo || !this.state.amount }>
+                    { translate('INDEX.SEND') } { Number(this.state.amount) - Number(this.state.fee) } { this.props.ActiveCoin.coin }
+                  </button>
+                </div>
+              </div>
+            </form>
+          </div>
+        </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="panel">
+          <div className="panel-body">
+            <div className="row">
+              <div className="col-xs-12">
+                <strong>{ translate('INDEX.TO') }</strong>
+              </div>
+              <div className="col-lg-6 col-sm-6 col-xs-12">{ this.state.sendTo }</div>
+              <div className="col-lg-6 col-sm-6 col-xs-6">
+                { this.state.amount } { this.props.ActiveCoin.coin }
+              </div>
+              <div className="col-lg-6 col-sm-6 col-xs-12">{ translate('INDEX.TX_FEE_REQ') }</div>
+              <div className="col-lg-6 col-sm-6 col-xs-6">
+                { this.state.fee } { this.props.ActiveCoin.coin }
+              </div>
+            </div>
+            <br />
+
+            <div className="row">
+              <div className="col-xs-12">
+                <strong>{ translate('INDEX.FROM') }</strong>
+              </div>
+              <div className="col-lg-6 col-sm-6 col-xs-12">{ this.props.Dashboard.activeHandle[this.props.ActiveCoin.coin] }</div>
+              <div className="col-lg-6 col-sm-6 col-xs-6 confirm-currency-send-container">
+                { Number(this.state.amount) - Number(this.state.fee) } { this.props.ActiveCoin.coin }
+              </div>
+            </div>
+            <div className="widget-body-footer">
+              <a
+                className="btn btn-default waves-effect waves-light"
+                onClick={ () => this.changeSendCoinStep(0) }>{ translate('INDEX.BACK') }</a>
+              <div className="widget-actions pull-right">
+                <button
+                  type="button"
+                  className="btn btn-primary"
+                  onClick={ () => this.changeSendCoinStep(2) }>{ translate('INDEX.CONFIRM') }</button>
+              </div>
+            </div>
+          </div>
+        </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="panel">
+          <div className="panel-heading">
+            <h4 className="panel-title">{ translate('INDEX.TRANSACTION_RESULT') }</h4>
+            <div className={ !this.state.sendSig ? 'hide' : 'center' }>
+              { translate('SEND.YOU_PICKED_OPT') }
+            </div>
+            <table className="table table-hover table-striped">
+              <thead>
+              <tr>
+                <th>{ translate('INDEX.KEY') }</th>
+                <th>{ translate('INDEX.INFO') }</th>
+              </tr>
+              </thead>
+              <tbody>
+              { this.renderSendCoinResponse() }
+              </tbody>
+            </table>
+            <div className="widget-body-footer">
+              <div className="widget-actions margin-bottom-15 margin-right-15">
+                <button
+                  type="button"
+                  className="btn btn-primary"
+                  onClick={ () => this.changeSendCoinStep(0) }
+                  disabled={ this.state.utxoMethodInProgress }>{ !this.state.utxoMethodInProgress ? translate('INDEX.MAKE_ANOTHER_TX') : translate('SEND.PLEASE_WAIT') + '...' }</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

react/src/components/dashboard/settings.js

@@ -10,12 +10,15 @@ import {
   addPeerNode,
   getAppConfig,
   saveAppConfig,
-  getAppInfo
+  getAppInfo,
+  shepherdCli
 } from '../../actions/actionCreators';
 import Store from '../../store';
-import AddCoinOptionsCrypto from '../addcoin/addcoinOptionsCrypto';
-import AddCoinOptionsAC from '../addcoin/addcoinOptionsAC';
-import AddCoinOptionsACFiat from '../addcoin/addcoinOptionsACFiat';
+
+import {
+  AppInfoTabRender,
+  SettingsRender
+} from './settings.render';
 
 /*
   TODO:
@@ -23,7 +26,6 @@ import AddCoinOptionsACFiat from '../addcoin/addcoinOptionsACFiat';
   2) add fiat section
   3) kickstart section
   4) batch export/import wallet addresses
-  5) export keys, add coin selector
 */
 class Settings extends React.Component {
   constructor(props) {
@@ -35,6 +37,11 @@ class Settings extends React.Component {
       activeTabHeight: '0',
       appSettings: {},
       tabElId: null,
+      cliCmdString: null,
+      cliCoin: null,
+      cliResponse: null,
+      exportWifKeysRaw: false,
+      seedInputVisibility: false,
     };
     this.exportWifKeys = this.exportWifKeys.bind(this);
     this.updateInput = this.updateInput.bind(this);
@@ -46,6 +53,8 @@ class Settings extends React.Component {
     this.renderPeersList = this.renderPeersList.bind(this);
     this.renderSNPeersList = this.renderSNPeersList.bind(this);
     this._saveAppConfig = this._saveAppConfig.bind(this);
+    this.exportWifKeysRaw = this.exportWifKeysRaw.bind(this);
+    this.toggleSeedInputVisibility = this.toggleSeedInputVisibility.bind(this);
   }
 
   componentDidMount() {
@@ -66,6 +75,16 @@ class Settings extends React.Component {
     }
   }
 
+  toggleSeedInputVisibility() {
+    this.setState({
+      seedInputVisibility: !this.state.seedInputVisibility,
+    });
+  }
+
+  execCliCmd() {
+    Store.dispatch(shepherdCli('passthru', this.state.cliCoin, this.state.cliCmd));
+  }
+
   openTab(elemId, tab) {
     setTimeout(() => {
       const _height = document.querySelector(`#${elemId} .panel-collapse .panel-body`).offsetHeight;
@@ -104,12 +123,14 @@ class Settings extends React.Component {
 
   renderPeersList() {
     if (this.state.getPeersCoin) {
-      const coin = this.state.getPeersCoin.split('|')[0];
-
-      if (this.props.Settings.rawPeers &&
-          this.state.getPeersCoin &&
-          this.props.Settings.rawPeers[coin]) {
-        return this.props.Settings.rawPeers[coin].map((ip) =>
+      const _getPeersCoin = this.state.getPeersCoin;
+      const _rawPeers = this.props.Settings.rawPeers;
+      const coin = _getPeersCoin.split('|')[0];
+
+      if (_rawPeers &&
+          _getPeersCoin &&
+          _rawPeers[coin]) {
+        return _rawPeers[coin].map((ip) =>
           <div key={ ip }>{ ip }</div>
         );
       } else {
@@ -124,97 +145,22 @@ class Settings extends React.Component {
     const releaseInfo = this.props.Settings.appInfo && this.props.Settings.appInfo.releaseInfo;
 
     if (releaseInfo) {
-      return (
-        <div className="panel" id="AppInfo" onClick={ () => this.openTab('AppInfo', 8) }>
-          <div className="panel-heading">
-            <a className={ this.state.activeTab === 8 ? 'panel-title' : 'panel-title 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' }
-            style={{ height: this.state.activeTab === 8 ? this.state.activeTabHeight + 'px' : '0' }}>
-            <div className="panel-body">
-              <div className="col-sm-12 padding-top-15">
-                <div className="row">
-                  <h5>{ translate('SETTINGS.APP_RELEASE') }</h5>
-                  <div>
-                    { translate('SETTINGS.NAME') }: { this.props.Settings.appInfo.releaseInfo.name }
-                  </div>
-                  <div>
-                    { translate('SETTINGS.VERSION') }: { this.props.Settings.appInfo.releaseInfo.version }
-                  </div>
-                  <div>
-                    { translate('SETTINGS.APP_SESSION') }: { this.props.Settings.appInfo.appSession }
-                  </div>
-                </div>
-              </div>
-              <div className="col-sm-12 padding-top-20">
-                <div className="row">
-                  <h5>{ translate('SETTINGS.SYS_INFO') }</h5>
-                  <div>
-                    { translate('SETTINGS.ARCH') }: { this.props.Settings.appInfo.sysInfo.arch }
-                  </div>
-                  <div>
-                    { translate('SETTINGS.OS_TYPE') }: { this.props.Settings.appInfo.sysInfo.os_type }
-                  </div>
-                  <div>
-                    { translate('SETTINGS.OS_PLATFORM') }: { this.props.Settings.appInfo.sysInfo.platform }
-                  </div>
-                  <div>
-                    { translate('SETTINGS.OS_RELEASE') }: { this.props.Settings.appInfo.sysInfo.os_release }
-                  </div>
-                  <div>
-                    { translate('SETTINGS.CPU') }: { this.props.Settings.appInfo.sysInfo.cpu }
-                  </div>
-                  <div>
-                    { translate('SETTINGS.CPU_CORES') }: { this.props.Settings.appInfo.sysInfo.cpu_cores }
-                  </div>
-                  <div>
-                    { translate('SETTINGS.MEM') }: { this.props.Settings.appInfo.sysInfo.totalmem_readable }
-                  </div>
-                </div>
-              </div>
-              <div className="col-sm-12 padding-top-20">
-                <div className="row">
-                  <h5>{ translate('SETTINGS.LOCATIONS') }</h5>
-                  <div>
-                    { translate('SETTINGS.CACHE') }: { this.props.Settings.appInfo.dirs.cacheLocation }
-                  </div>
-                  <div>
-                    { translate('SETTINGS.CONFIG') }: { this.props.Settings.appInfo.dirs.configLocation }
-                  </div>
-                  <div>
-                    Iguana { translate('SETTINGS.BIN') }: { this.props.Settings.appInfo.dirs.iguanaBin }
-                  </div>
-                  <div>
-                    Iguana { translate('SETTINGS.DIR') }: { this.props.Settings.appInfo.dirs.iguanaDir }
-                  </div>
-                  <div>
-                    Komodo { translate('SETTINGS.BIN') }: { this.props.Settings.appInfo.dirs.komododBin }
-                  </div>
-                  <div>
-                    Komodo { translate('SETTINGS.DIR') }: { this.props.Settings.appInfo.dirs.komodoDir }
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      );
-    } else {
-      return null;
+      return AppInfoTabRender.call(this);
     }
+
+    return null;
   }
 
   renderSNPeersList() {
     if (this.state.getPeersCoin) {
-      const coin = this.state.getPeersCoin.split('|')[0];
-
-      if (this.props.Settings.supernetPeers &&
-          this.state.getPeersCoin &&
-          this.props.Settings.supernetPeers[coin]) {
-        return this.props.Settings.supernetPeers[coin].map((ip) =>
+      const _getPeersCoin = this.state.getPeersCoin;
+      const _supernetPeers = this.props.Settings.supernetPeers;
+      const coin = _getPeersCoin.split('|')[0];
+
+      if (_supernetPeers &&
+          _getPeersCoin &&
+          _supernetPeers[coin]) {
+        return _supernetPeers[coin].map((ip) =>
           <div key={ ip }>{ ip }</div>
         );
       } else {
@@ -340,390 +286,120 @@ class Settings extends React.Component {
     );
   }
 
-  render() {
-    return (
-      <div className="margin-left-0">
-        <div className="page-content" id="section-iguana-wallet-settings">
-          <div className="row">
-            <div className="col-xlg-12 col-md-12">
-              <div className="row">
-                <div className="col-xlg-12 col-md-12">
-                  <h4 className="font-size-14 text-uppercase">{ translate('INDEX.WALLET_SETTINGS') }</h4>
-                  <div className="panel-group" id="SettingsAccordion">
-                    <div
-                      className="panel"
-                      id="WalletInfo"
-                      onClick={ () => this.openTab('WalletInfo', 0) }>
-                      <div className="panel-heading">
-                        <a className={ this.state.activeTab === 0 ? 'panel-title' : 'panel-title 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' }
-                        style={{ height: this.state.activeTab === 0 ? this.state.activeTabHeight + 'px' : '0' }}>
-                        <div className="panel-body">
-                          <table className="table">
-                            <thead>
-                              <tr>
-                                <th width="10%">{ translate('INDEX.KEY') }</th>
-                                <th>{ translate('INDEX.VALUE') }</th>
-                              </tr>
-                            </thead>
-                            <tbody>
-                              <tr>
-                                <td className="wallet-info-key">pubkey</td>
-                                <td>{ this.props.Main.activeHandle.pubkey }</td>
-                              </tr>
-                              <tr>
-                                <td className="wallet-info-key">btcpubkey</td>
-                                <td>{ this.props.Main.activeHandle.btcpubkey }</td>
-                              </tr>
-                              <tr>
-                                <td className="wallet-info-key">rmd160</td>
-                                <td>{ this.props.Main.activeHandle.rmd160 }</td>
-                              </tr>
-                              <tr>
-                                <td className="wallet-info-key">NXT</td>
-                                <td>{ this.props.Main.activeHandle.NXT }</td>
-                              </tr>
-                              <tr>
-                                <td className="wallet-info-key">notary</td>
-                                <td>{ this.props.Main.activeHandle.notary }</td>
-                              </tr>
-                              <tr>
-                                <td className="wallet-info-key">status</td>
-                                <td>{ this.props.Main.activeHandle.status }</td>
-                              </tr>
-                            </tbody>
-                          </table>
-                        </div>
-                      </div>
-                    </div>
-
-                    <div
-                      className="panel"
-                      id="AddNodeforCoin"
-                      onClick={ () => this.openTab('AddNodeforCoin', 1) }>
-                      <div className="panel-heading">
-                        <a className={ this.state.activeTab === 1 ? 'panel-title' : 'panel-title 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' }
-                        style={{ height: this.state.activeTab === 1 ? this.state.activeTabHeight + 'px' : '0' }}>
-                        <div className="panel-body">
-                          <div className="row">
-                            <div className="col-sm-6">
-                              <div className="col-sm-12">
-                                <p>{ translate('INDEX.USE_THIS_SECTION') }</p>
-                              </div>
-                              <div className="col-sm-8 col-xs-12">
-                                <div className="form-group">
-                                  <select
-                                    className="form-control form-material"
-                                    name="getPeersCoin"
-                                    onChange={ this.updateInput }>
-                                    <option>{ translate('INDEX.SELECT_COIN') }</option>
-                                    <AddCoinOptionsCrypto />
-                                    <AddCoinOptionsAC />
-                                    <AddCoinOptionsACFiat />
-                                  </select>
-                                </div>
-                              </div>
-                              <div className="col-sm-4 col-xs-12 text-align-center">
-                                <button
-                                  type="button"
-                                  className="btn btn-primary waves-effect waves-light"
-                                  onClick={ this.checkNodes }>{ translate('INDEX.CHECK_NODES') }</button>
-                              </div>
-                              <div className="col-sm-12">
-                                <h5>
-                                  SuperNET Peers:
-                                </h5>
-                                <p>{ this.renderSNPeersList() }</p>
-                                <h5>
-                                  Raw Peers:
-                                </h5>
-                                <p>{ this.renderPeersList() }</p>
-                              </div>
-                            </div>
-
-                            <div className="col-sm-6">
-                              <div className="col-sm-12">
-                                <p>{ translate('INDEX.USE_THIS_SECTION_PEER') }</p>
-                              </div>
-                              <div className="col-sm-8 col-xs-12">
-                                <div className="form-group">
-                                  <select
-                                    className="form-control form-material"
-                                    name="addNodeCoin"
-                                    onChange={ this.updateInput }>
-                                    <option>{ translate('INDEX.SELECT_COIN') }</option>
-                                    <AddCoinOptionsCrypto />
-                                    <AddCoinOptionsAC />
-                                    <AddCoinOptionsACFiat />
-                                  </select>
-                                </div>
-                                <div className="form-group">
-                                  <input
-                                    type="text"
-                                    className="form-control"
-                                    name="addPeerIP"
-                                    placeholder={ translate('SETTINGS.ADD_PEER_IP') }
-                                    onChange={ this.updateInput } />
-                                </div>
-                              </div>
-                              <div className="col-sm-4 col-xs-12 text-align-center">
-                                <button
-                                  type="button"
-                                  className="btn btn-primary waves-effect waves-light"
-                                  onClick={ this.addNode }>{ translate('INDEX.ADD_NODE') }</button>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-
-                    <div
-                      className="panel"
-                      id="DumpWallet"
-                      onClick={ () => this.openTab('DumpWallet', 2) }>
-                      <div className="panel-heading">
-                        <a className={ this.state.activeTab === 2 ? 'panel-title' : 'panel-title 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' }
-                        style={{ height: this.state.activeTab === 2 ? this.state.activeTabHeight + 'px' : '0' }}>
-                        <div className="panel-body">Wallet Backup section to be updated soon.</div>
-                      </div>
-                    </div>
-
-                    <div
-                      className="panel"
-                      id="FiatCurrencySettings"
-                      onClick={ () => this.openTab('FiatCurrencySettings', 3) }>
-                      <div className="panel-heading">
-                        <a className={ this.state.activeTab === 3 ? 'panel-title' : 'panel-title 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' }
-                        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>
-                    </div>
-
-                    <div
-                      className="panel"
-                      id="ExportKeys"
-                      onClick={ () => this.openTab('ExportKeys', 4) }>
-                      <div className="panel-heading">
-                        <a className={ this.state.activeTab === 4 ? 'panel-title' : 'panel-title 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' }
-                        style={{ height: this.state.activeTab === 4 ? this.state.activeTabHeight + 'px' : '0' }}>
-                        <div className="panel-body">
-                          <p>
-                            <div>{ this.renderLB('INDEX.ONLY_ACTIVE_WIF_KEYS') }</div><br/>
-                            <strong>
-                              <i>{ translate('INDEX.PLEASE_KEEP_KEYS_SAFE') }</i>
-                            </strong>
-                          </p>
-                          <div className="col-sm-12"></div>
-                          <form className="wifkeys-form" method="post" action="javascript:" autoComplete="off">
-                            <div className="form-group form-material floating">
-                              <input
-                                type="password"
-                                className="form-control"
-                                name="wifkeysPassphrase"
-                                id="wifkeysPassphrase"
-                                onChange={ this.updateInput } />
-                              <label className="floating-label" htmlFor="wifkeysPassphrase">{ translate('INDEX.PASSPHRASE') }</label>
-                            </div>
-                            <div className="col-sm-12 col-xs-12 text-align-center">
-                              <button
-                                type="button"
-                                className="btn btn-primary waves-effect waves-light"
-                                onClick={ this.exportWifKeys }>{ translate('INDEX.GET_WIF_KEYS') }</button>
-                            </div>
-                          </form>
-
-                          <div className="col-sm-12 padding-top-15">
-                            <div className="row">
-                              <table className={ this.props.Settings && this.props.Settings.address ? 'table show' : 'table hide' }>
-                                <tr>
-                                  <td className="width-5-percent">
-                                    <strong>{ this.props.ActiveCoin.coin }</strong>
-                                  </td>
-                                  <td>{ this.props.Settings.address }</td>
-                                </tr>
-                                <tr>
-                                  <td>
-                                    <strong>{ this.props.ActiveCoin.coin }Wif</strong>
-                                  </td>
-                                  <td>{ this.props.Settings.wifkey }</td>
-                                </tr>
-                              </table>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-
-                    <div
-                      className="panel"
-                      id="ImportKeys"
-                      onClick={ () => this.openTab('ImportKeys', 5) }>
-                      <div className="panel-heading">
-                        <a className={ this.state.activeTab === 5 ? 'panel-title' : 'panel-title 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' }
-                        style={{ height: this.state.activeTab === 5 ? this.state.activeTabHeight + 'px' : '0' }}>
-                        <div className="panel-body">
-                          <p>
-                            <div>{ translate('INDEX.IMPORT_KEYS_DESC_P1') }</div><br/>
-                            <div>{ translate('INDEX.IMPORT_KEYS_DESC_P2') }</div><br/>
-                            <div>{ translate('INDEX.IMPORT_KEYS_DESC_P3') }</div><br/>
-                            <strong>
-                              <i>{ translate('INDEX.PLEASE_KEEP_KEYS_SAFE') }</i>
-                            </strong>
-                          </p>
-                          <div className="col-sm-12"></div>
-                          <form className="wifkeys-import-form" method="post" action="javascript:" autoComplete="off">
-                            <div className="form-group form-material floating">
-                              <input
-                                type="text"
-                                className="form-control"
-                                name="importWifKey"
-                                id="importWifkey"
-                                onChange={ this.updateInput } />
-                              <label
-                                className="floating-label"
-                                htmlFor="importWifkey">{ translate('INDEX.INPUT_PRIV_KEY') }</label>
-                            </div>
-                            <div className="col-sm-12 col-xs-12 text-align-center">
-                              <button
-                                type="button"
-                                className="btn btn-primary waves-effect waves-light"
-                                onClick={ this.importWifKey }>{ translate('INDEX.IMPORT_PRIV_KEY') }</button>
-                            </div>
-                          </form>
-                        </div>
-                      </div>
-                    </div>
-
-                    <div
-                      className="panel"
-                      id="DebugLog"
-                      onClick={ () => this.openTab('DebugLog', 6) }>
-                      <div className="panel-heading">
-                        <a className={ this.state.activeTab === 6 ? 'panel-title' : 'panel-title 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' }
-                        style={{ height: this.state.activeTab === 6 ? this.state.activeTabHeight + 'px' : '0' }}>
-                        <div className="panel-body">
-                          <p>{ translate('INDEX.DEBUG_LOG_DESC') }</p>
-                          <div className="col-sm-12"></div>
-                          <form
-                            className="read-debug-log-import-form"
-                            method="post"
-                            action="javascript:"
-                            autoComplete="off">
-                            <div className="form-group form-material floating">
-                              <input
-                                type="text"
-                                className="form-control"
-                                name="debugLinesCount"
-                                id="readDebugLogLines"
-                                value={ this.state.debugLinesCount }
-                                onChange={ this.updateInput } />
-                              <label
-                                className="floating-label"
-                                htmlFor="readDebugLogLines">{ translate('INDEX.DEBUG_LOG_LINES') }</label>
-                            </div>
-                            <div className="form-group form-material floating">
-                              <select
-                                className="form-control form-material"
-                                name="debugTarget"
-                                id="settingsDelectDebugLogOptions"
-                                onChange={ this.updateInput }>
-                                <option value="iguana">Iguana</option>
-                                <option value="komodo">Komodo</option>
-                              </select>
-                              <label
-                                className="floating-label"
-                                htmlFor="settingsDelectDebugLogOptions">{ translate('INDEX.TARGET') }</label>
-                            </div>
-                            <div className="col-sm-12 col-xs-12 text-align-center">
-                              <button
-                                type="button"
-                                className="btn btn-primary waves-effect waves-light"
-                                onClick={ this.readDebugLog }>{ translate('INDEX.LOAD_DEBUG_LOG') }</button>
-                            </div>
-                            <div className="col-sm-12 col-xs-12 text-align-left">
-                              <div className="padding-top-40 padding-bottom-20 horizontal-padding-0">{ this.renderDebugLogData() }</div>
-                            </div>
-                          </form>
-                        </div>
-                      </div>
-                    </div>
-
-                    <div
-                      className="panel"
-                      id="AppSettings"
-                      onClick={ () => this.openTab('AppSettings', 7) }>
-                      <div className="panel-heading">
-                        <a className={ this.state.activeTab === 7 ? 'panel-title' : 'panel-title 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' }
-                        style={{ height: this.state.activeTab === 7 ? this.state.activeTabHeight + 'px' : '0' }}>
-                        <div className="panel-body">
-                          <p>
-                            <strong>{ translate('SETTINGS.CONFIG_RESTART_REQUIRED') }</strong>
-                          </p>
-                          <div className="col-sm-12 padding-top-15">
-                            <table>
-                              <tbody>
-                              { this.renderConfigEditForm() }
-                              </tbody>
-                            </table>
-                          </div>
-                          <div className="col-sm-12 col-xs-12 text-align-center padding-top-25 padding-bottom-25">
-                            <button
-                              type="button"
-                              className="btn btn-primary waves-effect waves-light"
-                              onClick={ this._saveAppConfig }>{ translate('SETTINGS.SAVE_APP_CONFIG') }</button>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                    { this.renderAppInfoTab() }
-                  </div>
-                </div>
-              </div>
-            </div>
+  renderCliResponse() {
+    const _cliResponse = this.props.Settings.cli;
+
+    if (_cliResponse) {
+      let _cliResponseParsed;
+
+      try {
+        _cliResponseParsed = JSON.parse(_cliResponse.result)
+      } catch(e) {
+        _cliResponseParsed = _cliResponse.result;
+      }
+
+      return (
+        <div>
+          <div>
+            <strong>CLI response:</strong>
           </div>
+          { JSON.stringify(_cliResponseParsed, null, '\t') }
         </div>
-      </div>
-    );
+      );
+    } else {
+      return null;
+    }
+  }
+
+  renderActiveCoinsList(mode) {
+    const modes = [
+      'native',
+      'basilisk',
+      'full'
+    ];
+
+    const allCoins = this.props.Main.coins;
+    let items = [];
+
+    if (allCoins) {
+      if (mode === 'all') {
+        modes.map(function(mode) {
+          allCoins[mode].map(function(coin) {
+            items.push(
+              <option value={ coin } key={ coin }>{ coin } ({ mode })</option>
+            );
+          });
+        });
+      } else {
+        allCoins[mode].map(function(coin) {
+          items.push(
+            <option value={ coin } key={ coin }>{ coin } ({ mode })</option>
+          );
+        });
+      }
+
+      return items;
+    } else {
+      return null;
+    }
+  }
+
+  renderExportWifKeysRaw() {
+    const _wifKeysResponse = this.props.Settings.wifkey;
+
+    if (_wifKeysResponse &&
+        this.state.exportWifKeysRaw) {
+      return (
+        <div className="padding-bottom-30 padding-top-30">{ JSON.stringify(_wifKeysResponse, null, '\t') }</div>
+      );
+    } else {
+      return null;
+    }
+  }
+
+  renderWifKeys() {
+    let items = [];
+
+    if (this.props.Settings.wifkey) {
+      const _wifKeys = this.props.Settings.wifkey;
+
+      for (let i = 0; i < 2; i++) {
+        items.push(
+          <tr key={ `wif-export-table-header-${i}` }>
+            <td className="padding-bottom-10 padding-top-10">
+              <strong>{ i === 0 ? 'Address list' : 'Wif key list' }</strong>
+            </td>
+            <td className="padding-bottom-10 padding-top-10"></td>
+          </tr>
+        );
+
+        for (let _key in _wifKeys) {
+          if ((i === 0 && _key.length === 3 && _key !== 'tag') ||
+              (i === 1 && _key.indexOf('wif') > -1)) {
+            items.push(
+              <tr key={ _key }>
+                <td>{ _key }</td>
+                <td className="padding-left-15">{ _wifKeys[_key] }</td>
+              </tr>
+            );
+          }
+        }
+      }
+
+      return items;
+    } else {
+      return null;
+    }
+  }
+
+  exportWifKeysRaw() {
+    this.setState(Object.assign({}, this.state, {
+      exportWifKeysRaw: !this.state.exportWifKeysRaw,
+    }));
+  }
+
+  render() {
+    return SettingsRender.call(this);
   }
 }
 

react/src/components/dashboard/settings.render.js

@@ -0,0 +1,538 @@
+import React from 'react';
+import { translate } from '../../translate/translate';
+import AddCoinOptionsCrypto from '../addcoin/addcoinOptionsCrypto';
+import AddCoinOptionsAC from '../addcoin/addcoinOptionsAC';
+import AddCoinOptionsACFiat from '../addcoin/addcoinOptionsACFiat';
+
+export const AppInfoTabRender = function() {
+  return (
+    <div className="panel" id="AppInfo" onClick={ () => this.openTab('AppInfo', 8) }>
+      <div className="panel-heading">
+        <a className={ this.state.activeTab === 8 ? 'panel-title' : 'panel-title 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' }
+        style={{ height: this.state.activeTab === 8 ? this.state.activeTabHeight + 'px' : '0' }}>
+        <div className="panel-body">
+          <div className="col-sm-12 padding-top-15">
+            <div className="row">
+              <h5>{ translate('SETTINGS.APP_RELEASE') }</h5>
+              <div>
+                { translate('SETTINGS.NAME') }: { this.props.Settings.appInfo.releaseInfo.name }
+              </div>
+              <div>
+                { translate('SETTINGS.VERSION') }: { this.props.Settings.appInfo.releaseInfo.version }
+              </div>
+              <div>
+                { translate('SETTINGS.APP_SESSION') }: { this.props.Settings.appInfo.appSession }
+              </div>
+            </div>
+          </div>
+          <div className="col-sm-12 padding-top-20">
+            <div className="row">
+              <h5>{ translate('SETTINGS.SYS_INFO') }</h5>
+              <div>
+                { translate('SETTINGS.ARCH') }: { this.props.Settings.appInfo.sysInfo.arch }
+              </div>
+              <div>
+                { translate('SETTINGS.OS_TYPE') }: { this.props.Settings.appInfo.sysInfo.os_type }
+              </div>
+              <div>
+                { translate('SETTINGS.OS_PLATFORM') }: { this.props.Settings.appInfo.sysInfo.platform }
+              </div>
+              <div>
+                { translate('SETTINGS.OS_RELEASE') }: { this.props.Settings.appInfo.sysInfo.os_release }
+              </div>
+              <div>
+                { translate('SETTINGS.CPU') }: { this.props.Settings.appInfo.sysInfo.cpu }
+              </div>
+              <div>
+                { translate('SETTINGS.CPU_CORES') }: { this.props.Settings.appInfo.sysInfo.cpu_cores }
+              </div>
+              <div>
+                { translate('SETTINGS.MEM') }: { this.props.Settings.appInfo.sysInfo.totalmem_readable }
+              </div>
+            </div>
+          </div>
+          <div className="col-sm-12 padding-top-20">
+            <div className="row">
+              <h5>{ translate('SETTINGS.LOCATIONS') }</h5>
+              <div>
+                { translate('SETTINGS.CACHE') }: { this.props.Settings.appInfo.dirs.cacheLocation }
+              </div>
+              <div>
+                { translate('SETTINGS.CONFIG') }: { this.props.Settings.appInfo.dirs.configLocation }
+              </div>
+              <div>
+                Iguana { translate('SETTINGS.BIN') }: { this.props.Settings.appInfo.dirs.iguanaBin }
+              </div>
+              <div>
+                Iguana { translate('SETTINGS.DIR') }: { this.props.Settings.appInfo.dirs.iguanaDir }
+              </div>
+              <div>
+                Komodo { translate('SETTINGS.BIN') }: { this.props.Settings.appInfo.dirs.komododBin }
+              </div>
+              <div>
+                Komodo { translate('SETTINGS.DIR') }: { this.props.Settings.appInfo.dirs.komodoDir }
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const SettingsRender = function() {
+  return (
+    <div className="margin-left-0">
+      <div className="page-content" id="section-iguana-wallet-settings">
+        <div className="row">
+          <div className="col-xlg-12 col-md-12">
+            <div className="row">
+              <div className="col-xlg-12 col-md-12">
+                <h4 className="font-size-14 text-uppercase">{ translate('INDEX.WALLET_SETTINGS') }</h4>
+                <div className="panel-group" id="SettingsAccordion">
+                  <div
+                    className="panel"
+                    id="WalletInfo"
+                    onClick={ () => this.openTab('WalletInfo', 0) }>
+                    <div className="panel-heading">
+                      <a className={ this.state.activeTab === 0 ? 'panel-title' : 'panel-title 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' }
+                      style={{ height: this.state.activeTab === 0 ? this.state.activeTabHeight + 'px' : '0' }}>
+                      <div className="panel-body">
+                        <table className="table">
+                          <thead>
+                          <tr>
+                            <th width="10%">{ translate('INDEX.KEY') }</th>
+                            <th>{ translate('INDEX.VALUE') }</th>
+                          </tr>
+                          </thead>
+                          <tbody>
+                          <tr>
+                            <td className="wallet-info-key">pubkey</td>
+                            <td>{ this.props.Main.activeHandle.pubkey }</td>
+                          </tr>
+                          <tr>
+                            <td className="wallet-info-key">btcpubkey</td>
+                            <td>{ this.props.Main.activeHandle.btcpubkey }</td>
+                          </tr>
+                          <tr>
+                            <td className="wallet-info-key">rmd160</td>
+                            <td>{ this.props.Main.activeHandle.rmd160 }</td>
+                          </tr>
+                          <tr>
+                            <td className="wallet-info-key">NXT</td>
+                            <td>{ this.props.Main.activeHandle.NXT }</td>
+                          </tr>
+                          <tr>
+                            <td className="wallet-info-key">notary</td>
+                            <td>{ this.props.Main.activeHandle.notary }</td>
+                          </tr>
+                          <tr>
+                            <td className="wallet-info-key">status</td>
+                            <td>{ this.props.Main.activeHandle.status }</td>
+                          </tr>
+                          </tbody>
+                        </table>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div
+                    className="panel"
+                    id="AddNodeforCoin"
+                    onClick={ () => this.openTab('AddNodeforCoin', 1) }>
+                    <div className="panel-heading">
+                      <a className={ this.state.activeTab === 1 ? 'panel-title' : 'panel-title 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' }
+                      style={{ height: this.state.activeTab === 1 ? this.state.activeTabHeight + 'px' : '0' }}>
+                      <div className="panel-body">
+                        <div className="row">
+                          <div className="col-sm-6">
+                            <div className="col-sm-12">
+                              <p>{ translate('INDEX.USE_THIS_SECTION') }</p>
+                            </div>
+                            <div className="col-sm-8 col-xs-12">
+                              <div className="form-group">
+                                <select
+                                  className="form-control form-material"
+                                  name="getPeersCoin"
+                                  onChange={ this.updateInput }>
+                                  <option>{ translate('INDEX.SELECT_COIN') }</option>
+                                  <AddCoinOptionsCrypto />
+                                  <AddCoinOptionsAC />
+                                  <AddCoinOptionsACFiat />
+                                </select>
+                              </div>
+                            </div>
+                            <div className="col-sm-4 col-xs-12 text-align-center">
+                              <button
+                                type="button"
+                                className="btn btn-primary waves-effect waves-light"
+                                onClick={ this.checkNodes }>{ translate('INDEX.CHECK_NODES') }</button>
+                            </div>
+                            <div className="col-sm-12">
+                              <h5>
+                                SuperNET Peers:
+                              </h5>
+                              <p>{ this.renderSNPeersList() }</p>
+                              <h5>
+                                Raw Peers:
+                              </h5>
+                              <p>{ this.renderPeersList() }</p>
+                            </div>
+                          </div>
+
+                          <div className="col-sm-6">
+                            <div className="col-sm-12">
+                              <p>{ translate('INDEX.USE_THIS_SECTION_PEER') }</p>
+                            </div>
+                            <div className="col-sm-8 col-xs-12">
+                              <div className="form-group">
+                                <select
+                                  className="form-control form-material"
+                                  name="addNodeCoin"
+                                  onChange={ this.updateInput }>
+                                  <option>{ translate('INDEX.SELECT_COIN') }</option>
+                                  <AddCoinOptionsCrypto />
+                                  <AddCoinOptionsAC />
+                                  <AddCoinOptionsACFiat />
+                                </select>
+                              </div>
+                              <div className="form-group">
+                                <input
+                                  type="text"
+                                  className="form-control"
+                                  name="addPeerIP"
+                                  placeholder={ translate('SETTINGS.ADD_PEER_IP') }
+                                  onChange={ this.updateInput } />
+                              </div>
+                            </div>
+                            <div className="col-sm-4 col-xs-12 text-align-center">
+                              <button
+                                type="button"
+                                className="btn btn-primary waves-effect waves-light"
+                                onClick={ this.addNode }>{ translate('INDEX.ADD_NODE') }</button>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div
+                    className="panel"
+                    id="DumpWallet"
+                    onClick={ () => this.openTab('DumpWallet', 2) }>
+                    <div className="panel-heading">
+                      <a className={ this.state.activeTab === 2 ? 'panel-title' : 'panel-title 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' }
+                      style={{ height: this.state.activeTab === 2 ? this.state.activeTabHeight + 'px' : '0' }}>
+                      <div className="panel-body">Wallet Backup section to be updated soon.</div>
+                    </div>
+                  </div>
+
+                  <div
+                    className="panel"
+                    id="FiatCurrencySettings"
+                    onClick={ () => this.openTab('FiatCurrencySettings', 3) }>
+                    <div className="panel-heading">
+                      <a className={ this.state.activeTab === 3 ? 'panel-title' : 'panel-title 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' }
+                      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>
+                  </div>
+
+                  <div
+                    className="panel"
+                    id="ExportKeys"
+                    onClick={ () => this.openTab('ExportKeys', 4) }>
+                    <div className="panel-heading">
+                      <a className={ this.state.activeTab === 4 ? 'panel-title' : 'panel-title 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' }
+                      style={{ height: this.state.activeTab === 4 ? this.state.activeTabHeight + 'px' : '0' }}>
+                      <div className="panel-body">
+                        <p>
+                          <div className="padding-bottom-20">{ this.renderLB('INDEX.ONLY_ACTIVE_WIF_KEYS') }</div>
+                          <div className="padding-bottom-20">
+                            <i>{ this.renderLB('SETTINGS.EXPORT_KEYS_NOTE') }</i>
+                          </div>
+                          <strong>
+                            <i>{ translate('INDEX.PLEASE_KEEP_KEYS_SAFE') }</i>
+                          </strong>
+                        </p>
+                        <div className="col-sm-12"></div>
+                        <form className="wifkeys-form" method="post" action="javascript:" autoComplete="off">
+                          <div className="form-group form-material floating">
+                            <input
+                              type={ this.state.seedInputVisibility ? 'text' : 'password' }
+                              className="form-control"
+                              name="wifkeysPassphrase"
+                              id="wifkeysPassphrase"
+                              onChange={ this.updateInput } />
+                            <i
+                              className={ this.state.seedInputVisibility ? 'seed-toggle fa fa-eye-slash' : 'seed-toggle fa fa-eye' }
+                              onClick={ this.toggleSeedInputVisibility }></i>
+                            <label className="floating-label" htmlFor="wifkeysPassphrase">{ translate('INDEX.PASSPHRASE') }</label>
+                          </div>
+                          <div className="col-sm-12 col-xs-12 text-align-center">
+                            <button
+                              type="button"
+                              className="btn btn-primary waves-effect waves-light"
+                              onClick={ this.exportWifKeys }>{ translate('INDEX.GET_WIF_KEYS') }</button>
+                          </div>
+                        </form>
+
+                        <div className="col-sm-12 padding-top-15">
+                          <div className="row">
+                            <table className="table">
+                              { this.renderWifKeys() }
+                            </table>
+                            <div className={ this.props.Settings.wifkey ? 'col-sm-12 col-xs-12 text-align-center' : 'hide' }>
+                              <button
+                                type="button"
+                                className="btn btn-primary waves-effect waves-light"
+                                onClick={ this.exportWifKeysRaw }>{ this.state.exportWifKeysRaw ? 'Hide' : 'Show' } raw data</button>
+                            </div>
+                            <div className={ this.state.exportWifKeysRaw ? 'col-sm-12 col-xs-12 text-align-center' : 'hide' }>
+                              { this.renderExportWifKeysRaw() }
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div
+                    className="panel"
+                    id="ImportKeys"
+                    onClick={ () => this.openTab('ImportKeys', 5) }>
+                    <div className="panel-heading">
+                      <a className={ this.state.activeTab === 5 ? 'panel-title' : 'panel-title 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' }
+                      style={{ height: this.state.activeTab === 5 ? this.state.activeTabHeight + 'px' : '0' }}>
+                      <div className="panel-body">
+                        <p>
+                          <div>{ translate('INDEX.IMPORT_KEYS_DESC_P1') }</div><br/>
+                          <div>{ translate('INDEX.IMPORT_KEYS_DESC_P2') }</div><br/>
+                          <div>{ translate('INDEX.IMPORT_KEYS_DESC_P3') }</div><br/>
+                          <strong>
+                            <i>{ translate('INDEX.PLEASE_KEEP_KEYS_SAFE') }</i>
+                          </strong>
+                        </p>
+                        <div className="col-sm-12"></div>
+                        <form className="wifkeys-import-form" method="post" action="javascript:" autoComplete="off">
+                          <div className="form-group form-material floating">
+                            <input
+                              type="text"
+                              className="form-control"
+                              name="importWifKey"
+                              id="importWifkey"
+                              onChange={ this.updateInput } />
+                            <label
+                              className="floating-label"
+                              htmlFor="importWifkey">{ translate('INDEX.INPUT_PRIV_KEY') }</label>
+                          </div>
+                          <div className="col-sm-12 col-xs-12 text-align-center">
+                            <button
+                              type="button"
+                              className="btn btn-primary waves-effect waves-light"
+                              onClick={ this.importWifKey }>{ translate('INDEX.IMPORT_PRIV_KEY') }</button>
+                          </div>
+                        </form>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div
+                    className="panel"
+                    id="DebugLog"
+                    onClick={ () => this.openTab('DebugLog', 6) }>
+                    <div className="panel-heading">
+                      <a className={ this.state.activeTab === 6 ? 'panel-title' : 'panel-title 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' }
+                      style={{ height: this.state.activeTab === 6 ? this.state.activeTabHeight + 'px' : '0' }}>
+                      <div className="panel-body">
+                        <p>{ translate('INDEX.DEBUG_LOG_DESC') }</p>
+                        <div className="col-sm-12"></div>
+                        <form
+                          className="read-debug-log-import-form"
+                          method="post"
+                          action="javascript:"
+                          autoComplete="off">
+                          <div className="form-group form-material floating">
+                            <input
+                              type="text"
+                              className="form-control"
+                              name="debugLinesCount"
+                              id="readDebugLogLines"
+                              value={ this.state.debugLinesCount }
+                              onChange={ this.updateInput } />
+                            <label
+                              className="floating-label"
+                              htmlFor="readDebugLogLines">{ translate('INDEX.DEBUG_LOG_LINES') }</label>
+                          </div>
+                          <div className="form-group form-material floating">
+                            <select
+                              className="form-control form-material"
+                              name="debugTarget"
+                              id="settingsDelectDebugLogOptions"
+                              onChange={ this.updateInput }>
+                              <option value="iguana">Iguana</option>
+                              <option value="komodo">Komodo</option>
+                            </select>
+                            <label
+                              className="floating-label"
+                              htmlFor="settingsDelectDebugLogOptions">{ translate('INDEX.TARGET') }</label>
+                          </div>
+                          <div className="col-sm-12 col-xs-12 text-align-center">
+                            <button
+                              type="button"
+                              className="btn btn-primary waves-effect waves-light"
+                              onClick={ this.readDebugLog }>{ translate('INDEX.LOAD_DEBUG_LOG') }</button>
+                          </div>
+                          <div className="col-sm-12 col-xs-12 text-align-left">
+                            <div className="padding-top-40 padding-bottom-20 horizontal-padding-0">{ this.renderDebugLogData() }</div>
+                          </div>
+                        </form>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div
+                    className="panel"
+                    id="AppSettings"
+                    onClick={ () => this.openTab('AppSettings', 7) }>
+                    <div className="panel-heading">
+                      <a className={ this.state.activeTab === 7 ? 'panel-title' : 'panel-title 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' }
+                      style={{ height: this.state.activeTab === 7 ? this.state.activeTabHeight + 'px' : '0' }}>
+                      <div className="panel-body">
+                        <p>
+                          <strong>{ translate('SETTINGS.CONFIG_RESTART_REQUIRED') }</strong>
+                        </p>
+                        <div className="col-sm-12 padding-top-15">
+                          <table>
+                            <tbody>
+                            { this.renderConfigEditForm() }
+                            </tbody>
+                          </table>
+                        </div>
+                        <div className="col-sm-12 col-xs-12 text-align-center padding-top-25 padding-bottom-25">
+                          <button
+                            type="button"
+                            className="btn btn-primary waves-effect waves-light"
+                            onClick={ this._saveAppConfig }>{ translate('SETTINGS.SAVE_APP_CONFIG') }</button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  { this.renderAppInfoTab() }
+
+                  <div
+                    className="panel"
+                    id="Cli"
+                    onClick={ () => this.openTab('Cli', 9) }>
+                    <div className="panel-heading">
+                      <a className={ this.state.activeTab === 9 ? 'panel-title' : 'panel-title collapsed' }>
+                        <i className="icon fa-code"></i> CLI
+                      </a>
+                    </div>
+                    <div
+                      className={ this.state.activeTab === 9 ? 'panel-collapse collapse in' : 'panel-collapse collapse' }
+                      style={{ height: this.state.activeTab === 9 ? this.state.activeTabHeight + 'px' : '0' }}>
+                      <div className="panel-body">
+                        <p>Select a coin and type in CLI compatible command</p>
+                        <div className="col-sm-12"></div>
+                        <form
+                          className="execute-cli-cmd-form"
+                          method="post"
+                          action="javascript:"
+                          autoComplete="off">
+                          <div className="form-group form-material floating">
+                            <select
+                              className="form-control form-material"
+                              name="cliCoin"
+                              id="settingsCliOptions"
+                              onChange={ this.updateInput }>
+                              <option value="">Select coin</option>
+                              { this.renderActiveCoinsList('native') }
+                            </select>
+                            <label
+                              className="floating-label"
+                              htmlFor="settingsDelectDebugLogOptions">Coin</label>
+                          </div>
+                          <div className="form-group form-material floating">
+                            <textarea
+                              type="text"
+                              className="form-control"
+                              name="cliCmd"
+                              id="cliCmd"
+                              value={ this.state.cliCmdString }
+                              onChange={ this.updateInput }></textarea>
+                            <label
+                              className="floating-label"
+                              htmlFor="readDebugLogLines">Type in CLI compatible cmd</label>
+                          </div>
+                          <div className="col-sm-12 col-xs-12 text-align-center">
+                            <button
+                              type="button"
+                              className="btn btn-primary waves-effect waves-light"
+                              disabled={ !this.state.cliCoin || !this.state.cliCmd }
+                              onClick={ () => this.execCliCmd() }>Execute</button>
+                          </div>
+                          <div className="col-sm-12 col-xs-12 text-align-left">
+                            <div className="padding-top-40 padding-bottom-20 horizontal-padding-0">
+                              { this.renderCliResponse() }
+                            </div>
+                          </div>
+                        </form>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

react/src/components/dashboard/syncOnly.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import { translate } from '../../translate/translate';
 import { getCoinTitle } from '../../util/coinHelper';
 import {
   stopInterval,
@@ -10,6 +9,12 @@ import {
 } from '../../actions/actionCreators';
 import Store from '../../store';
 
+import {
+  ProgressRender,
+  ForkItemRender,
+  SyncOnlyRender
+} from './syncOnly.render';
+
 class SyncOnly extends React.Component {
   constructor(props) {
     super(props);
@@ -92,46 +97,7 @@ class SyncOnly extends React.Component {
   }
 
   renderProgress(fork) {
-    return (
-      <div>
-        <div>
-          <div className="progress progress-sm">
-            <div
-              className={'font-size-80-percent full-width ' + (this.isFullySynced(fork) ? 'progress-bar progress-bar-striped active progress-bar-indicating progress-bar-success' : 'hide') }>
-              { translate('INDEX.BUNDLES') } ({ fork.coin }) 100.00% - ( { fork.blocks } / { fork.blocks } ) ==&gt;&gt; RT{ fork.RTheight }
-            </div>
-            <div
-              className={ 'font-size-80-percent ' + (this.isFullySynced(fork) ? 'hide' : 'progress-bar progress-bar-info progress-bar-striped active') }
-              style={{ width: fork.bundles + '%' }}>
-              { translate('INDEX.BUNDLES') } { fork.bundles }%
-            </div>
-          </div>
-        </div>
-        <div id="additional-progress-bars" className={ this.isFullySynced(fork) ? 'hide' : '' }>
-          <div className="progress progress-sm">
-            <div
-              className="progress-bar progress-bar-warning progress-bar-striped active font-size-80-percent"
-              style={{ width: fork.utxo + '%' }}>
-              utxo { fork.utxo }%
-            </div>
-          </div>
-          <div className="progress progress-sm">
-            <div
-              className="progress-bar progress-bar-danger progress-bar-striped active font-size-80-percent"
-              style={{ width: fork.balances + '%' }}>
-              { translate('INDEX.BALANCES') } { fork.balances }%
-            </div>
-          </div>
-          <div className="progress progress-sm">
-            <div
-              className="progress-bar progress-bar-success progress-bar-striped active font-size-80-percent"
-              style={{ width: fork.validated + '%' }}>
-              { translate('INDEX.VALIDATED') } { fork.validated }%
-            </div>
-          </div>
-        </div>
-      </div>
-    );
+    return ProgressRender.call(this, fork);
   }
 
   renderForksList() {
@@ -144,31 +110,7 @@ class SyncOnly extends React.Component {
           forkInfo.registry &&
           forkInfo.getinfo) {
         items.push(
-          <div key={ port } className="padding-bottom-60 full-width">
-            <div className="avatar">
-              <img
-                className="img-responsive margin-bottom-5"
-                src={ `assets/images/cryptologo/${this.renderCoinName(forkInfo.registry.coin).logo}.png` }
-                alt={ forkInfo.registry.coin }/>
-              <span className="badge up badge-success margin-bottom-5">Full</span>
-              <div className="coin-name">{ this.renderCoinName(forkInfo.registry.coin).name } ({ forkInfo.registry.coin.toUpperCase() })</div>
-              <div className="margin-top-10">
-                <span
-                  className="btn btn-primary"
-                  onClick={ () => this._stopIguanaFork(forkInfo.registry.pmid) }>
-                  <span className="fa fa-stop"></span> { translate('INDEX.STOP') }
-                </span>
-                <span
-                  className="btn btn-primary margin-left-10"
-                  onClick={ () => this._restartIguanaFork(forkInfo.registry.coin.toUpperCase(), forkInfo.registry.pmid, port) }>
-                  <span className="fa fa-undo"></span> { translate('INDEX.RESTART') }
-                </span>
-              </div>
-            </div>
-            <div className="progress-bars">
-            { this.renderProgress(forkInfo.getinfo) }
-            </div>
-          </div>
+          ForkItemRender.call(this, forkInfo, port)
         );
       }
     }
@@ -185,26 +127,7 @@ class SyncOnly extends React.Component {
   render() {
     if (this.props &&
         this.props.SyncOnly.display) {
-      return (
-        <div>
-          <div className="modal show sync-only-forks">
-            <div className="modal-dialog modal-center modal-lg">
-              <div className="modal-content">
-                <div className="modal-body modal-body-container">
-                  { this.renderForksList() }
-                </div>
-                <div className="modal-footer">
-                  <button
-                    type="button"
-                    className="btn btn-default"
-                    onClick={ this.closeSyncOnlyModal }>{ translate('INDEX.CLOSE') }</button>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div className="modal-backdrop show in"></div>
-        </div>
-      );
+      return SyncOnlyRender.call(this);
     } else {
       return null;
     }

react/src/components/dashboard/syncOnly.render.js

@@ -0,0 +1,98 @@
+import React from 'react';
+import { translate } from '../../translate/translate';
+
+export const ProgressRender = function (fork) {
+  return (
+    <div>
+      <div>
+        <div className="progress progress-sm">
+          <div
+            className={'font-size-80-percent full-width ' + (this.isFullySynced(fork) ? 'progress-bar progress-bar-striped active progress-bar-indicating progress-bar-success' : 'hide') }>
+            { translate('INDEX.BUNDLES') } ({ fork.coin }) 100.00% - ( { fork.blocks } / { fork.blocks } ) ==&gt;&gt; RT{ fork.RTheight }
+          </div>
+          <div
+            className={ 'font-size-80-percent ' + (this.isFullySynced(fork) ? 'hide' : 'progress-bar progress-bar-info progress-bar-striped active') }
+            style={{ width: fork.bundles + '%' }}>
+            { translate('INDEX.BUNDLES') } { fork.bundles }%
+          </div>
+        </div>
+      </div>
+      <div id="additional-progress-bars" className={ this.isFullySynced(fork) ? 'hide' : '' }>
+        <div className="progress progress-sm">
+          <div
+            className="progress-bar progress-bar-warning progress-bar-striped active font-size-80-percent"
+            style={{ width: fork.utxo + '%' }}>
+            utxo { fork.utxo }%
+          </div>
+        </div>
+        <div className="progress progress-sm">
+          <div
+            className="progress-bar progress-bar-danger progress-bar-striped active font-size-80-percent"
+            style={{ width: fork.balances + '%' }}>
+            { translate('INDEX.BALANCES') } { fork.balances }%
+          </div>
+        </div>
+        <div className="progress progress-sm">
+          <div
+            className="progress-bar progress-bar-success progress-bar-striped active font-size-80-percent"
+            style={{ width: fork.validated + '%' }}>
+            { translate('INDEX.VALIDATED') } { fork.validated }%
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const ForkItemRender = function (forkInfo, port) {
+  return (
+    <div key={ port } className="padding-bottom-60 full-width">
+      <div className="avatar">
+        <img
+          className="img-responsive margin-bottom-5"
+          src={ `assets/images/cryptologo/${this.renderCoinName(forkInfo.registry.coin).logo}.png` }
+          alt={ forkInfo.registry.coin }/>
+        <span className="badge up badge-success margin-bottom-5">Full</span>
+        <div className="coin-name">{ this.renderCoinName(forkInfo.registry.coin).name } ({ forkInfo.registry.coin.toUpperCase() })</div>
+        <div className="margin-top-10">
+          <span
+            className="btn btn-primary"
+            onClick={ () => this._stopIguanaFork(forkInfo.registry.pmid) }>
+            <span className="fa fa-stop"></span> { translate('INDEX.STOP') }
+          </span>
+          <span
+            className="btn btn-primary margin-left-10"
+            onClick={ () => this._restartIguanaFork(forkInfo.registry.coin.toUpperCase(), forkInfo.registry.pmid, port) }>
+            <span className="fa fa-undo"></span> { translate('INDEX.RESTART') }
+          </span>
+        </div>
+      </div>
+      <div className="progress-bars">
+        { this.renderProgress(forkInfo.getinfo) }
+      </div>
+    </div>
+  );
+};
+
+export const SyncOnlyRender = function() {
+  return (
+    <div>
+      <div className="modal show sync-only-forks">
+        <div className="modal-dialog modal-center modal-lg">
+          <div className="modal-content">
+            <div className="modal-body modal-body-container">
+              { this.renderForksList() }
+            </div>
+            <div className="modal-footer">
+              <button
+                type="button"
+                className="btn btn-default"
+                onClick={ this.closeSyncOnlyModal }>{ translate('INDEX.CLOSE') }</button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="modal-backdrop show in"></div>
+    </div>
+  );
+};

react/src/components/dashboard/walletsBalance.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import { translate } from '../../translate/translate';
 
+import WalletsBalanceRender from './walletsBalance.render';
+
 class WalletsBalance extends React.Component {
   constructor(props) {
     super(props);
@@ -94,87 +96,10 @@ class WalletsBalance extends React.Component {
         this.props.ActiveCoin.mode !== 'native' &&
         !this.props.ActiveCoin.send &&
         !this.props.ActiveCoin.receive) {
-      return (
-        <div id="wallet-widgets">
-          <div className="col-xs-12">
-            <div className={ this.isActiveCoinMode('native') || (this.isActiveCoinMode('full') && !this.isFullySynced()) ? 'col-xs-12' : 'col-xs-12 hide' }>
-              <div className="alert alert-info alert-dismissible">
-                <button className="close" type="button">
-                  <span>×</span>
-                </button>
-                <h4>{ translate('INDEX.ACTIVATING_WALLET_RT') }</h4>
-                <p>{ translate('INDEX.IGUANA_FULL_MODE_SYNC_P1') }</p>
-                <p>{ translate('INDEX.IGUANA_FULL_MODE_SYNC_P2') }</p>
-                <p className="font-weight-600">{ this.renderLB('INDEX.IGUANA_FULL_MODE_SYNC_P3') }</p>
-              </div>
-
-              <div className="alert alert-info alert-dismissible">
-                <button className="close" type="button">
-                  <span>×</span>
-                </button>
-                <h4>{ translate('INDEX.FETCHING_COIN_DATA') }</h4>
-                <p>{ translate('INDEX.IGUANA_FULL_MODE_SYNC_P1') }</p>
-                <p>{ translate('INDEX.IGUANA_FULL_MODE_SYNC_P2') }</p>
-                <p className="font-weight-600">{ this.renderLB('INDEX.IGUANA_FULL_MODE_SYNC_P3') }</p>
-              </div>
-            </div>
-
-            <div className={ this.isNativeOrBasiliskCoinMode() ? 'col-lg-4 col-xs-12' : 'col-lg-12 col-xs-12' }>
-              <div className="widget widget-shadow">
-                <div className="widget-content">
-                  <div className="padding-20 padding-top-10">
-                    <div className="clearfix">
-                      <div className="pull-left padding-vertical-10">
-                        <i className="icon fa-eye font-size-24 vertical-align-bottom margin-right-5"></i>{ translate('INDEX.BALANCE')}
-                      </div>
-                      <span className="pull-right padding-top-10 font-size-22">
-                        { this.renderBalance('main') } { this.props.ActiveCoin.coin }
-                      </span>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <div className={ this.isNativeOrBasiliskCoinMode() ? 'col-lg-4 col-xs-12' : 'col-lg-4 col-xs-12 hide' }>
-              <div className="widget widget-shadow">
-                <div className="widget-content">
-                  <div className="padding-20 padding-top-10">
-                    <div className="clearfix">
-                      <div className="pull-left padding-vertical-10">
-                        <i className="icon fa-money font-size-24 vertical-align-bottom margin-right-5"></i>{ translate('INDEX.INTEREST_EARNED') }
-                      </div>
-                      <span className="pull-right padding-top-10 font-size-22">
-                        { this.renderBalance('interest') } { this.props.ActiveCoin.coin }
-                      </span>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <div className={ this.isNativeOrBasiliskCoinMode() ? 'col-lg-4 col-xs-12' : 'col-lg-4 col-xs-12 hide' }>
-              <div className="widget widget-shadow">
-                <div className="widget-content">
-                  <div className="padding-20 padding-top-10">
-                    <div className="clearfix">
-                      <div className="pull-left padding-vertical-10">
-                        <i className="icon fa-bullseye font-size-24 vertical-align-bottom margin-right-5"></i>{ translate('INDEX.TOTAL_BALANCE') }
-                      </div>
-                      <span className="pull-right padding-top-10 font-size-22">
-                        { this.renderBalance('total') } { this.props.ActiveCoin.coin }
-                      </span>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      );
-    } else {
-      return null;
+      return WalletsBalanceRender.call(this);
     }
+
+    return null;
   }
 }
 

react/src/components/dashboard/walletsBalance.render.js

@@ -0,0 +1,85 @@
+import React from 'react';
+import { translate } from '../../translate/translate';
+
+const WalletsBalanceRender = function() {
+  return (
+    <div id="wallet-widgets">
+      <div className="col-xs-12">
+        <div className={ this.isActiveCoinMode('native') || (this.isActiveCoinMode('full') && !this.isFullySynced()) ? 'col-xs-12' : 'col-xs-12 hide' }>
+          <div className="alert alert-info alert-dismissible">
+            <button className="close" type="button">
+              <span>×</span>
+            </button>
+            <h4>{ translate('INDEX.ACTIVATING_WALLET_RT') }</h4>
+            <p>{ translate('INDEX.IGUANA_FULL_MODE_SYNC_P1') }</p>
+            <p>{ translate('INDEX.IGUANA_FULL_MODE_SYNC_P2') }</p>
+            <p className="font-weight-600">{ this.renderLB('INDEX.IGUANA_FULL_MODE_SYNC_P3') }</p>
+          </div>
+
+          <div className="alert alert-info alert-dismissible">
+            <button className="close" type="button">
+              <span>×</span>
+            </button>
+            <h4>{ translate('INDEX.FETCHING_COIN_DATA') }</h4>
+            <p>{ translate('INDEX.IGUANA_FULL_MODE_SYNC_P1') }</p>
+            <p>{ translate('INDEX.IGUANA_FULL_MODE_SYNC_P2') }</p>
+            <p className="font-weight-600">{ this.renderLB('INDEX.IGUANA_FULL_MODE_SYNC_P3') }</p>
+          </div>
+        </div>
+
+        <div className={ this.isNativeOrBasiliskCoinMode() ? 'col-lg-4 col-xs-12' : 'col-lg-12 col-xs-12' }>
+          <div className="widget widget-shadow">
+            <div className="widget-content">
+              <div className="padding-20 padding-top-10">
+                <div className="clearfix">
+                  <div className="pull-left padding-vertical-10">
+                    <i className="icon fa-eye font-size-24 vertical-align-bottom margin-right-5"></i>{ translate('INDEX.BALANCE')}
+                  </div>
+                  <span className="pull-right padding-top-10 font-size-22">
+                    { this.renderBalance('main') } { this.props.ActiveCoin.coin }
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className={ this.isNativeOrBasiliskCoinMode() ? 'col-lg-4 col-xs-12' : 'col-lg-4 col-xs-12 hide' }>
+          <div className="widget widget-shadow">
+            <div className="widget-content">
+              <div className="padding-20 padding-top-10">
+                <div className="clearfix">
+                  <div className="pull-left padding-vertical-10">
+                    <i className="icon fa-money font-size-24 vertical-align-bottom margin-right-5"></i>{ translate('INDEX.INTEREST_EARNED') }
+                  </div>
+                  <span className="pull-right padding-top-10 font-size-22">
+                    { this.renderBalance('interest') } { this.props.ActiveCoin.coin }
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className={ this.isNativeOrBasiliskCoinMode() ? 'col-lg-4 col-xs-12' : 'col-lg-4 col-xs-12 hide' }>
+          <div className="widget widget-shadow">
+            <div className="widget-content">
+              <div className="padding-20 padding-top-10">
+                <div className="clearfix">
+                  <div className="pull-left padding-vertical-10">
+                    <i className="icon fa-bullseye font-size-24 vertical-align-bottom margin-right-5"></i>{ translate('INDEX.TOTAL_BALANCE') }
+                  </div>
+                  <span className="pull-right padding-top-10 font-size-22">
+                    { this.renderBalance('total') } { this.props.ActiveCoin.coin }
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default WalletsBalanceRender;

react/src/components/dashboard/walletsBasiliskConnection.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { translate } from '../../translate/translate';
 import { basiliskConnection } from '../../actions/actionCreators';
 import Store from '../../store';
+import WalletsBasiliskConnectionRender from './walletsBasiliskConnection.render';
 
 class WalletsBasiliskConnection extends React.Component {
   constructor(props) {
@@ -26,75 +26,7 @@ class WalletsBasiliskConnection extends React.Component {
 
   render() {
     if (this.isBasiliskConnection()) {
-      return (
-        <div onKeyDown={ (event) => this.handleKeydown(event) }>
-          <div className="modal show" id="RefreshBasiliskConnectionsMdl">
-            <div className="modal-dialog modal-center modal-md">
-              <div className="modal-content">
-                <div className="modal-header bg-orange-a400 wallet-send-header">
-                  <h4 className="modal-title white">
-                    <span className="icon fa-refresh no-margin"></span> { translate('INDEX.REFRESHING_BASILISK_NET') }...
-                  </h4>
-                  <button type="button" className="close btn-close" onClick={ this.basiliskConnectionAction }>
-                    <span>&times;</span>
-                    <span className="sr-only">{ translate('INDEX.CLOSE') }</span>
-                  </button>
-                </div>
-                <div className="modal-body text-align-center">
-                  <div className="loader-wrapper active">
-                    <div className="loader-layer loader-blue">
-                      <div className="loader-circle-left">
-                        <div className="circle"></div>
-                      </div>
-                      <div className="loader-circle-gap"></div>
-                      <div className="loader-circle-right">
-                        <div className="circle"></div>
-                      </div>
-                    </div>
-                    <div className="loader-layer loader-red">
-                      <div className="loader-circle-left">
-                        <div className="circle"></div>
-                      </div>
-                      <div className="loader-circle-gap"></div>
-                      <div className="loader-circle-right">
-                        <div className="circle"></div>
-                      </div>
-                    </div>
-                    <div className="loader-layer loader-green">
-                      <div className="loader-circle-left">
-                        <div className="circle"></div>
-                      </div>
-                      <div className="loader-circle-gap"></div>
-                      <div className="loader-circle-right">
-                        <div className="circle"></div>
-                      </div>
-                    </div>
-                    <div className="loader-layer loader-yellow">
-                      <div className="loader-circle-left">
-                        <div className="circle"></div>
-                      </div>
-                      <div className="loader-circle-gap"></div>
-                      <div className="loader-circle-right">
-                        <div className="circle"></div>
-                      </div>
-                    </div>
-                  </div>
-                  <h5 className="text-left">
-                    { `${translate('IAPI.CON_STATUS')}... ${this.props.Dashboard.connectedNotaries.current}/${this.props.Dashboard.connectedNotaries.total}:${this.props.Dashboard.connectedNotaries.currentNodeName}` } <span className="pull-right" id="basilisk-connections-refresh-percent">{ Math.floor(this.props.Dashboard.connectedNotaries.current * 100 / this.props.Dashboard.connectedNotaries.total) }%</span>
-                  </h5>
-                  <div className="progress progress-sm">
-                    <div className="progress-bar progress-bar-info progress-bar-striped active font-size-80-percent" style={{ width: Math.floor(this.props.Dashboard.connectedNotaries.current * 100 / this.props.Dashboard.connectedNotaries.total) + '%' }} role="progressbar" id="basilisk-connections-refresh-progress-bar"></div>
-                  </div>
-                  <pre id="basilisk-connections-refresh-status-output no-padding">
-                  { this.props.Dashboard.connectedNotaries.failedToConnectNodes ? `Failed: ${this.props.Dashboard.connectedNotaries.failedToConnectNodes}` : null }
-                  </pre>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div className="modal-backdrop show in"></div>
-        </div>
-      );
+      return WalletsBasiliskConnectionRender.call(this);
     } else {
       return null;
     }

react/src/components/dashboard/walletsBasiliskConnection.render.js

@@ -0,0 +1,76 @@
+import React from 'react';
+import { translate } from '../../translate/translate';
+
+const WalletsBasiliskConnectionRender = function() {
+  return (
+    <div onKeyDown={ (event) => this.handleKeydown(event) }>
+      <div className="modal show" id="RefreshBasiliskConnectionsMdl">
+        <div className="modal-dialog modal-center modal-md">
+          <div className="modal-content">
+            <div className="modal-header bg-orange-a400 wallet-send-header">
+              <h4 className="modal-title white">
+                <span className="icon fa-refresh no-margin"></span> { translate('INDEX.REFRESHING_BASILISK_NET') }...
+              </h4>
+              <button type="button" className="close btn-close" onClick={ this.basiliskConnectionAction }>
+                <span>&times;</span>
+                <span className="sr-only">{ translate('INDEX.CLOSE') }</span>
+              </button>
+            </div>
+            <div className="modal-body text-align-center">
+              <div className="loader-wrapper active">
+                <div className="loader-layer loader-blue">
+                  <div className="loader-circle-left">
+                    <div className="circle"></div>
+                  </div>
+                  <div className="loader-circle-gap"></div>
+                  <div className="loader-circle-right">
+                    <div className="circle"></div>
+                  </div>
+                </div>
+                <div className="loader-layer loader-red">
+                  <div className="loader-circle-left">
+                    <div className="circle"></div>
+                  </div>
+                  <div className="loader-circle-gap"></div>
+                  <div className="loader-circle-right">
+                    <div className="circle"></div>
+                  </div>
+                </div>
+                <div className="loader-layer loader-green">
+                  <div className="loader-circle-left">
+                    <div className="circle"></div>
+                  </div>
+                  <div className="loader-circle-gap"></div>
+                  <div className="loader-circle-right">
+                    <div className="circle"></div>
+                  </div>
+                </div>
+                <div className="loader-layer loader-yellow">
+                  <div className="loader-circle-left">
+                    <div className="circle"></div>
+                  </div>
+                  <div className="loader-circle-gap"></div>
+                  <div className="loader-circle-right">
+                    <div className="circle"></div>
+                  </div>
+                </div>
+              </div>
+              <h5 className="text-left">
+                { `${translate('IAPI.CON_STATUS')}... ${this.props.Dashboard.connectedNotaries.current}/${this.props.Dashboard.connectedNotaries.total}:${this.props.Dashboard.connectedNotaries.currentNodeName}` } <span className="pull-right" id="basilisk-connections-refresh-percent">{ Math.floor(this.props.Dashboard.connectedNotaries.current * 100 / this.props.Dashboard.connectedNotaries.total) }%</span>
+              </h5>
+              <div className="progress progress-sm">
+                <div className="progress-bar progress-bar-info progress-bar-striped active font-size-80-percent" style={{ width: Math.floor(this.props.Dashboard.connectedNotaries.current * 100 / this.props.Dashboard.connectedNotaries.total) + '%' }} role="progressbar" id="basilisk-connections-refresh-progress-bar"></div>
+              </div>
+              <pre id="basilisk-connections-refresh-status-output no-padding">
+                { this.props.Dashboard.connectedNotaries.failedToConnectNodes ? `Failed: ${this.props.Dashboard.connectedNotaries.failedToConnectNodes}` : null }
+                </pre>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="modal-backdrop show in"></div>
+    </div>
+  );
+};
+
+export default WalletsBasiliskConnectionRender;

react/src/components/dashboard/walletsBasiliskRefresh.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { translate } from '../../translate/translate';
+import WalletsBasiliskRefreshRender from './walletsBasiliskRefresh.render';
 
 class WalletsBasiliskRefresh extends React.Component {
   isBasiliskRefresh() {
@@ -9,40 +9,10 @@ class WalletsBasiliskRefresh extends React.Component {
 
   render() {
     if (this.isBasiliskRefresh()) {
-      return (
-        <div id="edexcoin_dashboard_basilisk_refresh_status">
-          <div className="col-xs-12 margin-top-20">
-            <div className="col-xs-12">
-              <div className="panel">
-                <div className="panel-heading">
-                  <h3 className="panel-title">{ translate('INDEX.FETCHING_BASILISK_DATA') }</h3>
-                  <div className="panel-actions">
-                    <a className="panel-action icon md-refresh-alt"></a>
-                  </div>
-                </div>
-                <div className="table-responsive">
-                  <table className="table table-hover table-striped">
-                    <thead>
-                      <tr>
-                        <th>{ translate('INDEX.ADDRESS') }</th>
-                        <th>{ translate('INDEX.LIST_UNSPENT') }</th>
-                        <th>{ translate('INDEX.LIST_TRANSACTIONS') }</th>
-                        <th>{ translate('INDEX.GET_BALANCE') }</th>
-                        <th>{ translate('INDEX.REFRESH') }</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                    </tbody>
-                  </table>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      );
-    } else {
-      return null;
+      return WalletsBasiliskRefreshRender.call(this);
     }
+
+    return null;
   }
 }
 

react/src/components/dashboard/walletsBasiliskRefresh.render.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { translate } from '../../translate/translate';
+
+const WalletsBasiliskRefreshRender = function() {
+  return (
+    <div id="edexcoin_dashboard_basilisk_refresh_status">
+      <div className="col-xs-12 margin-top-20">
+        <div className="col-xs-12">
+          <div className="panel">
+            <div className="panel-heading">
+              <h3 className="panel-title">{ translate('INDEX.FETCHING_BASILISK_DATA') }</h3>
+              <div className="panel-actions">
+                <a className="panel-action icon md-refresh-alt"></a>
+              </div>
+            </div>
+            <div className="table-responsive">
+              <table className="table table-hover table-striped">
+                <thead>
+                <tr>
+                  <th>{ translate('INDEX.ADDRESS') }</th>
+                  <th>{ translate('INDEX.LIST_UNSPENT') }</th>
+                  <th>{ translate('INDEX.LIST_TRANSACTIONS') }</th>
+                  <th>{ translate('INDEX.GET_BALANCE') }</th>
+                  <th>{ translate('INDEX.REFRESH') }</th>
+                </tr>
+                </thead>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default WalletsBasiliskRefreshRender;

react/src/components/dashboard/walletsCacheData.js

@@ -1,10 +1,9 @@
 import React from 'react';
-import { translate } from '../../translate/translate';
 import { secondsToString } from '../../util/time';
 import { toggleViewCacheModal } from '../../actions/actionCreators';
 import Store from '../../store';
-import Tree, { TreeNode } from 'rc-tree';
-import { animation } from '../../util/rc-tree-animate';
+import { TreeNode } from 'rc-tree';
+import WalletsCacheDataRender from './walletsCacheData.render';
 
 // TODO: refresh data render
 
@@ -160,37 +159,7 @@ class WalletsCacheData extends React.Component {
         this.props.ActiveCoin.mode === 'basilisk' &&
         this.props.Dashboard.displayViewCacheModal) {
 
-      return (
-        <div>
-          <div className="modal show">
-            <div className="modal-dialog modal-center modal-lg">
-              <div className="modal-content">
-                <div className="modal-body modal-body-container">
-                  <div className="panel nav-tabs-horizontal">
-                    <div className="panel-body">
-                      <div className="tab-content">
-                        <div className="tab-pane active">
-                          { this.renderNotariesFetching() }
-                          <Tree defaultExpandAll={ false } openAnimation={ animation }>
-                          { this.renderCoinRootNodes() }
-                          </Tree>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div className="modal-footer">
-                  <button
-                    type="button"
-                    className="btn btn-default"
-                    onClick={ this.closeViewCacheModal }>{ translate('INDEX.CLOSE') }</button>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div className="modal-backdrop show in"></div>
-        </div>
-      );
+      return WalletsCacheDataRender.call(this);
     } else {
       return null;
     }

react/src/components/dashboard/walletsCacheData.render.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { translate } from '../../translate/translate';
+import { animation } from '../../util/rc-tree-animate';
+import { TreeNode } from 'rc-tree';
+
+const WalletsCacheDataRender = function() {
+  return (
+    <div>
+      <div className="modal show">
+        <div className="modal-dialog modal-center modal-lg">
+          <div className="modal-content">
+            <div className="modal-body modal-body-container">
+              <div className="panel nav-tabs-horizontal">
+                <div className="panel-body">
+                  <div className="tab-content">
+                    <div className="tab-pane active">
+                      { this.renderNotariesFetching() }
+                      <Tree defaultExpandAll={ false } openAnimation={ animation }>
+                        { this.renderCoinRootNodes() }
+                      </Tree>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div className="modal-footer">
+              <button
+                type="button"
+                className="btn btn-default"
+                onClick={ this.closeViewCacheModal }>{ translate('INDEX.CLOSE') }</button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="modal-backdrop show in"></div>
+    </div>
+  );
+};
+
+export default WalletsCacheDataRender;

react/src/components/dashboard/walletsData.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import Config from '../../config';
 import { translate } from '../../translate/translate';
-import { secondsToString } from '../../util/time';
 import { sortByDate } from '../../util/sort';
 import {
   basiliskRefresh,
@@ -20,11 +19,15 @@ import {
   fetchUtxoCache
 } from '../../actions/actionCreators';
 import Store from '../../store';
-
-import WalletsBasiliskRefresh from './walletsBasiliskRefresh';
-import WalletsBasiliskConnection from './walletsBasiliskConnection';
-import WalletsNotariesList from './walletsNotariesList';
-import WalletsCacheData from './walletsCacheData';
+import {
+  PaginationItemRender,
+  PaginationItemsPerPageSelectorRender,
+  PaginationRender,
+  TxHistoryListRender,
+  UseCacheToggleRender,
+  AddressListRender,
+  WalletsDataRender
+} from  './walletsData.render';
 
 import { SocketProvider } from 'socket.io-react';
 import io from 'socket.io-client';
@@ -249,13 +252,7 @@ class WalletsData extends React.Component {
 
     for (let i=0; i < Math.ceil(this.props.ActiveCoin.txhistory.length / this.state.itemsPerPage); i++) {
       items.push(
-        <li
-          key={ `${i}-pagination-link` }
-          className={ this.state.activePage === i + 1 ? 'paginate_button active' : 'paginate_button' }>
-          <a
-            key={ `${i}-pagination` }
-            onClick={ this.state.activePage !== (i + 1) ? () => this.updateCurrentPage(i + 1) : null }>{ i + 1 }</a>
-        </li>
+        PaginationItemRender.call(this, i)
       );
     }
 
@@ -266,23 +263,7 @@ class WalletsData extends React.Component {
     if (this.props.ActiveCoin.txhistory &&
         this.state.itemsList !== 'loading' &&
         this.props.ActiveCoin.txhistory.length > 10) {
-      return (
-        <div className="dataTables_length">
-          <label>
-            { translate('INDEX.SHOW') }&nbsp;
-            <select
-              name="itemsPerPage"
-              className="form-control input-sm"
-              onChange={ this.updateInput }>
-              <option value="10">10</option>
-              <option value="25">25</option>
-              <option value="50">50</option>
-              <option value="100">100</option>
-            </select>&nbsp;
-            { translate('INDEX.ENTRIES_SM') }
-          </label>
-        </div>
-      );
+      return PaginationItemsPerPageSelectorRender.call(this);
     } else {
       return null;
     }
@@ -295,26 +276,7 @@ class WalletsData extends React.Component {
       const _paginationFrom = ((this.state.activePage - 1) * this.state.itemsPerPage) + 1;
       const _paginationTo = this.state.activePage * this.state.itemsPerPage;
 
-      return (
-        <div className="row unselectable">
-          <div className="col-sm-5">
-            <div className="dataTables_info">{ translate('INDEX.SHOWING') } { _paginationFrom } { translate('INDEX.TO_ALT') } { _paginationTo } { translate('INDEX.OF') } { this.props.ActiveCoin.txhistory.length } { translate('INDEX.ENTRIES_SM') }</div>
-          </div>
-          <div className="col-sm-7">
-            <div className="dataTables_paginate paging_simple_numbers">
-              <ul className="pagination">
-                <li className={ this.state.activePage === 1 ? 'paginate_button previous disabled' : 'paginate_button previous' }>
-                  <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' }>
-                  <a onClick={ () => this.updateCurrentPage(this.state.activePage + 1) }>{ translate('INDEX.NEXT') }</a>
-                </li>
-              </ul>
-            </div>
-          </div>
-        </div>
-      );
+      return PaginationRender.call(this, _paginationFrom, _paginationTo);
     } else {
       return null;
     }
@@ -374,21 +336,7 @@ class WalletsData extends React.Component {
           this.state.itemsList.length &&
           this.state.itemsList !== 'no data') {
         return this.state.itemsList.map((tx, index) =>
-          <tr key={ tx.txid + tx.amount }>
-            <td>{ this.renderTxType(tx.category || tx.type) }</td>
-            <td>{ tx.confirmations }</td>
-            <td>{ tx.amount || translate('DASHBOARD.UNKNOWN') }</td>
-            <td>{ secondsToString(tx.blocktime || tx.timestamp) }</td>
-            <td className={ this.props.ActiveCoin.mode === 'basilisk' ? 'hide' : '' }>{ tx.address }</td>
-            <td className={ this.props.ActiveCoin.mode === 'basilisk' ? 'text-center' : '' }>
-              <button
-                type="button"
-                className="btn btn-xs white btn-info waves-effect waves-light btn-kmdtxid"
-                onClick={ () => this.toggleTxInfoModal(!this.props.ActiveCoin.showTransactionInfo, index) }>
-                <i className="icon fa-search"></i>
-              </button>
-            </td>
-          </tr>
+          TxHistoryListRender.call(this, tx, index)
         );
       }
     }
@@ -451,17 +399,10 @@ class WalletsData extends React.Component {
   // deprecated
   renderUseCacheToggle() {
     if (this.props.ActiveCoin.mode === 'basilisk') {
-      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>
-      );
-    } else {
-      return null;
+      return UseCacheToggleRender.call(this);
     }
+
+    return null;
   }
 
   renderAddressByType(type) {
@@ -535,28 +476,7 @@ class WalletsData extends React.Component {
         this.props.Dashboard.activeHandle &&
         this.props.Dashboard.activeHandle[this.props.ActiveCoin.coin] &&
         this.props.ActiveCoin.mode === 'basilisk') {
-      return (
-        <div className={ `btn-group bootstrap-select form-control form-material showkmdwalletaddrs show-tick ${(this.state.addressSelectorOpen ? 'open' : '')}` }>
-          <button
-            type="button"
-            className="btn dropdown-toggle btn-info"
-            title={ `-${translate('KMD_NATIVE.SELECT_ADDRESS')}-` }
-            onClick={ this.openDropMenu }>
-            <span className="filter-option pull-left">{ this.renderSelectorCurrentLabel() } </span>&nbsp;
-            <span className="bs-caret">
-              <span className="caret"></span>
-            </span>
-          </button>
-          <div className="dropdown-menu open">
-            <ul className="dropdown-menu inner">
-              <li className="selected">
-                <a><span className="text"> - { translate('KMD_NATIVE.SELECT_ADDRESS') } - </span><span className="glyphicon glyphicon-ok check-mark"></span></a>
-              </li>
-              { this.renderAddressByType('public') }
-            </ul>
-          </div>
-        </div>
-      );
+      return AddressListRender.call(this);
     } else {
       return null;
     }
@@ -569,130 +489,7 @@ class WalletsData extends React.Component {
         this.props.ActiveCoin.mode !== 'native' &&
         !this.props.ActiveCoin.send &&
         !this.props.ActiveCoin.receive) {
-      return (
-        <span>
-          <WalletsBasiliskRefresh {...this.props} />
-          <WalletsBasiliskConnection {...this.props} />
-          <WalletsNotariesList {...this.props} />
-          <WalletsCacheData {...this.props} />
-          <div id="edexcoin_dashboardinfo">
-            <div className="col-xs-12 margin-top-20">
-              <div className="panel nav-tabs-horizontal">
-                <div>
-                  <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={ '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"
-                              style={{ width: 100 - (this.state.currentStackLength * 100 / this.state.totalStackLength) + '%'}}>
-                              { translate('SEND.PROCESSING_REQ') }: { this.state.currentStackLength } / { this.state.totalStackLength }
-                            </div>
-                          </div>
-                          <div
-                            className={ this.state.basiliskActionsMenu ? 'dropdown open' : 'dropdown' }
-                            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>
-                            </a>
-                            <ul className="dropdown-menu dropdown-menu-right">
-                              <li>
-                                <a onClick={ this.getDexNotariesAction }>
-                                  <i className="icon fa-sitemap"></i> { translate('INDEX.GET_NOTARY_NODES_LIST') }
-                                </a>
-                              </li>
-                              <li>
-                                <a onClick={ this.basiliskConnectionAction }>
-                                  <i className="icon wb-refresh"></i> { translate('INDEX.REFRESH_BASILISK_CONNECTIONS') }
-                                </a>
-                              </li>
-                              <li className={ !this.state.useCache ? 'hide' : '' }>
-                                <a onClick={ this.basiliskRefreshActionOne }>
-                                  <i className="icon fa-cloud-download"></i> { translate('INDEX.FETCH_WALLET_DATA') } ({ translate('INDEX.ACTIVE_ADDRESS') })
-                                </a>
-                              </li>
-                              <li className={ !this.state.useCache || this.props.ActiveCoin.addresses && this.props.ActiveCoin.addresses.public.length === 1 ? 'hide' : '' }>
-                                <a onClick={ this.basiliskRefreshAction }>
-                                  <i className="icon fa-cloud-download"></i> { translate('INDEX.FETCH_ALL_ADDR') }
-                                </a>
-                              </li>
-                              <li className={ !this.state.useCache ? 'hide' : '' }>
-                                <a onClick={ this.removeAndFetchNewCache }>
-                                  <i className="icon fa-history"></i> { translate('INDEX.REFETCH_WALLET_DATA') }
-                                </a>
-                              </li>
-                              <li className={ 'display-none ' + (!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') }
-                                </a>
-                              </li>
-                            </ul>
-                          </div>
-                        </div>
-                        <h4 className="panel-title">{ translate('INDEX.TRANSACTION_HISTORY') }</h4>
-                      </header>
-                      <div className="panel-body">
-                        <div className="row">
-                          <div className="col-sm-8">
-                          { this.renderAddressList() }
-                          </div>
-                          { this.renderUseCacheToggle }
-                        </div>
-                        <div className="row pagination-container">
-                          <div className="col-sm-6">
-                            { this.renderPaginationItemsPerPageSelector() }
-                          </div>
-                          <div className="col-sm-6">
-                            <div className="dataTables_filter">
-                              <label>
-                                { translate('INDEX.SEARCH') }: <input type="search" className="form-control input-sm" disabled="true" />
-                              </label>
-                            </div>
-                          </div>
-                        </div>
-                        <div className="row">
-                          <table className="table table-hover dataTable table-striped" width="100%">
-                            <thead>
-                              <tr>
-                                <th>{ translate('INDEX.DIRECTION') }</th>
-                                <th className="hidden-xs hidden-sm">{ translate('INDEX.CONFIRMATIONS') }</th>
-                                <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>
-                              </tr>
-                            </thead>
-                            <tbody>
-                            { this.renderTxHistoryList() }
-                            </tbody>
-                            <tfoot>
-                              <tr>
-                                <th>{ translate('INDEX.DIRECTION') }</th>
-                                <th>{ translate('INDEX.CONFIRMATIONS') }</th>
-                                <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>
-                              </tr>
-                            </tfoot>
-                          </table>
-                        </div>
-                        { this.renderPagination() }
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </span>
-      );
+      return WalletsDataRender.call(this);
     } else {
       return null;
     }

react/src/components/dashboard/walletsData.render.js

@@ -0,0 +1,245 @@
+import React from 'react';
+import { translate } from '../../translate/translate';
+import WalletsBasiliskRefresh from './walletsBasiliskRefresh';
+import WalletsBasiliskConnection from './walletsBasiliskConnection';
+import WalletsNotariesList from './walletsNotariesList';
+import WalletsCacheData from './walletsCacheData';
+import { secondsToString } from '../../util/time';
+
+export const PaginationItemRender = function(i) {
+  return (
+    <li
+      key={ `${i}-pagination-link` }
+      className={ this.state.activePage === i + 1 ? 'paginate_button active' : 'paginate_button' }>
+      <a
+        key={ `${i}-pagination` }
+        onClick={ this.state.activePage !== (i + 1) ? () => this.updateCurrentPage(i + 1) : null }>{ i + 1 }</a>
+    </li>
+  );
+};
+
+export const PaginationItemsPerPageSelectorRender = function() {
+  return (
+    <div className="dataTables_length">
+      <label>
+        { translate('INDEX.SHOW') }&nbsp;
+        <select
+          name="itemsPerPage"
+          className="form-control input-sm"
+          onChange={ this.updateInput }>
+          <option value="10">10</option>
+          <option value="25">25</option>
+          <option value="50">50</option>
+          <option value="100">100</option>
+        </select>&nbsp;
+        { translate('INDEX.ENTRIES_SM') }
+      </label>
+    </div>
+  );
+};
+
+export const PaginationRender = function(paginationFrom, paginationTo) {
+  return (
+    <div className="row unselectable">
+      <div className="col-sm-5">
+        <div className="dataTables_info">{ translate('INDEX.SHOWING') } { paginationFrom } { translate('INDEX.TO_ALT') } { paginationTo } { translate('INDEX.OF') } { this.props.ActiveCoin.txhistory.length } { translate('INDEX.ENTRIES_SM') }</div>
+      </div>
+      <div className="col-sm-7">
+        <div className="dataTables_paginate paging_simple_numbers">
+          <ul className="pagination">
+            <li className={ this.state.activePage === 1 ? 'paginate_button previous disabled' : 'paginate_button previous' }>
+              <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' }>
+              <a onClick={ () => this.updateCurrentPage(this.state.activePage + 1) }>{ translate('INDEX.NEXT') }</a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const TxHistoryListRender = function(tx, index) {
+  return (
+    <tr key={ tx.txid + tx.amount }>
+      <td>{ this.renderTxType(tx.category || tx.type) }</td>
+      <td>{ tx.confirmations }</td>
+      <td>{ tx.amount || translate('DASHBOARD.UNKNOWN') }</td>
+      <td>{ secondsToString(tx.blocktime || tx.timestamp) }</td>
+      <td className={ this.props.ActiveCoin.mode === 'basilisk' ? 'hide' : '' }>{ tx.address }</td>
+      <td className={ this.props.ActiveCoin.mode === 'basilisk' ? 'text-center' : '' }>
+        <button
+          type="button"
+          className="btn btn-xs white btn-info waves-effect waves-light btn-kmdtxid"
+          onClick={ () => this.toggleTxInfoModal(!this.props.ActiveCoin.showTransactionInfo, index) }>
+          <i className="icon fa-search"></i>
+        </button>
+      </td>
+    </tr>
+  );
+};
+
+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' : '')}` }>
+      <button
+        type="button"
+        className="btn dropdown-toggle btn-info"
+        title={ `-${translate('KMD_NATIVE.SELECT_ADDRESS')}-` }
+        onClick={ this.openDropMenu }>
+        <span className="filter-option pull-left">{ this.renderSelectorCurrentLabel() } </span>&nbsp;
+        <span className="bs-caret">
+          <span className="caret"></span>
+        </span>
+      </button>
+      <div className="dropdown-menu open">
+        <ul className="dropdown-menu inner">
+          <li className="selected">
+            <a><span className="text"> - { translate('KMD_NATIVE.SELECT_ADDRESS') } - </span><span className="glyphicon glyphicon-ok check-mark"></span></a>
+          </li>
+          { this.renderAddressByType('public') }
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+export const WalletsDataRender = function() {
+  return (
+    <span>
+      <WalletsBasiliskRefresh {...this.props} />
+      <WalletsBasiliskConnection {...this.props} />
+      <WalletsNotariesList {...this.props} />
+      <WalletsCacheData {...this.props} />
+      <div id="edexcoin_dashboardinfo">
+        <div className="col-xs-12 margin-top-20">
+          <div className="panel nav-tabs-horizontal">
+            <div>
+              <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={ '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"
+                          style={{ width: 100 - (this.state.currentStackLength * 100 / this.state.totalStackLength) + '%'}}>
+                          { translate('SEND.PROCESSING_REQ') }: { this.state.currentStackLength } / { this.state.totalStackLength }
+                        </div>
+                      </div>
+                      <div
+                        className={ this.state.basiliskActionsMenu ? 'dropdown open' : 'dropdown' }
+                        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>
+                        </a>
+                        <ul className="dropdown-menu dropdown-menu-right">
+                          <li>
+                            <a onClick={ this.getDexNotariesAction }>
+                              <i className="icon fa-sitemap"></i> { translate('INDEX.GET_NOTARY_NODES_LIST') }
+                            </a>
+                          </li>
+                          <li>
+                            <a onClick={ this.basiliskConnectionAction }>
+                              <i className="icon wb-refresh"></i> { translate('INDEX.REFRESH_BASILISK_CONNECTIONS') }
+                            </a>
+                          </li>
+                          <li className={ !this.state.useCache ? 'hide' : '' }>
+                            <a onClick={ this.basiliskRefreshActionOne }>
+                              <i className="icon fa-cloud-download"></i> { translate('INDEX.FETCH_WALLET_DATA') } ({ translate('INDEX.ACTIVE_ADDRESS') })
+                            </a>
+                          </li>
+                          <li className={ !this.state.useCache || this.props.ActiveCoin.addresses && this.props.ActiveCoin.addresses.public.length === 1 ? 'hide' : '' }>
+                            <a onClick={ this.basiliskRefreshAction }>
+                              <i className="icon fa-cloud-download"></i> { translate('INDEX.FETCH_ALL_ADDR') }
+                            </a>
+                          </li>
+                          <li className={ !this.state.useCache ? 'hide' : '' }>
+                            <a onClick={ this.removeAndFetchNewCache }>
+                              <i className="icon fa-history"></i> { translate('INDEX.REFETCH_WALLET_DATA') }
+                            </a>
+                          </li>
+                          <li className={ 'display-none ' + (!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') }
+                            </a>
+                          </li>
+                        </ul>
+                      </div>
+                    </div>
+                    <h4 className="panel-title">{ translate('INDEX.TRANSACTION_HISTORY') }</h4>
+                  </header>
+                  <div className="panel-body">
+                    <div className="row">
+                      <div className="col-sm-8">
+                        { this.renderAddressList() }
+                      </div>
+                      { this.renderUseCacheToggle }
+                    </div>
+                    <div className="row pagination-container">
+                      <div className="col-sm-6">
+                        { this.renderPaginationItemsPerPageSelector() }
+                      </div>
+                      <div className="col-sm-6">
+                        <div className="dataTables_filter">
+                          <label>
+                            { translate('INDEX.SEARCH') }: <input type="search" className="form-control input-sm" disabled="true" />
+                          </label>
+                        </div>
+                      </div>
+                    </div>
+                    <div className="row">
+                      <table className="table table-hover dataTable table-striped" width="100%">
+                        <thead>
+                          <tr>
+                            <th>{ translate('INDEX.DIRECTION') }</th>
+                            <th className="hidden-xs hidden-sm">{ translate('INDEX.CONFIRMATIONS') }</th>
+                            <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>
+                          </tr>
+                        </thead>
+                        <tbody>
+                        { this.renderTxHistoryList() }
+                        </tbody>
+                        <tfoot>
+                          <tr>
+                            <th>{ translate('INDEX.DIRECTION') }</th>
+                            <th>{ translate('INDEX.CONFIRMATIONS') }</th>
+                            <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>
+                          </tr>
+                        </tfoot>
+                      </table>
+                    </div>
+                    { this.renderPagination() }
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </span>
+  );
+};

react/src/components/dashboard/walletsHeader.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { translate } from '../../translate/translate';
+import WalletsHeaderRender from './walletsHeader.render';
 
 class WalletsHeader extends React.Component {
   hasActiveSection() {
@@ -13,113 +13,7 @@ class WalletsHeader extends React.Component {
 
   render() {
     if (this.hasActiveSection()) {
-      return (
-        <div
-          className="page-header page-header-bordered header-easydex margin-bottom-0"
-          id="easydex-header-div"
-          style={{ backgroundImage: `url("assets/images/bg/${this.props.activeSection}_transparent_header_bg.png")`, backgroundRepeat: 'no-repeat', backgroundPosition: '0%' }}>
-          <h1 className={ this.isActiveSectionJumblr() ? 'hide' : 'page-title' }>EasyDEX</h1>
-          <ol className="breadcrumb">
-            <li className={ this.isActiveSectionJumblr() ? 'hide' : 'header-easydex-section' }>{ translate('INDEX.DASHBOARD') }</li>
-            <li className={ !this.isActiveSectionJumblr() ? 'hide' : 'header-easydex-section' }>
-              <img src="assets/images/native/jumblr_header_title_logo.png" /><br /> { translate('SIDEBAR.JUMBLR_MOTTO') }
-            </li>
-          </ol>
-          <div className="page-header-actions z-index-1 display-none">
-            <div id="kmd_header_button">
-              <button
-                type="button"
-                className="bg-teal-500 btn btn-floating white waves-effect waves-float waves-light">
-                <i className="icon md-plus"></i>
-              </button>
-              <ul className="dropdown-menu animate dropdown-menu-right">
-                <li>
-                  <a>{ translate('INDEX.DASHBOARD') }</a>
-                </li>
-                <li>
-                  <a>{ translate('INDEX.SEND') }</a>
-                </li>
-                <li>
-                  <a>{ translate('INDEX.RECEIVE') }</a>
-                </li>
-                <li className="divider"></li>
-                <li>
-                  <a>{ translate('INDEX.SETTINGS') }</a>
-                </li>
-              </ul>
-            </div>
-
-            <div id="zec_header_button" className="display-none">
-              <button
-                type="button"
-                className="bg-yellow-600 btn btn-floating white waves-effect waves-float waves-light">
-                <i className="icon md-plus"></i>
-              </button>
-              <ul className="dropdown-menu animate dropdown-menu-right">
-                <li>
-                  <a>{ translate('INDEX.DASHBOARD') }</a>
-                </li>
-                <li>
-                  <a>{ translate('INDEX.SEND') }</a>
-                </li>
-                <li>
-                  <a>{ translate('INDEX.RECEIVE') }</a>
-                </li>
-                <li className="divider"></li>
-                <li>
-                  <a>{ translate('INDEX.SETTINGS') }</a>
-                </li>
-              </ul>
-            </div>
-
-            <div id="kmd_header_button">
-              <button
-                type="button"
-                className="btn white waves-effect waves-light">
-                <i className="icon fa-refresh"></i>{ translate('INDEX.REFRESH') }
-              </button>
-            </div>
-
-            <div id="kmd_header_button" className="display-none">
-              <button
-                type="button"
-                className="bg-teal-500 btn btn-floating white waves-effect waves-float waves-light">
-                <i className="icon md-plus"></i>
-              </button>
-              <ul className="dropdown-menu animate dropdown-menu-right">
-                <li>
-                  <a>{ translate('INDEX.DASHBOARD') }</a>
-                </li>
-                <li>
-                  <a>{ translate('INDEX.SEND') }</a>
-                </li>
-                <li>
-                  <a>{ translate('INDEX.RECEIVE') }</a>
-                </li>
-                <li className="divider"></li>
-                <li>
-                  <a>{ translate('INDEX.SETTINGS') }</a>
-                </li>
-              </ul>
-            </div>
-
-            <div className="row no-space width-350 hidden-xs display-none">
-              <div className="col-xs-6">
-                <div className="counter">
-                  <span className="font-weight-medium"> - BTC</span>
-                  <span className="counter-label small"> - USD</span>
-                </div>
-              </div>
-              <div className="col-xs-6">
-                <div className="counter">
-                  <span className="font-weight-medium"> - BTCD</span>
-                  <span className="counter-label small"> - USD</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      );
+      return WalletsHeaderRender.call(this);
     } else {
       return null;
     }

react/src/components/dashboard/walletsHeader.render.js

@@ -0,0 +1,114 @@
+import React from 'react';
+import { translate } from '../../translate/translate';
+
+const WalletsHeaderRender = function() {
+  return (
+    <div
+      className="page-header page-header-bordered header-easydex margin-bottom-0"
+      id="easydex-header-div"
+      style={{ backgroundImage: `url("assets/images/bg/${this.props.activeSection}_transparent_header_bg.png")`, backgroundRepeat: 'no-repeat', backgroundPosition: '0%' }}>
+      <h1 className={ this.isActiveSectionJumblr() ? 'hide' : 'page-title' }>EasyDEX</h1>
+      <ol className="breadcrumb">
+        <li className={ this.isActiveSectionJumblr() ? 'hide' : 'header-easydex-section' }>{ translate('INDEX.DASHBOARD') }</li>
+        <li className={ !this.isActiveSectionJumblr() ? 'hide' : 'header-easydex-section' }>
+          <img src="assets/images/native/jumblr_header_title_logo.png" /><br /> { translate('SIDEBAR.JUMBLR_MOTTO') }
+        </li>
+      </ol>
+      <div className="page-header-actions z-index-1 display-none">
+        <div id="kmd_header_button">
+          <button
+            type="button"
+            className="bg-teal-500 btn btn-floating white waves-effect waves-float waves-light">
+            <i className="icon md-plus"></i>
+          </button>
+          <ul className="dropdown-menu animate dropdown-menu-right">
+            <li>
+              <a>{ translate('INDEX.DASHBOARD') }</a>
+            </li>
+            <li>
+              <a>{ translate('INDEX.SEND') }</a>
+            </li>
+            <li>
+              <a>{ translate('INDEX.RECEIVE') }</a>
+            </li>
+            <li className="divider"></li>
+            <li>
+              <a>{ translate('INDEX.SETTINGS') }</a>
+            </li>
+          </ul>
+        </div>
+
+        <div id="zec_header_button" className="display-none">
+          <button
+            type="button"
+            className="bg-yellow-600 btn btn-floating white waves-effect waves-float waves-light">
+            <i className="icon md-plus"></i>
+          </button>
+          <ul className="dropdown-menu animate dropdown-menu-right">
+            <li>
+              <a>{ translate('INDEX.DASHBOARD') }</a>
+            </li>
+            <li>
+              <a>{ translate('INDEX.SEND') }</a>
+            </li>
+            <li>
+              <a>{ translate('INDEX.RECEIVE') }</a>
+            </li>
+            <li className="divider"></li>
+            <li>
+              <a>{ translate('INDEX.SETTINGS') }</a>
+            </li>
+          </ul>
+        </div>
+
+        <div id="kmd_header_button">
+          <button
+            type="button"
+            className="btn white waves-effect waves-light">
+            <i className="icon fa-refresh"></i>{ translate('INDEX.REFRESH') }
+          </button>
+        </div>
+
+        <div id="kmd_header_button" className="display-none">
+          <button
+            type="button"
+            className="bg-teal-500 btn btn-floating white waves-effect waves-float waves-light">
+            <i className="icon md-plus"></i>
+          </button>
+          <ul className="dropdown-menu animate dropdown-menu-right">
+            <li>
+              <a>{ translate('INDEX.DASHBOARD') }</a>
+            </li>
+            <li>
+              <a>{ translate('INDEX.SEND') }</a>
+            </li>
+            <li>
+              <a>{ translate('INDEX.RECEIVE') }</a>
+            </li>
+            <li className="divider"></li>
+            <li>
+              <a>{ translate('INDEX.SETTINGS') }</a>
+            </li>
+          </ul>
+        </div>
+
+        <div className="row no-space width-350 hidden-xs display-none">
+          <div className="col-xs-6">
+            <div className="counter">
+              <span className="font-weight-medium"> - BTC</span>
+              <span className="counter-label small"> - USD</span>
+            </div>
+          </div>
+          <div className="col-xs-6">
+            <div className="counter">
+              <span className="font-weight-medium"> - BTCD</span>
+              <span className="counter-label small"> - USD</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default WalletsHeaderRender;

react/src/components/dashboard/walletsNative.js

@@ -1,12 +1,5 @@
 import React from 'react';
-import { translate } from '../../translate/translate';
-import WalletsNativeAlert from './walletsNativeAlert';
-import WalletsNativeBalance from './walletsNativeBalance';
-import WalletsNativeInfo from './walletsNativeInfo';
-import WalletsNativeReceive from './walletsNativeReceive';
-import WalletsNativeSend from './walletsNativeSend';
-import WalletsNativeSyncProgress from './walletsNativeSyncProgress';
-import WalletsNativeTxHistory from './walletsNativeTxHistory';
+import WalletsNativeRender from './walletsNative.render';
 
 class WalletsNative extends React.Component {
   constructor(props) {
@@ -30,29 +23,7 @@ class WalletsNative extends React.Component {
   // <WalletsNativeAlert {...this.props} />
   render() {
     if (this.isActiveCoinModeNative()) {
-      return (
-        <div className="page margin-left-0">
-          <div className="padding-top-0">
-            <div id="easydex-header-div" className="background-color-white" style={{ 'backgroundImage': `url("assets/images/bg/${this.defaultBG()}_transparent_header_bg.png")` }}>
-              <ol className="breadcrumb">
-                <li className="header-easydex-section">
-                  <img src={ `assets/images/native/${this.defaultBG()}_header_title_logo.png` } /> <span className={ `easydex-section-image ${(this.props.ActiveCoin.coin === 'KMD' ? 'hide' : '')}` }>{ this.props.ActiveCoin.coin }</span>
-                </li>
-              </ol>
-            </div>
-            <div className="page-content">
-              <WalletsNativeSyncProgress {...this.props} />
-              <div className="row">
-                <WalletsNativeBalance {...this.props} />
-                <WalletsNativeTxHistory {...this.props} />
-                <WalletsNativeReceive {...this.props} />
-                <WalletsNativeSend {...this.props} />
-                <WalletsNativeInfo {...this.props} />
-              </div>
-            </div>
-          </div>
-        </div>
-      );
+      return WalletsNativeRender.call(this);
     } else {
       return null;
     }

react/src/components/dashboard/walletsNative.render.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import WalletsNativeBalance from './walletsNativeBalance';
+import WalletsNativeInfo from './walletsNativeInfo';
+import WalletsNativeReceive from './walletsNativeReceive';
+import WalletsNativeSend from './walletsNativeSend';
+import WalletsNativeSyncProgress from './walletsNativeSyncProgress';
+import WalletsNativeTxHistory from './walletsNativeTxHistory';
+
+const WalletsNativeRender = function() {
+  return (
+    <div className="page margin-left-0">
+      <div className="padding-top-0">
+        <div id="easydex-header-div" className="background-color-white" style={{ 'backgroundImage': `url("assets/images/bg/${this.defaultBG()}_transparent_header_bg.png")` }}>
+          <ol className="breadcrumb">
+            <li className="header-easydex-section">
+              <img src={ `assets/images/native/${this.defaultBG()}_header_title_logo.png` } /> <span className={ `easydex-section-image ${(this.props.ActiveCoin.coin === 'KMD' ? 'hide' : '')}` }>{ this.props.ActiveCoin.coin }</span>
+            </li>
+          </ol>
+        </div>
+        <div className="page-content">
+          <WalletsNativeSyncProgress {...this.props} />
+          <div className="row">
+            <WalletsNativeBalance {...this.props} />
+            <WalletsNativeTxHistory {...this.props} />
+            <WalletsNativeReceive {...this.props} />
+            <WalletsNativeSend {...this.props} />
+            <WalletsNativeInfo {...this.props} />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default WalletsNativeRender;

react/src/components/dashboard/walletsNativeAlert.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { translate } from '../../translate/translate';
+import WalletsNativeAlertRender from './walletsNativeAlert.render';
 
 class WalletsNativeAlert extends React.Component {
   hasNoProgress() {
@@ -10,24 +10,10 @@ class WalletsNativeAlert extends React.Component {
 
   render() {
     if (this.hasNoProgress()) {
-      return (
-        <div className="alert alert-danger alert-dismissible">
-          <button className="close" type="button">
-            <span>×</span>
-          </button>
-          <h4>{ translate('INDEX.OOPS_ERROR') }</h4>
-          <p>
-            <span>{ translate('INDEX.OOPS_ERROR_DESC') }</span>
-            <code>server=1</code><br/>
-            <code>rpcport=</code><br/>
-            <code>rpcuser=</code><br/>
-            <code>rpcpassword=</code>
-          </p>
-        </div>
-      );
-    } else {
-      return null;
+      return WalletsNativeAlertRender.call(this);
     }
+
+    return null;
   }
 }
 

react/src/components/dashboard/walletsNativeAlert.render.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { translate } from '../../translate/translate';
+
+const WalletsNativeAlertRender = function() {
+  return (
+    <div className="alert alert-danger alert-dismissible">
+      <button className="close" type="button">
+        <span>×</span>
+      </button>
+      <h4>{ translate('INDEX.OOPS_ERROR') }</h4>
+      <p>
+        <span>{ translate('INDEX.OOPS_ERROR_DESC') }</span>
+        <code>server=1</code><br/>
+        <code>rpcport=</code><br/>
+        <code>rpcuser=</code><br/>
+        <code>rpcpassword=</code>
+      </p>
+    </div>
+  );
+};
+
+export default WalletsNativeAlertRender;

react/src/components/dashboard/walletsNativeBalance.js

@@ -1,76 +1,14 @@
 import React from 'react';
-import { translate } from '../../translate/translate';
+import WalletsNativeBalanceRender from './walletsNativeBalance.render';
 
 class WalletsNativeBalance extends React.Component {
   render() {
     if (this.props &&
         this.props.ActiveCoin.nativeActiveSection === 'default') {
-      return (
-        <div className="col-xs-12">
-          <div className="col-lg-3 col-xs-12">
-            <div className="widget widget-shadow">
-              <div className="widget-content white bg-yellow-800">
-                <div className="padding-20 padding-top-10">
-                  <div className="clearfix">
-                    <div className="pull-left padding-vertical-10">
-                      <i className="icon fa-eye font-size-24 vertical-align-bottom margin-right-5"></i>{ translate('INDEX.TRANSPARENT_BALANCE') }
-                    </div>
-                    <span className="pull-right padding-top-10 font-size-22">{ this.props.ActiveCoin.balance.transparent ? this.props.ActiveCoin.balance.transparent : '-' }</span>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <div className="col-lg-3 col-xs-12">
-            <div className="widget widget-shadow">
-              <div className="widget-content white bg-blue-grey-800">
-                <div className="padding-20 padding-top-10">
-                  <div className="clearfix">
-                    <div className="pull-left padding-vertical-10">
-                      <i className="icon fa-eye-slash font-size-24 vertical-align-bottom margin-right-5"></i>{ translate('INDEX.Z_BALANCE') }
-                    </div>
-                    <span className="pull-right padding-top-10 font-size-22">{ this.props.ActiveCoin.balance.private ? this.props.ActiveCoin.balance.private : '-' }</span>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <div className="col-lg-3 col-xs-12">
-            <div className="widget widget-shadow">
-              <div className="widget-content white bg-cyan-700">
-                <div className="padding-20 padding-top-10">
-                  <div className="clearfix">
-                    <div className="pull-left padding-vertical-10">
-                      <i className="icon fa-money font-size-24 vertical-align-bottom margin-right-5"></i>{ translate('INDEX.INTEREST_EARNED') }
-                    </div>
-                    <span className="pull-right padding-top-10 font-size-22">{ this.props.Dashboard.progress.interest ? this.props.Dashboard.progress.interest : '-' }</span>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <div className="col-lg-3 col-xs-12">
-            <div className="widget widget-shadow">
-              <div className="widget-content white bg-green-600">
-                <div className="padding-20 padding-top-10">
-                  <div className="clearfix">
-                    <div className="pull-left padding-vertical-10">
-                      <i className="icon fa-bullseye font-size-24 vertical-align-bottom margin-right-5"></i>{ translate('INDEX.ZT_BALANCE') }
-                    </div>
-                    <span className="pull-right padding-top-10 font-size-22">{ this.props.ActiveCoin.balance.total ? this.props.ActiveCoin.balance.total : '-' }</span>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      );
-    } else {
-      return null;
+      return WalletsNativeBalanceRender.call(this);
     }
+
+    return null;
   }
 }
 

react/src/components/dashboard/walletsNativeBalance.render.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import { translate } from '../../translate/translate';
+
+const WalletsNativeBalanceRender = function() {
+  return (
+    <div className="col-xs-12">
+      <div className="col-lg-3 col-xs-12">
+        <div className="widget widget-shadow">
+          <div className="widget-content white bg-yellow-800">
+            <div className="padding-20 padding-top-10">
+              <div className="clearfix">
+                <div className="pull-left padding-vertical-10">
+                  <i className="icon fa-eye font-size-24 vertical-align-bottom margin-right-5"></i>{ translate('INDEX.TRANSPARENT_BALANCE') }
+                </div>
+                <span className="pull-right padding-top-10 font-size-22">{ this.props.ActiveCoin.balance.transparent ? this.props.ActiveCoin.balance.transparent : '-' }</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="col-lg-3 col-xs-12">
+        <div className="widget widget-shadow">
+          <div className="widget-content white bg-blue-grey-800">
+            <div className="padding-20 padding-top-10">
+              <div className="clearfix">
+                <div className="pull-left padding-vertical-10">
+                  <i className="icon fa-eye-slash font-size-24 vertical-align-bottom margin-right-5"></i>{ translate('INDEX.Z_BALANCE') }
+                </div>
+                <span className="pull-right padding-top-10 font-size-22">{ this.props.ActiveCoin.balance.private ? this.props.ActiveCoin.balance.private : '-' }</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="col-lg-3 col-xs-12">
+        <div className="widget widget-shadow">
+          <div className="widget-content white bg-cyan-700">
+            <div className="padding-20 padding-top-10">
+              <div className="clearfix">
+                <div className="pull-left padding-vertical-10">
+                  <i className="icon fa-money font-size-24 vertical-align-bottom margin-right-5"></i>{ translate('INDEX.INTEREST_EARNED') }
+                </div>
+                <span className="pull-right padding-top-10 font-size-22">{ this.props.Dashboard.progress && this.props.Dashboard.progress.interest ? this.props.Dashboard.progress.interest : '-' }</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="col-lg-3 col-xs-12">
+        <div className="widget widget-shadow">
+          <div className="widget-content white bg-green-600">
+            <div className="padding-20 padding-top-10">
+              <div className="clearfix">
+                <div className="pull-left padding-vertical-10">
+                  <i className="icon fa-bullseye font-size-24 vertical-align-bottom margin-right-5"></i>{ translate('INDEX.ZT_BALANCE') }
+                </div>
+                <span className="pull-right padding-top-10 font-size-22">{ this.props.ActiveCoin.balance.total ? this.props.ActiveCoin.balance.total : '-' }</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default WalletsNativeBalanceRender;

react/src/components/dashboard/walletsNativeInfo.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { translate } from '../../translate/translate';
+import WalletsNativeInfoRender from './walletsNativeInfo.render';
 
 class WalletsNativeInfo extends React.Component {
   constructor(props) {
@@ -11,145 +11,10 @@ class WalletsNativeInfo extends React.Component {
         this.props.Dashboard &&
         this.props.Dashboard.progress &&
         this.props.ActiveCoin.nativeActiveSection === 'settings') {
-      return (
-        <div>
-          <div className="col-xlg-6 col-md-4">
-            <div className="panel">
-              <div className="panel-heading">
-                <h3 className="panel-title">{ translate('INDEX.WALLET_INFO') }</h3>
-              </div>
-              <div className="table-responsive">
-                <table className="table table-striped">
-                  <tbody>
-                    <tr>
-                      <td>{ translate('INDEX.WALLET_VERSION') }</td>
-                      <td>
-                        { this.props.Dashboard.progress.walletversion }
-                      </td>
-                    </tr>
-                    <tr>
-                      <td>{ translate('INDEX.BALANCE') }</td>
-                      <td>
-                        { this.props.Dashboard.progress.balance }
-                      </td>
-                    </tr>
-                    <tr>
-                      <td>{ translate('INDEX.UNCONFIRMED_BALANCE') }</td>
-                      <td></td>
-                    </tr>
-                    <tr>
-                      <td>{ translate('INDEX.IMMATURE_BALANCE') }</td>
-                      <td></td>
-                    </tr>
-                    <tr>
-                      <td>{ translate('INDEX.TOTAL_TX_COUNT') }</td>
-                      <td></td>
-                    </tr>
-                  </tbody>
-                </table>
-              </div>
-            </div>
-          </div>
-
-          <div className="col-xlg-6 col-md-8">
-            <div className="panel">
-              <div className="panel-heading">
-                <h3 className="panel-title">
-                  Komodo { translate('INDEX.INFO') }
-                </h3>
-              </div>
-              <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>
-                  </tbody>
-                </table>
-              </div>
-            </div>
-          </div>
-        </div>
-      );
-    } else {
-      return null;
+      return WalletsNativeInfoRender.call(this);
     }
+
+    return null;
   }
 }
 

react/src/components/dashboard/walletsNativeInfo.render.js

@@ -0,0 +1,143 @@
+import React from 'react';
+import { translate } from '../../translate/translate';
+
+const WalletsNativeInfoRender = function() {
+  return (
+    <div>
+      <div className="col-xlg-6 col-md-4">
+        <div className="panel">
+          <div className="panel-heading">
+            <h3 className="panel-title">{ translate('INDEX.WALLET_INFO') }</h3>
+          </div>
+          <div className="table-responsive">
+            <table className="table table-striped">
+              <tbody>
+              <tr>
+                <td>{ translate('INDEX.WALLET_VERSION') }</td>
+                <td>
+                  { this.props.Dashboard.progress.walletversion }
+                </td>
+              </tr>
+              <tr>
+                <td>{ translate('INDEX.BALANCE') }</td>
+                <td>
+                  { this.props.Dashboard.progress.balance }
+                </td>
+              </tr>
+              <tr>
+                <td>{ translate('INDEX.UNCONFIRMED_BALANCE') }</td>
+                <td></td>
+              </tr>
+              <tr>
+                <td>{ translate('INDEX.IMMATURE_BALANCE') }</td>
+                <td></td>
+              </tr>
+              <tr>
+                <td>{ translate('INDEX.TOTAL_TX_COUNT') }</td>
+                <td></td>
+              </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+
+      <div className="col-xlg-6 col-md-8">
+        <div className="panel">
+          <div className="panel-heading">
+            <h3 className="panel-title">
+              Komodo { translate('INDEX.INFO') }
+            </h3>
+          </div>
+          <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>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default WalletsNativeInfoRender;

react/src/components/dashboard/walletsNativeReceive.js

@@ -1,10 +1,13 @@
 import React from 'react';
-import { translate } from '../../translate/translate';
 import {
   copyCoinAddress,
   getNewKMDAddresses
 } from '../../actions/actionCreators';
 import Store from '../../store';
+import {
+  AddressListRender,
+  WalletsNativeReceiveRender
+} from './walletsNativeReceive.render';
 
 class WalletsNativeReceive extends React.Component {
   constructor(props) {
@@ -48,23 +51,11 @@ class WalletsNativeReceive extends React.Component {
         this.props.ActiveCoin.addresses[type] &&
         this.props.ActiveCoin.addresses[type].length) {
       return this.props.ActiveCoin.addresses[type].map((address) =>
-        <tr key={ address.address }>
-          <td>
-            <span className={ type === 'public' ? 'label label-default' : 'label label-dark' }>
-              <i className={ type === 'public' ? 'icon fa-eye' : 'icon fa-eye-slash' }></i> { type === 'public' ? translate('IAPI.PUBLIC_SM') : translate('KMD_NATIVE.PRIVATE') }
-            </span>
-            <button
-              className="btn btn-default btn-xs clipboard-edexaddr margin-left-10"
-              onClick={ () => this.copyZAddress(address.address) }><i className="icon wb-copy"></i> { translate('INDEX.COPY') }</button>
-          </td>
-          <td>{ type === 'public' ? address.address : address.address.substring(0, 34) + '...' }</td>
-          <td>{ address.amount }</td>
-          <td></td>
-        </tr>
+        AddressListRender.call(this, address, type)
       );
-    } else {
-      return null;
     }
+
+    return null;
   }
 
   getNewAddress(type) {
@@ -75,68 +66,10 @@ class WalletsNativeReceive extends React.Component {
     if (this.props &&
         this.props.ActiveCoin &&
         this.props.ActiveCoin.nativeActiveSection === 'receive') {
-      return (
-        <div>
-          <div className="col-xs-12 margin-top-20">
-            <div className="panel nav-tabs-horizontal">
-              <div>
-                <div className="col-xlg-12 col-lg-12 col-sm-12 col-xs-12">
-                  <div className="panel">
-                    <header className="panel-heading">
-                      <div className="panel-actions">
-                        <div className={ 'dropdown' + (this.state.openDropMenu ? ' open' : '') } onClick={ this.openDropMenu }>
-                          <a className="dropdown-toggle white btn btn-warning">
-                            <i className="icon md-arrows margin-right-10"></i> { translate('INDEX.GET_NEW_ADDRESS') } <span className="caret"></span>
-                          </a>
-                          <ul
-                            className="dropdown-menu dropdown-menu-right">
-                            <li>
-                              <a onClick={ () => this.getNewAddress('public') }>
-                                <i className="icon fa-eye"></i> { translate('INDEX.TRANSPARENT_ADDRESS') }
-                              </a>
-                            </li>
-                            <li>
-                              <a onClick={ () => this.getNewAddress('private') }>
-                                <i className="icon fa-eye-slash"></i> { translate('INDEX.PRIVATE_Z_ADDRESS') }
-                              </a>
-                            </li>
-                          </ul>
-                        </div>
-                      </div>
-                      <h3 className="panel-title">{ translate('INDEX.RECEIVING_ADDRESS') }</h3>
-                    </header>
-                    <div className="panel-body">
-                      <table className="table table-hover dataTable table-striped">
-                        <thead>
-                          <tr>
-                            <th>{ translate('INDEX.TYPE') }</th>
-                            <th>{ translate('INDEX.ADDRESS') }</th>
-                            <th>{ translate('INDEX.AMOUNT') }</th>
-                          </tr>
-                        </thead>
-                        <tbody>
-                        { this.renderAddressList('public') }
-                        { this.renderAddressList('private') }
-                        </tbody>
-                        <tfoot>
-                          <tr>
-                            <th>{ translate('INDEX.TYPE') }</th>
-                            <th>{ translate('INDEX.ADDRESS') }</th>
-                            <th>{ translate('INDEX.AMOUNT') }</th>
-                          </tr>
-                        </tfoot>
-                      </table>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      );
-    } else {
-      return null;
+      WalletsNativeReceiveRender.call(this);
     }
+
+    return null;
   }
 }
 

react/src/components/dashboard/walletsNativeReceive.render.js

@@ -0,0 +1,82 @@
+import React from 'react';
+import { translate } from '../../translate/translate';
+
+export const AddressListRender = function(address, type) {
+  return (
+    <tr key={ address.address }>
+      <td>
+        <span className={ type === 'public' ? 'label label-default' : 'label label-dark' }>
+          <i className={ type === 'public' ? 'icon fa-eye' : 'icon fa-eye-slash' }></i> { type === 'public' ? translate('IAPI.PUBLIC_SM') : translate('KMD_NATIVE.PRIVATE') }
+        </span>
+        <button
+          className="btn btn-default btn-xs clipboard-edexaddr margin-left-10"
+          onClick={ () => this.copyZAddress(address.address) }><i className="icon wb-copy"></i> { translate('INDEX.COPY') }</button>
+      </td>
+      <td>{ type === 'public' ? address.address : address.address.substring(0, 34) + '...' }</td>
+      <td>{ address.amount }</td>
+      <td></td>
+    </tr>
+  );
+};
+
+export const WalletsNativeReceiveRender = function() {
+  return (
+    <div>
+      <div className="col-xs-12 margin-top-20">
+        <div className="panel nav-tabs-horizontal">
+          <div>
+            <div className="col-xlg-12 col-lg-12 col-sm-12 col-xs-12">
+              <div className="panel">
+                <header className="panel-heading">
+                  <div className="panel-actions">
+                    <div className={ 'dropdown' + (this.state.openDropMenu ? ' open' : '') } onClick={ this.openDropMenu }>
+                      <a className="dropdown-toggle white btn btn-warning">
+                        <i className="icon md-arrows margin-right-10"></i> { translate('INDEX.GET_NEW_ADDRESS') } <span className="caret"></span>
+                      </a>
+                      <ul
+                        className="dropdown-menu dropdown-menu-right">
+                        <li>
+                          <a onClick={ () => this.getNewAddress('public') }>
+                            <i className="icon fa-eye"></i> { translate('INDEX.TRANSPARENT_ADDRESS') }
+                          </a>
+                        </li>
+                        <li>
+                          <a onClick={ () => this.getNewAddress('private') }>
+                            <i className="icon fa-eye-slash"></i> { translate('INDEX.PRIVATE_Z_ADDRESS') }
+                          </a>
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                  <h3 className="panel-title">{ translate('INDEX.RECEIVING_ADDRESS') }</h3>
+                </header>
+                <div className="panel-body">
+                  <table className="table table-hover dataTable table-striped">
+                    <thead>
+                    <tr>
+                      <th>{ translate('INDEX.TYPE') }</th>
+                      <th>{ translate('INDEX.ADDRESS') }</th>
+                      <th>{ translate('INDEX.AMOUNT') }</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    { this.renderAddressList('public') }
+                    { this.renderAddressList('private') }
+                    </tbody>
+                    <tfoot>
+                    <tr>
+                      <th>{ translate('INDEX.TYPE') }</th>
+                      <th>{ translate('INDEX.ADDRESS') }</th>
+                      <th>{ translate('INDEX.AMOUNT') }</th>
+                    </tr>
+                    </tfoot>
+                  </table>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

react/src/components/dashboard/walletsNativeSend.js

@@ -9,6 +9,11 @@ import {
   getKMDOPID
 } from '../../actions/actionCreators';
 import Store from '../../store';
+import {
+  AddressListRender,
+  OASendUIRender,
+  WalletsNativeSendRender
+} from './walletsNativeSend.render';
 
 class WalletsNativeSend extends React.Component {
   constructor(props) {
@@ -54,7 +59,7 @@ 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 } ]  { address.address }</span><span className="glyphicon glyphicon-ok check-mark"></span></a>
+          <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>
         </li>
       );
     } else {
@@ -77,29 +82,7 @@ class WalletsNativeSend extends React.Component {
   }
 
   renderAddressList() {
-    return (
-      <div className={ `btn-group bootstrap-select form-control form-material showkmdwalletaddrs show-tick ${(this.state.addressSelectorOpen ? 'open' : '')}` }>
-        <button
-          type="button"
-          className="btn dropdown-toggle btn-info"
-          title="- { translate('SEND.SELECT_T_OR_Z_ADDR') } -"
-          onClick={ this.openDropMenu }>
-          <span className="filter-option pull-left">{ this.renderSelectorCurrentLabel() } </span>
-          <span className="bs-caret">
-            <span className="caret"></span>
-          </span>
-        </button>
-        <div className="dropdown-menu open">
-          <ul className="dropdown-menu inner">
-            <li className="selected">
-              <a><span className="text"> - { translate('SEND.SELECT_T_OR_Z_ADDR') } - </span><span className="glyphicon glyphicon-ok check-mark"></span></a>
-            </li>
-            { this.renderAddressByType('public') }
-            { this.renderAddressByType('private') }
-          </ul>
-        </div>
-      </div>
-    );
+    return AddressListRender.call(this);
   }
 
   renderOPIDLabel(opid) {
@@ -245,163 +228,20 @@ class WalletsNativeSend extends React.Component {
 
   renderOASendUI() {
     if (Config.openAlias) {
-      return (
-        <div className="row">
-          <div className="col-lg-6 form-group form-material">
-            <label
-              className="control-label"
-              htmlFor="kmdWalletSendTo">{ translate('INDEX.SEND_TO') } via Openalias address</label>
-            <input
-              type="text"
-              className="form-control"
-              name="sendToOA"
-              onChange={ this.updateInput }
-              id="kmdWalletSendTo"
-              placeholder="Enter an alias as address@site.com"
-              autoComplete="off"
-              required />
-          </div>
-          <div className="col-lg-6 form-group form-material">
-            <button
-              type="button"
-              className="btn btn-primary waves-effect waves-light"
-              onClick={ this.getOAdress }>
-              Get address
-            </button>
-          </div>
-        </div>
-      );
-    } else {
-      return null;
+      return OASendUIRender.call(this);
     }
+
+    return null;
   }
 
   render() {
     if (this.props &&
         this.props.ActiveCoin &&
         this.props.ActiveCoin.nativeActiveSection === 'send') {
-      return (
-        <div id="kmd_wallet_send">
-          <div className="col-xlg-12 col-md-12 col-sm-12 col-xs-12">
-            <div className="panel" id="projects">
-              <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="extcoin-send-form" method="post" autoComplete="off">
-                  <div className="row">
-                    <div className="col-xlg-12 form-group form-material">
-                      <label className="control-label">{ translate('INDEX.SEND_FROM') }</label>
-                      { this.renderAddressList() }
-                    </div>
-                  </div>
-                  { this.renderOASendUI() }
-                  <div className="row">
-                    <div className="col-xlg-12 form-group form-material">
-                      <label className="control-label" htmlFor="kmdWalletSendTo">{ translate('INDEX.SEND_TO') }</label>
-                      <input
-                        type="text"
-                        className="form-control"
-                        name="sendTo"
-                        onChange={ this.updateInput }
-                        value={ this.state.sendTo }
-                        id="kmdWalletSendTo"
-                        placeholder={ translate('SEND.ENTER_T_OR_Z_ADDR') }
-                        autoComplete="off"
-                        required />
-                    </div>
-                    <div className="col-lg-6 form-group form-material">
-                      <label className="control-label" htmlFor="kmdWalletAmount">
-                        { this.props.ActiveCoin.coin }
-                      </label>
-                      <input
-                        type="text"
-                        className="form-control"
-                        name="amount"
-                        onChange={ this.updateInput }
-                        id="kmdWalletAmount"
-                        placeholder="0.000"
-                        autoComplete="off" />
-                    </div>
-                    <div className="col-lg-6 form-group form-material">
-                      <label className="control-label" htmlFor="kmdWalletFee">{ translate('INDEX.FEE') }</label>
-                      <input
-                        type="text"
-                        className="form-control"
-                        name="fee"
-                        onChange={ this.updateInput }
-                        id="kmdWalletFee"
-                        placeholder="0.000"
-                        value={ this.state.fee }
-                        autoComplete="off" />
-                    </div>
-                    <div className="col-lg-12">
-                      <span>
-                        <strong>{ translate('INDEX.TOTAL') }:</strong> { this.state.amount } - { this.state.fee }/kb = { Number(this.state.amount) - Number(this.state.fee) } { this.props.ActiveCoin.coin }
-                      </span>
-                    </div>
-                    <div className="col-lg-12">
-                      <button
-                        type="button"
-                        className="btn btn-primary waves-effect waves-light pull-right"
-                        onClick={ this.handleSubmit }
-                        disabled={ !this.state.sendFrom || !this.state.sendTo || !this.state.amount }>
-                        { translate('INDEX.SEND') } { this.state.amount } { this.props.ActiveCoin.coin }
-                      </button>
-                    </div>
-                  </div>
-                </form>
-              </div>
-            </div>
-          </div>
-
-          <div className="col-xs-12">
-            <div className="row">
-              <div className="panel nav-tabs-horizontal">
-                <div>
-                  <div className="col-xlg-12 col-lg-12 col-sm-12 col-xs-12">
-                    <div className="panel">
-                      <header className="panel-heading">
-                        <h3 className="panel-title">{ translate('INDEX.OPERATIONS_STATUSES') }</h3>
-                      </header>
-                      <div className="panel-body">
-                        <table
-                          className="table table-hover dataTable table-striped"
-                          width="100%">
-                          <thead>
-                            <tr>
-                              <th>{ translate('INDEX.STATUS') }</th>
-                              <th>ID</th>
-                              <th>{ translate('INDEX.TIME') }</th>
-                              <th>{ translate('INDEX.RESULT') }</th>
-                            </tr>
-                          </thead>
-                          <tbody>
-                          { this.renderOPIDList() }
-                          </tbody>
-                          <tfoot>
-                            <tr>
-                              <th>{ translate('INDEX.STATUS') }</th>
-                              <th>ID</th>
-                              <th>{ translate('INDEX.TIME') }</th>
-                              <th>{ translate('INDEX.RESULT') }</th>
-                            </tr>
-                          </tfoot>
-                        </table>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      );
-    } else {
-      return null;
+      return WalletsNativeSendRender.call(this);
     }
+
+    return null;
   }
 }
 

react/src/components/dashboard/walletsNativeSend.render.js

@@ -0,0 +1,179 @@
+import React from 'react';
+import { translate } from '../../translate/translate';
+
+export const AddressListRender = function() {
+  return (
+    <div className={ `btn-group bootstrap-select form-control form-material showkmdwalletaddrs show-tick ${(this.state.addressSelectorOpen ? 'open' : '')}` }>
+      <button
+        type="button"
+        className="btn dropdown-toggle btn-info"
+        title="- { translate('SEND.SELECT_T_OR_Z_ADDR') } -"
+        onClick={ this.openDropMenu }>
+        <span className="filter-option pull-left">{ this.renderSelectorCurrentLabel() } </span>
+        <span className="bs-caret">
+            <span className="caret"></span>
+          </span>
+      </button>
+      <div className="dropdown-menu open">
+        <ul className="dropdown-menu inner">
+          <li className="selected">
+            <a><span className="text"> - { translate('SEND.SELECT_T_OR_Z_ADDR') } - </span><span className="glyphicon glyphicon-ok check-mark"></span></a>
+          </li>
+          { this.renderAddressByType('public') }
+          { this.renderAddressByType('private') }
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+export const OASendUIRender = function() {
+  return (
+    <div className="row">
+      <div className="col-lg-6 form-group form-material">
+        <label
+          className="control-label"
+          htmlFor="kmdWalletSendTo">{ translate('INDEX.SEND_TO') } via Openalias address</label>
+        <input
+          type="text"
+          className="form-control"
+          name="sendToOA"
+          onChange={ this.updateInput }
+          id="kmdWalletSendTo"
+          placeholder="Enter an alias as address@site.com"
+          autoComplete="off"
+          required />
+      </div>
+      <div className="col-lg-6 form-group form-material">
+        <button
+          type="button"
+          className="btn btn-primary waves-effect waves-light"
+          onClick={ this.getOAdress }>
+          Get address
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export const WalletsNativeSendRender = function() {
+  return (
+    <div id="kmd_wallet_send">
+      <div className="col-xlg-12 col-md-12 col-sm-12 col-xs-12">
+        <div className="panel" id="projects">
+          <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="extcoin-send-form" method="post" autoComplete="off">
+              <div className="row">
+                <div className="col-xlg-12 form-group form-material">
+                  <label className="control-label">{ translate('INDEX.SEND_FROM') }</label>
+                  { this.renderAddressList() }
+                </div>
+              </div>
+              { this.renderOASendUI() }
+              <div className="row">
+                <div className="col-xlg-12 form-group form-material">
+                  <label className="control-label" htmlFor="kmdWalletSendTo">{ translate('INDEX.SEND_TO') }</label>
+                  <input
+                    type="text"
+                    className="form-control"
+                    name="sendTo"
+                    onChange={ this.updateInput }
+                    value={ this.state.sendTo }
+                    id="kmdWalletSendTo"
+                    placeholder={ translate('SEND.ENTER_T_OR_Z_ADDR') }
+                    autoComplete="off"
+                    required />
+                </div>
+                <div className="col-lg-6 form-group form-material">
+                  <label className="control-label" htmlFor="kmdWalletAmount">
+                    { this.props.ActiveCoin.coin }
+                  </label>
+                  <input
+                    type="text"
+                    className="form-control"
+                    name="amount"
+                    onChange={ this.updateInput }
+                    id="kmdWalletAmount"
+                    placeholder="0.000"
+                    autoComplete="off" />
+                </div>
+                <div className="col-lg-6 form-group form-material">
+                  <label className="control-label" htmlFor="kmdWalletFee">{ translate('INDEX.FEE') }</label>
+                  <input
+                    type="text"
+                    className="form-control"
+                    name="fee"
+                    onChange={ this.updateInput }
+                    id="kmdWalletFee"
+                    placeholder="0.000"
+                    value={ this.state.fee }
+                    autoComplete="off" />
+                </div>
+                <div className="col-lg-12">
+                  <span>
+                    <strong>{ translate('INDEX.TOTAL') }:</strong> { this.state.amount } - { this.state.fee }/kb = { Number(this.state.amount) - Number(this.state.fee) } { this.props.ActiveCoin.coin }
+                  </span>
+                </div>
+                <div className="col-lg-12">
+                  <button
+                    type="button"
+                    className="btn btn-primary waves-effect waves-light pull-right"
+                    onClick={ this.handleSubmit }
+                    disabled={ !this.state.sendFrom || !this.state.sendTo || !this.state.amount }>
+                    { translate('INDEX.SEND') } { this.state.amount } { this.props.ActiveCoin.coin }
+                  </button>
+                </div>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+
+      <div className="col-xs-12">
+        <div className="row">
+          <div className="panel nav-tabs-horizontal">
+            <div>
+              <div className="col-xlg-12 col-lg-12 col-sm-12 col-xs-12">
+                <div className="panel">
+                  <header className="panel-heading">
+                    <h3 className="panel-title">{ translate('INDEX.OPERATIONS_STATUSES') }</h3>
+                  </header>
+                  <div className="panel-body">
+                    <table
+                      className="table table-hover dataTable table-striped"
+                      width="100%">
+                      <thead>
+                      <tr>
+                        <th>{ translate('INDEX.STATUS') }</th>
+                        <th>ID</th>
+                        <th>{ translate('INDEX.TIME') }</th>
+                        <th>{ translate('INDEX.RESULT') }</th>
+                      </tr>
+                      </thead>
+                      <tbody>
+                      { this.renderOPIDList() }
+                      </tbody>
+                      <tfoot>
+                      <tr>
+                        <th>{ translate('INDEX.STATUS') }</th>
+                        <th>ID</th>
+                        <th>{ translate('INDEX.TIME') }</th>
+                        <th>{ translate('INDEX.RESULT') }</th>
+                      </tr>
+                      </tfoot>
+                    </table>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

react/src/components/dashboard/walletsNativeSyncProgress.js

@@ -1,5 +1,9 @@
 import React from 'react';
 import { translate } from '../../translate/translate';
+import {
+  ChainActivationNotificationRender,
+  WalletsNativeSyncProgressRender
+} from './walletsNativeSyncProgress.render';
 
 class WalletsNativeSyncProgress extends React.Component {
   renderSyncPercentagePlaceholder() {
@@ -79,41 +83,20 @@ class WalletsNativeSyncProgress extends React.Component {
   renderChainActivationNotification() {
     if ((!this.props.Dashboard.progress.blocks && !this.props.Dashboard.progress.longestchain) ||
         (this.props.Dashboard.progress.blocks < this.props.Dashboard.progress.longestchain)) {
-      return (
-        <div className="alert alert-info alert-dismissible margin-bottom-40">
-          <button className="close" type="button">
-            <span>×</span>
-          </button>
-          <h4>
-            { translate('INDEX.ACTIVATING_CHAIN') }{ this.renderActivatingBestChainProgress() }
-          </h4>
-          <p>{ this.renderLB('INDEX.KMD_STARTED') }</p>
-        </div>
-      );
-    } else {
-      return null;
+      return ChainActivationNotificationRender.call(this);
     }
+
+    return null;
   }
 
   render() {
     if (this.props &&
         this.props.Dashboard &&
         this.props.Dashboard.progress) {
-      return (
-        <div>
-          { this.renderChainActivationNotification() }
-          <div className="row sync-progress-container">
-            <div className="col-xs-12">
-              <div className="progress">
-                { this.renderSyncPercentagePlaceholder() }
-              </div>
-            </div>
-          </div>
-        </div>
-      );
-    } else {
-      return null;
+      return WalletsNativeSyncProgressRender.call(this);
     }
+
+    return null;
   }
 }
 

react/src/components/dashboard/walletsNativeSyncProgress.render.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { translate } from '../../translate/translate';
+
+export const ChainActivationNotificationRender = function() {
+  return (
+    <div className="alert alert-info alert-dismissible margin-bottom-40">
+      <button className="close" type="button">
+        <span>×</span>
+      </button>
+      <h4>
+        { translate('INDEX.ACTIVATING_CHAIN') }{ this.renderActivatingBestChainProgress() }
+      </h4>
+      <p>{ this.renderLB('INDEX.KMD_STARTED') }</p>
+    </div>
+  );
+};
+
+export const WalletsNativeSyncProgressRender = function() {
+  return (
+    <div>
+      { this.renderChainActivationNotification() }
+      <div className="row sync-progress-container">
+        <div className="col-xs-12">
+          <div className="progress">
+            { this.renderSyncPercentagePlaceholder() }
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

react/src/components/dashboard/walletsNativeTxHistory.js

@@ -1,9 +1,14 @@
 import React from 'react';
 import { translate } from '../../translate/translate';
-import { secondsToString } from '../../util/time';
 import { sortByDate } from '../../util/sort';
 import { toggleDashboardTxInfoModal } from '../../actions/actionCreators';
 import Store from '../../store';
+import {
+  PaginationItemsPerPageSelectorRender,
+  PaginationRender,
+  TxHistoryListRender,
+  WalletsNativeTxHistoryRender
+} from './walletsNativeTxHistory.render';
 
 class WalletsNativeTxHistory extends React.Component {
   constructor(props) {
@@ -138,23 +143,7 @@ class WalletsNativeTxHistory extends React.Component {
     if (this.props.ActiveCoin.txhistory &&
         this.props.ActiveCoin.txhistory !== 'loading' &&
         this.props.ActiveCoin.txhistory.length > 10) {
-      return (
-        <div className="dataTables_length">
-          <label>
-            { translate('INDEX.SHOW') }&nbsp;
-            <select
-              name="itemsPerPage"
-              className="form-control input-sm"
-              onChange={ this.updateInput }>
-              <option value="10">10</option>
-              <option value="25">25</option>
-              <option value="50">50</option>
-              <option value="100">100</option>
-            </select>&nbsp;
-            { translate('INDEX.ENTRIES_SM') }
-          </label>
-        </div>
-      );
+      return PaginationItemsPerPageSelectorRender.call(this);
     } else {
       return null;
     }
@@ -168,29 +157,10 @@ class WalletsNativeTxHistory extends React.Component {
       const _paginationEnd = this.state.activePage * this.state.itemsPerPage;
       const _paginationNextState = this.state.activePage > Math.floor(this.props.ActiveCoin.txhistory.length / this.state.itemsPerPage);
 
-      return (
-        <div className="row unselectable">
-          <div className="col-sm-5">
-            <div className="dataTables_info">{ translate('INDEX.SHOWING') } { _paginationStart } { translate('INDEX.TO') } { _paginationEnd } { translate('INDEX.OF') } { this.props.ActiveCoin.txhistory.length } { translate('INDEX.ENTRIES_SM') }</div>
-          </div>
-          <div className="col-sm-7">
-            <div className="dataTables_paginate paging_simple_numbers">
-              <ul className="pagination">
-                <li className={ this.state.activePage === 1 ? 'paginate_button previous disabled' : 'paginate_button previous' }>
-                  <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' }>
-                  <a onClick={ () => this.updateCurrentPage(this.state.activePage + 1) }>{ translate('INDEX.NEXT') }</a>
-                </li>
-              </ul>
-            </div>
-          </div>
-        </div>
-      );
-    } else {
-      return null;
+      return PaginationRender.call(this, _paginationStart, _paginationEnd, _paginationNextState);
     }
+
+    return null;
   }
 
   renderTxHistoryList() {
@@ -211,101 +181,20 @@ class WalletsNativeTxHistory extends React.Component {
       if (this.state.itemsList &&
           this.state.itemsList.length &&
           this.props.ActiveCoin.nativeActiveSection === 'default') {
-        return this.state.itemsList.map((tx, index) =>
-          <tr key={ tx.txid + tx.amount }>
-            <td>
-              <span className="label label-default">
-                <i className="icon fa-eye"></i> { translate('IAPI.PUBLIC_SM') }
-              </span>
-            </td>
-            <td>{ this.renderTxType(tx.category) }</td>
-            <td>{ tx.confirmations }</td>
-            <td>{ tx.amount }</td>
-            <td>{ secondsToString(tx.time) }</td>
-            <td>{ this.renderAddress(tx) }</td>
-            <td>
-              <button
-                type="button"
-                className="btn btn-xs white btn-info waves-effect waves-light btn-kmdtxid"
-                onClick={ () => this.toggleTxInfoModal(!this.props.ActiveCoin.showTransactionInfo, index) }><i className="icon fa-search"></i></button>
-            </td>
-          </tr>
-        );
-      } else {
-        return null;
+        return TxHistoryListRender.call(this);
       }
+
+      return null;
     }
   }
 
   render() {
     if (this.props &&
         this.props.ActiveCoin.nativeActiveSection === 'default') {
-      return (
-        <div className="native-transactions">
-          <div>
-            <div className="col-xs-12 margin-top-20">
-              <div className="panel nav-tabs-horizontal">
-                <div>
-                  <div className="col-xlg-12 col-lg-12 col-sm-12 col-xs-12">
-                    <div className="panel">
-                      <header className="panel-heading">
-                        <h3 className="panel-title">{ translate('INDEX.TRANSACTION_HISTORY') }</h3>
-                      </header>
-                      <div className="panel-body">
-                        <div className="row">
-                          <div className="col-sm-6">
-                            { this.renderPaginationItemsPerPageSelector() }
-                          </div>
-                          <div className="col-sm-6">
-                            <div className="dataTables_filter">
-                              <label>
-                                { translate('INDEX.SEARCH') }: <input type="search" className="form-control input-sm" disabled="true" />
-                              </label>
-                            </div>
-                          </div>
-                        </div>
-                        <div className="row">
-                          <table className="table table-hover dataTable table-striped" width="100%">
-                            <thead>
-                              <tr>
-                                <th>{ translate('INDEX.TYPE') }</th>
-                                <th>{ translate('INDEX.DIRECTION') }</th>
-                                <th>{ translate('INDEX.CONFIRMATIONS') }</th>
-                                <th>{ translate('INDEX.AMOUNT') }</th>
-                                <th>{ translate('INDEX.TIME') }</th>
-                                <th>{ translate('INDEX.DEST_ADDRESS') }</th>
-                                <th>{ translate('INDEX.TX_DETAIL') }</th>
-                              </tr>
-                            </thead>
-                            <tbody>
-                            { this.renderTxHistoryList() }
-                            </tbody>
-                            <tfoot>
-                              <tr>
-                                <th>{ translate('INDEX.TYPE') }</th>
-                                <th>{ translate('INDEX.DIRECTION') }</th>
-                                <th>{ translate('INDEX.CONFIRMATIONS') }</th>
-                                <th>{ translate('INDEX.AMOUNT') }</th>
-                                <th>{ translate('INDEX.TIME') }</th>
-                                <th>{ translate('INDEX.DEST_ADDRESS') }</th>
-                                <th>{ translate('INDEX.TX_DETAIL') }</th>
-                              </tr>
-                            </tfoot>
-                          </table>
-                        </div>
-                        { this.renderPagination() }
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      );
-    } else {
-      return null;
+      return WalletsNativeTxHistoryRender.call(this);
     }
+
+    return null;
   }
 }
 

react/src/components/dashboard/walletsNativeTxHistory.render.js

@@ -0,0 +1,137 @@
+import React from 'react';
+import { translate } from '../../translate/translate';
+import { secondsToString } from '../../util/time';
+
+export const PaginationItemsPerPageSelectorRender = function() {
+  return (
+    <div className="dataTables_length">
+      <label>
+        { translate('INDEX.SHOW') }&nbsp;
+        <select
+          name="itemsPerPage"
+          className="form-control input-sm"
+          onChange={ this.updateInput }>
+          <option value="10">10</option>
+          <option value="25">25</option>
+          <option value="50">50</option>
+          <option value="100">100</option>
+        </select>&nbsp;
+        { translate('INDEX.ENTRIES_SM') }
+      </label>
+    </div>
+  );
+};
+
+export const PaginationRender = function(paginationStart, paginationEnd, paginationNextState) {
+  return (
+    <div className="row unselectable">
+      <div className="col-sm-5">
+        <div
+          className="dataTables_info">{ translate('INDEX.SHOWING') } { paginationStart } { translate('INDEX.TO') } { paginationEnd } { translate('INDEX.OF') } { this.props.ActiveCoin.txhistory.length } { translate('INDEX.ENTRIES_SM') }</div>
+      </div>
+      <div className="col-sm-7">
+        <div className="dataTables_paginate paging_simple_numbers">
+          <ul className="pagination">
+            <li className={ this.state.activePage
+            === 1 ? 'paginate_button previous disabled' : 'paginate_button previous' }>
+              <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' }>
+              <a onClick={ () => this.updateCurrentPage(this.state.activePage + 1) }>{ translate('INDEX.NEXT') }</a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const TxHistoryListRender = function() {
+  return this.state.itemsList.map((tx, index) =>
+    <tr key={ tx.txid + tx.amount }>
+      <td>
+        <span className="label label-default">
+          <i className="icon fa-eye"></i> { translate('IAPI.PUBLIC_SM') }
+        </span>
+      </td>
+      <td>{ this.renderTxType(tx.category) }</td>
+      <td>{ tx.confirmations }</td>
+      <td>{ tx.amount }</td>
+      <td>{ secondsToString(tx.time) }</td>
+      <td>{ this.renderAddress(tx) }</td>
+      <td>
+        <button
+          type="button"
+          className="btn btn-xs white btn-info waves-effect waves-light btn-kmdtxid"
+          onClick={ () => this.toggleTxInfoModal(!this.props.ActiveCoin.showTransactionInfo, index) }><i className="icon fa-search"></i></button>
+      </td>
+    </tr>
+  );
+};
+
+export const WalletsNativeTxHistoryRender = function() {
+  return (
+    <div className="native-transactions">
+      <div>
+        <div className="col-xs-12 margin-top-20">
+          <div className="panel nav-tabs-horizontal">
+            <div>
+              <div className="col-xlg-12 col-lg-12 col-sm-12 col-xs-12">
+                <div className="panel">
+                  <header className="panel-heading">
+                    <h3 className="panel-title">{ translate('INDEX.TRANSACTION_HISTORY') }</h3>
+                  </header>
+                  <div className="panel-body">
+                    <div className="row">
+                      <div className="col-sm-6">
+                        { this.renderPaginationItemsPerPageSelector() }
+                      </div>
+                      <div className="col-sm-6">
+                        <div className="dataTables_filter">
+                          <label>
+                            { translate('INDEX.SEARCH') }: <input type="search" className="form-control input-sm" disabled="true" />
+                          </label>
+                        </div>
+                      </div>
+                    </div>
+                    <div className="row">
+                      <table className="table table-hover dataTable table-striped" width="100%">
+                        <thead>
+                        <tr>
+                          <th>{ translate('INDEX.TYPE') }</th>
+                          <th>{ translate('INDEX.DIRECTION') }</th>
+                          <th>{ translate('INDEX.CONFIRMATIONS') }</th>
+                          <th>{ translate('INDEX.AMOUNT') }</th>
+                          <th>{ translate('INDEX.TIME') }</th>
+                          <th>{ translate('INDEX.DEST_ADDRESS') }</th>
+                          <th>{ translate('INDEX.TX_DETAIL') }</th>
+                        </tr>
+                        </thead>
+                        <tbody>
+                          { this.renderTxHistoryList() }
+                        </tbody>
+                        <tfoot>
+                        <tr>
+                          <th>{ translate('INDEX.TYPE') }</th>
+                          <th>{ translate('INDEX.DIRECTION') }</th>
+                          <th>{ translate('INDEX.CONFIRMATIONS') }</th>
+                          <th>{ translate('INDEX.AMOUNT') }</th>
+                          <th>{ translate('INDEX.TIME') }</th>
+                          <th>{ translate('INDEX.DEST_ADDRESS') }</th>
+                          <th>{ translate('INDEX.TX_DETAIL') }</th>
+                        </tr>
+                        </tfoot>
+                      </table>
+                    </div>
+                    { this.renderPagination() }
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

react/src/components/dashboard/walletsNativeTxInfo.js

@@ -1,6 +1,4 @@
 import React from 'react';
-import { translate } from '../../translate/translate';
-import { secondsToString } from '../../util/time';
 import { toggleDashboardTxInfoModal } from '../../actions/actionCreators';
 import Store from '../../store';
 
@@ -36,152 +34,7 @@ class WalletsNativeTxInfo extends React.Component {
         this.props.ActiveCoin.mode === 'native') {
       const txInfo = this.props.ActiveCoin.txhistory[this.props.ActiveCoin.showTransactionInfoTxIndex];
 
-      return (
-        <div onKeyDown={ (event) => this.handleKeydown(event) }>
-          <div className="modal show" id="kmd_txid_info_mdl">
-            <div className="modal-dialog modal-center modal-lg">
-              <div className="modal-content">
-                <div className="modal-body modal-body-container">
-                  <div className="panel nav-tabs-horizontal">
-                    <ul className="nav nav-tabs nav-tabs-line">
-                      <li className={ this.state.activeTab === 0 ? 'active' : '' }>
-                        <a onClick={ () => this.openTab(0) }>
-                          <i className="icon md-balance-wallet"></i>TxID Info
-                        </a>
-                      </li>
-                      <li className={ this.state.activeTab === 1 ? 'active' : '' }>
-                        <a onClick={ () => this.openTab(1) }>
-                          <i className="icon md-plus-square"></i>Vjointsplits, Details
-                        </a>
-                      </li>
-                      <li className={ this.state.activeTab === 2 ? 'active' : '' }>
-                        <a onClick={ () => this.openTab(2) }>
-                          <i className="icon wb-briefcase"></i>Hex
-                        </a>
-                      </li>
-                      <li className={ this.state.activeTab === 3 ? 'active' : '' }>
-                        <a onClick={ () => this.openTab(3) }>
-                          <i className="icon wb-file"></i>Raw info
-                        </a>
-                      </li>
-                    </ul>
-                    <div className="panel-body">
-                      <div className="tab-content">
-                        <div className={ this.state.activeTab === 0 ? 'tab-pane active' : 'tab-pane' }>
-                          <table className="table table-striped">
-                            <tbody>
-                              <tr>
-                                <td>amount</td>
-                                <td>
-                                { txInfo.amount }
-                                </td>
-                              </tr>
-                              <tr>
-                                <td>fee</td>
-                                <td>
-                                  { txInfo.fee }
-                                </td>
-                              </tr>
-                              <tr>
-                                <td>confirmations</td>
-                                <td>
-                                  { txInfo.confirmations }
-                                </td>
-                              </tr>
-                              <tr>
-                                <td>blockhash</td>
-                                <td>
-                                  { txInfo.blockhash }
-                                </td>
-                              </tr>
-                              <tr>
-                                <td>blockindex</td>
-                                <td>
-                                  {txInfo.blockindex}
-                                </td>
-                              </tr>
-                              <tr>
-                                <td>blocktime</td>
-                                <td>
-                                  { secondsToString(txInfo.blocktime) }
-                                </td>
-                              </tr>
-                              <tr>
-                                <td>txid</td>
-                                <td>
-                                  { txInfo.txid }
-                                </td>
-                              </tr>
-                              <tr>
-                                <td>walletconflicts</td>
-                                <td>
-                                  { txInfo.walletconflicts.length }
-                                </td>
-                              </tr>
-                              <tr>
-                                <td>time</td>
-                                <td>
-                                  { secondsToString(txInfo.time) }
-                                </td>
-                              </tr>
-                              <tr>
-                                <td>timereceived</td>
-                                <td>
-                                  { secondsToString(txInfo.timereceived) }
-                                </td>
-                              </tr>
-                            </tbody>
-                          </table>
-                        </div>
-                        <div className={ this.state.activeTab === 1 ? 'tab-pane active' : 'tab-pane' }>
-                          <table className="table table-striped">
-                            <tbody>
-                              <tr>
-                                <td>vjoinsplit</td>
-                                <td>
-                                  { txInfo.vjoinsplit }
-                                </td>
-                              </tr>
-                              <tr>
-                                <td>details</td>
-                                <td>
-                                  { txInfo.details }
-                                </td>
-                              </tr>
-                            </tbody>
-                          </table>
-                        </div>
-                        <div className={ this.state.activeTab === 2 ? 'tab-pane active' : 'tab-pane' }>
-                          <textarea
-                            className="full-width height-170"
-                            rows="10"
-                            cols="80"
-                            defaultValue={ txInfo.hex } disabled></textarea>
-                        </div>
-                        <div className={ this.state.activeTab === 3 ? 'tab-pane active' : 'tab-pane' }>
-                          <textarea
-                            className="full-width height-400"
-                            rows="40"
-                            cols="80"
-                            defaultValue={ JSON.stringify(txInfo, null, '\t') }
-                            disabled></textarea>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div className="modal-footer">
-                  <button
-                    type="button"
-                    className="btn btn-default"
-                    onClick={ this.toggleTxInfoModal }>{ translate('INDEX.CLOSE') }</button>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div className="modal-backdrop show in"></div>
-        </div>
-      );
+      return WalletsNativeTxInfoRender.call(this, txInfo);
     } else {
       return null;
     }

react/src/components/dashboard/walletsNativeTxInfo.render.js

@@ -0,0 +1,154 @@
+import React from 'react';
+import { translate } from '../../translate/translate';
+import { secondsToString } from '../../util/time';
+
+const WalletsNativeTxInfoRender = function(txInfo) {
+  return (
+    <div onKeyDown={ (event) => this.handleKeydown(event) }>
+      <div className="modal show" id="kmd_txid_info_mdl">
+        <div className="modal-dialog modal-center modal-lg">
+          <div className="modal-content">
+            <div className="modal-body modal-body-container">
+              <div className="panel nav-tabs-horizontal">
+                <ul className="nav nav-tabs nav-tabs-line">
+                  <li className={ this.state.activeTab === 0 ? 'active' : '' }>
+                    <a onClick={ () => this.openTab(0) }>
+                      <i className="icon md-balance-wallet"></i>TxID Info
+                    </a>
+                  </li>
+                  <li className={ this.state.activeTab === 1 ? 'active' : '' }>
+                    <a onClick={ () => this.openTab(1) }>
+                      <i className="icon md-plus-square"></i>Vjointsplits, Details
+                    </a>
+                  </li>
+                  <li className={ this.state.activeTab === 2 ? 'active' : '' }>
+                    <a onClick={ () => this.openTab(2) }>
+                      <i className="icon wb-briefcase"></i>Hex
+                    </a>
+                  </li>
+                  <li className={ this.state.activeTab === 3 ? 'active' : '' }>
+                    <a onClick={ () => this.openTab(3) }>
+                      <i className="icon wb-file"></i>Raw info
+                    </a>
+                  </li>
+                </ul>
+                <div className="panel-body">
+                  <div className="tab-content">
+                    <div className={ this.state.activeTab === 0 ? 'tab-pane active' : 'tab-pane' }>
+                      <table className="table table-striped">
+                        <tbody>
+                        <tr>
+                          <td>amount</td>
+                          <td>
+                            { txInfo.amount }
+                          </td>
+                        </tr>
+                        <tr>
+                          <td>fee</td>
+                          <td>
+                            { txInfo.fee }
+                          </td>
+                        </tr>
+                        <tr>
+                          <td>confirmations</td>
+                          <td>
+                            { txInfo.confirmations }
+                          </td>
+                        </tr>
+                        <tr>
+                          <td>blockhash</td>
+                          <td>
+                            { txInfo.blockhash }
+                          </td>
+                        </tr>
+                        <tr>
+                          <td>blockindex</td>
+                          <td>
+                            {txInfo.blockindex}
+                          </td>
+                        </tr>
+                        <tr>
+                          <td>blocktime</td>
+                          <td>
+                            { secondsToString(txInfo.blocktime) }
+                          </td>
+                        </tr>
+                        <tr>
+                          <td>txid</td>
+                          <td>
+                            { txInfo.txid }
+                          </td>
+                        </tr>
+                        <tr>
+                          <td>walletconflicts</td>
+                          <td>
+                            { txInfo.walletconflicts.length }
+                          </td>
+                        </tr>
+                        <tr>
+                          <td>time</td>
+                          <td>
+                            { secondsToString(txInfo.time) }
+                          </td>
+                        </tr>
+                        <tr>
+                          <td>timereceived</td>
+                          <td>
+                            { secondsToString(txInfo.timereceived) }
+                          </td>
+                        </tr>
+                        </tbody>
+                      </table>
+                    </div>
+                    <div className={ this.state.activeTab === 1 ? 'tab-pane active' : 'tab-pane' }>
+                      <table className="table table-striped">
+                        <tbody>
+                        <tr>
+                          <td>vjoinsplit</td>
+                          <td>
+                            { txInfo.vjoinsplit }
+                          </td>
+                        </tr>
+                        <tr>
+                          <td>details</td>
+                          <td>
+                            { txInfo.details }
+                          </td>
+                        </tr>
+                        </tbody>
+                      </table>
+                    </div>
+                    <div className={ this.state.activeTab === 2 ? 'tab-pane active' : 'tab-pane' }>
+                      <textarea
+                        className="full-width height-170"
+                        rows="10"
+                        cols="80"
+                        defaultValue={ txInfo.hex } disabled></textarea>
+                    </div>
+                    <div className={ this.state.activeTab === 3 ? 'tab-pane active' : 'tab-pane' }>
+                      <textarea
+                        className="full-width height-400"
+                        rows="40"
+                        cols="80"
+                        defaultValue={ JSON.stringify(txInfo, null, '\t') }
+                        disabled></textarea>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div className="modal-footer">
+              <button
+                type="button"
+                className="btn btn-default"
+                onClick={ this.toggleTxInfoModal }>{ translate('INDEX.CLOSE') }</button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="modal-backdrop show in"></div>
+    </div>
+  );
+};
+
+export default WalletsNativeTxInfoRender;

react/src/components/dashboard/walletsNav.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import { translate } from '../../translate/translate';
 import {
   copyCoinAddress,
   iguanaEdexBalance,
@@ -9,6 +8,10 @@ import {
   toggleDashboardActiveSection
 } from '../../actions/actionCreators';
 import Store from '../../store';
+import {
+  WalletsNavNoWalletRender,
+  WalletsNavWithWalletRender
+} from './walletsNav.render';
 
 class WalletsNav extends React.Component {
   constructor(props) {
@@ -52,56 +55,10 @@ class WalletsNav extends React.Component {
     if (this.props &&
         this.props.ActiveCoin &&
         !this.props.ActiveCoin.coin) {
-      return (
-        <div>
-          <div className="col-xs-12 padding-top-20">
-            <div className="alert alert-info alert-dismissible">
-              <button type="button" className="close"></button>
-              <span className="font-size-24 text-align-center">
-                <i className="icon fa-paw"></i> { translate('INDEX.NO_WALLET_CAPS') }
-              </span>
-              <br/>
-              { translate('INDEX.PLEASE_SELECT_A_WALLET') }.
-            </div>
-          </div>
-        </div>
-      );
-    } else {
-      return (
-        <div>
-          <div
-            className="page-header page-header-bordered header-easydex padding-bottom-20"
-            id="header-dashboard"
-            style={{ marginBottom: this.props.ActiveCoin.mode === 'basilisk' ? '30px' : '0' }}>
-            <ol className="breadcrumb">
-              <strong>{ translate('INDEX.MY') } { this.props && this.props.ActiveCoin ? this.props.ActiveCoin.coin : '-' } { translate('INDEX.ADDRESS') }: </strong> { this.props && this.props.Dashboard && this.props.Dashboard.activeHandle ? this.props.Dashboard.activeHandle[this.props.ActiveCoin.coin] : '-' } <button className="btn btn-default btn-xs clipboard-edexaddr" onClick={ () => this.copyMyAddress(this.props.Dashboard.activeHandle[this.props.ActiveCoin.coin]) }><i className="icon wb-copy"></i> { translate('INDEX.COPY') }</button>
-            </ol>
-            <div className="page-header-actions">
-              <div id="kmd_header_button">
-                <button
-                  type="button"
-                  className="btn btn-dark waves-effect waves-light"
-                  onClick={ this.toggleSendReceiveCoinForms }>
-                  <i className="icon md-view-dashboard"></i> { this.props.ActiveCoin.mode !== 'native' ? translate('INDEX.DASHBOARD') : translate('INDEX.WALLET_INFO') }
-                </button>
-                <button
-                  type="button"
-                  className="btn btn-primary waves-effect waves-light"
-                  onClick={ () => this.toggleSendCoinForm(!this.props.ActiveCoin.send) }>
-                  <i className="icon fa-send"></i> { translate('INDEX.SEND') }
-                </button>
-                <button
-                  type="button"
-                  className="btn btn-info waves-effect waves-light"
-                  onClick={ () => this.toggleReceiveCoinForm(!this.props.ActiveCoin.receive) }>
-                  <i className="icon fa-inbox"></i> { translate('INDEX.RECEIVE') }
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      );
+      return WalletsNavNoWalletRender.call(this);
     }
+
+    return WalletsNavWithWalletRender.call(this);
   }
 }
 

react/src/components/dashboard/walletsNav.render.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import { translate } from '../../translate/translate';
+
+export const WalletsNavNoWalletRender = function () {
+  return (
+    <div>
+      <div className="col-xs-12 padding-top-20">
+        <div className="alert alert-info alert-dismissible">
+          <button type="button" className="close"></button>
+          <span className="font-size-24 text-align-center">
+                <i className="icon fa-paw"></i> { translate('INDEX.NO_WALLET_CAPS') }
+              </span>
+          <br/>
+          { translate('INDEX.PLEASE_SELECT_A_WALLET') }.
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const WalletsNavWithWalletRender = function () {
+  return (
+    <div>
+      <div
+        className="page-header page-header-bordered header-easydex padding-bottom-20"
+        id="header-dashboard"
+        style={{ marginBottom: this.props.ActiveCoin.mode === 'basilisk' ? '30px' : '0' }}>
+        <ol className="breadcrumb">
+          <strong>{ translate('INDEX.MY') } { this.props && this.props.ActiveCoin ? this.props.ActiveCoin.coin : '-' } { translate('INDEX.ADDRESS') }: </strong> { this.props && this.props.Dashboard && this.props.Dashboard.activeHandle ? this.props.Dashboard.activeHandle[this.props.ActiveCoin.coin] : '-' } <button className="btn btn-default btn-xs clipboard-edexaddr" onClick={ () => this.copyMyAddress(this.props.Dashboard.activeHandle[this.props.ActiveCoin.coin]) }><i className="icon wb-copy"></i> { translate('INDEX.COPY') }</button>
+        </ol>
+        <div className="page-header-actions">
+          <div id="kmd_header_button">
+            <button
+              type="button"
+              className="btn btn-dark waves-effect waves-light"
+              onClick={ this.toggleSendReceiveCoinForms }>
+              <i className="icon md-view-dashboard"></i> { this.props.ActiveCoin.mode !== 'native' ? translate('INDEX.DASHBOARD') : translate('INDEX.WALLET_INFO') }
+            </button>
+            <button
+              type="button"
+              className="btn btn-primary waves-effect waves-light"
+              onClick={ () => this.toggleSendCoinForm(!this.props.ActiveCoin.send) }>
+              <i className="icon fa-send"></i> { translate('INDEX.SEND') }
+            </button>
+            <button
+              type="button"
+              className="btn btn-info waves-effect waves-light"
+              onClick={ () => this.toggleReceiveCoinForm(!this.props.ActiveCoin.receive) }>
+              <i className="icon fa-inbox"></i> { translate('INDEX.RECEIVE') }
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

react/src/components/dashboard/walletsNotariesList.js

@@ -2,8 +2,11 @@ import React from 'react';
 import { translate } from '../../translate/translate';
 import { displayNotariesModal } from '../../actions/actionCreators';
 import Store from '../../store';
-import Tree, { TreeNode } from 'rc-tree';
-import { animation } from '../../util/rc-tree-animate';
+import { TreeNode } from 'rc-tree';
+import {
+  NotariesListRender,
+  WalletsNotariesListRender
+} from './walletsNotariesList.render';
 
 class WalletsNotariesList extends React.Component {
   constructor(props) {
@@ -38,11 +41,7 @@ class WalletsNotariesList extends React.Component {
         this.props.ActiveCoin.notaries.notaries &&
         this.props.ActiveCoin.notaries.notaries.length) {
       return this.props.ActiveCoin.notaries.notaries.map((node, index) =>
-        <TreeNode title={ `Node ${index}` } key={ `node-${index}` }>
-          <TreeNode key={ `node-${index}-btc` } title={ `BTC: ${node.BTCaddress}` } />
-          <TreeNode key={ `node-${index}-kmd` } title={ `KMD: ${node.KMDaddress}` } />
-          <TreeNode key={ `node-${index}-pubkey` } title={ `Pubkey: ${node.pubkey}` } />
-        </TreeNode>
+        NotariesListRender.call(this, node, index)
       );
     } else {
       return null;
@@ -53,42 +52,10 @@ class WalletsNotariesList extends React.Component {
     if (this.props &&
         this.props.ActiveCoin.mode === 'basilisk' &&
         this.props.ActiveCoin.displayNotariesModal) {
-      const notariesData = this.props.ActiveCoin.notaries ? this.props.ActiveCoin.notaries.notaries : null;
-
-      return (
-        <div onKeyDown={ (event) => this.handleKeydown(event) }>
-          <div className="modal show" id="kmd_txid_info_mdl">
-            <div className="modal-dialog modal-center modal-lg">
-              <div className="modal-content">
-                <div className="modal-body modal-body-container">
-                  <div className="panel nav-tabs-horizontal">
-                    <div className="panel-body">
-                      <div className="tab-content">
-                        <div className="tab-pane active">
-                          { this.renderNotariesFetching() }
-                          <Tree defaultExpandAll={ false } openAnimation={ animation }>
-                          { this.renderNotariesList() }
-                          </Tree>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div className="modal-footer">
-                  <button
-                    type="button"
-                    className="btn btn-default"
-                    onClick={ this.closeNotariesModal }>{ translate('INDEX.CLOSE') }</button>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div className="modal-backdrop show in"></div>
-        </div>
-      );
-    } else {
-      return null;
+      return WalletsNotariesListRender.call(this);
     }
+
+    return null;
   }
 }
 

react/src/components/dashboard/walletsNotariesList.render.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import { translate } from '../../translate/translate';
+import Tree, { TreeNode } from 'rc-tree';
+import { animation } from '../../util/rc-tree-animate';
+
+export const NotariesListRender = function (node, index) {
+  <TreeNode title={ `Node ${index}` } key={ `node-${index}` }>
+    <TreeNode key={ `node-${index}-btc` } title={ `BTC: ${node.BTCaddress}` } />
+    <TreeNode key={ `node-${index}-kmd` } title={ `KMD: ${node.KMDaddress}` } />
+    <TreeNode key={ `node-${index}-pubkey` } title={ `Pubkey: ${node.pubkey}` } />
+  </TreeNode>
+};
+
+export const WalletsNotariesListRender = function () {
+  return (
+    <div onKeyDown={ (event) => this.handleKeydown(event) }>
+      <div className="modal show" id="kmd_txid_info_mdl">
+        <div className="modal-dialog modal-center modal-lg">
+          <div className="modal-content">
+            <div className="modal-body modal-body-container">
+              <div className="panel nav-tabs-horizontal">
+                <div className="panel-body">
+                  <div className="tab-content">
+                    <div className="tab-pane active">
+                      { this.renderNotariesFetching() }
+                      <Tree defaultExpandAll={ false } openAnimation={ animation }>
+                        { this.renderNotariesList() }
+                      </Tree>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div className="modal-footer">
+              <button
+                type="button"
+                className="btn btn-default"
+                onClick={ this.closeNotariesModal }>{ translate('INDEX.CLOSE') }</button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="modal-backdrop show in"></div>
+    </div>
+  );
+};

react/src/components/dashboard/walletsProgress.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { translate } from '../../translate/translate';
+import WalletsProgressRender from './walletsProgress.render';
 
 class WalletsProgress extends React.Component {
   constructor(props) {
@@ -28,52 +29,12 @@ class WalletsProgress extends React.Component {
         return (
           <div className="text-align-center padding-10">{ translate('INDEX.COIN_IS_BUSY') }</div>
         );
-      } else {
-        return (
-          <div id="edex-footer" className="margin-bottom-20">
-            <div className="row no-space">
-              <div id="currency-progressbars">
-                <div className="progress progress-sm">
-                  <div className={ 'full-width font-size-80-percent ' + (this.isFullySynced() ? 'progress-bar progress-bar-striped active progress-bar-indicating progress-bar-success' : 'hide') }>
-                    { translate('INDEX.BUNDLES') } <span id="currency-bundles-percent">({ this.props.ActiveCoin.coin }) 100.00% - ( { this.props.Dashboard.progress.blocks } / { this.props.Dashboard.progress.blocks } ) ==&gt;&gt; RT{ this.props.Dashboard.progress.RTheight }</span>
-                  </div>
-                  <div
-                    className={ 'font-size-80-percent ' + (this.isFullySynced() ? 'hide' : 'progress-bar progress-bar-info progress-bar-striped active') }
-                    style={{ width: this.props.Dashboard.progress.bundles + '%' }}>
-                    { translate('INDEX.BUNDLES') } { this.props.Dashboard.progress.bundles }%
-                  </div>
-                </div>
-              </div>
-              <div className={ this.isFullySynced() ? 'hide' : '' }>
-                <div className="progress progress-sm">
-                  <div
-                    className="progress-bar progress-bar-warning progress-bar-striped active font-size-80-percent"
-                    style={{ width: this.props.Dashboard.progress.utxo + '%' }}>
-                    utxo { this.props.Dashboard.progress.utxo }%
-                  </div>
-                </div>
-                <div className="progress progress-sm">
-                  <div
-                    className="progress-bar progress-bar-danger progress-bar-striped active font-size-80-percent"
-                    style={{ width: this.props.Dashboard.progress.balances + '%' }}>
-                    { translate('INDEX.BALANCES') } { this.props.Dashboard.progress.balances }%
-                  </div>
-                </div>
-                <div className="progress progress-sm">
-                  <div
-                    className="progress-bar progress-bar-success progress-bar-striped active font-size-80-percent"
-                    style={{ width: this.props.Dashboard.progress.validated + '%' }}>
-                    { translate('INDEX.VALIDATED') } { this.props.Dashboard.progress.validated }%
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        );
       }
-    } else {
-      return null;
+
+      return WalletsProgressRender.call(this);
     }
+
+    return null;
   }
 }
 

react/src/components/dashboard/walletsProgress.render.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import { translate } from '../../translate/translate';
+
+const WalletsProgressRender = function () {
+  return (
+    <div id="edex-footer" className="margin-bottom-20">
+      <div className="row no-space">
+        <div id="currency-progressbars">
+          <div className="progress progress-sm">
+            <div className={ 'full-width font-size-80-percent ' + (this.isFullySynced() ? 'progress-bar progress-bar-striped active progress-bar-indicating progress-bar-success' : 'hide') }>
+              { translate('INDEX.BUNDLES') } <span id="currency-bundles-percent">({ this.props.ActiveCoin.coin }) 100.00% - ( { this.props.Dashboard.progress.blocks } / { this.props.Dashboard.progress.blocks } ) ==&gt;&gt; RT{ this.props.Dashboard.progress.RTheight }</span>
+            </div>
+            <div
+              className={ 'font-size-80-percent ' + (this.isFullySynced() ? 'hide' : 'progress-bar progress-bar-info progress-bar-striped active') }
+              style={{ width: this.props.Dashboard.progress.bundles + '%' }}>
+              { translate('INDEX.BUNDLES') } { this.props.Dashboard.progress.bundles }%
+            </div>
+          </div>
+        </div>
+        <div className={ this.isFullySynced() ? 'hide' : '' }>
+          <div className="progress progress-sm">
+            <div
+              className="progress-bar progress-bar-warning progress-bar-striped active font-size-80-percent"
+              style={{ width: this.props.Dashboard.progress.utxo + '%' }}>
+              utxo { this.props.Dashboard.progress.utxo }%
+            </div>
+          </div>
+          <div className="progress progress-sm">
+            <div
+              className="progress-bar progress-bar-danger progress-bar-striped active font-size-80-percent"
+              style={{ width: this.props.Dashboard.progress.balances + '%' }}>
+              { translate('INDEX.BALANCES') } { this.props.Dashboard.progress.balances }%
+            </div>
+          </div>
+          <div className="progress progress-sm">
+            <div
+              className="progress-bar progress-bar-success progress-bar-striped active font-size-80-percent"
+              style={{ width: this.props.Dashboard.progress.validated + '%' }}>
+              { translate('INDEX.VALIDATED') } { this.props.Dashboard.progress.validated }%
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default WalletsProgressRender;

react/src/components/dashboard/walletsTxInfo.js

@@ -1,8 +1,7 @@
 import React from 'react';
-import { translate } from '../../translate/translate';
-import { secondsToString } from '../../util/time';
 import { toggleDashboardTxInfoModal } from '../../actions/actionCreators';
 import Store from '../../store';
+import WalletsTxInfoRender from './walletsTxInfo.render';
 
 class WalletsTxInfo extends React.Component {
   constructor(props) {
@@ -34,102 +33,10 @@ class WalletsTxInfo extends React.Component {
         this.props.ActiveCoin.showTransactionInfo &&
         this.props.ActiveCoin.mode !== 'native') {
       const txInfo = this.props.ActiveCoin.txhistory[this.props.ActiveCoin.showTransactionInfoTxIndex];
-
-      return (
-        <div onKeyDown={ (event) => this.handleKeydown(event) }>
-          <div className="modal show" id="kmd_txid_info_mdl">
-            <div className="modal-dialog modal-center modal-lg">
-              <div className="modal-content">
-                <div className="modal-body modal-body-container">
-                  <div className="panel nav-tabs-horizontal">
-                    <ul className="nav nav-tabs nav-tabs-line">
-                      <li className={ this.state.activeTab === 0 ? 'active' : '' }>
-                        <a onClick={ () => this.openTab(0) }>
-                          <i className="icon md-balance-wallet"></i>TxID Info
-                        </a>
-                      </li>
-                      <li className={ this.state.activeTab === 1 ? 'active' : '' }>
-                        <a onClick={ () => this.openTab(1) }>
-                          <i className="icon wb-file"></i>Raw info
-                        </a>
-                      </li>
-                    </ul>
-                    <div className="panel-body">
-                      <div className="tab-content">
-                        <div className={ this.state.activeTab === 0 ? 'tab-pane active' : 'tab-pane' }>
-                          <table className="table table-striped">
-                            <tbody>
-                              <tr>
-                                <td>{ translate('TX_INFO.ADDRESS') }</td>
-                                <td>
-                                { txInfo.address }
-                                </td>
-                              </tr>
-                              <tr>
-                                <td>{ translate('TX_INFO.AMOUNT') }</td>
-                                <td>
-                                { txInfo.amount }
-                                </td>
-                              </tr>
-                              <tr>
-                                <td>{ translate('TX_INFO.CATEGORY') }</td>
-                                <td>
-                                  { txInfo.category || txInfo.type }
-                                </td>
-                              </tr>
-                              <tr>
-                                <td>{ translate('TX_INFO.CONFIRMATIONS') }</td>
-                                <td>
-                                  { txInfo.confirmations }
-                                </td>
-                              </tr>
-                              <tr>
-                                <td>blockhash</td>
-                                <td>
-                                  { txInfo.blockhash }
-                                </td>
-                              </tr>
-                              <tr>
-                                <td>blocktime</td>
-                                <td>
-                                  { secondsToString(txInfo.blocktime || txInfo.timestamp) }
-                                </td>
-                              </tr>
-                              <tr>
-                                <td>txid</td>
-                                <td>
-                                  { txInfo.txid }
-                                </td>
-                              </tr>
-                            </tbody>
-                          </table>
-                        </div>
-                        <div className={ this.state.activeTab === 1 ? 'tab-pane active' : 'tab-pane' }>
-                          <textarea
-                            className="full-width height-400"
-                            rows="40"
-                            cols="80"
-                            defaultValue={ JSON.stringify(txInfo, null, '\t') } disabled></textarea>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div className="modal-footer">
-                  <button
-                    type="button"
-                    className="btn btn-default"
-                    onClick={ this.toggleTxInfoModal }>{ translate('INDEX.CLOSE') }</button>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div className="modal-backdrop show in"></div>
-        </div>
-      );
-    } else {
-      return null;
+      return WalletsTxInfoRender.call(this, txInfo);
     }
+
+    return null;
   }
 }
 

react/src/components/dashboard/walletsTxInfo.render.js

@@ -0,0 +1,100 @@
+import React from 'react';
+import { translate } from '../../translate/translate';
+import { secondsToString } from '../../util/time';
+
+const WalletsTxInfoRender = function(txInfo) {
+  return (
+    <div onKeyDown={ (event) => this.handleKeydown(event) }>
+      <div className="modal show" id="kmd_txid_info_mdl">
+        <div className="modal-dialog modal-center modal-lg">
+          <div className="modal-content">
+            <div className="modal-body modal-body-container">
+              <div className="panel nav-tabs-horizontal">
+                <ul className="nav nav-tabs nav-tabs-line">
+                  <li className={ this.state.activeTab === 0 ? 'active' : '' }>
+                    <a onClick={ () => this.openTab(0) }>
+                      <i className="icon md-balance-wallet"></i>TxID Info
+                    </a>
+                  </li>
+                  <li className={ this.state.activeTab === 1 ? 'active' : '' }>
+                    <a onClick={ () => this.openTab(1) }>
+                      <i className="icon wb-file"></i>Raw info
+                    </a>
+                  </li>
+                </ul>
+                <div className="panel-body">
+                  <div className="tab-content">
+                    <div className={ this.state.activeTab === 0 ? 'tab-pane active' : 'tab-pane' }>
+                      <table className="table table-striped">
+                        <tbody>
+                        <tr>
+                          <td>{ translate('TX_INFO.ADDRESS') }</td>
+                          <td>
+                            { txInfo.address }
+                          </td>
+                        </tr>
+                        <tr>
+                          <td>{ translate('TX_INFO.AMOUNT') }</td>
+                          <td>
+                            { txInfo.amount }
+                          </td>
+                        </tr>
+                        <tr>
+                          <td>{ translate('TX_INFO.CATEGORY') }</td>
+                          <td>
+                            { txInfo.category || txInfo.type }
+                          </td>
+                        </tr>
+                        <tr>
+                          <td>{ translate('TX_INFO.CONFIRMATIONS') }</td>
+                          <td>
+                            { txInfo.confirmations }
+                          </td>
+                        </tr>
+                        <tr>
+                          <td>blockhash</td>
+                          <td>
+                            { txInfo.blockhash }
+                          </td>
+                        </tr>
+                        <tr>
+                          <td>blocktime</td>
+                          <td>
+                            { secondsToString(txInfo.blocktime || txInfo.timestamp) }
+                          </td>
+                        </tr>
+                        <tr>
+                          <td>txid</td>
+                          <td>
+                            { txInfo.txid }
+                          </td>
+                        </tr>
+                        </tbody>
+                      </table>
+                    </div>
+                    <div className={ this.state.activeTab === 1 ? 'tab-pane active' : 'tab-pane' }>
+                      <textarea
+                        className="full-width height-400"
+                        rows="40"
+                        cols="80"
+                        defaultValue={ JSON.stringify(txInfo, null, '\t') } disabled></textarea>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div className="modal-footer">
+              <button
+                type="button"
+                className="btn btn-default"
+                onClick={ this.toggleTxInfoModal }>{ translate('INDEX.CLOSE') }</button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="modal-backdrop show in"></div>
+    </div>
+  );
+};
+
+export default WalletsTxInfoRender;

react/src/components/login/login.render.js

@@ -1,9 +1,9 @@
-import React from "react";
-import { translate } from "../../translate/translate";
+import React from 'react';
+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">
@@ -12,19 +12,19 @@ const LoginRender = function () {
           </div>
 
           <div className="vertical-padding-20 horizontal-padding-0">
-                <span className="display-sync-only-coins-toggle" onClick={ this.openSyncOnlyModal }>
-                  <i className="fa fa-cubes"></i> { translate('LOGIN.DISPLAY_SYNC_ONLY') }
-                </span>
+            <span className="display-sync-only-coins-toggle" onClick={ this.openSyncOnlyModal }>
+              <i className="fa fa-cubes"></i> { translate('LOGIN.DISPLAY_SYNC_ONLY') }
+            </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" data-dismiss="alert" aria-label="Close">
-                  <span aria-hidden="true">&times;</span>
+              <div className="alert alert-danger alert-dismissible">
+                <button type="button">
+                  <span>&times;</span>
                   <span className="sr-only">{ translate('INDEX.CLOSE') }</span>
                 </button>
                 { translate('INDEX.IE_UNSUPPORTED') }
@@ -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">
@@ -76,7 +74,6 @@ const LoginRender = function () {
                 <button
                   className="btn btn-lg btn-flat btn-block waves-effect margin-top-20"
                   id="register-btn"
-                  role="menuitem"
                   onClick={ this.toggleActivateCoinForm }
                   disabled={ !this.props.Main }>
                   <span className="ladda-label">{ translate('ADD_COIN.ADD_ANOTHER_COIN') }</span>
@@ -85,16 +82,11 @@ 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="form-group form-material floating width-540 vertical-margin-30 horizontal-margin-0">
+          <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"
-                role="menuitem"
                 onClick={ this.toggleActivateCoinForm }
                 disabled={ !this.props.Main }>
                 <span className="ladda-label">{ translate('INDEX.ACTIVATE_COIN') }</span>
@@ -102,9 +94,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') }:
@@ -148,18 +138,17 @@ const LoginRender = function () {
                 <label className="floating-label" htmlFor="walletseed">{ translate('INDEX.WALLET_SEED') }</label>
               </div>
               <div className="form-group form-material floating">
-                    <textarea
-                      className="form-control placeholder-no-fix height-100"
-                      type="text"
-                      name="randomSeedConfirm"
-                      onChange={ this.updateInput }
-                      id="rwalletseed"></textarea>
+                <textarea
+                  className="form-control placeholder-no-fix height-100"
+                  type="text"
+                  name="randomSeedConfirm"
+                  onChange={ this.updateInput }
+                  id="rwalletseed"></textarea>
                 <span className={ this.state.isSeedConfirmError ? 'help-block' : 'hide' }>{ translate('LOGIN.ENTER_VALUE_AGAIN') }.</span>
                 <label className="floating-label" htmlFor="rwalletseed">{ translate('INDEX.CONFIRM_SEED') }</label>
               </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">

react/src/components/login/swall-modal.render.js

@@ -1,15 +1,15 @@
-import React from "react";
-import {translate} from "../../translate/translate";
+import React from 'react';
+import { translate } from '../../translate/translate';
 
 const SwallModalRender = function () {
   return (
     <div className="swal2-container">
-      <div className="swal2-overlay full-opacity display-block" tabIndex="-1"></div>
-      <div className="swal2-modal show-swal2 visible swal2-modal-container" tabIndex="-1">
+      <div className="swal2-overlay full-opacity display-block"></div>
+      <div className="swal2-modal show-swal2 visible swal2-modal-container">
         <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>

react/src/components/toaster/toaster-item.js

@@ -16,7 +16,8 @@ class ToasterItem extends React.Component {
       display: false,
       message: null,
       type: null,
-      title: null
+      title: null,
+      autoClose: true
     };
 
     this.dismissToast = this.dismissToast.bind(this);
@@ -33,6 +34,7 @@ class ToasterItem extends React.Component {
         display: props.display,
         type: props._type,
         title: props.title,
+        autoClose: props.autoClose,
         toastId: props.toastId
       });
     } else {
@@ -41,6 +43,7 @@ class ToasterItem extends React.Component {
         message: null,
         type: null,
         title: null,
+        autoClose: true,
         toastId: null
       });
     }
@@ -52,7 +55,7 @@ class ToasterItem extends React.Component {
 
   renderToast() {
     // ensure that setTimeout is called only once for each toast message
-    if (!this.timeoutHandler) {
+    if (this.state.autoClose && !this.timeoutHandler) {
       this.timeoutHandler = setTimeout(() => {
         this.dismissToast(this.state.toastId);
       }, DISPLAY_LENGTH_MILLIS);

react/src/components/toaster/toaster.js

@@ -27,10 +27,6 @@ class Toaster extends React.Component {
     }
   }
 
-  dismissToast(toastId) {
-    Store.dispatch(dismissToasterMessage(toastId));
-  }
-
   renderToasts() {
     if (this.state.toasts &&
         this.state.toasts.length) {

react/src/reducers/settings.js

@@ -3,7 +3,8 @@ import {
   GET_PEERS_LIST,
   GET_DEBUG_LOG,
   LOAD_APP_CONFIG,
-  LOAD_APP_INFO
+  LOAD_APP_INFO,
+  CLI
 } from '../actions/storeType';
 
 export function Settings(state = {
@@ -12,6 +13,7 @@ export function Settings(state = {
   debugLog: null,
   appSettings: null,
   appInfo: null,
+  cli: null,
 }, action) {
   switch (action.type) {
     case GET_WIF_KEY:
@@ -36,6 +38,10 @@ export function Settings(state = {
       return Object.assign({}, state, {
         appInfo: action.info,
       });
+    case CLI:
+      return Object.assign({}, state, {
+        cli: action.data,
+      });
     default:
       return state;
   }

react/src/translate/en.js

@@ -426,7 +426,9 @@ export const _lang = {
       'BIN': 'Bin',
       'DIR': 'Dir',
       'ADD_PEER_IP': 'Add Peer IP',
-      'APP_SESSION': 'App Session'
+      'APP_SESSION': 'App Session',
+      'EXPORT_KEYS_NOTE': 'Note: it\'s important that you provide the same passphrase you used to login to the wallet!<br>' +
+                          'In case passphrases will not match wallet is going to log you out of current session.'
     },
     'TX_INFO': {
       'ADDRESS': 'address',

react/src/util/cacheFormat.js

@@ -5,23 +5,20 @@ export function edexGetTxIDList(getTxData) {
     getTxidList.push(getTxData[i].txid);
   }
 
-  console.log(getTxidList);
-
   return getTxidList;
 }
 
 export function edexRemoveTXID(_obj, address, txidArray) {
   let txidToStr = ':' + txidArray.join(':') + ':';
 
-  console.log(txidToStr);
-
   if (_obj, _obj.basilisk) {
     if (Object.keys(_obj.basilisk).length === 0) {
       console.log('no coin nodes to parse');
     } else {
       for (let key in _obj.basilisk) {
         for (let coinAddr in _obj.basilisk[key]) {
-          if (_obj.basilisk[key][coinAddr] !== 'addresses' && coinAddr === address) {
+          if (_obj.basilisk[key][coinAddr] !== 'addresses' &&
+              coinAddr === address) {
             if (_obj.basilisk[key][coinAddr].refresh &&
                 _obj.basilisk[key][coinAddr].refresh.data &&
                 _obj.basilisk[key][coinAddr].refresh.data.length > 0) {