full mode synced bar

react/src/components/dashboard/walletsProgress.js

@@ -2,6 +2,22 @@ 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) {
@@ -12,12 +28,15 @@ class WalletsProgress extends React.Component {
             <div className="row no-space" data-edexcoin="COIN">
               <div data-edexcoin="COIN" id="currency-progressbars">
                 <div className="progress progress-sm">
-                  <div className="progress-bar progress-bar-info progress-bar-striped active" style={{width: this.props.Dashboard.progress.bundles + '%', fontSize: '80%'}} role="progressbar" data-edexcoin="COIN" id="currency-bundles">
+                  <div className={this.isFullySynced() ? 'progress-bar progress-bar-striped active progress-bar-indicating progress-bar-success' : 'hide'} style={{width: '100%', fontSize: '80%'}} role="progressbar" data-edexcoin="GAME" id="currency-bundles">
+                    {translate('INDEX.BUNDLES')} <span data-edexcoin="GAME" id="currency-bundles-percent">({this.props.ActiveCoin.coin}) 100.00% - ( {this.props.Dashboard.progress.blocks} / {this.props.Dashboard.progress.blocks} ) ==&gt;&gt; RT{this.props.Dashboard.progress.RTheight}</span>
+                  </div>
+                  <div className={this.isFullySynced() ? 'hide' : 'progress-bar progress-bar-info progress-bar-striped active'} style={{width: this.props.Dashboard.progress.bundles + '%', fontSize: '80%'}} role="progressbar" data-edexcoin="COIN" id="currency-bundles">
                     {translate('INDEX.BUNDLES')} <span data-edexcoin="COIN" id="currency-bundles-percent">{this.props.Dashboard.progress.bundles}%</span>
                   </div>
                 </div>
               </div>
-              <div data-edexcoin="COIN" id="additional-progress-bars">
+              <div data-edexcoin="COIN" id="additional-progress-bars" className={this.isFullySynced() ? 'hide' : ''}>
                 <div className="progress progress-sm">
                   <div className="progress-bar progress-bar-warning progress-bar-striped active" style={{width: this.props.Dashboard.progress.utxo + '%', fontSize: '80%'}} role="progressbar" data-edexcoin="COIN" id="currency-utxo">
                     utxo <span data-edexcoin="COIN" id="currency-utxo-percent">{this.props.Dashboard.progress.utxo}%</span>

react/src/reducers/activeCoin.js

@@ -12,6 +12,8 @@ import {
   DASHBOARD_ACTIVE_COIN_NATIVE_OPIDS
 } from '../actions/actionCreators';
 
+// TODO: keep all coin data in array of objects instead of single object
+
 export function ActiveCoin(state = {
   coin: null,
   mode: null,