revert: "fix: update permit2 to match widget implementation (#5821)" (#5825)

Revert "fix: update permit2 to match widget implementation (#5821)"

This reverts commit ef3407f2.

src/abis/permit2.json

-[
-  {
-    "inputs": [
-      {
-        "internalType": "address",
-        "name": "",
-        "type": "address"
-      },
-      {
-        "internalType": "address",
-        "name": "",
-        "type": "address"
-      },
-      {
-        "internalType": "address",
-        "name": "",
-        "type": "address"
-      }
-    ],
-    "name": "allowance",
-    "outputs": [
-      {
-        "internalType": "uint160",
-        "name": "amount",
-        "type": "uint160"
-      },
-      {
-        "internalType": "uint48",
-        "name": "expiration",
-        "type": "uint48"
-      },
-      {
-        "internalType": "uint48",
-        "name": "nonce",
-        "type": "uint48"
-      }
-    ],
-    "stateMutability": "view",
-    "type": "function"
-  }
-]

src/hooks/usePermit2.ts

+import { ContractTransaction } from '@ethersproject/contracts'
+import { PERMIT2_ADDRESS } from '@uniswap/permit2-sdk'
+import { CurrencyAmount, Token } from '@uniswap/sdk-core'
+import { useWeb3React } from '@web3-react/core'
+import { AVERAGE_L1_BLOCK_TIME } from 'constants/chainInfo'
+import useInterval from 'lib/hooks/useInterval'
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useHasPendingApproval } from 'state/transactions/hooks'
+import { ApproveTransactionInfo } from 'state/transactions/types'
+
+import { PermitSignature, usePermitAllowance, useUpdatePermitAllowance } from './usePermitAllowance'
+import { useTokenAllowance, useUpdateTokenAllowance } from './useTokenAllowance'
+
+enum SyncState {
+  PENDING,
+  SYNCING,
+  SYNCED,
+}
+
+export enum PermitState {
+  INVALID,
+  LOADING,
+  APPROVAL_OR_PERMIT_NEEDED,
+  APPROVAL_LOADING,
+  APPROVED_AND_PERMITTED,
+}
+
+export interface Permit {
+  state: PermitState
+  signature?: PermitSignature
+  callback?: () => Promise<{
+    response: ContractTransaction
+    info: ApproveTransactionInfo
+  } | void>
+}
+
+export default function usePermit(amount?: CurrencyAmount<Token>, spender?: string): Permit {
+  const { account } = useWeb3React()
+  const { tokenAllowance, isSyncing: isApprovalSyncing } = useTokenAllowance(amount?.currency, account, PERMIT2_ADDRESS)
+  const updateTokenAllowance = useUpdateTokenAllowance(amount, PERMIT2_ADDRESS)
+  const isAllowed = useMemo(
+    () => amount && (tokenAllowance?.greaterThan(amount) || tokenAllowance?.equalTo(amount)),
+    [amount, tokenAllowance]
+  )
+
+  const permitAllowance = usePermitAllowance(amount?.currency, spender)
+  const [permitAllowanceAmount, setPermitAllowanceAmount] = useState(permitAllowance?.amount)
+  useEffect(() => setPermitAllowanceAmount(permitAllowance?.amount), [permitAllowance?.amount])
+  const isPermitted = useMemo(
+    () => amount && permitAllowanceAmount?.gte(amount.quotient.toString()),
+    [amount, permitAllowanceAmount]
+  )
+
+  const [signature, setSignature] = useState<PermitSignature>()
+  const updatePermitAllowance = useUpdatePermitAllowance(
+    amount?.currency,
+    spender,
+    permitAllowance?.nonce,
+    setSignature
+  )
+  const isSigned = useMemo(
+    () => amount && signature?.details.token === amount?.currency.address && signature?.spender === spender,
+    [amount, signature?.details.token, signature?.spender, spender]
+  )
+
+  // Trigger a re-render if either tokenAllowance or signature expire.
+  useInterval(
+    () => {
+      // Calculate now such that the signature will still be valid for the next block.
+      const now = (Date.now() - AVERAGE_L1_BLOCK_TIME) / 1000
+      if (signature && signature.sigDeadline < now) {
+        setSignature(undefined)
+      }
+      if (permitAllowance && permitAllowance.expiration < now) {
+        setPermitAllowanceAmount(undefined)
+      }
+    },
+    AVERAGE_L1_BLOCK_TIME,
+    true
+  )
+
+  // Permit2 should be marked syncing from the time approval is submitted (pending) until it is
+  // synced in tokenAllowance, to avoid re-prompting the user for an already-submitted approval.
+  const [syncState, setSyncState] = useState(SyncState.SYNCED)
+  const isApprovalLoading = syncState !== SyncState.SYNCED
+  const hasPendingApproval = useHasPendingApproval(amount?.currency, PERMIT2_ADDRESS)
+  useEffect(() => {
+    if (hasPendingApproval) {
+      setSyncState(SyncState.PENDING)
+    } else {
+      setSyncState((state) => {
+        if (state === SyncState.PENDING && isApprovalSyncing) {
+          return SyncState.SYNCING
+        } else if (state === SyncState.SYNCING && !isApprovalSyncing) {
+          return SyncState.SYNCED
+        } else {
+          return state
+        }
+      })
+    }
+  }, [hasPendingApproval, isApprovalSyncing])
+
+  const callback = useCallback(async () => {
+    let info
+    if (!isAllowed && !hasPendingApproval) {
+      info = await updateTokenAllowance()
+    }
+    if (!isPermitted && !isSigned) {
+      await updatePermitAllowance()
+    }
+    return info
+  }, [hasPendingApproval, isAllowed, isPermitted, isSigned, updatePermitAllowance, updateTokenAllowance])
+
+  return useMemo(() => {
+    if (!amount) {
+      return { state: PermitState.INVALID }
+    } else if (!tokenAllowance || !permitAllowance) {
+      return { state: PermitState.LOADING }
+    } else if (!(isPermitted || isSigned)) {
+      return { state: PermitState.APPROVAL_OR_PERMIT_NEEDED, callback }
+    } else if (!isAllowed) {
+      return {
+        state: isApprovalLoading ? PermitState.APPROVAL_LOADING : PermitState.APPROVAL_OR_PERMIT_NEEDED,
+        callback,
+      }
+    } else {
+      return { state: PermitState.APPROVED_AND_PERMITTED, signature: isPermitted ? undefined : signature }
+    }
+  }, [
+    amount,
+    callback,
+    isAllowed,
+    isApprovalLoading,
+    isPermitted,
+    isSigned,
+    permitAllowance,
+    signature,
+    tokenAllowance,
+  ])
+}

src/hooks/usePermit2Allowance.ts

-import { PERMIT2_ADDRESS } from '@uniswap/permit2-sdk'
-import { CurrencyAmount, Token } from '@uniswap/sdk-core'
-import { useWeb3React } from '@web3-react/core'
-import { AVERAGE_L1_BLOCK_TIME } from 'constants/chainInfo'
-import { PermitSignature, usePermitAllowance, useUpdatePermitAllowance } from 'hooks/usePermitAllowance'
-import { useTokenAllowance, useUpdateTokenAllowance } from 'hooks/useTokenAllowance'
-import useInterval from 'lib/hooks/useInterval'
-import { useCallback, useEffect, useMemo, useState } from 'react'
-import { useHasPendingApproval, useTransactionAdder } from 'state/transactions/hooks'
-
-enum ApprovalState {
-  PENDING,
-  SYNCING,
-  SYNCED,
-}
-
-export enum AllowanceState {
-  LOADING,
-  REQUIRED,
-  ALLOWED,
-}
-
-interface AllowanceRequired {
-  state: AllowanceState.REQUIRED
-  token: Token
-  isApprovalLoading: boolean
-  approveAndPermit: () => Promise<void>
-}
-
-type Allowance =
-  | { state: AllowanceState.LOADING }
-  | {
-      state: AllowanceState.ALLOWED
-      permitSignature?: PermitSignature
-    }
-  | AllowanceRequired
-
-export default function usePermit2Allowance(amount?: CurrencyAmount<Token>, spender?: string): Allowance {
-  const { account } = useWeb3React()
-  const token = amount?.currency
-
-  const { tokenAllowance, isSyncing: isApprovalSyncing } = useTokenAllowance(token, account, PERMIT2_ADDRESS)
-  const updateTokenAllowance = useUpdateTokenAllowance(amount, PERMIT2_ADDRESS)
-  const isApproved = useMemo(() => {
-    if (!amount || !tokenAllowance) return false
-    return tokenAllowance.greaterThan(amount) || tokenAllowance.equalTo(amount)
-  }, [amount, tokenAllowance])
-
-  // Marks approval as loading from the time it is submitted (pending), until it has confirmed and another block synced.
-  // This avoids re-prompting the user for an already-submitted but not-yet-observed approval, by marking it loading
-  // until it has been re-observed. It wll sync immediately, because confirmation fast-forwards the block number.
-  const [approvalState, setApprovalState] = useState(ApprovalState.SYNCED)
-  const isApprovalLoading = approvalState !== ApprovalState.SYNCED
-  const isApprovalPending = useHasPendingApproval(token, PERMIT2_ADDRESS)
-  useEffect(() => {
-    if (isApprovalPending) {
-      setApprovalState(ApprovalState.PENDING)
-    } else {
-      setApprovalState((state) => {
-        if (state === ApprovalState.PENDING && isApprovalSyncing) {
-          return ApprovalState.SYNCING
-        } else if (state === ApprovalState.SYNCING && !isApprovalSyncing) {
-          return ApprovalState.SYNCED
-        }
-        return state
-      })
-    }
-  }, [isApprovalPending, isApprovalSyncing])
-
-  // Signature and PermitAllowance will expire, so they should be rechecked at an interval.
-  const [now, setNow] = useState(Date.now())
-  // Calculate now such that the signature will still be valid for the submitting block.
-  useInterval(() => setNow((Date.now() + AVERAGE_L1_BLOCK_TIME) / 1000), AVERAGE_L1_BLOCK_TIME, true)
-
-  const [signature, setSignature] = useState<PermitSignature>()
-  const isSigned = useMemo(() => {
-    if (!amount || !signature) return false
-    return signature.details.token === token?.address && signature.spender === spender && signature.sigDeadline >= now
-  }, [amount, now, signature, spender, token?.address])
-
-  const { permitAllowance, expiration: permitExpiration, nonce } = usePermitAllowance(token, account, spender)
-  const updatePermitAllowance = useUpdatePermitAllowance(token, spender, nonce, setSignature)
-  const isPermitted = useMemo(() => {
-    if (!amount || !permitAllowance || !permitExpiration) return false
-    return (permitAllowance.greaterThan(amount) || permitAllowance.equalTo(amount)) && permitExpiration >= now
-  }, [amount, now, permitAllowance, permitExpiration])
-
-  const shouldRequestApproval = !(isApproved || isApprovalLoading)
-  const shouldRequestSignature = !(isPermitted || isSigned)
-  const addTransaction = useTransactionAdder()
-  const approveAndPermit = useCallback(async () => {
-    if (shouldRequestApproval) {
-      const { response, info } = await updateTokenAllowance()
-      addTransaction(response, info)
-    }
-    if (shouldRequestSignature) {
-      await updatePermitAllowance()
-    }
-  }, [addTransaction, shouldRequestApproval, shouldRequestSignature, updatePermitAllowance, updateTokenAllowance])
-
-  return useMemo(() => {
-    if (token) {
-      if (!tokenAllowance || !permitAllowance) {
-        return { state: AllowanceState.LOADING }
-      } else if (!(isPermitted || isSigned)) {
-        return { token, state: AllowanceState.REQUIRED, isApprovalLoading: false, approveAndPermit }
-      } else if (!isApproved) {
-        return { token, state: AllowanceState.REQUIRED, isApprovalLoading, approveAndPermit }
-      }
-    }
-    return { token, state: AllowanceState.ALLOWED, permitSignature: !isPermitted && isSigned ? signature : undefined }
-  }, [
-    approveAndPermit,
-    isApprovalLoading,
-    isApproved,
-    isPermitted,
-    isSigned,
-    permitAllowance,
-    signature,
-    token,
-    tokenAllowance,
-  ])
-}

src/hooks/usePermitAllowance.ts

-import { AllowanceTransfer, MaxAllowanceTransferAmount, PERMIT2_ADDRESS, PermitSingle } from '@uniswap/permit2-sdk'
-import { CurrencyAmount, Token } from '@uniswap/sdk-core'
+import {
+  AllowanceData,
+  AllowanceProvider,
+  AllowanceTransfer,
+  MaxAllowanceTransferAmount,
+  PERMIT2_ADDRESS,
+  PermitSingle,
+} from '@uniswap/permit2-sdk'
+import { Token } from '@uniswap/sdk-core'
 import { useWeb3React } from '@web3-react/core'
-import PERMIT2_ABI from 'abis/permit2.json'
-import { Permit2 } from 'abis/types'
-import { useContract } from 'hooks/useContract'
-import { useSingleCallResult } from 'lib/hooks/multicall'
+import useBlockNumber from 'lib/hooks/useBlockNumber'
 import ms from 'ms.macro'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 
@@ -15,28 +19,35 @@ function toDeadline(expiration: number): number {
   return Math.floor((Date.now() + expiration) / 1000)
 }
 
-export function usePermitAllowance(token?: Token, owner?: string, spender?: string) {
-  const contract = useContract<Permit2>(PERMIT2_ADDRESS, PERMIT2_ABI)
-  const inputs = useMemo(() => [owner, token?.address, spender], [owner, spender, token?.address])
+export function usePermitAllowance(token?: Token, spender?: string) {
+  const { account, provider } = useWeb3React()
+  const allowanceProvider = useMemo(() => provider && new AllowanceProvider(provider, PERMIT2_ADDRESS), [provider])
+  const [allowanceData, setAllowanceData] = useState<AllowanceData>()
 
-  // If there is no allowance yet, re-check next observed block.
-  // This guarantees that the permitAllowance is synced upon submission and updated upon being synced.
-  const [blocksPerFetch, setBlocksPerFetch] = useState<1>()
-  const result = useSingleCallResult(contract, 'allowance', inputs, {
-    blocksPerFetch,
-  }).result as Awaited<ReturnType<Permit2['allowance']>> | undefined
+  // If there is no allowanceData, recheck every block so a submitted allowance is immediately observed.
+  const blockNumber = useBlockNumber()
+  const shouldUpdate = allowanceData ? false : blockNumber
 
-  const rawAmount = result?.amount.toString() // convert to a string before using in a hook, to avoid spurious rerenders
-  const allowance = useMemo(
-    () => (token && rawAmount ? CurrencyAmount.fromRawAmount(token, rawAmount) : undefined),
-    [token, rawAmount]
-  )
-  useEffect(() => setBlocksPerFetch(allowance?.equalTo(0) ? 1 : undefined), [allowance])
+  useEffect(() => {
+    if (!account || !token || !spender) return
 
-  return useMemo(
-    () => ({ permitAllowance: allowance, expiration: result?.expiration, nonce: result?.nonce }),
-    [allowance, result?.expiration, result?.nonce]
-  )
+    allowanceProvider
+      ?.getAllowanceData(token.address, account, spender)
+      .then((data) => {
+        if (stale) return
+        setAllowanceData(data)
+      })
+      .catch((e) => {
+        console.warn(`Failed to fetch allowance data: ${e}`)
+      })
+
+    let stale = false
+    return () => {
+      stale = true
+    }
+  }, [account, allowanceProvider, shouldUpdate, spender, token])
+
+  return allowanceData
 }
 
 interface Permit extends PermitSingle {
@@ -80,7 +91,7 @@ export function useUpdatePermitAllowance(
       return
     } catch (e: unknown) {
       const symbol = token?.symbol ?? 'Token'
-      throw new Error(`${symbol} permit allowance failed: ${e instanceof Error ? e.message : e}`)
+      throw new Error(`${symbol} permit failed: ${e instanceof Error ? e.message : e}`)
     }
   }, [account, chainId, nonce, onPermitSignature, provider, spender, token])
 }

src/hooks/useSwapCallback.tsx

@@ -2,7 +2,6 @@ import { Trade } from '@uniswap/router-sdk'
 import { Currency, Percent, TradeType } from '@uniswap/sdk-core'
 import { useWeb3React } from '@web3-react/core'
 import { usePermit2Enabled } from 'featureFlags/flags/permit2'
-import { PermitSignature } from 'hooks/usePermitAllowance'
 import { SwapCallbackState, useSwapCallback as useLibSwapCallBack } from 'lib/hooks/swap/useSwapCallback'
 import { ReactNode, useMemo } from 'react'
 
@@ -11,6 +10,7 @@ import { TransactionType } from '../state/transactions/types'
 import { currencyId } from '../utils/currencyId'
 import useENS from './useENS'
 import { SignatureData } from './useERC20Permit'
+import { Permit } from './usePermit2'
 import useTransactionDeadline from './useTransactionDeadline'
 import { useUniversalRouterSwapCallback } from './useUniversalRouter'
 
@@ -21,7 +21,7 @@ export function useSwapCallback(
   allowedSlippage: Percent, // in bips
   recipientAddressOrName: string | null, // the ENS name or address of the recipient of the trade, or null if swap should be returned to sender
   signatureData: SignatureData | undefined | null,
-  permitSignature: PermitSignature | undefined
+  permit: Permit | undefined
 ): { state: SwapCallbackState; callback: null | (() => Promise<string>); error: ReactNode | null } {
   const { account } = useWeb3React()
 
@@ -47,7 +47,7 @@ export function useSwapCallback(
   const universalRouterSwapCallback = useUniversalRouterSwapCallback(permit2Enabled ? trade : undefined, {
     slippageTolerance: allowedSlippage,
     deadline,
-    permit: permitSignature,
+    permit: permit?.signature,
   })
   const swapCallback = permit2Enabled ? universalRouterSwapCallback : libCallback
 

src/hooks/useTokenAllowance.ts

 import { BigNumberish } from '@ethersproject/bignumber'
 import { ContractTransaction } from '@ethersproject/contracts'
 import { CurrencyAmount, MaxUint256, Token } from '@uniswap/sdk-core'
-import { useTokenContract } from 'hooks/useContract'
 import { useSingleCallResult } from 'lib/hooks/multicall'
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useCallback, useMemo } from 'react'
 import { ApproveTransactionInfo, TransactionType } from 'state/transactions/types'
 import { calculateGasMargin } from 'utils/calculateGasMargin'
 
+import { useTokenContract } from './useContract'
+
 export function useTokenAllowance(
   token?: Token,
   owner?: string,
@@ -16,33 +17,23 @@ export function useTokenAllowance(
   isSyncing: boolean
 } {
   const contract = useTokenContract(token?.address, false)
-  const inputs = useMemo(() => [owner, spender], [owner, spender])
 
-  // If there is no allowance yet, re-check next observed block.
-  // This guarantees that the tokenAllowance is marked isSyncing upon approval and updated upon being synced.
-  const [blocksPerFetch, setBlocksPerFetch] = useState<1>()
-  const { result, syncing: isSyncing } = useSingleCallResult(contract, 'allowance', inputs, { blocksPerFetch }) as {
-    result: Awaited<ReturnType<NonNullable<typeof contract>['allowance']>> | undefined
-    syncing: boolean
-  }
-
-  const rawAmount = result?.toString() // convert to a string before using in a hook, to avoid spurious rerenders
-  const allowance = useMemo(
-    () => (token && rawAmount ? CurrencyAmount.fromRawAmount(token, rawAmount) : undefined),
-    [token, rawAmount]
-  )
-  useEffect(() => setBlocksPerFetch(allowance?.equalTo(0) ? 1 : undefined), [allowance])
+  const inputs = useMemo(() => [owner, spender], [owner, spender])
+  const { result, syncing: isSyncing } = useSingleCallResult(contract, 'allowance', inputs)
 
-  return useMemo(() => ({ tokenAllowance: allowance, isSyncing }), [allowance, isSyncing])
+  return useMemo(() => {
+    const tokenAllowance = token && result && CurrencyAmount.fromRawAmount(token, result.toString())
+    return { tokenAllowance, isSyncing }
+  }, [isSyncing, result, token])
 }
 
-export function useUpdateTokenAllowance(
-  amount: CurrencyAmount<Token> | undefined,
-  spender: string
-): () => Promise<{ response: ContractTransaction; info: ApproveTransactionInfo }> {
+export function useUpdateTokenAllowance(amount: CurrencyAmount<Token> | undefined, spender: string) {
   const contract = useTokenContract(amount?.currency.address)
 
-  return useCallback(async () => {
+  return useCallback(async (): Promise<{
+    response: ContractTransaction
+    info: ApproveTransactionInfo
+  }> => {
     try {
       if (!amount) throw new Error('missing amount')
       if (!contract) throw new Error('missing contract')
@@ -67,7 +58,7 @@ export function useUpdateTokenAllowance(
       }
     } catch (e: unknown) {
       const symbol = amount?.currency.symbol ?? 'Token'
-      throw new Error(`${symbol} token allowance failed: ${e instanceof Error ? e.message : e}`)
+      throw new Error(`${symbol} approval failed: ${e instanceof Error ? e.message : e}`)
     }
   }, [amount, contract, spender])
 }

src/lib/hooks/transactions/updater.tsx

 import { TransactionReceipt } from '@ethersproject/abstract-provider'
 import { useWeb3React } from '@web3-react/core'
 import { SupportedChainId } from 'constants/chains'
-import useBlockNumber, { useFastForwardBlockNumber } from 'lib/hooks/useBlockNumber'
+import useBlockNumber from 'lib/hooks/useBlockNumber'
 import ms from 'ms.macro'
 import { useCallback, useEffect } from 'react'
 import { retry, RetryableError, RetryOptions } from 'utils/retry'
@@ -48,7 +48,6 @@ export default function Updater({ pendingTransactions, onCheck, onReceipt }: Upd
   const { chainId, provider } = useWeb3React()
 
   const lastBlockNumber = useBlockNumber()
-  const fastForwardBlockNumber = useFastForwardBlockNumber()
 
   const getReceipt = useCallback(
     (hash: string) => {
@@ -79,7 +78,6 @@ export default function Updater({ pendingTransactions, onCheck, onReceipt }: Upd
         promise
           .then((receipt) => {
             if (receipt) {
-              fastForwardBlockNumber(receipt.blockNumber)
               onReceipt({ chainId, hash, receipt })
             } else {
               onCheck({ chainId, hash, blockNumber: lastBlockNumber })
@@ -96,7 +94,7 @@ export default function Updater({ pendingTransactions, onCheck, onReceipt }: Upd
     return () => {
       cancels.forEach((cancel) => cancel())
     }
-  }, [chainId, provider, lastBlockNumber, getReceipt, onReceipt, onCheck, pendingTransactions, fastForwardBlockNumber])
+  }, [chainId, provider, lastBlockNumber, getReceipt, onReceipt, onCheck, pendingTransactions])
 
   return null
 }

src/lib/hooks/useBlockNumber.tsx

@@ -6,7 +6,6 @@ const MISSING_PROVIDER = Symbol()
 const BlockNumberContext = createContext<
   | {
       value?: number
-      fastForward(block: number): void
     }
   | typeof MISSING_PROVIDER
 >(MISSING_PROVIDER)
@@ -24,10 +23,6 @@ export default function useBlockNumber(): number | undefined {
   return useBlockNumberContext().value
 }
 
-export function useFastForwardBlockNumber(): (block: number) => void {
-  return useBlockNumberContext().fastForward
-}
-
 export function BlockNumberProvider({ children }: { children: ReactNode }) {
   const { chainId: activeChainId, provider } = useWeb3React()
   const [{ chainId, block }, setChainBlock] = useState<{ chainId?: number; block?: number }>({ chainId: activeChainId })
@@ -73,16 +68,7 @@ export function BlockNumberProvider({ children }: { children: ReactNode }) {
     return void 0
   }, [activeChainId, provider, onBlock, setChainBlock, windowVisible])
 
-  const value = useMemo(
-    () => ({
-      value: chainId === activeChainId ? block : undefined,
-      fastForward: (update: number) => {
-        if (block && update > block) {
-          setChainBlock({ chainId: activeChainId, block: update })
-        }
-      },
-    }),
-    [activeChainId, block, chainId]
-  )
+  const blockValue = useMemo(() => (chainId === activeChainId ? block : undefined), [activeChainId, block, chainId])
+  const value = useMemo(() => ({ value: blockValue }), [blockValue])
   return <BlockNumberContext.Provider value={value}>{children}</BlockNumberContext.Provider>
 }

src/pages/Swap/index.tsx

@@ -21,7 +21,7 @@ import TokenSafetyModal from 'components/TokenSafety/TokenSafetyModal'
 import { MouseoverTooltip } from 'components/Tooltip'
 import { isSupportedChain } from 'constants/chains'
 import { usePermit2Enabled } from 'featureFlags/flags/permit2'
-import usePermit2Allowance, { AllowanceState } from 'hooks/usePermit2Allowance'
+import usePermit, { PermitState } from 'hooks/usePermit2'
 import { useSwapCallback } from 'hooks/useSwapCallback'
 import useTransactionDeadline from 'hooks/useTransactionDeadline'
 import JSBI from 'jsbi'
@@ -34,8 +34,8 @@ import { Text } from 'rebass'
 import { useToggleWalletModal } from 'state/application/hooks'
 import { InterfaceTrade } from 'state/routing/types'
 import { TradeState } from 'state/routing/types'
+import { useTransactionAdder } from 'state/transactions/hooks'
 import styled, { useTheme } from 'styled-components/macro'
-import invariant from 'tiny-invariant'
 import { currencyAmountToPreciseFloat, formatTransactionAmount } from 'utils/formatNumbers'
 
 import AddressInputPanel from '../../components/AddressInputPanel'
@@ -302,31 +302,36 @@ export default function Swap({ className }: { className?: string }) {
     const maximumAmountIn = trade?.maximumAmountIn(allowedSlippage)
     return maximumAmountIn?.currency.isToken ? (maximumAmountIn as CurrencyAmount<Token>) : undefined
   }, [allowedSlippage, trade])
-  const allowance = usePermit2Allowance(
+  const permit = usePermit(
     permit2Enabled ? maximumAmountIn : undefined,
     permit2Enabled && chainId ? UNIVERSAL_ROUTER_ADDRESS(chainId) : undefined
   )
-  const isApprovalLoading = allowance.state === AllowanceState.REQUIRED && allowance.isApprovalLoading
-  const [isAllowancePending, setIsAllowancePending] = useState(false)
-  const [isAllowanceFailed, setIsAllowanceFailed] = useState(false)
-  const updateAllowance = useCallback(async () => {
-    invariant(allowance.state === AllowanceState.REQUIRED)
-    setIsAllowancePending(true)
+  const isApprovalLoading = permit.state === PermitState.APPROVAL_LOADING
+  const [isPermitPending, setIsPermitPending] = useState(false)
+  const [isPermitFailed, setIsPermitFailed] = useState(false)
+  const addTransaction = useTransactionAdder()
+  const updatePermit = useCallback(async () => {
+    setIsPermitPending(true)
     try {
-      await allowance.approveAndPermit()
-      sendAnalyticsEvent(InterfaceEventName.APPROVE_TOKEN_TXN_SUBMITTED, {
-        chain_id: chainId,
-        token_symbol: maximumAmountIn?.currency.symbol,
-        token_address: maximumAmountIn?.currency.address,
-      })
-      setIsAllowanceFailed(false)
+      const approval = await permit.callback?.()
+      if (approval) {
+        sendAnalyticsEvent(InterfaceEventName.APPROVE_TOKEN_TXN_SUBMITTED, {
+          chain_id: chainId,
+          token_symbol: maximumAmountIn?.currency.symbol,
+          token_address: maximumAmountIn?.currency.address,
+        })
+
+        const { response, info } = approval
+        addTransaction(response, info)
+      }
+      setIsPermitFailed(false)
     } catch (e) {
       console.error(e)
-      setIsAllowanceFailed(true)
+      setIsPermitFailed(true)
     } finally {
-      setIsAllowancePending(false)
+      setIsPermitPending(false)
     }
-  }, [allowance, chainId, maximumAmountIn?.currency.address, maximumAmountIn?.currency.symbol])
+  }, [addTransaction, chainId, maximumAmountIn?.currency.address, maximumAmountIn?.currency.symbol, permit])
 
   // check whether the user has approved the router on the input token
   const [approvalState, approveCallback] = useApproveCallbackFromTrade(
@@ -389,7 +394,7 @@ export default function Swap({ className }: { className?: string }) {
     allowedSlippage,
     recipient,
     signatureData,
-    allowance.state === AllowanceState.ALLOWED ? allowance.permitSignature : undefined
+    permit
   )
 
   const handleSwap = useCallback(() => {
@@ -785,20 +790,22 @@ export default function Swap({ className }: { className?: string }) {
                       </ButtonError>
                     </AutoColumn>
                   </AutoRow>
-                ) : isValid && allowance.state === AllowanceState.REQUIRED ? (
+                ) : isValid &&
+                  (permit.state === PermitState.APPROVAL_OR_PERMIT_NEEDED ||
+                    permit.state === PermitState.APPROVAL_LOADING) ? (
                   <ButtonYellow
-                    onClick={updateAllowance}
-                    disabled={isAllowancePending || isApprovalLoading}
+                    onClick={updatePermit}
+                    disabled={isPermitPending || isApprovalLoading}
                     style={{ gap: 14 }}
                   >
-                    {isAllowancePending ? (
+                    {isPermitPending ? (
                       <>
                         <Loader size="20px" stroke={theme.accentWarning} />
                         <ThemedText.SubHeader color="accentWarning">
                           <Trans>Approve in your wallet</Trans>
                         </ThemedText.SubHeader>
                       </>
-                    ) : isAllowanceFailed ? (
+                    ) : isPermitFailed ? (
                       <>
                         <AlertTriangle size={20} stroke={theme.accentWarning} />
                         <ThemedText.SubHeader color="accentWarning">
@@ -853,7 +860,7 @@ export default function Swap({ className }: { className?: string }) {
                       routeIsSyncing ||
                       routeIsLoading ||
                       priceImpactTooHigh ||
-                      (permit2Enabled ? allowance.state !== AllowanceState.ALLOWED : Boolean(swapCallbackError))
+                      (permit2Enabled ? permit.state === PermitState.LOADING : Boolean(swapCallbackError))
                     }
                     error={isValid && priceImpactSeverity > 2 && (permit2Enabled || !swapCallbackError)}
                   >