feat(widgets): support wrapping native assets (#3301)

* feat(widgets): support wrapping native assets

* integrate wrap with swapInfo, start a useWrapCallback hook

* add loading state

* add pending state to (un)wrap transactions

* final cleanup

* janky merge conflict fix--disregard! this will change

* fixed

* 💢

* pr feedback

* z's pr feedback

* pr feedback

* zzmp pr feedback

* zzmp pr feedback

src/lib/components/ActionButton.tsx

@@ -61,14 +61,13 @@ export interface Action {
   children: ReactNode
 }
 
-export interface ActionButtonProps {
+export interface BaseProps {
   color?: Color
-  disabled?: boolean
   action?: Action
-  onClick: () => void
-  children: ReactNode
 }
 
+export type ActionButtonProps = BaseProps & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, keyof BaseProps>
+
 export default function ActionButton({ color = 'accent', disabled, action, onClick, children }: ActionButtonProps) {
   const textColor = useMemo(() => (color === 'accent' && !disabled ? 'onAccent' : 'currentColor'), [color, disabled])
   return (

src/lib/components/Swap/Input.tsx

@@ -48,9 +48,9 @@ export interface InputProps {
 export default function Input({ disabled, focused }: InputProps) {
   const { i18n } = useLingui()
   const {
-    trade: { state: tradeState },
     currencyBalances: { [Field.INPUT]: balance },
-    currencyAmounts: { [Field.INPUT]: swapInputCurrencyAmount },
+    trade: { state: tradeState },
+    tradeCurrencyAmounts: { [Field.INPUT]: swapInputCurrencyAmount },
   } = useSwapInfo()
   const inputUSDC = useUSDCValue(swapInputCurrencyAmount)
 

src/lib/components/Swap/Output.tsx

@@ -41,9 +41,9 @@ export default function Output({ disabled, focused, children }: PropsWithChildre
   const { i18n } = useLingui()
 
   const {
-    trade: { state: tradeState },
     currencyBalances: { [Field.OUTPUT]: balance },
-    currencyAmounts: { [Field.INPUT]: inputCurrencyAmount, [Field.OUTPUT]: outputCurrencyAmount },
+    trade: { state: tradeState },
+    tradeCurrencyAmounts: { [Field.INPUT]: inputCurrencyAmount, [Field.OUTPUT]: outputCurrencyAmount },
   } = useSwapInfo()
 
   const [swapOutputAmount, updateSwapOutputAmount] = useSwapAmount(Field.OUTPUT)

src/lib/components/Swap/Status/StatusDialog.tsx

@@ -1,9 +1,10 @@
 import { Trans } from '@lingui/macro'
 import ErrorDialog, { StatusHeader } from 'lib/components/Error/ErrorDialog'
 import EtherscanLink from 'lib/components/EtherscanLink'
+import SwapSummary from 'lib/components/Swap/Summary'
 import useInterval from 'lib/hooks/useInterval'
 import { CheckCircle, Clock, Spinner } from 'lib/icons'
-import { SwapTransactionInfo, Transaction } from 'lib/state/transactions'
+import { SwapTransactionInfo, Transaction, TransactionType, WrapTransactionInfo } from 'lib/state/transactions'
 import styled, { ThemedText } from 'lib/theme'
 import ms from 'ms.macro'
 import { useCallback, useMemo, useState } from 'react'
@@ -12,7 +13,6 @@ import { ExplorerDataType } from 'utils/getExplorerLink'
 import ActionButton from '../../ActionButton'
 import Column from '../../Column'
 import Row from '../../Row'
-import Summary from '../Summary'
 
 const errorMessage = (
   <Trans>
@@ -26,7 +26,9 @@ const TransactionRow = styled(Row)`
   flex-direction: row-reverse;
 `
 
-function ElapsedTime({ tx }: { tx: Transaction<SwapTransactionInfo> }) {
+type PendingTransaction = Transaction<SwapTransactionInfo | WrapTransactionInfo>
+
+function ElapsedTime({ tx }: { tx: PendingTransaction }) {
   const [elapsedMs, setElapsedMs] = useState(0)
 
   useInterval(() => setElapsedMs(Date.now() - tx.addedTime), tx.receipt ? null : ms`1s`)
@@ -54,7 +56,7 @@ function ElapsedTime({ tx }: { tx: Transaction<SwapTransactionInfo> }) {
 }
 
 interface TransactionStatusProps {
-  tx: Transaction<SwapTransactionInfo>
+  tx: PendingTransaction
   onClose: () => void
 }
 
@@ -63,14 +65,24 @@ function TransactionStatus({ tx, onClose }: TransactionStatusProps) {
     return tx.receipt?.status ? CheckCircle : Spinner
   }, [tx.receipt?.status])
   const heading = useMemo(() => {
-    return tx.receipt?.status ? <Trans>Transaction submitted</Trans> : <Trans>Transaction pending</Trans>
+    if (tx.info.type === TransactionType.SWAP) {
-  }, [tx.receipt?.status])
+      return tx.receipt?.status ? <Trans>Swap confirmed</Trans> : <Trans>Swap pending</Trans>
+    } else if (tx.info.type === TransactionType.WRAP) {
+      if (tx.info.unwrapped) {
+        return tx.receipt?.status ? <Trans>Unwrap confirmed</Trans> : <Trans>Unwrap pending</Trans>
+      }
+      return tx.receipt?.status ? <Trans>Wrap confirmed</Trans> : <Trans>Wrap pending</Trans>
+    }
+    return tx.receipt?.status ? <Trans>Transaction confirmed</Trans> : <Trans>Transaction pending</Trans>
+  }, [tx.info, tx.receipt?.status])
 
   return (
     <Column flex padded gap={0.75} align="stretch" style={{ height: '100%' }}>
       <StatusHeader icon={Icon} iconColor={tx.receipt?.status ? 'success' : undefined}>
         <ThemedText.Subhead1>{heading}</ThemedText.Subhead1>
-        <Summary input={tx.info.inputCurrencyAmount} output={tx.info.outputCurrencyAmount} />
+        {tx.info.type === TransactionType.SWAP ? (
+          <SwapSummary input={tx.info.inputCurrencyAmount} output={tx.info.outputCurrencyAmount} />
+        ) : null}
       </StatusHeader>
       <TransactionRow flex>
         <ThemedText.ButtonSmall>

src/lib/components/Swap/SwapButton.tsx

@@ -2,6 +2,7 @@ import { Trans } from '@lingui/macro'
 import { Token } from '@uniswap/sdk-core'
 import { useERC20PermitFromTrade } from 'hooks/useERC20Permit'
 import { useUpdateAtom } from 'jotai/utils'
+import { WrapErrorText } from 'lib/components/Swap/WrapErrorText'
 import { useSwapCurrencyAmount, useSwapInfo, useSwapTradeType } from 'lib/hooks/swap'
 import useSwapApproval, {
   ApprovalState,
@@ -9,6 +10,7 @@ import useSwapApproval, {
   useSwapRouterAddress,
 } from 'lib/hooks/swap/useSwapApproval'
 import { useSwapCallback } from 'lib/hooks/swap/useSwapCallback'
+import useWrapCallback, { WrapError, WrapType } from 'lib/hooks/swap/useWrapCallback'
 import { useAddTransaction } from 'lib/hooks/transactions'
 import { usePendingApproval } from 'lib/hooks/transactions'
 import useActiveWeb3React from 'lib/hooks/useActiveWeb3React'
@@ -40,12 +42,12 @@ export default function SwapButton({ disabled }: SwapButtonProps) {
   const { tokenColorExtraction } = useTheme()
 
   const {
-    trade,
     allowedSlippage,
     currencies: { [Field.INPUT]: inputCurrency },
     currencyBalances: { [Field.INPUT]: inputCurrencyBalance },
-    currencyAmounts: { [Field.INPUT]: inputCurrencyAmount, [Field.OUTPUT]: outputCurrencyAmount },
     feeOptions,
+    trade,
+    tradeCurrencyAmounts: { [Field.INPUT]: inputTradeCurrencyAmount, [Field.OUTPUT]: outputTradeCurrencyAmount },
   } = useSwapInfo()
 
   const tradeType = useSwapTradeType()
@@ -81,8 +83,13 @@ export default function SwapButton({ disabled }: SwapButtonProps) {
     })
   }, [addTransaction, getApproval])
 
+  const { type: wrapType, callback: wrapCallback, error: wrapError, loading: wrapLoading } = useWrapCallback()
+
   const actionProps = useMemo((): Partial<ActionButtonProps> | undefined => {
+    if (disabled || wrapLoading) return { disabled: true }
     if (!disabled && chainId) {
+      const hasSufficientInputForTrade =
+        inputTradeCurrencyAmount && inputCurrencyBalance && !inputCurrencyBalance.lessThan(inputTradeCurrencyAmount)
       if (approval === ApprovalState.NOT_APPROVED) {
         const currency = inputCurrency || approvalCurrencyAmount?.currency
         invariant(currency)
@@ -107,7 +114,7 @@ export default function SwapButton({ disabled }: SwapButtonProps) {
             children: <Trans>Approve</Trans>,
           },
         }
-      } else if (inputCurrencyAmount && inputCurrencyBalance && !inputCurrencyBalance.lessThan(inputCurrencyAmount)) {
+      } else if (hasSufficientInputForTrade || (wrapType !== WrapType.NOT_APPLICABLE && !wrapError)) {
         return {}
       }
     }
@@ -120,8 +127,11 @@ export default function SwapButton({ disabled }: SwapButtonProps) {
     chainId,
     disabled,
     inputCurrency,
-    inputCurrencyAmount,
     inputCurrencyBalance,
+    inputTradeCurrencyAmount,
+    wrapError,
+    wrapLoading,
+    wrapType,
   ])
 
   const deadline = useTransactionDeadline()
@@ -144,13 +154,13 @@ export default function SwapButton({ disabled }: SwapButtonProps) {
     swapCallback?.()
       .then((response) => {
         setDisplayTxHash(response.hash)
-        invariant(inputCurrencyAmount && outputCurrencyAmount)
+        invariant(inputTradeCurrencyAmount && outputTradeCurrencyAmount)
         addTransaction({
           response,
           type: TransactionType.SWAP,
           tradeType,
-          inputCurrencyAmount,
+          inputCurrencyAmount: inputTradeCurrencyAmount,
-          outputCurrencyAmount,
+          outputCurrencyAmount: outputTradeCurrencyAmount,
         })
       })
       .catch((error) => {
@@ -160,19 +170,54 @@ export default function SwapButton({ disabled }: SwapButtonProps) {
       .finally(() => {
         setActiveTrade(undefined)
       })
-  }, [addTransaction, inputCurrencyAmount, outputCurrencyAmount, setDisplayTxHash, swapCallback, tradeType])
+  }, [addTransaction, inputTradeCurrencyAmount, outputTradeCurrencyAmount, setDisplayTxHash, swapCallback, tradeType])
+
+  const ButtonText = useCallback(() => {
+    if (wrapError !== WrapError.NO_ERROR) {
+      return <WrapErrorText wrapError={wrapError} />
+    }
+    switch (wrapType) {
+      case WrapType.UNWRAP:
+        return <Trans>Unwrap</Trans>
+      case WrapType.WRAP:
+        return <Trans>Wrap</Trans>
+      case WrapType.NOT_APPLICABLE:
+      default:
+        return <Trans>Review swap</Trans>
+    }
+  }, [wrapError, wrapType])
+
+  const handleDialogClose = useCallback(() => {
+    setActiveTrade(undefined)
+  }, [])
+
+  const handleActionButtonClick = useCallback(async () => {
+    if (wrapType === WrapType.NOT_APPLICABLE) {
+      setActiveTrade(trade.trade)
+    } else {
+      const transaction = await wrapCallback()
+      addTransaction({
+        response: transaction,
+        type: TransactionType.WRAP,
+        unwrapped: wrapType === WrapType.UNWRAP,
+        currencyAmountRaw: transaction.value?.toString() ?? '0',
+        chainId,
+      })
+      setDisplayTxHash(transaction.hash)
+    }
+  }, [addTransaction, chainId, setDisplayTxHash, trade.trade, wrapCallback, wrapType])
 
   return (
     <>
       <ActionButton
         color={tokenColorExtraction ? 'interactive' : 'accent'}
-        onClick={() => setActiveTrade(trade.trade)}
+        onClick={handleActionButtonClick}
         {...actionProps}
       >
-        <Trans>Review swap</Trans>
+        <ButtonText />
       </ActionButton>
       {activeTrade && (
-        <Dialog color="dialog" onClose={() => setActiveTrade(undefined)}>
+        <Dialog color="dialog" onClose={handleDialogClose}>
           <SummaryDialog trade={activeTrade} allowedSlippage={allowedSlippage} onConfirm={onConfirm} />
         </Dialog>
       )}

src/lib/components/Swap/Toolbar/Caption.tsx

@@ -2,9 +2,10 @@ import { Trans } from '@lingui/macro'
 import { Currency, TradeType } from '@uniswap/sdk-core'
 import useUSDCPrice from 'hooks/useUSDCPrice'
 import Tooltip from 'lib/components/Tooltip'
+import { WrapType } from 'lib/hooks/swap/useWrapCallback'
 import { AlertTriangle, Icon, Info, Spinner } from 'lib/icons'
 import { ThemedText } from 'lib/theme'
-import { ReactNode, useMemo, useState } from 'react'
+import { ReactNode, useCallback, useMemo, useState } from 'react'
 import { InterfaceTrade } from 'state/routing/types'
 
 import { TextButton } from '../../Button'
@@ -28,22 +29,38 @@ function Caption({ icon: Icon = AlertTriangle, caption }: CaptionProps) {
 export function ConnectWallet() {
   return <Caption caption={<Trans>Connect wallet to swap</Trans>} />
 }
+
 export function UnsupportedNetwork() {
   return <Caption caption={<Trans>Unsupported network - switch to another to trade.</Trans>} />
 }
+
 export function InsufficientBalance({ currency }: { currency: Currency }) {
   return <Caption caption={<Trans>Insufficient {currency?.symbol} balance</Trans>} />
 }
+
 export function InsufficientLiquidity() {
   return <Caption caption={<Trans>Insufficient liquidity in the pool for your trade</Trans>} />
 }
+
 export function Empty() {
   return <Caption icon={Info} caption={<Trans>Enter an amount</Trans>} />
 }
+
 export function LoadingTrade() {
   return <Caption icon={Spinner} caption={<Trans>Fetching best price…</Trans>} />
 }
 
+export function WrapCurrency({ loading, wrapType }: { loading: boolean; wrapType: WrapType.UNWRAP | WrapType.WRAP }) {
+  const WrapText = useCallback(() => {
+    if (wrapType === WrapType.WRAP) {
+      return loading ? <Trans>Wrapping native currency.</Trans> : <Trans>Wrap native currency.</Trans>
+    }
+    return loading ? <Trans>Unwrapping native currency.</Trans> : <Trans>Unwrap native currency.</Trans>
+  }, [loading, wrapType])
+
+  return <Caption icon={Info} caption={<WrapText />} />
+}
+
 export function Trade({ trade }: { trade: InterfaceTrade<Currency, Currency, TradeType> }) {
   const [flip, setFlip] = useState(true)
   const { inputAmount, outputAmount, executionPrice } = trade

src/lib/components/Swap/Toolbar/index.tsx

@@ -1,5 +1,6 @@
 import { ALL_SUPPORTED_CHAIN_IDS } from 'constants/chains'
 import { useIsAmountPopulated, useSwapInfo } from 'lib/hooks/swap'
+import useWrapCallback, { WrapType } from 'lib/hooks/swap/useWrapCallback'
 import useActiveWeb3React from 'lib/hooks/useActiveWeb3React'
 import { largeIconCss } from 'lib/icons'
 import { Field } from 'lib/state/swap'
@@ -25,7 +26,7 @@ export default function Toolbar({ disabled }: { disabled?: boolean }) {
   } = useSwapInfo()
   const isRouteLoading = state === TradeState.SYNCING || state === TradeState.LOADING
   const isAmountPopulated = useIsAmountPopulated()
-
+  const { type: wrapType, loading: wrapLoading } = useWrapCallback()
   const caption = useMemo(() => {
     if (disabled) {
       return <Caption.ConnectWallet />
@@ -36,6 +37,9 @@ export default function Toolbar({ disabled }: { disabled?: boolean }) {
     }
 
     if (inputCurrency && outputCurrency && isAmountPopulated) {
+      if (wrapType !== WrapType.NOT_APPLICABLE) {
+        return <Caption.WrapCurrency wrapType={wrapType} loading={wrapLoading} />
+      }
       if (isRouteLoading) {
         return <Caption.LoadingTrade />
       }
@@ -51,7 +55,18 @@ export default function Toolbar({ disabled }: { disabled?: boolean }) {
     }
 
     return <Caption.Empty />
-  }, [balance, chainId, disabled, inputCurrency, isAmountPopulated, isRouteLoading, outputCurrency, trade])
+  }, [
+    balance,
+    chainId,
+    disabled,
+    inputCurrency,
+    isAmountPopulated,
+    isRouteLoading,
+    outputCurrency,
+    trade,
+    wrapLoading,
+    wrapType,
+  ])
 
   return (
     <>

src/lib/components/Swap/WrapErrorText.tsx

@@ -0,0 +1,22 @@
+import { Trans } from '@lingui/macro'
+import { WrapError } from 'lib/hooks/swap/useWrapCallback'
+import useNativeCurrency from 'lib/hooks/useNativeCurrency'
+
+export function WrapErrorText({ wrapError }: { wrapError: WrapError }) {
+  const native = useNativeCurrency()
+  const wrapped = native?.wrapped
+
+  switch (wrapError) {
+    case WrapError.ENTER_NATIVE_AMOUNT:
+      return <Trans>Enter {native?.symbol} amount</Trans>
+    case WrapError.ENTER_WRAPPED_AMOUNT:
+      return <Trans>Enter {wrapped?.symbol} amount</Trans>
+    case WrapError.INSUFFICIENT_NATIVE_BALANCE:
+      return <Trans>Insufficient {native?.symbol} balance</Trans>
+    case WrapError.INSUFFICIENT_WRAPPED_BALANCE:
+      return <Trans>Insufficient {wrapped?.symbol} balance</Trans>
+    case WrapError.NO_ERROR:
+    default:
+      return null
+  }
+}

src/lib/components/Swap/index.tsx

@@ -10,7 +10,7 @@ import useActiveWeb3React from 'lib/hooks/useActiveWeb3React'
 import useHasFocus from 'lib/hooks/useHasFocus'
 import useTokenList, { useSyncTokenList } from 'lib/hooks/useTokenList'
 import { displayTxHashAtom } from 'lib/state/swap'
-import { SwapTransactionInfo, Transaction, TransactionType } from 'lib/state/transactions'
+import { SwapTransactionInfo, Transaction, TransactionType, WrapTransactionInfo } from 'lib/state/transactions'
 import { useMemo, useState } from 'react'
 
 import Dialog from '../Dialog'
@@ -28,12 +28,18 @@ import Toolbar from './Toolbar'
 
 export type DefaultAddress = string | { [chainId: number]: string | 'NATIVE' } | 'NATIVE'
 
-function getSwapTx(txs: { [hash: string]: Transaction }, hash?: string): Transaction<SwapTransactionInfo> | undefined {
+function getTransactionFromMap(
+  txs: { [hash: string]: Transaction },
+  hash?: string
+): Transaction<SwapTransactionInfo | WrapTransactionInfo> | undefined {
   if (hash) {
     const tx = txs[hash]
     if (tx?.info?.type === TransactionType.SWAP) {
       return tx as Transaction<SwapTransactionInfo>
     }
+    if (tx?.info?.type === TransactionType.WRAP) {
+      return tx as Transaction<WrapTransactionInfo>
+    }
   }
   return
 }
@@ -59,7 +65,7 @@ export default function Swap(props: SwapProps) {
 
   const [displayTxHash, setDisplayTxHash] = useAtom(displayTxHashAtom)
   const pendingTxs = usePendingTransactions()
-  const displayTx = getSwapTx(pendingTxs, displayTxHash)
+  const displayTx = getTransactionFromMap(pendingTxs, displayTxHash)
 
   const tokenList = useTokenList()
   const isSwapSupported = useMemo(

src/lib/hooks/routing/useClientSideSmartOrderRouterTrade.ts

@@ -7,6 +7,7 @@ import { useEffect, useMemo, useState } from 'react'
 import { GetQuoteResult, InterfaceTrade, TradeState } from 'state/routing/types'
 import { computeRoutes, transformRoutesToTrade } from 'state/routing/utils'
 
+import useWrapCallback, { WrapType } from '../swap/useWrapCallback'
 import useActiveWeb3React from '../useActiveWeb3React'
 import { getClientSideQuote } from './clientSideSmartOrderRouter'
 import { useRoutingAPIArguments } from './useRoutingAPIArguments'
@@ -74,9 +75,13 @@ export default function useClientSideSmartOrderRouterTrade<TTradeType extends Tr
     error?: unknown
   }>({ error: undefined })
   const config = useMemo(() => getConfig(chainId), [chainId])
+  const { type: wrapType } = useWrapCallback()
 
   // When arguments update, make a new call to SOR for updated quote
   useEffect(() => {
+    if (wrapType !== WrapType.NOT_APPLICABLE) {
+      return
+    }
     setLoading(true)
     if (isDebouncing) return
 
@@ -101,7 +106,7 @@ export default function useClientSideSmartOrderRouterTrade<TTradeType extends Tr
         }
       }
     }
-  }, [queryArgs, params, config, isDebouncing])
+  }, [queryArgs, params, config, isDebouncing, wrapType])
 
   const route = useMemo(
     () => computeRoutes(currencyIn, currencyOut, tradeType, quoteResult),

src/lib/hooks/swap/useSwapInfo.tsx

@@ -17,7 +17,7 @@ import { useBestTrade } from './useBestTrade'
 interface SwapInfo {
   currencies: { [field in Field]?: Currency }
   currencyBalances: { [field in Field]?: CurrencyAmount<Currency> }
-  currencyAmounts: { [field in Field]?: CurrencyAmount<Currency> }
+  tradeCurrencyAmounts: { [field in Field]?: CurrencyAmount<Currency> }
   trade: {
     trade?: InterfaceTrade<Currency, Currency, TradeType>
     state: TradeState
@@ -52,7 +52,7 @@ function useComputeSwapInfo(): SwapInfo {
     useMemo(() => [inputCurrency ?? undefined, outputCurrency ?? undefined], [inputCurrency, outputCurrency])
   )
 
-  const isExactIn: boolean = independentField === Field.INPUT
+  const isExactIn = independentField === Field.INPUT
   const parsedAmount = useMemo(
     () => tryParseCurrencyAmount(amount, (isExactIn ? inputCurrency : outputCurrency) ?? undefined),
     [inputCurrency, isExactIn, outputCurrency, amount]
@@ -81,7 +81,7 @@ function useComputeSwapInfo(): SwapInfo {
     [relevantTokenBalances]
   )
 
-  const currencyAmounts = useMemo(
+  const tradeCurrencyAmounts = useMemo(
     () => ({
       [Field.INPUT]: trade.trade?.inputAmount,
       [Field.OUTPUT]: trade.trade?.outputAmount,
@@ -129,21 +129,21 @@ function useComputeSwapInfo(): SwapInfo {
     () => ({
       currencies,
       currencyBalances,
-      currencyAmounts,
       inputError,
       trade,
+      tradeCurrencyAmounts,
       allowedSlippage,
       feeOptions,
     }),
-    [currencies, currencyBalances, currencyAmounts, inputError, trade, allowedSlippage, feeOptions]
+    [currencies, currencyBalances, inputError, trade, tradeCurrencyAmounts, allowedSlippage, feeOptions]
   )
 }
 
 const swapInfoAtom = atom<SwapInfo>({
   currencies: {},
   currencyBalances: {},
-  currencyAmounts: {},
   trade: { state: TradeState.INVALID },
+  tradeCurrencyAmounts: {},
   allowedSlippage: new Percent(0),
   feeOptions: undefined,
 })

src/lib/hooks/swap/useWrapCallback.tsx

@@ -0,0 +1,137 @@
+import { ContractTransaction } from '@ethersproject/contracts'
+import { useWETHContract } from 'hooks/useContract'
+import { atom, useAtom } from 'jotai'
+import { useAtomValue } from 'jotai/utils'
+import { Field, swapAtom } from 'lib/state/swap'
+import tryParseCurrencyAmount from 'lib/utils/tryParseCurrencyAmount'
+import { useCallback, useEffect, useMemo } from 'react'
+
+import { WRAPPED_NATIVE_CURRENCY } from '../../../constants/tokens'
+import useActiveWeb3React from '../useActiveWeb3React'
+import { useCurrencyBalances } from '../useCurrencyBalance'
+
+export enum WrapType {
+  NOT_APPLICABLE,
+  WRAP,
+  UNWRAP,
+}
+interface UseWrapCallbackReturns {
+  callback: () => Promise<ContractTransaction>
+  error: WrapError
+  loading: boolean
+  type: WrapType
+}
+
+export enum WrapError {
+  NO_ERROR = 0, // must be equal to 0 so all other errors are truthy
+  ENTER_NATIVE_AMOUNT,
+  ENTER_WRAPPED_AMOUNT,
+  INSUFFICIENT_NATIVE_BALANCE,
+  INSUFFICIENT_WRAPPED_BALANCE,
+}
+
+interface WrapState {
+  loading: boolean
+  error: WrapError
+}
+
+const wrapState = atom<WrapState>({
+  loading: false,
+  error: WrapError.NO_ERROR,
+})
+
+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 wrapType = useMemo(() => {
+    if (!inputCurrency || !outputCurrency || !chainId) {
+      return WrapType.NOT_APPLICABLE
+    }
+    const wrappedNativeCurrency = WRAPPED_NATIVE_CURRENCY[chainId]
+    if (inputCurrency.isNative && wrappedNativeCurrency.equals(outputCurrency)) {
+      return WrapType.WRAP
+    }
+    if (wrappedNativeCurrency.equals(inputCurrency) && outputCurrency.isNative) {
+      return WrapType.UNWRAP
+    }
+    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 = isExactIn ? parsedAmount : undefined
+
+  const relevantTokenBalances = useCurrencyBalances(
+    account,
+    useMemo(() => [inputCurrency ?? undefined, outputCurrency ?? undefined], [inputCurrency, outputCurrency])
+  )
+  const currencyBalances = useMemo(
+    () => ({
+      [Field.INPUT]: relevantTokenBalances[0],
+      [Field.OUTPUT]: relevantTokenBalances[1],
+    }),
+    [relevantTokenBalances]
+  )
+
+  const hasInputAmount = Boolean(parsedAmount?.greaterThan('0'))
+  const sufficientBalance = parsedAmountIn && !currencyBalances[Field.INPUT]?.lessThan(parsedAmountIn)
+
+  useEffect(() => {
+    if (sufficientBalance) {
+      setWrapState((state) => ({ ...state, error: WrapError.NO_ERROR }))
+    } else if (wrapType === WrapType.WRAP) {
+      setWrapState((state) => ({
+        ...state,
+        error: hasInputAmount ? WrapError.INSUFFICIENT_NATIVE_BALANCE : WrapError.ENTER_NATIVE_AMOUNT,
+      }))
+    } else if (wrapType === WrapType.UNWRAP) {
+      setWrapState((state) => ({
+        ...state,
+        error: hasInputAmount ? WrapError.INSUFFICIENT_WRAPPED_BALANCE : WrapError.ENTER_WRAPPED_AMOUNT,
+      }))
+    }
+  }, [hasInputAmount, setWrapState, sufficientBalance, wrapType])
+
+  const callback = useCallback(async () => {
+    if (!parsedAmountIn) {
+      return Promise.reject('Must provide an input amount to wrap.')
+    }
+    if (wrapType === WrapType.NOT_APPLICABLE) {
+      return Promise.reject('Wrapping not applicable to this asset.')
+    }
+    if (!sufficientBalance) {
+      return Promise.reject('Insufficient balance to wrap desired amount.')
+    }
+    if (!wrappedNativeCurrencyContract) {
+      return Promise.reject('Wrap contract not found.')
+    }
+    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)}`))
+    // resolve loading state after one confirmation
+    result.wait(1).finally(() => setWrapState((state) => ({ ...state, loading: false })))
+    return Promise.resolve(result)
+  }, [wrappedNativeCurrencyContract, sufficientBalance, parsedAmountIn, wrapType, setWrapState])
+
+  return useMemo(
+    () => ({
+      callback,
+      error,
+      loading,
+      type: wrapType,
+    }),
+    [callback, error, loading, wrapType]
+  )
+}

src/lib/state/transactions.ts

@@ -5,6 +5,7 @@ import { atomWithImmer } from 'jotai/immer'
 export enum TransactionType {
   APPROVAL,
   SWAP,
+  WRAP,
 }
 
 interface BaseTransactionInfo {
@@ -37,7 +38,14 @@ export interface OutputSwapTransactionInfo extends SwapTransactionInfo {
   maximumInputCurrencyAmount: string
 }
 
-export type TransactionInfo = ApprovalTransactionInfo | SwapTransactionInfo
+export interface WrapTransactionInfo extends BaseTransactionInfo {
+  type: TransactionType.WRAP
+  unwrapped: boolean
+  currencyAmountRaw: string
+  chainId?: number
+}
+
+export type TransactionInfo = ApprovalTransactionInfo | SwapTransactionInfo | WrapTransactionInfo
 
 export interface Transaction<T extends TransactionInfo = TransactionInfo> {
   addedTime: number