feat(swap): partial approve

apps/cowswap-frontend/src/common/containers/OrderHooksDetails/index.tsx

@@ -3,6 +3,8 @@ import { ReactElement, useEffect, useMemo, useState } from 'react'
 import { latest } from '@cowprotocol/app-data'
 import { CowHookDetails, HookToDappMatch, matchHooksToDappsRegistry } from '@cowprotocol/hook-dapp-lib'
 import { InfoTooltip } from '@cowprotocol/ui'
+import { useWalletInfo } from '@cowprotocol/wallet'
+import { Currency, CurrencyAmount } from '@uniswap/sdk-core'
 
 import { ChevronDown, ChevronUp } from 'react-feather'
 
@@ -14,15 +16,27 @@ import { HookItem } from './HookItem'
 import * as styledEl from './styled'
 import { CircleCount } from './styled'
 
+import { parsePermitData } from '../../utils/parsePermitData'
+
 interface OrderHooksDetailsProps {
   appData: string | AppDataInfo
   children: (content: ReactElement) => ReactElement
   margin?: string
   isTradeConfirmation?: boolean
+  slippageAdjustedSellAmount?: CurrencyAmount<Currency>
+  isPartialApprove?: boolean
 }
 
-export function OrderHooksDetails({ appData, children, margin, isTradeConfirmation }: OrderHooksDetailsProps) {
+export function OrderHooksDetails({
+  appData,
+  children,
+  margin,
+  isTradeConfirmation,
+  slippageAdjustedSellAmount,
+  isPartialApprove,
+}: OrderHooksDetailsProps) {
   const [isOpen, setOpen] = useState(false)
+  const { account } = useWalletInfo()
   const appDataDoc = useMemo(() => {
     return typeof appData === 'string' ? decodeAppData(appData) : appData.doc
   }, [appData])
@@ -41,9 +55,32 @@ export function OrderHooksDetails({ appData, children, margin, isTradeConfirmati
 
   const metadata = appDataDoc.metadata as latest.Metadata
 
+  /**
+   * AppData might include a hook with account agnostic permit which is used to fetch a quote.
+   * This hook should be ignored.
+   * Moreover, any hook with a permit which has owner !== current account will be excluded.
+   * We also remove the permit from appData before order signing (see filterPermitSignerPermit).
+   */
+  const preHooks = account
+    ? metadata.hooks?.pre?.filter((hook) => {
+        try {
+          const permitHookData = parsePermitData(hook.callData)
+          const isOwnerMatched = permitHookData.owner.toLowerCase() === account.toLowerCase()
+
+          // If the hook is a partial approve, we need to check if the value is equal to the slippageAdjustedSellAmount
+          // Because there might be a hook with an "infinite" permit from other widget
+          return isPartialApprove && slippageAdjustedSellAmount
+            ? isOwnerMatched && permitHookData.value.eq(slippageAdjustedSellAmount.quotient.toString())
+            : isOwnerMatched
+        } catch {
+          return true
+        }
+      })
+    : metadata.hooks?.pre
+
   const hasSomeFailedSimulation = isTradeConfirmation && Object.values(data || {}).some((hook) => !hook.status)
 
-  const preHooksToDapp = matchHooksToDappsRegistry(metadata.hooks?.pre || [], preCustomHookDapps)
+  const preHooksToDapp = matchHooksToDappsRegistry(preHooks || [], preCustomHookDapps)
   const postHooksToDapp = matchHooksToDappsRegistry(metadata.hooks?.post || [], postCustomHookDapps)
 
   if (!preHooksToDapp.length && !postHooksToDapp.length) return null

apps/cowswap-frontend/src/common/containers/TradeApprove/TradeApproveButton.tsx

@@ -14,15 +14,16 @@ export interface TradeApproveButtonProps {
   amountToApprove: CurrencyAmount<Currency>
   children?: React.ReactNode
   isDisabled?: boolean
+  isPartialApprove?: boolean
 }
 
 export function TradeApproveButton(props: TradeApproveButtonProps) {
-  const { amountToApprove, children, isDisabled } = props
+  const { amountToApprove, children, isDisabled, isPartialApprove } = props
 
   const currency = amountToApprove.currency
 
   const { state: approvalState } = useApproveState(amountToApprove)
-  const tradeApproveCallback = useTradeApproveCallback(amountToApprove)
+  const tradeApproveCallback = useTradeApproveCallback(amountToApprove, isPartialApprove)
   const shouldZeroApprove = useShouldZeroApprove(amountToApprove)
   const zeroApprove = useZeroApprove(amountToApprove.currency)
 

apps/cowswap-frontend/src/common/containers/TradeApprove/useTradeApproveCallback.ts

@@ -19,13 +19,16 @@ export interface TradeApproveCallback {
   (params?: TradeApproveCallbackParams): Promise<TransactionResponse | undefined>
 }
 
-export function useTradeApproveCallback(amountToApprove?: CurrencyAmount<Currency>): TradeApproveCallback {
+export function useTradeApproveCallback(
+  amountToApprove?: CurrencyAmount<Currency>,
+  isPartialApprove?: boolean,
+): TradeApproveCallback {
   const updateTradeApproveState = useUpdateTradeApproveState()
   const spender = useTradeSpenderAddress()
   const currency = amountToApprove?.currency
   const symbol = currency?.symbol
 
-  const approveCallback = useApproveCallback(amountToApprove, spender)
+  const approveCallback = useApproveCallback(amountToApprove, spender, isPartialApprove)
 
   return useCallback(
     async ({ useModals = true }: TradeApproveCallbackParams = { useModals: true }) => {
@@ -58,6 +61,6 @@ export function useTradeApproveCallback(amountToApprove?: CurrencyAmount<Currenc
           return undefined
         })
     },
-    [symbol, approveCallback, updateTradeApproveState, currency]
+    [symbol, approveCallback, updateTradeApproveState, currency],
   )
 }

apps/cowswap-frontend/src/common/hooks/useApproveCallback.ts

@@ -18,14 +18,18 @@ export async function estimateApprove(
   tokenContract: Erc20,
   spender: string,
   amountToApprove: CurrencyAmount<Currency>,
+  isPartialApprove?: boolean,
 ): Promise<{
   approveAmount: BigNumber | string
   gasLimit: BigNumber
 }> {
+  const approveAmount =
+    isPartialApprove && amountToApprove ? BigNumber.from(amountToApprove.quotient.toString()) : MaxUint256
+
   try {
     return {
-      approveAmount: MaxUint256,
-      gasLimit: await tokenContract.estimateGas.approve(spender, MaxUint256),
+      approveAmount,
+      gasLimit: await tokenContract.estimateGas.approve(spender, approveAmount),
     }
   } catch {
     // Fallback: Attempt to set an approval for the maximum wallet balance (instead of the MaxUint256).
@@ -45,7 +49,7 @@ export async function estimateApprove(
       )
 
       return {
-        approveAmount: MaxUint256,
+        approveAmount,
         gasLimit: GAS_LIMIT_DEFAULT,
       }
     }
@@ -55,6 +59,7 @@ export async function estimateApprove(
 export function useApproveCallback(
   amountToApprove?: CurrencyAmount<Currency>,
   spender?: string,
+  isPartialApprove?: boolean,
 ): (summary?: string) => Promise<TransactionResponse | undefined> {
   const { chainId } = useWalletInfo()
   const currency = amountToApprove?.currency
@@ -68,7 +73,7 @@ export function useApproveCallback(
       return
     }
 
-    const estimation = await estimateApprove(tokenContract, spender, amountToApprove)
+    const estimation = await estimateApprove(tokenContract, spender, amountToApprove, isPartialApprove)
     return tokenContract
       .approve(spender, estimation.approveAmount, {
         gasLimit: calculateGasMargin(estimation.gasLimit),
@@ -81,5 +86,5 @@ export function useApproveCallback(
         })
         return response
       })
-  }, [chainId, token, tokenContract, amountToApprove, spender, addTransaction])
+  }, [chainId, token, tokenContract, amountToApprove, spender, addTransaction, isPartialApprove])
 }

apps/cowswap-frontend/src/common/pure/ApproveButton/index.tsx

@@ -50,7 +50,6 @@ export function ApproveButton(props: ApproveButtonProps) {
             content={
               <Trans>
                 You must give the CoW Protocol smart contracts permission to use your <TokenSymbol token={currency} />.
-                If you approve the default amount, you will only have to do this once per token.
               </Trans>
             }
           >

apps/cowswap-frontend/src/common/utils/parsePermitData.ts

@@ -0,0 +1,15 @@
+import { Erc20__factory } from '@cowprotocol/abis'
+import type { BigNumber } from '@ethersproject/bignumber'
+
+const erc20Interface = Erc20__factory.createInterface()
+
+export interface PermitParameters {
+  owner: string
+  spender: string
+  value: BigNumber
+  deadline: BigNumber
+}
+
+export function parsePermitData(callData: string): PermitParameters {
+  return erc20Interface.decodeFunctionData('permit', callData) as unknown as PermitParameters
+}

apps/cowswap-frontend/src/legacy/state/user/hooks.tsx

@@ -8,8 +8,11 @@ import { Currency } from '@uniswap/sdk-core'
 
 import { shallowEqual } from 'react-redux'
 
+import { useIsHooksTradeType } from 'modules/trade/hooks/useIsHooksTradeType'
+
 import {
   updateHooksEnabled,
+  updatePartialApprove,
   updateRecipientToggleVisible,
   updateUserDarkMode,
   updateUserDeadline,
@@ -118,6 +121,22 @@ export function useUserTransactionTTL(): [number, (slippage: number) => void] {
   return [deadline, setUserDeadline]
 }
 
+export function usePartialApprove(): [boolean, (value: boolean) => void] {
+  const dispatch = useAppDispatch()
+  const isHookTradeType = useIsHooksTradeType()
+  const partialApprove = useAppSelector((state) => state.user.partialApprove)
+
+  const setPartialApprove = useCallback(
+    (partialApprove: boolean) => {
+      dispatch(updatePartialApprove({ partialApprove }))
+    },
+    [dispatch],
+  )
+
+  // Partial approve is disabled for Hooks store
+  return [isHookTradeType ? false : partialApprove, setPartialApprove]
+}
+
 export function useSelectedWallet(): string | undefined {
   return useAppSelector(({ user: { selectedWallet } }) => selectedWallet)
 }

apps/cowswap-frontend/src/legacy/state/user/reducer.ts

@@ -18,6 +18,7 @@ export interface UserState {
   // TODO: mod, shouldn't be here
   recipientToggleVisible: boolean
   hooksEnabled: boolean
+  partialApprove: boolean
 
   // deadline set by user in minutes, used in all txns
   userDeadline: number
@@ -27,9 +28,9 @@ export const initialState: UserState = {
   selectedWallet: undefined,
   matchesDarkMode: false,
   userDarkMode: null,
-  // TODO: mod, shouldn't be here
   recipientToggleVisible: false,
   hooksEnabled: false,
+  partialApprove: false,
   userLocale: null,
   userDeadline: DEFAULT_DEADLINE_FROM_NOW,
 }
@@ -56,6 +57,9 @@ const userSlice = createSlice({
     updateUserDeadline(state, action) {
       state.userDeadline = action.payload.userDeadline
     },
+    updatePartialApprove(state, action) {
+      state.partialApprove = action.payload.partialApprove
+    },
     updateRecipientToggleVisible(state, action) {
       state.recipientToggleVisible = action.payload.recipientToggleVisible
     },
@@ -70,5 +74,6 @@ export const {
   updateUserDeadline,
   updateUserLocale,
   updateRecipientToggleVisible,
+  updatePartialApprove,
 } = userSlice.actions
 export default userSlice.reducer

apps/cowswap-frontend/src/lib/hooks/useApproval.ts

@@ -1,17 +1,14 @@
-import { useCallback, useMemo } from 'react'
+import { useMemo } from 'react'
 
-import { calculateGasMargin, getIsNativeToken } from '@cowprotocol/common-utils'
+import { getIsNativeToken } from '@cowprotocol/common-utils'
 import { useWalletInfo } from '@cowprotocol/wallet'
-import { MaxUint256 } from '@ethersproject/constants'
-import { TransactionResponse } from '@ethersproject/providers'
 import { Currency, CurrencyAmount, Token } from '@uniswap/sdk-core'
 
 import { Nullish } from 'types'
 
 import { useTokenAllowance } from 'legacy/hooks/useTokenAllowance'
 
 import { ApprovalState } from 'common/hooks/useApproveState'
-import { useTokenContract } from 'common/hooks/useContract'
 
 export interface ApprovalStateForSpenderResult {
   approvalState: ApprovalState
@@ -22,7 +19,7 @@ function toApprovalState(
   amountToApprove: Nullish<CurrencyAmount<Currency>>,
   spender: string | undefined,
   currentAllowance?: CurrencyAmount<Token>,
-  pendingApproval?: boolean
+  pendingApproval?: boolean,
 ): ApprovalState {
   // Unknown amount or spender
   if (!amountToApprove || !spender) {
@@ -50,7 +47,7 @@ function toApprovalState(
 export function useApprovalStateForSpender(
   amountToApprove: Nullish<CurrencyAmount<Currency>>,
   spender: string | undefined,
-  useIsPendingApproval: (token?: Token, spender?: string) => boolean
+  useIsPendingApproval: (token?: Token, spender?: string) => boolean,
 ): ApprovalStateForSpenderResult {
   const { account } = useWalletInfo()
   const currency = amountToApprove?.currency
@@ -64,66 +61,3 @@ export function useApprovalStateForSpender(
     return { approvalState, currentAllowance }
   }, [amountToApprove, currentAllowance, pendingApproval, spender])
 }
-
-export function useApproval(
-  amountToApprove: CurrencyAmount<Currency> | undefined,
-  spender: string | undefined,
-  useIsPendingApproval: (token?: Token, spender?: string) => boolean
-): [
-  ApprovalState,
-  () => Promise<{ response: TransactionResponse; tokenAddress: string; spenderAddress: string } | undefined>
-] {
-  const { chainId } = useWalletInfo()
-  const currency = amountToApprove?.currency
-  const token = currency && !getIsNativeToken(currency) ? currency : undefined
-
-  // check the current approval status
-  const approvalState = useApprovalStateForSpender(amountToApprove, spender, useIsPendingApproval).approvalState
-
-  const tokenContract = useTokenContract(token?.address)
-
-  const approve = useCallback(async () => {
-    function logFailure(error: Error | string): undefined {
-      console.warn(`${token?.symbol || 'Token'} approval failed:`, error)
-      return
-    }
-
-    // Bail early if there is an issue.
-    if (approvalState !== ApprovalState.NOT_APPROVED) {
-      return logFailure('approve was called unnecessarily')
-    } else if (!chainId) {
-      return logFailure('no chainId')
-    } else if (!token) {
-      return logFailure('no token')
-    } else if (!tokenContract) {
-      return logFailure('tokenContract is null')
-    } else if (!amountToApprove) {
-      return logFailure('missing amount to approve')
-    } else if (!spender) {
-      return logFailure('no spender')
-    }
-
-    let useExact = false
-    const estimatedGas = await tokenContract.estimateGas.approve(spender, MaxUint256).catch(() => {
-      // general fallback for tokens which restrict approval amounts
-      useExact = true
-      return tokenContract.estimateGas.approve(spender, amountToApprove.quotient.toString())
-    })
-
-    return tokenContract
-      .approve(spender, useExact ? amountToApprove.quotient.toString() : MaxUint256, {
-        gasLimit: calculateGasMargin(estimatedGas),
-      })
-      .then((response) => ({
-        response,
-        tokenAddress: token.address,
-        spenderAddress: spender,
-      }))
-      .catch((error: Error) => {
-        logFailure(error)
-        throw error
-      })
-  }, [approvalState, token, tokenContract, amountToApprove, spender, chainId])
-
-  return [approvalState, approve]
-}

apps/cowswap-frontend/src/modules/operations/bundle/buildApproveTx.ts

@@ -7,15 +7,16 @@ export type BuildApproveTxParams = {
   erc20Contract: Erc20
   spender: string
   amountToApprove: CurrencyAmount<Currency>
+  isPartialApprove?: boolean
 }
 
 /**
  * Builds the approval tx, without sending it
  */
 export async function buildApproveTx(params: BuildApproveTxParams) {
-  const { erc20Contract, spender, amountToApprove } = params
+  const { erc20Contract, spender, amountToApprove, isPartialApprove } = params
 
-  const estimatedAmount = await estimateApprove(erc20Contract, spender, amountToApprove)
+  const estimatedAmount = await estimateApprove(erc20Contract, spender, amountToApprove, isPartialApprove)
 
   return erc20Contract.populateTransaction.approve(spender, estimatedAmount.approveAmount)
 }