fix: update wrap fail state callback and input values (#3495)

* update wrap fail state callback and input values

* add error check for wrap status

* update error catching logic

* update error catching

src/lib/components/Swap/SwapButton.tsx

@@ -184,7 +184,7 @@ export default function SwapButton({ disabled }: SwapButtonProps) {
   }, [addTransaction, inputTradeCurrencyAmount, outputTradeCurrencyAmount, setDisplayTxHash, swapCallback, tradeType])
 
   const ButtonText = useCallback(() => {
-    if (wrapError !== WrapError.NO_ERROR) {
+    if ((wrapType === WrapType.WRAP || wrapType === WrapType.UNWRAP) && wrapError !== WrapError.NO_ERROR) {
       return <WrapErrorText wrapError={wrapError} />
     }
     switch (wrapType) {

src/lib/hooks/swap/useSwapInfo.tsx

@@ -13,6 +13,7 @@ import { isAddress } from '../../../utils'
 import useActiveWeb3React from '../useActiveWeb3React'
 import useSlippage, { Slippage } from '../useSlippage'
 import { useBestTrade } from './useBestTrade'
+import useWrapCallback, { WrapType } from './useWrapCallback'
 
 interface SwapInfo {
   currencies: { [field in Field]?: Currency }
@@ -81,12 +82,16 @@ function useComputeSwapInfo(): SwapInfo {
     [relevantTokenBalances]
   )
 
+  // Use same amount for input and output if user is wrapping.
+  const { type: wrapType } = useWrapCallback()
+  const isWrapping = wrapType === WrapType.WRAP || wrapType === WrapType.UNWRAP
+
   const tradeCurrencyAmounts = useMemo(
     () => ({
-      [Field.INPUT]: trade.trade?.inputAmount,
-      [Field.OUTPUT]: trade.trade?.outputAmount,
+      [Field.INPUT]: isWrapping ? parsedAmount : trade.trade?.inputAmount,
+      [Field.OUTPUT]: isWrapping ? parsedAmount : trade.trade?.outputAmount,
     }),
-    [trade.trade?.inputAmount, trade.trade?.outputAmount]
+    [isWrapping, parsedAmount, trade.trade?.inputAmount, trade.trade?.outputAmount]
   )
 
   const slippage = useSlippage(trade.trade)

src/lib/hooks/swap/useWrapCallback.tsx

@@ -44,12 +44,7 @@ export default function useWrapCallback(): UseWrapCallbackReturns {
   const { account, chainId } = useActiveWeb3React()
   const [{ loading, error }, setWrapState] = useAtom(wrapState)
   const wrappedNativeCurrencyContract = useWETHContract()
-  const {
-    amount,
-    independentField,
-    [Field.INPUT]: inputCurrency,
-    [Field.OUTPUT]: outputCurrency,
-  } = useAtomValue(swapAtom)
+  const { amount, [Field.INPUT]: inputCurrency, [Field.OUTPUT]: outputCurrency } = useAtomValue(swapAtom)
 
   const wrapType = useMemo(() => {
     if (!inputCurrency || !outputCurrency || !chainId) {
@@ -64,12 +59,10 @@ export default function useWrapCallback(): UseWrapCallbackReturns {
     return WrapType.NOT_APPLICABLE
   }, [chainId, inputCurrency, outputCurrency])
 
-  const isExactIn = independentField === Field.INPUT
-  const parsedAmount = useMemo(
-    () => tryParseCurrencyAmount(amount, (isExactIn ? inputCurrency : outputCurrency) ?? undefined),
-    [inputCurrency, isExactIn, outputCurrency, amount]
+  const parsedAmountIn = useMemo(
+    () => tryParseCurrencyAmount(amount, inputCurrency ?? undefined),
+    [inputCurrency, amount]
   )
-  const parsedAmountIn = isExactIn ? parsedAmount : undefined
 
   const relevantTokenBalances = useCurrencyBalances(
     account,
@@ -83,7 +76,7 @@ export default function useWrapCallback(): UseWrapCallbackReturns {
     [relevantTokenBalances]
   )
 
-  const hasInputAmount = Boolean(parsedAmount?.greaterThan('0'))
+  const hasInputAmount = Boolean(parsedAmountIn?.greaterThan('0'))
   const sufficientBalance = parsedAmountIn && !currencyBalances[Field.INPUT]?.lessThan(parsedAmountIn)
 
   useEffect(() => {
@@ -118,7 +111,11 @@ export default function useWrapCallback(): UseWrapCallbackReturns {
     setWrapState((state) => ({ ...state, loading: true }))
     const result = await (wrapType === WrapType.WRAP
       ? wrappedNativeCurrencyContract.deposit({ value: `0x${parsedAmountIn.quotient.toString(16)}` })
-      : wrappedNativeCurrencyContract.withdraw(`0x${parsedAmountIn.quotient.toString(16)}`))
+      : wrappedNativeCurrencyContract.withdraw(`0x${parsedAmountIn.quotient.toString(16)}`)
+    ).catch((e: unknown) => {
+      setWrapState((state) => ({ ...state, loading: false }))
+      throw e
+    })
     // resolve loading state after one confirmation
     result.wait(1).finally(() => setWrapState((state) => ({ ...state, loading: false })))
     return Promise.resolve(result)