Merge pull request #508 from trezor/feature/debounced-send-form

Feature/debounce validation in send forms

src/actions/ethereum/SendFormActions.js

@@ -11,6 +11,7 @@ import { initialState } from 'reducers/SendFormEthereumReducer';
 import * as reducerUtils from 'reducers/utils';
 import * as ethUtils from 'utils/ethUtils';
 import { toFiatCurrency, fromFiatCurrency } from 'utils/fiatConverter';
+import { debounce } from 'utils/common';
 
 import type {
     Dispatch,
@@ -36,6 +37,15 @@ const actions = [
     ...Object.values(SEND).filter(v => typeof v === 'string'),
 ];
 
+const debouncedValidation = debounce((dispatch: Dispatch) => {
+    const validated = dispatch(ValidationActions.validation());
+    dispatch({
+        type: SEND.VALIDATION,
+        networkType: 'ethereum',
+        state: validated,
+    });
+}, 300);
+
 /*
  * Called from WalletService
  */
@@ -108,12 +118,7 @@ export const observe = (prevState: ReducersState, action: Action): ThunkAction =
     }
 
     if (shouldUpdate) {
-        const validated = dispatch(ValidationActions.validation());
+        debouncedValidation(dispatch);
-        dispatch({
-            type: SEND.VALIDATION,
-            networkType: 'ethereum',
-            state: validated,
-        });
     }
 };
 

src/actions/ripple/SendFormActions.js

@@ -7,6 +7,7 @@ import { initialState } from 'reducers/SendFormRippleReducer';
 import * as reducerUtils from 'reducers/utils';
 import { fromDecimalAmount } from 'utils/formatUtils';
 import { toFiatCurrency, fromFiatCurrency } from 'utils/fiatConverter';
+import { debounce } from 'utils/common';
 
 import type {
     Dispatch,
@@ -23,6 +24,15 @@ import * as SessionStorageActions from '../SessionStorageActions';
 import * as BlockchainActions from './BlockchainActions';
 import * as ValidationActions from './SendFormValidationActions';
 
+const debouncedValidation = debounce((dispatch: Dispatch, prevState: ReducersState) => {
+    const validated = dispatch(ValidationActions.validation(prevState.sendFormRipple));
+    dispatch({
+        type: SEND.VALIDATION,
+        networkType: 'ripple',
+        state: validated,
+    });
+}, 300);
+
 /*
  * Called from WalletService
  */
@@ -71,12 +81,7 @@ export const observe = (prevState: ReducersState, action: Action): ThunkAction =
     }
 
     if (shouldUpdate) {
-        const validated = dispatch(ValidationActions.validation(prevState.sendFormRipple));
+        debouncedValidation(dispatch, prevState);
-        dispatch({
-            type: SEND.VALIDATION,
-            networkType: 'ripple',
-            state: validated,
-        });
     }
 };
 

src/utils/common.js

@@ -0,0 +1,9 @@
+export const debounce = (func, wait) => {
+    let timeout;
+    return (...args) => {
+        clearTimeout(timeout);
+        timeout = setTimeout(() => {
+            func(...args);
+        }, wait);
+    };
+};