fix(L2): ensure chainIds match before fetching pool data (#2652)

* ensure chainIds match before fetching pool data

* debounce both input currencies, and only look for pairs on currencies that share a chainId

* pr feedback

src/hooks/useAllCurrencyCombinations.ts

@@ -2,15 +2,14 @@ import { Currency, Token } from '@uniswap/sdk-core'
 import { useMemo } from 'react'
 
 import { ADDITIONAL_BASES, BASES_TO_CHECK_TRADES_AGAINST, CUSTOM_BASES } from '../constants/routing'
-import { useActiveWeb3React } from './web3'
 
 export function useAllCurrencyCombinations(currencyA?: Currency, currencyB?: Currency): [Token, Token][] {
-  const { chainId } = useActiveWeb3React()
+  const chainId = currencyA?.chainId
 
   const [tokenA, tokenB] = chainId ? [currencyA?.wrapped, currencyB?.wrapped] : [undefined, undefined]
 
   const bases: Token[] = useMemo(() => {
-    if (!chainId) return []
+    if (!chainId || chainId !== tokenB?.chainId) return []
 
     const common = BASES_TO_CHECK_TRADES_AGAINST[chainId] ?? []
     const additionalA = tokenA ? ADDITIONAL_BASES[chainId]?.[tokenA.address] ?? [] : []

src/hooks/useBestV3Trade.ts

@@ -26,12 +26,12 @@ export function useBestV3Trade(
   const routingAPIEnabled = useRoutingAPIEnabled()
   const isWindowVisible = useIsWindowVisible()
 
-  const debouncedAmount = useDebounce(amountSpecified, 100)
+  const [debouncedAmount, debouncedOtherCurrency] = useDebounce([amountSpecified, otherCurrency], 200)
 
   const routingAPITrade = useRoutingAPITrade(
     tradeType,
     routingAPIEnabled && isWindowVisible ? debouncedAmount : undefined,
-    otherCurrency
+    debouncedOtherCurrency
   )
 
   const isLoading = amountSpecified !== undefined && debouncedAmount === undefined
@@ -43,18 +43,18 @@ export function useBestV3Trade(
     (tradeType === TradeType.EXACT_INPUT
       ? !routingAPITrade.trade.inputAmount.equalTo(amountSpecified) ||
         !amountSpecified.currency.equals(routingAPITrade.trade.inputAmount.currency) ||
-        !otherCurrency?.equals(routingAPITrade.trade.outputAmount.currency)
+        !debouncedOtherCurrency?.equals(routingAPITrade.trade.outputAmount.currency)
       : !routingAPITrade.trade.outputAmount.equalTo(amountSpecified) ||
         !amountSpecified.currency.equals(routingAPITrade.trade.outputAmount.currency) ||
-        !otherCurrency?.equals(routingAPITrade.trade.inputAmount.currency))
+        !debouncedOtherCurrency?.equals(routingAPITrade.trade.inputAmount.currency))
 
   const useFallback = !routingAPIEnabled || (!debouncing && routingAPITrade.state === V3TradeState.NO_ROUTE_FOUND)
 
   // only use client side router if routing api trade failed
   const bestV3Trade = useClientSideV3Trade(
     tradeType,
     useFallback ? debouncedAmount : undefined,
-    useFallback ? otherCurrency : undefined
+    useFallback ? debouncedOtherCurrency : undefined
   )
 
   return {