91 lines
4.1 KiB
91 lines
4.1 KiB
import React from 'react';
|
|
import { translate } from '../../translate/translate';
|
|
|
|
class WalletsProgress extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.isFullySynced = this.isFullySynced.bind(this);
|
|
}
|
|
|
|
isFullySynced() {
|
|
if ((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;
|
|
}
|
|
}
|
|
|
|
render() {
|
|
if (this.props &&
|
|
this.props.ActiveCoin &&
|
|
this.props.ActiveCoin.mode === 'full' &&
|
|
this.props.Dashboard.progress) {
|
|
if (this.props.Dashboard.progress &&
|
|
this.props.Dashboard.progress.error) {
|
|
return (
|
|
<div className="text-align-center padding-10">{ translate('INDEX.COIN_IS_BUSY') }</div>
|
|
);
|
|
} else {
|
|
return (
|
|
<div id="edex-footer" className="margin-bottom-20">
|
|
<div className="row no-space">
|
|
<div id="currency-progressbars">
|
|
<div className="progress progress-sm">
|
|
<div
|
|
className={'full-width font-size-80-percent ' + (this.isFullySynced() ? 'progress-bar progress-bar-striped active progress-bar-indicating progress-bar-success' : 'hide') }
|
|
role="progressbar"
|
|
id="currency-bundles">
|
|
{ translate('INDEX.BUNDLES') } <span id="currency-bundles-percent">({ this.props.ActiveCoin.coin }) 100.00% - ( { this.props.Dashboard.progress.blocks } / { this.props.Dashboard.progress.blocks } ) ==>> RT{ this.props.Dashboard.progress.RTheight }</span>
|
|
</div>
|
|
<div
|
|
className={'font-size-80-percent ' + (this.isFullySynced() ? 'hide' : 'progress-bar progress-bar-info progress-bar-striped active') }
|
|
style={{ width: this.props.Dashboard.progress.bundles + '%' }}
|
|
role="progressbar"
|
|
id="currency-bundles">
|
|
{ translate('INDEX.BUNDLES') } <span id="currency-bundles-percent">{ this.props.Dashboard.progress.bundles }%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="additional-progress-bars" className={ this.isFullySynced() ? 'hide' : '' }>
|
|
<div className="progress progress-sm">
|
|
<div
|
|
className="progress-bar progress-bar-warning progress-bar-striped active font-size-80-percent"
|
|
style={{ width: this.props.Dashboard.progress.utxo + '%' }}
|
|
role="progressbar"
|
|
id="currency-utxo">
|
|
utxo <span id="currency-utxo-percent">{ this.props.Dashboard.progress.utxo }%</span>
|
|
</div>
|
|
</div>
|
|
<div className="progress progress-sm">
|
|
<div
|
|
className="progress-bar progress-bar-danger progress-bar-striped active font-size-80-percent"
|
|
style={{ width: this.props.Dashboard.progress.balances + '%' }}
|
|
role="progressbar"
|
|
id="currency-balances">
|
|
{ translate('INDEX.BALANCES') } <span id="currency-balances-percent">{ this.props.Dashboard.progress.balances }%</span>
|
|
</div>
|
|
</div>
|
|
<div className="progress progress-sm">
|
|
<div
|
|
className="progress-bar progress-bar-success progress-bar-striped active font-size-80-percent"
|
|
style={{ width: this.props.Dashboard.progress.validated + '%' }}
|
|
role="progressbar"
|
|
id="currency-validated">
|
|
{ translate('INDEX.VALIDATED') } <span id="currency-validated-percent">{ this.props.Dashboard.progress.validated }%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
} else {
|
|
return null;
|
|
}
|
|
}
|
|
}
|
|
|
|
export default WalletsProgress;
|
|
|