Merge balance components - remove the walletsNativeBalance component

react/src/components/dashboard/walletsBalance/walletsBalance.js

@@ -74,8 +74,12 @@ class WalletsBalance extends React.Component {
     return this.props.ActiveCoin.mode === coinMode;
   }
 
-  isNativeOrBasiliskCoinMode() {
+  isBasiliskMode() {
-    return this.isActiveCoinMode('native') || this.isActiveCoinMode('basilisk');
+    return this.isActiveCoinMode('basilisk');
+  }
+
+  isFullMode() {
+    return this.isActiveCoinMode('full');
   }
 
   renderLB(_translationID) {
@@ -93,17 +97,20 @@ class WalletsBalance extends React.Component {
     return this.isActiveCoinMode('native');
   }
 
+  isNativeBalanceActive() {
+    return this.isNativeMode() && this.props.ActiveCoin.nativeActiveSection === 'default';
+  }
+
+  isNonNativeBalanceActive() {
+    return !this.isNativeMode() && !this.props.ActiveCoin.send && !this.props.ActiveCoin.receive;
+  }
+
   render() {
-    console.log('wallets balance', this.props.ActiveCoin.nativeActiveSection,
-      (this.isNativeMode() && this.props.ActiveCoin.nativeActiveSection === 'default'));
     if (this.props &&
         this.props.ActiveCoin &&
         this.props.ActiveCoin.coin &&
-        // this.props.ActiveCoin.mode !== 'native' &&
+        // TODO the conditions below should be merged when native mode is fully merge into the rest of the components
-      ((this.isNativeMode() && this.props.ActiveCoin.nativeActiveSection === 'default')
+      (this.isNativeBalanceActive() || this.isNonNativeBalanceActive()))
-        ||
-      (!this.isNativeMode() && !this.props.ActiveCoin.send &&!this.props.ActiveCoin.receive))
-      )
     {
       return WalletsBalanceRender.call(this);
     }

react/src/components/dashboard/walletsBalance/walletsBalance.render.js

@@ -1,11 +1,12 @@
-import React from 'react';
+import React from "react";
-import { translate } from '../../../translate/translate';
+import {translate} from "../../../translate/translate";
 
-const WalletsBalanceRender = function() {
+const WalletsBalanceRender = function () {
   return (
     <div id="wallet-widgets">
-      <div className="col-xs-12 teztt z-index-1">
+      <div className="col-xs-12">
-        <div className={ this.isActiveCoinMode('native') || (this.isActiveCoinMode('full') && !this.isFullySynced()) ? 'col-xs-12' : 'col-xs-12 hide' }>
+        <div className={ this.isNativeMode() || (this.isFullMode()
+        && !this.isFullySynced()) ? 'col-xs-12' : 'col-xs-12 hide' }>
           <div className="alert alert-info alert-dismissible">
             <button
               className="close"
@@ -31,7 +32,8 @@ const WalletsBalanceRender = function() {
           </div>
         </div>
 
-        <div className={ this.isNativeOrBasiliskCoinMode() ? 'col-lg-4 col-xs-12' : 'col-lg-12 col-xs-12' }>
+        <div className={ this.isNativeMode() ? 'col-lg-3 col-xs-12' :
+          this.isBasiliskMode() ? 'col-lg-4 col-xs-12' : 'col-lg-12 col-xs-12'}>
 
           <div className="widget widget-shadow">
             <div className="widget-content">
@@ -39,10 +41,16 @@ const WalletsBalanceRender = function() {
                 <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')}
+                    { this.isNativeMode() ? translate('INDEX.TRANSPARENT_BALANCE') : translate('INDEX.BALANCE') }
                   </div>
                   <span className="pull-right padding-top-10 font-size-22">
-                    { this.renderBalance('main') } { this.props.ActiveCoin.coin }
+                    { this.isNativeMode() ?
+                      this.props.ActiveCoin.balance.transparent ? this.props.ActiveCoin.balance.transparent : '-'
+                      :
+                      <span>
+                        { this.renderBalance('main') } { this.props.ActiveCoin.coin }
+                      </span>
+                    }
                   </span>
                 </div>
               </div>
@@ -50,7 +58,26 @@ const WalletsBalanceRender = function() {
           </div>
         </div>
 
-        <div className={ this.isNativeOrBasiliskCoinMode() ? 'col-lg-4 col-xs-12' : 'col-lg-4 col-xs-12 hide' }>
+        { this.isNativeMode() &&
+        <div className="col-lg-3 col-xs-12">
+          <div className="widget widget-shadow">
+            <div className="padding-20 padding-top-10">
+              <div className="clearfix">
+                <div className="pull-left padding-vertical-10">
+                  <i className="icon fa-eye-slash font-size-24 vertical-align-bottom margin-right-5"></i>
+                  { translate('INDEX.Z_BALANCE') }
+                </div>
+                <span className="pull-right padding-top-10 font-size-22">
+                  { this.props.ActiveCoin.balance.private ? this.props.ActiveCoin.balance.private : '-' }
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+        }
+
+        <div className={ this.isNativeMode() ? 'col-lg-3 col-xs-12' :
+          this.isBasiliskMode() ? 'col-lg-4 col-xs-12' : 'col-lg-4 col-xs-12 hide' }>
           <div className="widget widget-shadow">
             <div className="widget-content">
               <div className="padding-20 padding-top-10">
@@ -60,7 +87,14 @@ const WalletsBalanceRender = function() {
                     { translate('INDEX.INTEREST_EARNED') }
                   </div>
                   <span className="pull-right padding-top-10 font-size-22">
-                    { this.renderBalance('interest') } { this.props.ActiveCoin.coin }
+                    { this.isNativeMode() ?
+                      this.props.Dashboard.progress
+                      && this.props.Dashboard.progress.interest ? this.props.Dashboard.progress.interest : '-'
+                      :
+                      <span>
+                        {this.renderBalance('interest')} {this.props.ActiveCoin.coin}
+                      </span>
+                    }
                   </span>
                 </div>
               </div>
@@ -68,7 +102,8 @@ const WalletsBalanceRender = function() {
           </div>
         </div>
 
-        <div className={ this.isNativeOrBasiliskCoinMode() ? 'col-lg-4 col-xs-12' : 'col-lg-4 col-xs-12 hide' }>
+        <div className={ this.isNativeMode() ? 'col-lg-3 col-xs-12' :
+          this.isBasiliskMode() ? 'col-lg-4 col-xs-12' : 'col-lg-4 col-xs-12 hide' }>
           <div className="widget widget-shadow">
             <div className="widget-content">
               <div className="padding-20 padding-top-10">
@@ -78,7 +113,13 @@ const WalletsBalanceRender = function() {
                     { translate('INDEX.TOTAL_BALANCE') }
                   </div>
                   <span className="pull-right padding-top-10 font-size-22">
-                    { this.renderBalance('total') } { this.props.ActiveCoin.coin }
+                    { this.isNativeMode() ?
+                      this.props.ActiveCoin.balance.total ? this.props.ActiveCoin.balance.total : '-'
+                      :
+                      <span>
+                        { this.renderBalance('total') } { this.props.ActiveCoin.coin }
+                      </span>
+                    }
                   </span>
                 </div>
               </div>

react/src/components/dashboard/walletsNativeBalance/walletsNativeBalance.js

@@ -1,16 +0,0 @@
-import React from 'react';
-import WalletsNativeBalanceRender from './walletsNativeBalance.render';
-
-class WalletsNativeBalance extends React.Component {
-  render() {
-    if (false) {
-    // if (this.props &&
-    //     this.props.ActiveCoin.nativeActiveSection === 'default') {
-      return WalletsNativeBalanceRender.call(this);
-    }
-
-    return null;
-  }
-}
-
-export default WalletsNativeBalance;

react/src/components/dashboard/walletsNativeBalance/walletsNativeBalance.render.js

@@ -1,82 +0,0 @@
-import React from 'react';
-import { translate } from '../../../translate/translate';
-
-const WalletsNativeBalanceRender = function() {
-  return (
-    <div className="col-xs-12">
-      <div className="col-lg-3 col-xs-12">
-        <div className="widget widget-shadow">
-          <div className="widget-content white bg-yellow-800">
-            <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.TRANSPARENT_BALANCE') }
-                </div>
-                <span className="pull-right padding-top-10 font-size-22">
-                  { this.props.ActiveCoin.balance.transparent ? this.props.ActiveCoin.balance.transparent : '-' }
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div className="col-lg-3 col-xs-12">
-        <div className="widget widget-shadow">
-          <div className="widget-content white bg-blue-grey-800">
-            <div className="padding-20 padding-top-10">
-              <div className="clearfix">
-                <div className="pull-left padding-vertical-10">
-                  <i className="icon fa-eye-slash font-size-24 vertical-align-bottom margin-right-5"></i>
-                  { translate('INDEX.Z_BALANCE') }
-                </div>
-                <span className="pull-right padding-top-10 font-size-22">
-                  { this.props.ActiveCoin.balance.private ? this.props.ActiveCoin.balance.private : '-' }
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div className="col-lg-3 col-xs-12">
-        <div className="widget widget-shadow">
-          <div className="widget-content white bg-cyan-700">
-            <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') }
-                </div>
-                <span className="pull-right padding-top-10 font-size-22">
-                  { this.props.Dashboard.progress && this.props.Dashboard.progress.interest ? this.props.Dashboard.progress.interest : '-' }
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div className="col-lg-3 col-xs-12">
-        <div className="widget widget-shadow">
-          <div className="widget-content white bg-green-600">
-            <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.ZT_BALANCE') }
-                </div>
-                <span className="pull-right padding-top-10 font-size-22">
-                  { this.props.ActiveCoin.balance.total ? this.props.ActiveCoin.balance.total : '-' }
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default WalletsNativeBalanceRender;