lukechilds
/
EasyDEX-GUI
mirror of https://github.com/lukechilds/EasyDEX-GUI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

code refactoring #2

all-modes
pbca26 8 years ago
parent
4e31cc1bd7
commit
43d38a63e9
11 changed files with 393 additions and 216 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 125
      react/src/components/addcoin/addcoin.js
  2. 67
      react/src/components/dashboard/syncOnly.js
  3. 21
      react/src/components/dashboard/walletsBalance.js
  4. 3
      react/src/components/dashboard/walletsBasiliskConnection.js
  5. 5
      react/src/components/dashboard/walletsBasiliskRefresh.js
  6. 13
      react/src/components/dashboard/walletsCacheData.js
  7. 100
      react/src/components/dashboard/walletsData.js
  8. 2
      react/src/components/dashboard/walletsNativeSend.js
  9. 17
      react/src/components/dashboard/walletsNativeSyncProgress.js
  10. 17
      react/src/components/dashboard/walletsNativeTxHistory.js
  11. 13
      react/src/translate/en.js

125
react/src/components/addcoin/addcoin.js
View File

@ -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));
}
@ -267,43 +267,101 @@ class AddCoin extends React.Component {
</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)}>
<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="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>
);
@ -325,7 +383,10 @@ 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>
@ -336,17 +397,21 @@ class AddCoin extends React.Component {
<i className={ this.state.actionsMenu ? 'fa-chevron-up' : 'fa-chevron-down' }></i>
</button>
<span className={ !this.state.actionsMenu ? 'hide' : '' }>
<button className="btn btn-outline-primary btn-save-coin-selection" onClick={this.saveCoinSelection}>{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>
<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'}}>
<div
className={ this.state.coins.length > 1 ? 'col-sm-12' : 'hide' }
style={{ textAlign: 'center', margin: '20px 0' }}>
<button
type="button"
className="btn btn-primary col-sm-4"
style={{ float: 'none' }}
data-toggle="modal"
data-dismiss="modal"
id="mdl_addcoin_done_btn-login"
onClick={ this.activateAllCoins }>{ translate('ADD_COIN.ACTIVATE_ALL') }</button>
</div>
@ -361,7 +426,9 @@ class AddCoin extends React.Component {
<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>
<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>

67
react/src/components/dashboard/syncOnly.js
View File

@ -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="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="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,7 +270,8 @@ 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">
@ -254,7 +281,7 @@ class SyncOnly extends React.Component {
{ 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>

21
react/src/components/dashboard/walletsBalance.js
View File

@ -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) {
@ -94,7 +95,7 @@ class WalletsBalance extends React.Component {
<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 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>
@ -104,12 +105,14 @@ class WalletsBalance extends React.Component {
<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 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">
@ -126,7 +129,9 @@ 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">
@ -143,7 +148,9 @@ 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">
@ -151,7 +158,7 @@ class WalletsBalance extends React.Component {
<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') }
</div>
<span className="pull-right padding-top-10" data-edexcoin="COIN" style={{fontSize: '22px'}}>
<span className="pull-right padding-top-10" style={{ fontSize: '22px' }}>
{ this.renderBalance('total') } { this.props.ActiveCoin.coin }
</span>
</div>

3
react/src/components/dashboard/walletsBasiliskConnection.js
View File

@ -14,7 +14,8 @@ 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">

5
react/src/components/dashboard/walletsBasiliskRefresh.js
View File

@ -3,9 +3,10 @@ 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">

13
react/src/components/dashboard/walletsCacheData.js
View File

@ -33,7 +33,8 @@ class WalletsCacheData extends React.Component {
}
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) }
@ -56,7 +57,8 @@ class WalletsCacheData extends React.Component {
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` } />
@ -74,7 +76,7 @@ class WalletsCacheData extends React.Component {
}
renderAddressCallsList(coin, address) {
var allCalls = [];
let allCalls = [];
const sourceObj = this.props.ActiveCoin.cache[coin][address];
const _allCalls = [
'listtransactions',
@ -111,7 +113,8 @@ 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` }>
@ -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>

100
react/src/components/dashboard/walletsData.js
View File

@ -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;
@ -517,7 +520,7 @@ class WalletsData extends React.Component {
);
} else {
return (
<span>- Select Transparent or Private Address -</span>
<span>- { translate('KMD_NATIVE.SELECT_ADDRESS') } -</span>
);
}
}
@ -529,13 +532,21 @@ class WalletsData extends React.Component {
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>
<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') }
</ul>
@ -560,62 +571,83 @@ 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}
<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">
<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}>
<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}>
<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' : ''}>
<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> Fetch (all addresses)
<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}>
<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
</a>
</li>
<li data-edexcoin="COIN" role="presentation" className={!this.state.useCache ? 'hide' : ''}>
<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 (!)
<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' : ''}>
<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>
@ -639,13 +671,13 @@ class WalletsData extends React.Component {
<div className="col-sm-6">
<div id="kmd-tx-history-tbl_filter" className="dataTables_filter">
<label>
Search: <input type="search" className="form-control input-sm" 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>

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

@ -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
View File

@ -61,9 +61,22 @@ 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() {
@ -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 {

17
react/src/components/dashboard/walletsNativeTxHistory.js
View File

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

@ -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.',

Write Preview
Loading…
Cancel
Save