pass loader from useFallbackPriceImpact

1. bail out early on do not calc

src/custom/hooks/usePriceImpact/types.ts

@@ -1,5 +1,5 @@
 import TradeGp from 'state/swap/TradeGp'
-import { CurrencyAmount, Currency, Percent } from '@uniswap/sdk-core'
+import { CurrencyAmount, Currency } from '@uniswap/sdk-core'
 
 export type ParsedAmounts = {
   INPUT: CurrencyAmount<Currency> | undefined
@@ -8,6 +8,5 @@ export type ParsedAmounts = {
 
 export interface FallbackPriceImpactParams {
   abTrade?: TradeGp
-  fiatPriceImpact?: Percent
   isWrapping: boolean
 }

src/custom/hooks/usePriceImpact/useFallbackPriceImpact.ts

@@ -33,34 +33,43 @@ function _getBaTradeParams({ abTrade, sellToken, buyToken }: SwapParams) {
 }
 
 function _getBaTradeParsedAmount(abTrade: TradeGp | undefined, shouldCalculate: boolean) {
-  if (!shouldCalculate || !abTrade) return undefined
+  if (!shouldCalculate) return undefined
 
   // return the AB Trade's output amount WITHOUT fee
-  return abTrade.outputAmountWithoutFee
+  return abTrade?.outputAmountWithoutFee
 }
 
-export default function useFallbackPriceImpact({ abTrade, fiatPriceImpact, isWrapping }: FallbackPriceImpactParams) {
+export default function useFallbackPriceImpact({ abTrade, isWrapping }: FallbackPriceImpactParams) {
   const {
     typedValue,
     INPUT: { currencyId: sellToken },
     OUTPUT: { currencyId: buyToken },
   } = useSwapState()
 
+  const [loading, setLoading] = useState(false)
+
   // Should we even calc this? Check if fiatPriceImpact exists OR user is wrapping token
-  const shouldCalculate = !Boolean(fiatPriceImpact) || !isWrapping
+  const shouldCalculate = Boolean(abTrade && !isWrapping)
+
+  // to bail out early
+  useEffect(() => {
+    !shouldCalculate && setLoading(false)
+  }, [shouldCalculate])
 
   // Calculate the necessary params to get the inverse trade impact
   const { parsedAmount, outputCurrency, ...swapQuoteParams } = useMemo(
     () => ({
-      parsedAmount: _getBaTradeParsedAmount(abTrade, shouldCalculate),
       ..._getBaTradeParams({ abTrade, sellToken, buyToken }),
+      parsedAmount: _getBaTradeParsedAmount(abTrade, shouldCalculate),
     }),
     [abTrade, buyToken, sellToken, shouldCalculate]
   )
 
-  const { quote, loading } = useCalculateQuote({
-    amountAtoms: parsedAmount?.quotient.toString(),
+  const { quote } = useCalculateQuote({
     ...swapQuoteParams,
+    amountAtoms: parsedAmount?.quotient.toString(),
+    loading,
+    setLoading,
   })
 
   // Calculate BA trade

src/custom/hooks/usePriceImpact/useQuoteAndSwap.ts

@@ -17,7 +17,8 @@ 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 WithLoading = { loading: boolean; setLoading: React.Dispatch<React.SetStateAction<boolean>> }
 
 type ExactInSwapParams = {
   parsedAmount: CurrencyAmount<Currency> | undefined
@@ -31,37 +32,24 @@ type GetQuoteParams = {
   buyToken?: string | null
   fromDecimals?: number
   toDecimals?: number
-}
+} & WithLoading
 
 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,
     sellToken,
     buyToken,
     fromDecimals = DEFAULT_DECIMALS,
     toDecimals = DEFAULT_DECIMALS,
+    loading,
+    setLoading,
   } = params
   const { chainId: preChain } = useActiveWeb3React()
   const { account } = useWalletInfo()
 
   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)
@@ -116,7 +104,7 @@ export function useCalculateQuote(params: GetQuoteParams) {
         setLocalQuote(quoteError)
       })
       .finally(() => setLoading(false))
-  }, [amount, account, preChain, buyToken, sellToken, toDecimals, fromDecimals])
+  }, [amount, account, preChain, buyToken, sellToken, toDecimals, fromDecimals, setLoading])
 
   return { quote, loading, setLoading }
 }