fix: gate approval entrypoints

fairlighteth · fairlighteth · commit 593ad71413dc · 2026-07-10T11:19:02.000+01:00
diff --git a/apps/cowswap-frontend/src/modules/erc20Approve/utils/index.ts b/apps/cowswap-frontend/src/modules/erc20Approve/utils/index.ts
@@ -1,2 +1,3 @@
 export { getApprovalState } from './getApprovalState'
+export { getIsTradeApproveResult } from './getIsTradeApproveResult'
 export * from './isMaxAmountToApprove'
diff --git a/apps/cowswap-frontend/src/modules/ethFlow/containers/EthFlow/hooks/useEthFlowActions.ts b/apps/cowswap-frontend/src/modules/ethFlow/containers/EthFlow/hooks/useEthFlowActions.ts
@@ -8,15 +8,15 @@ import { useWalletInfo } from '@cowprotocol/wallet'
 import { WrapUnwrapCallback } from 'legacy/hooks/useWrapCallback'
 import { Field } from 'legacy/state/types'
 
-import { MAX_APPROVE_AMOUNT, TradeApproveCallback } from 'modules/erc20Approve'
+import { ApproveCurrencyCallback, getIsTradeApproveResult, MAX_APPROVE_AMOUNT } from 'modules/erc20Approve'
 import { useIsInfiniteApproveDisabledInWidget } from 'modules/injectedWidget'
-import { useSwapPartialApprovalToggleState } from 'modules/swap/hooks/useSwapSettings'
+import { useSwapPartialApprovalToggleState } from 'modules/swap'
 import { useOnCurrencySelection, useTradeConfirmActions } from 'modules/trade'
 
 import { updateEthFlowContextAtom } from '../../../state/ethFlowContextAtom'
 
 export interface EthFlowActionCallbacks {
-  approve: TradeApproveCallback
+  approve: ApproveCurrencyCallback
   wrap: WrapUnwrapCallback | null
   directSwap: Command
   dismiss: Command
@@ -77,10 +77,15 @@ export function useEthFlowActions(callbacks: EthFlowActionCallbacks, amountToApp
 
       return sendTransaction('approve', () => {
         return callbacks.approve(unitsToApprove).then((res): string | undefined => {
-          const tx = res?.txResponse
-          return (tx && 'transactionHash' in tx ? tx.transactionHash : (tx as { hash?: string })?.hash) as
-            | string
-            | undefined
+          if (!res) return undefined
+
+          if (getIsTradeApproveResult(res)) {
+            const tx = res.txResponse
+
+            return 'transactionHash' in tx ? tx.transactionHash : tx.hash
+          }
+
+          return res.transactionHash || undefined
         })
       })
     }
diff --git a/apps/cowswap-frontend/src/modules/ethFlow/containers/EthFlow/index.tsx b/apps/cowswap-frontend/src/modules/ethFlow/containers/EthFlow/index.tsx
@@ -11,10 +11,10 @@ import { useSingleActivityDescriptor } from 'legacy/hooks/useRecentActivity'
 import { WrapUnwrapCallback } from 'legacy/hooks/useWrapCallback'
 
 import {
+  useApproveCurrency,
   useApproveState,
   useIsPartialApproveSelectedByUser,
   usePartialApproveAmountModalState,
-  useTradeApproveCallback,
   useUpdatePartialApproveAmountModalState,
 } from 'modules/erc20Approve'
 import { useWrappedToken } from 'modules/trade'
@@ -25,6 +25,7 @@ import { useEthFlowActions } from './hooks/useEthFlowActions'
 import useRemainingNativeTxsAndCosts from './hooks/useRemainingNativeTxsAndCosts'
 import { useSetupEthFlow } from './hooks/useSetupEthFlow'
 import { getDerivedEthFlowState } from './utils/getDerivedEthFlowState'
+import { getEthFlowCurrencyToApprove } from './utils/getEthFlowCurrencyToApprove'
 
 import { EthFlowModalContent } from '../../pure/EthFlowModalContent'
 import { WrappingPreviewProps } from '../../pure/WrappingPreview'
@@ -61,9 +62,13 @@ export function EthFlowModal({
   const { amountSetByUser } = usePartialApproveAmountModalState() || {}
   const updatePartialApproveAmountModalState = useUpdatePartialApproveAmountModalState()
   const isPartialApproveSelectedByUser = useIsPartialApproveSelectedByUser()
-  const currencyToApprove = isPartialApproveSelectedByUser ? (amountSetByUser ?? wrappedAmount) : undefined
+  const currencyToApprove = getEthFlowCurrencyToApprove({
+    amountSetByUser,
+    isPartialApproveSelectedByUser,
+    wrappedAmount,
+  })
 
-  const approveCallback = useTradeApproveCallback(wrapped)
+  const approveCallback = useApproveCurrency(wrappedAmount ?? undefined, true)
 
   const ethFlowActions = useEthFlowActions(
     {
diff --git a/apps/cowswap-frontend/src/modules/ethFlow/containers/EthFlow/utils/getEthFlowCurrencyToApprove.test.ts b/apps/cowswap-frontend/src/modules/ethFlow/containers/EthFlow/utils/getEthFlowCurrencyToApprove.test.ts
@@ -0,0 +1,52 @@
+import { CurrencyAmount, Token } from '@cowprotocol/currency'
+
+import { getEthFlowCurrencyToApprove } from './getEthFlowCurrencyToApprove'
+
+describe('getEthFlowCurrencyToApprove', () => {
+  const wrappedNative = new Token(1, '0x1111111111111111111111111111111111111111', 18, 'WETH', 'Wrapped Ether')
+  const otherToken = new Token(1, '0x2222222222222222222222222222222222222222', 18, 'TEST', 'Test Token')
+
+  const wrappedAmount = CurrencyAmount.fromRawAmount(wrappedNative, '100')
+  const sameCurrencyAmountSetByUser = CurrencyAmount.fromRawAmount(wrappedNative, '25')
+  const staleAmountSetByUser = CurrencyAmount.fromRawAmount(otherToken, '25')
+
+  it('returns undefined when partial approval is not selected', () => {
+    expect(
+      getEthFlowCurrencyToApprove({
+        amountSetByUser: sameCurrencyAmountSetByUser,
+        isPartialApproveSelectedByUser: false,
+        wrappedAmount,
+      }),
+    ).toBeUndefined()
+  })
+
+  it('uses the current wrapped amount when the user has not set a custom amount', () => {
+    expect(
+      getEthFlowCurrencyToApprove({
+        amountSetByUser: undefined,
+        isPartialApproveSelectedByUser: true,
+        wrappedAmount,
+      }),
+    ).toBe(wrappedAmount)
+  })
+
+  it('uses the user amount when it belongs to the current wrapped token', () => {
+    expect(
+      getEthFlowCurrencyToApprove({
+        amountSetByUser: sameCurrencyAmountSetByUser,
+        isPartialApproveSelectedByUser: true,
+        wrappedAmount,
+      }),
+    ).toBe(sameCurrencyAmountSetByUser)
+  })
+
+  it('ignores a stale user amount from a different token', () => {
+    expect(
+      getEthFlowCurrencyToApprove({
+        amountSetByUser: staleAmountSetByUser,
+        isPartialApproveSelectedByUser: true,
+        wrappedAmount,
+      }),
+    ).toBe(wrappedAmount)
+  })
+})
diff --git a/apps/cowswap-frontend/src/modules/ethFlow/containers/EthFlow/utils/getEthFlowCurrencyToApprove.ts b/apps/cowswap-frontend/src/modules/ethFlow/containers/EthFlow/utils/getEthFlowCurrencyToApprove.ts
@@ -0,0 +1,19 @@
+import { Currency, CurrencyAmount } from '@cowprotocol/currency'
+
+interface GetEthFlowCurrencyToApproveParams {
+  amountSetByUser: CurrencyAmount<Currency> | undefined
+  isPartialApproveSelectedByUser: boolean
+  wrappedAmount: CurrencyAmount<Currency> | null
+}
+
+export function getEthFlowCurrencyToApprove({
+  amountSetByUser,
+  isPartialApproveSelectedByUser,
+  wrappedAmount,
+}: GetEthFlowCurrencyToApproveParams): CurrencyAmount<Currency> | undefined {
+  if (!isPartialApproveSelectedByUser) return undefined
+  if (!wrappedAmount) return undefined
+  if (!amountSetByUser) return wrappedAmount
+
+  return amountSetByUser.currency.equals(wrappedAmount.currency) ? amountSetByUser : wrappedAmount
+}
diff --git a/apps/cowswap-frontend/src/modules/limitOrders/services/safeBundleFlow/index.ts b/apps/cowswap-frontend/src/modules/limitOrders/services/safeBundleFlow/index.ts
@@ -13,6 +13,7 @@ import { partialOrderUpdate } from 'legacy/state/orders/utils'
 import { mapUnsignedOrderToOrder, wrapErrorInOperatorError } from 'legacy/utils/trade'
 
 import { removePermitHookFromAppData } from 'modules/appData'
+import { callOnBeforeApprovalWidgetHook } from 'modules/injectedWidget'
 import { LOW_RATE_THRESHOLD_PERCENT } from 'modules/limitOrders/const/trade'
 import { PriceImpactDeclineError, SafeBundleFlowContext } from 'modules/limitOrders/services/types'
 import { LimitOrdersSettingsState } from 'modules/limitOrders/state/limitOrdersSettingsAtom'
@@ -47,7 +48,7 @@ export async function safeBundleFlow({
   analytics: TradeFlowAnalytics
   beforeTrade?: Command
   config: Config
-}): Promise<string> {
+}): Promise<string | undefined> {
   logTradeFlow(LOG_PREFIX, 'STEP 1: confirm price impact')
   const isTooLowRate = params.rateImpact < LOW_RATE_THRESHOLD_PERCENT
 
@@ -68,15 +69,26 @@ export async function safeBundleFlow({
     orderType: UiOrderType.LIMIT,
   }
 
-  logTradeFlow(LOG_PREFIX, 'STEP 2: send transaction')
-  analytics.approveAndPresign(swapFlowAnalyticsContext)
-  beforeTrade?.()
-
   const { chainId, postOrderParams, spender, dispatch, sendBatchTransactions } = params
 
   const validTo = calculateLimitOrdersDeadline(settingsState, params.quoteState)
 
   try {
+    const isWidgetHookPassed = await callOnBeforeApprovalWidgetHook({
+      account,
+      amountToApprove: inputAmount,
+      spenderAddress: spender,
+      approvalAmount: maxUint256,
+    })
+
+    if (!isWidgetHookPassed) {
+      return undefined
+    }
+
+    logTradeFlow(LOG_PREFIX, 'STEP 2: send transaction')
+    analytics.approveAndPresign(swapFlowAnalyticsContext)
+    beforeTrade?.()
+
     // For now, bundling ALWAYS includes 2 steps: approve and presign.
     // In the feature users will be able to sort/add steps as they see fit
     logTradeFlow(LOG_PREFIX, 'STEP 2: build approval tx')
diff --git a/apps/cowswap-frontend/src/modules/swap/index.ts b/apps/cowswap-frontend/src/modules/swap/index.ts
@@ -4,6 +4,7 @@ export { useSwapRawState } from './hooks/useSwapRawState'
 export { useSwapFlowContext } from './hooks/useSwapFlowContext'
 export { useUpdateSwapRawState } from './hooks/useUpdateSwapRawState'
 export { useSwapDerivedStateToFill } from './hooks/useSwapDerivedState'
+export { useSwapPartialApprovalToggleState } from './hooks/useSwapSettings'
 export { SwapUpdaters } from './updaters'
 export { swapDerivedStateAtom } from './state/swapRawStateAtom'
 export { DeprecatedNetworkBanner } from './containers/DeprecatedNetworkBanner/DeprecatedNetworkBanner.container'
diff --git a/apps/cowswap-frontend/src/modules/tradeFlow/hooks/useSafeBundleFlowContext.ts b/apps/cowswap-frontend/src/modules/tradeFlow/hooks/useSafeBundleFlowContext.ts
@@ -22,7 +22,7 @@ export function useSafeBundleFlowContext(): SafeBundleFlowContext | null {
   // todo check for safe wallet
   const { maximumSendSellAmount } = useAmountsToSignFromQuote() || {}
 
-  const needsApproval = useNeedsApproval(maximumSendSellAmount)
+  const needsApproval = useNeedsApproval(maximumSendSellAmount, spender)
   const tokenAddress = useMemo(() => {
     return maximumSendSellAmount ? getCurrencyAddress(maximumSendSellAmount.currency) : undefined
   }, [maximumSendSellAmount])
diff --git a/apps/cowswap-frontend/src/modules/tradeFlow/services/safeBundleFlow/safeBundleApprovalFlow.ts b/apps/cowswap-frontend/src/modules/tradeFlow/services/safeBundleFlow/safeBundleApprovalFlow.ts
@@ -12,6 +12,7 @@ import { partialOrderUpdate } from 'legacy/state/orders/utils'
 import { mapUnsignedOrderToOrder, wrapErrorInOperatorError } from 'legacy/utils/trade'
 
 import { removePermitHookFromAppData } from 'modules/appData'
+import { callOnBeforeApprovalWidgetHook } from 'modules/injectedWidget'
 import { buildApproveTx } from 'modules/operations/bundle/buildApproveTx'
 import { buildZeroApproveTx } from 'modules/operations/bundle/buildZeroApproveTx'
 import { emitPostedOrderEvent } from 'modules/orders'
@@ -68,10 +69,20 @@ export async function safeBundleApprovalFlow({
   const tradeAmounts = { inputAmount, outputAmount }
   const isBridgingOrder = inputAmount.currency.chainId !== outputAmount.currency.chainId
 
-  analytics.approveAndPresign(swapFlowAnalyticsContext)
-  tradeConfirmActions.onSign(tradeAmounts)
-
   try {
+    const isWidgetHookPassed = await callOnBeforeApprovalWidgetHook({
+      account,
+      amountToApprove,
+      spenderAddress: spender,
+    })
+
+    if (!isWidgetHookPassed) {
+      return false
+    }
+
+    analytics.approveAndPresign(swapFlowAnalyticsContext)
+    tradeConfirmActions.onSign(tradeAmounts)
+
     // For now, bundling ALWAYS includes 2 steps: approve and presign.
     // In the feature users will be able to sort/add steps as they see fit
     logTradeFlow(LOG_PREFIX, 'STEP 2: build approval tx')
diff --git a/apps/cowswap-frontend/src/modules/tradeFlow/services/safeBundleFlow/safeBundleEthFlow.ts b/apps/cowswap-frontend/src/modules/tradeFlow/services/safeBundleFlow/safeBundleEthFlow.ts
@@ -12,6 +12,7 @@ import { partialOrderUpdate } from 'legacy/state/orders/utils'
 import { mapUnsignedOrderToOrder, type PostOrderParams, wrapErrorInOperatorError } from 'legacy/utils/trade'
 
 import { removePermitHookFromAppData } from 'modules/appData'
+import { callOnBeforeApprovalWidgetHook } from 'modules/injectedWidget'
 import { buildApproveTx } from 'modules/operations/bundle/buildApproveTx'
 import { buildWrapTx } from 'modules/operations/bundle/buildWrapTx'
 import { emitPostedOrderEvent } from 'modules/orders'
@@ -27,7 +28,7 @@ import { SafeBundleFlowContext, TradeFlowContext } from '../../types/TradeFlowCo
 const LOG_PREFIX = 'SAFE BUNDLE ETH FLOW'
 
 // TODO: Break down this large function into smaller functions
-// eslint-disable-next-line max-lines-per-function
+// eslint-disable-next-line complexity, max-lines-per-function
 export async function safeBundleEthFlow(
   tradeContext: TradeFlowContext,
   safeBundleContext: SafeBundleFlowContext,
@@ -70,12 +71,9 @@ export async function safeBundleEthFlow(
   const { account, recipientAddressOrName, kind } = orderParams
   const isBridgingOrder = inputAmount.currency.chainId !== outputAmount.currency.chainId
 
-  analytics.wrapApproveAndPresign(swapFlowAnalyticsContext)
   // Wrap the max sell amount (slippage-adjusted for buy orders); inputAmount alone underwraps buy orders and makes them unfillable.
   const nativeAmountInWei = maximumSendSellAmount.quotient.toString()
   const tradeAmounts = { inputAmount, outputAmount }
-
-  tradeConfirmActions.onSign(tradeAmounts)
   try {
     const txs: MetaTransactionData[] = []
 
@@ -92,6 +90,19 @@ export async function safeBundleEthFlow(
     logTradeFlow(LOG_PREFIX, 'STEP 3: [optional] build approval tx')
 
     if (needsApproval) {
+      const isWidgetHookPassed = await callOnBeforeApprovalWidgetHook({
+        account,
+        amountToApprove,
+        spenderAddress: spender,
+      })
+
+      if (!isWidgetHookPassed) {
+        return false
+      }
+
+      analytics.wrapApproveAndPresign(swapFlowAnalyticsContext)
+      tradeConfirmActions.onSign(tradeAmounts)
+
       const approveTx = await buildApproveTx({
         tokenAddress: wrappedNativeContract.address,
         spender,
@@ -106,6 +117,11 @@ export async function safeBundleEthFlow(
       })
     }
 
+    if (!needsApproval) {
+      analytics.wrapApproveAndPresign(swapFlowAnalyticsContext)
+      tradeConfirmActions.onSign(tradeAmounts)
+    }
+
     orderParams.appData = await removePermitHookFromAppData(orderParams.appData, typedHooks)
 
     logTradeFlow(LOG_PREFIX, 'STEP 4: post order')
diff --git a/apps/cowswap-frontend/src/modules/twap/hooks/useTwapOrderCreationContext.ts b/apps/cowswap-frontend/src/modules/twap/hooks/useTwapOrderCreationContext.ts
@@ -29,10 +29,10 @@ export function useTwapOrderCreationContext(
 ): TwapOrderCreationContext | null {
   const composableCowContract = useComposableCowContractData()
   const composableCowChainId = composableCowContract.chainId
-  const needsApproval = useNeedsApproval(inputAmount)
+  const spender = useTradeSpenderAddress()
+  const needsApproval = useNeedsApproval(inputAmount, spender)
   const erc20ContractData = useTokenContract(inputAmount?.currency.address)
   const erc20ChainId = erc20ContractData.chainId
-  const spender = useTradeSpenderAddress()
   const needsZeroApproval = useNeedsZeroApproval(inputAmount?.currency, spender, inputAmount)
   const currentBlockFactoryAddress =
     composableCowChainId != null ? CURRENT_BLOCK_FACTORY_ADDRESS[composableCowChainId as SupportedChainId] : null
@@ -43,6 +43,7 @@ export function useTwapOrderCreationContext(
       !erc20ContractData?.contract ||
       !spender ||
       !currentBlockFactoryAddress ||
+      needsZeroApproval === undefined ||
       composableCowChainId !== erc20ChainId
     )
       return null
diff --git a/apps/cowswap-frontend/src/modules/zeroApproval/hooks/useNeedsZeroApproval.ts b/apps/cowswap-frontend/src/modules/zeroApproval/hooks/useNeedsZeroApproval.ts
@@ -11,11 +11,15 @@ export function useNeedsZeroApproval(
   token: Nullish<Token>,
   spender: Nullish<string>,
   sellAmount: Nullish<CurrencyAmount<Token>>,
-): boolean {
+): boolean | undefined {
   const config = useConfig()
-  const [shouldZeroApprove, setShouldZeroApprove] = useState(false)
+  const [shouldZeroApprove, setShouldZeroApprove] = useState<boolean | undefined>(undefined)
 
   useEffect(() => {
+    let isStale = false
+
+    setShouldZeroApprove(undefined)
+
     if (!token?.address || !spender || !sellAmount || !config) return
 
     shouldZeroApproveFn({
@@ -25,8 +29,14 @@ export function useNeedsZeroApproval(
       forceApprove: true,
       config,
     }).then((res) => {
+      if (isStale) return
+
       setShouldZeroApprove(!!res)
     })
+
+    return () => {
+      isStale = true
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [token?.address, sellAmount?.quotient?.toString(), spender, config])
 

Original file line number	Diff line number	Diff line change
`@@ -1,2 +1,3 @@`
`1`	`1`	`export { getApprovalState } from './getApprovalState'`
	`2`	`+export { getIsTradeApproveResult } from './getIsTradeApproveResult'`
`2`	`3`	`export * from './isMaxAmountToApprove'`