fix: clear dependent variable when trade inputs become invalid (#6782)

* fix: handle polling interrupt separately from invalid trades

* fix: clear output when trade becomes invalid, dont use stale trade

* fix: tests

* fix: invert skip

* fix: remove debounce delay

cypress/e2e/swap/swap.test.ts

@@ -37,6 +37,20 @@ describe('Swap', () => {
       cy.get('#swap-currency-input .token-amount-input').should('have.value', '')
     })
 
+    it('resets the dependent input when the independent input is cleared', () => {
+      cy.visit(`/swap?inputCurrency=ETH&outputCurrency=${UNI_MAINNET.address}`)
+      cy.get('#swap-currency-input .token-amount-input').should('have.value', '')
+      cy.get(`#swap-currency-output .token-amount-input`).should('have.value', '')
+
+      cy.get('#swap-currency-input .token-amount-input').type('0.01').should('have.value', '0.01')
+      cy.get(`#swap-currency-output .token-amount-input`).should('not.have.value', '')
+      cy.get('#swap-currency-input .token-amount-input').clear()
+      cy.get(`#swap-currency-output .token-amount-input`).should('not.have.value')
+
+      cy.window().trigger('blur')
+      cy.get(`#swap-currency-output .token-amount-input`).should('not.have.value')
+    })
+
     it('swaps ETH for USDC', () => {
       cy.visit('/swap', { ethereum: 'hardhat' })
       cy.hardhat({ automine: false })

src/hooks/useBestTrade.test.ts

@@ -49,7 +49,13 @@ describe('#useBestV3Trade ExactIn', () => {
 
     const { result } = renderHook(() => useBestTrade(TradeType.EXACT_INPUT, USDCAmount, DAI))
 
-    expect(useRoutingAPITrade).toHaveBeenCalledWith(TradeType.EXACT_INPUT, undefined, DAI, RouterPreference.CLIENT)
+    expect(useRoutingAPITrade).toHaveBeenCalledWith(
+      TradeType.EXACT_INPUT,
+      USDCAmount,
+      DAI,
+      RouterPreference.CLIENT,
+      true // skipFetch
+    )
     expect(useClientSideV3Trade).toHaveBeenCalledWith(TradeType.EXACT_INPUT, USDCAmount, DAI)
     expect(result.current).toEqual({ state: TradeState.VALID, trade: undefined })
   })
@@ -61,7 +67,13 @@ describe('#useBestV3Trade ExactIn', () => {
 
     const { result } = renderHook(() => useBestTrade(TradeType.EXACT_INPUT, USDCAmount, DAI))
 
-    expect(useRoutingAPITrade).toHaveBeenCalledWith(TradeType.EXACT_INPUT, undefined, DAI, RouterPreference.CLIENT)
+    expect(useRoutingAPITrade).toHaveBeenCalledWith(
+      TradeType.EXACT_INPUT,
+      USDCAmount,
+      DAI,
+      RouterPreference.CLIENT,
+      true // skipFetch
+    )
     expect(result.current).toEqual({ state: TradeState.NO_ROUTE_FOUND, trade: undefined })
   })
 
@@ -117,9 +129,10 @@ describe('#useBestV3Trade ExactOut', () => {
 
     expect(useRoutingAPITrade).toHaveBeenCalledWith(
       TradeType.EXACT_OUTPUT,
-      undefined,
+      DAIAmount,
       USDC_MAINNET,
-      RouterPreference.CLIENT
+      RouterPreference.CLIENT,
+      true // skipFetch
     )
     expect(useClientSideV3Trade).toHaveBeenCalledWith(TradeType.EXACT_OUTPUT, DAIAmount, USDC_MAINNET)
     expect(result.current).toEqual({ state: TradeState.VALID, trade: undefined })
@@ -134,9 +147,10 @@ describe('#useBestV3Trade ExactOut', () => {
 
     expect(useRoutingAPITrade).toHaveBeenCalledWith(
       TradeType.EXACT_OUTPUT,
-      undefined,
+      DAIAmount,
       USDC_MAINNET,
-      RouterPreference.CLIENT
+      RouterPreference.CLIENT,
+      true // skipFetch
     )
     expect(result.current).toEqual({ state: TradeState.NO_ROUTE_FOUND, trade: undefined })
   })

src/hooks/useBestTrade.ts

@@ -56,9 +56,10 @@ export function useBestTrade(
   const [routerPreference] = useRouterPreference()
   const routingAPITrade = useRoutingAPITrade(
     tradeType,
-    autoRouterSupported && shouldGetTrade ? debouncedAmount : undefined,
+    amountSpecified ? debouncedAmount : undefined,
     debouncedOtherCurrency,
-    routerPreference
+    routerPreference,
+    !(autoRouterSupported && shouldGetTrade) // skip fetching
   )
 
   const inDebounce =

src/state/routing/types.ts

@@ -8,6 +8,7 @@ import { RouterPreference } from './slice'
 export enum TradeState {
   LOADING,
   INVALID,
+  STALE,
   NO_ROUTE_FOUND,
   VALID,
 }

src/state/routing/useRoutingAPITrade.ts

@@ -25,7 +25,8 @@ export function useRoutingAPITrade<TTradeType extends TradeType>(
   tradeType: TTradeType,
   amountSpecified: CurrencyAmount<Currency> | undefined,
   otherCurrency: Currency | undefined,
-  routerPreference: RouterPreference | typeof INTERNAL_ROUTER_PREFERENCE_PRICE
+  routerPreference: RouterPreference | typeof INTERNAL_ROUTER_PREFERENCE_PRICE,
+  skipFetch = false
 ): {
   state: TradeState
   trade?: InterfaceTrade
@@ -41,7 +42,7 @@ export function useRoutingAPITrade<TTradeType extends TradeType>(
   const queryArgs = useRoutingAPIArguments({
     tokenIn: currencyIn,
     tokenOut: currencyOut,
-    amount: amountSpecified,
+    amount: skipFetch ? undefined : amountSpecified,
     tradeType,
     routerPreference,
   })
@@ -77,8 +78,11 @@ export function useRoutingAPITrade<TTradeType extends TradeType>(
   const isCurrent = currentTradeResult === tradeResult
 
   return useMemo(() => {
-    if (!amountSpecified || isError || !queryArgs) {
-      return { state: TradeState.INVALID, trade: tradeResult?.trade }
+    if (skipFetch && amountSpecified) {
+      // If we don't want to fetch new trades, but have valid inputs, return the stale trade.
+      return { state: TradeState.STALE, trade: tradeResult?.trade }
+    } else if (!amountSpecified || isError || !queryArgs) {
+      return { state: TradeState.INVALID, trade: undefined }
     } else if (tradeResult?.state === QuoteState.NOT_FOUND && isCurrent) {
       return TRADE_NOT_FOUND
     } else if (!tradeResult?.trade) {
@@ -90,7 +94,7 @@ export function useRoutingAPITrade<TTradeType extends TradeType>(
         trade: tradeResult.trade,
       }
     }
-  }, [amountSpecified, isCurrent, isError, queryArgs, tradeResult])
+  }, [amountSpecified, isCurrent, isError, queryArgs, skipFetch, tradeResult?.state, tradeResult?.trade])
 }
 
 // only want to enable this when app hook called