Merge pull request #101 from andrerfneves/feature/deny-send-on-node-sync

Feature/deny send on node sync

app/components/status-pill.js

@@ -6,6 +6,7 @@ import styled, { keyframes, withTheme } from 'styled-components';
 import { TextComponent } from './text';
 
 import { DARK } from '../constants/themes';
+import { NODE_SYNC_TYPES } from '../constants/node-sync-types';
 
 import readyIconDark from '../assets/images/green_check_dark.png';
 import readyIconLight from '../assets/images/green_check_light.png';
@@ -71,7 +72,10 @@ class Component extends PureComponent<Props> {
 
   componentDidUpdate(prevProps: Props) {
     const { getBlockchainStatus, nodeSyncType } = this.props;
-    if (prevProps.nodeSyncType === 'syncing' && nodeSyncType === 'ready') {
+    if (
+      prevProps.nodeSyncType === NODE_SYNC_TYPES.SYNCING
+      && nodeSyncType === NODE_SYNC_TYPES.READY
+    ) {
       // if the status is "ready", we can increase the interval to avoid useless rpc calls
       this.cleanUpdateInterval();
       this.timer = setInterval(() => getBlockchainStatus(), MINUTE_IN_MILI);
@@ -91,7 +95,7 @@ class Component extends PureComponent<Props> {
 
   isSyncing = () => {
     const { nodeSyncType } = this.props;
-    return nodeSyncType === 'syncing';
+    return nodeSyncType === NODE_SYNC_TYPES.SYNCING;
   };
 
   getReadyIcon = () => {
@@ -113,11 +117,11 @@ class Component extends PureComponent<Props> {
     const { nodeSyncType } = this.props;
 
     switch (nodeSyncType) {
-      case 'syncing':
+      case NODE_SYNC_TYPES.SYNCING:
         return this.getSyncingIcon();
-      case 'ready':
+      case NODE_SYNC_TYPES.READY:
         return this.getReadyIcon();
-      case 'error':
+      case NODE_SYNC_TYPES.ERROR:
         return this.getErrorIcon();
       default:
         return null;
@@ -127,8 +131,8 @@ class Component extends PureComponent<Props> {
   render() {
     const icon = this.getIcon();
     const { nodeSyncType, nodeSyncProgress } = this.props;
-    const percent = nodeSyncType === 'syncing' ? `(${nodeSyncProgress.toFixed(2)}%)` : '';
-    const typeText = nodeSyncType === 'ready' ? 'Synced' : nodeSyncType;
+    const percent = nodeSyncType === NODE_SYNC_TYPES.SYNCING ? `(${nodeSyncProgress.toFixed(2)}%)` : '';
+    const typeText = nodeSyncType === NODE_SYNC_TYPES.READY ? 'Synced' : nodeSyncType;
 
     return (
       <Wrapper id='status-pill'>

app/constants/node-sync-types.js

@@ -0,0 +1,7 @@
+// @flow
+
+export const NODE_SYNC_TYPES = {
+  READY: 'ready',
+  SYNCING: 'syncing',
+  ERROR: 'error',
+};

app/containers/send.js

@@ -45,9 +45,10 @@ export type MapStateToProps = {|
   isSending: boolean,
   operationId: string | null,
   isToAddressValid: boolean,
+  nodeSyncType: string,
 |};
 
-const mapStateToProps = ({ sendStatus, receive }: AppState): MapStateToProps => ({
+const mapStateToProps = ({ sendStatus, receive, app }: AppState): MapStateToProps => ({
   balance: sendStatus.addressBalance,
   zecPrice: sendStatus.zecPrice,
   addresses: receive.addresses,
@@ -55,6 +56,7 @@ const mapStateToProps = ({ sendStatus, receive }: AppState): MapStateToProps =>
   isSending: sendStatus.isSending,
   operationId: sendStatus.operationId,
   isToAddressValid: sendStatus.isToAddressValid,
+  nodeSyncType: app.nodeSyncType,
 });
 
 export type MapDispatchToProps = {|

app/containers/status-pill.js

@@ -3,11 +3,11 @@
 import { connect } from 'react-redux';
 import eres from 'eres';
 import { BigNumber } from 'bignumber.js';
+
 import { updateNodeSyncStatus } from '../redux/modules/app';
-
 import { StatusPill } from '../components/status-pill';
-
 import rpc from '../../services/api';
+import { NODE_SYNC_TYPES } from '../constants/node-sync-types';
 
 import type { Dispatch } from '../types/redux';
 import type { AppState } from '../types/app-state';
@@ -34,7 +34,7 @@ const mapDispatchToProps = (dispatch: Dispatch): MapDispatchToProps => ({
       return dispatch(
         updateNodeSyncStatus({
           nodeSyncProgress: 0,
-          nodeSyncType: 'error',
+          nodeSyncType: NODE_SYNC_TYPES.ERROR,
         }),
       );
     }
@@ -44,7 +44,9 @@ const mapDispatchToProps = (dispatch: Dispatch): MapDispatchToProps => ({
     dispatch(
       updateNodeSyncStatus({
         nodeSyncProgress: newProgress,
-        nodeSyncType: new BigNumber(newProgress).gt(99.99) ? 'ready' : 'syncing',
+        nodeSyncType: new BigNumber(newProgress).gt(99.99)
+          ? NODE_SYNC_TYPES.READY
+          : NODE_SYNC_TYPES.SYNCING,
       }),
     );
   },

app/redux/modules/app.js

@@ -3,6 +3,7 @@
 import electronStore from '../../../config/electron-store';
 
 import { ZCASH_NETWORK, EMBEDDED_DAEMON } from '../../constants/zcash-network';
+import { NODE_SYNC_TYPES } from '../../constants/node-sync-types';
 
 import type { Action } from '../../types/redux';
 
@@ -50,7 +51,7 @@ const initialState: State = {
   isErrorModalVisible: false,
   error: null,
   nodeSyncProgress: 0,
-  nodeSyncType: 'syncing',
+  nodeSyncType: NODE_SYNC_TYPES.SYNCING,
   zcashNetwork: electronStore.get(ZCASH_NETWORK),
   embeddedDaemon: electronStore.get(EMBEDDED_DAEMON),
 };

app/views/send.js

@@ -8,6 +8,7 @@ import { type Match } from 'react-router-dom';
 
 import { FEES } from '../constants/fees';
 import { DARK } from '../constants/themes';
+import { NODE_SYNC_TYPES } from '../constants/node-sync-types';
 
 import { InputLabelComponent } from '../components/input-label';
 import { InputComponent } from '../components/input';
@@ -690,7 +691,7 @@ class Component extends PureComponent<Props, State> {
   };
 
   shouldDisableSendButton = () => {
-    const { balance, isToAddressValid } = this.props;
+    const { balance, isToAddressValid, nodeSyncType } = this.props;
     const {
       from, amount, to, fee,
     } = this.state;
@@ -703,6 +704,7 @@ class Component extends PureComponent<Props, State> {
       || !isToAddressValid
       || new BigNumber(amount).gt(balance)
       || !this.isMemoContentValid()
+      || nodeSyncType !== NODE_SYNC_TYPES.READY
     );
   };
 
@@ -722,7 +724,14 @@ class Component extends PureComponent<Props, State> {
 
   render() {
     const {
-      addresses, balance, zecPrice, isSending, error, operationId, theme,
+      addresses,
+      balance,
+      zecPrice,
+      isSending,
+      error,
+      operationId,
+      theme,
+      nodeSyncType,
     } = this.props;
     const {
       showFee,
@@ -925,6 +934,11 @@ class Component extends PureComponent<Props, State> {
             onClose={this.reset}
             renderTrigger={toggle => (
               <SendButtonWrapper>
+                {nodeSyncType !== NODE_SYNC_TYPES.READY && (
+                  <SimpleTooltip>
+                    <TooltipText value='Cannot send transaction until data is synced.' />
+                  </SimpleTooltip>
+                )}
                 {!showBalanceTooltip ? null : (
                   <SimpleTooltip>
                     <TooltipText value='Not enough funds!' />