chore: refactor swap button for maintainability (#3579)

* chore: mv SwapButton to dir

* chore: mv approval data to its own hook

* chore: mv approval actions to approvals hook

* chore: simplify SwapButton logic

* fix: pass through approval amount

* fix: mv error handling to consumer

src/lib/components/Swap/SwapButton.tsx → src/lib/components/Swap/SwapButton/index.tsx

 import { Trans } from '@lingui/macro'
-import { Token } from '@uniswap/sdk-core'
 import { useAtomValue, useUpdateAtom } from 'jotai/utils'
-import { useSwapCurrencyAmount, useSwapInfo, useSwapTradeType } from 'lib/hooks/swap'
-import {
-  ApproveOrPermitState,
-  useApproveOrPermit,
-  useSwapApprovalOptimizedTrade,
-  useSwapRouterAddress,
-} from 'lib/hooks/swap/useSwapApproval'
+import { useSwapInfo } from 'lib/hooks/swap'
+import { useSwapApprovalOptimizedTrade } from 'lib/hooks/swap/useSwapApproval'
 import { useSwapCallback } from 'lib/hooks/swap/useSwapCallback'
 import useWrapCallback, { WrapType } from 'lib/hooks/swap/useWrapCallback'
-import { useAddTransaction, usePendingApproval } from 'lib/hooks/transactions'
+import { useAddTransaction } from 'lib/hooks/transactions'
 import useActiveWeb3React from 'lib/hooks/useActiveWeb3React'
 import { useSetOldestValidBlock } from 'lib/hooks/useIsValidBlock'
 import useTransactionDeadline from 'lib/hooks/useTransactionDeadline'
-import { Spinner } from 'lib/icons'
 import { displayTxHashAtom, feeOptionsAtom, Field } from 'lib/state/swap'
 import { TransactionType } from 'lib/state/transactions'
 import { useTheme } from 'lib/theme'
 import { memo, useCallback, useEffect, useMemo, useState } from 'react'
 import invariant from 'tiny-invariant'
-import { ExplorerDataType } from 'utils/getExplorerLink'
 
-import ActionButton, { ActionButtonProps } from '../ActionButton'
-import Dialog from '../Dialog'
-import EtherscanLink from '../EtherscanLink'
-import { SummaryDialog } from './Summary'
+import ActionButton, { ActionButtonProps } from '../../ActionButton'
+import Dialog from '../../Dialog'
+import { SummaryDialog } from '../Summary'
+import useApprovalData, { useIsPendingApproval } from './useApprovalData'
 
 interface SwapButtonProps {
   disabled?: boolean
 }
 
-function useIsPendingApproval(token?: Token, spender?: string): boolean {
-  return Boolean(usePendingApproval(token, spender))
-}
-
 export default memo(function SwapButton({ disabled }: SwapButtonProps) {
   const { account, chainId } = useActiveWeb3React()
-
-  const { tokenColorExtraction } = useTheme()
-
   const {
     [Field.INPUT]: {
       currency: inputCurrency,
@@ -47,118 +32,21 @@ export default memo(function SwapButton({ disabled }: SwapButtonProps) {
       balance: inputCurrencyBalance,
       usdc: inputUSDC,
     },
-    [Field.OUTPUT]: { amount: outputCurrencyAmount, usdc: outputUSDC },
+    [Field.OUTPUT]: { usdc: outputUSDC },
     trade,
     slippage,
     impact,
   } = useSwapInfo()
   const feeOptions = useAtomValue(feeOptionsAtom)
 
-  const tradeType = useSwapTradeType()
-
-  const [activeTrade, setActiveTrade] = useState<typeof trade.trade | undefined>()
-  useEffect(() => {
-    setActiveTrade((activeTrade) => activeTrade && trade.trade)
-  }, [trade])
-
-  // clear active trade on chain change
-  useEffect(() => {
-    setActiveTrade(undefined)
-  }, [chainId])
-
   // TODO(zzmp): Return an optimized trade directly from useSwapInfo.
   const optimizedTrade =
     // Use trade.trade if there is no swap optimized trade. This occurs if approvals are still pending.
     useSwapApprovalOptimizedTrade(trade.trade, slippage.allowed, useIsPendingApproval) || trade.trade
-
-  const approvalCurrencyAmount = useSwapCurrencyAmount(Field.INPUT)
-
-  const { approvalState, signatureData, handleApproveOrPermit } = useApproveOrPermit(
-    optimizedTrade,
-    slippage.allowed,
-    useIsPendingApproval,
-    approvalCurrencyAmount
-  )
-
-  const approvalHash = usePendingApproval(
-    inputCurrency?.isToken ? inputCurrency : undefined,
-    useSwapRouterAddress(optimizedTrade)
-  )
-
-  const addTransaction = useAddTransaction()
-  const onApprove = useCallback(async () => {
-    const transaction = await handleApproveOrPermit()
-    if (transaction) {
-      addTransaction({ type: TransactionType.APPROVAL, ...transaction })
-    }
-  }, [addTransaction, handleApproveOrPermit])
-
-  const { type: wrapType, callback: wrapCallback } = useWrapCallback()
-
-  const disableSwap = useMemo(
-    () =>
-      disabled ||
-      (wrapType === WrapType.NONE && !optimizedTrade) ||
-      !chainId ||
-      !(inputCurrencyAmount && inputCurrencyBalance) ||
-      inputCurrencyBalance.lessThan(inputCurrencyAmount),
-    [disabled, wrapType, optimizedTrade, chainId, inputCurrencyAmount, inputCurrencyBalance]
-  )
-
-  const actionProps = useMemo((): Partial<ActionButtonProps> | undefined => {
-    if (disableSwap) return { disabled: true }
-
-    if (
-      wrapType === WrapType.NONE &&
-      (approvalState === ApproveOrPermitState.REQUIRES_APPROVAL ||
-        approvalState === ApproveOrPermitState.REQUIRES_SIGNATURE)
-    ) {
-      const currency = inputCurrency || approvalCurrencyAmount?.currency
-      invariant(currency)
-      return {
-        action: {
-          message:
-            approvalState === ApproveOrPermitState.REQUIRES_SIGNATURE ? (
-              <Trans>Allow {currency.symbol} first</Trans>
-            ) : (
-              <Trans>Approve {currency.symbol} first</Trans>
-            ),
-          onClick: onApprove,
-          children:
-            approvalState === ApproveOrPermitState.REQUIRES_SIGNATURE ? <Trans>Allow</Trans> : <Trans>Approve</Trans>,
-        },
-      }
-    }
-    if (approvalState === ApproveOrPermitState.PENDING_APPROVAL) {
-      return {
-        disabled: true,
-        action: {
-          message: (
-            <EtherscanLink type={ExplorerDataType.TRANSACTION} data={approvalHash}>
-              <Trans>Approval pending</Trans>
-            </EtherscanLink>
-          ),
-          icon: Spinner,
-          children: <Trans>Approve</Trans>,
-        },
-      }
-    }
-    if (approvalState === ApproveOrPermitState.PENDING_SIGNATURE) {
-      return {
-        disabled: true,
-        action: {
-          message: <Trans>Allowance pending</Trans>,
-          icon: Spinner,
-          children: <Trans>Allow</Trans>,
-        },
-      }
-    }
-    return {}
-  }, [approvalCurrencyAmount?.currency, approvalHash, approvalState, disableSwap, inputCurrency, onApprove, wrapType])
-
   const deadline = useTransactionDeadline()
 
-  // the callback to execute the swap
+  const { type: wrapType, callback: wrapCallback } = useWrapCallback()
+  const { approvalData, signatureData } = useApprovalData(optimizedTrade, slippage, inputCurrencyAmount)
   const { callback: swapCallback } = useSwapCallback({
     trade: optimizedTrade,
     allowedSlippage: slippage.allowed,
@@ -168,47 +56,78 @@ export default memo(function SwapButton({ disabled }: SwapButtonProps) {
     feeOptions,
   })
 
-  //@TODO(ianlapham): add a loading state, process errors
-  const setDisplayTxHash = useUpdateAtom(displayTxHashAtom)
+  const [open, setOpen] = useState(false)
+  // Close the review modal if there is no available trade.
+  useEffect(() => setOpen((open) => (trade.trade ? open : false)), [trade.trade])
+  // Close the review modal on chain change.
+  useEffect(() => setOpen(false), [chainId])
 
+  const addTransaction = useAddTransaction()
+  const setDisplayTxHash = useUpdateAtom(displayTxHashAtom)
   const setOldestValidBlock = useSetOldestValidBlock()
-  const onConfirm = useCallback(() => {
-    swapCallback?.()
-      .then((response) => {
-        setDisplayTxHash(response.hash)
-        invariant(inputCurrencyAmount && outputCurrencyAmount)
-        addTransaction({
-          response,
-          type: TransactionType.SWAP,
-          tradeType,
-          inputCurrencyAmount,
-          outputCurrencyAmount,
-        })
 
-        // Set the block containing the response to the oldest valid block to ensure that the
-        // completed trade's impact is reflected in future fetched trades.
-        response.wait(1).then((receipt) => {
-          setOldestValidBlock(receipt.blockNumber)
-        })
+  const onWrap = useCallback(async () => {
+    try {
+      const transaction = await wrapCallback?.()
+      if (!transaction) return
+      addTransaction({
+        response: transaction,
+        type: TransactionType.WRAP,
+        unwrapped: wrapType === WrapType.UNWRAP,
+        currencyAmountRaw: transaction.value?.toString() ?? '0',
+        chainId,
       })
-      .catch((error) => {
-        //@TODO(ianlapham): add error handling
-        console.log(error)
+      setDisplayTxHash(transaction.hash)
+    } catch (e) {
+      // TODO(zzmp): Surface errors from wrap.
+      console.log(e)
+    }
+  }, [addTransaction, chainId, setDisplayTxHash, wrapCallback, wrapType])
+  const onSwap = useCallback(async () => {
+    try {
+      const transaction = await swapCallback?.()
+      if (!transaction) return
+      invariant(trade.trade)
+      addTransaction({
+        response: transaction,
+        type: TransactionType.SWAP,
+        tradeType: trade.trade.tradeType,
+        inputCurrencyAmount: trade.trade.inputAmount,
+        outputCurrencyAmount: trade.trade.outputAmount,
       })
-      .finally(() => {
-        setActiveTrade(undefined)
+      setDisplayTxHash(transaction.hash)
+      setOpen(false)
+
+      // Set the block containing the response to the oldest valid block to ensure that the
+      // completed trade's impact is reflected in future fetched trades.
+      transaction.wait(1).then((receipt) => {
+        setOldestValidBlock(receipt.blockNumber)
       })
-  }, [
-    addTransaction,
-    inputCurrencyAmount,
-    outputCurrencyAmount,
-    setDisplayTxHash,
-    setOldestValidBlock,
-    swapCallback,
-    tradeType,
-  ])
+    } catch (e) {
+      // TODO(zzmp): Surface errors from swap.
+      console.log(e)
+    }
+  }, [addTransaction, setDisplayTxHash, setOldestValidBlock, swapCallback, trade.trade])
 
-  const ButtonText = useCallback(() => {
+  const disableSwap = useMemo(
+    () =>
+      disabled ||
+      !chainId ||
+      (wrapType === WrapType.NONE && !optimizedTrade) ||
+      !(inputCurrencyAmount && inputCurrencyBalance) ||
+      inputCurrencyBalance.lessThan(inputCurrencyAmount),
+    [disabled, wrapType, optimizedTrade, chainId, inputCurrencyAmount, inputCurrencyBalance]
+  )
+  const actionProps = useMemo((): Partial<ActionButtonProps> | undefined => {
+    if (disableSwap) {
+      return { disabled: true }
+    } else if (wrapType === WrapType.NONE) {
+      return approvalData || { onClick: () => setOpen(true) }
+    } else {
+      return { onClick: onWrap }
+    }
+  }, [approvalData, disableSwap, onWrap, wrapType])
+  const Label = useCallback(() => {
     switch (wrapType) {
       case WrapType.UNWRAP:
         return <Trans>Unwrap {inputCurrency?.symbol}</Trans>
@@ -219,47 +138,23 @@ export default memo(function SwapButton({ disabled }: SwapButtonProps) {
         return <Trans>Review swap</Trans>
     }
   }, [inputCurrency?.symbol, wrapType])
+  const onClose = useCallback(() => setOpen(false), [])
 
-  const handleDialogClose = useCallback(() => {
-    setActiveTrade(undefined)
-  }, [])
-
-  const handleActionButtonClick = useCallback(async () => {
-    if (wrapType === WrapType.NONE) {
-      setActiveTrade(trade.trade)
-    } else {
-      const transaction = await wrapCallback()
-      if (!transaction) return
-
-      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])
-
+  const { tokenColorExtraction } = useTheme()
   return (
     <>
-      <ActionButton
-        color={tokenColorExtraction ? 'interactive' : 'accent'}
-        onClick={handleActionButtonClick}
-        {...actionProps}
-      >
-        <ButtonText />
+      <ActionButton color={tokenColorExtraction ? 'interactive' : 'accent'} {...actionProps}>
+        <Label />
       </ActionButton>
-      {activeTrade && (
-        <Dialog color="dialog" onClose={handleDialogClose}>
+      {open && trade.trade && (
+        <Dialog color="dialog" onClose={onClose}>
           <SummaryDialog
-            trade={activeTrade}
+            trade={trade.trade}
             slippage={slippage}
             inputUSDC={inputUSDC}
             outputUSDC={outputUSDC}
             impact={impact}
-            onConfirm={onConfirm}
+            onConfirm={onSwap}
           />
         </Dialog>
       )}

src/lib/components/Swap/SwapButton/useApprovalData.tsx

+import { Trans } from '@lingui/macro'
+import { Currency, CurrencyAmount, Token } from '@uniswap/sdk-core'
+import { ActionButtonProps } from 'lib/components/ActionButton'
+import EtherscanLink from 'lib/components/EtherscanLink'
+import {
+  ApproveOrPermitState,
+  useApproveOrPermit,
+  useSwapApprovalOptimizedTrade,
+  useSwapRouterAddress,
+} from 'lib/hooks/swap/useSwapApproval'
+import { useAddTransaction, usePendingApproval } from 'lib/hooks/transactions'
+import { Slippage } from 'lib/hooks/useSlippage'
+import { Spinner } from 'lib/icons'
+import { TransactionType } from 'lib/state/transactions'
+import { useCallback, useMemo } from 'react'
+import { ExplorerDataType } from 'utils/getExplorerLink'
+
+export function useIsPendingApproval(token?: Token, spender?: string): boolean {
+  return Boolean(usePendingApproval(token, spender))
+}
+
+export default function useApprovalData(
+  trade: ReturnType<typeof useSwapApprovalOptimizedTrade>,
+  slippage: Slippage,
+  currencyAmount?: CurrencyAmount<Currency>
+) {
+  const currency = currencyAmount?.currency
+  const { approvalState, signatureData, handleApproveOrPermit } = useApproveOrPermit(
+    trade,
+    slippage.allowed,
+    useIsPendingApproval,
+    currencyAmount
+  )
+
+  const addTransaction = useAddTransaction()
+  const onApprove = useCallback(async () => {
+    const transaction = await handleApproveOrPermit()
+    if (transaction) {
+      addTransaction({ type: TransactionType.APPROVAL, ...transaction })
+    }
+  }, [addTransaction, handleApproveOrPermit])
+
+  const approvalHash = usePendingApproval(currency?.isToken ? currency : undefined, useSwapRouterAddress(trade))
+  const approvalData = useMemo((): Partial<ActionButtonProps> | undefined => {
+    if (!trade || !currency) return
+
+    if (approvalState === ApproveOrPermitState.REQUIRES_APPROVAL) {
+      return {
+        action: {
+          message: <Trans>Approve {currency.symbol} first</Trans>,
+          onClick: onApprove,
+          children: <Trans>Approve</Trans>,
+        },
+      }
+    } else if (approvalState === ApproveOrPermitState.REQUIRES_SIGNATURE) {
+      return {
+        action: {
+          message: <Trans>Allow {currency.symbol} first</Trans>,
+          onClick: onApprove,
+          children: <Trans>Allow</Trans>,
+        },
+      }
+    }
+    if (approvalState === ApproveOrPermitState.PENDING_APPROVAL) {
+      return {
+        disabled: true,
+        action: {
+          message: (
+            <EtherscanLink type={ExplorerDataType.TRANSACTION} data={approvalHash}>
+              <Trans>Approval pending</Trans>
+            </EtherscanLink>
+          ),
+          icon: Spinner,
+          children: <Trans>Approve</Trans>,
+        },
+      }
+    }
+    if (approvalState === ApproveOrPermitState.PENDING_SIGNATURE) {
+      return {
+        disabled: true,
+        action: {
+          message: <Trans>Allowance pending</Trans>,
+          icon: Spinner,
+          children: <Trans>Allow</Trans>,
+        },
+      }
+    }
+    return
+  }, [approvalHash, approvalState, currency, onApprove, trade])
+
+  return { approvalData, signatureData: signatureData ?? undefined }
+}

src/lib/hooks/swap/index.ts

-import { Currency, CurrencyAmount, TradeType } from '@uniswap/sdk-core'
+import { Currency, CurrencyAmount } from '@uniswap/sdk-core'
 import { useAtom } from 'jotai'
 import { useAtomValue, useUpdateAtom } from 'jotai/utils'
 import { pickAtom } from 'lib/state/atoms'
@@ -63,16 +63,6 @@ export function useIsSwapFieldIndependent(field: Field): boolean {
   return independentField === field
 }
 
-export function useSwapTradeType(): TradeType {
-  const independentField = useAtomValue(independentFieldAtom)
-  switch (independentField) {
-    case Field.INPUT:
-      return TradeType.EXACT_INPUT
-    case Field.OUTPUT:
-      return TradeType.EXACT_OUTPUT
-  }
-}
-
 const amountAtom = pickAtom(swapAtom, 'amount')
 
 // check if any amount has been entered by user

src/lib/hooks/swap/useSwapCallback.tsx

@@ -20,8 +20,8 @@ export enum SwapCallbackState {
 
 interface UseSwapCallbackReturns {
   state: SwapCallbackState
-  callback: null | (() => Promise<TransactionResponse>)
-  error: ReactNode | null
+  callback?: () => Promise<TransactionResponse>
+  error?: ReactNode
 }
 interface UseSwapCallbackArgs {
   trade: AnyTrade | undefined // trade to execute, required
@@ -59,24 +59,19 @@ export function useSwapCallback({
 
   return useMemo(() => {
     if (!trade || !library || !account || !chainId || !callback) {
-      return { state: SwapCallbackState.INVALID, callback: null, error: <Trans>Missing dependencies</Trans> }
+      return { state: SwapCallbackState.INVALID, error: <Trans>Missing dependencies</Trans> }
     }
     if (!recipient) {
       if (recipientAddressOrName !== null) {
-        return { state: SwapCallbackState.INVALID, callback: null, error: <Trans>Invalid recipient</Trans> }
+        return { state: SwapCallbackState.INVALID, error: <Trans>Invalid recipient</Trans> }
       } else {
-        return { state: SwapCallbackState.LOADING, callback: null, error: null }
+        return { state: SwapCallbackState.LOADING }
       }
     }
 
     return {
       state: SwapCallbackState.VALID,
-      callback: async function onSwap(): Promise<TransactionResponse> {
-        return callback().then((response) => {
-          return response
-        })
-      },
-      error: null,
+      callback: async () => callback(),
     }
   }, [trade, library, account, chainId, callback, recipient, recipientAddressOrName])
 }

src/lib/hooks/swap/useWrapCallback.tsx

@@ -3,7 +3,7 @@ import { useWETHContract } from 'hooks/useContract'
 import { useAtomValue } from 'jotai/utils'
 import { Field, swapAtom } from 'lib/state/swap'
 import tryParseCurrencyAmount from 'lib/utils/tryParseCurrencyAmount'
-import { useCallback, useMemo } from 'react'
+import { useMemo } from 'react'
 
 import { WRAPPED_NATIVE_CURRENCY } from '../../../constants/tokens'
 import useActiveWeb3React from '../useActiveWeb3React'
@@ -15,7 +15,7 @@ export enum WrapType {
   UNWRAP,
 }
 interface UseWrapCallbackReturns {
-  callback: () => Promise<ContractTransaction | undefined>
+  callback?: () => Promise<ContractTransaction>
   type: WrapType
 }
 
@@ -42,29 +42,21 @@ export default function useWrapCallback(): UseWrapCallbackReturns {
   )
   const balanceIn = useCurrencyBalance(account, inputCurrency)
 
-  const callback = useCallback(async () => {
-    if (wrapType === WrapType.NONE) {
-      return Promise.reject('Wrapping not applicable to this asset.')
-    }
-    if (!parsedAmountIn) {
-      return Promise.reject('Must provide an input amount to wrap.')
-    }
-    if (!balanceIn || balanceIn.lessThan(parsedAmountIn)) {
-      return Promise.reject('Insufficient balance to wrap desired amount.')
-    }
-    if (!wrappedNativeCurrencyContract) {
-      return Promise.reject('Wrap contract not found.')
+  const callback = useMemo(() => {
+    if (
+      wrapType === WrapType.NONE ||
+      !parsedAmountIn ||
+      !balanceIn ||
+      balanceIn.lessThan(parsedAmountIn) ||
+      !wrappedNativeCurrencyContract
+    ) {
+      return
     }
 
-    try {
-      return await (wrapType === WrapType.WRAP
+    return async () =>
+      wrapType === WrapType.WRAP
         ? wrappedNativeCurrencyContract.deposit({ value: `0x${parsedAmountIn.quotient.toString(16)}` })
-        : wrappedNativeCurrencyContract.withdraw(`0x${parsedAmountIn.quotient.toString(16)}`))
-    } catch (e) {
-      // TODO(zzmp): add error handling
-      console.error(e)
-      return
-    }
+        : wrappedNativeCurrencyContract.withdraw(`0x${parsedAmountIn.quotient.toString(16)}`)
   }, [wrapType, parsedAmountIn, balanceIn, wrappedNativeCurrencyContract])
 
   return useMemo(() => ({ callback, type: wrapType }), [callback, wrapType])