Merge pull request #160 from SuperNETorg/feature/address-visibility-toggle

Feature/address visibility toggle

react/src/components/dashboard/receiveCoin/receiveCoin.js

@@ -22,9 +22,12 @@ class ReceiveCoin extends React.Component {
 
     this.state = {
       openDropMenu: false,
+      hideZeroAdresses: false,
     };
     this.openDropMenu = this.openDropMenu.bind(this);
     this.handleClickOutside = this.handleClickOutside.bind(this);
+    this.toggleVisibleAddress = this.toggleVisibleAddress.bind(this);
+    this.checkTotalBalance = this.checkTotalBalance.bind(this);
   }
 
   componentWillMount() {
@@ -108,6 +111,47 @@ class ReceiveCoin extends React.Component {
     Store.dispatch(getNewKMDAddresses(this.props.coin, type));
   }
 
+  toggleVisibleAddress() {
+    this.setState(Object.assign({}, this.state, {
+      hideZeroAddresses: !this.state.hideZeroAddresses,
+    }));
+  }
+
+  checkTotalBalance() {
+    let _balance = '0';
+    const _mode = this.props.mode;
+
+    if (_mode === 'full') {
+      _balance = this.props.balance || 0;
+    } else if (_mode === 'basilisk') {
+      if (this.props.cache) {
+        const _cache = this.props.cache;
+        const _coin = this.props.coin;
+        const _address = this.props.activeAddress;
+
+        if (_address &&
+            _cache[_coin] &&
+            _cache[_coin][_address] &&
+            _cache[_coin][_address].getbalance &&
+            _cache[_coin][_address].getbalance.data &&
+            (_cache[_coin][_address].getbalance.data.balance ||
+             _cache[_coin][_address].getbalance.data.interest)) {
+          const _regBalance = _cache[_coin][_address].getbalance.data.balance ? _cache[_coin][_address].getbalance.data.balance : 0;
+          const _regInterest = _cache[_coin][_address].getbalance.data.interest ? _cache[_coin][_address].getbalance.data.interest : 0;
+
+          _balance = _regBalance + _regInterest;
+        }
+      }
+    } else if (_mode === 'native') {
+      if (this.props.balance &&
+          this.props.balance.total) {
+        _balance = this.props.balance.total;
+      }
+    }
+
+    return _balance;
+  }
+
   renderAddressList(type) {
     const _addresses = this.props.addresses;
     const _cache = this.props.cache;
@@ -134,9 +178,17 @@ class ReceiveCoin extends React.Component {
           && _cache[_coin][address.address].getbalance.data.interest ? _cache[_coin][address.address].getbalance.data.interest : 'N/A';
         }
 
-        items.push(
-          AddressItemRender.call(this, address, type)
-        );
+        if (this.state.hideZeroAddresses) {
+          if (!this.hasNoAmount) {
+            items.push(
+              AddressItemRender.call(this, address, type)
+            );
+          }
+        } else {
+          items.push(
+            AddressItemRender.call(this, address, type)
+          );
+        }
       }
 
       return items;

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

@@ -76,8 +76,9 @@ export const ReceiveCoinRender = function() {
                 <header className="panel-heading">
                   {this.isNativeMode() &&
                     <div className="panel-actions">
-                      <div className={ 'dropdown' + (this.state.openDropMenu ? ' open' : '') }
-                           onClick={ this.openDropMenu }>
+                      <div
+                        className={ 'dropdown' + (this.state.openDropMenu ? ' open' : '') }
+                        onClick={ this.openDropMenu }>
                         <a className="dropdown-toggle white btn btn-warning">
                           <i className="icon md-arrows margin-right-10"></i> { translate('INDEX.GET_NEW_ADDRESS') }
                           <span className="caret"></span>
@@ -101,6 +102,23 @@ export const ReceiveCoinRender = function() {
                   <h4 className="panel-title">{ translate('INDEX.RECEIVING_ADDRESS') }</h4>
                 </header>
                 <div className="panel-body">
+                  { this.checkTotalBalance() === 0 &&
+                    <div className="text-left padding-top-10 padding-bottom-10">
+                      <div
+                        className="toggle-label margin-right-15 pointer"
+                        onClick={ this.toggleVisibleAddress }>
+                        { translate('INDEX.TOGGLE_ZERO_ADDRESSES') }
+                      </div>
+                      <label className="switch">
+                        <input
+                          type="checkbox"
+                          checked={ this.state.hideZeroAddresses } />
+                        <div
+                          className="slider"
+                          onClick={ this.toggleVisibleAddress }></div>
+                      </label>
+                    </div>
+                  }
                   <table className="table table-hover dataTable table-striped">
                     <thead>
                     { this.isNativeMode() ?

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

@@ -16,7 +16,7 @@ const WalletsNativeRender = function() {
           style={{ 'backgroundImage': `url("assets/images/bg/${this.defaultBG()}_transparent_header_bg.png")` }}>
           <ol className="breadcrumb">
             <li className="header-easydex-section">
-              <img src={ `assets/images/native/${this.defaultBG()}_header_title_logo.png` } /> 
+              <img src={ `assets/images/native/${this.defaultBG()}_header_title_logo.png` } />
               <span
                 className={ `easydex-section-image ${(this.props.ActiveCoin.coin === 'KMD' ? 'hide' : '')}` }
                 style={{ marginLeft: '20px' }}>

react/src/translate/en.js

@@ -252,7 +252,8 @@ export const _lang = {
       'ACTIVATING': 'Activating',
       'QRCODE': 'Show QR code',
       'SCAN_QR_CODE': 'Scan QR Code',
-      'SCAN_QRCODE_WEBCAM': 'Scan QR Code with webcam'
+      'SCAN_QRCODE_WEBCAM': 'Scan QR Code with webcam',
+      'TOGGLE_ZERO_ADDRESSES': 'Toggle empty addresses'
     },
     'ATOMIC': {
       'RAW_OUTPUT': 'Raw Output',