fix: only change input currency to weth after eth wrap completes for uniswapx eth input trades (Uniswap#7604)

* only change input currency to weth after wrap completes

* add e2e test

* update test

Author: tinaszheng

cypress/e2e/swap/uniswapx.test.ts

@@ -190,7 +190,7 @@ describe('UniswapX Eth Input', () => {
     cy.contains('Swapped')
   })
 
-  it('switches swap input to WETH after wrap', () => {
+  it('keeps ETH as the input currency before wrap completes', () => {
     // Setup a swap
     cy.get('#swap-currency-input .token-amount-input').type('1')
     cy.wait('@quote')
@@ -202,16 +202,25 @@ describe('UniswapX Eth Input', () => {
 
     // Close review modal before wrap is confirmed on chain
     cy.get(getTestSelector('confirmation-close-icon')).click()
+    // Confirm ETH is still the input token before wrap succeeds
+    cy.contains('ETH')
+  })
+
+  it('switches swap input to WETH after wrap', () => {
+    // Setup a swap
+    cy.get('#swap-currency-input .token-amount-input').type('1')
+    cy.wait('@quote')
+
+    // Prompt ETH wrap and confirm
+    cy.get('#swap-button').click()
+    cy.contains('Confirm swap').click()
+    cy.wait('@eth_sendRawTransaction')
     cy.hardhat().then((hardhat) => hardhat.mine())
 
     // Confirm wrap is successful and WETH is now input token
     cy.contains('Wrapped')
     cy.contains('WETH')
 
-    // Reopen review modal and continue swap
-    cy.get('#swap-button').click()
-    cy.contains('Confirm swap').click()
-
     // Approve WETH spend
     cy.wait('@eth_sendRawTransaction')
     cy.hardhat().then((hardhat) => hardhat.mine())
@@ -226,6 +235,11 @@ describe('UniswapX Eth Input', () => {
 
     // Verify swap success
     cy.contains('Swapped')
+
+    // Close modal
+    cy.get(getTestSelector('confirmation-close-icon')).click()
+    // The input currency should now be WETH
+    cy.contains('WETH')
   })
 })
 

src/components/swap/ConfirmSwapModal.tsx

@@ -133,9 +133,6 @@ function useConfirmModalState({
           onWrap?.()
             .then((wrapTxHash) => {
               setWrapTxHash(wrapTxHash)
-              // After the wrap has succeeded, reset the input currency to be WETH
-              // because the trade will be on WETH -> token
-              onCurrencySelection(Field.INPUT, trade.inputAmount.currency)
               sendAnalyticsEvent(InterfaceEventName.WRAP_TOKEN_TXN_SUBMITTED, {
                 chain_id: chainId,
                 token_symbol: maximumAmountIn?.currency.symbol,
@@ -183,7 +180,6 @@ function useConfirmModalState({
       onWrap,
       trace,
       trade,
-      onCurrencySelection,
     ]
   )
 
@@ -200,10 +196,20 @@ function useConfirmModalState({
   useEffect(() => {
     // If the wrapping step finished, trigger the next step (allowance or swap).
     if (wrapConfirmed && !prevWrapConfirmed) {
+      // After the wrap has succeeded, reset the input currency to be WETH
+      // because the trade will be on WETH -> token
+      onCurrencySelection(Field.INPUT, trade.inputAmount.currency)
       // moves on to either approve WETH or to swap submission
       performStep(pendingModalSteps[1])
     }
-  }, [pendingModalSteps, performStep, prevWrapConfirmed, wrapConfirmed])
+  }, [
+    pendingModalSteps,
+    performStep,
+    prevWrapConfirmed,
+    wrapConfirmed,
+    onCurrencySelection,
+    trade.inputAmount.currency,
+  ])
 
   useEffect(() => {
     if (