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

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

@ -63,7 +63,7 @@ class AddCoin extends React.Component {
actionsMenu: false,
}));
} 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));
}
@ -248,62 +248,120 @@ class AddCoin extends React.Component {
className="form-control form-material"
name="selectedCoin"
id="addcoin_select_coin_mdl_options-login"
value={_coin}
onChange={(event) => this.updateSelectedCoin(event, i)}>
<option>{translate('INDEX.SELECT')}</option>
value={ _coin }
onChange={ (event) => this.updateSelectedCoin(event, i) }>
<option>{ translate('INDEX.SELECT') }</option>
<AddCoinOptionsCrypto />
<AddCoinOptionsAC />
<AddCoinOptionsACFiat />
</select>
</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
type="button"
className="btn btn-primary mdl_addcoin_done_btn-login"
id="mdl_addcoin_done_btn-login"
onClick={() => this.activateCoin(i)}
disabled={_item.mode === -2 }>{translate('INDEX.ACTIVATE_COIN')}</button>
onClick={ () => this.activateCoin(i) }
disabled={ _item.mode === -2 }>{ translate('INDEX.ACTIVATE_COIN') }</button>
</div>
<div className="col-sm-12 text-center">
<div className="form-group col-lg-4 col-md-4 col-sm-6 col-xs-6 style-addcoin-lbl-mdl-login">
<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} />
<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>
<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 } />
<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>
</div>
<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} />
<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>
<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 } />
<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>
</div>
<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} />
<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>
<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 } />
<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>
</div>
</div>
<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)}>
<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"
id="mdl_addcoin_done_btn-login"
onClick={ () => this.removeCoin(i) }>
<i className="fa fa-trash-o"></i>
</button>
</div>
<div className={_item.mode === '1' || _item.mode === 1 ? 'col-sm-12' : 'hide'}>
<div className={ _item.mode === '1' || _item.mode === 1 ? 'col-sm-12' : 'hide' }>
<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>
<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>
);
@ -316,7 +374,7 @@ class AddCoin extends React.Component {
return (
<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"
aria-hidden="true"
aria-labelledby="AddCoinDilogModel-login"
@ -325,51 +383,60 @@ class AddCoin extends React.Component {
<div className="modal-dialog modal-center modal-lg">
<div className="modal-content">
<div className="modal-header bg-orange-a400 wallet-send-header">
<button type="button" className="close white" 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>
</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 className="modal-body">
<button className="btn btn-primary btn-add-coin-item" onClick={this.addNewItem}>+</button>
<button className="btn btn-outline-primary btn-add-coin-item-options" onClick={this.toggleActionsMenu}>
<i className={this.state.actionsMenu ? 'fa-chevron-up' : 'fa-chevron-down' }></i>
<button className="btn btn-primary btn-add-coin-item" onClick={ this.addNewItem }>+</button>
<button className="btn btn-outline-primary btn-add-coin-item-options" onClick={ this.toggleActionsMenu }>
<i className={ this.state.actionsMenu ? 'fa-chevron-up' : 'fa-chevron-down' }></i>
</button>
<span className={!this.state.actionsMenu ? 'hide' : ''}>
<button className="btn btn-outline-primary btn-save-coin-selection" onClick={this.saveCoinSelection}>{translate('ADD_COIN.SAVE_SELECTION')}</button>
<button className="btn btn-outline-primary btn-load-coin-selection" onClick={this.loadCoinSelection}>{translate('ADD_COIN.LOAD_SELECTION')}</button>
<span className={ !this.state.actionsMenu ? 'hide' : '' }>
<button
className="btn btn-outline-primary btn-save-coin-selection"
onClick={ this.saveCoinSelection }>{ translate('ADD_COIN.SAVE_SELECTION') }</button>
<button
className="btn btn-outline-primary btn-load-coin-selection"
onClick={ this.loadCoinSelection }>{ translate('ADD_COIN.LOAD_SELECTION') }</button>
</span>
{this.renderCoinSelectors()}
<div className={this.state.coins.length > 1 ? 'col-sm-12' : 'hide'} style={{textAlign: 'center', margin: '20px 0'}}>
{ this.renderCoinSelectors() }
<div
className={ this.state.coins.length > 1 ? 'col-sm-12' : 'hide' }
style={{ textAlign: 'center', margin: '20px 0' }}>
<button
type="button"
className="btn btn-primary col-sm-4"
style={{float: 'none'}}
data-toggle="modal"
data-dismiss="modal"
style={{ float: 'none' }}
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 className="col-sm-12">
<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>
<strong>{translate('INDEX.BASILISK_MODE')}:</strong> {translate('INDEX.BASILISK_MODE_DESC')}
<strong>{ translate('INDEX.BASILISK_MODE') }:</strong> { translate('INDEX.BASILISK_MODE_DESC') }
</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>
<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>
<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>.
<button type="button" className="close" aria-label="Close">
<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 className={'modal-backdrop ' + (this.state.display ? 'show in' : 'fade hide')}></div>
<div className={ 'modal-backdrop ' + (this.state.display ? 'show in' : 'fade hide') }></div>
</div>
);
}

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

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

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

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

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

@ -338,19 +338,19 @@ class CoinTile extends React.Component {
return (
items.map((item, i) =>
<CoinTileItem key={i} i={i} item={item} {...this.props} />)
<CoinTileItem key={ i } i={ i } item={ item } {...this.props} />)
);
}
render() {
return (
<div className="page-aside" style={{paddingTop: '80px'}}>
<div className="page-aside" style={{ paddingTop: '80px' }}>
<div className="page-aside-switch">
<i className="icon md-chevron-left" aria-hidden="true"></i>
<i className="icon md-chevron-right" aria-hidden="true"></i>
</div>
<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-actions">
<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 />
</div>
</div>
<h3 className="panel-title">{translate('INDEX.ACTIVE_COINS')}</h3>
<h3 className="panel-title">{ translate('INDEX.ACTIVE_COINS') }</h3>
</div>
</div>
<div className="wallet-widgets-list" data-plugin="pageAsideScroll">
<div className="wallet-widgets-list">
<div data-role="container">
<div data-role="content">
<div className="list-group row wallet-widgets-row">
{this.renderTiles()}
{ this.renderTiles() }
</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(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) {
Store.dispatch(getAddressesByAccount(coin, mode));
}
@ -134,14 +137,19 @@ class CoinTileItem extends React.Component {
const { item } = this.props;
return (
<div className="list-group-item col-xlg-6 col-lg-12 wallet-widgets-info" data-edexcoincode="{item.coin}">
<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)}>
<a className="avatar margin-bottom-5" href="javascript:void(0)" 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" data-edexcoincode="{item.coin}" data-toggle="tooltip" data-placement="top" data-original-title="{item.modetip}">{item.modecode}</span>
<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="widget-content text-center bg-white padding-20 edexcoin-logo"
onClick={ () => this.dashboardChangeActiveCoin(item.coin, item.mode) }>
<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>
<div className="coin-name">{item.coinname} ({item.coinlogo.toUpperCase()})</div>
<div className="coin-name">{ item.coinname } ({ item.coinlogo.toUpperCase() })</div>
</div>
</div>
</div>

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

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

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

@ -4,7 +4,7 @@ import { translate } from '../../translate/translate';
class EDEX extends React.Component {
render() {
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">
<h2>Coming Soon!</h2>
</div>

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

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

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

@ -48,35 +48,56 @@ class LoginModal extends React.Component {
if (this.props.Dashboard.activateLoginModal) {
return (
<div>
<div className={'modal modal-3d-sign add-coin-modal ' + (this.state.display ? 'show in' : 'fade hide')} id="AddCoinDilogModel-login" aria-hidden="true" aria-labelledby="AddCoinDilogModel-login" role="dialog" tabIndex="-1">
<div
className={ 'modal modal-3d-sign add-coin-modal ' + (this.state.display ? 'show in' : 'fade hide') }
id="AddCoinDilogModel-login"
aria-hidden="true"
aria-labelledby="AddCoinDilogModel-login"
role="dialog"
tabIndex="-1">
<div className="modal-dialog modal-center modal-lg">
<div className="modal-content">
<div className="modal-header bg-orange-a400 wallet-send-header">
<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>
</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 className="modal-body">
<div id="wallet-login">
<div className="page animsition vertical-align text-center fade-in" data-animsition-in="fade-in" data-animsition-out="fade-out">
<div className="page animsition vertical-align text-center fade-in">
<div className="page-content vertical-align-middle">
<div className="brand">
<img className="brand-img" src="assets/images/easydex-logo-big.png" alt="SuperNET Iguana" />
</div>
<div id="section-login" className={this.state.activeLoginSection === 'login' ? 'show' : 'hide'}>
<h4 style={{ color: '#fff' }} id="login-welcome">{translate('INDEX.WELCOME_LOGIN')}</h4>
<div id="section-login" className={ this.state.activeLoginSection === 'login' ? 'show' : 'hide' }>
<h4 style={{ color: '#fff' }} id="login-welcome">{ translate('INDEX.WELCOME_LOGIN') }</h4>
<div className="login-form">
<div className="form-group form-material floating">
<input type={this.state.seedInputVisibility ? 'text' : 'password'} 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>
<input
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>
</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>

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

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

@ -33,13 +33,22 @@ class ReceiveCoin extends React.Component {
return (
<td>
<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>
<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>
<span className="label label-default margin-left-10 action" title="Check" onClick={() => this._checkAddressBasilisk(address)}>
<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>
<span
className="label label-default margin-left-10 action"
title="Check"
onClick={ () => this._checkAddressBasilisk(address) }>
<i className="icon fa-database"></i>
</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>
</span>
</td>
@ -48,9 +57,12 @@ class ReceiveCoin extends React.Component {
return (
<td>
<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>
<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>
);
}
@ -65,19 +77,21 @@ class ReceiveCoin extends React.Component {
for (let i = 0; i < this.props.addresses.public.length; i++) {
let address = this.props.addresses.public[i];
if (this.props.mode === 'basilisk' && address.amount === 'N/A') {
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';
}
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';
}
items.push(
<tr key={address.address}>
{this.renderAddressActions(address.address)}
<td>{address.address}</td>
<td>{address.amount}</td>
<td>{address.interest ? address.interest : 'N/A'}</td>
<tr key={ address.address }>
{ this.renderAddressActions(address.address) }
<td>{ address.address }</td>
<td>{ address.amount }</td>
<td>{ address.interest ? address.interest : 'N/A' }</td>
</tr>
);
}
@ -89,38 +103,40 @@ class ReceiveCoin extends React.Component {
}
render() {
if (this.props && this.props.receive && this.props.mode !== 'native') {
if (this.props &&
this.props.receive &&
this.props.mode !== 'native') {
return (
<div data-edexcoin="COIN" id="edexcoin_recieve">
<div id="edexcoin_recieve">
<div className="col-xs-12 margin-top-20">
<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="panel">
<header className="panel-heading">
<div className="panel-actions">
</div>
<h4 className="panel-title">{translate('INDEX.RECEIVING_ADDRESS')}</h4>
<h4 className="panel-title">{ translate('INDEX.RECEIVING_ADDRESS') }</h4>
</header>
<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>
<tr>
<th>{translate('INDEX.TYPE')}</th>
<th>{translate('INDEX.ADDRESS')}</th>
<th>{translate('INDEX.BALANCE')}</th>
<th>{translate('INDEX.INTEREST')}</th>
<th>{ translate('INDEX.TYPE') }</th>
<th>{ translate('INDEX.ADDRESS') }</th>
<th>{ translate('INDEX.BALANCE') }</th>
<th>{ translate('INDEX.INTEREST') }</th>
</tr>
</thead>
<tbody>
{this.renderAddressList()}
{ this.renderAddressList() }
</tbody>
<tfoot>
<tr>
<th>{translate('INDEX.TYPE')}</th>
<th>{translate('INDEX.ADDRESS')}</th>
<th>{translate('INDEX.BALANCE')}</th>
<th>{translate('INDEX.INTEREST')}</th>
<th>{ translate('INDEX.TYPE') }</th>
<th>{ translate('INDEX.ADDRESS') }</th>
<th>{ translate('INDEX.BALANCE') }</th>
<th>{ translate('INDEX.INTEREST') }</th>
</tr>
</tfoot>
</table>

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

@ -154,7 +154,7 @@ class SendCoin extends React.Component {
style={{ marginTop: '10px' }}
className={ isReadyToUpdate ? 'btn btn-primary waves-effect waves-light' : 'hide' }
onClick={ this._fetchNewUTXOData } disabled={ waitUntilCallIsFinished }>
{waitUntilCallIsFinished ? translate('SEND.LOCKED_PLEASE_WAIT') + '...' : translate('SEND.UPDATE')}
{ waitUntilCallIsFinished ? translate('SEND.LOCKED_PLEASE_WAIT') + '...' : translate('SEND.UPDATE') }
</button>
</div>
);
@ -249,7 +249,7 @@ class SendCoin extends React.Component {
return (
<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>
);
} else if (this.state.sendApiType) {
@ -258,28 +258,36 @@ class SendCoin extends React.Component {
return (
<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>
);
} else {
return (
<span>- Select Transparent or Private Address -</span>
<span>- { translate('SEND.SELECT_T_OR_Z_ADDR') } -</span>
);
}
}
renderAddressList() {
return (
<div className={'btn-group bootstrap-select form-control form-material showkmdwalletaddrs show-tick ' + (this.state.addressSelectorOpen ? 'open' : '')}>
<button type="button" className="btn dropdown-toggle btn-info" data-toggle="dropdown" data-id="kmd_wallet_send_from" title="- Select Transparent or Private 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>
<div className={ 'btn-group bootstrap-select form-control form-material showkmdwalletaddrs show-tick ' + (this.state.addressSelectorOpen ? 'open' : '') }>
<button
type="button"
className="btn dropdown-toggle btn-info"
title={ '-' + translate('SEND.SELECT_T_OR_Z_ADDR') + '-' }
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>
<div className="dropdown-menu open">
<ul className="dropdown-menu inner" role="menu">
<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>
{this.renderAddressByType('public')}
{ this.renderAddressByType('public') }
</ul>
</div>
</div>
@ -386,7 +394,8 @@ class SendCoin extends React.Component {
.then(function(json) {
console.log('sendData', sendData);
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'));
if (sendData.sendsig === 1) {
@ -457,7 +466,7 @@ class SendCoin extends React.Component {
console.log(result);
resolve(result);
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, {
utxoMethodInProgress: false,
@ -466,10 +475,10 @@ class SendCoin extends React.Component {
}.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() {
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()
.then(function(gettxdata) {
@ -544,14 +553,17 @@ class SendCoin extends React.Component {
} else if (key === 'rawtx') {
return this.renderSignedTx(true);
} 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 (
<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 {
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 (
<span>{this.props.ActiveCoin.lastSendToResponse.result}</span>
<span>{ this.props.ActiveCoin.lastSendToResponse.result }</span>
);
} else {
return (
@ -562,11 +574,11 @@ class SendCoin extends React.Component {
} else if (key === 'error') {
if (Object.keys(this.props.ActiveCoin.lastSendToResponse[key]).length) {
return (
<span>{JSON.stringify(this.props.ActiveCoin.lastSendToResponse[key], null, '\t')}</span>
<span>{ JSON.stringify(this.props.ActiveCoin.lastSendToResponse[key], null, '\t') }</span>
);
} else {
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') {
@ -581,7 +593,7 @@ class SendCoin extends React.Component {
}
} else if (key === 'txid' || key === 'sent') {
return (
<span>{this.props.ActiveCoin.lastSendToResponse[key]}</span>
<span>{ this.props.ActiveCoin.lastSendToResponse[key] }</span>
);
} else if (key === 'tag') {
return null;
@ -596,9 +608,9 @@ class SendCoin extends React.Component {
for (let key in _response) {
if (key !== 'tag') {
items.push(
<tr key={key}>
<td>{key}</td>
<td>{this.renderKey(key)}</td>
<tr key={ key }>
<td>{ key }</td>
<td>{ this.renderKey(key) }</td>
</tr>
);
}
@ -607,10 +619,10 @@ class SendCoin extends React.Component {
return items;
} else {
return (
<div style={{padding: '20px', textAlign: 'center'}}>
<div style={{padding: '10px 0'}}>
Processing transaction...<br />
Note: it may take a few minutes to complete the transaction.
<div style={{ padding: '20px', textAlign: 'center' }}>
<div style={{ padding: '10px 0' }}>
{ translate('SEND.PROCESSING_TRANSACTION') }...<br />
{ translate('SEND.NOTE_IT_WILL_TAKE') }.
</div>
<div className="loader-wrapper active">
<div className="loader-layer loader-blue">
@ -687,11 +699,25 @@ class SendCoin extends React.Component {
return (
<div className="row">
<div className="col-lg-6 form-group form-material">
<label 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 />
<label
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 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
</button>
</div>
@ -710,7 +736,10 @@ class SendCoin extends React.Component {
<div className="pull-left margin-right-10">
<input type="checkbox" id="edexcoin_send_api_type" />
</div>
<label className="padding-top-3" htmlFor="edexcoin_send_api_type" onClick={this.toggleSendAPIType}>Send via sendtoaddress API</label>
<label
className="padding-top-3"
htmlFor="edexcoin_send_api_type"
onClick={ this.toggleSendAPIType }>{ translate('SEND.SEND_VIA') } sendtoaddress API</label>
</div>
</div>
);
@ -720,80 +749,119 @@ class SendCoin extends React.Component {
}
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 (
<div className="col-sm-12 padding-top-10" id="edexcoin_send">
<div className="col-xlg-12 col-md-12 col-sm-12 col-xs-12">
<div className="steps row" style={{marginTop: '10px'}}>
<div className={this.state.currentStep === 0 ? 'step col-md-4 current' : 'step col-md-4'} id="edexcoin_send_step_1">
<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">
<span className="step-number">1</span>
<div className="step-desc">
<span className="step-title">{translate('INDEX.FILL_SEND_FORM')}</span>
<p>{translate('INDEX.FILL_SEND_DETAILS')}</p>
<span className="step-title">{ translate('INDEX.FILL_SEND_FORM') }</span>
<p>{ translate('INDEX.FILL_SEND_DETAILS') }</p>
</div>
</div>
<div className={this.state.currentStep === 1 ? 'step col-md-4 current' : 'step col-md-4'} 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>
<div className="step-desc">
<span className="step-title">{translate('INDEX.CONFIRMING')}</span>
<p>{translate('INDEX.CONFIRM_DETAILS')}</p>
<span className="step-title">{ translate('INDEX.CONFIRMING') }</span>
<p>{ translate('INDEX.CONFIRM_DETAILS') }</p>
</div>
</div>
<div className={this.state.currentStep === 2 ? 'step col-md-4 current' : 'step col-md-4'} 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>
<div className="step-desc">
<span className="step-title">{translate('INDEX.PROCESSING_TX')}</span>
<p>{translate('INDEX.PROCESSING_DETAILS')}</p>
<span className="step-title">{ translate('INDEX.PROCESSING_TX') }</span>
<p>{ translate('INDEX.PROCESSING_DETAILS') }</p>
</div>
</div>
</div>
<div className={this.state.currentStep === 0 ? 'panel' : 'panel hide'} id="edexcoin-send-screen">
<div className={ this.state.currentStep === 0 ? 'panel' : 'panel hide' } id="edexcoin-send-screen">
<div className="panel-heading">
<h3 data-edexcoin="COIN" className="panel-title">
{translate('INDEX.SEND')} {this.props.ActiveCoin.coin}
<h3 className="panel-title">
{ translate('INDEX.SEND') } { this.props.ActiveCoin.coin }
</h3>
</div>
<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()}
<div className="row">
<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>
{this.renderAddressList()}
<div className={ this.props.ActiveCoin.mode === 'basilisk' ? 'col-xlg-12 form-group form-material' : 'hide' }>
<label className="control-label" htmlFor="edexcoin_send_from">{ translate('INDEX.SEND_FROM') }</label>
{ this.renderAddressList() }
</div>
</div>
{this.renderOASendUI()}
{ this.renderOASendUI() }
<div className="row">
<div className="col-xlg-12 form-group form-material">
<label className="control-label" data-edexcoin="COIN" htmlFor="edexcoin_sendto">{translate('INDEX.SEND_TO')}</label>
<input type="text" className="form-control" id="edexcoin_sendto" name="sendTo" placeholder="Enter address" autoComplete="off" value={this.state.sendTo} onChange={this.updateInput} required />
<label className="control-label" htmlFor="edexcoin_sendto">{ translate('INDEX.SEND_TO') }</label>
<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 className="col-lg-6 form-group form-material">
<label className="control-label" htmlFor="edexcoin_amount" data-edexcoin="COIN" id="edexcoin_amount_label">
{this.props.ActiveCoin.coin}
<label className="control-label" htmlFor="edexcoin_amount" id="edexcoin_amount_label">
{ this.props.ActiveCoin.coin }
</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 className="col-lg-6 form-group form-material">
<label className="control-label" data-edexcoin="COIN" htmlFor="edexcoin_fee">{translate('INDEX.FEE')}</label>
<input type="text" className="form-control" id="edexcoin_fee" name="fee" defaultValue={this.state.fee} value={this.state.fee} placeholder="0.000" autoComplete="off" onChange={this.updateInput} />
<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 } />
</div>
<div className="col-lg-12">
<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>
</div>
<div className="col-lg-10 margin-top-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>
<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>
{this.renderUTXOCacheInfo()}
{ this.renderUTXOCacheInfo()}
<div className="col-lg-12">
<button type="button" className="btn btn-primary waves-effect waves-light pull-right edexcoin_send_coins_btn_step1" onClick={() => this.changeSendCoinStep(1)}>
{translate('INDEX.SEND')} {Number(this.state.amount) - Number(this.state.fee)} {this.props.ActiveCoin.coin}
<button
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>
</div>
</div>
@ -802,64 +870,78 @@ class SendCoin extends React.Component {
</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-body">
<div className="row">
<div className="col-xs-12">
<b>{translate('INDEX.TO')}</b>
<strong>{translate('INDEX.TO')}</strong>
</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">
<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 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">
<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>
<br />
<div className="row">
<div className="col-xs-12">
<b>{translate('INDEX.FROM')}</b>
<strong>{ translate('INDEX.FROM') }</strong>
</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'}}>
<span id="mdl_confirm_currency_sendfrom_total_dedcut">{Number(this.state.amount) - Number(this.state.fee)}</span> {this.props.ActiveCoin.coin}
<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' }}>
<span id="mdl_confirm_currency_sendfrom_total_dedcut">{ Number(this.state.amount) - Number(this.state.fee) }</span> { this.props.ActiveCoin.coin }
</div>
</div>
<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">
<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 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-heading">
<h4 className="panel-title">{translate('INDEX.TRANSACTION_RESULT')}</h4>
<div className={!this.state.sendSig ? 'hide' : 'center'}>
You picked option "{translate('INDEX.DONT_SEND')}"
<h4 className="panel-title">{ translate('INDEX.TRANSACTION_RESULT') }</h4>
<div className={ !this.state.sendSig ? 'hide' : 'center' }>
{ translate('INDEX.YOU_PICKED_OPT') } "{ translate('INDEX.DONT_SEND') }"
</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>
<tr>
<th>{translate('INDEX.KEY')}</th>
<th>{translate('INDEX.INFO')}</th>
<th>{ translate('INDEX.KEY') }</th>
<th>{ translate('INDEX.INFO') }</th>
</tr>
</thead>
<tbody>
{this.renderSendCoinResponse()}
{ this.renderSendCoinResponse() }
</tbody>
</table>
<div className="widget-body-footer">
<div className="widget-actions margin-bottom-15 margin-right-15">
<button type="button" className="btn btn-primary" 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>

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

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

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

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

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

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

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

@ -14,22 +14,23 @@ class WalletsBasiliskConnection extends React.Component {
}
render() {
if (this.props && this.props.Dashboard.basiliskConnection) {
if (this.props &&
this.props.Dashboard.basiliskConnection) {
return (
<div>
<div className="modal show" id="RefreshBasiliskConnectionsMdl" aria-hidden="false" role="dialog">
<div className="modal-dialog modal-center modal-md">
<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">
<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>
<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 className="sr-only">{translate('INDEX.CLOSE')}</span>
<span className="sr-only">{ translate('INDEX.CLOSE') }</span>
</button>
</div>
<div className="modal-body" style={{textAlign: 'center'}}>
<div className="modal-body" style={{ textAlign: 'center' }}>
<div className="loader-wrapper active">
<div className="loader-layer loader-blue">
<div className="loader-circle-left">
@ -69,13 +70,13 @@ class WalletsBasiliskConnection extends React.Component {
</div>
</div>
<h5 className="text-left">
{translate('IAPI.CON_STATUS') + '... ' + this.props.Dashboard.connectedNotaries.current + '/' + this.props.Dashboard.connectedNotaries.total + ': ' + this.props.Dashboard.connectedNotaries.currentNodeName} <span className="pull-right" id="basilisk-connections-refresh-percent">{Math.floor(this.props.Dashboard.connectedNotaries.current * 100 / this.props.Dashboard.connectedNotaries.total)}%</span>
{ translate('IAPI.CON_STATUS') + '... ' + this.props.Dashboard.connectedNotaries.current + '/' + this.props.Dashboard.connectedNotaries.total + ': ' + this.props.Dashboard.connectedNotaries.currentNodeName} <span className="pull-right" id="basilisk-connections-refresh-percent">{ Math.floor(this.props.Dashboard.connectedNotaries.current * 100 / this.props.Dashboard.connectedNotaries.total) }%</span>
</h5>
<div className="progress progress-sm">
<div className="progress-bar progress-bar-info progress-bar-striped active" style={{width: Math.floor(this.props.Dashboard.connectedNotaries.current * 100 / this.props.Dashboard.connectedNotaries.total) + '%', fontSize: '80%'}} role="progressbar" id="basilisk-connections-refresh-progress-bar"></div>
<div className="progress-bar progress-bar-info progress-bar-striped active" style={{ width: Math.floor(this.props.Dashboard.connectedNotaries.current * 100 / this.props.Dashboard.connectedNotaries.total) + '%', fontSize: '80%' }} role="progressbar" id="basilisk-connections-refresh-progress-bar"></div>
</div>
<pre 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>
</div>
</div>

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

@ -3,14 +3,15 @@ import { translate } from '../../translate/translate';
class WalletsBasiliskRefresh extends React.Component {
render() {
if (this.props && this.props.Dashboard.basiliskRefresh) {
if (this.props &&
this.props.Dashboard.basiliskRefresh) {
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">
<div className="panel">
<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">
<a className="panel-action icon md-refresh-alt" aria-hidden="true"></a>
</div>
@ -19,11 +20,11 @@ class WalletsBasiliskRefresh extends React.Component {
<table className="table table-hover table-striped tbl_edexcoin_dashboard_basilisk_refresh_status">
<thead>
<tr>
<th>{translate('INDEX.ADDRESS')}</th>
<th>{translate('INDEX.LIST_UNSPENT')}</th>
<th>{translate('INDEX.LIST_TRANSACTIONS')}</th>
<th>{translate('INDEX.GET_BALANCE')}</th>
<th>{translate('INDEX.REFRESH')}</th>
<th>{ translate('INDEX.ADDRESS') }</th>
<th>{ translate('INDEX.LIST_UNSPENT') }</th>
<th>{ translate('INDEX.LIST_TRANSACTIONS') }</th>
<th>{ translate('INDEX.GET_BALANCE') }</th>
<th>{ translate('INDEX.REFRESH') }</th>
</tr>
</thead>
<tbody>

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

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

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

@ -286,7 +286,7 @@ class WalletsData extends React.Component {
className="dataTables_info"
id="kmd-tx-history-tbl_info"
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 className="col-sm-7">
<div className="dataTables_paginate paging_simple_numbers" id="kmd-tx-history-tbl_paginate">
@ -477,7 +477,9 @@ class WalletsData extends React.Component {
items.push(
<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>
);
}
@ -494,7 +496,8 @@ class WalletsData extends React.Component {
this.props.ActiveCoin.addresses.public.length) {
for (let i = 0; i < this.props.ActiveCoin.addresses.public.length; i++) {
if (this.props.ActiveCoin.addresses.public[i].address === 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;
} else {
const address = this.props.ActiveCoin.addresses.public[i].address;
@ -512,12 +515,12 @@ class WalletsData extends React.Component {
if (this.state.currentAddress) {
return (
<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>
);
} else {
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.ActiveCoin.mode === 'basilisk') {
return (
<div className={'btn-group bootstrap-select form-control form-material showkmdwalletaddrs show-tick ' + (this.state.addressSelectorOpen ? 'open' : '')}>
<button type="button" className="btn dropdown-toggle btn-info" data-toggle="dropdown" data-id="kmd_wallet_send_from" title="- Select Transparent or Private 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>
<div className={ 'btn-group bootstrap-select form-control form-material showkmdwalletaddrs show-tick ' + (this.state.addressSelectorOpen ? 'open' : '') }>
<button
type="button"
className="btn dropdown-toggle btn-info"
title={ '-' + translate('KMD_NATIVE.SELECT_ADDRESS') + '-' }
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>
<div className="dropdown-menu open">
<ul className="dropdown-menu inner" role="menu">
<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>
{this.renderAddressByType('public')}
{ this.renderAddressByType('public') }
</ul>
</div>
</div>
@ -560,118 +571,139 @@ class WalletsData extends React.Component {
<WalletsBasiliskConnection {...this.props} />
<WalletsNotariesList {...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="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 id="edexcoin_txhistory" className="panel">
<header className="panel-heading" style={{zIndex: '10'}}>
<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 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">
Processing requests: {this.state.currentStackLength} / {this.state.totalStackLength}
<header className="panel-heading" style={{ zIndex: '10' }}>
<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
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 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)"
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>
<div className={ this.state.basiliskActionsMenu ? 'dropdown open' : 'dropdown' } onClick={ this.toggleBasiliskActionsMenu }>
<a
className="dropdown-toggle btn-xs btn-default"
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>
<ul className="dropdown-menu dropdown-menu-right" aria-labelledby="btn_edexcoin_basilisk"
role="menu">
<ul className="dropdown-menu dropdown-menu-right" aria-labelledby="btn_edexcoin_basilisk" role="menu">
<li role="presentation">
<a className="btn_edexcoin_dashboard_getnotaries" data-edexcoin="COIN" 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
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>
</li>
<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}>
<i className="icon wb-refresh" aria-hidden="true"></i> {translate('INDEX.REFRESH_BASILISK_CONNECTIONS')}
<a
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>
</li>
<li data-edexcoin="COIN" 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}>
<i className="icon fa-cloud-download" aria-hidden="true"></i> {translate('INDEX.FETCH_WALLET_DATA')} (active address)
<li role="presentation" className={ !this.state.useCache ? 'hide' : '' }>
<a
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>
</li>
<li data-edexcoin="COIN" role="presentation" className={!this.state.useCache ? 'hide' : ''}>
<a role="menuitem" onClick={this.basiliskRefreshAction}>
<i className="icon fa-cloud-download" aria-hidden="true"></i> Fetch (all addresses)
<li
role="presentation"
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>
</li>
<li data-edexcoin="COIN" 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}>
<i className="icon fa-history" aria-hidden="true"></i> {translate('INDEX.REFETCH_WALLET_DATA')}
<li role="presentation" className={ !this.state.useCache ? 'hide' : '' }>
<a
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>
</li>
<li data-edexcoin="COIN" role="presentation" className={!this.state.useCache ? 'hide' : ''} style={{display: 'none'}}>
<a role="menuitem" onClick={this._fetchUtxoCache}>
<i className="icon fa-history" aria-hidden="true"></i> Update UTXO
<li role="presentation" className={ !this.state.useCache ? 'hide' : '' } style={{ display: 'none' }}>
<a role="menuitem" onClick={ this.restartBasiliskInstance }>
<i className="icon fa-refresh" aria-hidden="true"></i> Restart Basilisk Instance (unsafe!)
</a>
</li>
<li data-edexcoin="COIN" role="presentation" className={!this.state.useCache ? 'hide' : ''}>
<a role="menuitem" onClick={this.restartBasiliskInstance}>
<i className="icon fa-refresh" aria-hidden="true"></i> Restart Basilisk Instance (!)
</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')}
<li 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>
</li>
</ul>
</div>
</div>
<h4 className="panel-title">{translate('INDEX.TRANSACTION_HISTORY')}</h4>
<h4 className="panel-title">{ translate('INDEX.TRANSACTION_HISTORY') }</h4>
</header>
<div className="panel-body">
<div className="row">
<div className="col-sm-8">
{this.renderAddressList()}
{ this.renderAddressList() }
</div>
{this.renderUseCacheToggle}
{ this.renderUseCacheToggle }
</div>
<div className="row" style={{padding: '20px 0 10px 0'}}>
<div className="row" style={{ padding: '20px 0 10px 0' }}>
<div className="col-sm-6">
{this.renderPaginationItemsPerPageSelector()}
{ this.renderPaginationItemsPerPageSelector() }
</div>
<div className="col-sm-6">
<div id="kmd-tx-history-tbl_filter" className="dataTables_filter">
<label>
Search: <input type="search" className="form-control input-sm" aria-controls="kmd-tx-history-tbl" disabled="true" />
{ translate('INDEX.SEARCH') }: <input type="search" className="form-control input-sm" aria-controls="kmd-tx-history-tbl" disabled="true" />
</label>
</div>
</div>
</div>
<div className="row">
<table className="table table-hover dataTable table-striped" data-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>
<tr>
<th>{translate('INDEX.DIRECTION')}</th>
<th className="hidden-xs hidden-sm">{translate('INDEX.CONFIRMATIONS')}</th>
<th>{translate('INDEX.AMOUNT')}</th>
<th>{translate('INDEX.TIME')}</th>
<th>{translate('INDEX.DEST_ADDRESS')}</th>
<th className="hidden-xs hidden-sm">{translate('INDEX.TX_DETAIL')}</th>
<th>{ translate('INDEX.DIRECTION') }</th>
<th className="hidden-xs hidden-sm">{ translate('INDEX.CONFIRMATIONS') }</th>
<th>{ translate('INDEX.AMOUNT') }</th>
<th>{ translate('INDEX.TIME') }</th>
<th>{ translate('INDEX.DEST_ADDRESS') }</th>
<th className="hidden-xs hidden-sm">{ translate('INDEX.TX_DETAIL') }</th>
</tr>
</thead>
<tbody>
{this.renderTxHistoryList()}
{ this.renderTxHistoryList() }
</tbody>
<tfoot>
<tr>
<th>{translate('INDEX.DIRECTION')}</th>
<th>{translate('INDEX.CONFIRMATIONS')}</th>
<th>{translate('INDEX.AMOUNT')}</th>
<th>{translate('INDEX.TIME')}</th>
<th>{translate('INDEX.DEST_ADDRESS')}</th>
<th className="hidden-xs hidden-sm">{translate('INDEX.TX_DETAIL')}</th>
<th>{ translate('INDEX.DIRECTION') }</th>
<th>{ translate('INDEX.CONFIRMATIONS') }</th>
<th>{ translate('INDEX.AMOUNT') }</th>
<th>{ translate('INDEX.TIME') }</th>
<th>{ translate('INDEX.DEST_ADDRESS') }</th>
<th className="hidden-xs hidden-sm">{ translate('INDEX.TX_DETAIL') }</th>
</tr>
</tfoot>
</table>
</div>
{this.renderPagination()}
{ this.renderPagination() }
</div>
</div>
</div>

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

@ -298,7 +298,7 @@ class WalletsNativeSend extends React.Component {
onChange={ this.updateInput }
value={ this.state.sendTo }
id="kmd_wallet_sendto"
placeholder="{ translate('SEND.ENTER_T_OR_Z_ADDR') }"
placeholder={ translate('SEND.ENTER_T_OR_Z_ADDR') }
autoComplete="off"
required />
</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 + ')');
} 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() {
if ((this.props.Dashboard.progress.blocks < this.props.Dashboard.progress.longestchain) ||
this.props.Dashboard.progress.remoteKMDNode) {
@ -81,7 +94,7 @@ class WalletsNativeSyncProgress extends React.Component {
<h4>
{ translate('INDEX.ACTIVATING_CHAIN') }{ this.renderActivatingBestChainProgress() }
</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>
);
} else {

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

@ -25,6 +25,19 @@ class WalletsNativeTxHistory extends React.Component {
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) {
let historyToSplit = sortByDate(this.props.ActiveCoin.txhistory);
historyToSplit = historyToSplit.slice(0, e.target.value);
@ -202,7 +215,11 @@ class WalletsNativeTxHistory extends React.Component {
} else if (
this.props.ActiveCoin.txhistory &&
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 (
this.props.ActiveCoin.txhistory &&
(this.props.ActiveCoin.txhistory !== 'loading' && this.props.ActiveCoin.txhistory !== 'no data')) {

45
react/src/translate/en.js

@ -1,15 +1,22 @@
export const _lang = {
'EN': {
'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',
'LOADING_HISTORY': 'Loading transaction history',
'FETCHING_NOTARIES_LIST': 'Fetching notaries list data',
'TOTAL_NOTARIES': 'Notaries list. Total nodes count',
'WAIT_UNTIL_SYNCED': 'Transactions history will be available shortly after blockchain data is synced',
'CLOSE': 'Close',
'SHOW': 'Show',
'SHOWING': 'Showing',
'OF': 'of',
'TO': 'to',
'TO_ALT': 'to',
'SEARCH': 'Search',
'PREVIOUS': 'Previous',
'NEXT': 'Next',
@ -341,7 +348,12 @@ export const _lang = {
'ADDED_TO': 'added to',
'SUCCESSFULLY': 'Successfully',
'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': {
'TX_FAILED': 'Transaction Failed',
@ -363,7 +375,8 @@ export const _lang = {
'FAILED': 'Failed',
'SUCCESS': 'Success',
'MESSAGE': 'Message',
'EXECUTION_SECONDS': 'Execution Seconds'
'EXECUTION_SECONDS': 'Execution Seconds',
'WAIT_UNTIL_SYNCED': 'Transaction history is unavailable during synchronization progresss'
},
'LOGIN': {
'PWD_REQ': 'Password is required.',
@ -388,6 +401,24 @@ export const _lang = {
'SAVE_APP_CONFIG': 'Save app config',
'CONFIG_RESTART_REQUIRED': 'Most changes to app config require wallet restart!',
'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': {
'ADDRESS': 'address',
@ -409,7 +440,13 @@ export const _lang = {
'AWAITING': 'Awaiting in queue',
'PROCESSING': 'Processing',
'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