feat: Use local reducer in Swap flow (#6312)

* test: swap flow cypress tests

* fix: use default parameter

* use local reducer in swap flow

* remove swap from global reducer

* fix: remove comments

* feat: add new test

* move token constant to fixtures file

---------
Co-authored-by: Eddie Dugan <eddie.dugan@uniswap.org>

cypress/e2e/swap.test.ts

-import { SupportedChainId, WETH9 } from '@uniswap/sdk-core'
-
+import { WETH_GOERLI } from '../fixtures/constants'
 import { getTestSelector } from '../utils'
 
 describe('Swap', () => {
@@ -87,7 +86,7 @@ describe('Swap', () => {
   })
 
   it('should have the correct default input from URL params ', () => {
-    cy.visit(`/swap?inputCurrency=${WETH9[SupportedChainId.GOERLI].address}`)
+    cy.visit(`/swap?inputCurrency=${WETH_GOERLI}`)
 
     verifyToken('input', 'WETH')
     verifyToken('output', null)
@@ -100,7 +99,7 @@ describe('Swap', () => {
   })
 
   it('should have the correct default output from URL params ', () => {
-    cy.visit(`/swap?outputCurrency=${WETH9[SupportedChainId.GOERLI].address}`)
+    cy.visit(`/swap?outputCurrency=${WETH_GOERLI}`)
 
     verifyToken('input', null)
     verifyToken('output', 'WETH')
@@ -134,4 +133,13 @@ describe('Swap', () => {
     cy.get(getTestSelector('swap-settings-button')).click()
     cy.contains('Settings').should('not.exist')
   })
+
+  it('inputs reset when navigating between pages', () => {
+    cy.get('#swap-currency-input .token-amount-input').clear().type('0.01')
+    cy.get('#swap-currency-output .token-amount-input').should('not.equal', '')
+    cy.visit('/pool')
+    cy.visit('/swap')
+    cy.get('#swap-currency-input .token-amount-input').should('have.value', '')
+    cy.get('#swap-currency-output .token-amount-input').should('not.equal', '')
+  })
 })

cypress/fixtures/constants.ts

+export const WETH_GOERLI = '0xB4FBF271143F4FBf7B91A5ded31805e42b2208d6'

src/pages/Swap/index.tsx

@@ -30,7 +30,7 @@ import { useSwapCallback } from 'hooks/useSwapCallback'
 import { useUSDPrice } from 'hooks/useUSDPrice'
 import JSBI from 'jsbi'
 import { formatSwapQuoteReceivedEventProperties } from 'lib/utils/analytics'
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useReducer, useState } from 'react'
 import { ReactNode } from 'react'
 import { ArrowDown, Info } from 'react-feather'
 import { useNavigate } from 'react-router-dom'
@@ -57,19 +57,14 @@ import { useCurrency, useDefaultActiveTokens } from '../../hooks/Tokens'
 import { useIsSwapUnsupported } from '../../hooks/useIsSwapUnsupported'
 import useWrapCallback, { WrapErrorText, WrapType } from '../../hooks/useWrapCallback'
 import { Field } from '../../state/swap/actions'
-import {
-  useDefaultsFromURLSearch,
-  useDerivedSwapInfo,
-  useSwapActionHandlers,
-  useSwapState,
-} from '../../state/swap/hooks'
+import { useDefaultsFromURLSearch, useDerivedSwapInfo, useSwapActionHandlers } from '../../state/swap/hooks'
+import swapReducer, { initialState as initialSwapState } from '../../state/swap/reducer'
 import { useExpertModeManager } from '../../state/user/hooks'
 import { LinkStyledButton, ThemedText } from '../../theme'
 import { computeFiatValuePriceImpact } from '../../utils/computeFiatValuePriceImpact'
 import { maxAmountSpend } from '../../utils/maxAmountSpend'
 import { computeRealizedPriceImpact, warningSeverity } from '../../utils/prices'
 import { supportedChainId } from '../../utils/supportedChainId'
-
 const ArrowContainer = styled.div`
   display: inline-block;
   display: inline-flex;
@@ -199,7 +194,8 @@ export default function Swap({ className }: { className?: string }) {
   // for expert mode
   const [isExpertMode] = useExpertModeManager()
   // swap state
-  const { independentField, typedValue, recipient } = useSwapState()
+  const [state, dispatch] = useReducer(swapReducer, initialSwapState)
+  const { typedValue, recipient, independentField } = state
   const {
     trade: { state: tradeState, trade },
     allowedSlippage,
@@ -207,7 +203,7 @@ export default function Swap({ className }: { className?: string }) {
     parsedAmount,
     currencies,
     inputError: swapInputError,
-  } = useDerivedSwapInfo()
+  } = useDerivedSwapInfo(state)
 
   const {
     wrapType,
@@ -248,7 +244,7 @@ export default function Swap({ className }: { className?: string }) {
     [fiatValueTradeInput, fiatValueTradeOutput, routeIsSyncing, trade]
   )
 
-  const { onSwitchTokens, onCurrencySelection, onUserInput, onChangeRecipient } = useSwapActionHandlers()
+  const { onSwitchTokens, onCurrencySelection, onUserInput, onChangeRecipient } = useSwapActionHandlers(dispatch)
   const isValid = !swapInputError
   const dependentField: Field = independentField === Field.INPUT ? Field.OUTPUT : Field.INPUT
 

src/state/reducer.ts

@@ -9,7 +9,6 @@ import logs from './logs/slice'
 import mint from './mint/reducer'
 import mintV3 from './mint/v3/reducer'
 import { routingApi } from './routing/slice'
-import swap from './swap/reducer'
 import transactions from './transactions/reducer'
 import user from './user/reducer'
 import wallets from './wallets/reducer'
@@ -20,7 +19,6 @@ export default {
   connection,
   transactions,
   wallets,
-  swap,
   mint,
   mintV3,
   burn,

src/state/swap/hooks.tsx

@@ -6,7 +6,8 @@ import { useBestTrade } from 'hooks/useBestTrade'
 import tryParseCurrencyAmount from 'lib/utils/tryParseCurrencyAmount'
 import { ParsedQs } from 'qs'
 import { ReactNode, useCallback, useEffect, useMemo } from 'react'
-import { useAppDispatch, useAppSelector } from 'state/hooks'
+import { AnyAction } from 'redux'
+import { useAppDispatch } from 'state/hooks'
 import { InterfaceTrade, TradeState } from 'state/routing/types'
 import { useUserSlippageToleranceWithDefault } from 'state/user/hooks'
 
@@ -16,21 +17,15 @@ import useENS from '../../hooks/useENS'
 import useParsedQueryString from '../../hooks/useParsedQueryString'
 import { isAddress } from '../../utils'
 import { useCurrencyBalances } from '../connection/hooks'
-import { AppState } from '../types'
 import { Field, replaceSwapState, selectCurrency, setRecipient, switchCurrencies, typeInput } from './actions'
 import { SwapState } from './reducer'
 
-export function useSwapState(): AppState['swap'] {
-  return useAppSelector((state) => state.swap)
-}
-
-export function useSwapActionHandlers(): {
+export function useSwapActionHandlers(dispatch: React.Dispatch<AnyAction>): {
   onCurrencySelection: (field: Field, currency: Currency) => void
   onSwitchTokens: () => void
   onUserInput: (field: Field, typedValue: string) => void
   onChangeRecipient: (recipient: string | null) => void
 } {
-  const dispatch = useAppDispatch()
   const onCurrencySelection = useCallback(
     (field: Field, currency: Currency) => {
       dispatch(
@@ -76,7 +71,7 @@ const BAD_RECIPIENT_ADDRESSES: { [address: string]: true } = {
 }
 
 // from the current swap inputs, compute the best trade and return it.
-export function useDerivedSwapInfo(): {
+export function useDerivedSwapInfo(state: SwapState): {
   currencies: { [field in Field]?: Currency | null }
   currencyBalances: { [field in Field]?: CurrencyAmount<Currency> }
   parsedAmount: CurrencyAmount<Currency> | undefined
@@ -95,7 +90,7 @@ export function useDerivedSwapInfo(): {
     [Field.INPUT]: { currencyId: inputCurrencyId },
     [Field.OUTPUT]: { currencyId: outputCurrencyId },
     recipient,
-  } = useSwapState()
+  } = state
 
   const inputCurrency = useCurrency(inputCurrencyId)
   const outputCurrency = useCurrency(outputCurrencyId)

src/state/swap/reducer.ts

@@ -17,7 +17,7 @@ export interface SwapState {
   readonly recipient: string | null
 }
 
-const initialState: SwapState = queryParametersToSwapState(parsedQueryString())
+export const initialState: SwapState = queryParametersToSwapState(parsedQueryString())
 
 export default createReducer<SwapState>(initialState, (builder) =>
   builder