on demand coind down modal; rpc con error icon

react/src/components/dashboard/coinTile/coinTileItem.js

@@ -24,6 +24,7 @@ import {
   activeHandle,
   triggerToaster,
   shepherdRemoveCoin,
+  toggleCoindDownModal,
 } from '../../../actions/actionCreators';
 import Store from '../../../store';
 import Config from '../../../config';
@@ -32,17 +33,38 @@ import CoinTileItemRender from './coinTileItem.render';
 
 const SPV_DASHBOARD_UPDATE_TIMEOUT = 60000;
 const ACTIVE_HANDLE_TIMEOUT_COIND_NATIVE = 15000;
-const COIND_DOWN_MODAL_FETCH_FAILURES_THRESHOLD = window.require('electron').remote.getCurrentWindow().appConfig.failedRPCAttemptsThreshold || 10;
+const COIND_DOWN_MODAL_FETCH_FAILURES_THRESHOLD = 2; //window.require('electron').remote.getCurrentWindow().appConfig.failedRPCAttemptsThreshold || 10;
 
 class CoinTileItem extends React.Component {
   constructor() {
     super();
     this.state = {
       appConfig: {},
+      activeCoin: null,
+      activeCoinMode: null,
+      propsUpdatedCounter: 0,
     };
     this.autoSetActiveCoin = this.autoSetActiveCoin.bind(this);
   }
 
+  openCoindDownModal() {
+    Store.dispatch(toggleCoindDownModal(true));
+  }
+
+  renderCoinConError(item) {
+    if (this.props.ActiveCoin.getinfoFetchFailures >= COIND_DOWN_MODAL_FETCH_FAILURES_THRESHOLD &&
+        (this.props.ActiveCoin.mode === 'native' &&
+        this.props.ActiveCoin.coin === this.state.activeCoin &&
+        this.props.ActiveCoin.coin === item.coin &&
+        this.state.activeCoin === item.coin &&
+        this.state.activeCoinMode === 'native' &&
+        this.props.ActiveCoin.mode === this.state.activeCoinMode &&
+        this.state.propsUpdatedCounter > 1) ||
+        (this.props.ActiveCoin.coins && this.props.ActiveCoin.coins[item.coin]) && this.props.ActiveCoin.coins[item.coin].getinfoFetchFailures >= COIND_DOWN_MODAL_FETCH_FAILURES_THRESHOLD) {
+      return true;
+    }
+  }
+
   renderStopCoinButton() {
     if (this.props.Main &&
         this.props.Main.coins &&
@@ -87,11 +109,11 @@ class CoinTileItem extends React.Component {
           _coinMode[coin] = mode;
         });
 
-        if (_coinMode['KMD'] &&
-            _coinMode['KMD'] === 'native') {
+        if (_coinMode.KMD &&
+            _coinMode.KMD === 'native') {
           _coin = 'KMD';
           _mode = 'native';
-        } else if (_coinMode['KMD'] && _coinMode['KMD'] === 'spv') {
+        } else if (_coinMode.KMD && _coinMode.KMD === 'spv') {
           _coin = 'KMD';
           _mode = 'spv';
         }
@@ -271,6 +293,13 @@ class CoinTileItem extends React.Component {
         Store.dispatch(electrumServerChanged(false));
       }, 100);
     }
+
+    this.setState({
+      activeCoin: props.ActiveCoin.coin,
+      activeCoinMode: props.ActiveCoin.mode,
+      // prevent native con error icon flashing on coin switch
+      propsUpdatedCounter: this.state.activeCoin === props.ActiveCoin.coin && this.state.activeCoinMode === props.ActiveCoin.mode ? this.state.propsUpdatedCounter + 1 : 0,
+    });
   }
 
   render() {
@@ -282,6 +311,7 @@ const mapStateToProps = (state) => {
   return {
     ActiveCoin: {
       coin: state.ActiveCoin.coin,
+      coins: state.ActiveCoin.coins,
       mode: state.ActiveCoin.mode,
       addresses: state.ActiveCoin.addresses,
       mainBasiliskAddress: state.ActiveCoin.mainBasiliskAddress,

react/src/components/dashboard/coinTile/coinTileItem.render.js

@@ -34,7 +34,7 @@ const CoinTileItemRender = function() {
         <i
           onClick={ () => this.removeCoin(item.coin, item.mode) }
           title="Remove"
-          className={ 'icon fa-plus-circle ' + (item.mode === 'spv' ? 'coind-remove-icon coind-remove-icon-spv' : 'coind-remove-icon') }></i>
+          className={ 'icon fa-plus-circle coind-remove-icon' + (item.mode === 'spv' ? ' coind-remove-icon-spv' : '') }></i>
       }
       { this.props.Dashboard &&
         this.props.Dashboard.electrumCoins &&
@@ -45,6 +45,12 @@ const CoinTileItemRender = function() {
           title={ translate('SETTINGS.SPV_SINGLE_SERVER_NOTICE') }
           className="icon fa-info-circle icon-spv-connection-warning"></i>
       }
+      { this.renderCoinConError(item) &&
+        <i
+          onClick={ this.openCoindDownModal }
+          title={ `Unable to establish RPC connection! Retries count: ${this.props.ActiveCoin.getinfoFetchFailures}.` }
+          className="icon fa-warning icon-native-connection-warning"></i>
+      }
     </div>
   );
 };

react/src/components/dashboard/coindDownModal/coindDownModal.js

@@ -5,7 +5,7 @@ import Store from '../../../store';
 
 import CoindDownModalRender from './coindDownModal.render';
 
-const COIND_DOWN_MODAL_FETCH_FAILURES_THRESHOLD = window.require('electron').remote.getCurrentWindow().appConfig.failedRPCAttemptsThreshold || 10;
+const COIND_DOWN_MODAL_FETCH_FAILURES_THRESHOLD = 2; //window.require('electron').remote.getCurrentWindow().appConfig.failedRPCAttemptsThreshold || 10;
 
 class CoindDownModal extends React.Component {
   constructor() {

react/src/components/dashboard/navbar/navbar.js

@@ -31,6 +31,16 @@ class Navbar extends React.Component {
     this.spvLogout = this.spvLogout.bind(this);
   }
 
+  isRenderSpvLockLogout() {
+    if (this.props.Main &&
+        this.props.Main.isLoggedIn &&
+        this.props.Main.coins &&
+        this.props.Main.coins.spv &&
+        this.props.Main.coins.spv.length) {
+      return true;
+    }
+  }
+
   spvLock() {
     shepherdElectrumLock()
     .then((res) => {

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

@@ -109,22 +109,14 @@ const NavbarRender = function() {
                     <i className="icon fa-users"></i> { translate('ABOUT.ABOUT_AGAMA') }
                   </a>
                 </li>
-                { this.props.Main &&
-                  this.props.Main.isLoggedIn &&
-                  this.props.Main.coins &&
-                  this.props.Main.coins.spv &&
-                  this.props.Main.coins.spv.length &&
+                { this.isRenderSpvLockLogout() &&
                   <li>
                     <a onClick={ this.spvLock }>
                       <i className="icon fa-lock"></i> Lock
                     </a>
                   </li>
                 }
-                { this.props.Main &&
-                  this.props.Main.isLoggedIn &&
-                  this.props.Main.coins &&
-                  this.props.Main.coins.spv &&
-                  this.props.Main.coins.spv.length &&
+                { this.isRenderSpvLockLogout() &&
                   <li>
                     <a onClick={ this.spvLogout }>
                       <i className="icon fa-power-off"></i> Logout

react/src/components/overrides.scss

@@ -447,9 +447,10 @@ select{
   padding-top: 5px;
 }
 
-.icon-spv-connection-warning {
+.icon-spv-connection-warning,
+.icon-native-connection-warning {
   position: absolute;
-  bottom: 15px;
+  bottom: 20px;
   right: 15px;
 
   &:before {
@@ -458,6 +459,12 @@ select{
   }
 }
 
+.icon-native-connection-warning {
+  &:before {
+    color: #e9595b;
+  }
+}
+
 .color-warning {
   color: #FF6600;
 }

react/src/reducers/activeCoin.js

@@ -59,6 +59,7 @@ export function ActiveCoin(state = {
           activeBasiliskAddress: state.activeBasiliskAddress,
           progress: state.progress,
           rescanInProgress: state.rescanInProgress,
+          getinfoFetchFailures: state.getinfoFetchFailures,
         };
         let _coins = state.coins;
         _coins[state.coin] = _coinDataToStore;
@@ -81,6 +82,7 @@ export function ActiveCoin(state = {
           activeBasiliskAddress: _coinData.activeBasiliskAddress,
           progress: _coinData.progress,
           rescanInProgress: _coinData.rescanInProgress,
+          getinfoFetchFailures: _coinData.getinfoFetchFailures,
         };
       } else {
         if (state.coin) {
@@ -100,6 +102,7 @@ export function ActiveCoin(state = {
             activeBasiliskAddress: state.activeBasiliskAddress,
             progress: state.progress,
             rescanInProgress: state.rescanInProgress,
+            getinfoFetchFailures: state.getinfoFetchFailures,
           };
           let _coins = state.coins;
           _coins[state.coin] = _coinData;
@@ -214,7 +217,7 @@ export function ActiveCoin(state = {
       return {
         ...state,
         progress: action.progress,
-        getinfoFetchFailures: !action.progress ? state.getinfoFetchFailures + 1 : 0,
+        getinfoFetchFailures: typeof action.progress === 'string' && action.progress.indexOf('"code":-777') ? state.getinfoFetchFailures + 1 : 0,
       };
     case DASHBOARD_ACTIVE_COIN_GETINFO_FAILURE:
       return {