Browse Source

Merge pull request #115 from pbca26/redux

Redux
all-modes
pbca26 8 years ago
committed by GitHub
parent
commit
9fdacf5e23
  1. 13
      react/src/actions/actionCreators.js
  2. 169
      react/src/components/addcoin/addcoin.js
  3. 2
      react/src/components/dashboard/about.js
  4. 45
      react/src/components/dashboard/atomic.js
  5. 12
      react/src/components/dashboard/coinTile.js
  6. 24
      react/src/components/dashboard/coinTileItem.js
  7. 22
      react/src/components/dashboard/dashboard.js
  8. 2
      react/src/components/dashboard/edex.js
  9. 174
      react/src/components/dashboard/jumblr.js
  10. 41
      react/src/components/dashboard/loginModal.js
  11. 66
      react/src/components/dashboard/navbar.js
  12. 70
      react/src/components/dashboard/receiveCoin.js
  13. 250
      react/src/components/dashboard/sendCoin.js
  14. 337
      react/src/components/dashboard/settings.js
  15. 77
      react/src/components/dashboard/syncOnly.js
  16. 51
      react/src/components/dashboard/walletsBalance.js
  17. 19
      react/src/components/dashboard/walletsBasiliskConnection.js
  18. 17
      react/src/components/dashboard/walletsBasiliskRefresh.js
  19. 59
      react/src/components/dashboard/walletsCacheData.js
  20. 168
      react/src/components/dashboard/walletsData.js
  21. 2
      react/src/components/dashboard/walletsNativeSend.js
  22. 17
      react/src/components/dashboard/walletsNativeSyncProgress.js
  23. 19
      react/src/components/dashboard/walletsNativeTxHistory.js
  24. 45
      react/src/translate/en.js

13
react/src/actions/actionCreators.js

@ -2288,10 +2288,11 @@ function initNotaryNodesConSequence(nodes) {
// 'timeout': 60000 // 'timeout': 60000
}; };
console.log('initNotaryNodesConSequence', nodes);
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
fetch('http://127.0.0.1:' + Config.useBasiliskInstance ? Config.basiliskPort : Config.iguanaCorePort, { fetch('http://127.0.0.1:' + (Config.useBasiliskInstance ? Config.basiliskPort : Config.iguanaCorePort) + '/api/dex/getinfo?userpass=' + ('tmpIgRPCUser@' + sessionStorage.getItem('IguanaRPCAuth')) + '&symbol=' + node, {
method: 'POST', method: 'GET',
body: JSON.stringify(payload),
}) })
.catch(function(error) { .catch(function(error) {
console.log(error); console.log(error);
@ -2305,12 +2306,14 @@ function initNotaryNodesConSequence(nodes) {
} }
function updateNotaryNodeConState(json, totalNodes, currentNodeIndex, currentNodeName) { function updateNotaryNodeConState(json, totalNodes, currentNodeIndex, currentNodeName) {
console.log(currentNodeName, json);
if (currentNodeIndex === totalNodes - 1) { if (currentNodeIndex === totalNodes - 1) {
return dispatch => { return dispatch => {
dispatch(basiliskConnectionState(false)); dispatch(basiliskConnectionState(false));
}; };
} else { } else {
if (json && json.error === 'less than required responses') { if (json &&
json.error === 'less than required responses') {
return { return {
type: DASHBOARD_CONNECT_NOTARIES, type: DASHBOARD_CONNECT_NOTARIES,
total: totalNodes - 1, total: totalNodes - 1,
@ -2437,7 +2440,7 @@ export function connectNotaries() {
const payload = { const payload = {
'userpass': 'tmpIgRPCUser@' + sessionStorage.getItem('IguanaRPCAuth'), 'userpass': 'tmpIgRPCUser@' + sessionStorage.getItem('IguanaRPCAuth'),
'agent': 'dpow', 'agent': 'dpow',
'method': 'notarychains,', 'method': 'notarychains',
// 'immediate': 60000, // 'immediate': 60000,
// 'timeout': 60000 // 'timeout': 60000
}; };

169
react/src/components/addcoin/addcoin.js

@ -63,7 +63,7 @@ class AddCoin extends React.Component {
actionsMenu: false, actionsMenu: false,
})); }));
} else { } else {
Store.dispatch(triggerToaster(true, 'Local coin list is not found', 'Coin Selection', 'info')); Store.dispatch(triggerToaster(true, translate('TOASTR.SELECTION_NOT_FOUND'), translate('TOASTR.COIN_SELECTION'), 'info'));
} }
}.bind(this)); }.bind(this));
} }
@ -248,62 +248,120 @@ class AddCoin extends React.Component {
className="form-control form-material" className="form-control form-material"
name="selectedCoin" name="selectedCoin"
id="addcoin_select_coin_mdl_options-login" id="addcoin_select_coin_mdl_options-login"
value={_coin} value={ _coin }
onChange={(event) => this.updateSelectedCoin(event, i)}> onChange={ (event) => this.updateSelectedCoin(event, i) }>
<option>{translate('INDEX.SELECT')}</option> <option>{ translate('INDEX.SELECT') }</option>
<AddCoinOptionsCrypto /> <AddCoinOptionsCrypto />
<AddCoinOptionsAC /> <AddCoinOptionsAC />
<AddCoinOptionsACFiat /> <AddCoinOptionsACFiat />
</select> </select>
</div> </div>
</div> </div>
<div className={this.state.coins.length > 1 ? 'hide' : 'col-sm-4'}> <div className={ this.state.coins.length > 1 ? 'hide' : 'col-sm-4' }>
<button <button
type="button" type="button"
className="btn btn-primary mdl_addcoin_done_btn-login" className="btn btn-primary mdl_addcoin_done_btn-login"
id="mdl_addcoin_done_btn-login" id="mdl_addcoin_done_btn-login"
onClick={() => this.activateCoin(i)} onClick={ () => this.activateCoin(i) }
disabled={_item.mode === -2 }>{translate('INDEX.ACTIVATE_COIN')}</button> disabled={ _item.mode === -2 }>{ translate('INDEX.ACTIVATE_COIN') }</button>
</div> </div>
<div className="col-sm-12 text-center"> <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"> <div className="form-group col-lg-4 col-md-4 col-sm-6 col-xs-6 style-addcoin-lbl-mdl-login">
<input type="radio" className="to-labelauty labelauty" name={`mode-${i}`} id={`addcoin_mdl_full_mode_login-${i}`} disabled={_item.fullMode.disabled} checked={_item.fullMode.checked} /> <input
<label htmlFor={`addcoin_mdl_full_mode_login-${i}`} onClick={() => this.updateSelectedMode('1', i)} style={{ pointerEvents: _item.fullMode.disabled ? 'none' : 'all' }}> type="radio"
<span className="labelauty-unchecked-image" style={{ display: _item.fullMode.checked ? 'none' : 'inline-block' }}></span> className="to-labelauty labelauty"
<span className="labelauty-unchecked" style={{ display: _item.fullMode.checked ? 'none' : 'inline-block' }}>{translate('INDEX.FULL_MODE')}</span> name={ `mode-${i}` }
<span className="labelauty-checked-image" style={{ display: _item.fullMode.checked ? 'inline-block' : 'none' }}></span> id={ `addcoin_mdl_full_mode_login-${i}` }
<span className="labelauty-checked" style={{ display: _item.fullMode.checked ? 'inline-block' : 'none' }}>{translate('INDEX.FULL_MODE')}</span> disabled={ _item.fullMode.disabled }
checked={ _item.fullMode.checked } />
<label
htmlFor={ `addcoin_mdl_full_mode_login-${i}` }
onClick={ () => this.updateSelectedMode('1', i) }
style={{ pointerEvents: _item.fullMode.disabled ? 'none' : 'all' }}>
<span
className="labelauty-unchecked-image"
style={{ display: _item.fullMode.checked ? 'none' : 'inline-block' }}></span>
<span
className="labelauty-unchecked"
style={{ display: _item.fullMode.checked ? 'none' : 'inline-block' }}>{ translate('INDEX.FULL_MODE') }</span>
<span
className="labelauty-checked-image"
style={{ display: _item.fullMode.checked ? 'inline-block' : 'none' }}></span>
<span
className="labelauty-checked"
style={{ display: _item.fullMode.checked ? 'inline-block' : 'none' }}>{ translate('INDEX.FULL_MODE') }</span>
</label> </label>
</div> </div>
<div className="form-group col-lg-4 col-md-4 col-sm-6 col-xs-6 style-addcoin-lbl-mdl-login"> <div className="form-group col-lg-4 col-md-4 col-sm-6 col-xs-6 style-addcoin-lbl-mdl-login">
<input type="radio" className="to-labelauty labelauty" name={`mode-${i}`} id={`addcoin_mdl_basilisk_mode_login-${i}`} disabled={_item.basiliskMode.disabled} checked={_item.basiliskMode.checked} /> <input
<label htmlFor={`addcoin_mdl_basilisk_mode_login-${i}`} onClick={() => this.updateSelectedMode('0', i)} style={{ pointerEvents: _item.basiliskMode.disabled ? 'none' : 'all' }}> type="radio"
<span className="labelauty-unchecked-image" style={{ display: _item.basiliskMode.checked ? 'none' : 'inline-block' }}></span> className="to-labelauty labelauty"
<span className="labelauty-unchecked" style={{ display: _item.basiliskMode.checked ? 'none' : 'inline-block' }}>{translate('INDEX.BASILISK_MODE')}</span> name={ `mode-${i}` }
<span className="labelauty-checked-image" style={{ display: _item.basiliskMode.checked ? 'inline-block' : 'none' }}></span> id={ `addcoin_mdl_basilisk_mode_login-${i}` }
<span className="labelauty-checked" style={{ display: _item.basiliskMode.checked ? 'inline-block' : 'none' }}>{translate('INDEX.BASILISK_MODE')}</span> disabled={ _item.basiliskMode.disabled }
checked={ _item.basiliskMode.checked } />
<label
htmlFor={ `addcoin_mdl_basilisk_mode_login-${i}` }
onClick={ () => this.updateSelectedMode('0', i) }
style={{ pointerEvents: _item.basiliskMode.disabled ? 'none' : 'all' }}>
<span
className="labelauty-unchecked-image"
style={{ display: _item.basiliskMode.checked ? 'none' : 'inline-block' }}></span>
<span
className="labelauty-unchecked"
style={{ display: _item.basiliskMode.checked ? 'none' : 'inline-block' }}>{ translate('INDEX.BASILISK_MODE') }</span>
<span
className="labelauty-checked-image"
style={{ display: _item.basiliskMode.checked ? 'inline-block' : 'none' }}></span>
<span
className="labelauty-checked"
style={{ display: _item.basiliskMode.checked ? 'inline-block' : 'none' }}>{ translate('INDEX.BASILISK_MODE') }</span>
</label> </label>
</div> </div>
<div className="form-group col-lg-4 col-md-4 col-sm-12 col-xs-12 style-addcoin-lbl-mdl-login"> <div className="form-group col-lg-4 col-md-4 col-sm-12 col-xs-12 style-addcoin-lbl-mdl-login">
<input type="radio" className="to-labelauty labelauty" name={`mode-${i}`} id={`addcoin_mdl_native_mode_login-${i}`} disabled={_item.nativeMode.disabled} checked={_item.nativeMode.checked} /> <input
<label htmlFor={`addcoin_mdl_native_mode_login-${i}`} onClick={() => this.updateSelectedMode('-1', i)} style={{ pointerEvents: _item.nativeMode.disabled ? 'none' : 'all' }}> type="radio"
<span className="labelauty-unchecked-image" style={{ display: _item.nativeMode.checked ? 'none' : 'inline-block' }}></span> className="to-labelauty labelauty"
<span className="labelauty-unchecked" style={{ display: _item.nativeMode.checked ? 'none' : 'inline-block' }}>{translate('INDEX.NATIVE_MODE')}</span> name={ `mode-${i}` }
<span className="labelauty-checked-image" style={{ display: _item.nativeMode.checked ? 'inline-block' : 'none' }}></span> id={ `addcoin_mdl_native_mode_login-${i}` }
<span className="labelauty-checked" style={{ display: _item.nativeMode.checked ? 'inline-block' : 'none' }}>{translate('INDEX.NATIVE_MODE')}</span> disabled={ _item.nativeMode.disabled }
checked={ _item.nativeMode.checked } />
<label
htmlFor={ `addcoin_mdl_native_mode_login-${i}` }
onClick={ () => this.updateSelectedMode('-1', i) }
style={{ pointerEvents: _item.nativeMode.disabled ? 'none' : 'all' }}>
<span
className="labelauty-unchecked-image"
style={{ display: _item.nativeMode.checked ? 'none' : 'inline-block' }}></span>
<span
className="labelauty-unchecked"
style={{ display: _item.nativeMode.checked ? 'none' : 'inline-block' }}>{ translate('INDEX.NATIVE_MODE') }</span>
<span
className="labelauty-checked-image"
style={{ display: _item.nativeMode.checked ? 'inline-block' : 'none' }}></span>
<span
className="labelauty-checked"
style={{ display: _item.nativeMode.checked ? 'inline-block' : 'none' }}>{ translate('INDEX.NATIVE_MODE') }</span>
</label> </label>
</div> </div>
</div> </div>
<div className={this.state.coins.length > 1 && i !== 0 ? 'col-sm-1' : 'hide'}> <div className={ this.state.coins.length > 1 && i !== 0 ? 'col-sm-1' : 'hide' }>
<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.removeCoin(i)}> <button
type="button"
className="btn btn-primary mdl_addcoin_done_btn-login"
id="mdl_addcoin_done_btn-login"
onClick={ () => this.removeCoin(i) }>
<i className="fa fa-trash-o"></i> <i className="fa fa-trash-o"></i>
</button> </button>
</div> </div>
<div className={_item.mode === '1' || _item.mode === 1 ? 'col-sm-12' : 'hide'}> <div className={ _item.mode === '1' || _item.mode === 1 ? 'col-sm-12' : 'hide' }>
<div className="pull-left margin-right-10"> <div className="pull-left margin-right-10">
<input type="checkbox" id="addcoin_sync_only" data-plugin="switchery" data-size="small" checked={_item.syncOnly} /> <input type="checkbox" id="addcoin_sync_only" checked={ _item.syncOnly } />
</div> </div>
<label className="padding-top-3 padding-bottom-10" htmlFor="addcoin_sync_only" onClick={() => this.toggleSyncOnlyMode(i)}>{translate('ADD_COIN.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>
</div> </div>
); );
@ -316,7 +374,7 @@ class AddCoin extends React.Component {
return ( return (
<div> <div>
<div <div
className={'modal modal-3d-sign add-coin-modal ' + this.state.modalClassName} className={ 'modal modal-3d-sign add-coin-modal ' + this.state.modalClassName }
id="AddCoinDilogModel-login" id="AddCoinDilogModel-login"
aria-hidden="true" aria-hidden="true"
aria-labelledby="AddCoinDilogModel-login" aria-labelledby="AddCoinDilogModel-login"
@ -325,51 +383,60 @@ class AddCoin extends React.Component {
<div className="modal-dialog modal-center modal-lg"> <div className="modal-dialog modal-center modal-lg">
<div className="modal-content"> <div className="modal-content">
<div className="modal-header bg-orange-a400 wallet-send-header"> <div className="modal-header bg-orange-a400 wallet-send-header">
<button type="button" className="close white" data-dismiss="modal" aria-label="Close" onClick={this.dismiss}> <button
type="button"
className="close white"
aria-label="Close" onClick={ this.dismiss }>
<span aria-hidden="true">×</span> <span aria-hidden="true">×</span>
</button> </button>
<h4 className="modal-title white">{translate('INDEX.SELECT_A_COIN')}</h4> <h4 className="modal-title white">{ translate('INDEX.SELECT_A_COIN') }</h4>
</div> </div>
<div className="modal-body"> <div className="modal-body">
<button className="btn btn-primary btn-add-coin-item" onClick={this.addNewItem}>+</button> <button className="btn btn-primary btn-add-coin-item" onClick={ this.addNewItem }>+</button>
<button className="btn btn-outline-primary btn-add-coin-item-options" onClick={this.toggleActionsMenu}> <button className="btn btn-outline-primary btn-add-coin-item-options" onClick={ this.toggleActionsMenu }>
<i className={this.state.actionsMenu ? 'fa-chevron-up' : 'fa-chevron-down' }></i> <i className={ this.state.actionsMenu ? 'fa-chevron-up' : 'fa-chevron-down' }></i>
</button> </button>
<span className={!this.state.actionsMenu ? 'hide' : ''}> <span className={ !this.state.actionsMenu ? 'hide' : '' }>
<button className="btn btn-outline-primary btn-save-coin-selection" onClick={this.saveCoinSelection}>{translate('ADD_COIN.SAVE_SELECTION')}</button> <button
<button className="btn btn-outline-primary btn-load-coin-selection" onClick={this.loadCoinSelection}>{translate('ADD_COIN.LOAD_SELECTION')}</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> </span>
{this.renderCoinSelectors()} { this.renderCoinSelectors() }
<div className={this.state.coins.length > 1 ? 'col-sm-12' : 'hide'} style={{textAlign: 'center', margin: '20px 0'}}> <div
className={ this.state.coins.length > 1 ? 'col-sm-12' : 'hide' }
style={{ textAlign: 'center', margin: '20px 0' }}>
<button <button
type="button" type="button"
className="btn btn-primary col-sm-4" className="btn btn-primary col-sm-4"
style={{float: 'none'}} style={{ float: 'none' }}
data-toggle="modal"
data-dismiss="modal"
id="mdl_addcoin_done_btn-login" id="mdl_addcoin_done_btn-login"
onClick={this.activateAllCoins}>{translate('ADD_COIN.ACTIVATE_ALL')}</button> onClick={ this.activateAllCoins }>{ translate('ADD_COIN.ACTIVATE_ALL') }</button>
</div> </div>
<div className="col-sm-12"> <div className="col-sm-12">
<p> <p>
<strong>{translate('INDEX.FULL_MODE')}:</strong> {translate('INDEX.FULL_MODE_DESC')} <strong>{ translate('INDEX.FULL_MODE') }:</strong> { translate('INDEX.FULL_MODE_DESC') }
</p> </p>
<p> <p>
<strong>{translate('INDEX.BASILISK_MODE')}:</strong> {translate('INDEX.BASILISK_MODE_DESC')} <strong>{ translate('INDEX.BASILISK_MODE') }:</strong> { translate('INDEX.BASILISK_MODE_DESC') }
</p> </p>
<p> <p>
<strong>{translate('INDEX.NATIVE_MODE')}:</strong> {translate('INDEX.NATIVE_MODE_DESC1')} <strong>Komodo Daemon</strong> {translate('INDEX.NATIVE_MODE_DESC2')} <i>Iguana Daemon</i> {translate('INDEX.NATIVE_MODE_DESC3')}. <strong>{ translate('INDEX.NATIVE_MODE') }:</strong> { translate('INDEX.NATIVE_MODE_DESC1') } <strong>Komodo Daemon</strong> { translate('INDEX.NATIVE_MODE_DESC2') } <i>Iguana Daemon</i> { translate('INDEX.NATIVE_MODE_DESC3') }.
</p> </p>
<div className="alert alert-icon alert-primary" role="alert"> <div className="alert alert-icon alert-primary" role="alert">
<button type="button" className="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button> <button type="button" className="close" aria-label="Close">
<i className="icon md-info-outline" aria-hidden="true"></i> <strong>{translate('INDEX.NATIVE_MODE')}</strong> {translate('INDEX.NATIVE_MODE_DESC4')} <strong>{translate('INDEX.NATIVE_MODE_DESC5')}</strong>, <i>{translate('INDEX.NATIVE_MODE_DESC5')}</i>. <span aria-hidden="true">×</span>
</button>
<i className="icon md-info-outline" aria-hidden="true"></i> <strong>{ translate('INDEX.NATIVE_MODE') }</strong> { translate('INDEX.NATIVE_MODE_DESC4') } <strong>{ translate('INDEX.NATIVE_MODE_DESC5') }</strong>, <i>{ translate('INDEX.NATIVE_MODE_DESC5') }</i>.
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div className={'modal-backdrop ' + (this.state.display ? 'show in' : 'fade hide')}></div> <div className={ 'modal-backdrop ' + (this.state.display ? 'show in' : 'fade hide') }></div>
</div> </div>
); );
} }

2
react/src/components/dashboard/about.js

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

45
react/src/components/dashboard/atomic.js

@ -481,34 +481,51 @@ class Atomic extends React.Component {
render() { render() {
return ( return (
<div className="page" style={{marginLeft: '0'}}> <div className="page" style={{ marginLeft: '0' }}>
<div className="page-content" id="section-iguana-atomic-explorer"> <div className="page-content" id="section-iguana-atomic-explorer">
<div className="row" id="atomic-explorer" data-plugin="masonry"> <div className="row" id="atomic-explorer">
<div className="col-xlg-12 col-md-12"> <div className="col-xlg-12 col-md-12">
<h4 className="font-size-14 text-uppercase">Atomic Explorer</h4> <h4 className="font-size-14 text-uppercase">Atomic Explorer</h4>
<div className="panel panel-bordered"> <div className="panel panel-bordered">
<div className="panel-body"> <div className="panel-body">
<div className="col-sm-4 col-xs-12"> <div className="col-sm-4 col-xs-12">
<div className="form-group"> <div className="form-group">
<select className="form-control form-material" id="atomic_explorer_select_coin_options" onChange={this.updateSelectedCoin}> <select
<option value="-">{translate('INDEX.SELECT_COIN')}</option> className="form-control
form-material"
id="atomic_explorer_select_coin_options"
onChange={ this.updateSelectedCoin }>
<option value="-">{ translate('INDEX.SELECT_COIN') }</option>
<AddCoinOptionsCrypto /> <AddCoinOptionsCrypto />
<AddCoinOptionsAC /> <AddCoinOptionsAC />
<AddCoinOptionsACFiat /> <AddCoinOptionsACFiat />
</select> </select>
</div> </div>
</div> </div>
<div className="col-sm-4 col-xs-12" style={{textAlign: 'center'}}> <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}> <select
<option value="">-{translate('ATOMIC.SELECT_COMMAND')}-</option> className="form-control form-material"
{this.renderAtomicOptions()} id="atomic_explorer_select_command_options"
onChange={this.updateSelectedAPI}>
<option value="">-{ translate('ATOMIC.SELECT_COMMAND') }-</option>
{ this.renderAtomicOptions() }
</select> </select>
</div> </div>
<div className="col-sm-4 col-xs-12" style={{textAlign: 'center'}}> <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={translate('ATOMIC.INPUT_PLACEHOLDER')} 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>
<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" id="atomic_explorer_getcoinpeers_btn" onClick={this.getAtomicData}>{translate('ATOMIC.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> </div>
</div> </div>
@ -516,11 +533,11 @@ class Atomic extends React.Component {
<div className="col-xlg-4 col-md-12"> <div className="col-xlg-4 col-md-12">
<div className="panel"> <div className="panel">
<div className="panel-heading"> <div className="panel-heading">
<h3 className="panel-title">{translate('ATOMIC.RAW_OUTPUT')}</h3> <h3 className="panel-title">{ translate('ATOMIC.RAW_OUTPUT') }</h3>
</div> </div>
<div className="panel-body"> <div className="panel-body">
<div className="tab-content"> <div className="tab-content">
<pre id="atomic-explorer-commands-output">{this.state.output}</pre> <pre id="atomic-explorer-commands-output">{ this.state.output }</pre>
</div> </div>
</div> </div>
</div> </div>

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

@ -338,19 +338,19 @@ class CoinTile extends React.Component {
return ( return (
items.map((item, i) => items.map((item, i) =>
<CoinTileItem key={i} i={i} item={item} {...this.props} />) <CoinTileItem key={ i } i={ i } item={ item } {...this.props} />)
); );
} }
render() { render() {
return ( return (
<div className="page-aside" style={{paddingTop: '80px'}}> <div className="page-aside" style={{ paddingTop: '80px' }}>
<div className="page-aside-switch"> <div className="page-aside-switch">
<i className="icon md-chevron-left" aria-hidden="true"></i> <i className="icon md-chevron-left" aria-hidden="true"></i>
<i className="icon md-chevron-right" aria-hidden="true"></i> <i className="icon md-chevron-right" aria-hidden="true"></i>
</div> </div>
<div className="page-aside-inner"> <div className="page-aside-inner">
<div className="search-wallet-widgets panel" style={{display: 'none'}}> <div className="search-wallet-widgets panel" style={{ display: 'none' }}>
<div className="panel-heading"> <div className="panel-heading">
<div className="panel-actions"> <div className="panel-actions">
<div className="input-search input-group-sm"> <div className="input-search input-group-sm">
@ -360,14 +360,14 @@ class CoinTile extends React.Component {
<input type="text" className="form-control" name="" placeholder="Search..." disabled /> <input type="text" className="form-control" name="" placeholder="Search..." disabled />
</div> </div>
</div> </div>
<h3 className="panel-title">{translate('INDEX.ACTIVE_COINS')}</h3> <h3 className="panel-title">{ translate('INDEX.ACTIVE_COINS') }</h3>
</div> </div>
</div> </div>
<div className="wallet-widgets-list" data-plugin="pageAsideScroll"> <div className="wallet-widgets-list">
<div data-role="container"> <div data-role="container">
<div data-role="content"> <div data-role="content">
<div className="list-group row wallet-widgets-row"> <div className="list-group row wallet-widgets-row">
{this.renderTiles()} { this.renderTiles() }
</div> </div>
</div> </div>
</div> </div>

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

@ -65,7 +65,10 @@ class CoinTileItem extends React.Component {
Store.dispatch(getKMDAddressesNative(coin, mode, useAddress)); Store.dispatch(getKMDAddressesNative(coin, mode, useAddress));
Store.dispatch(getShepherdCache(JSON.parse(sessionStorage.getItem('IguanaActiveAccount')).pubkey, coin)); Store.dispatch(getShepherdCache(JSON.parse(sessionStorage.getItem('IguanaActiveAccount')).pubkey, coin));
if (this.props && this.props.Dashboard && this.props.Dashboard.activeHandle && this.props.Dashboard.activeHandle[coin]) { if (this.props &&
this.props.Dashboard &&
this.props.Dashboard.activeHandle &&
this.props.Dashboard.activeHandle[coin]) {
if (!this.props.ActiveCoin.addresses) { if (!this.props.ActiveCoin.addresses) {
Store.dispatch(getAddressesByAccount(coin, mode)); Store.dispatch(getAddressesByAccount(coin, mode));
} }
@ -134,14 +137,19 @@ class CoinTileItem extends React.Component {
const { item } = this.props; const { item } = this.props;
return ( return (
<div className="list-group-item col-xlg-6 col-lg-12 wallet-widgets-info" data-edexcoincode="{item.coin}"> <div className="list-group-item col-xlg-6 col-lg-12 wallet-widgets-info">
<div className={this.props.ActiveCoin.coin === item.coin ? 'widget widget-shadow active' : 'widget widget-shadow'}> <div className={ this.props.ActiveCoin.coin === item.coin ? 'widget widget-shadow active' : 'widget widget-shadow' }>
<div className="widget-content text-center bg-white padding-20 edexcoin-logo" data-edexcoincode="{item.coin}" data-edexcoinmodecode="{item.modecode}" data-edexcoinname="{item.coinname}" onClick={() => this.dashboardChangeActiveCoin(item.coin, item.mode)}> <div
<a className="avatar margin-bottom-5" href="javascript:void(0)" id="edexcoin-logo"> className="widget-content text-center bg-white padding-20 edexcoin-logo"
<img className="img-responsive" src={'assets/images/cryptologo/' + item.coinlogo + '.png'} alt="{item.coinname}"/> onClick={ () => this.dashboardChangeActiveCoin(item.coin, item.mode) }>
<span className={'badge up badge-' + item.modecolor} id="basfull" data-edexcoincode="{item.coin}" data-toggle="tooltip" data-placement="top" data-original-title="{item.modetip}">{item.modecode}</span> <a className="avatar margin-bottom-5" id="edexcoin-logo">
<img
className="img-responsive"
src={ 'assets/images/cryptologo/' + item.coinlogo + '.png' }
alt={ item.coinname }/>
<span className={ 'badge up badge-' + item.modecolor } id="basfull">{ item.modecode }</span>
</a> </a>
<div className="coin-name">{item.coinname} ({item.coinlogo.toUpperCase()})</div> <div className="coin-name">{ item.coinname } ({ item.coinlogo.toUpperCase() })</div>
</div> </div>
</div> </div>
</div> </div>

22
react/src/components/dashboard/dashboard.js

@ -29,10 +29,12 @@ class Dashboard extends React.Component {
document.body.className = ''; document.body.className = '';
return ( return (
<div style={{height: '100%'}}> <div style={{ height: '100%' }}>
<div className={this.props.Dashboard.activeSection === 'wallets' ? 'page-main' : ''} id="section-dashboard" data-edexcoin="COIN"> <div
className={ this.props.Dashboard.activeSection === 'wallets' ? 'page-main' : '' }
id="section-dashboard">
<Navbar {...this.props} /> <Navbar {...this.props} />
<div className={this.props.Dashboard.activeSection === 'wallets' ? 'show' : 'hide'}> <div className={ this.props.Dashboard.activeSection === 'wallets' ? 'show' : 'hide' }>
<CoinTile {...this.props} /> <CoinTile {...this.props} />
<WalletsNav {...this.props} /> <WalletsNav {...this.props} />
<WalletsProgress {...this.props} /> <WalletsProgress {...this.props} />
@ -44,19 +46,19 @@ class Dashboard extends React.Component {
<WalletsNative {...this.props} /> <WalletsNative {...this.props} />
<WalletsNativeTxInfo {...this.props} /> <WalletsNativeTxInfo {...this.props} />
</div> </div>
<div className={this.props.Dashboard.activeSection === 'edex' ? 'show' : 'hide'}> <div className={ this.props.Dashboard.activeSection === 'edex' ? 'show' : 'hide' }>
<EDEX {...this.props} /> <EDEX {...this.props} />
</div> </div>
<div className={this.props.Dashboard.activeSection === 'atomic' ? 'show' : 'hide'}> <div className={ this.props.Dashboard.activeSection === 'atomic' ? 'show' : 'hide' }>
<Atomic {...this.props} /> <Atomic {...this.props} />
</div> </div>
<div className={this.props.Dashboard.activeSection === 'jumblr' ? 'show' : 'hide'}> <div className={ this.props.Dashboard.activeSection === 'jumblr' ? 'show' : 'hide' }>
<Jumblr {...this.props} /> <Jumblr {...this.props} />
</div> </div>
<div className={this.props.Dashboard.activeSection === 'settings' ? 'show' : 'hide'}> <div className={ this.props.Dashboard.activeSection === 'settings' ? 'show' : 'hide' }>
<Settings {...this.props} /> <Settings {...this.props} />
</div> </div>
<div className={this.props.Dashboard.activeSection === 'about' ? 'show' : 'hide'}> <div className={ this.props.Dashboard.activeSection === 'about' ? 'show' : 'hide' }>
<About {...this.props} /> <About {...this.props} />
</div> </div>
</div> </div>
@ -65,7 +67,9 @@ class Dashboard extends React.Component {
} }
render() { render() {
if (this.props && this.props.Main && this.props.Main.isLoggedIn) { if (this.props &&
this.props.Main &&
this.props.Main.isLoggedIn) {
return this.renderDashboard(); return this.renderDashboard();
} else { } else {
return null; return null;

2
react/src/components/dashboard/edex.js

@ -4,7 +4,7 @@ import { translate } from '../../translate/translate';
class EDEX extends React.Component { class EDEX extends React.Component {
render() { render() {
return ( return (
<div className="page" data-animsition-in="fade-in" data-animsition-out="fade-out" style={{marginLeft: '0px'}}> <div className="page" style={{ marginLeft: '0px' }}>
<div className="page-content" id="section-easydex"> <div className="page-content" id="section-easydex">
<h2>Coming Soon!</h2> <h2>Coming Soon!</h2>
</div> </div>

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

@ -30,19 +30,19 @@ class Jumblr extends React.Component {
render() { render() {
return ( 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-jumblr"> <div className="page-content" id="section-jumblr">
<div className="row" id="jumblr_dashboard" data-plugin="masonry"> <div className="row" id="jumblr_dashboard">
<div className="col-xs-12" id="jumblr_testing_alert"> <div className="col-xs-12" id="jumblr_testing_alert">
<div className="alert alert-danger" role="alert"> <div className="alert alert-danger" role="alert">
<button type="button" className="close" data-dismiss="alert" aria-label="Close"> <button type="button" className="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span> <span aria-hidden="true">×</span>
</button> </button>
<span style={{fontSize: '24px', textAlign: 'center'}}> <span style={{ fontSize: '24px', textAlign: 'center' }}>
<i className="icon fa-paw" aria-hidden="true"></i> {translate('JUMBLR.NOTICE')} <i className="icon fa-paw" aria-hidden="true"></i> { translate('JUMBLR.NOTICE') }
</span> </span>
<br /> <br />
{translate('JUMBLR.DESCRIPTION')} { translate('JUMBLR.DESCRIPTION') }
</div> </div>
</div> </div>
@ -51,91 +51,119 @@ class Jumblr extends React.Component {
<button type="button" className="close" data-dismiss="alert" aria-label="Close"> <button type="button" className="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span> <span aria-hidden="true">×</span>
</button> </button>
<span style={{fontSize: '24px', textAlign: 'center'}}> <span style={{ fontSize: '24px', textAlign: 'center' }}>
<i className="icon fa-paw" aria-hidden="true"></i> {translate('JUMBLR.NEED_NATIVE')} <i className="icon fa-paw" aria-hidden="true"></i> { translate('JUMBLR.NEED_NATIVE') }
</span> </span>
<br /> <br />
{translate('JUMBLR.TO_USE_JUMBLR')} { translate('JUMBLR.TO_USE_JUMBLR') }
<br /> <br />
{translate('JUMBLR.IF_YOU_ALREADY_RUNNING')} { translate('JUMBLR.IF_YOU_ALREADY_RUNNING') }
</div> </div>
</div> </div>
<div className="col-xlg-12 col-md-12"> <div className="col-xlg-12 col-md-12">
<p>{translate('JUMBLR.THIS_SCREEN_DOESNT_REFRESH')}</p> <p>{ translate('JUMBLR.THIS_SCREEN_DOESNT_REFRESH') }</p>
</div> </div>
<div className="col-xs-12"> <div className="col-xs-12">
<div className="panel-group" id="jumber_quick_info" aria-multiselectable="true" role="tablist"> <div className="panel-group" id="jumber_quick_info" aria-multiselectable="true" role="tablist">
<div className="panel"> <div className="panel">
<div className="panel-heading" id="jumblr_security_notes" role="tab" onClick={() => this.openTab(0)}> <div
<a className={this.state.activeTab === 0 ? 'panel-title' : 'panel-title collapsed'} data-toggle="collapse" data-parent="#jumber_quick_info" aria-expanded="true" aria-controls="jumblr_security_notes_1">{translate('JUMBLR.FEW_SECURITY_NOTES')}</a> className="panel-heading"
id="jumblr_security_notes"
role="tab"
onClick={ () => this.openTab(0) }>
<a
className={ this.state.activeTab === 0 ? 'panel-title' : 'panel-title collapsed' }
aria-expanded="true"
aria-controls="jumblr_security_notes_1">{ translate('JUMBLR.FEW_SECURITY_NOTES') }</a>
</div> </div>
<div className={this.state.activeTab === 0 ? 'panel-collapse collapse in' : 'panel-collapse collapse'} id="jumblr_security_notes_1" aria-labelledby="jumblr_security_notes" role="tabpanel"> <div
className={ this.state.activeTab === 0 ? 'panel-collapse collapse in' : 'panel-collapse collapse' }
id="jumblr_security_notes_1"
aria-labelledby="jumblr_security_notes"
role="tabpanel">
<div className="panel-body"> <div className="panel-body">
<ul> <ul>
<li>{translate('JUMBLR.FEW_SECURITY_NOTES_DESC1')}</li> <li>{ translate('JUMBLR.FEW_SECURITY_NOTES_DESC1') }</li>
<li>{translate('JUMBLR.FEW_SECURITY_NOTES_DESC2')}</li> <li>{ translate('JUMBLR.FEW_SECURITY_NOTES_DESC2') }</li>
<li>{translate('JUMBLR.FEW_SECURITY_NOTES_DESC3')}</li> <li>{ translate('JUMBLR.FEW_SECURITY_NOTES_DESC3') }</li>
<li>{translate('JUMBLR.FEW_SECURITY_NOTES_DESC4')}</li> <li>{ translate('JUMBLR.FEW_SECURITY_NOTES_DESC4') }</li>
<li>{translate('JUMBLR.FEW_SECURITY_NOTES_DESC5')}</li> <li>{ translate('JUMBLR.FEW_SECURITY_NOTES_DESC5') }</li>
</ul> </ul>
</div> </div>
</div> </div>
</div> </div>
<div className="panel"> <div className="panel">
<div className="panel-heading" id="jumblr_access_funds" role="tab" onClick={() => this.openTab(1)}> <div
<a className={this.state.activeTab === 1 ? 'panel-title' : 'panel-title collapsed'} data-toggle="collapse" data-parent="#jumber_quick_info" aria-expanded="false" aria-controls="jumblr_access_funds_2">{translate('JUMBLR.ACCESS_JUMBLR_FUNDS')}</a> className="panel-heading"
id="jumblr_access_funds"
role="tab"
onClick={ () => this.openTab(1) }>
<a
className={ this.state.activeTab === 1 ? 'panel-title' : 'panel-title collapsed' }
aria-expanded="false"
aria-controls="jumblr_access_funds_2">{ translate('JUMBLR.ACCESS_JUMBLR_FUNDS') }</a>
</div> </div>
<div className={this.state.activeTab === 1 ? 'panel-collapse collapse in' : 'panel-collapse collapse'} id="jumblr_access_funds_2" aria-labelledby="jumblr_access_funds" role="tabpanel"> <div
className={ this.state.activeTab === 1 ? 'panel-collapse collapse in' : 'panel-collapse collapse' }
id="jumblr_access_funds_2"
aria-labelledby="jumblr_access_funds"
role="tabpanel">
<div className="panel-body"> <div className="panel-body">
<p>{translate('JUMBLR.ADDRESS_ACCESSIBLE_EASILY')}</p> <p>{ translate('JUMBLR.ADDRESS_ACCESSIBLE_EASILY') }</p>
<ul> <ul>
<code>duck dog cat donkey</code> <code>duck dog cat donkey</code>
</ul> </ul>
<ol> <ol>
<li>{translate('JUMBLR.TO_ACCESS')}</li> <li>{ translate('JUMBLR.TO_ACCESS') }</li>
<li>{translate('JUMBLR.CLOSE_IAPP')}</li> <li>{ translate('JUMBLR.CLOSE_IAPP') }</li>
<li>{translate('JUMBLR.START_IAPP')}</li> <li>{ translate('JUMBLR.START_IAPP') }</li>
<li>{translate('JUMBLR.START_KMD')}</li> <li>{ translate('JUMBLR.START_KMD') }</li>
<li>{translate('JUMBLR.ACCESS_JUMBLR_FUNDS')} <li>{ translate('JUMBLR.ACCESS_JUMBLR_FUNDS') }
<ul> <ul>
<li>{translate('JUMBLR.SMALL_LETTERS')}</li> <li>{ translate('JUMBLR.SMALL_LETTERS') }</li>
<li>{translate('JUMBLR.WHITE_SPACE')}</li> <li>{ translate('JUMBLR.WHITE_SPACE') }</li>
</ul> </ul>
</li> </li>
<li> <li>
{translate('JUMBLR.PER_EXAMPLE')} { translate('JUMBLR.PER_EXAMPLE') }
<br /> <br />
<code>jumblr duck dog cat donkey</code> <code>jumblr duck dog cat donkey</code>
</li> </li>
<li>{translate('JUMBLR.LOGIN_WITH_JUMBLR')}</li> <li>{ translate('JUMBLR.LOGIN_WITH_JUMBLR') }</li>
</ol> </ol>
<h4>{translate('JUMBLR.AGAIN_DONT_SHARE')}</h4> <h4>{ translate('JUMBLR.AGAIN_DONT_SHARE') }</h4>
</div> </div>
</div> </div>
</div> </div>
<div className="panel"> <div className="panel">
<div className="panel-heading" id="jumblr_using_jumblr" role="tab" onClick={() => this.openTab(2)}> <div className="panel-heading" id="jumblr_using_jumblr" role="tab" onClick={ () => this.openTab(2) }>
<a className={this.state.activeTab === 2 ? 'panel-title' : 'panel-title collapsed'} data-toggle="collapse" data-parent="#jumber_quick_info" aria-expanded="false" aria-controls="jumblr_using_jumblr_3">{translate('JUMBLR.USING_JUMBLR')}</a> <a
className={ this.state.activeTab === 2 ? 'panel-title' : 'panel-title collapsed' }
aria-expanded="false"
aria-controls="jumblr_using_jumblr_3">{ translate('JUMBLR.USING_JUMBLR') }</a>
</div> </div>
<div className={this.state.activeTab === 2 ? 'panel-collapse collapse in' : 'panel-collapse collapse'} id="jumblr_using_jumblr_3" aria-labelledby="jumblr_using_jumblr" <div
role="tabpanel"> className={ this.state.activeTab === 2 ? 'panel-collapse collapse in' : 'panel-collapse collapse' }
id="jumblr_using_jumblr_3"
aria-labelledby="jumblr_using_jumblr"
role="tabpanel">
<div className="panel-body"> <div className="panel-body">
<ul> <ul>
<li>{translate('JUMBLR.RUN_KMD')}</li> <li>{ translate('JUMBLR.RUN_KMD') }</li>
<li>{translate('JUMBLR.LOGIN_KMD')}</li> <li>{ translate('JUMBLR.LOGIN_KMD') }</li>
<li>{translate('JUMBLR.GO_TO')}</li> <li>{ translate('JUMBLR.GO_TO') }</li>
<li>{translate('JUMBLR.FIND_DEPOSIT_ADDR')}</li> <li>{ translate('JUMBLR.FIND_DEPOSIT_ADDR') }</li>
<li>{translate('JUMBLR.YOU_SEND_FUNDS')}</li> <li>{ translate('JUMBLR.YOU_SEND_FUNDS') }</li>
<li>{translate('JUMBLR.KEEP_WALLET_OPEN')}</li> <li>{ translate('JUMBLR.KEEP_WALLET_OPEN') }</li>
<li>{translate('JUMBLR.IMPORTANT_FUNDS')}</li> <li>{ translate('JUMBLR.IMPORTANT_FUNDS') }</li>
<li>{translate('JUMBLR.LARGE_LOT')}</li> <li>{ translate('JUMBLR.LARGE_LOT') }</li>
</ul> </ul>
<p>{this.renderLB('JUMBLR.EG')}</p> <p>{ this.renderLB('JUMBLR.EG') }</p>
<p>{translate('JUMBLR.93_KMD')}</p> <p>{ translate('JUMBLR.93_KMD') }</p>
<p>{translate('JUMBLR.TO_CLEAR_THEM')}</p> <p>{ translate('JUMBLR.TO_CLEAR_THEM') }</p>
<p>{translate('JUMBLR.WHEN_IT_TOTALS')}</p> <p>{ translate('JUMBLR.WHEN_IT_TOTALS') }</p>
</div> </div>
</div> </div>
</div> </div>
@ -143,13 +171,13 @@ class Jumblr extends React.Component {
</div> </div>
<div className="col-xlg-12 col-md-12"> <div className="col-xlg-12 col-md-12">
<h4 className="font-size-14 text-uppercase">{translate('JUMBLR.JADDR')}</h4> <h4 className="font-size-14 text-uppercase">{ translate('JUMBLR.JADDR') }</h4>
<div className="panel" id="projects"> <div className="panel" id="projects">
<div className="table-responsive"> <div className="table-responsive">
<table className="table table-striped"> <table className="table table-striped">
<tbody> <tbody>
<tr> <tr>
<td width="20%">{translate('JUMBLR.BTC_DEPOSIT')}</td> <td width="20%">{ translate('JUMBLR.BTC_DEPOSIT') }</td>
<td> <td>
<span id="jumblr_BTCdeposit"></span> <span id="jumblr_BTCdeposit"></span>
</td> </td>
@ -157,15 +185,20 @@ class Jumblr extends React.Component {
<tr> <tr>
<td>BTC Jumblr</td> <td>BTC Jumblr</td>
<td> <td>
<button type="button" className="btn btn-animate btn-animate-side btn-default btn-sm waves-effect waves-light jumblr_show_hide_addr_btc_btn" data-jumblr="BTCjumblr"> <button type="button" className="btn btn-animate btn-animate-side btn-default btn-sm waves-effect waves-light jumblr_show_hide_addr_btc_btn">
<span><i className="icon fa-eye" aria-hidden="true"></i> {translate('JUMBLR.SHOW_HIDE')}</span> <span><i className="icon fa-eye" aria-hidden="true"></i> { translate('JUMBLR.SHOW_HIDE') }</span>
</button> </button>
<span className="label label-lg label-outline label-success" id="jumblr_BTCjumblr" style={{display: 'none'}}></span> <span
<span className="label label-lg label-outline label-default" id="jumblr_BTCjumblr_showhide">{translate('JUMBLR.HIDDEN')}</span> className="label label-lg label-outline label-success"
id="jumblr_BTCjumblr"
style={{ display: 'none' }}></span>
<span
className="label label-lg label-outline label-default"
id="jumblr_BTCjumblr_showhide">{ translate('JUMBLR.HIDDEN') }</span>
</td> </td>
</tr> </tr>
<tr> <tr>
<td>{translate('JUMBLR.KMD_DEPOSIT')}</td> <td>{ translate('JUMBLR.KMD_DEPOSIT') }</td>
<td> <td>
<span id="jumblr_KMDdeposit"></span> <span id="jumblr_KMDdeposit"></span>
</td> </td>
@ -173,11 +206,18 @@ class Jumblr extends React.Component {
<tr> <tr>
<td>KMD Jumblr</td> <td>KMD Jumblr</td>
<td> <td>
<button type="button" className="btn btn-animate btn-animate-side btn-default btn-sm waves-effect waves-light jumblr_show_hide_addr_kmd_btn" data-jumblr="KMDjumblr"> <button type="button" className="btn btn-animate btn-animate-side btn-default btn-sm waves-effect waves-light jumblr_show_hide_addr_kmd_btn">
<span><i className="icon fa-eye" aria-hidden="true"></i> {translate('JUMBLR.SHOW_HIDE')}</span> <span>
<i className="icon fa-eye" aria-hidden="true"></i> { translate('JUMBLR.SHOW_HIDE') }
</span>
</button> </button>
<span className="label label-lg label-outline label-success" id="jumblr_KMDjumblr" style={{display: 'none'}}></span> <span
<span className="label label-lg label-outline label-default" id="jumblr_KMDjumblr_showhide">{translate('JUMBLR.HIDDEN')}</span> className="label label-lg label-outline label-success"
id="jumblr_KMDjumblr"
style={{ display: 'none' }}></span>
<span
className="label label-lg label-outline label-default"
id="jumblr_KMDjumblr_showhide">{ translate('JUMBLR.HIDDEN') }</span>
</td> </td>
</tr> </tr>
</tbody> </tbody>
@ -187,49 +227,49 @@ class Jumblr extends React.Component {
</div> </div>
<div className="col-xlg-12 col-md-12"> <div className="col-xlg-12 col-md-12">
<h4 className="font-size-14 text-uppercase">{translate('JUMBLR.JSTATUS')}</h4> <h4 className="font-size-14 text-uppercase">{ translate('JUMBLR.JSTATUS') }</h4>
<div className="panel" id="projects"> <div className="panel" id="projects">
<div className="table-responsive"> <div className="table-responsive">
<table className="table table-striped"> <table className="table table-striped">
<tbody> <tbody>
<tr> <tr>
<td width="20%">{translate('JUMBLR.RESULT')}</td> <td width="20%">{ translate('JUMBLR.RESULT') }</td>
<td> <td>
<span id="jumblr_status_result" className="label label-success"></span> <span id="jumblr_status_result" className="label label-success"></span>
</td> </td>
</tr> </tr>
<tr> <tr>
<td>{translate('JUMBLR.DEPOSITED')}</td> <td>{ translate('JUMBLR.DEPOSITED') }</td>
<td> <td>
<span id="jumblr_status_deposited"></span> <span id="jumblr_status_deposited"></span>
</td> </td>
</tr> </tr>
<tr> <tr>
<td>{translate('JUMBLR.PUB_TO_PRIV')}</td> <td>{ translate('JUMBLR.PUB_TO_PRIV') }</td>
<td> <td>
<span id="jumblr_status_t_to_z"></span> <span id="jumblr_status_t_to_z"></span>
</td> </td>
</tr> </tr>
<tr> <tr>
<td>{translate('JUMBLR.PRIV_TO_PRIV')}</td> <td>{ translate('JUMBLR.PRIV_TO_PRIV') }</td>
<td> <td>
<span id="jumblr_status_z_to_z"></span> <span id="jumblr_status_z_to_z"></span>
</td> </td>
</tr> </tr>
<tr> <tr>
<td>{translate('JUMBLR.PRIV_TO_PUB')}</td> <td>{ translate('JUMBLR.PRIV_TO_PUB') }</td>
<td> <td>
<span id="jumblr_status_z_to_t"></span> <span id="jumblr_status_z_to_t"></span>
</td> </td>
</tr> </tr>
<tr> <tr>
<td>{translate('JUMBLR.FINISHED')}</td> <td>{ translate('JUMBLR.FINISHED') }</td>
<td> <td>
<span id="jumblr_status_finished"></span> <span id="jumblr_status_finished"></span>
</td> </td>
</tr> </tr>
<tr> <tr>
<td>{translate('JUMBLR.PENDING')}</td> <td>{ translate('JUMBLR.PENDING') }</td>
<td> <td>
<span id="jumblr_status_pending"></span> <span id="jumblr_status_pending"></span>
</td> </td>

41
react/src/components/dashboard/loginModal.js

@ -48,35 +48,56 @@ class LoginModal extends React.Component {
if (this.props.Dashboard.activateLoginModal) { if (this.props.Dashboard.activateLoginModal) {
return ( return (
<div> <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-dialog modal-center modal-lg">
<div className="modal-content"> <div className="modal-content">
<div className="modal-header bg-orange-a400 wallet-send-header"> <div className="modal-header bg-orange-a400 wallet-send-header">
<button type="button" className="close white" data-dismiss="modal" aria-label="Close" onClick={this.dismiss}> <button
type="button"
className="close white"
aria-label="Close"
onClick={ this.dismiss }>
<span aria-hidden="true">×</span> <span aria-hidden="true">×</span>
</button> </button>
<h4 className="modal-title white">{translate('INDEX.SELECT_A_COIN')}</h4> <h4 className="modal-title white">{ translate('INDEX.SELECT_A_COIN') }</h4>
</div> </div>
<div className="modal-body"> <div className="modal-body">
<div id="wallet-login"> <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="page-content vertical-align-middle">
<div className="brand"> <div className="brand">
<img className="brand-img" src="assets/images/easydex-logo-big.png" alt="SuperNET Iguana" /> <img className="brand-img" src="assets/images/easydex-logo-big.png" alt="SuperNET Iguana" />
</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> <h4 style={{ color: '#fff' }} id="login-welcome">{ translate('INDEX.WELCOME_LOGIN') }</h4>
<div className="login-form"> <div className="login-form">
<div className="form-group form-material floating"> <div className="form-group form-material floating">
<input type={this.state.seedInputVisibility ? 'text' : 'password'} className="form-control" name="loginPassphrase" id="password" onChange={this.updateInput} /> <input
<i className={this.state.seedInputVisibility ? 'seed-toggle fa fa-eye-slash' : 'seed-toggle fa fa-eye'} onClick={this.toggleSeedInputVisibility}></i> type={ this.state.seedInputVisibility ? 'text' : 'password' }
className="form-control"
name="loginPassphrase"
id="password"
onChange={ this.updateInput } />
<i
className={ this.state.seedInputVisibility ? 'seed-toggle fa fa-eye-slash' : 'seed-toggle fa fa-eye' }
onClick={ this.toggleSeedInputVisibility }></i>
<label className="floating-label" htmlFor="inputPassword">{translate('INDEX.WALLET_SEED')}</label> <label className="floating-label" htmlFor="inputPassword">{translate('INDEX.WALLET_SEED')}</label>
</div> </div>
<button type="button" className="btn btn-primary btn-block" id="loginbtn" onClick={this.loginSeed} disabled={!this.state.loginPassphrase || !this.state.loginPassphrase.length}>{translate('INDEX.SIGN_IN')}</button> <button
type="button"
className="btn btn-primary btn-block"
id="loginbtn"
onClick={ this.loginSeed }
disabled={ !this.state.loginPassphrase || !this.state.loginPassphrase.length }>{ translate('INDEX.SIGN_IN') }</button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>

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

@ -43,19 +43,24 @@ class Navbar extends React.Component {
<nav className="site-navbar navbar navbar-default navbar-fixed-top navbar-mega" role="navigation"> <nav className="site-navbar navbar navbar-default navbar-fixed-top navbar-mega" role="navigation">
<div className="navbar-header"> <div className="navbar-header">
<button type="button" className="navbar-toggle hamburger hamburger-close navbar-toggle-left hided"> <button type="button" className="navbar-toggle hamburger hamburger-close navbar-toggle-left hided">
<span className="sr-only">{translate('INDEX.TOGGLE_NAV')}</span> <span className="sr-only">{ translate('INDEX.TOGGLE_NAV') }</span>
<span className="hamburger-bar"></span> <span className="hamburger-bar"></span>
</button> </button>
<button type="button" className="navbar-toggle collapsed"> <button type="button" className="navbar-toggle collapsed">
<i className="icon md-more" aria-hidden="true"></i> <i className="icon md-more" aria-hidden="true"></i>
</button> </button>
<div className="navbar-brand navbar-brand-center site-gridmenu-toggle" data-toggle="gridmenu"> <div className="navbar-brand navbar-brand-center site-gridmenu-toggle" data-toggle="gridmenu">
<img className="navbar-brand-logo hidden-xs" src="assets/images/easydex-logo-dashboard.png" title="SuperNET Igauana" /> <img
<img className="navbar-brand-logo hidden-md hidden-sm hidden-lg" src="assets/images/easydex-logo-dashboard-white.png" title="SuperNET Igauana white" /> className="navbar-brand-logo hidden-xs" src="assets/images/easydex-logo-dashboard.png"
title="SuperNET Iguana" />
<img
className="navbar-brand-logo hidden-md hidden-sm hidden-lg"
src="assets/images/easydex-logo-dashboard-white.png"
title="SuperNET Iguana white" />
<span className="navbar-brand-text hidden-xs"></span> <span className="navbar-brand-text hidden-xs"></span>
</div> </div>
<button type="button" className="navbar-toggle collapsed"> <button type="button" className="navbar-toggle collapsed">
<span className="sr-only">{translate('INDEX.TOGGLE_SEARCH')}</span> <span className="sr-only">{ translate('INDEX.TOGGLE_SEARCH') }</span>
<i className="icon md-search" aria-hidden="true"></i> <i className="icon md-search" aria-hidden="true"></i>
</button> </button>
</div> </div>
@ -63,45 +68,48 @@ class Navbar extends React.Component {
<div className="collapse navbar-collapse navbar-collapse-toolbar" id="site-navbar-collapse"> <div className="collapse navbar-collapse navbar-collapse-toolbar" id="site-navbar-collapse">
<ul className="nav navbar-toolbar"> <ul className="nav navbar-toolbar">
<li className="hidden-float" id="toggleMenubar" style={{ display: 'none' }}> <li className="hidden-float" id="toggleMenubar" style={{ display: 'none' }}>
<a data-toggle="menubar" href="#" role="button"> <a role="button">
<i className="icon hamburger hamburger-arrow-left"> <i className="icon hamburger hamburger-arrow-left">
<span className="sr-only">{translate('INDEX.TOGGLE_MENUBAR')}</span> <span className="sr-only">{ translate('INDEX.TOGGLE_MENUBAR') }</span>
<span className="hamburger-bar"></span> <span className="hamburger-bar"></span>
</i> </i>
</a> </a>
</li> </li>
<li className={this.props.Dashboard.activeSection === 'wallets' ? 'active nav-top-menu' : 'nav-top-menu'}> <li className={ this.props.Dashboard.activeSection === 'wallets' ? 'active nav-top-menu' : 'nav-top-menu' }>
<a href="javascript:void(0)" id="nav-dashboard" onClick={() => this.dashboardChangeSection('wallets')}> <a id="nav-dashboard" onClick={ () => this.dashboardChangeSection('wallets') }>
<i className="site-menu-icon" aria-hidden="true"></i> {translate('INDEX.WALLETS')} <i className="site-menu-icon" aria-hidden="true"></i> { translate('INDEX.WALLETS') }
</a> </a>
</li> </li>
<li className={this.props.Dashboard.activeSection === 'edex' ? 'active nav-top-menu' : 'nav-top-menu'}> <li className={ this.props.Dashboard.activeSection === 'edex' ? 'active nav-top-menu' : 'nav-top-menu' }>
<a href="javascript:void(0)" id="nav-easydex" onClick={() => this.dashboardChangeSection('edex')}> <a id="nav-easydex" onClick={ () => this.dashboardChangeSection('edex') }>
<i className="site-menu-icon" aria-hidden="true"></i> EasyDEX <i className="site-menu-icon" aria-hidden="true"></i> EasyDEX
</a> </a>
</li> </li>
<li className={this.props.Dashboard.activeSection === 'jumblr' ? 'active nav-top-menu' : 'nav-top-menu'} style={{display: 'none'}}> <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')}> <a id="nav-jumblr" onClick={ () => this.dashboardChangeSection('jumblr') }>
<i className="site-menu-icon" aria-hidden="true"></i> Jumblr <i className="site-menu-icon" aria-hidden="true"></i> Jumblr
</a> </a>
</li> </li>
<li className={this.props.Dashboard.activeSection === 'atomic' ? 'active nav-top-menu' : 'nav-top-menu'}> <li className={ this.props.Dashboard.activeSection === 'atomic' ? 'active nav-top-menu' : 'nav-top-menu' }>
<a 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 <i className="site-menu-icon" aria-hidden="true"></i> Atomic Explorer
</a> </a>
</li> </li>
</ul> </ul>
<ul className="nav navbar-toolbar navbar-right navbar-toolbar-right"> <ul className="nav navbar-toolbar navbar-right navbar-toolbar-right">
<li role="presentation"> <li role="presentation">
<a href="javascript:void(0)" role="menuitem" id="btn_edexcoin_addcoin" data-toggle="modal" style={{ paddingBottom: '10px', paddingTop: '16px' }} onClick={this.toggleAddCoinModal}> <a
role="menuitem"
id="btn_edexcoin_addcoin"
style={{ paddingBottom: '10px', paddingTop: '16px' }}
onClick={ this.toggleAddCoinModal }>
<span> <span>
<img src="assets/images/icons/activatecoin.png" alt="Add Coin" /> <img src="assets/images/icons/activatecoin.png" alt={ translate('INDEX.ADD_COIN') } />
</span> </span>
</a> </a>
</li> </li>
<li className={'dropdown' + (this.state.openDropMenu ? ' open' : '')} onClick={this.openDropMenu}> <li className={ 'dropdown' + (this.state.openDropMenu ? ' open' : '') } onClick={ this.openDropMenu }>
<a className="navbar-avatar dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false" <a className="navbar-avatar dropdown-toggle" aria-expanded="false" role="button">
data-animation="scale-up" role="button">
<span className="avatar avatar-online"> <span className="avatar avatar-online">
<img src="assets/images/iguana_profile_02.jpg" alt="iguana profile pic" /> <img src="assets/images/iguana_profile_02.jpg" alt="iguana profile pic" />
<i></i> <i></i>
@ -109,19 +117,25 @@ class Navbar extends React.Component {
</a> </a>
<ul className="dropdown-menu" role="menu"> <ul className="dropdown-menu" role="menu">
<li role="presentation"> <li role="presentation">
<a href="javascript:void(0)" role="menuitem" id="nav-iguana-wallet-settings" onClick={() => this.dashboardChangeSection('settings')}> <a
<i className="icon md-settings" aria-hidden="true"></i> {translate('INDEX.SETTINGS')} role="menuitem"
id="nav-iguana-wallet-settings"
onClick={ () => this.dashboardChangeSection('settings') }>
<i className="icon md-settings" aria-hidden="true"></i> { translate('INDEX.SETTINGS') }
</a> </a>
</li> </li>
<li role="presentation"> <li role="presentation">
<a href="javascript:void(0)" role="menuitem" id="nav-about-iguana" onClick={() => this.dashboardChangeSection('about')}> <a
<i className="icon fa-users" aria-hidden="true"></i> {translate('INDEX.ABOUT_IGUANA')} role="menuitem"
id="nav-about-iguana"
onClick={ () => this.dashboardChangeSection('about') }>
<i className="icon fa-users" aria-hidden="true"></i> { translate('INDEX.ABOUT_IGUANA') }
</a> </a>
</li> </li>
<li className="divider" role="presentation"></li> <li className="divider" role="presentation"></li>
<li role="presentation"> <li role="presentation">
<a href="javascript:void(0)" role="menuitem" id="logout-account" onClick={this.logout}> <a role="menuitem" id="logout-account" onClick={ this.logout }>
<i className="icon md-power" aria-hidden="true"></i> {translate('INDEX.LOGOUT')} <i className="icon md-power" aria-hidden="true"></i> { translate('INDEX.LOGOUT') }
</a> </a>
</li> </li>
</ul> </ul>

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

@ -33,13 +33,22 @@ class ReceiveCoin extends React.Component {
return ( return (
<td> <td>
<span className="label label-default"> <span className="label label-default">
<i className="icon fa-eye"></i> {translate('IAPI.PUBLIC_SM')} <i className="icon fa-eye"></i> { translate('IAPI.PUBLIC_SM') }
</span> </span>
<button className="btn btn-default btn-xs clipboard-edexaddr margin-left-10" data-edexcoin="COIN" id="edexcoin_active_addr_clipboard" onClick={() => this._copyCoinAddress(address)}><i className="icon wb-copy" aria-hidden="true"></i> {translate('INDEX.COPY')}</button> <button
<span className="label label-default margin-left-10 action" title="Check" onClick={() => this._checkAddressBasilisk(address)}> className="btn btn-default btn-xs clipboard-edexaddr margin-left-10"
id="edexcoin_active_addr_clipboard"
onClick={ () => this._copyCoinAddress(address) }><i className="icon wb-copy" aria-hidden="true"></i> { translate('INDEX.COPY') }</button>
<span
className="label label-default margin-left-10 action"
title="Check"
onClick={ () => this._checkAddressBasilisk(address) }>
<i className="icon fa-database"></i> <i className="icon fa-database"></i>
</span> </span>
<span className="label label-default margin-left-10 action" title="Import" onClick={() => this._validateAddressBasilisk(address)}> <span
className="label label-default margin-left-10 action"
title="Import"
onClick={ () => this._validateAddressBasilisk(address) }>
<i className="icon fa-info-circle"></i> <i className="icon fa-info-circle"></i>
</span> </span>
</td> </td>
@ -48,9 +57,12 @@ class ReceiveCoin extends React.Component {
return ( return (
<td> <td>
<span className="label label-default"> <span className="label label-default">
<i className="icon fa-eye"></i> {translate('IAPI.PUBLIC_SM')} <i className="icon fa-eye"></i> { translate('IAPI.PUBLIC_SM') }
</span> </span>
<button className="btn btn-default btn-xs clipboard-edexaddr margin-left-10" data-edexcoin="COIN" id="edexcoin_active_addr_clipboard" onClick={() => this._copyCoinAddress(address)}><i className="icon wb-copy" aria-hidden="true"></i> {translate('INDEX.COPY')}</button> <button
className="btn btn-default btn-xs clipboard-edexaddr margin-left-10"
id="edexcoin_active_addr_clipboard"
onClick={ () => this._copyCoinAddress(address) }><i className="icon wb-copy" aria-hidden="true"></i> { translate('INDEX.COPY') }</button>
</td> </td>
); );
} }
@ -65,19 +77,21 @@ class ReceiveCoin extends React.Component {
for (let i = 0; i < this.props.addresses.public.length; i++) { for (let i = 0; i < this.props.addresses.public.length; i++) {
let address = this.props.addresses.public[i]; let address = this.props.addresses.public[i];
if (this.props.mode === 'basilisk' && address.amount === 'N/A') { if (this.props.mode === 'basilisk' &&
address.amount === 'N/A') {
address.amount = this.props.cache && this.props.cache[this.props.coin][address.address] && 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'; address.amount = this.props.cache && this.props.cache[this.props.coin][address.address] && 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)) { if (this.props.mode === 'basilisk' &&
(address.interest === 'N/A' || !address.interest)) {
address.interest = this.props.cache && this.props.cache[this.props.coin][address.address] && 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'; address.interest = this.props.cache && this.props.cache[this.props.coin][address.address] && 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( items.push(
<tr key={address.address}> <tr key={ address.address }>
{this.renderAddressActions(address.address)} { this.renderAddressActions(address.address) }
<td>{address.address}</td> <td>{ address.address }</td>
<td>{address.amount}</td> <td>{ address.amount }</td>
<td>{address.interest ? address.interest : 'N/A'}</td> <td>{ address.interest ? address.interest : 'N/A' }</td>
</tr> </tr>
); );
} }
@ -89,38 +103,40 @@ class ReceiveCoin extends React.Component {
} }
render() { render() {
if (this.props && this.props.receive && this.props.mode !== 'native') { if (this.props &&
this.props.receive &&
this.props.mode !== 'native') {
return ( return (
<div data-edexcoin="COIN" id="edexcoin_recieve"> <div id="edexcoin_recieve">
<div className="col-xs-12 margin-top-20"> <div className="col-xs-12 margin-top-20">
<div className="panel nav-tabs-horizontal"> <div className="panel nav-tabs-horizontal">
<div data-edexcoin="COIN" id="edexcoin_recieve_section"> <div id="edexcoin_recieve_section">
<div className="col-xlg-12 col-lg-12 col-sm-12 col-xs-12"> <div className="col-xlg-12 col-lg-12 col-sm-12 col-xs-12">
<div className="panel"> <div className="panel">
<header className="panel-heading"> <header className="panel-heading">
<div className="panel-actions"> <div className="panel-actions">
</div> </div>
<h4 className="panel-title">{translate('INDEX.RECEIVING_ADDRESS')}</h4> <h4 className="panel-title">{ translate('INDEX.RECEIVING_ADDRESS') }</h4>
</header> </header>
<div className="panel-body"> <div className="panel-body">
<table className="table table-hover dataTable table-striped" data-edexcoin="COIN" id="edexcoin-recieve-addr-tbl"> <table className="table table-hover dataTable table-striped" id="edexcoin-recieve-addr-tbl">
<thead> <thead>
<tr> <tr>
<th>{translate('INDEX.TYPE')}</th> <th>{ translate('INDEX.TYPE') }</th>
<th>{translate('INDEX.ADDRESS')}</th> <th>{ translate('INDEX.ADDRESS') }</th>
<th>{translate('INDEX.BALANCE')}</th> <th>{ translate('INDEX.BALANCE') }</th>
<th>{translate('INDEX.INTEREST')}</th> <th>{ translate('INDEX.INTEREST') }</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{this.renderAddressList()} { this.renderAddressList() }
</tbody> </tbody>
<tfoot> <tfoot>
<tr> <tr>
<th>{translate('INDEX.TYPE')}</th> <th>{ translate('INDEX.TYPE') }</th>
<th>{translate('INDEX.ADDRESS')}</th> <th>{ translate('INDEX.ADDRESS') }</th>
<th>{translate('INDEX.BALANCE')}</th> <th>{ translate('INDEX.BALANCE') }</th>
<th>{translate('INDEX.INTEREST')}</th> <th>{ translate('INDEX.INTEREST') }</th>
</tr> </tr>
</tfoot> </tfoot>
</table> </table>

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

@ -154,7 +154,7 @@ class SendCoin extends React.Component {
style={{ marginTop: '10px' }} style={{ marginTop: '10px' }}
className={ isReadyToUpdate ? 'btn btn-primary waves-effect waves-light' : 'hide' } className={ isReadyToUpdate ? 'btn btn-primary waves-effect waves-light' : 'hide' }
onClick={ this._fetchNewUTXOData } disabled={ waitUntilCallIsFinished }> onClick={ this._fetchNewUTXOData } disabled={ waitUntilCallIsFinished }>
{waitUntilCallIsFinished ? translate('SEND.LOCKED_PLEASE_WAIT') + '...' : translate('SEND.UPDATE')} { waitUntilCallIsFinished ? translate('SEND.LOCKED_PLEASE_WAIT') + '...' : translate('SEND.UPDATE') }
</button> </button>
</div> </div>
); );
@ -249,7 +249,7 @@ class SendCoin extends React.Component {
return ( return (
<span> <span>
<i className={this.state.addressType === 'public' ? 'icon fa-eye' : 'icon fa-eye-slash'}></i> <span className="text">[ { _amount } {this.props.ActiveCoin.coin} ] {this.state.sendFrom}</span> <i className={ this.state.addressType === 'public' ? 'icon fa-eye' : 'icon fa-eye-slash' }></i> <span className="text">[ { _amount } { this.props.ActiveCoin.coin } ] { this.state.sendFrom }</span>
</span> </span>
); );
} else if (this.state.sendApiType) { } else if (this.state.sendApiType) {
@ -258,28 +258,36 @@ class SendCoin extends React.Component {
return ( return (
<span> <span>
<i className={this.state.addressType === 'public' ? 'icon fa-eye' : 'icon fa-eye-slash'}></i> <span className="text">[ {mainAddressAmount} {this.props.ActiveCoin.coin} ] {mainAddress}</span> <i className={ this.state.addressType === 'public' ? 'icon fa-eye' : 'icon fa-eye-slash' }></i> <span className="text">[ { mainAddressAmount } { this.props.ActiveCoin.coin } ] { mainAddress }</span>
</span> </span>
); );
} else { } else {
return ( return (
<span>- Select Transparent or Private Address -</span> <span>- { translate('SEND.SELECT_T_OR_Z_ADDR') } -</span>
); );
} }
} }
renderAddressList() { renderAddressList() {
return ( return (
<div className={'btn-group bootstrap-select form-control form-material showkmdwalletaddrs show-tick ' + (this.state.addressSelectorOpen ? 'open' : '')}> <div className={ 'btn-group bootstrap-select form-control form-material showkmdwalletaddrs show-tick ' + (this.state.addressSelectorOpen ? 'open' : '') }>
<button type="button" className="btn dropdown-toggle btn-info" data-toggle="dropdown" data-id="kmd_wallet_send_from" title="- Select Transparent or Private Address -" aria-expanded="true" onClick={this.openDropMenu}> <button
<span className="filter-option pull-left">{this.renderSelectorCurrentLabel()} </span>&nbsp;<span className="bs-caret"><span className="caret"></span></span> type="button"
className="btn dropdown-toggle btn-info"
title={ '-' + translate('SEND.SELECT_T_OR_Z_ADDR') + '-' }
aria-expanded="true"
onClick={ this.openDropMenu }>
<span className="filter-option pull-left">{ this.renderSelectorCurrentLabel() } </span>&nbsp;
<span className="bs-caret">
<span className="caret"></span>
</span>
</button> </button>
<div className="dropdown-menu open"> <div className="dropdown-menu open">
<ul className="dropdown-menu inner" role="menu"> <ul className="dropdown-menu inner" role="menu">
<li className="selected"> <li className="selected">
<a tabIndex="0"><span className="text"> - Select Transparent or Private Address - </span><span className="glyphicon glyphicon-ok check-mark"></span></a> <a tabIndex="0"><span className="text"> - { translate('SEND.SELECT_T_OR_Z_ADDR') } - </span><span className="glyphicon glyphicon-ok check-mark"></span></a>
</li> </li>
{this.renderAddressByType('public')} { this.renderAddressByType('public') }
</ul> </ul>
</div> </div>
</div> </div>
@ -386,7 +394,8 @@ class SendCoin extends React.Component {
.then(function(json) { .then(function(json) {
console.log('sendData', sendData); console.log('sendData', sendData);
console.log('iguanaUTXORawTXJSON', json); console.log('iguanaUTXORawTXJSON', json);
if (json.result === 'success' && json.completed === true) { if (json.result === 'success' &&
json.completed === true) {
Store.dispatch(triggerToaster(true, translate('TOASTR.SIGNED_TX_GENERATED') + '.', translate('TOASTR.WALLET_NOTIFICATION'), 'success')); Store.dispatch(triggerToaster(true, translate('TOASTR.SIGNED_TX_GENERATED') + '.', translate('TOASTR.WALLET_NOTIFICATION'), 'success'));
if (sendData.sendsig === 1) { if (sendData.sendsig === 1) {
@ -457,7 +466,7 @@ class SendCoin extends React.Component {
console.log(result); console.log(result);
resolve(result); resolve(result);
forceUpdateCache(); forceUpdateCache();
Store.dispatch(triggerToaster(true, 'Local UTXO data is updated. Ready to send new transaction.', translate('TOASTR.WALLET_NOTIFICATION'), 'info')); Store.dispatch(triggerToaster(true, translate('TOASTR.LOCAL_UTXO_UPDATED'), translate('TOASTR.WALLET_NOTIFICATION'), 'info'));
this.setState(Object.assign({}, this.state, { this.setState(Object.assign({}, this.state, {
utxoMethodInProgress: false, utxoMethodInProgress: false,
@ -466,10 +475,10 @@ class SendCoin extends React.Component {
}.bind(this)); }.bind(this));
}.bind(this); }.bind(this);
Store.dispatch(triggerToaster(true, 'Awaiting transaction data response...', translate('TOASTR.WALLET_NOTIFICATION'), 'info')); Store.dispatch(triggerToaster(true, translate('TOASTR.AWAITING_TX_RESP') + '...', translate('TOASTR.WALLET_NOTIFICATION'), 'info'));
function waterfallUTXOProcess() { function waterfallUTXOProcess() {
Store.dispatch(triggerToaster(true, 'Processing UTXO...', translate('TOASTR.WALLET_NOTIFICATION'), 'info')); Store.dispatch(triggerToaster(true, translate('TOASTR.PROCESSING_UTXO') + '...', translate('TOASTR.WALLET_NOTIFICATION'), 'info'));
getTxidData() getTxidData()
.then(function(gettxdata) { .then(function(gettxdata) {
@ -544,14 +553,17 @@ class SendCoin extends React.Component {
} else if (key === 'rawtx') { } else if (key === 'rawtx') {
return this.renderSignedTx(true); return this.renderSignedTx(true);
} else if (key === 'complete' || key === 'completed' || key === 'result') { } else if (key === 'complete' || key === 'completed' || key === 'result') {
if (this.props.ActiveCoin.lastSendToResponse[key] === true || this.props.ActiveCoin.lastSendToResponse[key] === 'success') { if (this.props.ActiveCoin.lastSendToResponse[key] === true ||
this.props.ActiveCoin.lastSendToResponse[key] === 'success') {
return ( return (
<span className="label label-success">{this.props.ActiveCoin.lastSendToResponse[key] === true ? 'true' : 'success'}</span> <span className="label label-success">{ this.props.ActiveCoin.lastSendToResponse[key] === true ? 'true' : 'success' }</span>
); );
} else { } else {
if (key === 'result' && this.props.ActiveCoin.lastSendToResponse.result && typeof this.props.ActiveCoin.lastSendToResponse.result !== 'object') { if (key === 'result' &&
this.props.ActiveCoin.lastSendToResponse.result &&
typeof this.props.ActiveCoin.lastSendToResponse.result !== 'object') {
return ( return (
<span>{this.props.ActiveCoin.lastSendToResponse.result}</span> <span>{ this.props.ActiveCoin.lastSendToResponse.result }</span>
); );
} else { } else {
return ( return (
@ -562,11 +574,11 @@ class SendCoin extends React.Component {
} else if (key === 'error') { } else if (key === 'error') {
if (Object.keys(this.props.ActiveCoin.lastSendToResponse[key]).length) { if (Object.keys(this.props.ActiveCoin.lastSendToResponse[key]).length) {
return ( return (
<span>{JSON.stringify(this.props.ActiveCoin.lastSendToResponse[key], null, '\t')}</span> <span>{ JSON.stringify(this.props.ActiveCoin.lastSendToResponse[key], null, '\t') }</span>
); );
} else { } else {
return ( return (
<span className="label label-danger">{this.props.ActiveCoin.lastSendToResponse[key]}</span> <span className="label label-danger">{ this.props.ActiveCoin.lastSendToResponse[key] }</span>
); );
} }
} else if (key === 'sendrawtransaction') { } else if (key === 'sendrawtransaction') {
@ -581,7 +593,7 @@ class SendCoin extends React.Component {
} }
} else if (key === 'txid' || key === 'sent') { } else if (key === 'txid' || key === 'sent') {
return ( return (
<span>{this.props.ActiveCoin.lastSendToResponse[key]}</span> <span>{ this.props.ActiveCoin.lastSendToResponse[key] }</span>
); );
} else if (key === 'tag') { } else if (key === 'tag') {
return null; return null;
@ -596,9 +608,9 @@ class SendCoin extends React.Component {
for (let key in _response) { for (let key in _response) {
if (key !== 'tag') { if (key !== 'tag') {
items.push( items.push(
<tr key={key}> <tr key={ key }>
<td>{key}</td> <td>{ key }</td>
<td>{this.renderKey(key)}</td> <td>{ this.renderKey(key) }</td>
</tr> </tr>
); );
} }
@ -607,10 +619,10 @@ class SendCoin extends React.Component {
return items; return items;
} else { } else {
return ( return (
<div style={{padding: '20px', textAlign: 'center'}}> <div style={{ padding: '20px', textAlign: 'center' }}>
<div style={{padding: '10px 0'}}> <div style={{ padding: '10px 0' }}>
Processing transaction...<br /> { translate('SEND.PROCESSING_TRANSACTION') }...<br />
Note: it may take a few minutes to complete the transaction. { translate('SEND.NOTE_IT_WILL_TAKE') }.
</div> </div>
<div className="loader-wrapper active"> <div className="loader-wrapper active">
<div className="loader-layer loader-blue"> <div className="loader-layer loader-blue">
@ -687,11 +699,25 @@ class SendCoin extends React.Component {
return ( return (
<div className="row"> <div className="row">
<div className="col-lg-6 form-group form-material"> <div className="col-lg-6 form-group form-material">
<label className="control-label" htmlFor="kmd_wallet_sendto">Fetch OpenAlias recipient address</label> <label
<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 /> className="control-label"
htmlFor="kmd_wallet_sendto">Fetch OpenAlias recipient address</label>
<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>
<div className="col-lg-6 form-group form-material"> <div className="col-lg-6 form-group form-material">
<button type="button" className="btn btn-primary waves-effect waves-light" 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 Get address
</button> </button>
</div> </div>
@ -710,7 +736,10 @@ class SendCoin extends React.Component {
<div className="pull-left margin-right-10"> <div className="pull-left margin-right-10">
<input type="checkbox" id="edexcoin_send_api_type" /> <input type="checkbox" id="edexcoin_send_api_type" />
</div> </div>
<label className="padding-top-3" htmlFor="edexcoin_send_api_type" onClick={this.toggleSendAPIType}>Send via sendtoaddress API</label> <label
className="padding-top-3"
htmlFor="edexcoin_send_api_type"
onClick={ this.toggleSendAPIType }>{ translate('SEND.SEND_VIA') } sendtoaddress API</label>
</div> </div>
</div> </div>
); );
@ -720,80 +749,119 @@ class SendCoin extends React.Component {
} }
render() { render() {
if (this.props.ActiveCoin && this.props.ActiveCoin.send && this.props.ActiveCoin.mode !== 'native') { if (this.props.ActiveCoin &&
this.props.ActiveCoin.send &&
this.props.ActiveCoin.mode !== 'native') {
return ( return (
<div className="col-sm-12 padding-top-10" 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="col-xlg-12 col-md-12 col-sm-12 col-xs-12">
<div className="steps row" style={{marginTop: '10px'}}> <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"> <div
className={ this.state.currentStep === 0 ? 'step col-md-4 current' : 'step col-md-4' }
id="edexcoin_send_step_1">
<span className="step-number">1</span> <span className="step-number">1</span>
<div className="step-desc"> <div className="step-desc">
<span className="step-title">{translate('INDEX.FILL_SEND_FORM')}</span> <span className="step-title">{ translate('INDEX.FILL_SEND_FORM') }</span>
<p>{translate('INDEX.FILL_SEND_DETAILS')}</p> <p>{ translate('INDEX.FILL_SEND_DETAILS') }</p>
</div> </div>
</div> </div>
<div className={this.state.currentStep === 1 ? 'step col-md-4 current' : 'step col-md-4'} id="edexcoin_send_step_2"> <div
className={ this.state.currentStep === 1 ? 'step col-md-4 current' : 'step col-md-4' }
id="edexcoin_send_step_2">
<span className="step-number">2</span> <span className="step-number">2</span>
<div className="step-desc"> <div className="step-desc">
<span className="step-title">{translate('INDEX.CONFIRMING')}</span> <span className="step-title">{ translate('INDEX.CONFIRMING') }</span>
<p>{translate('INDEX.CONFIRM_DETAILS')}</p> <p>{ translate('INDEX.CONFIRM_DETAILS') }</p>
</div> </div>
</div> </div>
<div className={this.state.currentStep === 2 ? 'step col-md-4 current' : 'step col-md-4'} id="edexcoin_send_step_3"> <div
className={ this.state.currentStep === 2 ? 'step col-md-4 current' : 'step col-md-4' }
id="edexcoin_send_step_3">
<span className="step-number">3</span> <span className="step-number">3</span>
<div className="step-desc"> <div className="step-desc">
<span className="step-title">{translate('INDEX.PROCESSING_TX')}</span> <span className="step-title">{ translate('INDEX.PROCESSING_TX') }</span>
<p>{translate('INDEX.PROCESSING_DETAILS')}</p> <p>{ translate('INDEX.PROCESSING_DETAILS') }</p>
</div> </div>
</div> </div>
</div> </div>
<div className={this.state.currentStep === 0 ? 'panel' : 'panel hide'} id="edexcoin-send-screen"> <div className={ this.state.currentStep === 0 ? 'panel' : 'panel hide' } id="edexcoin-send-screen">
<div className="panel-heading"> <div className="panel-heading">
<h3 data-edexcoin="COIN" className="panel-title"> <h3 className="panel-title">
{translate('INDEX.SEND')} {this.props.ActiveCoin.coin} { translate('INDEX.SEND') } { this.props.ActiveCoin.coin }
</h3> </h3>
</div> </div>
<div className="panel-body container-fluid"> <div className="panel-body container-fluid">
<form className="edexcoin-send-form" data-edexcoin="COIN" method="post" role="form" autoComplete="off"> <form className="edexcoin-send-form" method="post" role="form" autoComplete="off">
{this.renderSendApiTypeSelector()} {this.renderSendApiTypeSelector()}
<div className="row"> <div className="row">
<div className={this.props.ActiveCoin.mode === 'basilisk' ? 'col-xlg-12 form-group form-material' : 'hide'}> <div className={ this.props.ActiveCoin.mode === 'basilisk' ? 'col-xlg-12 form-group form-material' : 'hide' }>
<label className="control-label" data-edexcoin="COIN" htmlFor="edexcoin_send_from">{translate('INDEX.SEND_FROM')}</label> <label className="control-label" htmlFor="edexcoin_send_from">{ translate('INDEX.SEND_FROM') }</label>
{this.renderAddressList()} { this.renderAddressList() }
</div> </div>
</div> </div>
{this.renderOASendUI()} { this.renderOASendUI() }
<div className="row"> <div className="row">
<div className="col-xlg-12 form-group form-material"> <div className="col-xlg-12 form-group form-material">
<label className="control-label" data-edexcoin="COIN" htmlFor="edexcoin_sendto">{translate('INDEX.SEND_TO')}</label> <label className="control-label" htmlFor="edexcoin_sendto">{ translate('INDEX.SEND_TO') }</label>
<input type="text" className="form-control" 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={ translate('SEND.ENTER_AN_ADDRESS') }
autoComplete="off"
value={ this.state.sendTo }
onChange={ this.updateInput }
required />
</div> </div>
<div className="col-lg-6 form-group form-material"> <div className="col-lg-6 form-group form-material">
<label className="control-label" htmlFor="edexcoin_amount" data-edexcoin="COIN" id="edexcoin_amount_label"> <label className="control-label" htmlFor="edexcoin_amount" id="edexcoin_amount_label">
{this.props.ActiveCoin.coin} { this.props.ActiveCoin.coin }
</label> </label>
<input type="text" className="form-control" 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>
<div className="col-lg-6 form-group form-material"> <div className="col-lg-6 form-group form-material">
<label className="control-label" data-edexcoin="COIN" htmlFor="edexcoin_fee">{translate('INDEX.FEE')}</label> <label className="control-label" htmlFor="edexcoin_fee">{ translate('INDEX.FEE') }</label>
<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} /> <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>
<div className="col-lg-12"> <div className="col-lg-12">
<span data-edexcoin="KMD"> <span data-edexcoin="KMD">
<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} <strong>{ translate('INDEX.TOTAL') } ({ translate('INDEX.AMOUNT_SM') } - txfee):</strong> <span id="edexcoin_total_value">{ Number(this.state.amount) - Number(this.state.fee) }</span> { this.props.ActiveCoin.coin }
</span> </span>
</div> </div>
<div className="col-lg-10 margin-top-10"> <div className="col-lg-10 margin-top-10">
<div className="pull-left margin-right-10"> <div className="pull-left margin-right-10">
<input type="checkbox" id="edexcoin_send_sig" data-plugin="switchery" data-size="small" /> <input type="checkbox" id="edexcoin_send_sig" />
</div> </div>
<label className="padding-top-3" htmlFor="edexcoin_send_sig" onClick={this.toggleSendSig}>{translate('INDEX.DONT_SEND')}</label> <label
className="padding-top-3"
htmlFor="edexcoin_send_sig"
onClick={ this.toggleSendSig }>{ translate('INDEX.DONT_SEND') }</label>
</div> </div>
{this.renderUTXOCacheInfo()} { this.renderUTXOCacheInfo()}
<div className="col-lg-12"> <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)}> <button
{translate('INDEX.SEND')} {Number(this.state.amount) - Number(this.state.fee)} {this.props.ActiveCoin.coin} 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> </button>
</div> </div>
</div> </div>
@ -802,64 +870,78 @@ class SendCoin extends React.Component {
</div> </div>
</div> </div>
<div className={this.state.currentStep === 1 ? 'col-xlg-12 col-md-12 col-sm-12 col-xs-12' : 'col-xlg-12 col-md-12 col-sm-12 col-xs-12 hide'}> <div className={ this.state.currentStep === 1 ? 'col-xlg-12 col-md-12 col-sm-12 col-xs-12' : 'col-xlg-12 col-md-12 col-sm-12 col-xs-12 hide' }>
<div className="panel" id="edexcoin-send-confirm-screen"> <div className="panel" id="edexcoin-send-confirm-screen">
<div className="panel-body"> <div className="panel-body">
<div className="row"> <div className="row">
<div className="col-xs-12"> <div className="col-xs-12">
<b>{translate('INDEX.TO')}</b> <strong>{translate('INDEX.TO')}</strong>
</div> </div>
<div className="col-lg-6 col-sm-6 col-xs-12" id="mdl_confirm_currency_sendto_addr">{this.state.sendTo}</div> <div className="col-lg-6 col-sm-6 col-xs-12" id="mdl_confirm_currency_sendto_addr">{ this.state.sendTo }</div>
<div className="col-lg-6 col-sm-6 col-xs-6"> <div className="col-lg-6 col-sm-6 col-xs-6">
<span id="mdl_confirm_currency_send_amount">{this.state.amount}</span> {this.props.ActiveCoin.coin} <span id="mdl_confirm_currency_send_amount">{this.state.amount}</span> { this.props.ActiveCoin.coin }
</div> </div>
<div className="col-lg-6 col-sm-6 col-xs-12">{translate('INDEX.TX_FEE_REQ')}</div> <div className="col-lg-6 col-sm-6 col-xs-12">{ translate('INDEX.TX_FEE_REQ') }</div>
<div className="col-lg-6 col-sm-6 col-xs-6"> <div className="col-lg-6 col-sm-6 col-xs-6">
<span id="mdl_confirm_currency_send_fee">{this.state.fee}</span> {this.props.ActiveCoin.coin} <span id="mdl_confirm_currency_send_fee">{ this.state.fee }</span> { this.props.ActiveCoin.coin }
</div> </div>
</div> </div>
<br /> <br />
<div className="row"> <div className="row">
<div className="col-xs-12"> <div className="col-xs-12">
<b>{translate('INDEX.FROM')}</b> <strong>{ translate('INDEX.FROM') }</strong>
</div> </div>
<div className="col-lg-6 col-sm-6 col-xs-12" id="mdl_confirm_currency_sendfrom_addr">{this.props.Dashboard.activeHandle[this.props.ActiveCoin.coin]}</div> <div className="col-lg-6 col-sm-6 col-xs-12" id="mdl_confirm_currency_sendfrom_addr">{ this.props.Dashboard.activeHandle[this.props.ActiveCoin.coin] }</div>
<div className="col-lg-6 col-sm-6 col-xs-6" style={{color: '#f44336'}}> <div className="col-lg-6 col-sm-6 col-xs-6" style={{ color: '#f44336' }}>
<span id="mdl_confirm_currency_sendfrom_total_dedcut">{Number(this.state.amount) - Number(this.state.fee)}</span> {this.props.ActiveCoin.coin} <span id="mdl_confirm_currency_sendfrom_total_dedcut">{ Number(this.state.amount) - Number(this.state.fee) }</span> { this.props.ActiveCoin.coin }
</div> </div>
</div> </div>
<div className="widget-body-footer"> <div className="widget-body-footer">
<a className="btn btn-default waves-effect waves-light" id="edexcoin_send_coins_back_btn" onClick={() => this.changeSendCoinStep(0)}>{translate('INDEX.BACK')}</a> <a
className="btn btn-default waves-effect waves-light"
id="edexcoin_send_coins_back_btn"
onClick={ () => this.changeSendCoinStep(0) }>{ translate('INDEX.BACK') }</a>
<div className="widget-actions pull-right"> <div className="widget-actions pull-right">
<button type="button" className="btn btn-primary" id="edexcoin_send_coins_btn" onClick={() => this.changeSendCoinStep(2)}>{translate('INDEX.CONFIRM')}</button> <button
type="button"
className="btn btn-primary"
id="edexcoin_send_coins_btn"
onClick={ () => this.changeSendCoinStep(2) }>{ translate('INDEX.CONFIRM') }</button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div className={this.state.currentStep === 2 ? 'col-xlg-12 col-md-12 col-sm-12 col-xs-12' : 'col-xlg-12 col-md-12 col-sm-12 col-xs-12 hide'}> <div className={ this.state.currentStep === 2 ? 'col-xlg-12 col-md-12 col-sm-12 col-xs-12' : 'col-xlg-12 col-md-12 col-sm-12 col-xs-12 hide' }>
<div className="panel" id="edexcoin-send-txdetails-screen"> <div className="panel" id="edexcoin-send-txdetails-screen">
<div className="panel-heading"> <div className="panel-heading">
<h4 className="panel-title">{translate('INDEX.TRANSACTION_RESULT')}</h4> <h4 className="panel-title">{ translate('INDEX.TRANSACTION_RESULT') }</h4>
<div className={!this.state.sendSig ? 'hide' : 'center'}> <div className={ !this.state.sendSig ? 'hide' : 'center' }>
You picked option "{translate('INDEX.DONT_SEND')}" { translate('INDEX.YOU_PICKED_OPT') } "{ translate('INDEX.DONT_SEND') }"
</div> </div>
<table className="table table-hover table-striped edexcoin_sendto_result" id="edexcoin_sendto_result"> <table
className="table table-hover table-striped edexcoin_sendto_result"
id="edexcoin_sendto_result">
<thead> <thead>
<tr> <tr>
<th>{translate('INDEX.KEY')}</th> <th>{ translate('INDEX.KEY') }</th>
<th>{translate('INDEX.INFO')}</th> <th>{ translate('INDEX.INFO') }</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{this.renderSendCoinResponse()} { this.renderSendCoinResponse() }
</tbody> </tbody>
</table> </table>
<div className="widget-body-footer"> <div className="widget-body-footer">
<div className="widget-actions margin-bottom-15 margin-right-15"> <div className="widget-actions margin-bottom-15 margin-right-15">
<button type="button" className="btn btn-primary" id="edexcoin_send_coins_anothertx_btn" onClick={() => this.changeSendCoinStep(0)} disabled={this.state.utxoMethodInProgress}>{!this.state.utxoMethodInProgress ? translate('INDEX.MAKE_ANOTHER_TX') : 'Please wait...'}</button> <button
type="button"
className="btn btn-primary"
id="edexcoin_send_coins_anothertx_btn"
onClick={ () => this.changeSendCoinStep(0) }
disabled={ this.state.utxoMethodInProgress }>{ !this.state.utxoMethodInProgress ? translate('INDEX.MAKE_ANOTHER_TX') : translate('SEND.PLEASE_WAIT') + '...' }</button>
</div> </div>
</div> </div>
</div> </div>

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

@ -92,7 +92,9 @@ class Settings extends React.Component {
if (this.props.Settings.rawPeers && if (this.props.Settings.rawPeers &&
this.state.getPeersCoin && this.state.getPeersCoin &&
this.props.Settings.rawPeers[coin]) { this.props.Settings.rawPeers[coin]) {
return this.props.Settings.rawPeers[coin].map((ip) => <div key={ip}>{ip}</div>); return this.props.Settings.rawPeers[coin].map((ip) =>
<div key={ ip }>{ ip }</div>
);
} else { } else {
return null; return null;
} }
@ -107,70 +109,74 @@ class Settings extends React.Component {
if (releaseInfo) { if (releaseInfo) {
return ( return (
<div className="panel" id="AppInfo"> <div className="panel" id="AppInfo">
<div className="panel-heading" role="tab" onClick={() => this.openTab('AppInfo', 8)}> <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"> <a className={this.state.activeTab === 8 ? 'panel-title' : 'panel-title collapsed'}>
<i className="icon md-info" aria-hidden="true"></i>App Info <i className="icon md-info" aria-hidden="true"></i>{ translate('SETTINGS.APP_INFO') }
</a> </a>
</div> </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={ 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="panel-body">
<div className="col-sm-12" style={{paddingTop: '15px'}}> <div className="col-sm-12" style={{ paddingTop: '15px' }}>
<div className="row"> <div className="row">
<h5>App Release</h5> <h5>{ translate('SETTINGS.APP_RELEASE') }</h5>
<div> <div>
Name: {this.props.Settings.appInfo.releaseInfo.name} { translate('SETTINGS.NAME') }: { this.props.Settings.appInfo.releaseInfo.name }
</div> </div>
<div> <div>
Version: {this.props.Settings.appInfo.releaseInfo.version} { translate('SETTINGS.VERSION') }: { this.props.Settings.appInfo.releaseInfo.version }
</div> </div>
</div> </div>
</div> </div>
<div className="col-sm-12" style={{paddingTop: '20px'}}> <div className="col-sm-12" style={{ paddingTop: '20px' }}>
<div className="row"> <div className="row">
<h5>System Info</h5> <h5>{ translate('SETTINGS.SYS_INFO') }</h5>
<div> <div>
Architecture: {this.props.Settings.appInfo.sysInfo.arch} { translate('SETTINGS.ARCH') }: { this.props.Settings.appInfo.sysInfo.arch }
</div> </div>
<div> <div>
OS Type: {this.props.Settings.appInfo.sysInfo.os_type} { translate('SETTINGS.OS_TYPE') }: { this.props.Settings.appInfo.sysInfo.os_type }
</div> </div>
<div> <div>
OS Platfrom: {this.props.Settings.appInfo.sysInfo.platform} { translate('SETTINGS.OS_PLATFORM') }: { this.props.Settings.appInfo.sysInfo.platform }
</div> </div>
<div> <div>
OS Release: {this.props.Settings.appInfo.sysInfo.os_release} { translate('SETTINGS.OS_RELEASE') }: { this.props.Settings.appInfo.sysInfo.os_release }
</div> </div>
<div> <div>
CPU: {this.props.Settings.appInfo.sysInfo.cpu} { translate('SETTINGS.CPU') }: { this.props.Settings.appInfo.sysInfo.cpu }
</div> </div>
<div> <div>
CPU Cores: {this.props.Settings.appInfo.sysInfo.cpu_cores} { translate('SETTINGS.CPU_CORES') }: { this.props.Settings.appInfo.sysInfo.cpu_cores }
</div> </div>
<div> <div>
Memory: {this.props.Settings.appInfo.sysInfo.totalmem_readable} { translate('SETTINGS.MEM') }: { this.props.Settings.appInfo.sysInfo.totalmem_readable }
</div> </div>
</div> </div>
</div> </div>
<div className="col-sm-12" style={{paddingTop: '20px'}}> <div className="col-sm-12" style={{ paddingTop: '20px' }}>
<div className="row"> <div className="row">
<h5>Locations</h5> <h5>{ translate('SETTINGS.LOCATIONS') }</h5>
<div> <div>
Cache: {this.props.Settings.appInfo.dirs.cacheLocation} { translate('SETTINGS.CACHE') }: { this.props.Settings.appInfo.dirs.cacheLocation }
</div> </div>
<div> <div>
Config: {this.props.Settings.appInfo.dirs.configLocation} { translate('SETTINGS.CONFIG') }: { this.props.Settings.appInfo.dirs.configLocation }
</div> </div>
<div> <div>
Iguana Bin: {this.props.Settings.appInfo.dirs.iguanaBin} Iguana { translate('SETTINGS.BIN') }: { this.props.Settings.appInfo.dirs.iguanaBin }
</div> </div>
<div> <div>
Iguana Dir: {this.props.Settings.appInfo.dirs.iguanaDir} Iguana { translate('SETTINGS.DIR') }: { this.props.Settings.appInfo.dirs.iguanaDir }
</div> </div>
<div> <div>
Komodo Bin: {this.props.Settings.appInfo.dirs.komododBin} Komodo { translate('SETTINGS.BIN') }: { this.props.Settings.appInfo.dirs.komododBin }
</div> </div>
<div> <div>
Komodo Dir: {this.props.Settings.appInfo.dirs.komodoDir} Komodo { translate('SETTINGS.DIR') }: { this.props.Settings.appInfo.dirs.komodoDir }
</div> </div>
</div> </div>
</div> </div>
@ -190,7 +196,9 @@ class Settings extends React.Component {
if (this.props.Settings.supernetPeers && if (this.props.Settings.supernetPeers &&
this.state.getPeersCoin && this.state.getPeersCoin &&
this.props.Settings.supernetPeers[coin]) { this.props.Settings.supernetPeers[coin]) {
return this.props.Settings.supernetPeers[coin].map((ip) => <div key={ip}>{ip}</div>); return this.props.Settings.supernetPeers[coin].map((ip) =>
<div key={ ip }>{ ip }</div>
);
} else { } else {
return null; return null;
} }
@ -217,15 +225,12 @@ class Settings extends React.Component {
for (let key in _appSettings) { for (let key in _appSettings) {
if (key.indexOf('__') === -1) { if (key.indexOf('__') === -1) {
_appSettingsPristine[key] = _appSettings[key]; _appSettingsPristine[key] = _appSettings[key];
// console.log('key changed: ' + key + ', value: ' + _appSettings[key]);
} else { } else {
const _nestedKey = key.split('__'); const _nestedKey = key.split('__');
_appSettingsPristine[_nestedKey[0]][_nestedKey[1]] = _appSettings[key]; _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)); Store.dispatch(saveAppConfig(_appSettingsPristine));
} }
@ -236,34 +241,42 @@ class Settings extends React.Component {
for (let key in _appConfig) { for (let key in _appConfig) {
if (typeof _appConfig[key] === 'object') { if (typeof _appConfig[key] === 'object') {
items.push( items.push(
<tr key={`app-settings-${key}`}> <tr key={ `app-settings-${key}` }>
<td style={{padding: '15px'}}> <td style={{ padding: '15px' }}>
{key} { key }
</td> </td>
<td style={{padding: '15px'}}></td> <td style={{ padding: '15px' }}></td>
</tr> </tr>
); );
for (let _key in _appConfig[key]) { for (let _key in _appConfig[key]) {
items.push( items.push(
<tr key={`app-settings-${key}-${_key}`}> <tr key={ `app-settings-${key}-${_key}` }>
<td style={{padding: '15px', paddingLeft: '30px'}}> <td style={{ padding: '15px', paddingLeft: '30px' }}>
{_key} { _key }
</td> </td>
<td style={{padding: '15px'}}> <td style={{ padding: '15px' }}>
<input type="text" name={`${key}__${_key}`} defaultValue={_appConfig[key][_key]} onChange={this.updateInputSettings} /> <input
type="text"
name={ `${key}__${_key}` }
defaultValue={ _appConfig[key][_key] }
onChange={ this.updateInputSettings } />
</td> </td>
</tr> </tr>
); );
} }
} else { } else {
items.push( items.push(
<tr key={`app-settings-${key}`}> <tr key={ `app-settings-${key}` }>
<td style={{padding: '15px'}}> <td style={{ padding: '15px' }}>
{key} { key }
</td> </td>
<td style={{padding: '15px'}}> <td style={{ padding: '15px' }}>
<input type="text" name={`${key}`} defaultValue={_appConfig[key]} onChange={this.updateInputSettings} /> <input
type="text"
name={ `${key}` }
defaultValue={ _appConfig[key] }
onChange={ this.updateInputSettings } />
</td> </td>
</tr> </tr>
); );
@ -284,7 +297,7 @@ class Settings extends React.Component {
return _translationComponents.map((_translation) => return _translationComponents.map((_translation) =>
<span> <span>
{_translation} { _translation }
<br /> <br />
</span> </span>
); );
@ -298,58 +311,63 @@ class Settings extends React.Component {
<div className="col-xlg-12 col-md-12"> <div className="col-xlg-12 col-md-12">
<div className="row" id="iguana-wallet-settings"> <div className="row" id="iguana-wallet-settings">
<div className="col-xlg-12 col-md-12"> <div className="col-xlg-12 col-md-12">
<h4 className="font-size-14 text-uppercase">{translate('INDEX.WALLET_SETTINGS')}</h4> <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-group" id="SettingsAccordion" aria-multiselectable="true" role="tablist">
<div className="panel" id="WalletInfo"> <div className="panel" id="WalletInfo">
<div className="panel-heading" role="tab" onClick={() => this.openTab('WalletInfo', 0)}> <div className="panel-heading" role="tab" onClick={ () => this.openTab('WalletInfo', 0) }>
<a className={this.state.activeTab === 0 ? 'panel-title' : 'panel-title collapsed'}> <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')} <i className="icon md-balance-wallet" aria-hidden="true"></i>{ translate('INDEX.WALLET_INFO') }
</a> </a>
</div> </div>
<div className={this.state.activeTab === 0 ? 'panel-collapse collapse in' : 'panel-collapse collapse'} style={{height: this.state.activeTab === 0 ? this.state.activeTabHeight + 'px' : '10px'}} id="WalletInfoTab" aria-labelledby="WalletInfo" role="tabpanel"> <div
className={ this.state.activeTab === 0 ? 'panel-collapse collapse in' : 'panel-collapse collapse' }
style={{ height: this.state.activeTab === 0 ? this.state.activeTabHeight + 'px' : '10px' }}
id="WalletInfoTab"
aria-labelledby="WalletInfo"
role="tabpanel">
<div className="panel-body"> <div className="panel-body">
<table className="table" id="wallet-info-table"> <table className="table" id="wallet-info-table">
<thead> <thead>
<tr> <tr>
<th width="10%">{translate('INDEX.KEY')}</th> <th width="10%">{ translate('INDEX.KEY') }</th>
<th>{translate('INDEX.VALUE')}</th> <th>{ translate('INDEX.VALUE') }</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td style={{fontWeight: 'bold'}}>pubkey</td> <td style={{ fontWeight: 'bold' }}>pubkey</td>
<td> <td>
<div id="winfo_pubkey_value">{this.props.Main.activeHandle.pubkey}</div> <div id="winfo_pubkey_value">{ this.props.Main.activeHandle.pubkey }</div>
</td> </td>
</tr> </tr>
<tr> <tr>
<td style={{fontWeight: 'bold'}}>btcpubkey</td> <td style={{ fontWeight: 'bold' }}>btcpubkey</td>
<td> <td>
<div id="winfo_btcpubkey_value">{this.props.Main.activeHandle.btcpubkey}</div> <div id="winfo_btcpubkey_value">{ this.props.Main.activeHandle.btcpubkey }</div>
</td> </td>
</tr> </tr>
<tr> <tr>
<td style={{fontWeight: 'bold'}}>rmd160</td> <td style={{ fontWeight: 'bold' }}>rmd160</td>
<td> <td>
<div id="winfo_rmd160_value">{this.props.Main.activeHandle.rmd160}</div> <div id="winfo_rmd160_value">{ this.props.Main.activeHandle.rmd160 }</div>
</td> </td>
</tr> </tr>
<tr> <tr>
<td style={{fontWeight: 'bold'}}>NXT</td> <td style={{ fontWeight: 'bold' }}>NXT</td>
<td> <td>
<div id="winfo_NXT_value">{this.props.Main.activeHandle.NXT}</div> <div id="winfo_NXT_value">{ this.props.Main.activeHandle.NXT }</div>
</td> </td>
</tr> </tr>
<tr> <tr>
<td style={{fontWeight: 'bold'}}>notary</td> <td style={{ fontWeight: 'bold' }}>notary</td>
<td> <td>
<div id="winfo_notary_value">{this.props.Main.activeHandle.notary}</div> <div id="winfo_notary_value">{ this.props.Main.activeHandle.notary }</div>
</td> </td>
</tr> </tr>
<tr> <tr>
<td style={{fontWeight: 'bold'}}>status</td> <td style={{ fontWeight: 'bold' }}>status</td>
<td> <td>
<div id="winfo_status_value">{this.props.Main.activeHandle.status}</div> <div id="winfo_status_value">{ this.props.Main.activeHandle.status }</div>
</td> </td>
</tr> </tr>
</tbody> </tbody>
@ -359,62 +377,89 @@ class Settings extends React.Component {
</div> </div>
<div className="panel" id="AddNodeforCoin"> <div className="panel" id="AddNodeforCoin">
<div className="panel-heading" role="tab" onClick={() => this.openTab('AddNodeforCoin', 1)}> <div className="panel-heading" role="tab" onClick={ () => this.openTab('AddNodeforCoin', 1) }>
<a className={this.state.activeTab === 1 ? 'panel-title' : 'panel-title collapsed'} data-toggle="collapse" data-parent="#SettingsAccordion"> <a className={ this.state.activeTab === 1 ? 'panel-title' : 'panel-title collapsed' }>
<i className="icon md-plus-square" aria-hidden="true"></i>{translate('INDEX.ADD_NODE')} <i className="icon md-plus-square" aria-hidden="true"></i>{ translate('INDEX.ADD_NODE') }
</a> </a>
</div> </div>
<div className={this.state.activeTab === 1 ? 'panel-collapse collapse in' : 'panel-collapse collapse'} style={{height: this.state.activeTab === 1 ? this.state.activeTabHeight + 'px' : '10px'}} id="AddNodeforCoinTab" aria-labelledby="AddNodeforCoin" role="tabpanel"> <div
className={ this.state.activeTab === 1 ? 'panel-collapse collapse in' : 'panel-collapse collapse' }
style={{ height: this.state.activeTab === 1 ? this.state.activeTabHeight + 'px' : '10px' }}
id="AddNodeforCoinTab"
aria-labelledby="AddNodeforCoin"
role="tabpanel">
<div className="panel-body"> <div className="panel-body">
<div className="row"> <div className="row">
<div className="col-sm-6"> <div className="col-sm-6">
<div className="col-sm-12"> <div className="col-sm-12">
<p>{translate('INDEX.USE_THIS_SECTION')}</p> <p>{ translate('INDEX.USE_THIS_SECTION') }</p>
</div> </div>
<div className="col-sm-8 col-xs-12"> <div className="col-sm-8 col-xs-12">
<div className="form-group"> <div className="form-group">
<select className="form-control form-material" id="settings_select_coin_options" name="getPeersCoin" onChange={this.updateInput}> <select
<option>{translate('INDEX.SELECT_COIN')}</option> className="form-control form-material"
id="settings_select_coin_options"
name="getPeersCoin"
onChange={ this.updateInput }>
<option>{ translate('INDEX.SELECT_COIN') }</option>
<AddCoinOptionsCrypto /> <AddCoinOptionsCrypto />
<AddCoinOptionsAC /> <AddCoinOptionsAC />
<AddCoinOptionsACFiat /> <AddCoinOptionsACFiat />
</select> </select>
</div> </div>
</div> </div>
<div className="col-sm-4 col-xs-12" style={{textAlign: 'center'}}> <div className="col-sm-4 col-xs-12" style={{ textAlign: 'center' }}>
<button type="button" className="btn btn-primary waves-effect waves-light" data-toggle="modal" data-dismiss="modal" id="settings_getcoinpeers_btn" onClick={this.checkNodes}>{translate('INDEX.CHECK_NODES')}</button> <button
type="button"
className="btn btn-primary waves-effect waves-light"
id="settings_getcoinpeers_btn"
onClick={ this.checkNodes }>{ translate('INDEX.CHECK_NODES') }</button>
</div> </div>
<div className="col-sm-12"> <div className="col-sm-12">
<h5> <h5>
SuperNET Peers: <span id="coin_supernetpeers_h"></span> SuperNET Peers: <span id="coin_supernetpeers_h"></span>
</h5> </h5>
<p id="coin_supernetpeers">{this.renderSNPeersList()}</p> <p id="coin_supernetpeers">{ this.renderSNPeersList() }</p>
<h5> <h5>
Raw Peers: <span id="coin_rawpeers_h"></span> Raw Peers: <span id="coin_rawpeers_h"></span>
</h5> </h5>
<p id="coin_rawpeers">{this.renderPeersList()}</p> <p id="coin_rawpeers">{ this.renderPeersList() }</p>
</div> </div>
</div> </div>
<div className="col-sm-6"> <div className="col-sm-6">
<div className="col-sm-12"> <div className="col-sm-12">
<p>{translate('INDEX.USE_THIS_SECTION_PEER')}</p> <p>{ translate('INDEX.USE_THIS_SECTION_PEER') }</p>
</div> </div>
<div className="col-sm-8 col-xs-12"> <div className="col-sm-8 col-xs-12">
<div className="form-group"> <div className="form-group">
<select className="form-control form-material" id="settings_select_coin_addpeer_options" name="addNodeCoin" onChange={this.updateInput}> <select
<option>{translate('INDEX.SELECT_COIN')}</option> className="form-control form-material"
id="settings_select_coin_addpeer_options"
name="addNodeCoin"
onChange={ this.updateInput }>
<option>{ translate('INDEX.SELECT_COIN') }</option>
<AddCoinOptionsCrypto /> <AddCoinOptionsCrypto />
<AddCoinOptionsAC /> <AddCoinOptionsAC />
<AddCoinOptionsACFiat /> <AddCoinOptionsACFiat />
</select> </select>
</div> </div>
<div className="form-group"> <div className="form-group">
<input type="text" className="form-control" id="settings_add_peer_ip" name="addPeerIP" placeholder="Add Peer IP" onChange={this.updateInput} /> <input
type="text"
className="form-control"
id="settings_add_peer_ip"
name="addPeerIP"
placeholder={ translate('SETTINGS.ADD_PEER_IP') }
onChange={ this.updateInput } />
</div> </div>
</div> </div>
<div className="col-sm-4 col-xs-12" style={{textAlign: 'center'}}> <div className="col-sm-4 col-xs-12" style={{ textAlign: 'center' }}>
<button type="button" className="btn btn-primary waves-effect waves-light" data-toggle="modal" data-dismiss="modal" id="settings_addcoinpeers_btn" onClick={this.addNode}>{translate('INDEX.ADD_NODE')}</button> <button
type="button"
className="btn btn-primary waves-effect waves-light"
id="settings_addcoinpeers_btn"
onClick={ this.addNode }>{ translate('INDEX.ADD_NODE') }</button>
</div> </div>
</div> </div>
</div> </div>
@ -423,66 +468,93 @@ class Settings extends React.Component {
</div> </div>
<div className="panel" id="DumpWallet"> <div className="panel" id="DumpWallet">
<div className="panel-heading" role="tab" onClick={() => this.openTab('DumpWallet', 2)}> <div className="panel-heading" role="tab" onClick={ () => this.openTab('DumpWallet', 2) }>
<a className={this.state.activeTab === 2 ? 'panel-title' : 'panel-title collapsed'} data-toggle="collapse" data-parent="#SettingsAccordion"> <a className={this.state.activeTab === 2 ? 'panel-title' : 'panel-title collapsed'}>
<i className="icon wb-briefcase" aria-hidden="true"></i>{translate('INDEX.WALLET_BACKUP')} <i className="icon wb-briefcase" aria-hidden="true"></i>{ translate('INDEX.WALLET_BACKUP') }
</a> </a>
</div> </div>
<div className={this.state.activeTab === 2 ? 'panel-collapse collapse in' : 'panel-collapse collapse'} style={{height: this.state.activeTab === 2 ? this.state.activeTabHeight + 'px' : '10px'}} id="DumpWalletTab" aria-labelledby="DumpWallet" role="tabpanel"> <div
className={ this.state.activeTab === 2 ? 'panel-collapse collapse in' : 'panel-collapse collapse' }
style={{ height: this.state.activeTab === 2 ? this.state.activeTabHeight + 'px' : '10px' }}
id="DumpWalletTab"
aria-labelledby="DumpWallet"
role="tabpanel">
<div className="panel-body">Wallet Backup section to be updated soon.</div> <div className="panel-body">Wallet Backup section to be updated soon.</div>
</div> </div>
</div> </div>
<div className="panel" id="FiatCurrencySettings"> <div className="panel" id="FiatCurrencySettings">
<div className="panel-heading" role="tab" onClick={() => this.openTab('FiatCurrencySettings', 3)}> <div
<a className={this.state.activeTab === 3 ? 'panel-title' : 'panel-title collapsed'} data-toggle="collapse" data-parent="#SettingsAccordion"> className="panel-heading"
<i className="icon fa-money" aria-hidden="true"></i>{translate('INDEX.FIAT_CURRENCY')} role="tab"
onClick={ () => this.openTab('FiatCurrencySettings', 3) }>
<a className={ this.state.activeTab === 3 ? 'panel-title' : 'panel-title collapsed' }>
<i className="icon fa-money" aria-hidden="true"></i>{ translate('INDEX.FIAT_CURRENCY') }
</a> </a>
</div> </div>
<div className={this.state.activeTab === 3 ? 'panel-collapse collapse in' : 'panel-collapse collapse'} style={{height: this.state.activeTab === 3 ? this.state.activeTabHeight + 'px' : '10px'}} id="FiatCurrencySettingsTab" aria-labelledby="FiatCurrencySettings" role="tabpanel"> <div
className={ this.state.activeTab === 3 ? 'panel-collapse collapse in' : 'panel-collapse collapse' }
style={{ height: this.state.activeTab === 3 ? this.state.activeTabHeight + 'px' : '10px' }}
id="FiatCurrencySettingsTab"
aria-labelledby="FiatCurrencySettings"
role="tabpanel">
<div className="panel-body">Fiat currency settings section to be updated soon.</div> <div className="panel-body">Fiat currency settings section to be updated soon.</div>
</div> </div>
</div> </div>
<div className="panel" id="ExportKeys"> <div className="panel" id="ExportKeys">
<div className="panel-heading" role="tab" onClick={() => this.openTab('ExportKeys', 4)}> <div className="panel-heading" role="tab" onClick={ () => this.openTab('ExportKeys', 4) }>
<a className={this.state.activeTab === 4 ? 'panel-title' : 'panel-title collapsed'} data-toggle="collapse" data-parent="#SettingsAccordion"> <a className={ this.state.activeTab === 4 ? 'panel-title' : 'panel-title collapsed' }>
<i className="icon md-key" aria-hidden="true"></i>{translate('INDEX.EXPORT_KEYS')} <i className="icon md-key" aria-hidden="true"></i>{ translate('INDEX.EXPORT_KEYS') }
</a> </a>
</div> </div>
<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={ 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"> <div className="panel-body">
<p> <p>
<div>{this.renderLB('INDEX.ONLY_ACTIVE_WIF_KEYS')}</div><br/> <div>{ this.renderLB('INDEX.ONLY_ACTIVE_WIF_KEYS') }</div><br/>
<strong> <strong>
<i>{translate('INDEX.PLEASE_KEEP_KEYS_SAFE')}</i> <i>{ translate('INDEX.PLEASE_KEEP_KEYS_SAFE') }</i>
</strong> </strong>
</p> </p>
<div className="col-sm-12"></div> <div className="col-sm-12"></div>
<form className="wifkeys-form" method="post" action="javascript:" autoComplete="off"> <form className="wifkeys-form" method="post" action="javascript:" autoComplete="off">
<div className="form-group form-material floating"> <div className="form-group form-material floating">
<input type="password" className="form-control" name="wifkeysPassphrase" id="wifkeys_passphrase" onChange={this.updateInput} /> <input
<label className="floating-label" htmlFor="wifkeys_passphrase">{translate('INDEX.PASSPHRASE')}</label> type="password"
className="form-control"
name="wifkeysPassphrase"
id="wifkeys_passphrase"
onChange={ this.updateInput } />
<label className="floating-label" htmlFor="wifkeys_passphrase">{ translate('INDEX.PASSPHRASE') }</label>
</div> </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="wifkeys_passphrase_btn" onClick={this.exportWifKeys}>{translate('INDEX.GET_WIF_KEYS')}</button> <button
type="button"
className="btn btn-primary waves-effect waves-light"
id="wifkeys_passphrase_btn"
onClick={ this.exportWifKeys }>{ translate('INDEX.GET_WIF_KEYS') }</button>
</div> </div>
</form> </form>
<div className="col-sm-12" style={{paddingTop: '15px'}}> <div className="col-sm-12" style={{ paddingTop: '15px' }}>
<div className="row" id="wif-priv-keys" data-plugin="masonry"> <div className="row" id="wif-priv-keys">
<table className={this.props.Settings && this.props.Settings.address ? 'table show' : 'table hide'}> <table className={ this.props.Settings && this.props.Settings.address ? 'table show' : 'table hide' }>
<tr> <tr>
<td style={{width: '5%'}}> <td style={{ width: '5%' }}>
<strong>{this.props.ActiveCoin.coin}</strong> <strong>{ this.props.ActiveCoin.coin }</strong>
</td> </td>
<td>{this.props.Settings.address}</td> <td>{ this.props.Settings.address }</td>
</tr> </tr>
<tr> <tr>
<td> <td>
<strong>{this.props.ActiveCoin.coin}Wif</strong> <strong>{ this.props.ActiveCoin.coin }Wif</strong>
</td> </td>
<td>{this.props.Settings.wifkey}</td> <td>{ this.props.Settings.wifkey }</td>
</tr> </tr>
</table> </table>
</div> </div>
@ -492,12 +564,17 @@ class Settings extends React.Component {
</div> </div>
<div className="panel" id="ImportKeys"> <div className="panel" id="ImportKeys">
<div className="panel-heading" role="tab" onClick={() => this.openTab('ImportKeys', 5)}> <div className="panel-heading" role="tab" onClick={ () => this.openTab('ImportKeys', 5) }>
<a className={this.state.activeTab === 5 ? 'panel-title' : 'panel-title collapsed'} data-toggle="collapse"> <a className={ this.state.activeTab === 5 ? 'panel-title' : 'panel-title collapsed' }>
<i className="icon md-key" aria-hidden="true"></i>{translate('INDEX.IMPORT_KEYS')} <i className="icon md-key" aria-hidden="true"></i>{ translate('INDEX.IMPORT_KEYS') }
</a> </a>
</div> </div>
<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={ 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"> <div className="panel-body">
<p> <p>
<div>{ translate('INDEX.IMPORT_KEYS_DESC_P1') }</div><br/> <div>{ translate('INDEX.IMPORT_KEYS_DESC_P1') }</div><br/>
@ -510,8 +587,15 @@ class Settings extends React.Component {
<div className="col-sm-12"></div> <div className="col-sm-12"></div>
<form className="wifkeys-import-form" method="post" action="javascript:" autoComplete="off"> <form className="wifkeys-import-form" method="post" action="javascript:" autoComplete="off">
<div className="form-group form-material floating"> <div className="form-group form-material floating">
<input type="text" className="form-control" name="importWifKey" id="import_wifkey" onChange={ this.updateInput } /> <input
<label className="floating-label" htmlFor="import_wifkey">{ translate('INDEX.INPUT_PRIV_KEY') }</label> 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>
</div> </div>
<div className="col-sm-12 col-xs-12" style={{ textAlign: 'center' }}> <div className="col-sm-12 col-xs-12" style={{ textAlign: 'center' }}>
<button <button
@ -531,13 +615,18 @@ class Settings extends React.Component {
<i className="icon fa-bug" aria-hidden="true"></i>{ translate('INDEX.DEBUG_LOG') } <i className="icon fa-bug" aria-hidden="true"></i>{ translate('INDEX.DEBUG_LOG') }
</a> </a>
</div> </div>
<div className={ this.state.activeTab === 6 ? 'panel-collapse collapse in' : 'panel-collapse collapse' } <div
style={{ height: this.state.activeTab === 6 ? this.state.activeTabHeight + 'px' : '10px' }} className={ this.state.activeTab === 6 ? 'panel-collapse collapse in' : 'panel-collapse collapse' }
id="DebugLogTab" aria-labelledby="DebugLog" role="tabpanel"> style={{ height: this.state.activeTab === 6 ? this.state.activeTabHeight + 'px' : '10px' }}
id="DebugLogTab" aria-labelledby="DebugLog" role="tabpanel">
<div className="panel-body"> <div className="panel-body">
<p>{ translate('INDEX.DEBUG_LOG_DESC') }</p> <p>{ translate('INDEX.DEBUG_LOG_DESC') }</p>
<div className="col-sm-12"></div> <div className="col-sm-12"></div>
<form className="read-debug-log-import-form" method="post" action="javascript:" autoComplete="off"> <form
className="read-debug-log-import-form"
method="post"
action="javascript:"
autoComplete="off">
<div className="form-group form-material floating"> <div className="form-group form-material floating">
<input <input
type="text" type="text"
@ -546,14 +635,22 @@ class Settings extends React.Component {
id="read_debug_log_lines" id="read_debug_log_lines"
value={ this.state.debugLinesCount } value={ this.state.debugLinesCount }
onChange={ this.updateInput } /> onChange={ this.updateInput } />
<label className="floating-label" htmlFor="read_debug_log_lines">{ translate('INDEX.DEBUG_LOG_LINES') }</label> <label
className="floating-label"
htmlFor="read_debug_log_lines">{ translate('INDEX.DEBUG_LOG_LINES') }</label>
</div> </div>
<div className="form-group form-material floating"> <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="iguana">Iguana</option>
<option value="komodo">Komodo</option> <option value="komodo">Komodo</option>
</select> </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>
<div className="col-sm-12 col-xs-12" style={{ textAlign: 'center'}}> <div className="col-sm-12 col-xs-12" style={{ textAlign: 'center'}}>
<button <button

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

@ -175,28 +175,48 @@ class SyncOnly extends React.Component {
<div> <div>
<div> <div>
<div className="progress progress-sm"> <div className="progress progress-sm">
<div className={this.isFullySynced(fork) ? 'progress-bar progress-bar-striped active progress-bar-indicating progress-bar-success' : 'hide'} style={{width: '100%', fontSize: '80%'}} role="progressbar" id="currency-bundles"> <div
{translate('INDEX.BUNDLES')} <span data-edexcoin="GAME" id="currency-bundles-percent">({fork.coin}) 100.00% - ( {fork.blocks} / {fork.blocks} ) ==&gt;&gt; RT{fork.RTheight}</span> className={ this.isFullySynced(fork) ? '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">({ fork.coin }) 100.00% - ( { fork.blocks } / { fork.blocks } ) ==&gt;&gt; RT{ fork.RTheight }</span>
</div> </div>
<div className={this.isFullySynced(fork) ? 'hide' : 'progress-bar progress-bar-info progress-bar-striped active'} style={{width: fork.bundles + '%', fontSize: '80%'}} role="progressbar" data-edexcoin="COIN" id="currency-bundles"> <div
{translate('INDEX.BUNDLES')} <span data-edexcoin="COIN" id="currency-bundles-percent">{fork.bundles}%</span> className={ this.isFullySynced(fork) ? 'hide' : 'progress-bar progress-bar-info progress-bar-striped active' }
style={{ width: fork.bundles + '%', fontSize: '80%' }}
role="progressbar"
id="currency-bundles">
{ translate('INDEX.BUNDLES') } <span id="currency-bundles-percent">{ fork.bundles }%</span>
</div> </div>
</div> </div>
</div> </div>
<div data-edexcoin="COIN" id="additional-progress-bars" className={this.isFullySynced(fork) ? 'hide' : ''}> <div id="additional-progress-bars" className={ this.isFullySynced(fork) ? 'hide' : '' }>
<div className="progress progress-sm"> <div className="progress progress-sm">
<div className="progress-bar progress-bar-warning progress-bar-striped active" style={{width: fork.utxo + '%', fontSize: '80%'}} role="progressbar" data-edexcoin="COIN" id="currency-utxo"> <div
utxo <span data-edexcoin="COIN" id="currency-utxo-percent">{fork.utxo}%</span> className="progress-bar progress-bar-warning progress-bar-striped active"
style={{ width: fork.utxo + '%', fontSize: '80%' }}
role="progressbar"
id="currency-utxo">
utxo <span id="currency-utxo-percent">{ fork.utxo }%</span>
</div> </div>
</div> </div>
<div className="progress progress-sm"> <div className="progress progress-sm">
<div className="progress-bar progress-bar-danger progress-bar-striped active" style={{width: fork.balances + '%', fontSize: '80%'}} role="progressbar" data-edexcoin="COIN" id="currency-balances"> <div
{translate('INDEX.BALANCES')} <span data-edexcoin="COIN" id="currency-balances-percent">{fork.balances}%</span> className="progress-bar progress-bar-danger progress-bar-striped active"
style={{ width: fork.balances + '%', fontSize: '80%' }}
role="progressbar"
id="currency-balances">
{ translate('INDEX.BALANCES') } <span id="currency-balances-percent">{ fork.balances }%</span>
</div> </div>
</div> </div>
<div className="progress progress-sm"> <div className="progress progress-sm">
<div className="progress-bar progress-bar-success progress-bar-striped active" style={{width: fork.validated + '%', fontSize: '80%'}} role="progressbar" data-edexcoin="COIN" id="currency-validated"> <div
{translate('INDEX.VALIDATED')} <span data-edexcoin="COIN" id="currency-validated-percent">{fork.validated}%</span> className="progress-bar progress-bar-success progress-bar-striped active"
style={{ width: fork.validated + '%', fontSize: '80%' }}
role="progressbar"
id="currency-validated">
{ translate('INDEX.VALIDATED') } <span id="currency-validated-percent">{ fork.validated }%</span>
</div> </div>
</div> </div>
</div> </div>
@ -210,19 +230,25 @@ class SyncOnly extends React.Component {
for (let port in this.props.SyncOnly.forks) { for (let port in this.props.SyncOnly.forks) {
const forkInfo = this.props.SyncOnly.forks[port]; const forkInfo = this.props.SyncOnly.forks[port];
if (forkInfo && forkInfo.registry && forkInfo.getinfo) { if (forkInfo &&
forkInfo.registry && forkInfo.getinfo) {
items.push( items.push(
<div key={port} style={{width: '100%'}} className="padding-bottom-60"> <div key={ port } style={{ width: '100%' }} className="padding-bottom-60">
<div className="avatar" href="javascript:void(0)"> <div className="avatar">
<img className="img-responsive margin-bottom-5" src={'assets/images/cryptologo/' + this.renderCoinName(forkInfo.registry.coin).logo + '.png'} alt="{forkInfo.registry.coin}"/> <img
<span className="badge up badge-success margin-bottom-5" data-toggle="tooltip" data-placement="top" data-original-title="full">Full</span> className="img-responsive margin-bottom-5"
<div className="coin-name">{this.renderCoinName(forkInfo.registry.coin).name} ({forkInfo.registry.coin.toUpperCase()})</div> src={ 'assets/images/cryptologo/' + this.renderCoinName(forkInfo.registry.coin).logo + '.png' }
alt={ forkInfo.registry.coin }/>
<span className="badge up badge-success margin-bottom-5">Full</span>
<div className="coin-name">{ this.renderCoinName(forkInfo.registry.coin).name } ({ forkInfo.registry.coin.toUpperCase() })</div>
<div className="margin-top-10"> <div className="margin-top-10">
<span className="btn btn-primary" onClick={() => this._stopIguanaFork(forkInfo.registry.pmid)}> <span className="btn btn-primary" onClick={ () => this._stopIguanaFork(forkInfo.registry.pmid) }>
<span className="fa fa-stop"></span> Stop <span className="fa fa-stop"></span> { translate('INDEX.STOP') }
</span> </span>
<span className="btn btn-primary margin-left-10" onClick={() => this._restartIguanaFork(forkInfo.registry.coin.toUpperCase(), forkInfo.registry.pmid, port)}> <span
<span className="fa fa-undo"></span> Restart className="btn btn-primary margin-left-10"
onClick={ () => this._restartIguanaFork(forkInfo.registry.coin.toUpperCase(), forkInfo.registry.pmid, port) }>
<span className="fa fa-undo"></span> { translate('INDEX.RESTART') }
</span> </span>
</div> </div>
</div> </div>
@ -244,17 +270,18 @@ class SyncOnly extends React.Component {
} }
render() { render() {
if (this.props && this.props.SyncOnly.display) { if (this.props &&
this.props.SyncOnly.display) {
return ( return (
<div> <div>
<div className="modal show sync-only-forks" aria-hidden="false" role="dialog"> <div className="modal show sync-only-forks" aria-hidden="false" role="dialog">
<div className="modal-dialog modal-center modal-lg"> <div className="modal-dialog modal-center modal-lg">
<div className="modal-content"> <div className="modal-content">
<div className="modal-body" style={{height: '590px'}}> <div className="modal-body" style={{ height: '590px' }}>
{this.renderForksList()} { this.renderForksList() }
</div> </div>
<div className="modal-footer"> <div className="modal-footer">
<button type="button" className="btn btn-default" onClick={this.closeSyncOnlyModal}>Close</button> <button type="button" className="btn btn-default" onClick={ this.closeSyncOnlyModal }>{ translate('INDEX.CLOSE') }</button>
</div> </div>
</div> </div>
</div> </div>

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

@ -8,7 +8,8 @@ class WalletsBalance extends React.Component {
} }
isFullySynced() { isFullySynced() {
if (this.props.Dashboard.progress && (Number(this.props.Dashboard.progress.balances) + if (this.props.Dashboard.progress &&
(Number(this.props.Dashboard.progress.balances) +
Number(this.props.Dashboard.progress.validated) + Number(this.props.Dashboard.progress.validated) +
Number(this.props.Dashboard.progress.bundles) + Number(this.props.Dashboard.progress.bundles) +
Number(this.props.Dashboard.progress.utxo)) / 4 === 100) { Number(this.props.Dashboard.progress.utxo)) / 4 === 100) {
@ -88,37 +89,39 @@ class WalletsBalance extends React.Component {
return ( return (
<div id="wallet-widgets"> <div id="wallet-widgets">
<div className="col-xs-12"> <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 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" 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"> <button aria-label="Close" data-dismiss="alert" className="close" type="button">
<span aria-hidden="true">×</span> <span aria-hidden="true">×</span>
</button> </button>
<h4>{translate('INDEX.ACTIVATING_WALLET_RT')}</h4> <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 id="edexcoin-wallet-waitingrt-alert-text">{ translate('INDEX.IGUANA_FULL_MODE_SYNC_P1') }</p>
<p>{translate('INDEX.IGUANA_FULL_MODE_SYNC_P2')}</p> <p>{ translate('INDEX.IGUANA_FULL_MODE_SYNC_P2') }</p>
<p style={{fontWeight: '600'}}>{this.renderLB('INDEX.IGUANA_FULL_MODE_SYNC_P3')}</p> <p style={{ fontWeight: '600' }}>{ this.renderLB('INDEX.IGUANA_FULL_MODE_SYNC_P3') }</p>
</div> </div>
<div role="alert" className="alert alert-info alert-dismissible" 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"> <button aria-label="Close" data-dismiss="alert" className="close" type="button">
<span aria-hidden="true">×</span> <span aria-hidden="true">×</span>
</button> </button>
<h4>{translate('INDEX.FETCHING_COIN_DATA')}</h4> <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 id="edexcoin-wallet-waitingcache-alert-text">{ translate('INDEX.IGUANA_FULL_MODE_SYNC_P1') }</p>
<p>{translate('INDEX.IGUANA_FULL_MODE_SYNC_P2')}</p> <p>{ translate('INDEX.IGUANA_FULL_MODE_SYNC_P2') }</p>
<p style={{fontWeight: '600'}}>{this.renderLB('INDEX.IGUANA_FULL_MODE_SYNC_P3')}</p> <p style={{ fontWeight: '600' }}>{ this.renderLB('INDEX.IGUANA_FULL_MODE_SYNC_P3') }</p>
</div> </div>
</div> </div>
<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={ 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 widget-shadow" id="widgetLineareaOne">
<div className="widget-content"> <div className="widget-content">
<div className="padding-20 padding-top-10"> <div className="padding-20 padding-top-10">
<div className="clearfix"> <div className="clearfix">
<div className="pull-left padding-vertical-10"> <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')} <i className="icon fa-eye font-size-24 vertical-align-bottom margin-right-5"></i>{ translate('INDEX.BALANCE')}
</div> </div>
<span className="pull-right padding-top-10" style={{fontSize: '22px'}}> <span className="pull-right padding-top-10" style={{ fontSize: '22px' }}>
{this.renderBalance('main')} {this.props.ActiveCoin.coin} { this.renderBalance('main') } { this.props.ActiveCoin.coin }
</span> </span>
</div> </div>
</div> </div>
@ -126,16 +129,18 @@ class WalletsBalance extends React.Component {
</div> </div>
</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'} 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 widget-shadow" id="widgetLineareaOne">
<div className="widget-content"> <div className="widget-content">
<div className="padding-20 padding-top-10"> <div className="padding-20 padding-top-10">
<div className="clearfix"> <div className="clearfix">
<div className="pull-left padding-vertical-10"> <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')} <i className="icon fa-money font-size-24 vertical-align-bottom margin-right-5"></i>{ translate('INDEX.INTEREST_EARNED') }
</div> </div>
<span className="pull-right padding-top-10" style={{fontSize: '22px'}}> <span className="pull-right padding-top-10" style={{ fontSize: '22px' }}>
{this.renderBalance('interest')} {this.props.ActiveCoin.coin} { this.renderBalance('interest') } { this.props.ActiveCoin.coin }
</span> </span>
</div> </div>
</div> </div>
@ -143,16 +148,18 @@ class WalletsBalance extends React.Component {
</div> </div>
</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'} 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 widget-shadow" id="widgetLineareaOne">
<div className="widget-content"> <div className="widget-content">
<div className="padding-20 padding-top-10"> <div className="padding-20 padding-top-10">
<div className="clearfix"> <div className="clearfix">
<div className="pull-left padding-vertical-10"> <div className="pull-left padding-vertical-10">
<i className="icon fa-bullseye font-size-24 vertical-align-bottom margin-right-5"></i>{translate('INDEX.TOTAL_BALANCE')} <i className="icon fa-bullseye font-size-24 vertical-align-bottom margin-right-5"></i>{ translate('INDEX.TOTAL_BALANCE') }
</div> </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('total')} {this.props.ActiveCoin.coin} { this.renderBalance('total') } { this.props.ActiveCoin.coin }
</span> </span>
</div> </div>
</div> </div>

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

@ -14,22 +14,23 @@ class WalletsBasiliskConnection extends React.Component {
} }
render() { render() {
if (this.props && this.props.Dashboard.basiliskConnection) { if (this.props &&
this.props.Dashboard.basiliskConnection) {
return ( return (
<div> <div>
<div className="modal show" id="RefreshBasiliskConnectionsMdl" aria-hidden="false" role="dialog"> <div className="modal show" id="RefreshBasiliskConnectionsMdl" aria-hidden="false" role="dialog">
<div className="modal-dialog modal-center modal-md"> <div className="modal-dialog modal-center modal-md">
<div className="modal-content"> <div className="modal-content">
<div className="modal-header bg-orange-a400 wallet-send-header" style={{borderRadius: '3px 3px 0 0'}}> <div className="modal-header bg-orange-a400 wallet-send-header" style={{ borderRadius: '3px 3px 0 0' }}>
<h4 className="modal-title white"> <h4 className="modal-title white">
<span className="icon fa-refresh" style={{margin: '0'}}></span> {translate('INDEX.REFRESHING_BASILISK_NET')}... <span className="icon fa-refresh" style={{ margin: '0' }}></span> { translate('INDEX.REFRESHING_BASILISK_NET') }...
</h4> </h4>
<button type="button" className="close btn-close" 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 aria-hidden="true">&times;</span>
<span className="sr-only">{translate('INDEX.CLOSE')}</span> <span className="sr-only">{ translate('INDEX.CLOSE') }</span>
</button> </button>
</div> </div>
<div className="modal-body" style={{textAlign: 'center'}}> <div className="modal-body" style={{ textAlign: 'center' }}>
<div className="loader-wrapper active"> <div className="loader-wrapper active">
<div className="loader-layer loader-blue"> <div className="loader-layer loader-blue">
<div className="loader-circle-left"> <div className="loader-circle-left">
@ -69,13 +70,13 @@ class WalletsBasiliskConnection extends React.Component {
</div> </div>
</div> </div>
<h5 className="text-left"> <h5 className="text-left">
{translate('IAPI.CON_STATUS') + '... ' + this.props.Dashboard.connectedNotaries.current + '/' + this.props.Dashboard.connectedNotaries.total + ': ' + this.props.Dashboard.connectedNotaries.currentNodeName} <span className="pull-right" id="basilisk-connections-refresh-percent">{Math.floor(this.props.Dashboard.connectedNotaries.current * 100 / this.props.Dashboard.connectedNotaries.total)}%</span> { 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> </h5>
<div className="progress progress-sm"> <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" 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> </div>
<pre 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} { this.props.Dashboard.connectedNotaries.failedToConnectNodes ? 'Failed: ' + this.props.Dashboard.connectedNotaries.failedToConnectNodes : null }
</pre> </pre>
</div> </div>
</div> </div>

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

@ -3,14 +3,15 @@ import { translate } from '../../translate/translate';
class WalletsBasiliskRefresh extends React.Component { class WalletsBasiliskRefresh extends React.Component {
render() { render() {
if (this.props && this.props.Dashboard.basiliskRefresh) { if (this.props &&
this.props.Dashboard.basiliskRefresh) {
return ( return (
<div data-edexcoin="COIN" id="edexcoin_dashboard_basilisk_refresh_status"> <div id="edexcoin_dashboard_basilisk_refresh_status">
<div className="col-xs-12 margin-top-20"> <div className="col-xs-12 margin-top-20">
<div className="col-xs-12"> <div className="col-xs-12">
<div className="panel"> <div className="panel">
<div className="panel-heading"> <div className="panel-heading">
<h3 className="panel-title">{translate('INDEX.FETCHING_BASILISK_DATA')}</h3> <h3 className="panel-title">{ translate('INDEX.FETCHING_BASILISK_DATA') }</h3>
<div className="panel-actions"> <div className="panel-actions">
<a className="panel-action icon md-refresh-alt" aria-hidden="true"></a> <a className="panel-action icon md-refresh-alt" aria-hidden="true"></a>
</div> </div>
@ -19,11 +20,11 @@ class WalletsBasiliskRefresh extends React.Component {
<table className="table table-hover table-striped tbl_edexcoin_dashboard_basilisk_refresh_status"> <table className="table table-hover table-striped tbl_edexcoin_dashboard_basilisk_refresh_status">
<thead> <thead>
<tr> <tr>
<th>{translate('INDEX.ADDRESS')}</th> <th>{ translate('INDEX.ADDRESS') }</th>
<th>{translate('INDEX.LIST_UNSPENT')}</th> <th>{ translate('INDEX.LIST_UNSPENT') }</th>
<th>{translate('INDEX.LIST_TRANSACTIONS')}</th> <th>{ translate('INDEX.LIST_TRANSACTIONS') }</th>
<th>{translate('INDEX.GET_BALANCE')}</th> <th>{ translate('INDEX.GET_BALANCE') }</th>
<th>{translate('INDEX.REFRESH')}</th> <th>{ translate('INDEX.REFRESH') }</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>

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

@ -26,17 +26,18 @@ class WalletsCacheData extends React.Component {
} else { } else {
return ( return (
<div> <div>
<strong>{Object.keys(this.props.ActiveCoin.cache).length}</strong> coin(s) in cache file <strong>{ Object.keys(this.props.ActiveCoin.cache).length }</strong> coin(s) in cache file
</div> </div>
); );
} }
} }
renderKeyValueParent(pre, _sourceObj) { renderKeyValueParent(pre, _sourceObj) {
if (_sourceObj.data[0] && Object.keys(_sourceObj.data[0]).length) { if (_sourceObj.data[0] &&
Object.keys(_sourceObj.data[0]).length) {
return _sourceObj.data.map((key, value) => return _sourceObj.data.map((key, value) =>
<TreeNode title={key.txid ? key.txid : `${pre}-array-${value}`} key={`{$pre}-${value}-array`}> <TreeNode title={ key.txid ? key.txid : `${pre}-array-${value}` } key={ `{$pre}-${value}-array` }>
{this.renderArrayNode(`${pre}-array-${value}`, key)} { this.renderArrayNode(`${pre}-array-${value}`, key) }
</TreeNode>); </TreeNode>);
} else { } else {
return Object.keys(_sourceObj.data).map((key, value) => this.renderKeyValue(pre, key, _sourceObj.data[key])); return Object.keys(_sourceObj.data).map((key, value) => this.renderKeyValue(pre, key, _sourceObj.data[key]));
@ -49,32 +50,33 @@ class WalletsCacheData extends React.Component {
renderKeyValue(pre, key, value) { renderKeyValue(pre, key, value) {
return ( return (
<TreeNode title={`${key}: ${value}`} key={`{$pre}-${key}`} /> <TreeNode title={ `${key}: ${value}` } key={ `{$pre}-${key}` } />
); );
} }
renderCallData(coin, address, call) { renderCallData(coin, address, call) {
const sourceObj = this.props.ActiveCoin.cache[coin][address]; const sourceObj = this.props.ActiveCoin.cache[coin][address];
if (sourceObj[call].data && (sourceObj[call].data.length || Object.keys(sourceObj[call].data).length)) { if (sourceObj[call].data &&
(sourceObj[call].data.length || Object.keys(sourceObj[call].data).length)) {
return ( return (
<TreeNode title={`${call}`} key={`${coin}-${address}-${call}`}> <TreeNode title={ `${call}`} key={`${coin}-${address}-${call}` }>
<TreeNode title={`status: ${sourceObj[call].status}`} key={`${coin}-${address}-${call}-status`} /> <TreeNode title={ `status: ${sourceObj[call].status}` } key={ `${coin}-${address}-${call}-status` } />
<TreeNode title={`updated @: ${secondsToString(sourceObj[call].timestamp, true)}`} key={`${coin}-${address}-${call}-timestamp`} /> <TreeNode title={ `updated @: ${secondsToString(sourceObj[call].timestamp, true)}` } key={ `${coin}-${address}-${call}-timestamp` } />
<TreeNode title="data" key={`${coin}-${address}-${call}-data`}> <TreeNode title="data" key={ `${coin}-${address}-${call}-data` }>
{this.renderKeyValueParent(`${coin}-${address}-${call}`, sourceObj[call])} { this.renderKeyValueParent(`${coin}-${address}-${call}`, sourceObj[call]) }
</TreeNode> </TreeNode>
</TreeNode> </TreeNode>
); );
} else { } else {
return ( return (
<TreeNode title={`${call} (no data)`} key={`${coin}-${address}-${call}`} /> <TreeNode title={ `${call} (no data)` } key={ `${coin}-${address}-${call}` } />
); );
} }
} }
renderAddressCallsList(coin, address) { renderAddressCallsList(coin, address) {
var allCalls = []; let allCalls = [];
const sourceObj = this.props.ActiveCoin.cache[coin][address]; const sourceObj = this.props.ActiveCoin.cache[coin][address];
const _allCalls = [ const _allCalls = [
'listtransactions', 'listtransactions',
@ -101,8 +103,8 @@ class WalletsCacheData extends React.Component {
if (addrList && addrList.length) { if (addrList && addrList.length) {
return addrList.map((address, index) => return addrList.map((address, index) =>
<TreeNode title={`${address}`} key={`${coin}-${address}`}> <TreeNode title={ `${address}` } key={ `${coin}-${address}` }>
{this.renderAddressCallsList(coin, address)} { this.renderAddressCallsList(coin, address) }
</TreeNode> </TreeNode>
); );
} else { } else {
@ -111,11 +113,12 @@ class WalletsCacheData extends React.Component {
} }
renderCoinRootNodes() { renderCoinRootNodes() {
if (this.props.ActiveCoin.cache && Object.keys(this.props.ActiveCoin.cache).length) { if (this.props.ActiveCoin.cache &&
Object.keys(this.props.ActiveCoin.cache).length) {
return Object.keys(this.props.ActiveCoin.cache).map((coinName, index) => return Object.keys(this.props.ActiveCoin.cache).map((coinName, index) =>
<TreeNode title={`${coinName}`} key={`coin-${coinName}`}> <TreeNode title={ `${coinName}` } key={ `coin-${coinName}` }>
<TreeNode title="Address list" key={`${coinName}-addrlist`}> <TreeNode title="Address list" key={ `${coinName}-addrlist` }>
{this.renderCoinAddressList(coinName)} { this.renderCoinAddressList(coinName) }
</TreeNode> </TreeNode>
</TreeNode> </TreeNode>
); );
@ -129,10 +132,10 @@ class WalletsCacheData extends React.Component {
this.props.ActiveCoin.notaries.notaries && this.props.ActiveCoin.notaries.notaries &&
this.props.ActiveCoin.notaries.notaries.length) { this.props.ActiveCoin.notaries.notaries.length) {
return this.props.ActiveCoin.notaries.notaries.map((node, index) => return this.props.ActiveCoin.notaries.notaries.map((node, index) =>
<TreeNode title={`Node ${index}`} key={`node-${index}`}> <TreeNode title={ `Node ${index}` } key={ `node-${index}` }>
<TreeNode key={`node-${index}-btc`} title={`BTC: ${node.BTCaddress}`} /> <TreeNode key={ `node-${index}-btc` } title={ `BTC: ${node.BTCaddress}` } />
<TreeNode key={`node-${index}-kmd`} title={`KMD: ${node.KMDaddress}`} /> <TreeNode key={ `node-${index}-kmd` } title={ `KMD: ${node.KMDaddress}` } />
<TreeNode key={`node-${index}-pubkey`} title={`Pubkey: ${node.pubkey}`} /> <TreeNode key={ `node-${index}-pubkey` } title={ `Pubkey: ${node.pubkey}` } />
</TreeNode> </TreeNode>
); );
} else { } else {
@ -150,14 +153,14 @@ class WalletsCacheData extends React.Component {
<div className="modal show" aria-hidden="false" role="dialog"> <div className="modal show" aria-hidden="false" role="dialog">
<div className="modal-dialog modal-center modal-lg"> <div className="modal-dialog modal-center modal-lg">
<div className="modal-content"> <div className="modal-content">
<div className="modal-body" style={{height: '590px'}}> <div className="modal-body" style={{ height: '590px' }}>
<div className="panel nav-tabs-horizontal"> <div className="panel nav-tabs-horizontal">
<div className="panel-body"> <div className="panel-body">
<div className="tab-content"> <div className="tab-content">
<div className="tab-pane active" role="tabpanel"> <div className="tab-pane active" role="tabpanel">
{this.renderNotariesFetching()} { this.renderNotariesFetching() }
<Tree defaultExpandAll={false} openAnimation={animation}> <Tree defaultExpandAll={ false } openAnimation={ animation }>
{this.renderCoinRootNodes()} { this.renderCoinRootNodes() }
</Tree> </Tree>
</div> </div>
</div> </div>
@ -165,7 +168,7 @@ class WalletsCacheData extends React.Component {
</div> </div>
</div> </div>
<div className="modal-footer"> <div className="modal-footer">
<button type="button" className="btn btn-default" onClick={this.closeViewCacheModal}>Close</button> <button type="button" className="btn btn-default" onClick={ this.closeViewCacheModal }>{ translate('INDEX.CLOSE') }</button>
</div> </div>
</div> </div>
</div> </div>

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

@ -286,7 +286,7 @@ class WalletsData extends React.Component {
className="dataTables_info" className="dataTables_info"
id="kmd-tx-history-tbl_info" id="kmd-tx-history-tbl_info"
role="status" role="status"
aria-live="polite">{ translate('INDEX.SHOWING') } { _paginationFrom } { translate('INDEX.TO') } { _paginationTo } { translate('INDEX.OF') } { this.props.ActiveCoin.txhistory.length } { translate('INDEX.ENTRIES_SM') }</div> aria-live="polite">{ translate('INDEX.SHOWING') } { _paginationFrom } { translate('INDEX.TO_ALT') } { _paginationTo } { translate('INDEX.OF') } { this.props.ActiveCoin.txhistory.length } { translate('INDEX.ENTRIES_SM') }</div>
</div> </div>
<div className="col-sm-7"> <div className="col-sm-7">
<div className="dataTables_paginate paging_simple_numbers" id="kmd-tx-history-tbl_paginate"> <div className="dataTables_paginate paging_simple_numbers" id="kmd-tx-history-tbl_paginate">
@ -477,7 +477,9 @@ class WalletsData extends React.Component {
items.push( items.push(
<li key={address.address}> <li key={address.address}>
<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> <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> </li>
); );
} }
@ -494,7 +496,8 @@ class WalletsData extends React.Component {
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 === this.state.currentAddress) { 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') { 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; return this.props.ActiveCoin.addresses.public[i].amount;
} else { } else {
const address = this.props.ActiveCoin.addresses.public[i].address; const address = this.props.ActiveCoin.addresses.public[i].address;
@ -512,12 +515,12 @@ class WalletsData extends React.Component {
if (this.state.currentAddress) { if (this.state.currentAddress) {
return ( return (
<span> <span>
<i className={this.state.addressType === 'public' ? 'icon fa-eye' : 'icon fa-eye-slash'}></i> <span className="text">[ {this.renderAddressAmount()} {this.props.ActiveCoin.coin} ] {this.state.currentAddress}</span> <i className={ this.state.addressType === 'public' ? 'icon fa-eye' : 'icon fa-eye-slash' }></i> <span className="text">[ { this.renderAddressAmount() } { this.props.ActiveCoin.coin } ] { this.state.currentAddress }</span>
</span> </span>
); );
} else { } else {
return ( return (
<span>- Select Transparent or Private Address -</span> <span>- { translate('KMD_NATIVE.SELECT_ADDRESS') } -</span>
); );
} }
} }
@ -528,16 +531,24 @@ class WalletsData extends React.Component {
this.props.Dashboard.activeHandle[this.props.ActiveCoin.coin] && this.props.Dashboard.activeHandle[this.props.ActiveCoin.coin] &&
this.props.ActiveCoin.mode === 'basilisk') { this.props.ActiveCoin.mode === 'basilisk') {
return ( return (
<div className={'btn-group bootstrap-select form-control form-material showkmdwalletaddrs show-tick ' + (this.state.addressSelectorOpen ? 'open' : '')}> <div className={ 'btn-group bootstrap-select form-control form-material showkmdwalletaddrs show-tick ' + (this.state.addressSelectorOpen ? 'open' : '') }>
<button type="button" className="btn dropdown-toggle btn-info" data-toggle="dropdown" data-id="kmd_wallet_send_from" title="- Select Transparent or Private Address -" aria-expanded="true" onClick={this.openDropMenu}> <button
<span className="filter-option pull-left">{this.renderSelectorCurrentLabel()} </span>&nbsp;<span className="bs-caret"><span className="caret"></span></span> type="button"
className="btn dropdown-toggle btn-info"
title={ '-' + translate('KMD_NATIVE.SELECT_ADDRESS') + '-' }
aria-expanded="true"
onClick={ this.openDropMenu }>
<span className="filter-option pull-left">{ this.renderSelectorCurrentLabel() } </span>&nbsp;
<span className="bs-caret">
<span className="caret"></span>
</span>
</button> </button>
<div className="dropdown-menu open"> <div className="dropdown-menu open">
<ul className="dropdown-menu inner" role="menu"> <ul className="dropdown-menu inner" role="menu">
<li data-original-index="1" className="selected"> <li data-original-index="1" 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"> - { translate('KMD_NATIVE.SELECT_ADDRESS') } - </span><span className="glyphicon glyphicon-ok check-mark"></span></a>
</li> </li>
{this.renderAddressByType('public')} { this.renderAddressByType('public') }
</ul> </ul>
</div> </div>
</div> </div>
@ -560,118 +571,139 @@ class WalletsData extends React.Component {
<WalletsBasiliskConnection {...this.props} /> <WalletsBasiliskConnection {...this.props} />
<WalletsNotariesList {...this.props} /> <WalletsNotariesList {...this.props} />
<WalletsCacheData {...this.props} /> <WalletsCacheData {...this.props} />
<div data-edexcoin="COIN" id="edexcoin_dashboardinfo"> <div id="edexcoin_dashboardinfo">
<div className="col-xs-12 margin-top-20"> <div className="col-xs-12 margin-top-20">
<div className="panel nav-tabs-horizontal"> <div className="panel nav-tabs-horizontal">
<div data-edexcoin="COIN" id="edexcoin_dashoard_section"> <div id="edexcoin_dashoard_section">
<div className="col-xlg-12 col-lg-12 col-sm-12 col-xs-12 edexcoin_dashoard_section_main_div"> <div className="col-xlg-12 col-lg-12 col-sm-12 col-xs-12 edexcoin_dashoard_section_main_div">
<div id="edexcoin_txhistory" className="panel"> <div id="edexcoin_txhistory" className="panel">
<header className="panel-heading" style={{zIndex: '10'}}> <header className="panel-heading" style={{ zIndex: '10' }}>
<div className={this.props.ActiveCoin.mode === 'basilisk' ? 'panel-actions' : 'panel-actions hide'}> <div className={ this.props.ActiveCoin.mode === 'basilisk' ? 'panel-actions' : 'panel-actions hide' }>
<div className={this.state.currentStackLength === 1 || (this.state.currentStackLength === 0 && this.state.totalStackLength === 0) ? 'hide' : 'progress progress-sm'} style={{width: '100%', marginBottom: '3px'}}> <div
<div className="progress-bar progress-bar-striped active progress-bar-indicating progress-bar-success" style={{width: 100 - (this.state.currentStackLength * 100 / this.state.totalStackLength) + '%', fontSize: '80%'}} role="progressbar"> className={ this.state.currentStackLength === 1 || (this.state.currentStackLength === 0 && this.state.totalStackLength === 0) ? 'hide' : 'progress progress-sm' }
Processing requests: {this.state.currentStackLength} / {this.state.totalStackLength} style={{ width: '100%', marginBottom: '3px' }}>
<div
className="progress-bar progress-bar-striped active progress-bar-indicating progress-bar-success"
style={{ width: 100 - (this.state.currentStackLength * 100 / this.state.totalStackLength) + '%', fontSize: '80%' }}
role="progressbar">
{ translate('SEND.PROCESSING_REQ') }: { this.state.currentStackLength } / { this.state.totalStackLength }
</div> </div>
</div> </div>
<div className={this.state.basiliskActionsMenu ? 'dropdown open' : 'dropdown'} onClick={this.toggleBasiliskActionsMenu}> <div className={ this.state.basiliskActionsMenu ? 'dropdown open' : 'dropdown' } onClick={ this.toggleBasiliskActionsMenu }>
<a className="dropdown-toggle btn-xs btn-default" data-edexcoin="COIN" id="btn_edexcoin_basilisk" data-toggle="dropdown" href="javascript:void(0)" <a
aria-expanded="false" role="button"> className="dropdown-toggle btn-xs btn-default"
<i className="icon fa-magic margin-right-10" aria-hidden="true"></i> {translate('INDEX.BASILISK_ACTIONS')} <span className="caret"></span> id="btn_edexcoin_basilisk"
href="javascript:void(0)"
aria-expanded="false"
role="button">
<i className="icon fa-magic margin-right-10" aria-hidden="true"></i> { translate('INDEX.BASILISK_ACTIONS') } <span className="caret"></span>
</a> </a>
<ul className="dropdown-menu dropdown-menu-right" aria-labelledby="btn_edexcoin_basilisk" <ul className="dropdown-menu dropdown-menu-right" aria-labelledby="btn_edexcoin_basilisk" role="menu">
role="menu">
<li role="presentation"> <li role="presentation">
<a className="btn_edexcoin_dashboard_getnotaries" data-edexcoin="COIN" id="btn_edexcoin_dashboard_getnotaries" role="menuitem" onClick={this.getDexNotariesAction}> <a
<i className="icon fa-sitemap" aria-hidden="true"></i> {translate('INDEX.GET_NOTARY_NODES_LIST')} className="btn_edexcoin_dashboard_getnotaries"
id="btn_edexcoin_dashboard_getnotaries"
role="menuitem"
onClick={ this.getDexNotariesAction }>
<i className="icon fa-sitemap" aria-hidden="true"></i> { translate('INDEX.GET_NOTARY_NODES_LIST') }
</a> </a>
</li> </li>
<li role="presentation"> <li role="presentation">
<a className="btn_edexcoin_dashboard_refresh_basilisk_conn" data-edexcoin="COIN" id="btn_edexcoin_dashboard_refresh_basilisk_conn" role="menuitem" onClick={this.basiliskConnectionAction}> <a
<i className="icon wb-refresh" aria-hidden="true"></i> {translate('INDEX.REFRESH_BASILISK_CONNECTIONS')} className="btn_edexcoin_dashboard_refresh_basilisk_conn"
id="btn_edexcoin_dashboard_refresh_basilisk_conn"
role="menuitem"
onClick={ this.basiliskConnectionAction }>
<i className="icon wb-refresh" aria-hidden="true"></i> { translate('INDEX.REFRESH_BASILISK_CONNECTIONS') }
</a> </a>
</li> </li>
<li data-edexcoin="COIN" role="presentation" className={!this.state.useCache ? 'hide' : ''}> <li role="presentation" className={ !this.state.useCache ? 'hide' : '' }>
<a className="btn_edexcoin_dashboard_fetchdata" data-edexcoin="COIN" id="btn_edexcoin_dashboard_fetchdata" role="menuitem" onClick={this.basiliskRefreshActionOne}> <a
<i className="icon fa-cloud-download" aria-hidden="true"></i> {translate('INDEX.FETCH_WALLET_DATA')} (active address) className="btn_edexcoin_dashboard_fetchdata"
id="btn_edexcoin_dashboard_fetchdata"
role="menuitem"
onClick={ this.basiliskRefreshActionOne }>
<i className="icon fa-cloud-download" aria-hidden="true"></i> { translate('INDEX.FETCH_WALLET_DATA') } ({ translate('INDEX.ACTIVE_ADDRESS') })
</a> </a>
</li> </li>
<li data-edexcoin="COIN" role="presentation" className={!this.state.useCache ? 'hide' : ''}> <li
<a role="menuitem" onClick={this.basiliskRefreshAction}> role="presentation"
<i className="icon fa-cloud-download" aria-hidden="true"></i> Fetch (all addresses) className={ !this.state.useCache || this.props.ActiveCoin.addresses && this.props.ActiveCoin.addresses.public.length === 1 ? 'hide' : '' }>
<a role="menuitem" onClick={ this.basiliskRefreshAction }>
<i className="icon fa-cloud-download" aria-hidden="true"></i> { translate('INDEX.FETCH_ALL_ADDR') }
</a> </a>
</li> </li>
<li data-edexcoin="COIN" role="presentation" className={!this.state.useCache ? 'hide' : ''}> <li role="presentation" className={ !this.state.useCache ? 'hide' : '' }>
<a className="btn_edexcoin_dashboard_refetchdata" data-edexcoin="COIN" id="btn_edexcoin_dashboard_refetchdata" role="menuitem" onClick={this.removeAndFetchNewCache}> <a
<i className="icon fa-history" aria-hidden="true"></i> {translate('INDEX.REFETCH_WALLET_DATA')} className="btn_edexcoin_dashboard_refetchdata"
id="btn_edexcoin_dashboard_refetchdata"
role="menuitem"
onClick={ this.removeAndFetchNewCache }>
<i className="icon fa-history" aria-hidden="true"></i> { translate('INDEX.REFETCH_WALLET_DATA') }
</a> </a>
</li> </li>
<li data-edexcoin="COIN" role="presentation" className={!this.state.useCache ? 'hide' : ''} style={{display: 'none'}}> <li role="presentation" className={ !this.state.useCache ? 'hide' : '' } style={{ display: 'none' }}>
<a role="menuitem" onClick={this._fetchUtxoCache}> <a role="menuitem" onClick={ this.restartBasiliskInstance }>
<i className="icon fa-history" aria-hidden="true"></i> Update UTXO <i className="icon fa-refresh" aria-hidden="true"></i> Restart Basilisk Instance (unsafe!)
</a> </a>
</li> </li>
<li data-edexcoin="COIN" role="presentation" className={!this.state.useCache ? 'hide' : ''}> <li role="presentation" className={ !this.state.useCache ? 'hide' : '' }>
<a role="menuitem" onClick={this.restartBasiliskInstance}> <a className="btn_edexcoin_dashboard_fetchdata" role="menuitem" onClick={ this._toggleViewCacheModal }>
<i className="icon fa-refresh" aria-hidden="true"></i> Restart Basilisk Instance (!) <i className="icon fa-list-alt" aria-hidden="true"></i> { translate('INDEX.VIEW_CACHE_DATA') }
</a>
</li>
<li data-edexcoin="COIN" role="presentation" className={!this.state.useCache ? 'hide' : ''}>
<a className="btn_edexcoin_dashboard_fetchdata" role="menuitem" onClick={this._toggleViewCacheModal}>
<i className="icon fa-list-alt" aria-hidden="true"></i> {translate('INDEX.VIEW_CACHE_DATA')}
</a> </a>
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
<h4 className="panel-title">{translate('INDEX.TRANSACTION_HISTORY')}</h4> <h4 className="panel-title">{ translate('INDEX.TRANSACTION_HISTORY') }</h4>
</header> </header>
<div className="panel-body"> <div className="panel-body">
<div className="row"> <div className="row">
<div className="col-sm-8"> <div className="col-sm-8">
{this.renderAddressList()} { this.renderAddressList() }
</div> </div>
{this.renderUseCacheToggle} { this.renderUseCacheToggle }
</div> </div>
<div className="row" style={{padding: '20px 0 10px 0'}}> <div className="row" style={{ padding: '20px 0 10px 0' }}>
<div className="col-sm-6"> <div className="col-sm-6">
{this.renderPaginationItemsPerPageSelector()} { this.renderPaginationItemsPerPageSelector() }
</div> </div>
<div className="col-sm-6"> <div className="col-sm-6">
<div id="kmd-tx-history-tbl_filter" className="dataTables_filter"> <div id="kmd-tx-history-tbl_filter" className="dataTables_filter">
<label> <label>
Search: <input type="search" className="form-control input-sm" 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> </label>
</div> </div>
</div> </div>
</div> </div>
<div className="row"> <div className="row">
<table className="table table-hover dataTable table-striped" data-edexcoin="COIN" id="edex-tx-history-tbl" width="100%"> <table className="table table-hover dataTable table-striped" id="edex-tx-history-tbl" width="100%">
<thead> <thead>
<tr> <tr>
<th>{translate('INDEX.DIRECTION')}</th> <th>{ translate('INDEX.DIRECTION') }</th>
<th className="hidden-xs hidden-sm">{translate('INDEX.CONFIRMATIONS')}</th> <th className="hidden-xs hidden-sm">{ translate('INDEX.CONFIRMATIONS') }</th>
<th>{translate('INDEX.AMOUNT')}</th> <th>{ translate('INDEX.AMOUNT') }</th>
<th>{translate('INDEX.TIME')}</th> <th>{ translate('INDEX.TIME') }</th>
<th>{translate('INDEX.DEST_ADDRESS')}</th> <th>{ translate('INDEX.DEST_ADDRESS') }</th>
<th className="hidden-xs hidden-sm">{translate('INDEX.TX_DETAIL')}</th> <th className="hidden-xs hidden-sm">{ translate('INDEX.TX_DETAIL') }</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{this.renderTxHistoryList()} { this.renderTxHistoryList() }
</tbody> </tbody>
<tfoot> <tfoot>
<tr> <tr>
<th>{translate('INDEX.DIRECTION')}</th> <th>{ translate('INDEX.DIRECTION') }</th>
<th>{translate('INDEX.CONFIRMATIONS')}</th> <th>{ translate('INDEX.CONFIRMATIONS') }</th>
<th>{translate('INDEX.AMOUNT')}</th> <th>{ translate('INDEX.AMOUNT') }</th>
<th>{translate('INDEX.TIME')}</th> <th>{ translate('INDEX.TIME') }</th>
<th>{translate('INDEX.DEST_ADDRESS')}</th> <th>{ translate('INDEX.DEST_ADDRESS') }</th>
<th className="hidden-xs hidden-sm">{translate('INDEX.TX_DETAIL')}</th> <th className="hidden-xs hidden-sm">{ translate('INDEX.TX_DETAIL') }</th>
</tr> </tr>
</tfoot> </tfoot>
</table> </table>
</div> </div>
{this.renderPagination()} { this.renderPagination() }
</div> </div>
</div> </div>
</div> </div>

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

@ -298,7 +298,7 @@ class WalletsNativeSend extends React.Component {
onChange={ this.updateInput } onChange={ this.updateInput }
value={ this.state.sendTo } value={ this.state.sendTo }
id="kmd_wallet_sendto" id="kmd_wallet_sendto"
placeholder="{ translate('SEND.ENTER_T_OR_Z_ADDR') }" placeholder={ translate('SEND.ENTER_T_OR_Z_ADDR') }
autoComplete="off" autoComplete="off"
required /> required />
</div> </div>

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

@ -61,11 +61,24 @@ class WalletsNativeSyncProgress extends React.Component {
return(': ' + Math.floor(currentBestChain * 100 / this.props.Dashboard.progress.remoteKMDNode.blocks) + '% (blocks ' + currentBestChain + ' / ' + this.props.Dashboard.progress.remoteKMDNode.blocks + ')'); return(': ' + Math.floor(currentBestChain * 100 / this.props.Dashboard.progress.remoteKMDNode.blocks) + '% (blocks ' + currentBestChain + ' / ' + this.props.Dashboard.progress.remoteKMDNode.blocks + ')');
} else { } else {
return (<span id="activating-komodod-tridot">...</span>); return (
<span id="activating-komodod-tridot">...</span>
);
} }
} }
} }
renderLB(_translationID) {
const _translationComponents = translate(_translationID).split('<br>');
return _translationComponents.map((_translation) =>
<span>
{_translation}
<br />
</span>
);
}
renderChainActivationNotification() { renderChainActivationNotification() {
if ((this.props.Dashboard.progress.blocks < this.props.Dashboard.progress.longestchain) || if ((this.props.Dashboard.progress.blocks < this.props.Dashboard.progress.longestchain) ||
this.props.Dashboard.progress.remoteKMDNode) { this.props.Dashboard.progress.remoteKMDNode) {
@ -81,7 +94,7 @@ class WalletsNativeSyncProgress extends React.Component {
<h4> <h4>
{ translate('INDEX.ACTIVATING_CHAIN') }{ this.renderActivatingBestChainProgress() } { translate('INDEX.ACTIVATING_CHAIN') }{ this.renderActivatingBestChainProgress() }
</h4> </h4>
<p id="extcoin-wallet-connection-alert-text">{ translate('INDEX.KMD_STARTED') }</p> <p id="extcoin-wallet-connection-alert-text">{ this.renderLB('INDEX.KMD_STARTED') }</p>
</div> </div>
); );
} else { } else {

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

@ -25,6 +25,19 @@ class WalletsNativeTxHistory extends React.Component {
Store.dispatch(toggleDashboardTxInfoModal(display, txIndex)); Store.dispatch(toggleDashboardTxInfoModal(display, txIndex));
} }
isFullySynced() {
if (this.props.Dashboard.progress &&
this.props.Dashboard.progress.balances &&
(Number(this.props.Dashboard.progress.balances) +
Number(this.props.Dashboard.progress.validated) +
Number(this.props.Dashboard.progress.bundles) +
Number(this.props.Dashboard.progress.utxo)) / 4 === 100) {
return true;
} else {
return false;
}
}
updateInput(e) { updateInput(e) {
let historyToSplit = sortByDate(this.props.ActiveCoin.txhistory); let historyToSplit = sortByDate(this.props.ActiveCoin.txhistory);
historyToSplit = historyToSplit.slice(0, e.target.value); historyToSplit = historyToSplit.slice(0, e.target.value);
@ -202,7 +215,11 @@ class WalletsNativeTxHistory extends React.Component {
} else if ( } else if (
this.props.ActiveCoin.txhistory && this.props.ActiveCoin.txhistory &&
this.props.ActiveCoin.txhistory === 'loading') { this.props.ActiveCoin.txhistory === 'loading') {
return translate('INDEX.LOADING_HISTORY'); if (this.isFullySynced()) {
return translate('INDEX.LOADING_HISTORY');
} else {
return translate('INDEX.WAIT_UNTIL_SYNCED');
}
} else if ( } else if (
this.props.ActiveCoin.txhistory && this.props.ActiveCoin.txhistory &&
(this.props.ActiveCoin.txhistory !== 'loading' && this.props.ActiveCoin.txhistory !== 'no data')) { (this.props.ActiveCoin.txhistory !== 'loading' && this.props.ActiveCoin.txhistory !== 'no data')) {

45
react/src/translate/en.js

@ -1,15 +1,22 @@
export const _lang = { export const _lang = {
'EN': { 'EN': {
'INDEX': { 'INDEX': {
'ADD_COIN': 'Add Coin',
'STOP': 'Stop',
'START': 'Start',
'UPDATE_UTXO': 'Update UTXO',
'ACTIVE_ADDRESS': 'active address',
'FETCH_ALL_ADDR': 'Fetch (all addresses)',
'NO_DATA': 'No history available', 'NO_DATA': 'No history available',
'LOADING_HISTORY': 'Loading transaction history', 'LOADING_HISTORY': 'Loading transaction history',
'FETCHING_NOTARIES_LIST': 'Fetching notaries list data', 'FETCHING_NOTARIES_LIST': 'Fetching notaries list data',
'TOTAL_NOTARIES': 'Notaries list. Total nodes count', 'TOTAL_NOTARIES': 'Notaries list. Total nodes count',
'WAIT_UNTIL_SYNCED': 'Transactions history will be available shortly after blockchain data is synced',
'CLOSE': 'Close', 'CLOSE': 'Close',
'SHOW': 'Show', 'SHOW': 'Show',
'SHOWING': 'Showing', 'SHOWING': 'Showing',
'OF': 'of', 'OF': 'of',
'TO': 'to', 'TO_ALT': 'to',
'SEARCH': 'Search', 'SEARCH': 'Search',
'PREVIOUS': 'Previous', 'PREVIOUS': 'Previous',
'NEXT': 'Next', 'NEXT': 'Next',
@ -341,7 +348,12 @@ export const _lang = {
'ADDED_TO': 'added to', 'ADDED_TO': 'added to',
'SUCCESSFULLY': 'Successfully', 'SUCCESSFULLY': 'Successfully',
'FAILED_TO_ADDCOIN': 'Failed to add iguana coin', 'FAILED_TO_ADDCOIN': 'Failed to add iguana coin',
'FAILED_SHEPHERD_HERD': 'Failed to get execute shepherd herd' 'FAILED_SHEPHERD_HERD': 'Failed to get execute shepherd herd',
'COIN_SELECTION': 'Coin Selection',
'SELECTION_NOT_FOUND': 'Local coin list is not found',
'LOCAL_UTXO_UPDATED': 'Local UTXO data is updated. Ready to send new transaction.',
'PROCESSING_UTXO': 'Processing UTXO',
'AWAITING_TX_RESP': 'Awaiting transaction data response'
}, },
'COIN_WALLETS': { 'COIN_WALLETS': {
'TX_FAILED': 'Transaction Failed', 'TX_FAILED': 'Transaction Failed',
@ -363,7 +375,8 @@ export const _lang = {
'FAILED': 'Failed', 'FAILED': 'Failed',
'SUCCESS': 'Success', 'SUCCESS': 'Success',
'MESSAGE': 'Message', 'MESSAGE': 'Message',
'EXECUTION_SECONDS': 'Execution Seconds' 'EXECUTION_SECONDS': 'Execution Seconds',
'WAIT_UNTIL_SYNCED': 'Transaction history is unavailable during synchronization progresss'
}, },
'LOGIN': { 'LOGIN': {
'PWD_REQ': 'Password is required.', 'PWD_REQ': 'Password is required.',
@ -388,6 +401,24 @@ export const _lang = {
'SAVE_APP_CONFIG': 'Save app config', 'SAVE_APP_CONFIG': 'Save app config',
'CONFIG_RESTART_REQUIRED': 'Most changes to app config require wallet restart!', 'CONFIG_RESTART_REQUIRED': 'Most changes to app config require wallet restart!',
'APP_CONFIG': 'App Config', 'APP_CONFIG': 'App Config',
'APP_INFO': 'App Info',
'APP_RELEASE': 'App Release',
'NAME': 'Name',
'VERSION': 'Version',
'SYS_INFO': 'System Info',
'ARCH': 'Architecture',
'OS_TYPE': 'OS Type',
'OS_PLATFORM': 'OS Platfrom',
'OS_RELEASE': 'OS Release',
'CPU': 'CPU',
'CPU_CORES': 'CPU Cores',
'MEM': 'Memory',
'LOCATIONS': 'Locations',
'CACHE': 'Cache',
'CONFIG': 'Config',
'BIN': 'Bin',
'DIR': 'Dir',
'ADD_PEER_IP': 'Add Peer IP'
}, },
'TX_INFO': { 'TX_INFO': {
'ADDRESS': 'address', 'ADDRESS': 'address',
@ -409,7 +440,13 @@ export const _lang = {
'AWAITING': 'Awaiting in queue', 'AWAITING': 'Awaiting in queue',
'PROCESSING': 'Processing', 'PROCESSING': 'Processing',
'ERROR_CODE': 'Error Code', 'ERROR_CODE': 'Error Code',
'WAITING': 'Waiting' 'WAITING': 'Waiting',
'PROCESSING_TRANSACTION': 'Processing transaction',
'NOTE_IT_WILL_TAKE': 'Note: it may take a few minutes to complete the transaction',
'SEND_VIA': 'Send via',
'ENTER_AN_ADDRESS': 'Enter an address',
'YOU_PICKED_OPT': 'You picked option',
'PLEASE_WAIT': 'Please wait'
} }
} }
}; };
Loading…
Cancel
Save