From 824fcd34c4c8c89a569316273039a190086dab9f Mon Sep 17 00:00:00 2001
From: Frederik Bolding <frederik.bolding@gmail.com>
Date: Mon, 31 May 2021 15:17:04 +0200
Subject: [PATCH] Fix bug and simplify debounce (#3989)

---
 .../SwapAssets/components/SwapAssets.tsx      | 28 +++++++++----------
 1 file changed, 13 insertions(+), 15 deletions(-)

diff --git a/src/features/SwapAssets/components/SwapAssets.tsx b/src/features/SwapAssets/components/SwapAssets.tsx
index 17a476b9dea..428ae9cf862 100644
--- a/src/features/SwapAssets/components/SwapAssets.tsx
+++ b/src/features/SwapAssets/components/SwapAssets.tsx
@@ -1,5 +1,6 @@
 import React, { useCallback, useContext, useEffect, useState } from 'react';
 
+import debounce from 'lodash/debounce';
 import styled from 'styled-components';
 
 import {
@@ -29,7 +30,6 @@ import { SPACING } from '@theme';
 import translate, { translateRaw } from '@translations';
 import { Asset, ISwapAsset, Network, NetworkId, StoreAccount } from '@types';
 import { bigify, getTimeDifference, totalTxFeeToString, useInterval } from '@utils';
-import { useDebounce } from '@vendor';
 
 import { getAccountsWithAssetBalance, getUnselectedAssets } from '../helpers';
 import { SwapFormState } from '../types';
@@ -112,34 +112,32 @@ const SwapAssets = (props: Props) => {
     userAssets.find((userAsset) => a.uuid === userAsset.uuid)
   );
 
-  const [, , calculateNewToAmountDebounced] = useDebounce(
-    useCallback(() => {
-      calculateNewToAmount(fromAmount);
-    }, [fromAmount, account]),
-    500
-  );
+  const calculateNewToAmountDebounced = useCallback(debounce(calculateNewToAmount, 500), [
+    account,
+    fromAsset,
+    toAsset
+  ]);
 
   // SEND AMOUNT CHANGED
   const handleFromAmountChangedEvent = (e: React.ChangeEvent<HTMLSelectElement>) => {
     const value = e.target.value;
     handleFromAmountChanged(value);
 
-    calculateNewToAmountDebounced();
+    calculateNewToAmountDebounced(value);
   };
 
-  const [, , calculateNewFromAmountDebounced] = useDebounce(
-    useCallback(() => {
-      calculateNewFromAmount(toAmount);
-    }, [toAmount, account]),
-    500
-  );
+  const calculateNewFromAmountDebounced = useCallback(debounce(calculateNewFromAmount, 500), [
+    account,
+    fromAsset,
+    toAsset
+  ]);
 
   // RECEIVE AMOUNT CHANGED
   const handleToAmountChangedEvent = async (e: React.ChangeEvent<HTMLSelectElement>) => {
     const value = e.target.value;
     handleToAmountChanged(value);
 
-    calculateNewFromAmountDebounced();
+    calculateNewFromAmountDebounced(value);
   };
 
   // Calculate new "to amount" after "to asset" is selected