Fixing race condition and amount evaluation (#282)

src/actions/transactionActions.ts

@@ -47,6 +47,7 @@ enum TransactionActionTypes {
   UPDATE_SENDER_BALANCES = 'UPDATE_SENDER_BALANCES',
   SET_TRANSFER_TYPE = 'SET_TRANSFER_TYPE',
   ENABLE_TX_BUTTON = 'ENABLE_TX_BUTTON',
+  DISABLE_TX_BUTTON = 'DISABLE_TX_BUTTON',
   RESET = 'RESET'
 }
 
@@ -65,7 +66,8 @@ const setPayloadEstimatedFee = (
   createType: CreateType,
   isBridged: boolean,
   senderAccountBalance: BalanceState | null,
-  senderCompanionAccountBalance: BalanceState | null
+  senderCompanionAccountBalance: BalanceState | null,
+  chainDecimals: number
 ) => ({
   payload: {
     payloadEstimatedFee,
@@ -75,7 +77,8 @@ const setPayloadEstimatedFee = (
     createType,
     isBridged,
     senderAccountBalance,
-    senderCompanionAccountBalance
+    senderCompanionAccountBalance,
+    chainDecimals
   },
   type: TransactionActionTypes.SET_PAYLOAD_ESTIMATED_FEE
 });
@@ -173,6 +176,11 @@ const enableTxButton = () => ({
   type: TransactionActionTypes.ENABLE_TX_BUTTON
 });
 
+const disableTXButton = () => ({
+  payload: {},
+  type: TransactionActionTypes.DISABLE_TX_BUTTON
+});
+
 const TransactionActionCreators = {
   setSender,
   setAction,
@@ -191,6 +199,7 @@ const TransactionActionCreators = {
   updateSenderBalances,
   setTransferType,
   enableTxButton,
+  disableTXButton,
   reset
 };
 

src/components/DebouncedTextField.tsx

@@ -17,6 +17,9 @@
 import React from 'react';
 import { TextField } from '@material-ui/core';
 import useDebounceState from '../hooks/react/useDebounceState';
+import { useCallback } from 'react';
+import { useUpdateTransactionContext } from '../contexts/TransactionContext';
+import { TransactionActionCreators } from '../actions/transactionActions';
 
 type ValueType = string | null;
 
@@ -49,8 +52,18 @@ export function DebouncedTextField({
   dispatchCallback,
   initialValue = ''
 }: Props) {
+  const { dispatchTransaction } = useUpdateTransactionContext();
   const [value, setValue] = useDebounceState({ initialValue, dispatchCallback });
 
+  // set the transaction button to false on every change.
+  const onChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      dispatchTransaction(TransactionActionCreators.disableTXButton());
+      setValue(event);
+    },
+    [dispatchTransaction, setValue]
+  );
+
   return (
     <TextField
       id={id}
@@ -65,7 +78,7 @@ export function DebouncedTextField({
       helperText={helperText}
       InputProps={InputProps}
       rows={rows}
-      onChange={setValue}
+      onChange={onChange}
     />
   );
 }

src/hooks/transactions/useEstimatedFeePayload.ts

@@ -71,7 +71,8 @@ export const useEstimatedFeePayload = (
           createType,
           isBridged,
           senderAccountBalance,
-          senderCompanionAccountBalance
+          senderCompanionAccountBalance,
+          targetApi.registry.chainDecimals[0]
         )
       ),
     [
@@ -80,7 +81,8 @@ export const useEstimatedFeePayload = (
       isBridged,
       senderAccountBalance,
       senderCompanionAccountBalance,
-      sourceTargetDetails
+      sourceTargetDetails,
+      targetApi.registry.chainDecimals
     ]
   );
 

src/reducers/transactionReducer.ts

@@ -109,22 +109,26 @@ export default function transactionReducer(state: TransactionState, action: Tran
 
     case TransactionActionTypes.SET_TRANSFER_AMOUNT: {
       const { transferAmount, chainDecimals } = action.payload;
+
+      const [actualValue, message] = evalUnits(transferAmount, chainDecimals);
       if (!transferAmount) {
         return {
           ...state,
           transferAmount,
           transferAmountError: null,
-          transactionReadyToExecute: false
+          transactionReadyToExecute: false,
+          estimatedFee: null,
+          payload: null
         };
       }
-      const [actualValue, message] = evalUnits(transferAmount, chainDecimals);
+
       const shouldEvaluatePayloadEstimatedFee = shouldCalculatePayloadFee(state, { transferAmount: actualValue });
 
       return {
         ...state,
         transferAmount: actualValue || null,
         transferAmountError: message,
-        transactionReadyToExecute,
+        transactionReadyToExecute: transactionReadyToExecute && !message,
         estimatedFee: null,
         shouldEvaluatePayloadEstimatedFee
       };
@@ -299,6 +303,12 @@ export default function transactionReducer(state: TransactionState, action: Tran
         transactionReadyToExecute: true
       };
     }
+    case TransactionActionTypes.DISABLE_TX_BUTTON: {
+      return {
+        ...state,
+        transactionReadyToExecute: false
+      };
+    }
     default:
       throw new Error(`Unknown type: ${action.type}`);
   }

src/util/transactions/reducer/index.ts

@@ -23,6 +23,7 @@ import getReceiverAddress from '../../getReceiverAddress';
 import logger from '../../logger';
 import BN from 'bn.js';
 import { BalanceState } from '../../../types/accountTypes';
+import { evalUnits } from '../../evalUnits';
 
 const validateAccount = (receiver: string, sourceChainDetails: ChainState, targetChainDetails: ChainState) => {
   try {
@@ -105,7 +106,13 @@ const shouldCalculatePayloadFee = (state: TransactionState, payload: Payload) =>
   switch (action) {
     case TransactionTypes.INTERNAL_TRANSFER:
     case TransactionTypes.TRANSFER: {
-      return Boolean(transferAmount && receiverAddress && senderAccount);
+      if (transferAmount) {
+        const [, message] = evalUnits(transferAmount.toString(), payload.chainDecimals);
+        const validTransferAmount = !message;
+
+        return Boolean(validTransferAmount && receiverAddress && senderAccount);
+      }
+      return false;
     }
     case TransactionTypes.CUSTOM: {
       return Boolean(weightInput && customCallInput && senderAccount && !customCallError);