Toggle visibility of Zero balance addresses on receive page

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

@@ -22,9 +22,11 @@ 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);
   }
 
   componentWillMount() {
@@ -108,6 +110,12 @@ class ReceiveCoin extends React.Component {
     Store.dispatch(getNewKMDAddresses(this.props.coin, type));
   }
 
+  toggleVisibleAddress() {
+    this.setState(Object.assign({}, this.state, {
+      hideZeroAdresses: !this.state.hideZeroAdresses,
+    }));
+  }
+  
   renderAddressList(type) {
     const _addresses = this.props.addresses;
     const _cache = this.props.cache;
@@ -134,9 +142,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.hideZeroAdresses) {
+          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

@@ -101,6 +101,21 @@ export const ReceiveCoinRender = function() {
                   <h4 className="panel-title">{ translate('INDEX.RECEIVING_ADDRESS') }</h4>
                 </header>
                 <div className="panel-body">
+                  <div className="text-right">
+                    <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.hideZeroAdresses } />
+                      <div
+                        className="slider"
+                        onClick={ this.toggleVisibleAddress }></div>
+                    </label>
+                  </div>
                   <table className="table table-hover dataTable table-striped">
                     <thead>
                     { this.isNativeMode() ?

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',