[ABA impact] - Re-enable Fiat Price Impact + minor optimisations

src/custom/components/SwapWarnings/index.tsx

@@ -8,7 +8,7 @@ import { useHighFeeWarning } from 'state/swap/hooks'
 import TradeGp from 'state/swap/TradeGp'
 import { AuxInformationContainer } from '../CurrencyInputPanel'
 import { darken } from 'polished'
-import useDebounceWithForceUpdate from '@src/custom/hooks/useDebounceWithForceUpdate'
+import useDebounce from 'hooks/useDebounce'
 
 interface HighFeeContainerProps {
   padding?: string
@@ -160,11 +160,10 @@ export const HighFeeWarning = (props: WarningProps) => {
 }
 
 export const NoImpactWarning = (props: WarningProps) => {
-  const { acceptedStatus, acceptWarningCb, hide, trade } = props
+  const { acceptedStatus, acceptWarningCb, hide } = props
   const theme = useContext(ThemeContext)
-  // TODO: change this - probably not the best way to do this..
-  // TODO: should likely make a global flag indiciating ABA impact loading
-  const debouncedHide = useDebounceWithForceUpdate(hide, 2000, trade)
+
+  const debouncedHide = useDebounce(hide, 2000)
   const [bgColour, textColour] = [LOW_TIER_FEE.colour, darken(0.7, HIGH_TIER_FEE.colour)]
 
   if (!!debouncedHide) return null

src/custom/hooks/usePriceImpact/index.ts

@@ -15,16 +15,14 @@ export interface PriceImpact {
 }
 
 export default function usePriceImpact({ abTrade, parsedAmounts, isWrapping }: PriceImpactParams): PriceImpact {
-  /* const fiatPriceImpact =  */ useFiatValuePriceImpact(parsedAmounts)
-  // TODO: remove this - testing only - forces fallback price impact
+  const fiatPriceImpact = useFiatValuePriceImpact(parsedAmounts)
   const {
     impact: fallbackPriceImpact,
     error,
     loading,
-  } = useFallbackPriceImpact({ abTrade, fiatPriceImpact: undefined, isWrapping })
+  } = useFallbackPriceImpact({ abTrade: fiatPriceImpact ? undefined : abTrade, isWrapping })
 
-  const priceImpact = /* fiatPriceImpact ||  */ fallbackPriceImpact
+  const priceImpact = fiatPriceImpact || fallbackPriceImpact
 
-  // TODO: remove this - testing only - forces fallback
-  return { priceImpact, error, loading }
+  return { priceImpact, error: fiatPriceImpact ? undefined : error, loading }
 }

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,45 @@ 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 = !!abTrade && !isWrapping
+
+  // to bail out early
+  useEffect(() => {
+    if (!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: (state: boolean) => void }
 
 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 }
 }

src/custom/pages/Swap/SwapMod.tsx

@@ -264,6 +264,9 @@ export default function Swap({
 
   const { feeWarningAccepted, setFeeWarningAccepted } = useHighFeeWarning(trade)
   const { impactWarningAccepted, setImpactWarningAccepted } = useUnknownImpactWarning(priceImpactParams)
+  // don't show the unknown impact warning on: no trade, wrapping native, no error, or it's loading impact
+  const hideUnknownImpactWarning = !trade || !!onWrap || !priceImpactError || priceImpactLoading
+
   // const fiatValueInput = useUSDCValue(parsedAmounts[Field.INPUT])
   // const fiatValueOutput = useUSDCValue(parsedAmounts[Field.OUTPUT])
   const fiatValueInput = useHigherUSDValue(parsedAmounts[Field.INPUT])
@@ -775,7 +778,7 @@ export default function Swap({
           />
           <NoImpactWarning
             trade={trade}
-            hide={!trade || !!onWrap || !priceImpactError || priceImpactLoading}
+            hide={hideUnknownImpactWarning}
             acceptedStatus={impactWarningAccepted}
             acceptWarningCb={!isExpertMode && account ? () => setImpactWarningAccepted((state) => !state) : undefined}
             width="99%"