Merge pull request #111 from pbca26/redux

Redux

react/src/actions/actionCreators.js

@@ -53,6 +53,7 @@ export const LOAD_APP_CONFIG = 'LOAD_APP_CONFIG';
 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';
 
 var iguanaForks = {}; // forks in mem array
 
@@ -2493,28 +2494,23 @@ export function edexGetTransaction(data) {
   });
 }
 
-/*export function saveAppConfig() {
-  const payload = {
-    'herdname': target,
-    'lastLines': linesCount
-  };
-
+export function saveAppConfig(_payload) {
   return dispatch => {
-    return fetch('http://127.0.0.1:' + Config.agamaPort + '/shepherd/debuglog', {
+    return fetch('http://127.0.0.1:' + Config.agamaPort + '/shepherd/appconf', {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
       },
-      body: JSON.stringify(payload),
+      body: JSON.stringify(_payload),
     })
     .catch(function(error) {
       console.log(error);
-      dispatch(triggerToaster(true, 'getDebugLog', 'Error', 'error'));
+      dispatch(triggerToaster(true, 'saveAppConfig', 'Error', 'error'));
     })
     .then(response => response.json())
-    .then(json => dispatch(getDebugLogState(json)))
+    .then(json => dispatch(getAppConfigState(json)))
+  }
 }
-}*/
 
 function getAppConfigState(json) {
   return {
@@ -2622,16 +2618,26 @@ export function shepherdPostCoinList(data) {
   });
 }
 
-/*function Shepherd_SendPendValue() {
-  Shepherd_SysInfo().then(function(result){
-    var ram_data = formatBytes(result.totalmem_bytes)
-    var pend_val = null;
-    if (ram_data.size === 'GB') {
-      if (ram_data.ramsize >= '63' ) { pend_val = 16; }
-      if (ram_data.ramsize >= '31' ) { pend_val = 8; }
-      if (ram_data.ramsize >= '15' ) { pend_val = 4; }
-      if (ram_data.ramsize <= '15' ) { pend_val = 1; }
-    } else { pend_val = 1; }
-    sessionStorage.setItem('IguanaPendValue', pend_val);
+function getAppInfoState(json) {
+  return {
+    type: LOAD_APP_INFO,
+    info: json,
+  }
+}
+
+export function getAppInfo() {
+  return dispatch => {
+    return fetch('http://127.0.0.1:' + Config.agamaPort + '/shepherd/appinfo', {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+      },
     })
-}*/
+    .catch(function(error) {
+      console.log(error);
+      dispatch(triggerToaster(true, 'getAppInfo', 'Error', 'error'));
+    })
+    .then(response => response.json())
+    .then(json => dispatch(getAppInfoState(json)))
+  }
+}

react/src/components/addcoin/addcoin.js

@@ -48,7 +48,6 @@ class AddCoin extends React.Component {
   saveCoinSelection() {
     shepherdPostCoinList(this.state.coins)
     .then(function(json) {
-      console.log(json);
       this.toggleActionsMenu();
     }.bind(this));
   }
@@ -56,7 +55,6 @@ class AddCoin extends React.Component {
   loadCoinSelection() {
     shepherdGetCoinList()
     .then(function(json) {
-      console.log(json);
       this.setState(Object.assign({}, this.state, {
         coins: json.result,
         actionsMenu: false,
@@ -156,7 +154,11 @@ class AddCoin extends React.Component {
   }
 
   activateCoin() {
-    Store.dispatch(addCoin(this.state.coins[0].selectedCoin.split('|')[0], this.state.coins[0].mode, this.state.coins[0].syncOnly));
+    Store.dispatch(addCoin(
+      this.state.coins[0].selectedCoin.split('|')[0],
+      this.state.coins[0].mode,
+      this.state.coins[0].syncOnly
+    ));
   }
 
   dismiss() {
@@ -182,13 +184,21 @@ class AddCoin extends React.Component {
   }
 
   activateAllCoins() {
-    Store.dispatch(addCoin(this.state.coins[0].selectedCoin.split('|')[0], this.state.coins[0].mode, this.state.coins[0].syncOnly));
+    Store.dispatch(addCoin(
+      this.state.coins[0].selectedCoin.split('|')[0],
+      this.state.coins[0].mode,
+      this.state.coins[0].syncOnly
+    ));
 
     for (let i = 1; i < this.state.coins.length; i++) {
       const _item = this.state.coins[i];
 
       setTimeout(function() {
-        Store.dispatch(addCoin(_item.selectedCoin.split('|')[0], _item.mode, _item.syncOnly));
+        Store.dispatch(addCoin(
+          _item.selectedCoin.split('|')[0],
+          _item.mode,
+          _item.syncOnly
+        ));
       }, 2000 * i);
     }
   }
@@ -204,7 +214,12 @@ class AddCoin extends React.Component {
         <div className={this.state.coins.length > 1 ? '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)}>
+              <select
+                className="form-control form-material"
+                name="selectedCoin"
+                id="addcoin_select_coin_mdl_options-login"
+                value={_coin}
+                onChange={(event) => this.updateSelectedCoin(event, i)}>
                 <option>{translate('INDEX.SELECT')}</option>
                 <AddCoinOptionsCrypto />
                 <AddCoinOptionsAC />
@@ -213,7 +228,12 @@ class AddCoin extends React.Component {
             </div>
           </div>
           <div className={this.state.coins.length > 1 ? 'hide' : 'col-sm-4'}>
-            <button type="button" className="btn btn-primary mdl_addcoin_done_btn-login" data-toggle="modal" data-dismiss="modal" id="mdl_addcoin_done_btn-login" onClick={() => this.activateCoin(i)} disabled={_item.mode === -2 }>{translate('INDEX.ACTIVATE_COIN')}</button>
+            <button
+              type="button"
+              className="btn btn-primary mdl_addcoin_done_btn-login"
+              id="mdl_addcoin_done_btn-login"
+              onClick={() => this.activateCoin(i)}
+              disabled={_item.mode === -2 }>{translate('INDEX.ACTIVATE_COIN')}</button>
           </div>
           <div className="col-sm-12 text-center">
             <div className="form-group col-lg-4 col-md-4 col-sm-6 col-xs-6 style-addcoin-lbl-mdl-login">
@@ -253,7 +273,7 @@ class AddCoin extends React.Component {
             <div className="pull-left margin-right-10">
               <input type="checkbox" id="addcoin_sync_only" data-plugin="switchery" data-size="small" checked={_item.syncOnly} />
             </div>
-            <label className="padding-top-3 padding-bottom-10" htmlFor="addcoin_sync_only" onClick={() => this.toggleSyncOnlyMode(i)}>Sync only</label>
+            <label className="padding-top-3 padding-bottom-10" htmlFor="addcoin_sync_only" onClick={() => this.toggleSyncOnlyMode(i)}>{translate('ADD_COIN.SYNC_ONLY')}</label>
           </div>
         </div>
       );
@@ -265,7 +285,13 @@ class AddCoin extends React.Component {
   render() {
     return (
       <div>
-        <div className={'modal modal-3d-sign add-coin-modal ' + (this.state.display ? 'show in' : 'fade hide')} 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.display ? 'show in' : 'fade hide')}
+          id="AddCoinDilogModel-login"
+          aria-hidden="true"
+          aria-labelledby="AddCoinDilogModel-login"
+          role="dialog"
+          tabIndex="-1">
           <div className="modal-dialog modal-center modal-lg">
             <div className="modal-content">
               <div className="modal-header bg-orange-a400 wallet-send-header">
@@ -280,12 +306,19 @@ class AddCoin extends React.Component {
                   <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}>Save Selection</button>
-                  <button className="btn btn-outline-primary btn-load-coin-selection" onClick={this.loadCoinSelection}>Load Selection</button>
+                  <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={this.state.coins.length > 1 ? 'col-sm-12' : 'hide'} style={{textAlign: 'center', margin: '20px 0'}}>
-                  <button type="button" className="btn btn-primary col-sm-4" style={{float: 'none'}} data-toggle="modal" data-dismiss="modal" id="mdl_addcoin_done_btn-login" onClick={this.activateAllCoins}>Activate all</button>
+                  <button
+                    type="button"
+                    className="btn btn-primary col-sm-4"
+                    style={{float: 'none'}}
+                    data-toggle="modal"
+                    data-dismiss="modal"
+                    id="mdl_addcoin_done_btn-login"
+                    onClick={this.activateAllCoins}>{translate('ADD_COIN.ACTIVATE_ALL')}</button>
                 </div>
                 <div className="col-sm-12">
                   <p>

react/src/components/dashboard/about.js

@@ -4,7 +4,7 @@ import { translate } from '../../translate/translate';
 class About extends React.Component {
   render() {
     return(
-      <div className="page" data-animsition-in="fade-in" data-animsition-out="fade-out" style={{marginLeft: '0'}}>
+      <div className="page" style={{marginLeft: '0'}}>
         <div className="page-content" id="section-about-iguana">
           <h2>About Iguana</h2>
           <p>Page content goes here</p>

react/src/components/dashboard/appSettings.js

@@ -1,39 +0,0 @@
-import React from 'react';
-import { translate } from '../../translate/translate';
-import {
-
-} from '../../actions/actionCreators';
-import Store from '../../store';
-
-class AppSettings extends React.Component {
-  constructor(props) {
-    super(props);
-    //this.closeSyncOnlyModal = this.closeSyncOnlyModal.bind(this);
-  }
-
-  render() {
-    /*if (this.props && this.props.SyncOnly.display) {
-      return (
-        <div>
-          <div className="modal show sync-only-forks" aria-hidden="false" role="dialog">
-            <div className="modal-dialog modal-center modal-lg">
-              <div className="modal-content">
-                <div className="modal-body" style={{height: '590px'}}>
-                  {this.renderForksList()}
-                </div>
-                <div className="modal-footer">
-                  <button type="button" className="btn btn-default" onClick={this.closeSyncOnlyModal}>Close</button>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div className="modal-backdrop show in"></div>
-        </div>
-      );
-    } else {
-      return null;
-    }*/
-  }
-}
-
-export default AppSettings;

react/src/components/dashboard/atomic.js

@@ -344,9 +344,140 @@ class Atomic extends React.Component {
     }
   }
 
+  renderAtomicOptions() {
+    const _options = [
+      {
+        method: 'history',
+        name: 'Address History',
+      },
+      {
+        method: 'getbalance',
+        name: 'Get Balance',
+      },
+      {
+        method: 'listunspent',
+        name: 'List Unspent',
+      },
+      {
+        method: 'txid',
+        name: 'Transaction ID',
+      },
+      {
+        method: 'blockash',
+        name: 'Block Hash',
+      },
+      {
+        method: 'chaintip',
+        name: 'Chain Tip',
+      },
+      {
+        method: 'activehandle',
+        name: 'Active Handle',
+      },
+      {
+        method: 'gettransaction',
+        name: 'Get Transaction',
+      },
+      {
+        method: 'dex_alladdresses',
+        name: 'DEX All Addresses',
+      },
+      {
+        method: 'dex_importaddress',
+        name: 'DEX Import Address',
+      },
+      {
+        method: 'dex_checkaddress',
+        name: 'DEX Check Address',
+      },
+      {
+        method: 'dex_validateaddress',
+        name: 'DEX Validate Address',
+      },
+      {
+        method: 'dex_getinfo',
+        name: 'DEX Get Info',
+      },
+      {
+        method: 'dex_getnotaries',
+        name: 'DEX Get Notaries',
+      },
+      {
+        method: 'dex_getbestblockhash',
+        name: 'DEX Get Best Block Has',
+      },
+      {
+        method: 'dex_getblock',
+        name: 'DEX Get Block',
+      },
+      {
+        method: 'dex_gettxin',
+        name: 'DEX Get Txin',
+      },
+      {
+        method: 'dex_gettxout',
+        name: 'DEX Get Txout',
+      },
+      {
+        method: 'dex_gettransaction',
+        name: 'DEX Get Transaction',
+      },
+      {
+        method: 'dex_getbalance',
+        name: 'DEX Get Balance',
+      },
+      {
+        method: 'dex_getsupply',
+        name: 'DEX Get Supply',
+      },
+      {
+        method: 'dex_listtransactions',
+        name: 'DEX List Transactions',
+      },
+      {
+        method: 'dex_listtransactions2',
+        name: 'DEX List Transactions 2',
+      },
+      {
+        method: 'dex_listspent',
+        name: 'DEX List Spent',
+      },
+      {
+        method: 'dex_listunspent',
+        name: 'DEX List Unspent',
+      },
+      {
+        method: 'dex_listunspent2',
+        name: 'DEX List Unspent 2',
+      },
+      {
+        method: 'dex_sendrawtransaction',
+        name: 'DEX Send Raw Transaction',
+      },
+      {
+        method: 'basilisk_refresh',
+        name: 'Basilisk Refresh',
+      },
+      {
+        method: 'jumblr_status',
+        name: 'Jumbler Status',
+      },
+    ];
+
+    let items = [];
+
+    for (let i = 0; i < _options.length; i++) {
+      items.push(
+        <option key={_options[i].method} value={_options[i].method}>{_options[i].name}</option>
+      );
+    }
+
+    return items;
+  }
+
   render() {
     return (
-      <div className="page" data-animsition-in="fade-in" data-animsition-out="fade-out" style={{marginLeft: '0'}}>
+      <div className="page" style={{marginLeft: '0'}}>
         <div className="page-content" id="section-iguana-atomic-explorer">
           <div className="row" id="atomic-explorer" data-plugin="masonry">
             <div className="col-xlg-12 col-md-12">
@@ -365,44 +496,15 @@ class Atomic extends React.Component {
                   </div>
                   <div className="col-sm-4 col-xs-12" style={{textAlign: 'center'}}>
                     <select className="form-control form-material" id="atomic_explorer_select_command_options" onChange={this.updateSelectedAPI}>
-                      <option value="">-Select Command-</option>
-                      <option value="history">Address History</option>
-                      <option value="getbalance">Get Balance</option>
-                      <option value="listunspent">List Unspent</option>
-                      <option value="txid">Transaction ID</option>
-                      <option value="blockash">Block Hash</option>
-                      <option value="chaintip">Chain Tip</option>
-                      <option value="activehandle">Active Handle</option>
-                      <option value="gettransaction">Get Transaction</option>
-                      <option value="dex_alladdresses">DEX All Addresses</option>
-                      <option value="dex_importaddress">DEX Import Address</option>
-                      <option value="dex_checkaddress">DEX Check Address</option>
-                      <option value="dex_validateaddress">DEX Validate Address</option>
-                      <option value="dex_getinfo">DEX Get Info</option>
-                      <option value="dex_getnotaries">DEX Get Notaries</option>
-                      <option value="dex_getbestblockhash">DEX Get Best Block Hash</option>
-                      <option value="dex_getblockhash">DEX Get Block Hash</option>
-                      <option value="dex_getblock">DEX Get Block</option>
-                      <option value="dex_gettxin">DEX Get txin</option>
-                      <option value="dex_gettxout">DEX Get txout</option>
-                      <option value="dex_gettransaction">DEX Get Transaction</option>
-                      <option value="dex_getbalance">DEX Get Balance</option>
-                      <option value="dex_getsupply">DEX Get Supply</option>
-                      <option value="dex_listtransactions">DEX List Transactions</option>
-                      <option value="dex_listtransactions2">DEX List Transactions 2</option>
-                      <option value="dex_listspent">DEX List Spent</option>
-                      <option value="dex_listunspent">DEX List Unspent</option>
-                      <option value="dex_listunspent2">DEX List Unspent 2</option>
-                      <option value="dex_sendrawtransaction">DEX Send Raw Transaction</option>
-                      <option value="basilisk_refresh">Basilisk Refresh</option>
-                      <option value="jumblr_status">Jumbler Status</option>
+                      <option value="">-{translate('ATOMIC.SELECT_COMMAND')}-</option>
+                      {this.renderAtomicOptions()}
                     </select>
                   </div>
                   <div className="col-sm-4 col-xs-12" style={{textAlign: 'center'}}>
-                    <input type="text" className="form-control" id="atomic_explorer_input_data" name="atomic_explorer_input_data" placeholder="addr, txid, blockash etc." onChange={this.updateInput} />
+                    <input type="text" className="form-control" id="atomic_explorer_input_data" name="atomic_explorer_input_data" placeholder={translate('ATOMIC.INPUT_PLACEHOLDER')} onChange={this.updateInput} />
                   </div>
                   <div className="col-sm-12 col-xs-12" style={{textAlign: 'center'}}>
-                    <button type="button" className="btn btn-primary waves-effect waves-light" data-toggle="modal" data-dismiss="modal" id="atomic_explorer_getcoinpeers_btn" onClick={this.getAtomicData}>Submit</button>
+                    <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>
               </div>
@@ -410,7 +512,7 @@ class Atomic extends React.Component {
             <div className="col-xlg-4 col-md-12">
               <div className="panel">
                 <div className="panel-heading">
-                  <h3 className="panel-title">Raw Output</h3>
+                  <h3 className="panel-title">{translate('ATOMIC.RAW_OUTPUT')}</h3>
                 </div>
                 <div className="panel-body">
                   <div className="tab-content">

react/src/components/dashboard/navbar.js

@@ -76,7 +76,7 @@ class Navbar extends React.Component {
                   <i className="site-menu-icon" aria-hidden="true"></i> EasyDEX
                 </a>
               </li>
-              <li className={this.props.Dashboard.activeSection === 'jumblr' ? 'active nav-top-menu' : 'nav-top-menu'}>
+              <li className={this.props.Dashboard.activeSection === 'jumblr' ? 'active nav-top-menu' : 'nav-top-menu'} style={{display: 'none'}}>
                 <a href="javascript:void(0)" id="nav-jumblr" onClick={() => this.dashboardChangeSection('jumblr')}>
                   <i className="site-menu-icon" aria-hidden="true"></i> Jumblr
                 </a>

react/src/components/dashboard/sendCoin.js

@@ -30,6 +30,8 @@ import { SocketProvider } from 'socket.io-react';
 import io from 'socket.io-client';
 const socket = io.connect('http://127.0.0.1:' + Config.agamaPort);
 
+// TODO: prevent any cache updates rather than utxo while on send coin form
+
 class SendCoin extends React.Component {
   constructor(props) {
     super(props);
@@ -139,16 +141,18 @@ class SendCoin extends React.Component {
           <button type="button" style={{marginTop: '10px'}} className={isReadyToUpdate ? 'btn btn-primary waves-effect waves-light' : 'hide'} onClick={this._fetchNewUTXOData} disabled={waitUntilCallIsFinished}>
             {waitUntilCallIsFinished ? 'Locked, please wait...' : 'Update'}
           </button>
-          <hr />
-          <div>
-            Split funds
-            <hr />
-          </div>
         </div>
       );
     } else {
       return null;
     }
+    /*
+          <hr />
+          <div>
+            Split funds
+            <hr />
+          </div>
+    */
   }
 
   renderAddressAmount(address) {
@@ -157,9 +161,11 @@ class SendCoin extends React.Component {
         this.props.ActiveCoin.addresses['public'].length) {
       for (let i = 0; i < this.props.ActiveCoin.addresses['public'].length; i++) {
         if (this.props.ActiveCoin.addresses['public'][i].address === address) {
+          if (this.props.ActiveCoin.addresses['public'][i].amount !== 'N/A') {
             return this.props.ActiveCoin.addresses['public'][i].amount;
           }
         }
+      }
     } else {
       return 0;
     }
@@ -179,12 +185,25 @@ class SendCoin extends React.Component {
           </li>
         );
       } else {
-        return this.props.ActiveCoin.addresses[type].map((address) =>
+        let items = [];
+
+        for (let i = 0; i < this.props.ActiveCoin.addresses[type].length; i++) {
+          const address = this.props.ActiveCoin.addresses[type][i];
+          let _amount = address.amount;
+
+          if (this.props.ActiveCoin.mode === 'basilisk') {
+            _amount = 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';
+          }
+
+          items.push(
             <li data-original-index="2" key={address.address} className={address.amount <= 0 ? 'hide' : ''}>
-            <a tabIndex="0" data-tokens="null" 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 tabIndex="0" data-tokens="null" onClick={() => this.updateAddressSelection(address.address, type, _amount)}><i className={type === 'public' ? 'icon fa-eye' : 'icon fa-eye-slash'}></i>  <span className="text">[ {_amount} {this.props.ActiveCoin.coin} ]  {address.address}</span><span className="glyphicon glyphicon-ok check-mark"></span></a>
             </li>
           );
         }
+
+        return items;
+      }
     } else {
       return null;
     }
@@ -238,10 +257,16 @@ 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') {
+      _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';
+    }
+
     this.setState(Object.assign({}, this.state, {
       sendFrom: address,
       addressType: type,
-      sendFromAmount: amount ? amount : this.props.ActiveCoin.addresses[type][address].amount,
+      sendFromAmount: _sendFromAmount,
       addressSelectorOpen: !this.state.addressSelectorOpen,
     }));
   }
@@ -288,6 +313,7 @@ class SendCoin extends React.Component {
     const utxoSet = (refreshData && refreshData.data) || (listunspentData && listunspentData.data);
     const _pubkey = this.props.Dashboard.activeHandle.pubkey;
     const forceUpdateCache = this._fetchNewUTXOData;
+    const _sendFrom = this.state.sendFrom;
     const sendData = {
             'coin': this.props.ActiveCoin.coin,
             'sendfrom': this.state.sendFrom,
@@ -356,7 +382,7 @@ class SendCoin extends React.Component {
                   getCacheFile(_pubkey)
                   .then(function(result) {
                     console.log('got cache file', result);
-                    let saveThisData = edexRemoveTXID(result.result, txidListToRemove);
+                    let saveThisData = edexRemoveTXID(result.result, _sendFrom, txidListToRemove);
                     console.log('saveThisData', saveThisData);
                     resolve(saveThisData);
                   });
@@ -698,7 +724,7 @@ class SendCoin extends React.Component {
                       <label className="padding-top-3" htmlFor="edexcoin_send_sig" onClick={this.toggleSendSig}>{translate('INDEX.DONT_SEND')}</label>
                     </div>
                     {this.renderUTXOCacheInfo()}
-                    <div className="col-lg-2">
+                    <div className="col-lg-12">
                       <button type="button" className="btn btn-primary waves-effect waves-light pull-right edexcoin_send_coins_btn_step1" onClick={() => this.changeSendCoinStep(1)}>
                         {translate('INDEX.SEND')} {Number(this.state.amount) - Number(this.state.fee)} {this.props.ActiveCoin.coin}
                       </button>

react/src/components/dashboard/settings.js

@@ -8,7 +8,9 @@ import {
   getDebugLog,
   getPeersList,
   addPeerNode,
-  getAppConfig
+  getAppConfig,
+  saveAppConfig,
+  getAppInfo
 } from '../../actions/actionCreators';
 import Store from '../../store';
 import AddCoinOptionsCrypto from '../addcoin/addcoinOptionsCrypto';
@@ -30,6 +32,7 @@ class Settings extends React.Component {
       debugLinesCount: 10,
       debugTarget: 'iguana',
       activeTabHeight: '10px',
+      appSettings: [],
     };
     this.exportWifKeys = this.exportWifKeys.bind(this);
     this.updateInput = this.updateInput.bind(this);
@@ -44,12 +47,16 @@ class Settings extends React.Component {
   componentDidMount() {
     Store.dispatch(iguanaActiveHandle());
     Store.dispatch(getAppConfig());
+    Store.dispatch(getAppInfo());
+  }
+
+  _saveAppConfig() {
+    Store.dispatch(saveAppConfig);
   }
 
   openTab(elemId, tab) {
-    console.log(elemId);
-    const _height = document.querySelector('#' + elemId + ' .panel-collapse .panel-body').clientHeight;
-    console.log(_height);
+    const _height = document.querySelector('#' + elemId + ' .panel-collapse .panel-body').offsetHeight;
+
     this.setState(Object.assign({}, this.state, {
       activeTab: tab,
       activeTabHeight: _height,
@@ -96,6 +103,88 @@ class Settings extends React.Component {
     }
   }
 
+  renderAppInfoTab() {
+    const releaseInfo = this.props.Settings.appInfo && this.props.Settings.appInfo.releaseInfo;
+
+    if (releaseInfo) {
+      return (
+        <div className="panel" id="AppInfo">
+          <div className="panel-heading" role="tab" onClick={() => this.openTab('AppInfo', 8)}>
+            <a className={this.state.activeTab === 8 ? 'panel-title' : 'panel-title collapsed'} data-toggle="collapse" data-parent="#AppInfoAccordion">
+              <i className="icon md-info" aria-hidden="true"></i>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' : '10px'}} aria-labelledby="DebugLog" role="tabpanel">
+            <div className="panel-body">
+              <div className="col-sm-12" style={{paddingTop: '15px'}}>
+                <div className="row">
+                  <h5>App Release</h5>
+                  <div>
+                    Name: {this.props.Settings.appInfo.releaseInfo.name}
+                  </div>
+                  <div>
+                    Version: {this.props.Settings.appInfo.releaseInfo.version}
+                  </div>
+                </div>
+              </div>
+              <div className="col-sm-12" style={{paddingTop: '20px'}}>
+                <div className="row">
+                  <h5>System Info</h5>
+                  <div>
+                    Architecture: {this.props.Settings.appInfo.sysInfo.arch}
+                  </div>
+                  <div>
+                    OS Type: {this.props.Settings.appInfo.sysInfo.os_type}
+                  </div>
+                  <div>
+                    OS Platfrom: {this.props.Settings.appInfo.sysInfo.platform}
+                  </div>
+                  <div>
+                    OS Release: {this.props.Settings.appInfo.sysInfo.os_release}
+                  </div>
+                  <div>
+                    CPU: {this.props.Settings.appInfo.sysInfo.cpu}
+                  </div>
+                  <div>
+                    CPU Cores: {this.props.Settings.appInfo.sysInfo.cpu_cores}
+                  </div>
+                  <div>
+                    Memory: {this.props.Settings.appInfo.sysInfo.totalmem_readable}
+                  </div>
+                </div>
+              </div>
+              <div className="col-sm-12" style={{paddingTop: '20px'}}>
+                <div className="row">
+                  <h5>Locations</h5>
+                  <div>
+                    Cache: {this.props.Settings.appInfo.dirs.cacheLocation}
+                  </div>
+                  <div>
+                    Config: {this.props.Settings.appInfo.dirs.configLocation}
+                  </div>
+                  <div>
+                    Iguana Bin: {this.props.Settings.appInfo.dirs.iguanaBin}
+                  </div>
+                  <div>
+                    Iguana Dir: {this.props.Settings.appInfo.dirs.iguanaDir}
+                  </div>
+                  <div>
+                    Komodo Bin: {this.props.Settings.appInfo.dirs.komododBin}
+                  </div>
+                  <div>
+                    Komodo Dir: {this.props.Settings.appInfo.dirs.komodoDir}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      );
+    } else {
+      return null;
+    }
+  }
+
   renderSNPeersList() {
     if (this.state.getPeersCoin) {
       const coin = this.state.getPeersCoin.split('|')[0];
@@ -112,6 +201,51 @@ class Settings extends React.Component {
     }
   }
 
+  renderConfigEditForm() {
+    console.log(this.props.Settings.appSettings);
+    let items = [];
+    const _appConfig = this.props.Settings.appSettings;
+
+    for (let key in this.props.Settings.appSettings) {
+      if (Object.keys(this.props.Settings.appSettings[key]).length && key !== 'host') {
+        items.push(
+          <tr key={`app-settings-${key}`}>
+            <td style={{padding: '15px'}}>
+              {key}
+            </td>
+            <td style={{padding: '15px'}}></td>
+          </tr>
+        );
+
+        for (let _key in this.props.Settings.appSettings[key]) {
+          items.push(
+            <tr key={`app-settings-${key}-${_key}`}>
+              <td style={{padding: '15px', paddingLeft: '30px'}}>
+                {_key}
+              </td>
+              <td style={{padding: '15px'}}>
+                <input type="text" name={`app-settings-${_key}-edit`} defaultValue={_appConfig[key][_key]} />
+              </td>
+            </tr>
+          );
+        }
+      } else {
+        items.push(
+          <tr key={`app-settings-${key}`}>
+            <td style={{padding: '15px'}}>
+              {key}
+            </td>
+            <td style={{padding: '15px'}}>
+              <input type="text" name={`app-settings-${key}-edit`} defaultValue={_appConfig[key]} />
+            </td>
+          </tr>
+        );
+      }
+    }
+
+    return items;
+  }
+
   updateInput(e) {
     this.setState({
       [e.target.name]: e.target.value,
@@ -393,40 +527,31 @@ class Settings extends React.Component {
 
                     <div className="panel" id="AppSettings">
                       <div className="panel-heading" role="tab" onClick={() => this.openTab('AppSettings', 7)}>
-                          <a className={this.state.activeTab === 6 ? 'panel-title' : 'panel-title collapsed'} data-toggle="collapse" data-parent="#AppSettings">
-                            <i className="icon md-info" aria-hidden="true"></i>App Settings (config.json)
+                        <a className={this.state.activeTab === 7 ? 'panel-title' : 'panel-title collapsed'} data-toggle="collapse" data-parent="#AppSettings">
+                          <i className="icon md-info" aria-hidden="true"></i>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' : '10px'}} id="DebugLogTab" aria-labelledby="DebugLog" role="tabpanel">
                         <div className="panel-body">
-                            <p>Manage app settings</p>
-                            <div className="col-sm-12"></div>
+                          <p>
+                            <strong>Most changes to app config require wallet restart!</strong>
+                          </p>
                           <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="read_debug_log_lines" value={this.state.debugLinesCount} onChange={this.updateInput} />
-                                <label className="floating-label" htmlFor="read_debug_log_lines">{translate('INDEX.DEBUG_LOG_LINES')}</label>
-                              </div>
-                              <div className="form-group form-material floating">
-                                <select className="form-control form-material" name="debugTarget" id="settings_select_debuglog_options" onChange={this.updateInput}>
-                                  <option value="iguana">Iguana</option>
-                                  <option value="komodo">Komodo</option>
-                                </select>
-                                <label className="floating-label" htmlFor="settings_select_debuglog_options">{translate('INDEX.TARGET')}</label>
-                              </div>
-                              <div className="col-sm-12 col-xs-12" style={{textAlign: 'center'}}>
-                                <button type="button" className="btn btn-primary waves-effect waves-light" data-toggle="modal" data-dismiss="modal" id="read_debug_log_btn" onClick={this.readDebugLog}>{translate('INDEX.LOAD_DEBUG_LOG')}</button>
+                            <div className="col-sm-12" style={{paddingTop: '15px'}}>
+                              <table>
+                                <tbody>
+                                {this.renderConfigEditForm()}
+                                </tbody>
+                              </table>
                             </div>
-                              <div className="col-sm-12 col-xs-12" style={{textAlign: 'left'}}>
-                                <br />
-                                <div style={{padding: '20px 0'}}>{this.props.Settings.debugLog}</div>
+                            <div className="col-sm-12 col-xs-12" style={{textAlign: 'center', paddingTop: '25px', paddingBottom: '25px'}}>
+                              <button type="button" className="btn btn-primary waves-effect waves-light" data-toggle="modal" data-dismiss="modal" id="read_debug_log_btn" onClick={this._saveAppConfig}>Save app config</button>
                             </div>
                           </form>
-                            <div className="col-sm-12" style={{paddingTop: '15px'}}>
-                              <div className="row" data-plugin="masonry"></div>
-                            </div>
                         </div>
                       </div>
                     </div>
+                    {this.renderAppInfoTab()}
                   </div>
                 </div>
               </div>

react/src/components/dashboard/walletsData.js

@@ -186,7 +186,10 @@ class WalletsData extends React.Component {
       }));
     }
 
-    if (this.props.ActiveCoin.txhistory && this.props.ActiveCoin.txhistory !== 'loading' && this.props.ActiveCoin.txhistory !== 'no data' && this.props.ActiveCoin.txhistory.length) {
+    if (this.props.ActiveCoin.txhistory &&
+        this.props.ActiveCoin.txhistory !== 'loading' &&
+        this.props.ActiveCoin.txhistory !== 'no data' &&
+        this.props.ActiveCoin.txhistory.length) {
       if (!this.state.itemsList || (this.state.itemsList && !this.state.itemsList.length) || (props.ActiveCoin.txhistory !== this.props.ActiveCoin.txhistory)) {
         let historyToSplit = sortByDate(this.props.ActiveCoin.txhistory);
         historyToSplit = historyToSplit.slice((this.state.activePage - 1) * this.state.itemsPerPage, this.state.activePage * this.state.itemsPerPage);
@@ -323,6 +326,10 @@ class WalletsData extends React.Component {
       return (
         <div>Loading history...</div>
       );
+    } else if (this.state.itemsList === 'no data') {
+      return (
+        <div>No data</div>
+      );
     } else {
       if (this.state.itemsList && this.state.itemsList.length && this.state.itemsList !== 'no data') {
         return this.state.itemsList.map((tx, index) =>
@@ -350,10 +357,20 @@ class WalletsData extends React.Component {
       activePage: 1,
     }));
 
+    if (this.props.ActiveCoin.mode === 'basilisk') {
       setTimeout(function() {
         Store.dispatch(changeMainBasiliskAddress(address));
         Store.dispatch(getBasiliskTransactionsList(this.props.ActiveCoin.coin, address));
       }.bind(this), 100);
+
+      Store.dispatch(fetchNewCacheData({
+        'pubkey': this.props.Dashboard.activeHandle.pubkey,
+        'allcoins': false,
+        'coin': this.props.ActiveCoin.coin,
+        'calls': 'listtransactions:getbalance',
+        'address': address,
+      }));
+    }
   }
 
   openDropMenu() {

react/src/components/dashboard/walletsNativeSend.js

@@ -33,7 +33,7 @@ class WalletsNativeSend extends React.Component {
     if (this.props.ActiveCoin.addresses && this.props.ActiveCoin.addresses[type] && this.props.ActiveCoin.addresses[type].length) {
       return this.props.ActiveCoin.addresses[type].map((address) =>
         <li data-original-index="2" key={address.address} className={address.amount <= 0 ? 'hide' : ''}>
-          <a tabIndex="0" data-tokens="null" 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 tabIndex="0" 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>
         </li>
       );
     } else {

react/src/components/dashboard/walletsNativeSyncProgress.js

@@ -5,22 +5,22 @@ class WalletsNativeSyncProgress extends React.Component {
   renderSyncPercentagePlaceholder() {
     if (this.props.Dashboard.progress.blocks > 0 && this.props.Dashboard.progress.longestchain === 0) {
       return (
-        <div className="progress-bar progress-bar-info progress-bar-striped active" style={{width: '100%', fontSize: '80%'}} role="progressbar" data-extcoin="COIN" id="extcoin-sync">
-          <span data-extcoin="COIN" id="extcoin-sync-percent" style={{width: '100%'}}>Unable to get current sync progress. Err: no longestchain param in response</span>
+        <div className="progress-bar progress-bar-info progress-bar-striped active" style={{width: '100%', fontSize: '80%'}} role="progressbar" id="extcoin-sync">
+          <span id="extcoin-sync-percent" style={{width: '100%'}}>{translate('INDEX.SYNC_ERR_LONGESTCHAIN')}</span>
         </div>
       );
     } else if (this.props.Dashboard.progress.blocks === 0) {
       return (
-        <div className="progress-bar progress-bar-info progress-bar-striped active" style={{width: '100%', fontSize: '80%'}} role="progressbar" data-extcoin="COIN" id="extcoin-sync">
-          <span data-extcoin="COIN" id="extcoin-sync-percent" style={{width: '100%'}}>Unable to get current sync progress. Err: no blocks param in response</span>
+        <div className="progress-bar progress-bar-info progress-bar-striped active" style={{width: '100%', fontSize: '80%'}} role="progressbar" id="extcoin-sync">
+          <span id="extcoin-sync-percent" style={{width: '100%'}}>{translate('INDEX.SYNC_ERR_BLOCKS')}</span>
         </div>
       );
     } else {
       var syncPercentage = (parseFloat(parseInt(this.props.Dashboard.progress.blocks, 10) * 100 / parseInt(this.props.Dashboard.progress.longestchain, 10)).toFixed(2) + '%').replace('NaN', 0);
 
       return (
-        <div className="progress-bar progress-bar-info progress-bar-striped active" style={{width: syncPercentage, fontSize: '80%'}} role="progressbar" data-extcoin="COIN" id="extcoin-sync">
-          <span data-extcoin="COIN" id="extcoin-sync-percent" style={{width: syncPercentage}}>{syncPercentage}</span> | <span data-extcoin="COIN" id="extcoin-synced-blocks">{this.props.Dashboard.progress.blocks}</span> / <span data-extcoin="COIN" id="extcoin-longestchain">{this.props.Dashboard.progress.longestchain}</span> | {translate('INDEX.CONNECTIONS')}: <span data-extcoin="COIN" id="extcoin-connections">{this.props.Dashboard.progress.connections}</span>
+        <div className="progress-bar progress-bar-info progress-bar-striped active" style={{width: syncPercentage, fontSize: '80%'}} role="progressbar" id="extcoin-sync">
+          <span id="extcoin-sync-percent" style={{width: syncPercentage}}>{syncPercentage}</span> | <span id="extcoin-synced-blocks">{this.props.Dashboard.progress.blocks}</span> / <span id="extcoin-longestchain">{this.props.Dashboard.progress.longestchain}</span> | {translate('INDEX.CONNECTIONS')}: <span id="extcoin-connections">{this.props.Dashboard.progress.connections}</span>
         </div>
       );
     }
@@ -29,10 +29,10 @@ class WalletsNativeSyncProgress extends React.Component {
   renderActivatingBestChainProgress() {
     if (this.props.Settings && this.props.Settings.debugLog && this.props.Dashboard.progress.remoteKMDNode) {
       if (this.props.Settings.debugLog.indexOf('UpdateTip') > -1) {
-        var temp = this.props.Settings.debugLog.split(' ');
-        var currentBestChain;
+        let temp = this.props.Settings.debugLog.split(' ');
+        let currentBestChain;
 
-        for (var i = 0; i < temp.length; i++) {
+        for (let i = 0; i < temp.length; i++) {
           if (temp[i].indexOf('height=') > -1) {
             currentBestChain = temp[i].replace('height=', '');
           }
@@ -48,7 +48,7 @@ class WalletsNativeSyncProgress extends React.Component {
   renderChainActivationNotification() {
     if ((this.props.Dashboard.progress.blocks < this.props.Dashboard.progress.longestchain) || this.props.Dashboard.progress.remoteKMDNode) {
       return (
-        <div role="alert" className="alert alert-info alert-dismissible" data-extcoin="COIN" id="extcoin-wallet-activating-alert" style={{marginBottom: '40px'}}>
+        <div role="alert" className="alert alert-info alert-dismissible" id="extcoin-wallet-activating-alert" style={{marginBottom: '40px'}}>
           <button aria-label="Close" data-dismiss="alert" className="close" type="button">
             <span aria-hidden="true">×</span>
           </button>
@@ -68,7 +68,7 @@ class WalletsNativeSyncProgress extends React.Component {
       return (
         <div>
           {this.renderChainActivationNotification()}
-          <div className="row" data-extcoin="COIN" style={{margin: '-20px 0px 10px 0px'}}>
+          <div className="row" style={{margin: '-20px 0px 10px 0px'}}>
             <div className="col-xs-12" data-extcoin="COIN" id="extcoin-progressbars">
               <div className="progress">
                 {this.renderSyncPercentagePlaceholder()}

react/src/components/dashboard/walletsNativeTxHistory.js

@@ -80,7 +80,9 @@ class WalletsNativeTxHistory extends React.Component {
   }
 
   componentWillReceiveProps(props) {
-    if (!this.state.itemsList || (this.state.itemsList && !this.state.itemsList.length) || (props.ActiveCoin.txhistory !== this.props.ActiveCoin.txhistory)) {
+    if (!this.state.itemsList ||
+        (this.state.itemsList && !this.state.itemsList.length) ||
+        (props.ActiveCoin.txhistory !== this.props.ActiveCoin.txhistory)) {
       if (this.props.ActiveCoin.txhistory && this.props.ActiveCoin.txhistory !== 'loading') {
         let historyToSplit = sortByDate(this.props.ActiveCoin.txhistory);
         historyToSplit = historyToSplit.slice((this.state.activePage - 1) * this.state.itemsPerPage, this.state.activePage * this.state.itemsPerPage);
@@ -108,7 +110,7 @@ class WalletsNativeTxHistory extends React.Component {
     for (let i=0; i < Math.floor(this.props.ActiveCoin.txhistory.length / this.state.itemsPerPage); i++) {
       items.push(
         <li className={this.state.activePage === i + 1 ? 'paginate_button active' : 'paginate_button'}>
-          <a aria-controls="kmd-tx-history-tbl" data-dt-idx="1" tabIndex="0" key={i + '-pagination'} onClick={this.state.activePage !== (i + 1) ? () => this.updateCurrentPage(i + 1) : null}>{i + 1}</a>
+          <a aria-controls="kmd-tx-history-tbl" tabIndex="0" key={i + '-pagination'} onClick={this.state.activePage !== (i + 1) ? () => this.updateCurrentPage(i + 1) : null}>{i + 1}</a>
         </li>
       );
     }
@@ -117,18 +119,20 @@ class WalletsNativeTxHistory extends React.Component {
   }
 
   renderPaginationItemsPerPageSelector() {
-    if (this.props.ActiveCoin.txhistory && this.props.ActiveCoin.txhistory !== 'loading' && this.props.ActiveCoin.txhistory.length > 10) {
+    if (this.props.ActiveCoin.txhistory &&
+        this.props.ActiveCoin.txhistory !== 'loading' &&
+        this.props.ActiveCoin.txhistory.length > 10) {
       return (
         <div className="dataTables_length" id="kmd-tx-history-tbl_length">
           <label>
-            Show&nbsp;
+            {translate('INDEX.SHOW')}&nbsp;
             <select name="itemsPerPage" aria-controls="kmd-tx-history-tbl" className="form-control input-sm" onChange={this.updateInput}>
               <option value="10">10</option>
               <option value="25">25</option>
               <option value="50">50</option>
               <option value="100">100</option>
             </select>&nbsp;
-            entries
+            {translate('INDEX.ENTRIES_SM')}
           </label>
         </div>
       );
@@ -138,21 +142,23 @@ class WalletsNativeTxHistory extends React.Component {
   }
 
   renderPagination() {
-    if (this.props.ActiveCoin.txhistory && this.props.ActiveCoin.txhistory !== 'loading' && this.props.ActiveCoin.txhistory.length > 10) {
+    if (this.props.ActiveCoin.txhistory &&
+        this.props.ActiveCoin.txhistory !== 'loading' &&
+        this.props.ActiveCoin.txhistory.length > 10) {
       return (
         <div className="row unselectable">
           <div className="col-sm-5">
-            <div className="dataTables_info" id="kmd-tx-history-tbl_info" role="status" aria-live="polite">Showing {((this.state.activePage - 1) * this.state.itemsPerPage) + 1} to {this.state.activePage * this.state.itemsPerPage} of {this.props.ActiveCoin.txhistory.length} entries</div>
+            <div className="dataTables_info" id="kmd-tx-history-tbl_info" role="status" aria-live="polite">{translate('INDEX.SHOWING')} {((this.state.activePage - 1) * this.state.itemsPerPage) + 1} {translate('INDEX.TO')} {this.state.activePage * this.state.itemsPerPage} {translate('INDEX.OF')} {this.props.ActiveCoin.txhistory.length} {translate('INDEX.ENTRIES_SM')}</div>
           </div>
           <div className="col-sm-7">
             <div className="dataTables_paginate paging_simple_numbers" id="kmd-tx-history-tbl_paginate">
               <ul className="pagination">
                 <li className={this.state.activePage === 1 ? 'paginate_button previous disabled' : 'paginate_button previous'} id="kmd-tx-history-tbl_previous">
-                  <a aria-controls="kmd-tx-history-tbl" data-dt-idx="0" tabIndex="0" onClick={() => this.updateCurrentPage(this.state.activePage - 1)}>Previous</a>
+                  <a aria-controls="kmd-tx-history-tbl" tabIndex="0" onClick={() => this.updateCurrentPage(this.state.activePage - 1)}>{translate('INDEX.PREVIOUS')}</a>
                 </li>
                 {this.renderPaginationItems()}
                 <li className={this.state.activePage > Math.floor(this.props.ActiveCoin.txhistory.length / this.state.itemsPerPage) ? 'paginate_button next disabled' : 'paginate_button next'} id="kmd-tx-history-tbl_next">
-                  <a aria-controls="kmd-tx-history-tbl" data-dt-idx="2" tabIndex="0" onClick={() => this.updateCurrentPage(this.state.activePage + 1)}>Next</a>
+                  <a aria-controls="kmd-tx-history-tbl" tabIndex="0" onClick={() => this.updateCurrentPage(this.state.activePage + 1)}>{translate('INDEX.NEXT')}</a>
                 </li>
               </ul>
             </div>
@@ -169,7 +175,9 @@ class WalletsNativeTxHistory extends React.Component {
       return 'no data';
     } else if (this.props.ActiveCoin.txhistory && this.props.ActiveCoin.txhistory === 'loading') {
       return 'loading history...';
-    } else if (this.props.ActiveCoin.txhistory && (this.props.ActiveCoin.txhistory !== 'loading' && this.props.ActiveCoin.txhistory !== 'no data')) {
+    } else if (
+      this.props.ActiveCoin.txhistory &&
+      (this.props.ActiveCoin.txhistory !== 'loading' && this.props.ActiveCoin.txhistory !== 'no data')) {
       if (this.state.itemsList && this.state.itemsList.length && this.props.ActiveCoin.nativeActiveSection === 'default') {
         return this.state.itemsList.map((tx, index) =>
           <tr key={tx.txid + tx.amount}>
@@ -215,13 +223,13 @@ class WalletsNativeTxHistory extends React.Component {
                           <div className="col-sm-6">
                             <div id="kmd-tx-history-tbl_filter" className="dataTables_filter">
                               <label>
-                                Search: <input type="search" className="form-control input-sm" placeholder="" aria-controls="kmd-tx-history-tbl" disabled="true" />
+                                {translate('INDEX.SEARCH')}: <input type="search" className="form-control input-sm" aria-controls="kmd-tx-history-tbl" disabled="true" />
                               </label>
                             </div>
                           </div>
                         </div>
                         <div className="row">
-                          <table className="table table-hover dataTable table-striped" data-extcoin="COIN" id="kmd-tx-history-tbl" width="100%">
+                          <table className="table table-hover dataTable table-striped" id="kmd-tx-history-tbl" width="100%">
                             <thead>
                               <tr>
                                 <th>{translate('INDEX.TYPE')}</th>

react/src/components/dashboard/walletsNativeTxInfo.js

@@ -24,41 +24,44 @@ class WalletsNativeTxInfo extends React.Component {
   }
 
   render() {
-    if (this.props && this.props.ActiveCoin.showTransactionInfo && this.props.ActiveCoin.nativeActiveSection === 'default' && this.props.ActiveCoin.mode === 'native') {
+    if (this.props &&
+        this.props.ActiveCoin.showTransactionInfo &&
+        this.props.ActiveCoin.nativeActiveSection === 'default' &&
+        this.props.ActiveCoin.mode === 'native') {
       const txInfo = this.props.ActiveCoin.txhistory[this.props.ActiveCoin.showTransactionInfoTxIndex];
 
       return (
         <div>
-          <div className="modal show" data-extcoin="COIN" id="kmd_txid_info_mdl" aria-hidden="false" role="dialog">
+          <div className="modal show" id="kmd_txid_info_mdl" aria-hidden="false" role="dialog">
             <div className="modal-dialog modal-center modal-lg">
               <div className="modal-content">
                 <div className="modal-body" style={{height: '590px'}}>
                   <div className="panel nav-tabs-horizontal">
                     <ul className="nav nav-tabs nav-tabs-line" data-plugin="nav-tabs" role="tablist">
                       <li className={this.state.activeTab === 0 ? 'active' : ''} role="presentation">
-                        <a data-toggle="tab" data-extcoin="COIN" aria-controls="KmdTxIDInfotab1" role="tab" onClick={() => this.openTab(0)}>
+                        <a data-toggle="tab" aria-controls="KmdTxIDInfotab1" role="tab" onClick={() => this.openTab(0)}>
                           <i className="icon md-balance-wallet" aria-hidden="true"></i>TxID Info
                         </a>
                       </li>
                       <li className={this.state.activeTab === 1 ? 'active' : ''} role="presentation">
-                        <a data-toggle="tab" data-extcoin="COIN" aria-controls="KmdTxIDInfotab2" role="tab" onClick={() => this.openTab(1)}>
+                        <a data-toggle="tab" aria-controls="KmdTxIDInfotab2" role="tab" onClick={() => this.openTab(1)}>
                           <i className="icon md-plus-square" aria-hidden="true"></i>Vjointsplits, Details
                         </a>
                       </li>
                       <li className={this.state.activeTab === 2 ? 'active' : ''} role="presentation">
-                        <a data-toggle="tab" data-extcoin="COIN" aria-controls="KmdTxIDInfotab3" role="tab" onClick={() => this.openTab(2)}>
+                        <a data-toggle="tab" aria-controls="KmdTxIDInfotab3" role="tab" onClick={() => this.openTab(2)}>
                           <i className="icon wb-briefcase" aria-hidden="true"></i>Hex
                         </a>
                       </li>
                       <li className={this.state.activeTab === 3 ? 'active' : ''} role="presentation">
-                        <a data-toggle="tab" data-extcoin="COIN" aria-controls="KmdTxIDInfotab4" role="tab" onClick={() => this.openTab(3)}>
+                        <a data-toggle="tab" aria-controls="KmdTxIDInfotab4" role="tab" onClick={() => this.openTab(3)}>
                           <i className="icon wb-file" aria-hidden="true"></i>Raw info
                         </a>
                       </li>
                     </ul>
                     <div className="panel-body">
                       <div className="tab-content">
-                        <div className={this.state.activeTab === 0 ? 'tab-pane active' : 'tab-pane'} id="KmdTxIDInfotab1" data-extcoin="COIN" role="tabpanel">
+                        <div className={this.state.activeTab === 0 ? 'tab-pane active' : 'tab-pane'} id="KmdTxIDInfotab1" role="tabpanel">
                           <table className="table table-striped">
                             <tbody>
                               <tr>
@@ -124,7 +127,7 @@ class WalletsNativeTxInfo extends React.Component {
                             </tbody>
                           </table>
                         </div>
-                        <div className={this.state.activeTab === 1 ? 'tab-pane active' : 'tab-pane'} id="KmdTxIDInfotab2" data-extcoin="COIN" role="tabpanel">
+                        <div className={this.state.activeTab === 1 ? 'tab-pane active' : 'tab-pane'} id="KmdTxIDInfotab2" role="tabpanel">
                           <table className="table table-striped">
                             <tbody>
                               <tr>
@@ -142,18 +145,18 @@ class WalletsNativeTxInfo extends React.Component {
                             </tbody>
                           </table>
                         </div>
-                        <div className={this.state.activeTab === 2 ? 'tab-pane active' : 'tab-pane'} id="KmdTxIDInfotab3" data-extcoin="COIN" role="tabpanel">
-                          <textarea id="kmd_txid_info_hex" data-extcoin="COIN" style={{width: '100%', height: '170px'}} rows="10" cols="80" defaultValue={txInfo.hex} disabled></textarea>
+                        <div className={this.state.activeTab === 2 ? 'tab-pane active' : 'tab-pane'} id="KmdTxIDInfotab3" role="tabpanel">
+                          <textarea id="kmd_txid_info_hex" style={{width: '100%', height: '170px'}} rows="10" cols="80" defaultValue={txInfo.hex} disabled></textarea>
                         </div>
-                        <div className={this.state.activeTab === 3 ? 'tab-pane active' : 'tab-pane'} id="KmdTxIDInfotab4" data-extcoin="COIN" role="tabpanel">
-                          <textarea id="kmd_txid_info_hex" data-extcoin="COIN" style={{width: '100%', height: '400px'}} rows="40" cols="80" defaultValue={JSON.stringify(txInfo, null, '\t')} disabled></textarea>
+                        <div className={this.state.activeTab === 3 ? 'tab-pane active' : 'tab-pane'} id="KmdTxIDInfotab4" role="tabpanel">
+                          <textarea id="kmd_txid_info_hex" style={{width: '100%', height: '400px'}} rows="40" cols="80" defaultValue={JSON.stringify(txInfo, null, '\t')} disabled></textarea>
                         </div>
                       </div>
                     </div>
                   </div>
                 </div>
                 <div className="modal-footer">
-                  <button type="button" className="btn btn-default" data-dismiss="modal" onClick={this.toggleTxInfoModal}>Close</button>
+                  <button type="button" className="btn btn-default" data-dismiss="modal" onClick={this.toggleTxInfoModal}>{translate('INDEX.CLOSE')}</button>
                 </div>
               </div>
             </div>

react/src/components/dashboard/walletsNav.js

@@ -67,19 +67,19 @@ class WalletsNav extends React.Component {
     } else {
       return (
         <div>
-          <div className="page-header page-header-bordered header-easydex" id="header-dashboard" data-edexcoin="COIN" style={{paddingBottom: '20px', marginBottom: this.props.ActiveCoin.mode !== 'basilisk' && this.props.Dashboard.progress ? '0' : '30px'}}>
-            <ol className="breadcrumb" data-edexcoin="COIN">
-              <b>{translate('INDEX.MY')} <span data-edexcoin="COIN" id="edexcoin-active">{this.props && this.props.ActiveCoin ? this.props.ActiveCoin.coin : '-'}</span> {translate('INDEX.ADDRESS')}: </b> <span data-edexcoin="COIN" id="edexcoin_active_addr">{this.props && this.props.Dashboard && this.props.Dashboard.activeHandle ? this.props.Dashboard.activeHandle[this.props.ActiveCoin.coin] : '-'}</span> <button className="btn btn-default btn-xs clipboard-edexaddr" data-edexcoin="COIN" id="edexcoin_active_addr_clipboard" data-clipboard-text="" onClick={() => this.copyMyAddress(this.props.Dashboard.activeHandle[this.props.ActiveCoin.coin])}><i className="icon wb-copy" aria-hidden="true"></i> {translate('INDEX.COPY')}</button>
+          <div className="page-header page-header-bordered header-easydex" id="header-dashboard" style={{paddingBottom: '20px', marginBottom: this.props.ActiveCoin.mode !== 'basilisk' && this.props.Dashboard.progress ? '0' : '30px'}}>
+            <ol className="breadcrumb">
+              <strong>{translate('INDEX.MY')} <span data-edexcoin="COIN" id="edexcoin-active">{this.props && this.props.ActiveCoin ? this.props.ActiveCoin.coin : '-'}</span> {translate('INDEX.ADDRESS')}: </strong> <span id="edexcoin_active_addr">{this.props && this.props.Dashboard && this.props.Dashboard.activeHandle ? this.props.Dashboard.activeHandle[this.props.ActiveCoin.coin] : '-'}</span> <button className="btn btn-default btn-xs clipboard-edexaddr" id="edexcoin_active_addr_clipboard" onClick={() => this.copyMyAddress(this.props.Dashboard.activeHandle[this.props.ActiveCoin.coin])}><i className="icon wb-copy" aria-hidden="true"></i> {translate('INDEX.COPY')}</button>
             </ol>
             <div className="page-header-actions" data-edexcoin="COIN" id="edexcoin-actions">
               <div id="kmd_header_button">
-                <button type="button" className="btn btn-dark waves-effect waves-light" data-edexcoinmenu="COIN" id="btn_edexcoin_dashboard" onClick={this.toggleSendReceiveCoinForms}>
+                <button type="button" className="btn btn-dark waves-effect waves-light" id="btn_edexcoin_dashboard" onClick={this.toggleSendReceiveCoinForms}>
                   <i className="icon md-view-dashboard" aria-hidden="true"></i> {this.props.ActiveCoin.mode !== 'native' ? translate('INDEX.DASHBOARD') : 'Settings'}
                 </button>
-                <button type="button" className="btn btn-primary waves-effect waves-light" data-edexcoinmenu="COIN" id="btn_edexcoin_send" onClick={() => this.toggleSendCoinForm(!this.props.ActiveCoin.send)}>
+                <button type="button" className="btn btn-primary waves-effect waves-light" id="btn_edexcoin_send" onClick={() => this.toggleSendCoinForm(!this.props.ActiveCoin.send)}>
                   <i className="icon fa-send" aria-hidden="true"></i> {translate('INDEX.SEND')}
                 </button>
-                <button type="button" className="btn btn-info waves-effect waves-light" data-edexcoinmenu="COIN" id="btn_edexcoin_recieve" onClick={() => this.toggleReceiveCoinForm(!this.props.ActiveCoin.receive)}>
+                <button type="button" className="btn btn-info waves-effect waves-light" id="btn_edexcoin_recieve" onClick={() => this.toggleReceiveCoinForm(!this.props.ActiveCoin.receive)}>
                   <i className="icon fa-inbox" aria-hidden="true"></i> {translate('INDEX.RECEIVE')}
                 </button>
               </div>

react/src/components/dashboard/walletsNotariesList.js

@@ -18,17 +18,19 @@ class WalletsNotariesList extends React.Component {
   renderNotariesFetching() {
     if (!this.props.ActiveCoin.notaries) {
       return (
-        <div>Fetching notaries list data...</div>
+        <div>{translate('INDEX.FETCHING_NOTARIES_LIST')}...</div>
       );
     } else {
       return (
-        <div>Notaries list. Total nodes count: {this.props.ActiveCoin.notaries.numnotaries}</div>
+        <div>{translate('INDEX.TOTAL_NOTARIES')}: {this.props.ActiveCoin.notaries.numnotaries}</div>
       );
     }
   }
 
   renderNotariesList() {
-    if (this.props.ActiveCoin.notaries && this.props.ActiveCoin.notaries.notaries && this.props.ActiveCoin.notaries.notaries.length) {
+    if (this.props.ActiveCoin.notaries &&
+        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}`} />
@@ -47,7 +49,7 @@ class WalletsNotariesList extends React.Component {
 
       return (
         <div>
-          <div className="modal show" data-extcoin="COIN" id="kmd_txid_info_mdl" aria-hidden="false" role="dialog">
+          <div className="modal show" id="kmd_txid_info_mdl" aria-hidden="false" role="dialog">
             <div className="modal-dialog modal-center modal-lg">
               <div className="modal-content">
                 <div className="modal-body" style={{height: '590px'}}>
@@ -65,7 +67,7 @@ class WalletsNotariesList extends React.Component {
                   </div>
                 </div>
                 <div className="modal-footer">
-                  <button type="button" className="btn btn-default" onClick={this.closeNotariesModal}>Close</button>
+                  <button type="button" className="btn btn-default" onClick={this.closeNotariesModal}>{translate('INDEX.CLOSE')}</button>
                 </div>
               </div>
             </div>

react/src/components/dashboard/walletsProgress.js

@@ -19,37 +19,40 @@ class WalletsProgress extends React.Component {
   }
 
   render() {
-    if (this.props && this.props.ActiveCoin && this.props.ActiveCoin.mode === 'full' && this.props.Dashboard.progress) {
+    if (this.props &&
+        this.props.ActiveCoin &&
+        this.props.ActiveCoin.mode === 'full' &&
+        this.props.Dashboard.progress) {
       if (this.props.Dashboard.progress && this.props.Dashboard.progress.error) {
-        return (<div style={{textAlign: 'center', padding: '10px'}}>Coin is busy processing</div>);
+        return (<div style={{textAlign: 'center', padding: '10px'}}>{translate('INDEX.COIN_IS_BUSY')}</div>);
       } else {
         return (
-          <div id="edex-footer" data-edexcoin="COIN" style={{marginBottom: '20px'}}>
-            <div className="row no-space" data-edexcoin="COIN">
-              <div data-edexcoin="COIN" id="currency-progressbars">
+          <div id="edex-footer" style={{marginBottom: '20px'}}>
+            <div className="row no-space">
+              <div id="currency-progressbars">
                 <div className="progress progress-sm">
-                  <div className={this.isFullySynced() ? 'progress-bar progress-bar-striped active progress-bar-indicating progress-bar-success' : 'hide'} style={{width: '100%', fontSize: '80%'}} role="progressbar" data-edexcoin="GAME" id="currency-bundles">
-                    {translate('INDEX.BUNDLES')} <span data-edexcoin="GAME" id="currency-bundles-percent">({this.props.ActiveCoin.coin}) 100.00% - ( {this.props.Dashboard.progress.blocks} / {this.props.Dashboard.progress.blocks} ) ==&gt;&gt; RT{this.props.Dashboard.progress.RTheight}</span>
+                  <div className={this.isFullySynced() ? 'progress-bar progress-bar-striped active progress-bar-indicating progress-bar-success' : 'hide'} style={{width: '100%', fontSize: '80%'}} role="progressbar" id="currency-bundles">
+                    {translate('INDEX.BUNDLES')} <span id="currency-bundles-percent">({this.props.ActiveCoin.coin}) 100.00% - ( {this.props.Dashboard.progress.blocks} / {this.props.Dashboard.progress.blocks} ) ==&gt;&gt; RT{this.props.Dashboard.progress.RTheight}</span>
                   </div>
-                  <div className={this.isFullySynced() ? 'hide' : 'progress-bar progress-bar-info progress-bar-striped active'} style={{width: this.props.Dashboard.progress.bundles + '%', fontSize: '80%'}} role="progressbar" data-edexcoin="COIN" id="currency-bundles">
-                    {translate('INDEX.BUNDLES')} <span data-edexcoin="COIN" id="currency-bundles-percent">{this.props.Dashboard.progress.bundles}%</span>
+                  <div className={this.isFullySynced() ? 'hide' : 'progress-bar progress-bar-info progress-bar-striped active'} style={{width: this.props.Dashboard.progress.bundles + '%', fontSize: '80%'}} role="progressbar" id="currency-bundles">
+                    {translate('INDEX.BUNDLES')} <span id="currency-bundles-percent">{this.props.Dashboard.progress.bundles}%</span>
                   </div>
                 </div>
               </div>
-              <div data-edexcoin="COIN" id="additional-progress-bars" className={this.isFullySynced() ? 'hide' : ''}>
+              <div id="additional-progress-bars" className={this.isFullySynced() ? 'hide' : ''}>
                 <div className="progress progress-sm">
-                  <div className="progress-bar progress-bar-warning progress-bar-striped active" style={{width: this.props.Dashboard.progress.utxo + '%', fontSize: '80%'}} role="progressbar" data-edexcoin="COIN" id="currency-utxo">
-                    utxo <span data-edexcoin="COIN" id="currency-utxo-percent">{this.props.Dashboard.progress.utxo}%</span>
+                  <div className="progress-bar progress-bar-warning progress-bar-striped active" style={{width: this.props.Dashboard.progress.utxo + '%', fontSize: '80%'}} role="progressbar" id="currency-utxo">
+                    utxo <span id="currency-utxo-percent">{this.props.Dashboard.progress.utxo}%</span>
                   </div>
                 </div>
                 <div className="progress progress-sm">
-                  <div className="progress-bar progress-bar-danger progress-bar-striped active" style={{width: this.props.Dashboard.progress.balances + '%', fontSize: '80%'}} role="progressbar" data-edexcoin="COIN" id="currency-balances">
-                    {translate('INDEX.BALANCES')} <span data-edexcoin="COIN" id="currency-balances-percent">{this.props.Dashboard.progress.balances}%</span>
+                  <div className="progress-bar progress-bar-danger progress-bar-striped active" style={{width: this.props.Dashboard.progress.balances + '%', fontSize: '80%'}} role="progressbar" id="currency-balances">
+                    {translate('INDEX.BALANCES')} <span id="currency-balances-percent">{this.props.Dashboard.progress.balances}%</span>
                   </div>
                 </div>
                 <div className="progress progress-sm">
-                  <div className="progress-bar progress-bar-success progress-bar-striped active" style={{width: this.props.Dashboard.progress.validated + '%', fontSize: '80%'}} role="progressbar" data-edexcoin="COIN" id="currency-validated">
-                    {translate('INDEX.VALIDATED')} <span data-edexcoin="COIN" id="currency-validated-percent">{this.props.Dashboard.progress.validated}%</span>
+                  <div className="progress-bar progress-bar-success progress-bar-striped active" style={{width: this.props.Dashboard.progress.validated + '%', fontSize: '80%'}} role="progressbar" id="currency-validated">
+                    {translate('INDEX.VALIDATED')} <span id="currency-validated-percent">{this.props.Dashboard.progress.validated}%</span>
                   </div>
                 </div>
               </div>

react/src/components/dashboard/walletsTxInfo.js

@@ -29,26 +29,26 @@ class WalletsTxInfo extends React.Component {
 
       return (
         <div>
-          <div className="modal show" data-extcoin="COIN" id="kmd_txid_info_mdl" aria-hidden="false" role="dialog">
+          <div className="modal show" id="kmd_txid_info_mdl" aria-hidden="false" role="dialog">
             <div className="modal-dialog modal-center modal-lg">
               <div className="modal-content">
                 <div className="modal-body" style={{height: '590px'}}>
                   <div className="panel nav-tabs-horizontal">
-                    <ul className="nav nav-tabs nav-tabs-line" data-plugin="nav-tabs" role="tablist">
+                    <ul className="nav nav-tabs nav-tabs-line" role="tablist">
                       <li className={this.state.activeTab === 0 ? 'active' : ''} role="presentation">
-                        <a data-toggle="tab" data-extcoin="COIN" aria-controls="KmdTxIDInfotab1" role="tab" onClick={() => this.openTab(0)}>
+                        <a data-toggle="tab" aria-controls="KmdTxIDInfotab1" role="tab" onClick={() => this.openTab(0)}>
                           <i className="icon md-balance-wallet" aria-hidden="true"></i>TxID Info
                         </a>
                       </li>
                       <li className={this.state.activeTab === 1 ? 'active' : ''} role="presentation">
-                        <a data-toggle="tab" data-extcoin="COIN" aria-controls="KmdTxIDInfotab4" role="tab" onClick={() => this.openTab(1)}>
+                        <a data-toggle="tab" aria-controls="KmdTxIDInfotab4" role="tab" onClick={() => this.openTab(1)}>
                           <i className="icon wb-file" aria-hidden="true"></i>Raw info
                         </a>
                       </li>
                     </ul>
                     <div className="panel-body">
                       <div className="tab-content">
-                        <div className={this.state.activeTab === 0 ? 'tab-pane active' : 'tab-pane'} id="KmdTxIDInfotab1" data-extcoin="COIN" role="tabpanel">
+                        <div className={this.state.activeTab === 0 ? 'tab-pane active' : 'tab-pane'} id="KmdTxIDInfotab1" role="tabpanel">
                           <table className="table table-striped">
                             <tbody>
                               <tr>
@@ -96,8 +96,8 @@ class WalletsTxInfo extends React.Component {
                             </tbody>
                           </table>
                         </div>
-                        <div className={this.state.activeTab === 1 ? 'tab-pane active' : 'tab-pane'} id="KmdTxIDInfotab4" data-extcoin="COIN" role="tabpanel">
-                          <textarea id="kmd_txid_info_hex" data-extcoin="COIN" style={{width: '100%', height: '400px'}} rows="40" cols="80" defaultValue={JSON.stringify(txInfo, null, '\t')} disabled></textarea>
+                        <div className={this.state.activeTab === 1 ? 'tab-pane active' : 'tab-pane'} id="KmdTxIDInfotab4" role="tabpanel">
+                          <textarea id="kmd_txid_info_hex" style={{width: '100%', height: '400px'}} rows="40" cols="80" defaultValue={JSON.stringify(txInfo, null, '\t')} disabled></textarea>
                         </div>
                       </div>
                     </div>

react/src/components/login/login.js

@@ -143,7 +143,7 @@ class Login extends React.Component {
     if ((this.state && this.state.display) || !this.props.Main) {
       return (
         <div id="wallet-login">
-          <div className="page animsition vertical-align text-center fade-in" data-animsition-in="fade-in" data-animsition-out="fade-out">
+          <div className="page animsition vertical-align text-center fade-in">
             <div className="page-content vertical-align-middle">
               <div className="brand">
                 <img className="brand-img" src="assets/images/easydex-logo-big.png" alt="SuperNET Iguana" />
@@ -151,7 +151,7 @@ class Login extends React.Component {
 
               <div style={{padding: '20px 0'}}>
                 <span className="display-sync-only-coins-toggle" onClick={this.openSyncOnlyModal}>
-                  <i className="fa fa-cubes"></i> Display sync only coins progress
+                  <i className="fa fa-cubes"></i> {translate('LOGIN.DISPLAY_SYNC_ONLY')}
                 </span>
               </div>
 
@@ -185,7 +185,13 @@ class Login extends React.Component {
                 <h4 style={{ color: '#fff' }} id="login-welcome">{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)} />
+                    <input
+                      type={this.state.seedInputVisibility ? 'text' : 'password'}
+                      className="form-control"
+                      name="loginPassphrase"
+                      id="password"
+                      onChange={this.updateInput}
+                      onKeyDown={(event) => this.handleKeydown(event)} />
                     <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="inputPassword">{translate('INDEX.WALLET_SEED')}</label>
                   </div>
@@ -200,7 +206,14 @@ class Login extends React.Component {
               <div id="section-login-addcoin-btn" className={this.state.activeLoginSection === 'activateCoin' ? 'show' : 'hide'}>
                 <h4 style={{ color: '#fff' }} id="login-welcome">{translate('INDEX.WELCOME_PLEASE_ADD')}</h4>
                 <div className="form-group form-material floating" style={{width: '540px', margin: '30px 0'}}>
-                  <button className="btn btn-lg btn-primary btn-block ladda-button" id="start-coin-login" role="menuitem" data-edexcoinmenu="COIN" data-target="#AddCoinDilogModel-login" data-toggle="modal" data-style="expand-left" data-plugin="ladda" onClick={this.toggleActivateCoinForm} disabled={!this.props.Main}><span className="ladda-label">{translate('INDEX.ACTIVATE_COIN')}</span></button>
+                  <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>
+                  </button>
                 </div>
               </div>
 
@@ -229,7 +242,7 @@ class Login extends React.Component {
                   </div>
                   <div className="form-group form-material floating">
                     <textarea className="form-control placeholder-no-fix" type="text" name="randomSeedConfirm" onChange={this.updateInput} id="rwalletseed" style={{ height: '100px' }}></textarea>
-                    <span className={this.state.isSeedConfirmError ? 'help-block' : 'hide'}>Please enter the same value again.</span>
+                    <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>

react/src/config.js

@@ -7,4 +7,5 @@ module.exports = {
   useForksAll: true,
   openAlias: false,
   debug: true,
+  defaultLang: 'EN',
 };

react/src/index.js

@@ -1,6 +1,12 @@
 import React from 'react';
 import { render } from 'react-dom';
-import { Router, Route, IndexRoute, browserHistory, hashHistory } from 'react-router';
+import {
+  Router,
+  Route,
+  IndexRoute,
+  browserHistory,
+  hashHistory
+} from 'react-router';
 import { Provider } from 'react-redux';
 import store from './store';
 

react/src/reducers/interval.js

@@ -3,16 +3,16 @@ import { START_INTERVAL, STOP_INTERVAL } from '../actions/actionCreators'
 export function Interval(state = {
   interval: {},
 }, action) {
+  let newIntervalState = Object.assign({}, state.interval);
+
   switch (action.type) {
     case START_INTERVAL:
-      var newIntervalState = Object.assign({}, state.interval);
       newIntervalState[action.name] = action.handle;
 
       return Object.assign({}, state, {
         interval: newIntervalState,
       });
     case STOP_INTERVAL:
-      var newIntervalState = Object.assign({}, state.interval);
       newIntervalState[action.name] = null;
 
       return Object.assign({}, state, {

react/src/reducers/main.js

@@ -1,4 +1,8 @@
-import { GET_ACTIVE_COINS, LOGIN, ACTIVE_HANDLE } from '../actions/actionCreators';
+import {
+  GET_ACTIVE_COINS,
+  LOGIN,
+  ACTIVE_HANDLE
+} from '../actions/actionCreators';
 
 export function Main(state = {
   isLoggedIn: false,

react/src/reducers/settings.js

@@ -1,9 +1,17 @@
-import { GET_WIF_KEY, GET_PEERS_LIST, GET_DEBUG_LOG } from '../actions/actionCreators';
+import {
+  GET_WIF_KEY,
+  GET_PEERS_LIST,
+  GET_DEBUG_LOG,
+  LOAD_APP_CONFIG,
+  LOAD_APP_INFO
+} from '../actions/actionCreators';
 
 export function Settings(state = {
   wifkey: null,
   address: null,
   debugLog: null,
+  appSettings: null,
+  appInfo: null,
 }, action) {
   switch (action.type) {
     case GET_WIF_KEY:
@@ -20,6 +28,14 @@ export function Settings(state = {
       return Object.assign({}, state, {
         debugLog: action.data,
       });
+    case LOAD_APP_CONFIG:
+      return Object.assign({}, state, {
+        appSettings: action.config,
+      });
+    case LOAD_APP_INFO:
+      return Object.assign({}, state, {
+        appInfo: action.info,
+      });
     default:
       return state;
   }

react/src/reducers/syncOnly.js

@@ -1,4 +1,7 @@
-import { SYNC_ONLY_MODAL_TOGGLE, SYNC_ONLY_DATA } from '../actions/actionCreators';
+import {
+  SYNC_ONLY_MODAL_TOGGLE,
+  SYNC_ONLY_DATA
+} from '../actions/actionCreators';
 
 export function SyncOnly(state = {
   display: false,

react/src/translate/en.js

@@ -1,6 +1,20 @@
 export const _lang = {
   'EN': {
     'INDEX': {
+      'FETCHING_NOTARIES_LIST': 'Fetching notaries list data',
+      'TOTAL_NOTARIES': 'Notaries list. Total nodes count',
+      'CLOSE': 'Close',
+      'SHOW': 'Show',
+      'SHOWING': 'Showing',
+      'OF': 'of',
+      'TO': 'to',
+      'SEARCH': 'Search',
+      'PREVIOUS': 'Previous',
+      'NEXT': 'Next',
+      'ENTRIES_SM': 'entries',
+      'SYNC_ERR_LONGESTCHAIN': 'Unable to get current sync progress. Err: no longestchain param in response',
+      'SYNC_ERR_BLOCKS': 'Unable to get current sync progress. Err: no blocks param in response',
+      'COIN_IS_BUSY': 'Coin is busy processing',
       'REFRESHING_BASILISK_NET': 'Refreshing Basilisk Network Connections',
       'SELECT_A_COIN': 'Select Coin to add to EasyDEX',
       'WALLETS': 'Wallets',
@@ -180,6 +194,18 @@ export const _lang = {
       'ADDR_SM': 'address',
       'ACTIVATING': 'Activating'
     },
+    'ATOMIC': {
+      'RAW_OUTPUT': 'Raw Output',
+      'SUBMIT': 'Submit',
+      'INPUT_PLACEHOLDER': 'addr, txid, blockash etc.',
+      'SELECT_COMMAND': 'Select Command',
+    },
+    'ADD_COIN': {
+      'SYNC_ONLY': 'Sync only',
+      'SAVE_SELECTION': 'Save Selection',
+      'LOAD_SELECTION': 'Load Selection',
+      'ACTIVATE_ALL': 'Activate all',
+    },
     'JUMBLR': {
       'NOTICE': 'EXPERIMENTAL TEST VERSION ONLY',
       'DESCRIPTION': 'Jumblr feature is very experimental and for now, is Only enabled for testing and debugging.' +
@@ -345,7 +371,9 @@ export const _lang = {
       'WALLET_LOCKED_LOGIN': 'Wallet Locked. Please login.',
       'UNLOCK': 'Unlock',
       'SIGN_IN': 'Sign In',
-      'WELCOME': 'Welcome'
+      'WELCOME': 'Welcome',
+      'DISPLAY_SYNC_ONLY': 'Display sync only coins progress',
+      'ENTER_VALUE_AGAIN': 'Please enter the same value again'
     },
     'SIDEBAR': {
       'EDEX_MOTTO': 'Most Secure, Easy and Native Decentralised Exchange',

react/src/translate/translate.js

@@ -1,10 +1,11 @@
-import { _lang } from './en.js';
+import { _lang } from './en';
+import Config from '../config';
 
 export function translate(langID) {
-  var defaultLang = 'EN';
+  let  defaultLang = Config.defaultLang;
 
   if (langID && langID.indexOf('.') > -1) {
-    var langIDComponents = langID.split('.');
+    let langIDComponents = langID.split('.');
 
     if (_lang && langIDComponents && _lang[defaultLang][langIDComponents[0]][langIDComponents[1]]) {
       return _lang[defaultLang][langIDComponents[0]][langIDComponents[1]];
@@ -13,8 +14,9 @@ export function translate(langID) {
       return '--> ' + langID + ' <--';
     }
   } else {
-    if (langID.length)
+    if (langID.length) {
       console.log('Missing translation in js/' +  defaultLang.toLowerCase() + '.js ' + langID);
       return '--> ' + langID + ' <--';
     }
   }
+}

react/src/util/cacheFormat.js

@@ -10,7 +10,7 @@ export function edexGetTxIDList(getTxData) {
   return getTxidList;
 }
 
-export function edexRemoveTXID(_obj, txidArray) {
+export function edexRemoveTXID(_obj, address, txidArray) {
   let txidToStr = ':' + txidArray.join(':') + ':';
 
   console.log(txidToStr);
@@ -21,7 +21,7 @@ export function edexRemoveTXID(_obj, txidArray) {
     } else {
       for (let key in _obj.basilisk) {
         for (let coinAddr in _obj.basilisk[key]) {
-          if (_obj.basilisk[key][coinAddr] !== 'addresses') {
+          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) {

react/src/util/crypto/md5.js

@@ -6,12 +6,18 @@ export const md5 = function (string) {
  }
 
  function AddUnsigned(lX,lY) {
-           var lX4,lY4,lX8,lY8,lResult;
+   var lX4,
+       lY4,
+       lX8,
+       lY8,
+       lResult;
+   
    lX8 = (lX & 0x80000000);
    lY8 = (lY & 0x80000000);
    lX4 = (lX & 0x40000000);
    lY4 = (lY & 0x40000000);
    lResult = (lX & 0x3FFFFFFF) + (lY & 0x3FFFFFFF);
+   
    if (lX4 & lY4) {
      return (lResult ^ 0x80000000 ^ lX8 ^ lY8);
    }
@@ -60,27 +66,35 @@ export const md5 = function (string) {
     var lWordArray = Array(lNumberOfWords - 1);
     var lBytePosition = 0;
     var lByteCount = 0;
+
     while ( lByteCount < lMessageLength ) {
       lWordCount = (lByteCount-(lByteCount % 4)) / 4;
       lBytePosition = (lByteCount % 4) * 8;
       lWordArray[lWordCount] = (lWordArray[lWordCount] | (string.charCodeAt(lByteCount)<<lBytePosition));
       lByteCount++;
     }
+
     lWordCount = (lByteCount-(lByteCount % 4)) / 4;
     lBytePosition = (lByteCount % 4) * 8;
     lWordArray[lWordCount] = lWordArray[lWordCount] | (0x80<<lBytePosition);
     lWordArray[lNumberOfWords-2] = lMessageLength<<3;
     lWordArray[lNumberOfWords-1] = lMessageLength>>>29;
+    
     return lWordArray;
  };
 
  function WordToHex(lValue) {
-           var WordToHexValue="",WordToHexValue_temp="",lByte,lCount;
+   var WordToHexValue = "",
+       WordToHexValue_temp = "",
+       lByte,
+       lCount;
+   
    for (lCount = 0;lCount<=3;lCount++) {
      lByte = (lValue>>>(lCount * 8)) & 255;
      WordToHexValue_temp = "0" + lByte.toString(16);
      WordToHexValue = WordToHexValue + WordToHexValue_temp.substr(WordToHexValue_temp.length - 2, 2);
    }
+   
    return WordToHexValue;
  };
 
@@ -89,7 +103,6 @@ export const md5 = function (string) {
     var utftext = "";
 
    for (var n = 0; n < string.length; n++) {
-
      var c = string.charCodeAt(n);
 
      if (c < 128) {
@@ -104,7 +117,6 @@ export const md5 = function (string) {
        utftext += String.fromCharCode(((c >> 6) & 63) | 128);
        utftext += String.fromCharCode((c & 63) | 128);
      }
-
    }
 
    return utftext;
@@ -112,19 +124,25 @@ export const md5 = function (string) {
 
  var x = Array();
  var k, AA, BB,CC,DD,a,b,c,d;
-   var S11=7, S12=12, S13=17, S14=22;
-   var S21=5, S22=9 , S23=14, S24=20;
-   var S31=4, S32=11, S33=16, S34=23;
-   var S41=6, S42=10, S43=15, S44=21;
+ var S11 = 7, S12 = 12, S13 = 17, S14 = 22,
+     S21 = 5, S22 = 9 , S23 = 14, S24 = 20,
+     S31 = 4, S32 = 11, S33 = 16, S34 = 23,
+     S41 = 6, S42 = 10, S43 = 15, S44 = 21;
 
  string = Utf8Encode(string);
 
  x = ConvertToWordArray(string);
 
-   a = 0x67452301; b = 0xEFCDAB89; c = 0x98BADCFE; d = 0x10325476;
+ a = 0x67452301;
+ b = 0xEFCDAB89;
+ c = 0x98BADCFE;
+ d = 0x10325476;
 
   for (k = 0; k < x.length; k += 16) {
-           AA=a; BB=b; CC=c; DD=d;
+    AA = a;
+    BB = b;
+    CC = c;
+    DD = d;
     a = FF(a,b,c,d,x[k+0],  S11, 0xD76AA478);
     d = FF(d,a,b,c,x[k+1],  S12, 0xE8C7B756);
     c =FF(c,d,a,b,x[k+2],  S13, 0x242070DB);

react/src/util/edex.js

@@ -1,30 +0,0 @@
-export function edexRemoveTXID(_obj, txidArray) {
-  const 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 (var key in _obj.basilisk) {
-        for (var coinAddr in _obj.basilisk[key]) {
-          if (_obj.basilisk[key][coinAddr] !== 'addresses') {
-            if (_obj.basilisk[key][coinAddr].refresh &&
-                _obj.basilisk[key][coinAddr].refresh.data &&
-                _obj.basilisk[key][coinAddr].refresh.data.length > 0) {
-              for (var i = 0; i < _obj.basilisk[key][coinAddr].refresh.data.length; i++) {
-                if (txidToStr.indexOf(_obj.basilisk[key][coinAddr].refresh.data[i].txid) > -1) {
-                  _obj.basilisk[key][coinAddr].refresh.data.splice(i, 1);
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  } else {
-    console.log('basilisk node is missing');
-  }
-
-  return _obj;
-}