Merge pull request #112 from pbca26/redux

Redux

react/src/actions/actionCreators.js

@@ -268,7 +268,28 @@ function logoutState(json, dispatch) {
 
 export function logout() {
   return dispatch => {
-    dispatch(logoutState());
+    dispatch(walletLock());
+  }
+}
+
+function walletLock() {
+  const payload = {
+    'userpass': 'tmpIgRPCUser@' + sessionStorage.getItem('IguanaRPCAuth'),
+    'agent': 'bitcoinrpc',
+    'method': 'walletlock',
+  };
+
+  return dispatch => {
+    return fetch('http://127.0.0.1:' + Config.iguanaCorePort, {
+      method: 'POST',
+      body: JSON.stringify(payload),
+    })
+    .catch(function(error) {
+      console.log(error);
+      dispatch(triggerToaster(true, 'walletLock', 'Error', 'error'));
+    })
+    .then(response => response.json())
+    .then(json => dispatch(logoutState(json)))
   }
 }
 
@@ -2501,14 +2522,14 @@ export function saveAppConfig(_payload) {
       headers: {
         'Content-Type': 'application/json',
       },
-      body: JSON.stringify(_payload),
+      body: JSON.stringify({ 'payload': _payload }),
     })
     .catch(function(error) {
       console.log(error);
       dispatch(triggerToaster(true, 'saveAppConfig', 'Error', 'error'));
     })
     .then(response => response.json())
-    .then(json => dispatch(getAppConfigState(json)))
+    .then(json => dispatch(getAppConfig()))
   }
 }
 

react/src/components/addcoin/addcoin.js

@@ -4,7 +4,8 @@ import {
   addCoin,
   toggleAddcoinModal,
   shepherdGetCoinList,
-  shepherdPostCoinList
+  shepherdPostCoinList,
+  triggerToaster
 } from '../../actions/actionCreators';
 import Store from '../../store';
 import AddCoinOptionsCrypto from './addcoinOptionsCrypto';
@@ -55,10 +56,14 @@ class AddCoin extends React.Component {
   loadCoinSelection() {
     shepherdGetCoinList()
     .then(function(json) {
+      if (json.msg !== 'error') {      
         this.setState(Object.assign({}, this.state, {
           coins: json.result,
           actionsMenu: false,
         }));
+      } else {
+        Store.dispatch(triggerToaster(true, 'Local coin list is not found', 'Coin Selection', 'info'));
+      }
     }.bind(this));
   }
 
@@ -121,7 +126,7 @@ class AddCoin extends React.Component {
     }
 
     this.setState(Object.assign({}, this.state, {
-      coins: _coins
+      coins: _coins,
     }));
   }
 
@@ -159,6 +164,11 @@ class AddCoin extends React.Component {
       this.state.coins[0].mode,
       this.state.coins[0].syncOnly
     ));
+
+    this.removeCoin();
+    this.addNewItem();
+
+    Store.dispatch(toggleAddcoinModal(false, false));
   }
 
   dismiss() {
@@ -199,7 +209,18 @@ class AddCoin extends React.Component {
           _item.mode,
           _item.syncOnly
         ));
-      }, 2000 * i);
+
+        if (i === this.state.coins.length - 1) {
+          let _coins = [];
+          _coins.push(this.state.defaultCoinState);
+
+          this.setState(Object.assign({}, this.state, {
+            coins: _coins,
+          }));
+
+          Store.dispatch(toggleAddcoinModal(false, false));
+        }
+      }.bind(this), 2000 * i);
     }
   }
 

react/src/components/addcoin/payload.js

@@ -132,7 +132,7 @@ export function checkCoinType(coin) {
 export function startCrypto(confpath, coin, mode) {
 	var tmpinternval = 0,
 			AddCoinData = {},
-			tmpPendValue = 4, // TODO: hook up to shepherd sysinfo
+			tmpPendValue = 1, // TODO: hook up to shepherd sysinfo
 			tmpIguanaRPCAuth = 'tmpIgRPCUser@' + sessionStorage.getItem('IguanaRPCAuth');
 
 	if (coin !== 'BTC' && coin !== 'LTC' && coin !== 'DOGE') {
@@ -174,7 +174,7 @@ export function startCrypto(confpath, coin, mode) {
 
 export function startCurrencyAssetChain(confpath, coin, mode) {
 	var AddCoinDataPayload = {},
-			tmpPendValue,
+			tmpPendValue = 1,
 			tmpIguanaRPCAuth = 'tmpIgRPCUser@' + sessionStorage.getItem('IguanaRPCAuth');
 
 	if (coin !== 'BTC' && coin !== 'LTC' && coin !== 'DOGE') {

react/src/components/dashboard/atomic.js

@@ -6,6 +6,10 @@ import AddCoinOptionsCrypto from '../addcoin/addcoinOptionsCrypto';
 import AddCoinOptionsAC from '../addcoin/addcoinOptionsAC';
 import AddCoinOptionsACFiat from '../addcoin/addcoinOptionsACFiat';
 
+/*
+  TODO:
+  pre-select active coin
+*/
 class Atomic extends React.Component {
   constructor(props) {
     super(props);
@@ -41,7 +45,7 @@ class Atomic extends React.Component {
 
   getAtomicData() {
     const tmpIguanaRPCAuth = 'tmpIgRPCUser@' + sessionStorage.getItem('IguanaRPCAuth');
-    var ExplorerInputData;
+    let ExplorerInputData;
 
     switch (this.state.api) {
       case 'history':

react/src/components/dashboard/jumblr.js

@@ -17,6 +17,17 @@ class Jumblr extends React.Component {
     }));
   }
 
+  renderLB(_translationID) {
+    const _translationComponents = translate(_translationID).split('<br>');
+
+    return _translationComponents.map((_translation) =>
+      <span>
+        {_translation}
+        <br />
+      </span>
+    );
+  }
+
   render() {
     return (
       <div className="page" data-animsition-in="fade-in" data-animsition-out="fade-out" style={{marginLeft: '0'}}>
@@ -121,7 +132,7 @@ class Jumblr extends React.Component {
                         <li>{translate('JUMBLR.IMPORTANT_FUNDS')}</li>
                         <li>{translate('JUMBLR.LARGE_LOT')}</li>
                       </ul>
-                      <p>{translate('JUMBLR.EG')}</p>
+                      <p>{this.renderLB('JUMBLR.EG')}</p>
                       <p>{translate('JUMBLR.93_KMD')}</p>
                       <p>{translate('JUMBLR.TO_CLEAR_THEM')}</p>
                       <p>{translate('JUMBLR.WHEN_IT_TOTALS')}</p>

react/src/components/dashboard/navbar.js

@@ -1,6 +1,11 @@
 import React from 'react';
 import { translate } from '../../translate/translate';
-import { dashboardChangeSection, toggleAddcoinModal, logout } from '../../actions/actionCreators';
+import {
+  dashboardChangeSection,
+  toggleAddcoinModal,
+  logout,
+  stopInterval
+} from '../../actions/actionCreators';
 import Store from '../../store';
 
 class Navbar extends React.Component {
@@ -28,6 +33,8 @@ class Navbar extends React.Component {
   }
 
   logout() {
+    Store.dispatch(stopInterval('sync', this.props.Interval.interval));
+    Store.dispatch(stopInterval('basilisk', this.props.Interval.interval));
     Store.dispatch(logout());
   }
 
@@ -82,14 +89,14 @@ class Navbar extends React.Component {
                 </a>
               </li>
               <li className={this.props.Dashboard.activeSection === 'atomic' ? 'active nav-top-menu' : 'nav-top-menu'}>
-                <a href="javascript:void(0)" id="nav-iguana-atomic-explorer" onClick={() => this.dashboardChangeSection('atomic')}>
+                <a id="nav-iguana-atomic-explorer" onClick={() => this.dashboardChangeSection('atomic')}>
                   <i className="site-menu-icon" aria-hidden="true"></i> Atomic Explorer
                 </a>
               </li>
             </ul>
             <ul className="nav navbar-toolbar navbar-right navbar-toolbar-right">
               <li role="presentation">
-                <a href="javascript:void(0)" role="menuitem" data-edexcoinmenu="COIN" id="btn_edexcoin_addcoin" data-target="#AddCoinDilogModel" data-toggle="modal" style={{ paddingBottom: '10px', paddingTop: '16px' }}  onClick={this.toggleAddCoinModal}>
+                <a href="javascript:void(0)" role="menuitem" id="btn_edexcoin_addcoin" data-toggle="modal" style={{ paddingBottom: '10px', paddingTop: '16px' }} onClick={this.toggleAddCoinModal}>
                   <span>
                     <img src="assets/images/icons/activatecoin.png" alt="Add Coin" />
                   </span>
@@ -111,7 +118,7 @@ class Navbar extends React.Component {
                   </li>
                   <li role="presentation">
                     <a href="javascript:void(0)" role="menuitem" id="nav-about-iguana" onClick={() => this.dashboardChangeSection('about')}>
-                      <i className="icon md-settings" aria-hidden="true"></i> {translate('INDEX.ABOUT_IGUANA')}
+                      <i className="icon fa-users" aria-hidden="true"></i> {translate('INDEX.ABOUT_IGUANA')}
                     </a>
                   </li>
                   <li className="divider" role="presentation"></li>

react/src/components/dashboard/receiveCoin.js

@@ -28,13 +28,6 @@ class ReceiveCoin extends React.Component {
     Store.dispatch(copyCoinAddress(address));
   }
 
-  /*importAddressBasilisk(address) {
-    Store.dispatch(importAddressBasilisk(this.props.coin, address));
-  }
-  <span className="label label-default margin-left-10 action" title="Import" onClick={() => this.importAddressBasilisk(address)}>
-  <i className="icon fa-upload"></i>
-  </span>*/
-
   renderAddressActions(address) {
     if (this.props.mode === 'basilisk') {
       return (
@@ -64,8 +57,22 @@ class ReceiveCoin extends React.Component {
   }
 
   renderAddressList() {
-    if (this.props.addresses && this.props.addresses['public'] && this.props.addresses['public'].length) {
+    if (this.props.addresses &&
-      return this.props.addresses['public'].map((address) =>
+        this.props.addresses.public &&
+        this.props.addresses.public.length) {
+      let items = [];
+
+      for (let i = 0; i < this.props.addresses.public.length; i++) {
+        let address = this.props.addresses.public[i];
+
+        if (this.props.mode === 'basilisk' && address.amount === 'N/A') {
+          address.amount = this.props.cache[this.props.coin][address.address].getbalance.data && this.props.cache[this.props.coin][address.address].getbalance.data.balance ? this.props.cache[this.props.coin][address.address].getbalance.data.balance : 'N/A';
+        }
+        if (this.props.mode === 'basilisk' && (address.interest === 'N/A' || !address.interest)) {
+          address.interest = this.props.cache[this.props.coin][address.address].getbalance.data && this.props.cache[this.props.coin][address.address].getbalance.data.interest ? this.props.cache[this.props.coin][address.address].getbalance.data.interest : 'N/A';
+        }
+
+        items.push(
           <tr key={address.address}>
             {this.renderAddressActions(address.address)}
             <td>{address.address}</td>
@@ -73,6 +80,9 @@ class ReceiveCoin extends React.Component {
             <td>{address.interest ? address.interest : 'N/A'}</td>
           </tr>
         );
+      }
+
+      return items;
     } else {
       return null;
     }

react/src/components/dashboard/sendCoin.js

@@ -157,12 +157,12 @@ class SendCoin extends React.Component {
 
   renderAddressAmount(address) {
     if (this.props.ActiveCoin.addresses &&
-        this.props.ActiveCoin.addresses['public'] &&
+        this.props.ActiveCoin.addresses.public &&
-        this.props.ActiveCoin.addresses['public'].length) {
+        this.props.ActiveCoin.addresses.public.length) {
-      for (let i = 0; i < this.props.ActiveCoin.addresses['public'].length; i++) {
+      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].address === address) {
-          if (this.props.ActiveCoin.addresses['public'][i].amount !== 'N/A') {
+          if (this.props.ActiveCoin.addresses.public[i].amount !== 'N/A') {
-            return this.props.ActiveCoin.addresses['public'][i].amount;
+            return this.props.ActiveCoin.addresses.public[i].amount;
           }
         }
       }
@@ -181,7 +181,7 @@ class SendCoin extends React.Component {
 
         return(
           <li data-original-index="2" key={mainAddress} className={mainAddressAmount <= 0 ? 'hide' : ''}>
-            <a tabIndex="0" data-tokens="null" onClick={() => this.updateAddressSelection(mainAddress, type, mainAddressAmount)}><i className={type === 'public' ? 'icon fa-eye' : 'icon fa-eye-slash'}></i>  <span className="text">[ {mainAddressAmount} {this.props.ActiveCoin.coin} ]  {mainAddress}</span><span className="glyphicon glyphicon-ok check-mark"></span></a>
+            <a tabIndex="0" onClick={() => this.updateAddressSelection(mainAddress, type, mainAddressAmount)}><i className={type === 'public' ? 'icon fa-eye' : 'icon fa-eye-slash'}></i>  <span className="text">[ {mainAddressAmount} {this.props.ActiveCoin.coin} ]  {mainAddress}</span><span className="glyphicon glyphicon-ok check-mark"></span></a>
           </li>
         );
       } else {
@@ -197,7 +197,7 @@ class SendCoin extends React.Component {
 
           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, _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>
+              <a tabIndex="0" 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>
           );
         }
@@ -240,8 +240,8 @@ class SendCoin extends React.Component {
         </button>
         <div className="dropdown-menu open">
           <ul className="dropdown-menu inner" role="menu">
-            <li data-original-index="1" className="selected">
+            <li className="selected">
-              <a tabIndex="0" data-tokens="null"><span className="text"> - Select Transparent or Private Address - </span><span className="glyphicon glyphicon-ok check-mark"></span></a>
+              <a tabIndex="0"><span className="text"> - Select Transparent or Private Address - </span><span className="glyphicon glyphicon-ok check-mark"></span></a>
             </li>
             {this.renderAddressByType('public')}
           </ul>
@@ -272,12 +272,32 @@ class SendCoin extends React.Component {
   }
 
   changeSendCoinStep(step) {
+    if (step === 0) {
       Store.dispatch(clearLastSendToResponseState());
 
+      this.setState({
+        currentStep: 0,
+        sendFrom: this.props.Dashboard && this.props.Dashboard.activeHandle ? this.props.Dashboard.activeHandle[this.props.ActiveCoin.coin] : null,
+        sendFromAmount: 0,
+        sendTo: '',
+        sendToOA: null,
+        amount: 0,
+        fee: 0.0001,
+        sendSig: false,
+        sendApiType: false,
+        addressSelectorOpen: false,
+        currentStackLength: 0,
+        totalStackLength: 0,
+        utxoMethodInProgress: false,
+      });
+    }
+
+    if (step === 1 || step === 2) {
       this.setState(Object.assign({}, this.state, {
         currentStep: step,
         utxoMethodInProgress: !this.state.sendApiType && this.props.ActiveCoin.mode === 'basilisk' ? true : false,
       }));
+    }
 
     if (step === 2) {
       if (!this.state.sendApiType && this.props.ActiveCoin.mode === 'basilisk') {
@@ -297,6 +317,7 @@ class SendCoin extends React.Component {
   toggleSendAPIType() {
     this.setState(Object.assign({}, this.state, {
       sendApiType: !this.state.sendApiType,
+      fee: !this.state.sendApiType ? 0 : 0.0001,
       sendFrom: this.props.Dashboard.activeHandle[this.props.ActiveCoin.coin],
     }));
   }
@@ -307,6 +328,7 @@ class SendCoin extends React.Component {
     });
   }
 
+  // TODO: move to action creators
   handleBasiliskSend() {
     const refreshData = this.props.ActiveCoin.cache[this.props.ActiveCoin.coin][this.state.sendFrom].refresh;
     const listunspentData = this.props.ActiveCoin.cache[this.props.ActiveCoin.coin][this.state.sendFrom].listunspent;
@@ -491,7 +513,7 @@ class SendCoin extends React.Component {
           <span className="label label-success">{this.props.ActiveCoin.lastSendToResponse[key] === true ? 'true' : 'success'}</span>
         );
       } else {
-        if (key === 'result' && this.props.ActiveCoin.lastSendToResponse.result && !Object.keys(this.props.ActiveCoin.lastSendToResponse.result).length) {
+        if (key === 'result' && this.props.ActiveCoin.lastSendToResponse.result && typeof this.props.ActiveCoin.lastSendToResponse.result !== 'object') {
           return (
             <span>{this.props.ActiveCoin.lastSendToResponse.result}</span>
           );
@@ -620,11 +642,11 @@ class SendCoin extends React.Component {
       return (
         <div className="row">
           <div className="col-lg-6 form-group form-material">
-            <label className="control-label" data-extcoin="COIN" htmlFor="kmd_wallet_sendto">Fetch OpenAlias recipient address</label>
+            <label className="control-label" htmlFor="kmd_wallet_sendto">Fetch OpenAlias recipient address</label>
-            <input type="text" className="form-control" data-extcoin="COIN" name="sendToOA" onChange={this.updateInput} id="kmd_wallet_sendto" placeholder="Enter an alias as address@site.com" autoComplete="off" required />
+            <input type="text" className="form-control" name="sendToOA" onChange={this.updateInput} id="kmd_wallet_sendto" 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" data-toggle="modal" id="kmd_wallet_send_coins_btn" onClick={this.getOAdress}>
+            <button type="button" className="btn btn-primary waves-effect waves-light" id="kmd_wallet_send_coins_btn" onClick={this.getOAdress}>
               Get address
             </button>
           </div>
@@ -641,7 +663,7 @@ class SendCoin extends React.Component {
         <div className="row">
           <div className="col-lg-10 margin-bottom-10">
             <div className="pull-left margin-right-10">
-              <input type="checkbox" id="edexcoin_send_api_type" data-plugin="switchery" data-size="small" />
+              <input type="checkbox" id="edexcoin_send_api_type" />
             </div>
             <label className="padding-top-3" htmlFor="edexcoin_send_api_type" onClick={this.toggleSendAPIType}>Send via sendtoaddress API</label>
           </div>
@@ -655,7 +677,7 @@ class SendCoin extends React.Component {
   render() {
     if (this.props.ActiveCoin && this.props.ActiveCoin.send && this.props.ActiveCoin.mode !== 'native') {
       return (
-        <div className="col-sm-12 padding-top-10" data-edexcoin="COIN" id="edexcoin_send">
+        <div className="col-sm-12 padding-top-10" id="edexcoin_send">
           <div className="col-xlg-12 col-md-12 col-sm-12 col-xs-12">
             <div className="steps row" style={{marginTop: '10px'}}>
               <div className={this.state.currentStep === 0 ? 'step col-md-4 current' : 'step col-md-4'} id="edexcoin_send_step_1">
@@ -700,21 +722,21 @@ class SendCoin extends React.Component {
                   <div className="row">
                     <div className="col-xlg-12 form-group form-material">
                       <label className="control-label" data-edexcoin="COIN" htmlFor="edexcoin_sendto">{translate('INDEX.SEND_TO')}</label>
-                      <input type="text" className="form-control" data-edexcoin="COIN" id="edexcoin_sendto" name="sendTo" placeholder="Enter address" autoComplete="off" value={this.state.sendTo} onChange={this.updateInput} required />
+                      <input type="text" className="form-control" id="edexcoin_sendto" name="sendTo" placeholder="Enter 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="edexcoin_amount" data-edexcoin="COIN" id="edexcoin_amount_label">
                         {this.props.ActiveCoin.coin}
                       </label>
-                      <input type="text" className="form-control" data-edexcoin="COIN" id="edexcoin_amount" name="amount" placeholder="0.000" autoComplete="off" onChange={this.updateInput} />
+                      <input type="text" className="form-control" id="edexcoin_amount" name="amount" placeholder="0.000" autoComplete="off" onChange={this.updateInput} />
                     </div>
                     <div className="col-lg-6 form-group form-material">
                       <label className="control-label" data-edexcoin="COIN" htmlFor="edexcoin_fee">{translate('INDEX.FEE')}</label>
-                      <input type="text" className="form-control" data-edexcoin="COIN" id="edexcoin_fee" name="fee" defaultValue={this.state.fee} placeholder="0.000" autoComplete="off" onChange={this.updateInput} />
+                      <input type="text" className="form-control" id="edexcoin_fee" 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 data-edexcoin="KMD">
-                        <b>{translate('INDEX.TOTAL')} (<span data-edexcoin="COIN">{translate('INDEX.AMOUNT_SM')}</span> - txfee):</b> <span data-edexcoin="COIN" id="edexcoin_total_value">{Number(this.state.amount) - Number(this.state.fee)}</span> {this.props.ActiveCoin.coin}
+                        <b>{translate('INDEX.TOTAL')} ({translate('INDEX.AMOUNT_SM')} - txfee):</b> <span id="edexcoin_total_value">{Number(this.state.amount) - Number(this.state.fee)}</span> {this.props.ActiveCoin.coin}
                       </span>
                     </div>
                     <div className="col-lg-10 margin-top-10">
@@ -779,7 +801,7 @@ class SendCoin extends React.Component {
                 <div className={!this.state.sendSig ? 'hide' : 'center'}>
                   You picked option "{translate('INDEX.DONT_SEND')}"
                 </div>
-                <table className="table table-hover table-striped edexcoin_sendto_result" data-edexcoin="COIN" id="edexcoin_sendto_result">
+                <table className="table table-hover table-striped edexcoin_sendto_result" id="edexcoin_sendto_result">
                   <thead>
                     <tr>
                       <th>{translate('INDEX.KEY')}</th>

react/src/components/dashboard/settings.js

@@ -20,9 +20,9 @@ import AddCoinOptionsACFiat from '../addcoin/addcoinOptionsACFiat';
 /*
   TODO:
   1) pre-select active coin in add node tab
-  2) add agama config section
+  2) add fiat section
-  3) add fiat section
+  3) kickstart section
-  4) kickstart section
+  4) batch export/import wallet addresses
 */
 class Settings extends React.Component {
   constructor(props) {
@@ -32,16 +32,18 @@ class Settings extends React.Component {
       debugLinesCount: 10,
       debugTarget: 'iguana',
       activeTabHeight: '10px',
-      appSettings: [],
+      appSettings: {},
     };
     this.exportWifKeys = this.exportWifKeys.bind(this);
     this.updateInput = this.updateInput.bind(this);
+    this.updateInputSettings = this.updateInputSettings.bind(this);
     this.importWifKey = this.importWifKey.bind(this);
     this.readDebugLog = this.readDebugLog.bind(this);
     this.checkNodes = this.checkNodes.bind(this);
     this.addNode = this.addNode.bind(this);
     this.renderPeersList = this.renderPeersList.bind(this);
     this.renderSNPeersList = this.renderSNPeersList.bind(this);
+    this._saveAppConfig = this._saveAppConfig.bind(this);
   }
 
   componentDidMount() {
@@ -50,10 +52,6 @@ class Settings extends React.Component {
     Store.dispatch(getAppInfo());
   }
 
-  _saveAppConfig() {
-    Store.dispatch(saveAppConfig);
-  }
-
   openTab(elemId, tab) {
     const _height = document.querySelector('#' + elemId + ' .panel-collapse .panel-body').offsetHeight;
 
@@ -201,13 +199,42 @@ class Settings extends React.Component {
     }
   }
 
+  updateInputSettings(e) {
+    let _appSettings = this.state.appSettings;
+    _appSettings[e.target.name] = e.target.value;
+
+    this.setState({
+      appSettings: _appSettings,
+    });
+
+    console.log(this.state.appSettings);
+  }
+
+  _saveAppConfig() {
+    const _appSettings = this.state.appSettings;
+    let _appSettingsPristine = Object.assign({}, this.props.Settings.appSettings);
+
+    for (let key in _appSettings) {
+      if (key.indexOf('__') === -1) {
+        _appSettingsPristine[key] = _appSettings[key];
+        // console.log('key changed: ' + key + ', value: ' + _appSettings[key]);
+      } else {
+        const _nestedKey = key.split('__');
+        _appSettingsPristine[_nestedKey[0]][_nestedKey[1]] = _appSettings[key];
+        // console.log('key changed: ' + _nestedKey[0] + '.' + _nestedKey[1] + ', value: ' + _appSettings[key]);
+      }
+    }
+
+    // console.log('changed settings obj', _appSettingsPristine);
+    Store.dispatch(saveAppConfig(_appSettingsPristine));
+  }
+
   renderConfigEditForm() {
-    console.log(this.props.Settings.appSettings);
     let items = [];
     const _appConfig = this.props.Settings.appSettings;
 
-    for (let key in this.props.Settings.appSettings) {
+    for (let key in _appConfig) {
-      if (Object.keys(this.props.Settings.appSettings[key]).length && key !== 'host') {
+      if (typeof _appConfig[key] === 'object') {
         items.push(
           <tr key={`app-settings-${key}`}>
             <td style={{padding: '15px'}}>
@@ -217,14 +244,14 @@ class Settings extends React.Component {
           </tr>
         );
 
-        for (let _key in this.props.Settings.appSettings[key]) {
+        for (let _key in _appConfig[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]} />
+                <input type="text" name={`${key}__${_key}`} defaultValue={_appConfig[key][_key]} onChange={this.updateInputSettings} />
               </td>
             </tr>
           );
@@ -236,7 +263,7 @@ class Settings extends React.Component {
               {key}
             </td>
             <td style={{padding: '15px'}}>
-              <input type="text" name={`app-settings-${key}-edit`} defaultValue={_appConfig[key]} />
+              <input type="text" name={`${key}`} defaultValue={_appConfig[key]} onChange={this.updateInputSettings} />
             </td>
           </tr>
         );
@@ -252,19 +279,30 @@ class Settings extends React.Component {
     });
   }
 
+  renderLB(_translationID) {
+    const _translationComponents = translate(_translationID).split('<br>');
+
+    return _translationComponents.map((_translation) =>
+      <span>
+        {_translation}
+        <br />
+      </span>
+    );
+  }
+
   render() {
     return (
-      <div data-animsition-in="fade-in" data-animsition-out="fade-out" style={{marginLeft: '0'}}>
+      <div style={{marginLeft: '0'}}>
         <div className="page-content" id="section-iguana-wallet-settings">
-          <div className="row" id="iguana-wallet-settings" data-plugin="masonry">
+          <div className="row" id="iguana-wallet-settings">
             <div className="col-xlg-12 col-md-12">
-              <div className="row" id="iguana-wallet-settings" data-plugin="masonry">
+              <div className="row" id="iguana-wallet-settings">
                 <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" aria-multiselectable="true" role="tablist">
                     <div className="panel" id="WalletInfo">
                       <div className="panel-heading" role="tab" onClick={() => this.openTab('WalletInfo', 0)}>
-                        <a className={this.state.activeTab === 0 ? 'panel-title' : 'panel-title collapsed'} data-toggle="collapse" data-parent="#SettingsAccordion">
+                        <a className={this.state.activeTab === 0 ? 'panel-title' : 'panel-title collapsed'}>
                           <i className="icon md-balance-wallet" aria-hidden="true"></i>{translate('INDEX.WALLET_INFO')}
                         </a>
                       </div>
@@ -415,10 +453,10 @@ class Settings extends React.Component {
                       <div className={this.state.activeTab === 4 ? 'panel-collapse collapse in' : 'panel-collapse collapse'} style={{height: this.state.activeTab === 4 ? this.state.activeTabHeight + 'px' : '10px'}} id="ExportKeysTab" aria-labelledby="ExportKeys" role="tabpanel">
                         <div className="panel-body">
                           <p>
-                            <div>{translate('INDEX.ONLY_ACTIVE_WIF_KEYS')}</div><br/>
+                            <div>{this.renderLB('INDEX.ONLY_ACTIVE_WIF_KEYS')}</div><br/>
-                            <b>
+                            <strong>
                               <i>{translate('INDEX.PLEASE_KEEP_KEYS_SAFE')}</i>
-                            </b>
+                            </strong>
                           </p>
                           <div className="col-sm-12"></div>
                           <form className="wifkeys-form" method="post" action="javascript:" autoComplete="off">
@@ -436,13 +474,13 @@ class Settings extends React.Component {
                               <table className={this.props.Settings && this.props.Settings.address ? 'table show' : 'table hide'}>
                                 <tr>
                                   <td style={{width: '5%'}}>
-                                    <b>{this.props.ActiveCoin.coin}</b>
+                                    <strong>{this.props.ActiveCoin.coin}</strong>
                                   </td>
                                   <td>{this.props.Settings.address}</td>
                                 </tr>
                                 <tr>
                                   <td>
-                                    <b>{this.props.ActiveCoin.coin}Wif</b>
+                                    <strong>{this.props.ActiveCoin.coin}Wif</strong>
                                   </td>
                                   <td>{this.props.Settings.wifkey}</td>
                                 </tr>
@@ -462,96 +500,108 @@ class Settings extends React.Component {
                       <div className={this.state.activeTab === 5 ? 'panel-collapse collapse in' : 'panel-collapse collapse'} style={{height: this.state.activeTab === 5 ? this.state.activeTabHeight + 'px' : '10px'}} id="ImportKeysTab" aria-labelledby="ImportKeys" role="tabpanel">
                         <div className="panel-body">
                           <p>
-                            <div>{translate('INDEX.IMPORT_KEYS_DESC_P1')}</div><br/>
+                            <div>{ translate('INDEX.IMPORT_KEYS_DESC_P1') }</div><br/>
-                            <div>{translate('INDEX.IMPORT_KEYS_DESC_P2')}</div><br/>
+                            <div>{ translate('INDEX.IMPORT_KEYS_DESC_P2') }</div><br/>
-                            <div>{translate('INDEX.IMPORT_KEYS_DESC_P3')}</div><br/>
+                            <div>{ translate('INDEX.IMPORT_KEYS_DESC_P3') }</div><br/>
-                            <b>
+                            <strong>
-                              <i>{translate('INDEX.PLEASE_KEEP_KEYS_SAFE')}</i>
+                              <i>{ translate('INDEX.PLEASE_KEEP_KEYS_SAFE') }</i>
-                            </b>
+                            </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="import_wifkey" onChange={this.updateInput} />
+                              <input type="text" className="form-control" name="importWifKey" id="import_wifkey" onChange={ this.updateInput } />
-                              <label className="floating-label" htmlFor="import_wifkey">{translate('INDEX.INPUT_PRIV_KEY')}</label>
+                              <label className="floating-label" htmlFor="import_wifkey">{ translate('INDEX.INPUT_PRIV_KEY') }</label>
                             </div>
-                            <div className="col-sm-12 col-xs-12" style={{textAlign: 'center'}}>
+                            <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="import_wifkey_btn" onClick={this.importWifKey}>{translate('INDEX.IMPORT_PRIV_KEY')}</button>
+                              <button
+                                type="button"
+                                className="btn btn-primary waves-effect waves-light"
+                                id="import_wifkey_btn"
+                                onClick={ this.importWifKey }>{ translate('INDEX.IMPORT_PRIV_KEY') }</button>
                             </div>
                           </form>
-                          <div className="col-sm-12" style={{paddingTop: '15px'}}>
-                            <div className="row" id="wif-priv-keys" data-plugin="masonry">
-
-                            </div>
-                          </div>
                         </div>
                       </div>
                     </div>
 
                     <div className="panel" id="DebugLog">
-                      <div className="panel-heading" role="tab" onClick={() => this.openTab('DebugLog', 6)}>
+                      <div className="panel-heading" role="tab" onClick={ () => this.openTab('DebugLog', 6) }>
-                        <a className={this.state.activeTab === 6 ? 'panel-title' : 'panel-title collapsed'} data-toggle="collapse" data-parent="#SettingsAccordion">
+                        <a className={ this.state.activeTab === 6 ? 'panel-title' : 'panel-title collapsed' }>
-                          <i className="icon md-info" aria-hidden="true"></i>{translate('INDEX.DEBUG_LOG')}
+                          <i className="icon fa-bug" aria-hidden="true"></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' : '10px'}} id="DebugLogTab" aria-labelledby="DebugLog" role="tabpanel">
+                      <div className={ this.state.activeTab === 6 ? 'panel-collapse collapse in' : 'panel-collapse collapse' }
+                           style={{ height: this.state.activeTab === 6 ? this.state.activeTabHeight + 'px' : '10px' }}
+                           id="DebugLogTab" aria-labelledby="DebugLog" role="tabpanel">
                         <div className="panel-body">
-                          <p>{translate('INDEX.DEBUG_LOG_DESC')}</p>
+                          <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="read_debug_log_lines" value={this.state.debugLinesCount} onChange={this.updateInput} />
+                              <input
-                              <label className="floating-label" htmlFor="read_debug_log_lines">{translate('INDEX.DEBUG_LOG_LINES')}</label>
+                                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}>
+                              <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>
+                              <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'}}>
+                            <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>
+                              <button
+                                type="button"
+                                className="btn btn-primary waves-effect waves-light"
+                                id="read_debug_log_btn"
+                                onClick={ this.readDebugLog }>{ translate('INDEX.LOAD_DEBUG_LOG') }</button>
                             </div>
-                            <div className="col-sm-12 col-xs-12" style={{textAlign: 'left'}}>
+                            <div className="col-sm-12 col-xs-12" style={{ textAlign: 'left' }}>
-                              <br />
+                              <div style={{ padding: '20px 0', paddingTop: '40px' }}>{ this.props.Settings.debugLog }</div>
-                              <div style={{padding: '20px 0'}}>{this.props.Settings.debugLog}</div>
                             </div>
                           </form>
-                          <div className="col-sm-12" style={{paddingTop: '15px'}}>
-                            <div className="row" data-plugin="masonry"></div>
-                          </div>
                         </div>
                       </div>
                     </div>
 
                     <div className="panel" id="AppSettings">
-                      <div className="panel-heading" role="tab" onClick={() => this.openTab('AppSettings', 7)}>
+                      <div className="panel-heading" role="tab" onClick={ () => this.openTab('AppSettings', 7) }>
-                        <a className={this.state.activeTab === 7 ? 'panel-title' : 'panel-title collapsed'} data-toggle="collapse" data-parent="#AppSettings">
+                        <a className={ this.state.activeTab === 7 ? 'panel-title' : 'panel-title collapsed' }>
-                          <i className="icon md-info" aria-hidden="true"></i>App Config (config.json)
+                          <i className="icon fa-wrench" aria-hidden="true"></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' : '10px'}} id="DebugLogTab" aria-labelledby="DebugLog" role="tabpanel">
+                      <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>
-                            <strong>Most changes to app config require wallet restart!</strong>
+                            <strong>{ translate('SETTINGS.CONFIG_RESTART_REQUIRED') }</strong>
                           </p>
-                          <form className="read-debug-log-import-form" method="post" action="javascript:" autoComplete="off">
+                          <div className="col-sm-12" style={{ paddingTop: '15px' }}>
-                            <div className="col-sm-12" style={{paddingTop: '15px'}}>
                             <table>
                               <tbody>
-                                {this.renderConfigEditForm()}
+                              { this.renderConfigEditForm() }
                               </tbody>
                             </table>
                           </div>
-                            <div className="col-sm-12 col-xs-12" style={{textAlign: 'center', paddingTop: '25px', paddingBottom: '25px'}}>
+                          <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>
+                            <button
+                              type="button"
+                              className="btn btn-primary waves-effect waves-light"
+                              id="read_debug_log_btn"
+                              onClick={ this._saveAppConfig }>{ translate('SETTINGS.SAVE_APP_CONFIG') }</button>
                           </div>
-                          </form>
                         </div>
                       </div>
                     </div>
-                    {this.renderAppInfoTab()}
+                    { this.renderAppInfoTab() }
                   </div>
                 </div>
               </div>
@@ -559,7 +609,7 @@ class Settings extends React.Component {
           </div>
         </div>
       </div>
-    )
+    );
   }
 }
 

react/src/components/dashboard/syncOnly.js

@@ -12,6 +12,9 @@ import Store from '../../store';
 class SyncOnly extends React.Component {
   constructor(props) {
     super(props);
+    this.state = {
+      autoRestartedForks: {}
+    };
     this.closeSyncOnlyModal = this.closeSyncOnlyModal.bind(this);
   }
 
@@ -115,6 +118,39 @@ class SyncOnly extends React.Component {
     };
   }
 
+  componentWillReceiveProps(props) {
+    // console.log('SyncOnly', props);
+    if (props.SyncOnly) {
+      for (let port in this.props.SyncOnly.forks) {
+        const forkInfo = this.props.SyncOnly.forks[port];
+
+        if (!this.state.autoRestartedForks[port] &&
+            forkInfo &&
+            forkInfo.registry &&
+            forkInfo.getinfo &&
+            forkInfo.getinfo.error &&
+            forkInfo.getinfo.error === 'bitcoinrpc needs coin that is active') {
+          console.log('fork add coin required');
+          let _autoRestartedForks = Object.assign({}, this.state.autoRestartedForks);
+          _autoRestartedForks[port] = true;
+
+          this.setState({
+            autoRestartedForks: _autoRestartedForks,
+          });
+          Store.dispatch(addCoin(forkInfo.registry.coin, '1', null, port));
+          setTimeout(function() {
+            let _autoRestartedForks = Object.assign({}, this.state.autoRestartedForks);
+            _autoRestartedForks[port] = false;
+
+            this.setState({
+              autoRestartedForks: _autoRestartedForks,
+            });
+          }.bind(this), 10000);
+        }
+      }
+    }
+  }
+
   closeSyncOnlyModal() {
     Store.dispatch(stopInterval('syncOnly', this.props.Interval.interval));
     Store.dispatch(toggleSyncOnlyModal(false));

react/src/components/dashboard/walletsBalance.js

@@ -28,6 +28,7 @@ class WalletsBalance extends React.Component {
         if (type === 'main' &&
             this.props.ActiveCoin.mode === 'basilisk' &&
             this.props.ActiveCoin.activeAddress &&
+            this.props.ActiveCoin.cache[this.props.ActiveCoin.coin][this.props.ActiveCoin.activeAddress]&&
             this.props.ActiveCoin.cache[this.props.ActiveCoin.coin][this.props.ActiveCoin.activeAddress].getbalance &&
             this.props.ActiveCoin.cache[this.props.ActiveCoin.coin][this.props.ActiveCoin.activeAddress].getbalance.data &&
             this.props.ActiveCoin.cache[this.props.ActiveCoin.coin][this.props.ActiveCoin.activeAddress].getbalance.data.balance) {
@@ -37,6 +38,7 @@ class WalletsBalance extends React.Component {
         if (type === 'interest' &&
             this.props.ActiveCoin.mode === 'basilisk' &&
             this.props.ActiveCoin.activeAddress &&
+            this.props.ActiveCoin.cache[this.props.ActiveCoin.coin][this.props.ActiveCoin.activeAddress] &&
             this.props.ActiveCoin.cache[this.props.ActiveCoin.coin][this.props.ActiveCoin.activeAddress].getbalance &&
             this.props.ActiveCoin.cache[this.props.ActiveCoin.coin][this.props.ActiveCoin.activeAddress].getbalance.data &&
             this.props.ActiveCoin.cache[this.props.ActiveCoin.coin][this.props.ActiveCoin.activeAddress].getbalance.data.interest) {
@@ -46,6 +48,7 @@ class WalletsBalance extends React.Component {
         if (type === 'total' &&
             this.props.ActiveCoin.mode === 'basilisk' &&
             this.props.ActiveCoin.activeAddress &&
+            this.props.ActiveCoin.cache[this.props.ActiveCoin.coin][this.props.ActiveCoin.activeAddress] &&
             this.props.ActiveCoin.cache[this.props.ActiveCoin.coin][this.props.ActiveCoin.activeAddress].getbalance &&
             this.props.ActiveCoin.cache[this.props.ActiveCoin.coin][this.props.ActiveCoin.activeAddress].getbalance.data &&
             (this.props.ActiveCoin.cache[this.props.ActiveCoin.coin][this.props.ActiveCoin.activeAddress].getbalance.data.balance ||
@@ -61,6 +64,17 @@ class WalletsBalance extends React.Component {
     return _balance;
   }
 
+  renderLB(_translationID) {
+    const _translationComponents = translate(_translationID).split('<br>');
+
+    return _translationComponents.map((_translation) =>
+      <span>
+        {_translation}
+        <br />
+      </span>
+    );
+  }
+
   render() {
     if (this.props &&
         this.props.ActiveCoin &&
@@ -69,30 +83,30 @@ class WalletsBalance extends React.Component {
         !this.props.ActiveCoin.send &&
         !this.props.ActiveCoin.receive) {
       return (
-        <div id="wallet-widgets" data-plugin="masonry" data-edexcoin="COIN">
+        <div id="wallet-widgets">
           <div className="col-xs-12">
             <div className={this.props.ActiveCoin.mode === 'native' || (this.props.ActiveCoin.mode === 'full' && !this.isFullySynced()) ? 'col-xs-12' : 'col-xs-12 hide'}>
-              <div role="alert" className="alert alert-info alert-dismissible" data-edexcoin="COIN" id="edexcoin-wallet-waitingrt-alert">
+              <div role="alert" className="alert alert-info alert-dismissible" id="edexcoin-wallet-waitingrt-alert">
                 <button aria-label="Close" data-dismiss="alert" className="close" type="button">
                   <span aria-hidden="true">×</span>
                 </button>
                 <h4>{translate('INDEX.ACTIVATING_WALLET_RT')}</h4>
                 <p data-edexcoin="COIN" id="edexcoin-wallet-waitingrt-alert-text">{translate('INDEX.IGUANA_FULL_MODE_SYNC_P1')}</p>
                 <p>{translate('INDEX.IGUANA_FULL_MODE_SYNC_P2')}</p>
-                <p style={{fontWeight: '600'}}>{translate('INDEX.IGUANA_FULL_MODE_SYNC_P3')}</p>
+                <p style={{fontWeight: '600'}}>{this.renderLB('INDEX.IGUANA_FULL_MODE_SYNC_P3')}</p>
               </div>
 
-              <div role="alert" className="alert alert-info alert-dismissible" data-edexcoin="COIN" id="edexcoin-wallet-waitingcache-alert">
+              <div role="alert" className="alert alert-info alert-dismissible" id="edexcoin-wallet-waitingcache-alert">
                 <button aria-label="Close" data-dismiss="alert" className="close" type="button">
                   <span aria-hidden="true">×</span>
                 </button>
                 <h4>{translate('INDEX.FETCHING_COIN_DATA')}</h4>
                 <p data-edexcoin="COIN" id="edexcoin-wallet-waitingcache-alert-text">{translate('INDEX.IGUANA_FULL_MODE_SYNC_P1')}</p>
                 <p>{translate('INDEX.IGUANA_FULL_MODE_SYNC_P2')}</p>
-                <p style={{fontWeight: '600'}}>{translate('INDEX.IGUANA_FULL_MODE_SYNC_P3')}</p>
+                <p style={{fontWeight: '600'}}>{this.renderLB('INDEX.IGUANA_FULL_MODE_SYNC_P3')}</p>
               </div>
             </div>
-            <div className="col-lg-12 col-xs-12" data-edexcoin="COIN" id="edexcoin_getbalance_t">
+            <div className={this.props.ActiveCoin.mode === 'native' || this.props.ActiveCoin.mode === 'basilisk' ? 'col-lg-4 col-xs-12' : 'col-lg-12 col-xs-12'} id="edexcoin_getbalance_t">
               <div className="widget widget-shadow" id="widgetLineareaOne">
                 <div className="widget-content">
                   <div className="padding-20 padding-top-10">
@@ -100,7 +114,7 @@ class WalletsBalance extends React.Component {
                       <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" data-edexcoin="COIN" style={{fontSize: '22px'}}>
+                      <span className="pull-right padding-top-10" style={{fontSize: '22px'}}>
                         {this.renderBalance('main')} {this.props.ActiveCoin.coin}
                       </span>
                     </div>
@@ -109,7 +123,7 @@ class WalletsBalance extends React.Component {
               </div>
             </div>
 
-            <div className={this.props.ActiveCoin.mode === 'native' || this.props.ActiveCoin.mode === 'basilisk' ? 'col-lg-4 col-xs-12' : 'col-lg-4 col-xs-12 hide'} data-edexcoin="COIN" id="edexcoin_getbalance_interest">
+            <div className={this.props.ActiveCoin.mode === 'native' || this.props.ActiveCoin.mode === 'basilisk' ? 'col-lg-4 col-xs-12' : 'col-lg-4 col-xs-12 hide'} id="edexcoin_getbalance_interest">
               <div className="widget widget-shadow" id="widgetLineareaOne">
                 <div className="widget-content">
                   <div className="padding-20 padding-top-10">
@@ -117,7 +131,7 @@ class WalletsBalance extends React.Component {
                       <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" data-edexcoin="COIN" style={{fontSize: '22px'}}>
+                      <span className="pull-right padding-top-10" style={{fontSize: '22px'}}>
                         {this.renderBalance('interest')} {this.props.ActiveCoin.coin}
                       </span>
                     </div>
@@ -126,7 +140,7 @@ class WalletsBalance extends React.Component {
               </div>
             </div>
 
-            <div className={this.props.ActiveCoin.mode === 'native' || this.props.ActiveCoin.mode === 'basilisk' ? 'col-lg-4 col-xs-12' : 'col-lg-4 col-xs-12 hide'} data-edexcoin="COIN" id="edexcoin_getbalance_total_interest">
+            <div className={this.props.ActiveCoin.mode === 'native' || this.props.ActiveCoin.mode === 'basilisk' ? 'col-lg-4 col-xs-12' : 'col-lg-4 col-xs-12 hide'} id="edexcoin_getbalance_total_interest">
               <div className="widget widget-shadow" id="widgetLineareaOne">
                 <div className="widget-content">
                   <div className="padding-20 padding-top-10">

react/src/components/dashboard/walletsBasiliskConnection.js

@@ -24,7 +24,7 @@ class WalletsBasiliskConnection extends React.Component {
                   <h4 className="modal-title white">
                     <span className="icon fa-refresh" style={{margin: '0'}}></span> {translate('INDEX.REFRESHING_BASILISK_NET')}...
                   </h4>
-                  <button type="button" className="close btn-close" data-dismiss="alert" aria-label="Close" onClick={this.basiliskConnectionAction}>
+                  <button type="button" className="close btn-close" aria-label="Close" onClick={this.basiliskConnectionAction}>
                     <span aria-hidden="true">&times;</span>
                     <span className="sr-only">{translate('INDEX.CLOSE')}</span>
                   </button>
@@ -72,9 +72,9 @@ class WalletsBasiliskConnection extends React.Component {
                     {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" style={{width: Math.floor(this.props.Dashboard.connectedNotaries.current * 100 / this.props.Dashboard.connectedNotaries.total) + '%', fontSize: '80%'}} role="progressbar" data-edexcoin="COIN" id="basilisk-connections-refresh-progress-bar"></div>
+                    <div className="progress-bar progress-bar-info progress-bar-striped active" style={{width: Math.floor(this.props.Dashboard.connectedNotaries.current * 100 / this.props.Dashboard.connectedNotaries.total) + '%', fontSize: '80%'}} role="progressbar" id="basilisk-connections-refresh-progress-bar"></div>
                   </div>
-                  <pre data-edexcoin="COIN" id="basilisk-connections-refresh-status-output">
+                  <pre id="basilisk-connections-refresh-status-output">
                   {this.props.Dashboard.connectedNotaries.failedToConnectNodes ? 'Failed: ' + this.props.Dashboard.connectedNotaries.failedToConnectNodes : null}
                   </pre>
                 </div>

react/src/components/dashboard/walletsBasiliskRefresh.js

@@ -12,7 +12,7 @@ class WalletsBasiliskRefresh extends React.Component {
                 <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" data-toggle="panel-refresh" data-load-type="blue-only" aria-hidden="true"></a>
+                    <a className="panel-action icon md-refresh-alt" aria-hidden="true"></a>
                   </div>
                 </div>
                 <div className="table-responsive">

react/src/components/dashboard/walletsCacheData.js

@@ -125,7 +125,9 @@ class WalletsCacheData extends React.Component {
   }
 
   renderCoinData() {
-    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}`} />
@@ -139,7 +141,9 @@ class WalletsCacheData extends React.Component {
   }
 
   render() {
-    if (this.props && this.props.ActiveCoin.mode === 'basilisk' && this.props.Dashboard.displayViewCacheModal) {
+    if (this.props &&
+        this.props.ActiveCoin.mode === 'basilisk' &&
+        this.props.Dashboard.displayViewCacheModal) {
 
       return (
         <div>

react/src/components/dashboard/walletsData.js

@@ -56,6 +56,7 @@ class WalletsData extends React.Component {
     this.toggleCacheApi = this.toggleCacheApi.bind(this);
     this._fetchUtxoCache = this._fetchUtxoCache.bind(this);
     this.restartBasiliskInstance = this.restartBasiliskInstance.bind(this);
+    this.basiliskRefreshActionOne = this.basiliskRefreshActionOne.bind(this);
     socket.on('messages', msg => this.updateSocketsData(msg));
   }
 
@@ -133,7 +134,7 @@ class WalletsData extends React.Component {
     }));
   }
 
-  basiliskRefreshActionOne() {
+  basiliskRefreshAction() {
     Store.dispatch(fetchNewCacheData({
       'pubkey': this.props.Dashboard.activeHandle.pubkey,
       'allcoins': false,
@@ -142,7 +143,7 @@ class WalletsData extends React.Component {
     }));
   }
 
-  basiliskRefreshAction() {
+  basiliskRefreshActionOne() {
     Store.dispatch(fetchNewCacheData({
       'pubkey': this.props.Dashboard.activeHandle.pubkey,
       'allcoins': false,
@@ -226,7 +227,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 className={this.state.activePage === i + 1 ? 'paginate_button active' : 'paginate_button'}>
+        <li key={i + '-pagination-link'} 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>
         </li>
       );
@@ -418,22 +419,45 @@ class WalletsData extends React.Component {
   }
 
   renderAddressByType(type) {
-    if (this.props.ActiveCoin.addresses && this.props.ActiveCoin.addresses[type] && this.props.ActiveCoin.addresses[type].length) {
+    if (this.props.ActiveCoin.addresses &&
-      return this.props.ActiveCoin.addresses[type].map((address) =>
+        this.props.ActiveCoin.addresses[type] &&
+        this.props.ActiveCoin.addresses[type].length) {
+        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] && 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 key={address.address}>
-          <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>
+              <a tabIndex="0" 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;
     }
   }
 
   renderAddressAmount() {
-    if (this.props.ActiveCoin.addresses && this.props.ActiveCoin.addresses['public'] && this.props.ActiveCoin.addresses['public'].length) {
+    if (this.props.ActiveCoin.addresses &&
-      for (let i = 0; i < this.props.ActiveCoin.addresses['public'].length; i++) {
+        this.props.ActiveCoin.addresses.public &&
-        if (this.props.ActiveCoin.addresses['public'][i].address === this.state.currentAddress) {
+        this.props.ActiveCoin.addresses.public.length) {
-          return this.props.ActiveCoin.addresses['public'][i].amount;
+      for (let i = 0; i < this.props.ActiveCoin.addresses.public.length; i++) {
+        if (this.props.ActiveCoin.addresses.public[i].address === this.state.currentAddress) {
+          if (this.props.ActiveCoin.addresses.public[i].amount && this.props.ActiveCoin.addresses.public[i].amount !== 'N/A') {
+            return this.props.ActiveCoin.addresses.public[i].amount;
+          } else {
+            const address = this.props.ActiveCoin.addresses.public[i].address;
+            const _amount = 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';
+            return _amount;
+          }
         }
       }
     } else {

react/src/components/dashboard/walletsNativeAlert.js

@@ -3,15 +3,17 @@ import { translate } from '../../translate/translate';
 
 class WalletsNativeAlert extends React.Component {
   render() {
-    if (this.props && this.props.Dashboard && !this.props.Dashboard.progress) {
+    if (this.props &&
+        this.props.Dashboard &&
+        !this.props.Dashboard.progress) {
       return (
-        <div role="alert" className="alert alert-danger alert-dismissible" data-extcoin="COIN" id="extcoin-wallet-connection-alert">
+        <div role="alert" className="alert alert-danger alert-dismissible" id="extcoin-wallet-connection-alert">
           <button aria-label="Close" data-dismiss="alert" className="close" type="button">
             <span aria-hidden="true">×</span>
           </button>
-          <h4>{translate('INDEX.OOPS_ERROR')}</h4>
+          <h4>{ translate('INDEX.OOPS_ERROR') }</h4>
-          <p data-extcoin="COIN" id="extcoin-wallet-connection-alert-text">
+          <p id="extcoin-wallet-connection-alert-text">
-            <span>{translate('INDEX.OOPS_ERROR_DESC')}</span>
+            <span>{ translate('INDEX.OOPS_ERROR_DESC') }</span>
             <code>server=1</code><br/>
             <code>rpcport=</code><br/>
             <code>rpcuser=</code><br/>

react/src/components/dashboard/walletsNativeInfo.js

@@ -7,45 +7,48 @@ class WalletsNativeInfo extends React.Component {
   }
 
   render() {
-    if (this.props && this.props.Dashboard && this.props.Dashboard.progress && this.props.ActiveCoin.nativeActiveSection === 'settings') {
+    if (this.props &&
+        this.props.Dashboard &&
+        this.props.Dashboard.progress &&
+        this.props.ActiveCoin.nativeActiveSection === 'settings') {
       return (
-        <div data-extcoin="COIN" id="kmd_wallet_settings">
+        <div id="kmd_wallet_settings">
           <div className="col-xlg-6 col-md-4">
             <div className="panel" id="projects">
               <div className="panel-heading">
-                <h3 className="panel-title">{translate('INDEX.WALLET_INFO')}</h3>
+                <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>{ translate('INDEX.WALLET_VERSION') }</td>
                       <td>
-                        {this.props.Dashboard.progress.walletversion}
+                        { this.props.Dashboard.progress.walletversion }
                       </td>
                     </tr>
                     <tr>
-                      <td>{translate('INDEX.BALANCE')}</td>
+                      <td>{ translate('INDEX.BALANCE') }</td>
                       <td>
-                        {this.props.Dashboard.progress.balance}
+                        { this.props.Dashboard.progress.balance }
                       </td>
                     </tr>
                     <tr>
-                      <td>{translate('INDEX.UNCONFIRMED_BALANCE')}</td>
+                      <td>{ translate('INDEX.UNCONFIRMED_BALANCE') }</td>
                       <td>
-                        <span data-extcoin="COIN" id="kmd_unconfirmed_balance"></span>
+                        <span id="kmd_unconfirmed_balance"></span>
                       </td>
                     </tr>
                     <tr>
-                      <td>{translate('INDEX.IMMATURE_BALANCE')}</td>
+                      <td>{ translate('INDEX.IMMATURE_BALANCE') }</td>
                       <td>
-                        <span data-extcoin="COIN" id="kmd_immature_balance"></span>
+                        <span id="kmd_immature_balance"></span>
                       </td>
                     </tr>
                     <tr>
-                      <td>{translate('INDEX.TOTAL_TX_COUNT')}</td>
+                      <td>{ translate('INDEX.TOTAL_TX_COUNT') }</td>
                       <td>
-                        <span data-extcoin="COIN" id="KMDTotalTransactionsCount"></span>
+                        <span id="KMDTotalTransactionsCount"></span>
                       </td>
                     </tr>
                   </tbody>
@@ -58,33 +61,33 @@ class WalletsNativeInfo extends React.Component {
             <div className="panel" id="projects">
               <div className="panel-heading">
                 <h3 className="panel-title">
-                  <span data-extcointitle="COIN">Komodo</span> {translate('INDEX.INFO')}
+                  Komodo { translate('INDEX.INFO') }
                 </h3>
               </div>
               <div className="table-responsive">
                 <table className="table table-striped">
                   <tbody>
                     <tr>
-                      <td>{translate('INDEX.VERSION')}</td>
+                      <td>{ translate('INDEX.VERSION') }</td>
                       <td>
-                        {this.props.Dashboard.progress.KMDversion}
+                        { this.props.Dashboard.progress.KMDversion }
                       </td>
                     </tr>
                     <tr>
-                      <td>{translate('INDEX.PROTOCOL_VERSION')}</td>
+                      <td>{ translate('INDEX.PROTOCOL_VERSION') }</td>
                       <td>
-                        {this.props.Dashboard.progress.protocolversion}
+                        { this.props.Dashboard.progress.protocolversion }
                       </td>
                     </tr>
                     <tr>
-                      <td>{translate('INDEX.NOTARIZED')}</td>
+                      <td>{ translate('INDEX.NOTARIZED') }</td>
                       <td>
-                        {this.props.Dashboard.progress.notarized}
+                        { this.props.Dashboard.progress.notarized }
                       </td>
                     </tr>
                     <tr>
                       <td>
-                        {translate('INDEX.NOTARIZED')} Hash
+                        { translate('INDEX.NOTARIZED') } Hash
                       </td>
                       <td>
                         { this.props.Dashboard.progress.notarizedhash ?
@@ -97,52 +100,52 @@ class WalletsNativeInfo extends React.Component {
                     </tr>
                     <tr>
                       <td>
-                        {translate('INDEX.NOTARIZED')} BTC
+                        { translate('INDEX.NOTARIZED') } BTC
                       </td>
                       <td>
-                        <span data-extcoin="COIN" id="kmd_notarizedbtc"></span>
+                        <span id="kmd_notarizedbtc"></span>
                       </td>
                     </tr>
                     <tr>
-                      <td>{translate('INDEX.BLOCKS')}</td>
+                      <td>{ translate('INDEX.BLOCKS') }</td>
                       <td>
-                        {this.props.Dashboard.progress.blocks}
+                        { this.props.Dashboard.progress.blocks }
                       </td>
                     </tr>
                     <tr>
-                      <td>{translate('INDEX.CONNECTIONS')}</td>
+                      <td>{ translate('INDEX.CONNECTIONS') }</td>
                       <td>
-                        {this.props.Dashboard.progress.connections}
+                        { this.props.Dashboard.progress.connections }
                       </td>
                     </tr>
                     <tr>
-                      <td>{translate('INDEX.DIFFICULTY')}</td>
+                      <td>{ translate('INDEX.DIFFICULTY') }</td>
                       <td>
-                        {this.props.Dashboard.progress.difficulty}
+                        { this.props.Dashboard.progress.difficulty }
                       </td>
                     </tr>
                     <tr>
                       <td>Testnet</td>
                       <td>
-                        {this.props.Dashboard.progress.testnet}
+                        { this.props.Dashboard.progress.testnet }
                       </td>
                     </tr>
                     <tr>
-                      <td>{translate('INDEX.PAY_TX_FEE')}</td>
+                      <td>{ translate('INDEX.PAY_TX_FEE') }</td>
                       <td>
-                        {this.props.Dashboard.progress.paytxfee}
+                        { this.props.Dashboard.progress.paytxfee }
                       </td>
                     </tr>
                     <tr>
-                      <td>{translate('INDEX.RELAY_FEE')}</td>
+                      <td>{ translate('INDEX.RELAY_FEE') }</td>
                       <td>
-                        {this.props.Dashboard.progress.relayfee}
+                        { this.props.Dashboard.progress.relayfee }
                       </td>
                     </tr>
                     <tr>
-                      <td>{translate('INDEX.ERRORS')}</td>
+                      <td>{ translate('INDEX.ERRORS') }</td>
                       <td>
-                        {this.props.Dashboard.progress.errors}
+                        { this.props.Dashboard.progress.errors }
                       </td>
                     </tr>
                   </tbody>

react/src/components/dashboard/walletsNativeSyncProgress.js

@@ -55,7 +55,7 @@ class WalletsNativeSyncProgress extends React.Component {
           <h4>
             {translate('INDEX.ACTIVATING_CHAIN')}{this.renderActivatingBestChainProgress()}
           </h4>
-          <p data-extcoin="COIN" id="extcoin-wallet-connection-alert-text">{translate('INDEX.KMD_STARTED')}</p>
+          <p id="extcoin-wallet-connection-alert-text">{translate('INDEX.KMD_STARTED')}</p>
         </div>
       );
     } else {
@@ -69,7 +69,7 @@ class WalletsNativeSyncProgress extends React.Component {
         <div>
           {this.renderChainActivationNotification()}
           <div className="row" style={{margin: '-20px 0px 10px 0px'}}>
-            <div className="col-xs-12" data-extcoin="COIN" id="extcoin-progressbars">
+            <div className="col-xs-12" id="extcoin-progressbars">
               <div className="progress">
                 {this.renderSyncPercentagePlaceholder()}
               </div>

react/src/components/dashboard/walletsTxInfo.js

@@ -24,7 +24,9 @@ class WalletsTxInfo extends React.Component {
   }
 
   render() {
-    if (this.props && this.props.ActiveCoin.showTransactionInfo && this.props.ActiveCoin.mode !== 'native') {
+    if (this.props &&
+        this.props.ActiveCoin.showTransactionInfo &&
+        this.props.ActiveCoin.mode !== 'native') {
       const txInfo = this.props.ActiveCoin.txhistory[this.props.ActiveCoin.showTransactionInfoTxIndex];
 
       return (

react/src/components/login/login.js

@@ -26,6 +26,7 @@ class Login extends React.Component {
       randomSeed: PassPhraseGenerator.generatePassPhrase(256),
       randomSeedConfirm: '',
       isSeedConfirmError: false,
+      displaySeedBackupModal: false,
     };
     this.toggleActivateCoinForm = this.toggleActivateCoinForm.bind(this);
     this.updateInput = this.updateInput.bind(this);
@@ -33,6 +34,8 @@ class Login extends React.Component {
     this.toggleSeedInputVisibility = this.toggleSeedInputVisibility.bind(this);
     this.handleRegisterWallet = this.handleRegisterWallet.bind(this);
     this.openSyncOnlyModal = this.openSyncOnlyModal.bind(this);
+    this.toggleSeedBackupModal = this.toggleSeedBackupModal.bind(this);
+    this.execWalletCreate = this.execWalletCreate.bind(this);
   }
 
   openSyncOnlyModal() {
@@ -119,13 +122,19 @@ class Login extends React.Component {
     });
   }
 
-  handleRegisterWallet() {
+  execWalletCreate() {
-    if (this.state.randomSeed === this.state.randomSeedConfirm) {
+    Store.dispatch(createNewWallet(this.state.randomSeedConfirm, this.props.Dashboard.activeHandle));
+
     this.setState({
+      activeLoginSection: 'activateCoin',
+      displaySeedBackupModal: false,
       isSeedConfirmError: false,
     });
+  }
 
-      Store.dispatch(createNewWallet(this.state.randomSeedConfirm, this.props.Dashboard.activeHandle));
+  handleRegisterWallet() {
+    if (this.state.randomSeed === this.state.randomSeedConfirm) {
+      this.toggleSeedBackupModal();
     } else {
       this.setState({
         isSeedConfirmError: true,
@@ -139,37 +148,64 @@ class Login extends React.Component {
     }
   }
 
+  toggleSeedBackupModal() {
+    this.setState(Object.assign({}, this.state, {
+      displaySeedBackupModal: !this.state.displaySeedBackupModal,
+    }));
+  }
+
+  renderSwallModal() {
+    if (this.state.displaySeedBackupModal) {
+      return (
+        <div className="swal2-container">
+          <div className="swal2-overlay" tabIndex="-1" style={{ opacity: 1, display: 'block' }}></div>
+          <div className="swal2-modal show-swal2 visible" style={{ display: 'block', width: '500px', padding: '20px', marginLeft: '-250px', background: 'rgb(255, 255, 255)', marginTop: '-230px' }} tabIndex="-1">
+          <div className="swal2-icon swal2-warning pulse-warning" style={{ display: 'block' }}>!</div>
+          <h2>{ translate('LOGIN.SAVED_WALLET_SEED') }</h2>
+          <div className="swal2-content" style={{ display: 'block' }}>{ translate('LOGIN.SEED_MAKE_SURE_BACKUP') }</div>
+          <hr className="swal2-spacer" style={{ display: 'block' }} />
+          <button className="swal2-confirm styled" style={{ backgroundColor: 'rgb(48, 133, 214)', borderLeftColor: 'rgb(48, 133, 214)', borderRightColor: 'rgb(48, 133, 214)' }} onClick={ this.execWalletCreate }>{ translate('LOGIN.YES_I_BACKUP') }</button>
+          <button className="swal2-cancel styled" style={{ display: 'inline-block', backgroundColor: 'rgb(221, 51, 51)'}} onClick={ this.toggleSeedBackupModal }>{ translate('LOGIN.CANCEL') }</button>
+        </div>
+      </div>
+      );
+    } else {
+      return null;
+    }
+  }
+
   render() {
     if ((this.state && this.state.display) || !this.props.Main) {
       return (
         <div id="wallet-login">
+          { this.renderSwallModal() }
           <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" />
               </div>
 
-              <div style={{padding: '20px 0'}}>
+              <div style={{ padding: '20px 0' }}>
-                <span className="display-sync-only-coins-toggle" onClick={this.openSyncOnlyModal}>
+                <span className="display-sync-only-coins-toggle" onClick={ this.openSyncOnlyModal }>
-                  <i className="fa fa-cubes"></i> {translate('LOGIN.DISPLAY_SYNC_ONLY')}
+                  <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 id="section-ie-warning" className={ this.state.activeLoginSection === 'ieWarning' ? 'show' : 'hide' }>
                 <div className="panel">
                   <div className="panel-heading">
-                    <h3 className="panel-title">{translate('INDEX.UNSUPPORTED_BROWSER')}</h3>
+                    <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>
-                      <span className="sr-only">{translate('INDEX.CLOSE')}</span>
+                      <span className="sr-only">{ translate('INDEX.CLOSE') }</span>
                     </button>
-                    {translate('INDEX.IE_UNSUPPORTED')}
+                    { translate('INDEX.IE_UNSUPPORTED') }
                   </div>
                   <div className="panel-body">
                     <p style={{ color: '#424242' }}>
-                      {translate('INDEX.PLEASE_USE')} <a href="https://www.google.com/chrome/">Google Chrome</a> {translate('INDEX.OR')} <a href="https://www.firefox.com">Mozilla FireFox</a> {translate('INDEX.TO_USE')} EasyDEX-GUI. {translate('INDEX.PLEASE_CLICK_ON')}.
+                      { translate('INDEX.PLEASE_USE') } <a href="https://www.google.com/chrome/">Google Chrome</a> { translate('INDEX.OR') } <a href="https://www.firefox.com">Mozilla FireFox</a> { translate('INDEX.TO_USE') } EasyDEX-GUI. { translate('INDEX.PLEASE_CLICK_ON') }.
                     </p>
                     <div className="col-sm-6 col-xs-6">
                       <a href="https://www.google.com/chrome/"><img className="brand-img" src="assets/images/browsers/chrome.png" alt="Google Chrome" /></a>
@@ -181,12 +217,12 @@ class Login extends React.Component {
                 </div>
               </div>
 
-              <div id="section-login" className={this.state.activeLoginSection === 'login' ? 'show' : 'hide'}>
+              <div id="section-login" className={ this.state.activeLoginSection === 'login' ? 'show' : 'hide' }>
                 <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'}
+                      type={ this.state.seedInputVisibility ? 'text' : 'password' }
                       className="form-control"
                       name="loginPassphrase"
                       id="password"
@@ -199,6 +235,15 @@ class Login extends React.Component {
                   <div className="form-group form-material floating">
                     <button className="btn btn-lg btn-flat btn-block waves-effect" id="register-btn" onClick={() => this.updateActiveLoginSection('signup')}>{translate('INDEX.CREATE_WALLET')}</button>
                     <button className="btn btn-lg btn-flat btn-block waves-effect hide" id="logint-another-wallet">{translate('INDEX.LOGIN_ANOTHER_WALLET')}</button>
+                    <button
+                      className="btn btn-lg btn-flat btn-block waves-effect"
+                      id="register-btn"
+                      role="menuitem"
+                      onClick={this.toggleActivateCoinForm}
+                      disabled={!this.props.Main}
+                      style={{marginTop: '20px'}}>
+                      <span className="ladda-label">{translate('ADD_COIN.ADD_ANOTHER_COIN')}</span>
+                    </button>
                   </div>
                 </div>
               </div>
@@ -220,7 +265,7 @@ class Login extends React.Component {
               <div id="section-register" className={this.state.activeLoginSection === 'signup' ? 'show' : 'hide'}>
                 <div className="register-form">
                   <h4 className="hint" style={{ color: '#fff' }}>
-                    {translate('INDEX.SELECT_SEED_TYPE')}:
+                    { translate('INDEX.SELECT_SEED_TYPE') }:
                   </h4>
                   <div className="form-group form-material floating">
                     <div className="radio-custom radio-default radio-inline" onClick={() => this.generateNewSeed(256)}>
@@ -242,7 +287,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'}>{translate('LOGIN.ENTER_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/translate/en.js

@@ -81,7 +81,7 @@ export const _lang = {
                                   'That\'s why you see four different colored synchronizing progress bars.',
       'IGUANA_FULL_MODE_SYNC_P2': 'Once all these progress bars reach 100%, the Real Time blocks start synchronizing. ' +
                                   'Only after the Real Time sync mode activates will you be able to see current data in your wallet and make any transactions.',
-      'IGUANA_FULL_MODE_SYNC_P3': 'Please wait for all other progress bars to disappear and the first blue bar turns to green.<br/>' +
+      'IGUANA_FULL_MODE_SYNC_P3': 'Please wait for all other progress bars to disappear and the first blue bar turns to green.<br>' +
                                   'That would mean the wallet is in Real Time Sync mode.',
       'FETCHING_COIN_DATA': 'Fetching coin data from network. Please wait...',
       'INTEREST_EARNED': 'Interest Earned',
@@ -130,12 +130,12 @@ export const _lang = {
       'TYPE': 'Type',
       'INTEREST': 'Interest',
       'OOPS_ERROR': 'Opps! Something is not right...',
-      'OOPS_ERROR_DESC': 'Could not connect to external wallet. Reasons can be:<br/>' +
+      'OOPS_ERROR_DESC': 'Could not connect to external wallet. Reasons can be:<br>' +
-                         '- Your External Wallet/daemon isn\'t running<br/>' +
+                         '- Your External Wallet/daemon isn\'t running<br>' +
-                         '- Your External Wallet/daemon is running, but iguana is not given command to connect to External Wallet/daemon<br/>' +
+                         '- Your External Wallet/daemon is running, but iguana is not given command to connect to External Wallet/daemon<br>' +
-                         '- Your External Wallet/daemon is setup, but is not setup with config settings like<br/>',
+                         '- Your External Wallet/daemon is setup, but is not setup with config settings like<br>',
       'ACTIVATING_CHAIN': 'Activating best chain',
-      'KMD_STARTED': 'Komodo daemon has been started and is processing.<br/>' +
+      'KMD_STARTED': 'Komodo daemon has been started and is processing.<br>' +
                      'Please wait while the best chain is being activated.',
       'CONNECTIONS': 'Connections',
       'TRANSPARENT_BALANCE': 'Transparent Balance',
@@ -170,8 +170,8 @@ export const _lang = {
       'WALLET_BACKUP': 'Wallet Backup',
       'FIAT_CURRENCY': 'Fiat Currency',
       'EXPORT_KEYS': 'Export Keys',
-      'ONLY_ACTIVE_WIF_KEYS': 'Only the active coin wallet wif keys will be shown here.<br/>' +
+      'ONLY_ACTIVE_WIF_KEYS': 'Only the active coin wallet wif keys will be shown here.<br>' +
-                              'If you don\'t see a wif key for the coin you are looking for please active it by adding it from EasyDEX Dashboard.<br/>' +
+                              'If you don\'t see a wif key for the coin you are looking for please active it by adding it from EasyDEX Dashboard.<br>' +
                               'You can use these wif keys to import to another coin wallets.',
       'PLEASE_KEEP_KEYS_SAFE': 'Please keep these keys extra safe and secure.',
       'PASSPHRASE': 'Passphrase',
@@ -205,6 +205,7 @@ export const _lang = {
       'SAVE_SELECTION': 'Save Selection',
       'LOAD_SELECTION': 'Load Selection',
       'ACTIVATE_ALL': 'Activate all',
+      'ADD_ANOTHER_COIN': 'Add another coin'
     },
     'JUMBLR': {
       'NOTICE': 'EXPERIMENTAL TEST VERSION ONLY',
@@ -369,6 +370,7 @@ export const _lang = {
       'SEED_MAKE_SURE_BACKUP': 'Make sure you have it backed up. Without this seed you won\'t be able to access your wallet in the future!',
       'YES_I_BACKUP': 'Yes, I have taken backup.',
       'WALLET_LOCKED_LOGIN': 'Wallet Locked. Please login.',
+      'CANCEL': 'Cancel',
       'UNLOCK': 'Unlock',
       'SIGN_IN': 'Sign In',
       'WELCOME': 'Welcome',
@@ -380,7 +382,10 @@ export const _lang = {
       'JUMBLR_MOTTO': 'Secure, Native and Decentralised Coin Anonymizer'
     },
     'SETTINGS': {
-      'PASSPHRASE_REQ': 'Passphrase is required.'
+      'PASSPHRASE_REQ': 'Passphrase is required.',
+      'SAVE_APP_CONFIG': 'Save app config',
+      'CONFIG_RESTART_REQUIRED': 'Most changes to app config require wallet restart!',
+      'APP_CONFIG': 'App Config',
     }
   }
 };