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,18 +141,23 @@ Please file a bug detailing how this happened - https://github.com/Uniswap/inter
         execute:
           sufficientBalance && inputAmount
             ? async () => {
-                const txReceipt = await wethContract.withdraw(`0x${inputAmount.quotient.toString(16)}`)
-                addTransaction(txReceipt, {
-                  type: TransactionType.WRAP,
-                  unwrapped: true,
-                  currencyAmountRaw: inputAmount?.quotient.toString(),
-                  chainId,
-                })
-                sendAnalyticsEvent(InterfaceEventName.WRAP_TOKEN_TXN_SUBMITTED, {
-                  ...eventProperties,
-                  type: WrapType.UNWRAP,
-                })
-                return txReceipt.hash
+                try {
+                  const txReceipt = await wethContract.withdraw(`0x${inputAmount.quotient.toString(16)}`)
+                  addTransaction(txReceipt, {
+                    type: TransactionType.WRAP,
+                    unwrapped: true,
+                    currencyAmountRaw: inputAmount?.quotient.toString(),
+                    chainId,
+                  })
+                  sendAnalyticsEvent(InterfaceEventName.WRAP_TOKEN_TXN_SUBMITTED, {
+                    ...eventProperties,
+                    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"
             >