fix: Clear input and output when wrapping and unwrapping (#6913)

* add wrap handler

* onWrap passed back tx hash

* async await

src/hooks/useWrapCallback.tsx

@@ -141,6 +141,7 @@ Please file a bug detailing how this happened - https://github.com/Uniswap/inter
         execute:
           sufficientBalance && inputAmount
             ? async () => {
+                try {
                   const txReceipt = await wethContract.withdraw(`0x${inputAmount.quotient.toString(16)}`)
                   addTransaction(txReceipt, {
                     type: TransactionType.WRAP,
@@ -153,6 +154,10 @@ Please file a bug detailing how this happened - https://github.com/Uniswap/inter
                     type: WrapType.UNWRAP,
                   })
                   return txReceipt.hash
+                } catch (error) {
+                  console.error('Could not withdraw', error)
+                  throw error
+                }
               }
             : undefined,
         inputError: sufficientBalance

src/pages/Swap/index.tsx

@@ -435,6 +435,33 @@ export function Swap({
       })
   }, [swapCallback, stablecoinPriceImpact])
 
+  const handleOnWrap = useCallback(async () => {
+    if (!onWrap) return
+    try {
+      const txHash = await onWrap()
+      setSwapState((currentState) => ({
+        ...currentState,
+        swapError: undefined,
+        txHash,
+      }))
+      onUserInput(Field.INPUT, '')
+    } catch (error) {
+      if (!didUserReject(error)) {
+        sendAnalyticsEvent(SwapEventName.SWAP_ERROR, {
+          wrapType,
+          input: currencies[Field.INPUT],
+          output: currencies[Field.OUTPUT],
+        })
+      }
+      console.error('Could not wrap/unwrap', error)
+      setSwapState((currentState) => ({
+        ...currentState,
+        swapError: error,
+        txHash: undefined,
+      }))
+    }
+  }, [currencies, onUserInput, onWrap, wrapType])
+
   // errors
   const [swapQuoteReceivedDate, setSwapQuoteReceivedDate] = useState<Date | undefined>()
 
@@ -684,7 +711,7 @@ export function Swap({
           ) : showWrap ? (
             <ButtonPrimary
               disabled={Boolean(wrapInputError)}
-              onClick={() => onWrap?.().catch((e) => console.error('Could not wrap/unwrap', e))}
+              onClick={handleOnWrap}
               fontWeight={600}
               data-testid="wrap-button"
             >