From 50a32a19a58621ad55cebb3b765860b0468ec568 Mon Sep 17 00:00:00 2001
From: David <david.sato64@gmail.com>
Date: Thu, 9 Dec 2021 14:45:28 +0000
Subject: [PATCH] [ABA impact] Show eager loader (#1985)

* commonTypes > types

* show loader on amount change
---
 src/custom/hooks/usePriceImpact/index.ts          |  2 +-
 .../usePriceImpact/{commonTypes.ts => types.ts}   |  0
 .../usePriceImpact/useFallbackPriceImpact.ts      |  2 +-
 .../usePriceImpact/useFiatValuePriceImpact.ts     |  2 +-
 .../hooks/usePriceImpact/useQuoteAndSwap.ts       | 15 +++++++++++++++
 5 files changed, 18 insertions(+), 3 deletions(-)
 rename src/custom/hooks/usePriceImpact/{commonTypes.ts => types.ts} (100%)

diff --git a/src/custom/hooks/usePriceImpact/index.ts b/src/custom/hooks/usePriceImpact/index.ts
index 264d2c7f4..7638a96c1 100644
--- a/src/custom/hooks/usePriceImpact/index.ts
+++ b/src/custom/hooks/usePriceImpact/index.ts
@@ -1,7 +1,7 @@
 import { Percent } from '@uniswap/sdk-core'
 import useFiatValuePriceImpact from './useFiatValuePriceImpact'
 import useFallbackPriceImpact from './useFallbackPriceImpact'
-import { FallbackPriceImpactParams, ParsedAmounts } from './commonTypes'
+import { FallbackPriceImpactParams, ParsedAmounts } from './types'
 import { QuoteError } from 'state/price/actions'
 
 type PriceImpactParams = Omit<FallbackPriceImpactParams, 'fiatPriceImpact'> & {
diff --git a/src/custom/hooks/usePriceImpact/commonTypes.ts b/src/custom/hooks/usePriceImpact/types.ts
similarity index 100%
rename from src/custom/hooks/usePriceImpact/commonTypes.ts
rename to src/custom/hooks/usePriceImpact/types.ts
diff --git a/src/custom/hooks/usePriceImpact/useFallbackPriceImpact.ts b/src/custom/hooks/usePriceImpact/useFallbackPriceImpact.ts
index a7f1d92e5..e548f43e7 100644
--- a/src/custom/hooks/usePriceImpact/useFallbackPriceImpact.ts
+++ b/src/custom/hooks/usePriceImpact/useFallbackPriceImpact.ts
@@ -4,7 +4,7 @@ import { Percent } from '@uniswap/sdk-core'
 import { useSwapState } from 'state/swap/hooks'
 
 import useExactInSwap, { useCalculateQuote } from './useQuoteAndSwap'
-import { FallbackPriceImpactParams } from './commonTypes'
+import { FallbackPriceImpactParams } from './types'
 import { calculateFallbackPriceImpact, FeeQuoteParams } from 'utils/price'
 import TradeGp from 'state/swap/TradeGp'
 import { QuoteInformationObject } from 'state/price/reducer'
diff --git a/src/custom/hooks/usePriceImpact/useFiatValuePriceImpact.ts b/src/custom/hooks/usePriceImpact/useFiatValuePriceImpact.ts
index eae31cf2a..2c8c7961e 100644
--- a/src/custom/hooks/usePriceImpact/useFiatValuePriceImpact.ts
+++ b/src/custom/hooks/usePriceImpact/useFiatValuePriceImpact.ts
@@ -3,7 +3,7 @@ import { Field } from 'state/swap/actions'
 import { useHigherUSDValue } from 'hooks/useUSDCPrice'
 
 import { computeFiatValuePriceImpact } from 'utils/computeFiatValuePriceImpact'
-import { ParsedAmounts } from './commonTypes'
+import { ParsedAmounts } from './types'
 
 export default function useFiatValuePriceImpact(parsedAmounts: ParsedAmounts) {
   const fiatValueInput = useHigherUSDValue(parsedAmounts[Field.INPUT])
diff --git a/src/custom/hooks/usePriceImpact/useQuoteAndSwap.ts b/src/custom/hooks/usePriceImpact/useQuoteAndSwap.ts
index 8d63378ef..d50392f2d 100644
--- a/src/custom/hooks/usePriceImpact/useQuoteAndSwap.ts
+++ b/src/custom/hooks/usePriceImpact/useQuoteAndSwap.ts
@@ -17,6 +17,7 @@ import { SupportedChainId } from 'constants/chains'
 import { DEFAULT_DECIMALS } from 'constants/index'
 import { QuoteError } from 'state/price/actions'
 import { isWrappingTrade } from 'state/swap/utils'
+import { useSwapState } from 'state/swap/hooks'
 
 type ExactInSwapParams = {
   parsedAmount: CurrencyAmount<Currency> | undefined
@@ -34,6 +35,14 @@ type GetQuoteParams = {
 
 type FeeQuoteParamsWithError = FeeQuoteParams & { error?: QuoteError }
 
+function useOnSwapParamChange<T>({ onChangeCb, predicate }: { predicate: T; onChangeCb: (...params: any[]) => any }) {
+  const { typedValue, INPUT, OUTPUT, independentField } = useSwapState()
+
+  useEffect(() => {
+    Boolean(predicate) && onChangeCb
+  }, [typedValue, INPUT.currencyId, OUTPUT.currencyId, independentField, predicate, onChangeCb])
+}
+
 export function useCalculateQuote(params: GetQuoteParams) {
   const {
     amountAtoms: amount,
@@ -48,6 +57,12 @@ export function useCalculateQuote(params: GetQuoteParams) {
   const [quote, setLocalQuote] = useState<QuoteInformationObject | FeeQuoteParamsWithError | undefined>()
   const [loading, setLoading] = useState(false)
 
+  // listens to changed swap params and calls onChangeCb based on predicate Boolean(predicate)
+  useOnSwapParamChange({
+    onChangeCb: () => setLoading(true),
+    predicate: amount,
+  })
+
   useEffect(() => {
     const chainId = supportedChainId(preChain)
     // bail out early - amount here is undefined if usd price impact is valid