Browse Source

code refactoring #2

all-modes
pbca26 8 years ago
parent
commit
43d38a63e9
  1. 169
      react/src/components/addcoin/addcoin.js
  2. 77
      react/src/components/dashboard/syncOnly.js
  3. 51
      react/src/components/dashboard/walletsBalance.js
  4. 19
      react/src/components/dashboard/walletsBasiliskConnection.js
  5. 17
      react/src/components/dashboard/walletsBasiliskRefresh.js
  6. 59
      react/src/components/dashboard/walletsCacheData.js
  7. 166
      react/src/components/dashboard/walletsData.js
  8. 2
      react/src/components/dashboard/walletsNativeSend.js
  9. 17
      react/src/components/dashboard/walletsNativeSyncProgress.js
  10. 19
      react/src/components/dashboard/walletsNativeTxHistory.js
  11. 13
      react/src/translate/en.js

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>
);
}

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>

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

@ -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.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')) {

13
react/src/translate/en.js

@ -1,10 +1,16 @@
export const _lang = {
'EN': {
'INDEX': {
'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',
@ -341,7 +347,9 @@ 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'
},
'COIN_WALLETS': {
'TX_FAILED': 'Transaction Failed',
@ -363,7 +371,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.',

Loading…
Cancel
Save