Add peer count (#2685)

app/actions/ClientActions.js

@@ -5,6 +5,7 @@ import * as sel from "selectors";
 import eq from "lodash/fp/eq";
 import {
   getNextAddressAttempt,
+  getPeerInfo,
   publishUnminedTransactionsAttempt
 } from "./ControlActions";
 import {
@@ -65,6 +66,7 @@ const startWalletServicesTrigger = () => (dispatch, getState) =>
       }
       dispatch(discoverAvailableVSPs());
       await dispatch(getNextAddressAttempt(0));
+      await dispatch(getPeerInfo());
       await dispatch(getTicketPriceAttempt());
       await dispatch(getNetworkAttempt());
       await dispatch(refreshStakepoolPurchaseInformation());

app/actions/ControlActions.js

@@ -786,3 +786,17 @@ export const startTicketBuyerV2Attempt = (
     });
   });
 };
+
+export const GETPEERINFO_ATTEMPT = "GETPEERINFO_ATTEMPT";
+export const GETPEERINFO_FAILED = "GETPEERINFO_FAILED";
+export const GETPEERINFO_SUCCESS = "GETPEERINFO_SUCCESS";
+
+export const getPeerInfo = () => (dispatch, getState) => {
+  dispatch({ type: GETPEERINFO_ATTEMPT });
+  return wallet.getPeerInfo(getState().grpc.walletService)
+    .then(resp => {
+      const peersCount = resp.wrappers_[1].length;
+      dispatch({ type: GETPEERINFO_SUCCESS, peersCount });
+    })
+    .catch((error) => dispatch({ type: GETPEERINFO_FAILED, error }));
+};

app/components/SideBar/Logo/Logo.jsx

@@ -10,10 +10,12 @@ const Logo = React.memo(
     onReduceSideBar,
     onExpandSideBar,
     isWatchingOnly,
-    accountMixerRunning
+    accountMixerRunning,
+    peersCount
   }) => (
     <div
-      className={expandSideBar ? style.logo : style.reducedLogo}>
+      className={expandSideBar ? style.logo : style.reducedLogo}
+    >
       {isWatchingOnly && (
         <Tooltip
           text={
@@ -32,6 +34,15 @@ const Logo = React.memo(
           !expandSideBar ? style.hamburger : isTestNet ? TESTNET : MAINNET
         }
       />
+      <Tooltip
+        text={
+          <T
+            id="sidebar.peersCount"
+            m="Peers Count"
+          />
+        }>
+        <div className={style.peersCount}>{peersCount}</div>
+      </Tooltip>
       {accountMixerRunning && (
         <Tooltip
           text={

app/components/SideBar/Logo/Logo.module.css

@@ -42,6 +42,21 @@
   opacity: 0.7;
 }
 
+.peersCount {
+  border-radius: 50%;
+  width: 15px;
+  height: 15px;
+  margin-top: 4px;
+
+  background: #fff;
+  border: 1px solid var(--white-border);
+  color: var(--sidebar-menu-link);;
+  text-align: center;
+  padding-bottom: 4px;
+
+  font-size: 13pt;
+}
+
 @media screen and (max-width: 768px) {
   .logo {
     flex-direction: row-reverse;

app/components/SideBar/SideBar.jsx

@@ -25,7 +25,8 @@ const SideBar = () => {
     rescanRequest,
     onExpandSideBar,
     onReduceSideBar,
-    isSPV
+    isSPV,
+    peersCount
   } = useSideBar();
   const { rescanAttempt, rescanCancel } = useRescan();
 
@@ -44,7 +45,8 @@ const SideBar = () => {
           onReduceSideBar,
           onExpandSideBar,
           isWatchingOnly,
-          accountMixerRunning
+          accountMixerRunning,
+          peersCount
         }}
       />
       <div className={style.sidebarMain}>

app/components/SideBar/hooks.js

@@ -6,9 +6,6 @@ import * as sba from "../../actions/SidebarActions";
 export function useSideBar() {
   const [isShowingAccounts, setIsShowingAccounts] = useState(false);
 
-  const onShowAccounts = useCallback(() => setIsShowingAccounts(true), []);
-  const onHideAccounts = useCallback(() => setIsShowingAccounts(false), []);
-
   const isTestNet = useSelector(sel.isTestNet);
   const balances = useSelector(sel.balances);
   const currentBlockHeight = useSelector(sel.currentBlockHeight);
@@ -20,6 +17,7 @@ export function useSideBar() {
   const accountMixerRunning = useSelector(sel.getAccountMixerRunning);
   const rescanRequest = useSelector(sel.rescanRequest);
   const isSPV = useSelector(sel.isSPV);
+  const peersCount = useSelector(sel.getPeersCount);
 
   const dispatch = useDispatch();
 
@@ -32,8 +30,8 @@ export function useSideBar() {
 
   return {
     isShowingAccounts,
-    onShowAccounts,
-    onHideAccounts,
+    onShowAccounts: () => setIsShowingAccounts(true),
+    onHideAccounts: () => setIsShowingAccounts(false),
     isTestNet,
     balances,
     currentBlockHeight,
@@ -46,6 +44,7 @@ export function useSideBar() {
     rescanRequest,
     onExpandSideBar,
     onReduceSideBar,
-    isSPV
+    isSPV,
+    peersCount
   };
 }

app/components/views/TicketsPage/PurchaseTab/PurchaseTickets/PurchaseTickets.jsx

@@ -15,7 +15,6 @@ const Tickets = ({ toggleIsLegacy }) => {
     // availableVSPsError,
     defaultSpendingAccount,
     ticketPrice,
-    getVSPTicketsByFeeStatus,
     onPurchaseTicketV3
   } = usePurchaseTab();
 

app/connectors/walletContainer.js

@@ -2,6 +2,7 @@ import { connect } from "react-redux";
 import { bindActionCreators } from "redux";
 import { selectorMap } from "fp";
 import * as ga from "actions/GovernanceActions";
+import { getPeerInfo } from "actions/ControlActions";
 import * as sel from "selectors";
 
 const mapStateToProps = selectorMap({
@@ -12,7 +13,8 @@ const mapStateToProps = selectorMap({
 const mapDispatchToProps = (dispatch) =>
   bindActionCreators(
     {
-      compareInventory: ga.compareInventory
+      compareInventory: ga.compareInventory,
+      getPeerInfo
     },
     dispatch
   );

app/containers/Wallet.js

@@ -32,14 +32,21 @@ const pageAnimation = {
 class Wallet extends React.Component {
   constructor(props) {
     super(props);
-    const { compareInventory, politeiaEnabled } = props;
+    const { compareInventory, politeiaEnabled, getPeerInfo } = props;
     // Compare politeias inventory and update proposal list if they are different
     // every 1 minute.
     this.fetchPoliteiaInventory = this.props.setInterval(() => {
       if (politeiaEnabled) {
         compareInventory();
       }
     }, 60000);
+    // Get peer info every 1 minute, so we can no if there are no available
+    // peers.
+    this.props.setInterval(() => {
+      if (politeiaEnabled) {
+        getPeerInfo();
+      }
+    }, 60000);
   }
 
   render() {

app/reducers/grpc.js

@@ -68,7 +68,9 @@ import {
   VERIFYMESSAGE_ATTEMPT,
   VERIFYMESSAGE_SUCCESS,
   VERIFYMESSAGE_FAILED,
-  VERIFYMESSAGE_CLEANSTORE
+  VERIFYMESSAGE_CLEANSTORE,
+  GETPEERINFO_SUCCESS,
+  GETPEERINFO_FAILED
 } from "../actions/ControlActions";
 import { CLOSEWALLET_SUCCESS } from "actions/WalletLoaderActions";
 import {
@@ -632,6 +634,16 @@ export default function grpc(state = {}, action) {
       return { ...state, allAgendas: action.allAgendas };
     case GETALLAGENDAS_FAILED:
       return { ...state, getAllAgendasError: String(action.error) };
+    case GETPEERINFO_SUCCESS:
+      return {
+        ...state,
+        peersCount: action.peersCount
+      };
+    case GETPEERINFO_FAILED:
+        return {
+          ...state,
+          getPeerInfoError: action.error
+        };
     default:
       return state;
   }

app/selectors.js

@@ -1016,6 +1016,8 @@ export const estimatedFee = compose(
   estimatedSignedSize
 );
 
+export const getPeersCount = get(["grpc", "peersCount"]);
+
 export const totalSpent = createSelector(
   [totalPreviousOutputAmount, totalOutputAmount, totalAmount],
   (totalPreviousOutputAmount, totalOutputAmount, totalAmount) =>

app/wallet/control.js

@@ -293,3 +293,10 @@ export const syncVSPTickets = (walletService, passphrase, vspHost, vspPubkey, ac
       });
     });
   });
+
+export const getPeerInfo = (walletService) => new Promise((ok, fail) => {
+  const request = new api.GetPeerInfoRequest();
+  walletService.getPeerInfo(request, (err, res) =>
+    err ? fail(err) : ok({ ...res })
+  );
+});