Merge walletsNativeSyncProgress into walletsProgress

8 years ago · 4b6c22094c
7 changed files with 189 additions and 168 deletions
--- a/react/src/components/dashboard/main/dashboard.js
+++ b/react/src/components/dashboard/main/dashboard.js
@ -26,6 +26,10 @@ class Dashboard extends React.Component {
      this.props.Main.isLoggedIn;
  }

+  isNativeMode() {
+    return this.props.ActiveCoin.mode === 'native';
+  }
+
  render() {
    if (this.isLoggedIn()) {
      return this.renderDashboard();
--- a/react/src/components/dashboard/main/dashboard.render.js
+++ b/react/src/components/dashboard/main/dashboard.render.js
@ -27,7 +27,7 @@ const DashboardRender = function() {
        <div className={ this.isSectionActive('wallets') ? 'show' : 'hide' }>
          <CoinTile {...this.props} />
          <WalletsNav {...this.props} />
-          <WalletsProgress {...this.props} />
+          { !this.isNativeMode() && <WalletsProgress {...this.props} /> }
          <WalletsBalance {...this.props} />
          <SendCoin {...this.props} />
          <ReceiveCoin {...this.props.ActiveCoin} />
--- a/react/src/components/dashboard/walletsNative/walletsNative.render.js
+++ b/react/src/components/dashboard/walletsNative/walletsNative.render.js
@ -3,7 +3,7 @@ import WalletsNativeBalance from '../walletsNativeBalance/walletsNativeBalance';
 import WalletsNativeInfo from '../walletsNativeInfo/walletsNativeInfo';
 import WalletsNativeReceive from '../walletsNativeReceive/walletsNativeReceive';
 import WalletsNativeSend from '../walletsNativeSend/walletsNativeSend';
-import WalletsNativeSyncProgress from '../walletsNativeSyncProgress/walletsNativeSyncProgress';
+import WalletsProgress from '../walletsProgress/walletsProgress';
 import WalletsNativeTxHistory from '../walletsNativeTxHistory/walletsNativeTxHistory';

 const WalletsNativeRender = function() {
@ -24,7 +24,7 @@ const WalletsNativeRender = function() {
          </ol>
        </div>
        <div className="page-content">
-          <WalletsNativeSyncProgress {...this.props} />
+          <WalletsProgress {...this.props} />
          <div className="row">
            <WalletsNativeBalance {...this.props} />
            <WalletsNativeTxHistory {...this.props} />
--- a/react/src/components/dashboard/walletsNativeSyncProgress/walletsNativeSyncProgress.js
+++ b/react/src/components/dashboard/walletsNativeSyncProgress/walletsNativeSyncProgress.js
@ -1,115 +0,0 @@
-import React from 'react';
-import { translate } from '../../../translate/translate';
-import {
-  ChainActivationNotificationRender,
-  WalletsNativeSyncProgressRender
-} from './walletsNativeSyncProgress.render';
-
-class WalletsNativeSyncProgress extends React.Component {
-  renderSyncPercentagePlaceholder() {
-    if (this.props.Dashboard.progress.blocks > 0 &&
-        this.props.Dashboard.progress.longestchain === 0) {
-      return (
-        <div className="progress-bar progress-bar-info progress-bar-striped active full-width font-size-80-percent">
-          <span className="full-width">{ translate('INDEX.SYNC_ERR_LONGESTCHAIN') }</span>
-        </div>
-      );
-    } else if (this.props.Dashboard.progress.blocks === 0) {
-      return (
-        <div className="progress-bar progress-bar-info progress-bar-striped active full-width font-size-80-percent">
-          <span className="full-width">{ translate('INDEX.SYNC_ERR_BLOCKS') }</span>
-        </div>
-      );
-    } else {
-      const syncPercentage = (parseFloat(parseInt(this.props.Dashboard.progress.blocks, 10) * 100 / parseInt(this.props.Dashboard.progress.longestchain, 10)).toFixed(2) + '%').replace('NaN', 0);
-
-      return (
-        <div
-          className="progress-bar progress-bar-info progress-bar-striped active font-size-80-percent"
-          style={{ width: syncPercentage }}>
-          <span style={{ width: syncPercentage }}>{ syncPercentage }</span> | { this.props.Dashboard.progress.blocks } / { this.props.Dashboard.progress.longestchain } | { translate('INDEX.CONNECTIONS') }: { this.props.Dashboard.progress.connections }
-        </div>
-      );
-    }
-  }
-
-  renderActivatingBestChainProgress() {
-    if (this.props.Settings &&
-        this.props.Settings.debugLog) {
-      if (this.props.Settings.debugLog.indexOf('UpdateTip') > -1) {
-        const temp = this.props.Settings.debugLog.split(' ');
-        let currentBestChain;
-        let currentProgress;
-
-        for (let i = 0; i < temp.length; i++) {
-          if (temp[i].indexOf('height=') > -1) {
-            currentBestChain = temp[i].replace('height=', '');
-          }
-          if (temp[i].indexOf('progress=') > -1) {
-            currentProgress = Number(temp[i].replace('progress=', '')) * 100;
-          }
-        }
-
-        // fallback to local data if remote node is inaccessible
-        if (this.props.Dashboard.progress.remoteKMDNode &&
-            !this.props.Dashboard.progress.remoteKMDNode.blocks) {
-          return (
-            `: ${currentProgress}%`
-          );
-        } else {
-          return(
-            `: ${Math.floor(currentBestChain * 100 / this.props.Dashboard.progress.remoteKMDNode.blocks)}% (blocks ${currentBestChain} / ${this.props.Dashboard.progress.remoteKMDNode.blocks})`
-          );
-        }
-      } else if (this.props.Settings.debugLog.indexOf('Still rescanning') > -1) {
-        const temp = this.props.Settings.debugLog.split(' ');
-
-        for (let i = 0; i < temp.length; i++) {
-          if (temp[i].indexOf('Progress=') > -1) {
-            currentProgress = Number(temp[i].replace('Progress=', '')) * 100;
-          }
-        }
-
-        return (
-          `: ${currentProgress}%`
-        );
-      } else {
-        return (
-          <span>...</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.blocks < this.props.Dashboard.progress.longestchain)) {
-      return ChainActivationNotificationRender.call(this);
-    }
-
-    return null;
-  }
-
-  render() {
-    if (this.props &&
-        this.props.Dashboard &&
-        this.props.Dashboard.progress) {
-      return WalletsNativeSyncProgressRender.call(this);
-    }
-
-    return null;
-  }
-}
-
-export default WalletsNativeSyncProgress;
--- a/react/src/components/dashboard/walletsNativeSyncProgress/walletsNativeSyncProgress.render.js
+++ b/react/src/components/dashboard/walletsNativeSyncProgress/walletsNativeSyncProgress.render.js
@ -1,33 +0,0 @@
-import React from 'react';
-import { translate } from '../../../translate/translate';
-
-export const ChainActivationNotificationRender = function() {
-  return (
-    <div className="alert alert-info alert-dismissible margin-bottom-40">
-      <button
-        className="close"
-        type="button">
-        <span>×</span>
-      </button>
-      <h4>
-        { translate('INDEX.ACTIVATING_CHAIN') }{ this.renderActivatingBestChainProgress() }
-      </h4>
-      <p>{ this.renderLB('INDEX.KMD_STARTED') }</p>
-    </div>
-  );
-};
-
-export const WalletsNativeSyncProgressRender = function() {
-  return (
-    <div>
-      { this.renderChainActivationNotification() }
-      <div className="row sync-progress-container">
-        <div className="col-xs-12">
-          <div className="progress">
-            { this.renderSyncPercentagePlaceholder() }
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
--- a/react/src/components/dashboard/walletsProgress/walletsProgress.js
+++ b/react/src/components/dashboard/walletsProgress/walletsProgress.js
@ -1,6 +1,13 @@
 import React from 'react';
-import { translate } from '../../../translate/translate';
-import WalletsProgressRender from './walletsProgress.render';
+import {
+  SyncErrorLongestChainRender,
+  SyncErrorBlocksRender,
+  SyncPercentageRender,
+  TranslationComponentsRender,
+  CoinIsBusyRender,
+  ChainActivationNotificationRender,
+  WalletsProgressRender
+} from './walletsProgress.render';

 class WalletsProgress extends React.Component {
  constructor(props) {
@ -19,16 +26,98 @@ class WalletsProgress extends React.Component {
    }
  }

+  isNativeMode() {
+    return this.props.ActiveCoin.mode === 'native';
+  }
+
+  isFullMode() {
+    return this.props.ActiveCoin.mode === 'full';
+  }
+
+  renderChainActivationNotification() {
+    if ((!this.props.Dashboard.progress.blocks && !this.props.Dashboard.progress.longestchain) ||
+      (this.props.Dashboard.progress.blocks < this.props.Dashboard.progress.longestchain)) {
+      return ChainActivationNotificationRender.call(this);
+    }
+
+    return null;
+  }
+
+  renderSyncPercentagePlaceholder() {
+    if (this.props.Dashboard.progress.blocks > 0 &&
+      this.props.Dashboard.progress.longestchain === 0) {
+      return SyncErrorLongestChainRender.call(this);
+    }
+
+    if (this.props.Dashboard.progress.blocks === 0) {
+      return SyncErrorBlocksRender.call(this);
+    }
+
+    const syncPercentage = (parseFloat(parseInt(this.props.Dashboard.progress.blocks, 10) * 100 / parseInt(this.props.Dashboard.progress.longestchain, 10)).toFixed(2) + '%').replace('NaN', 0);
+    return SyncPercentageRender.call(this, syncPercentage);
+  }
+
+  renderLB(translationID) {
+    return TranslationComponentsRender.call(this, translationID);
+  }
+
+  renderActivatingBestChainProgress() {
+    if (this.props.Settings &&
+      this.props.Settings.debugLog) {
+      if (this.props.Settings.debugLog.indexOf('UpdateTip') > -1) {
+        const temp = this.props.Settings.debugLog.split(' ');
+        let currentBestChain;
+        let currentProgress;
+
+        for (let i = 0; i < temp.length; i++) {
+          if (temp[i].indexOf('height=') > -1) {
+            currentBestChain = temp[i].replace('height=', '');
+          }
+          if (temp[i].indexOf('progress=') > -1) {
+            currentProgress = Number(temp[i].replace('progress=', '')) * 100;
+          }
+        }
+
+        // fallback to local data if remote node is inaccessible
+        if (this.props.Dashboard.progress.remoteKMDNode &&
+          !this.props.Dashboard.progress.remoteKMDNode.blocks) {
+          return (
+            `: ${currentProgress}%`
+          );
+        } else {
+          return(
+            `: ${Math.floor(currentBestChain * 100 / this.props.Dashboard.progress.remoteKMDNode.blocks)}% (blocks ${currentBestChain} / ${this.props.Dashboard.progress.remoteKMDNode.blocks})`
+          );
+        }
+      } else if (this.props.Settings.debugLog.indexOf('Still rescanning') > -1) {
+        const temp = this.props.Settings.debugLog.split(' ');
+        let currentProgress;
+
+        for (let i = 0; i < temp.length; i++) {
+          if (temp[i].indexOf('Progress=') > -1) {
+            currentProgress = Number(temp[i].replace('Progress=', '')) * 100;
+          }
+        }
+
+        return (
+          `: ${currentProgress}%`
+        );
+      } else {
+        return (
+          <span>...</span>
+        );
+      }
+    }
+  }
+
  render() {
    if (this.props &&
        this.props.ActiveCoin &&
-        this.props.ActiveCoin.mode === 'full' &&
+        (this.isFullMode() || this.isNativeMode()) &&
        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>
-        );
+        return CoinIsBusyRender.call(this);
      }

      return WalletsProgressRender.call(this);
--- a/react/src/components/dashboard/walletsProgress/walletsProgress.render.js
+++ b/react/src/components/dashboard/walletsProgress/walletsProgress.render.js
@ -1,20 +1,84 @@
 import React from 'react';
 import { translate } from '../../../translate/translate';

-const WalletsProgressRender = function () {
+export const SyncErrorLongestChainRender = function() {
+  return (
+    <div className="progress-bar progress-bar-info progress-bar-striped active full-width font-size-80-percent">
+      <span className="full-width">{ translate('INDEX.SYNC_ERR_LONGESTCHAIN') }</span>
+    </div>
+  );
+};
+
+export const SyncErrorBlocksRender = function() {
+  return (
+    <div className="progress-bar progress-bar-info progress-bar-striped active full-width font-size-80-percent">
+      <span className="full-width">{ translate('INDEX.SYNC_ERR_BLOCKS') }</span>
+    </div>
+  );
+};
+
+export const SyncPercentageRender =  function(syncPercentage) {
+  return (
+    <div
+      className="progress-bar progress-bar-info progress-bar-striped active font-size-80-percent"
+      style={{ width: syncPercentage }}>
+      <span style={{ width: syncPercentage }}>{ syncPercentage }</span> | { this.props.Dashboard.progress.blocks } / { this.props.Dashboard.progress.longestchain } | { translate('INDEX.CONNECTIONS') }: { this.props.Dashboard.progress.connections }
+    </div>
+  );
+};
+
+export const TranslationComponentsRender = function(translationID) {
+  const translationComponents = translate(translationID).split('<br>');
+  return translationComponents.map((translation, idx) =>
+    <span key={idx}>
+      { translation }
+      <br />
+    </span>
+  );
+};
+
+export const CoinIsBusyRender = function() {
+  return (
+    <div className="text-align-center padding-10">{ translate('INDEX.COIN_IS_BUSY') }</div>
+  );
+}
+
+export const ChainActivationNotificationRender = function() {
+  return (
+    <div className="alert alert-info alert-dismissible margin-bottom-40">
+      <button
+        className="close"
+        type="button">
+        <span>×</span>
+      </button>
+      <h4>
+        { translate('INDEX.ACTIVATING_CHAIN') }{ this.renderActivatingBestChainProgress() }
+      </h4>
+      <p>{ this.renderLB('INDEX.KMD_STARTED') }</p>
+    </div>
+  );
+};
+
+export const WalletsProgressRender = function () {
  return (
    <div
      id="edex-footer"
      className="margin-bottom-20">
+
+      { !this.isNativeMode() &&
      <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') }>
-              { translate('INDEX.BUNDLES') } <span 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 className={ 'full-width font-size-80-percent '
+            + (this.isFullySynced() ? 'progress-bar progress-bar-striped active progress-bar-indicating progress-bar-success' : 'hide') }>
+              { translate('INDEX.BUNDLES') } <span 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={ 'font-size-80-percent ' + (this.isFullySynced() ? 'hide' : 'progress-bar progress-bar-info progress-bar-striped active') }
-              style={{ width: this.props.Dashboard.progress.bundles + '%' }}>
+              className={ 'font-size-80-percent '
+              + (this.isFullySynced() ? 'hide' : 'progress-bar progress-bar-info progress-bar-striped active') }
+              style={{width: this.props.Dashboard.progress.bundles + '%'}}>
              { translate('INDEX.BUNDLES') } { this.props.Dashboard.progress.bundles }%
            </div>
          </div>
@ -23,28 +87,40 @@ const WalletsProgressRender = function () {
          <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 + '%' }}>
+              style={{width: this.props.Dashboard.progress.utxo + '%'}}>
              utxo { this.props.Dashboard.progress.utxo }%
            </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 + '%' }}>
+              style={{width: this.props.Dashboard.progress.balances + '%'}}>
              { translate('INDEX.BALANCES') } { this.props.Dashboard.progress.balances }%
            </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 + '%' }}>
+              style={{width: this.props.Dashboard.progress.validated + '%'}}>
              { translate('INDEX.VALIDATED') } { this.props.Dashboard.progress.validated }%
            </div>
          </div>
        </div>
      </div>
+      }
+
+      { this.isNativeMode() &&
+      <div>
+        { this.renderChainActivationNotification() }
+        <div className="row sync-progress-container">
+          <div className="col-xs-12">
+            <div className="progress">
+              { this.renderSyncPercentagePlaceholder() }
+            </div>
+          </div>
+        </div>
+      </div>
+      }
    </div>
  );
-};
-
-export default WalletsProgressRender;
+};