diff --git a/src/hooks/useBestTrade.ts b/src/hooks/useBestTrade.ts index 57db09e1ba..e647423b10 100644 --- a/src/hooks/useBestTrade.ts +++ b/src/hooks/useBestTrade.ts @@ -36,21 +36,8 @@ export function useBestTrade( debouncedOtherCurrency ) - const isLoading = amountSpecified !== undefined && debouncedAmount === undefined - - // consider trade debouncing when inputs/outputs do not match - const debouncing = - routingAPITrade.trade && - amountSpecified && - (tradeType === TradeType.EXACT_INPUT - ? !routingAPITrade.trade.inputAmount.equalTo(amountSpecified) || - !amountSpecified.currency.equals(routingAPITrade.trade.inputAmount.currency) || - !debouncedOtherCurrency?.equals(routingAPITrade.trade.outputAmount.currency) - : !routingAPITrade.trade.outputAmount.equalTo(amountSpecified) || - !amountSpecified.currency.equals(routingAPITrade.trade.outputAmount.currency) || - !debouncedOtherCurrency?.equals(routingAPITrade.trade.inputAmount.currency)) - - const useFallback = !autoRouterSupported || (!debouncing && routingAPITrade.state === TradeState.NO_ROUTE_FOUND) + const isLoading = routingAPITrade.state === TradeState.LOADING + const useFallback = !autoRouterSupported || routingAPITrade.state === TradeState.NO_ROUTE_FOUND // only use client side router if routing api trade failed or is not supported const bestV3Trade = useClientSideV3Trade( @@ -63,9 +50,8 @@ export function useBestTrade( return useMemo( () => ({ ...(useFallback ? bestV3Trade : routingAPITrade), - ...(debouncing ? { state: TradeState.SYNCING } : {}), ...(isLoading ? { state: TradeState.LOADING } : {}), }), - [bestV3Trade, debouncing, isLoading, routingAPITrade, useFallback] + [bestV3Trade, isLoading, routingAPITrade, useFallback] ) } diff --git a/src/pages/Swap/index.tsx b/src/pages/Swap/index.tsx index d6384b4b0b..acf289b941 100644 --- a/src/pages/Swap/index.tsx +++ b/src/pages/Swap/index.tsx @@ -148,8 +148,8 @@ export default function Swap({ history }: RouteComponentProps) { [trade, tradeState] ) - const fiatValueInput = useUSDCValue(parsedAmounts[Field.INPUT]) - const fiatValueOutput = useUSDCValue(parsedAmounts[Field.OUTPUT]) + const fiatValueInput = useUSDCValue(trade?.inputAmount) + const fiatValueOutput = useUSDCValue(trade?.outputAmount) const priceImpact = useMemo( () => (routeIsSyncing ? undefined : computeFiatValuePriceImpact(fiatValueInput, fiatValueOutput)), [fiatValueInput, fiatValueOutput, routeIsSyncing] diff --git a/src/state/routing/useRoutingAPITrade.ts b/src/state/routing/useRoutingAPITrade.ts index a2fb36cd9e..5b5b5f40d9 100644 --- a/src/state/routing/useRoutingAPITrade.ts +++ b/src/state/routing/useRoutingAPITrade.ts @@ -56,7 +56,7 @@ export function useRoutingAPITrade( useClientSideRouter: clientSideRouter, }) - const { isLoading, isError, data } = useGetQuoteQuery(queryArgs ?? skipToken, { + const { isLoading, isError, data, currentData } = useGetQuoteQuery(queryArgs ?? skipToken, { pollingInterval: ms`15s`, refetchOnFocus: true, }) @@ -71,6 +71,8 @@ export function useRoutingAPITrade( // get USD gas cost of trade in active chains stablecoin amount const gasUseEstimateUSD = useStablecoinAmountFromFiatValue(quoteResult?.gasUseEstimateUSD) ?? null + const isSyncing = currentData !== data + return useMemo(() => { if (!currencyIn || !currencyOut) { return { @@ -107,14 +109,24 @@ export function useRoutingAPITrade( const trade = transformRoutesToTrade(route, tradeType, gasUseEstimateUSD) return { // always return VALID regardless of isFetching status - state: TradeState.VALID, + state: isSyncing ? TradeState.SYNCING : TradeState.VALID, trade, } } catch (e) { - console.debug('transformRoutesToTrade failed: ', e) return { state: TradeState.INVALID, trade: undefined } } - }, [currencyIn, currencyOut, isLoading, quoteResult, tradeType, isError, route, queryArgs, gasUseEstimateUSD]) + }, [ + currencyIn, + currencyOut, + quoteResult, + isLoading, + tradeType, + isError, + route, + queryArgs, + gasUseEstimateUSD, + isSyncing, + ]) } // only want to enable this when app hook called diff --git a/src/state/routing/utils.ts b/src/state/routing/utils.ts index 3de62603c6..917d8525c6 100644 --- a/src/state/routing/utils.ts +++ b/src/state/routing/utils.ts @@ -26,7 +26,6 @@ export function computeRoutes( if (parsedTokenOut.address !== currencyOut.wrapped.address) return undefined const parsedCurrencyIn = currencyIn.isNative ? nativeOnChain(currencyIn.chainId) : parsedTokenIn - const parsedCurrencyOut = currencyOut.isNative ? nativeOnChain(currencyOut.chainId) : parsedTokenOut try { diff --git a/src/utils/computeFiatValuePriceImpact.tsx b/src/utils/computeFiatValuePriceImpact.tsx index fbda831208..ab831c5df7 100644 --- a/src/utils/computeFiatValuePriceImpact.tsx +++ b/src/utils/computeFiatValuePriceImpact.tsx @@ -1,11 +1,11 @@ -import { CurrencyAmount, Percent, Token } from '@uniswap/sdk-core' +import { Currency, CurrencyAmount, Percent } from '@uniswap/sdk-core' import JSBI from 'jsbi' import { ONE_HUNDRED_PERCENT } from '../constants/misc' export function computeFiatValuePriceImpact( - fiatValueInput: CurrencyAmount | undefined | null, - fiatValueOutput: CurrencyAmount | undefined | null + fiatValueInput: CurrencyAmount | undefined | null, + fiatValueOutput: CurrencyAmount | undefined | null ): Percent | undefined { if (!fiatValueOutput || !fiatValueInput) return undefined if (!fiatValueInput.currency.equals(fiatValueOutput.currency)) return undefined diff --git a/yarn.lock b/yarn.lock index 09eb71a16f..61b1a033f4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3337,9 +3337,9 @@ "@react-hook/throttle" "^2.2.0" "@reduxjs/toolkit@^1.6.1": - version "1.7.2" - resolved "https://registry.yarnpkg.com/@reduxjs/toolkit/-/toolkit-1.7.2.tgz#b428aaef92582379464f9de698dbb71957eafb02" - integrity sha512-wwr3//Ar8ZhM9bS58O+HCIaMlR4Y6SNHfuszz9hKnQuFIKvwaL3Kmjo6fpDKUOjo4Lv54Yi299ed8rofCJ/Vjw== + version "1.8.0" + resolved "https://registry.yarnpkg.com/@reduxjs/toolkit/-/toolkit-1.8.0.tgz#8ae875e481ed97e4a691aafa034f876bfd0413c4" + integrity sha512-cdfHWfcvLyhBUDicoFwG1u32JqvwKDxLxDd7zSmSoFw/RhYLOygIRtmaMjPRUUHmVmmAGAvquLLsKKU/677kSQ== dependencies: immer "^9.0.7" redux "^4.1.2"