feat(yield): support safe bundle swaps

apps/cowswap-frontend/src/modules/appData/updater/AppDataInfoUpdater.ts

@@ -88,6 +88,7 @@ export function AppDataInfoUpdater({
     typedHooks,
     volumeFee,
     replacedOrderUid,
+    isSmartSlippage,
   ])
 }
 

apps/cowswap-frontend/src/modules/hooksStore/containers/HookDappContainer/index.tsx

@@ -78,6 +78,7 @@ export function HookDappContainer({ dapp, isPreHook, onDismiss, hookToEdit }: Ho
     inputCurrencyId,
     outputCurrencyId,
     isDarkMode,
+    orderParams,
   ])
 
   const dappProps = useMemo(() => ({ context, dapp, isPreHook }), [context, dapp, isPreHook])

apps/cowswap-frontend/src/modules/hooksStore/containers/RescueFundsFromProxy/useRescueFundsFromProxy.ts

@@ -96,7 +96,7 @@ export function useRescueFundsFromProxy(
     } finally {
       setTxSigningInProgress(false)
     }
-  }, [provider, proxyAddress, cowShedContract, selectedTokenAddress, account, tokenBalance])
+  }, [provider, proxyAddress, cowShedContract, selectedTokenAddress, account, tokenBalance, cowShedHooks])
 
   return { callback, isTxSigningInProgress, proxyAddress }
 }

apps/cowswap-frontend/src/modules/hooksStore/containers/TenderlySimulate/index.tsx

@@ -52,7 +52,7 @@ export function TenderlySimulate({ hook }: TenderlySimulateProps) {
     } finally {
       setIsLoading(false)
     }
-  }, [simulate, hook, hookId])
+  }, [simulate, hook, hookId, setSimulationError])
 
   if (isLoading) {
     return (

apps/cowswap-frontend/src/modules/hooksStore/dapps/BuildHookApp/index.tsx

@@ -74,7 +74,7 @@ export function BuildHookApp({ context }: HookDappProps) {
           hook,
         })
       : context.addHook({ hook })
-  }, [hook, context, hookToEdit, isPreHook])
+  }, [hook, context, hookToEdit])
 
   return (
     <Wrapper>

apps/cowswap-frontend/src/modules/hooksStore/dapps/ClaimGnoHookApp/index.tsx

@@ -38,7 +38,7 @@ export function ClaimGnoHookApp({ context }: HookDappProps) {
     }
 
     return SbcDepositContractInterface.encodeFunctionData('claimWithdrawal', [account])
-  }, [context])
+  }, [context, account])
 
   useEffect(() => {
     if (!account || !provider) {

apps/cowswap-frontend/src/modules/hooksStore/dapps/PermitHookApp/index.tsx

@@ -42,7 +42,7 @@ export function PermitHookApp({ context }: HookDappProps) {
     }
 
     context.addHook({ hook })
-  }, [generatePermitHook, context, permitInfo, token, spenderAddress])
+  }, [generatePermitHook, context, permitInfo, token, spenderAddress, hookToEdit])
 
   const buttonProps = useMemo(() => {
     if (!context.account) return { message: 'Connect wallet', disabled: true }

apps/cowswap-frontend/src/modules/hooksStore/hooks/useAddHook.ts

@@ -33,6 +33,6 @@ export function useAddHook(dapp: HookDapp, isPreHook: boolean): AddHook {
         }
       })
     },
-    [updateHooks, dapp],
+    [updateHooks, dapp, isPreHook],
   )
 }

apps/cowswap-frontend/src/modules/hooksStore/hooks/useRemoveHook.ts

@@ -25,6 +25,6 @@ export function useRemoveHook(isPreHook: boolean): RemoveHook {
         }
       })
     },
-    [updateHooks],
+    [updateHooks, isPreHook],
   )
 }

apps/cowswap-frontend/src/modules/hooksStore/hooks/useSetRecipientOverride.ts

@@ -19,5 +19,5 @@ export function useSetRecipientOverride() {
     if (!hookRecipientOverride || !isHooksTradeType) return
 
     onChangeRecipient(hookRecipientOverride)
-  }, [hookRecipientOverride, isHooksTradeType, isNativeIn])
+  }, [hookRecipientOverride, isHooksTradeType, isNativeIn, onChangeRecipient])
 }

apps/cowswap-frontend/src/modules/hooksStore/hooks/useSetupHooksStoreOrderParams.ts

@@ -2,25 +2,24 @@ import { useEffect } from 'react'
 
 import { getCurrencyAddress } from '@cowprotocol/common-utils'
 
-import { useUserTransactionTTL } from 'legacy/state/user/hooks'
-
-import { useTradeFlowContext } from 'modules/trade'
-
 import { useSetOrderParams } from './useSetOrderParams'
 
+import { useSwapFlowContext } from '../../swap/hooks/useSwapFlowContext'
+
 export function useSetupHooksStoreOrderParams() {
-  const [deadline] = useUserTransactionTTL()
-  const tradeFlowContext = useTradeFlowContext({ deadline })
+  const tradeFlowContext = useSwapFlowContext()
   const setOrderParams = useSetOrderParams()
   const orderParams = tradeFlowContext?.orderParams
 
   useEffect(() => {
-    if (!orderParams) return
-
-    setOrderParams({
-      validTo: orderParams.validTo,
-      sellTokenAddress: getCurrencyAddress(orderParams.inputAmount.currency),
-      buyTokenAddress: getCurrencyAddress(orderParams.outputAmount.currency),
-    })
-  }, [orderParams])
+    if (!orderParams) {
+      setOrderParams(null)
+    } else {
+      setOrderParams({
+        validTo: orderParams.validTo,
+        sellTokenAddress: getCurrencyAddress(orderParams.inputAmount.currency),
+        buyTokenAddress: getCurrencyAddress(orderParams.outputAmount.currency),
+      })
+    }
+  }, [orderParams, setOrderParams])
 }

apps/cowswap-frontend/src/modules/hooksStore/hooks/useTenderlySimulate.ts

@@ -20,7 +20,7 @@ export function useTenderlySimulate(): (params: CowHook) => Promise<TenderlySimu
 
       return response as TenderlySimulation | SimulationError
     },
-    [account, chainId],
+    [account, chainId, settlementContract],
   )
 }
 

apps/cowswap-frontend/src/modules/hooksStore/pure/AddCustomHookForm/CustomDappLoader/index.tsx

@@ -70,7 +70,7 @@ export function ExternalDappLoader({
     return () => {
       isRequestRelevant = false
     }
-  }, [input, chainId])
+  }, [input, isSmartContractWallet, chainId])
 
   return null
 }

apps/cowswap-frontend/src/modules/hooksStore/updaters/iframeDappsManifestUpdater.tsx

@@ -3,7 +3,6 @@ import { useAtomValue } from 'jotai/index'
 import { useCallback, useEffect, useMemo } from 'react'
 
 import { HookDappBase, HookDappType } from '@cowprotocol/hook-dapp-lib'
-import { useWalletInfo } from '@cowprotocol/wallet'
 
 import ms from 'ms.macro'
 
@@ -21,7 +20,6 @@ const getLastUpdateTimestamp = () => {
 export function IframeDappsManifestUpdater() {
   const hooksState = useAtomValue(customHookDappsAtom)
   const upsertCustomHookDapp = useSetAtom(upsertCustomHookDappAtom)
-  const { chainId } = useWalletInfo()
 
   const [preHooks, postHooks] = useMemo(
     () => [Object.values(hooksState.pre), Object.values(hooksState.post)],
@@ -55,7 +53,7 @@ export function IframeDappsManifestUpdater() {
           }
         })
     },
-    [chainId, upsertCustomHookDapp],
+    [upsertCustomHookDapp],
   )
 
   /**

apps/cowswap-frontend/src/modules/limitOrders/services/tradeFlow/index.ts

@@ -14,11 +14,11 @@ import { calculateLimitOrdersDeadline } from 'modules/limitOrders/utils/calculat
 import { emitPostedOrderEvent } from 'modules/orders'
 import { handlePermit } from 'modules/permit'
 import { callDataContainsPermitSigner } from 'modules/permit'
-import { presignOrderStep } from 'modules/swap/services/swapFlow/steps/presignOrderStep'
 import { addPendingOrderStep } from 'modules/trade/utils/addPendingOrderStep'
 import { logTradeFlow } from 'modules/trade/utils/logger'
 import { getSwapErrorMessage } from 'modules/trade/utils/swapErrorHelper'
 import { TradeFlowAnalyticsContext, tradeFlowAnalytics } from 'modules/trade/utils/tradeFlowAnalytics'
+import { presignOrderStep } from 'modules/tradeFlow/services/swapFlow/steps/presignOrderStep'
 
 export async function tradeFlow(
   params: TradeFlowContext,

apps/cowswap-frontend/src/modules/swap/containers/ConfirmSwapModalSetup/index.tsx

@@ -94,7 +94,7 @@ export function ConfirmSwapModalSetup(props: ConfirmSwapModalSetupProps) {
       networkCostsSuffix: shouldPayGas ? <NetworkCostsSuffix /> : null,
       networkCostsTooltipSuffix: <NetworkCostsTooltipSuffix />,
     }),
-    [chainId, allowedSlippage, nativeCurrency.symbol, isEoaEthFlow, isExactIn, shouldPayGas],
+    [chainId, allowedSlippage, nativeCurrency.symbol, isEoaEthFlow, isExactIn, shouldPayGas, isSmartSlippageApplied],
   )
 
   const submittedContent = useOrderSubmittedContent(chainId)

apps/cowswap-frontend/src/modules/swap/hooks/useHandleSwapOrEthFlow.ts

@@ -0,0 +1,42 @@
+import { useCallback } from 'react'
+
+import { useUserTransactionTTL } from 'legacy/state/user/hooks'
+
+import { useTradePriceImpact } from 'modules/trade'
+import { logTradeFlow } from 'modules/trade/utils/logger'
+import { useHandleSwap, useTradeFlowType } from 'modules/tradeFlow'
+import { FlowType } from 'modules/tradeFlow'
+
+import { useConfirmPriceImpactWithoutFee } from 'common/hooks/useConfirmPriceImpactWithoutFee'
+import { useSafeMemoObject } from 'common/hooks/useSafeMemo'
+
+import { useEthFlowContext } from './useEthFlowContext'
+import { useSwapFlowContext } from './useSwapFlowContext'
+
+import { ethFlow } from '../services/ethFlow'
+
+export function useHandleSwapOrEthFlow() {
+  const priceImpactParams = useTradePriceImpact()
+  const swapFlowContext = useSwapFlowContext()
+  const ethFlowContext = useEthFlowContext()
+  const tradeFlowType = useTradeFlowType()
+  const { confirmPriceImpactWithoutFee } = useConfirmPriceImpactWithoutFee()
+
+  const [deadline] = useUserTransactionTTL()
+  const { callback: handleSwap, contextIsReady } = useHandleSwap(useSafeMemoObject({ deadline }))
+
+  const callback = useCallback(() => {
+    if (!swapFlowContext) return
+
+    if (tradeFlowType === FlowType.EOA_ETH_FLOW) {
+      if (!ethFlowContext) throw new Error('Eth flow context is not ready')
+
+      logTradeFlow('ETH FLOW', 'Start eth flow')
+      return ethFlow(swapFlowContext, ethFlowContext, priceImpactParams, confirmPriceImpactWithoutFee)
+    }
+
+    return handleSwap()
+  }, [swapFlowContext, ethFlowContext, handleSwap, tradeFlowType, priceImpactParams, confirmPriceImpactWithoutFee])
+
+  return { callback, contextIsReady }
+}

apps/cowswap-frontend/src/modules/swap/hooks/useSwapButtonContext.ts

@@ -19,7 +19,6 @@ import { Field } from 'legacy/state/types'
 import { useInjectedWidgetParams } from 'modules/injectedWidget'
 import { useTokenSupportsPermit } from 'modules/permit'
 import { getSwapButtonState } from 'modules/swap/helpers/getSwapButtonState'
-import { useHandleSwap } from 'modules/swap/hooks/useHandleSwap'
 import { SwapButtonsContext } from 'modules/swap/pure/SwapButtons'
 import { TradeType, useTradeConfirmActions, useWrapNativeFlow } from 'modules/trade'
 import { useIsNativeIn } from 'modules/trade/hooks/useIsNativeInOrOut'
@@ -30,7 +29,7 @@ import { QuoteDeadlineParams } from 'modules/tradeQuote'
 import { useApproveState } from 'common/hooks/useApproveState'
 import { useSafeMemo } from 'common/hooks/useSafeMemo'
 
-import { useSwapFlowContext } from './useSwapFlowContext'
+import { useHandleSwapOrEthFlow } from './useHandleSwapOrEthFlow'
 import { useDerivedSwapInfo, useSwapActionHandlers } from './useSwapState'
 
 export interface SwapButtonInput {
@@ -57,7 +56,6 @@ export function useSwapButtonContext(input: SwapButtonInput): SwapButtonsContext
   const isBestQuoteLoading = useIsBestQuoteLoading()
   const tradeConfirmActions = useTradeConfirmActions()
   const { standaloneMode } = useInjectedWidgetParams()
-  const tradeFlowContext = useSwapFlowContext()
 
   const currencyIn = currencies[Field.INPUT]
   const currencyOut = currencies[Field.OUTPUT]
@@ -78,9 +76,7 @@ export function useSwapButtonContext(input: SwapButtonInput): SwapButtonsContext
   const wrapCallback = useWrapNativeFlow()
   const { state: approvalState } = useApproveState(slippageAdjustedSellAmount || null)
 
-  const { callback: handleSwap, contextIsReady } = useHandleSwap()
-
-  const recipientAddressOrName = tradeFlowContext?.orderParams.recipientAddressOrName || null
+  const { callback: handleSwap, contextIsReady } = useHandleSwapOrEthFlow()
 
   const swapCallbackError = contextIsReady ? null : 'Missing dependencies'
 
@@ -137,7 +133,6 @@ export function useSwapButtonContext(input: SwapButtonInput): SwapButtonsContext
       toggleWalletModal,
       swapInputError,
       onCurrencySelection,
-      recipientAddressOrName,
       widgetStandaloneMode: standaloneMode,
       quoteDeadlineParams,
     }),
@@ -154,7 +149,6 @@ export function useSwapButtonContext(input: SwapButtonInput): SwapButtonsContext
       toggleWalletModal,
       swapInputError,
       onCurrencySelection,
-      recipientAddressOrName,
       standaloneMode,
       quoteDeadlineParams,
     ],

apps/cowswap-frontend/src/modules/swap/hooks/useSwapFlowContext.ts

@@ -1,8 +1,10 @@
 import { useUserTransactionTTL } from 'legacy/state/user/hooks'
 
-import { useTradeFlowContext } from 'modules/trade'
+import { useTradeFlowContext } from 'modules/tradeFlow'
+
+import { useSafeMemoObject } from 'common/hooks/useSafeMemo'
 
 export function useSwapFlowContext() {
   const [deadline] = useUserTransactionTTL()
-  return useTradeFlowContext({ deadline })
+  return useTradeFlowContext(useSafeMemoObject({ deadline }))
 }

apps/cowswap-frontend/src/modules/swap/pure/SwapButtons/index.cosmos.tsx

@@ -26,7 +26,6 @@ const swapButtonsContext: SwapButtonsContext = {
   openSwapConfirm: () => void 0,
   toggleWalletModal: () => void 0,
   hasEnoughWrappedBalanceForSwap: true,
-  recipientAddressOrName: null,
   quoteDeadlineParams: {
     validFor: 0,
     quoteValidTo: 0,

apps/cowswap-frontend/src/modules/swap/pure/SwapButtons/index.tsx

@@ -38,7 +38,6 @@ export interface SwapButtonsContext {
   hasEnoughWrappedBalanceForSwap: boolean
   swapInputError?: ReactNode
   onCurrencySelection: (field: Field, currency: Currency) => void
-  recipientAddressOrName: string | null
   widgetStandaloneMode?: boolean
   quoteDeadlineParams: QuoteDeadlineParams
 }

apps/cowswap-frontend/src/modules/swap/services/ethFlow/index.ts

@@ -8,11 +8,11 @@ import { removePermitHookFromAppData } from 'modules/appData'
 import { emitPostedOrderEvent } from 'modules/orders'
 import { signEthFlowOrderStep } from 'modules/swap/services/ethFlow/steps/signEthFlowOrderStep'
 import { EthFlowContext } from 'modules/swap/services/types'
-import { TradeFlowContext } from 'modules/trade'
 import { addPendingOrderStep } from 'modules/trade/utils/addPendingOrderStep'
 import { logTradeFlow } from 'modules/trade/utils/logger'
 import { getSwapErrorMessage } from 'modules/trade/utils/swapErrorHelper'
 import { tradeFlowAnalytics } from 'modules/trade/utils/tradeFlowAnalytics'
+import { TradeFlowContext } from 'modules/tradeFlow'
 import { isQuoteExpired } from 'modules/tradeQuote'
 
 import { calculateUniqueOrderId } from './steps/calculateUniqueOrderId'

apps/cowswap-frontend/src/modules/trade/containers/NoImpactWarning/index.tsx

@@ -51,7 +51,7 @@ export function NoImpactWarning(props: NoImpactWarningProps) {
 
   useEffect(() => {
     setIsAccepted(!showPriceImpactWarning)
-  }, [showPriceImpactWarning])
+  }, [showPriceImpactWarning, setIsAccepted])
 
   if (!showPriceImpactWarning) return null
 

apps/cowswap-frontend/src/modules/trade/containers/TradeConfirmModal/index.cosmos.tsx

@@ -70,7 +70,7 @@ function Custom({ stateValue }: { stateValue: string }) {
   return (
     <TradeConfirmModal title="Swap">
       <TradeConfirmation {...confirmationState} onDismiss={console.log}>
-        <span>Some content</span>
+        {() => <span>Some content</span>}
       </TradeConfirmation>
     </TradeConfirmModal>
   )

apps/cowswap-frontend/src/modules/trade/index.ts

@@ -37,9 +37,6 @@ export * from './hooks/useWrappedToken'
 export * from './hooks/useUnknownImpactWarning'
 export * from './hooks/useIsSwapEth'
 export * from './hooks/useIsSafeEthFlow'
-export * from './hooks/useTradeFlowType'
-export { useTradeFlowContext } from './hooks/useTradeFlowContext'
-export { useSafeBundleFlowContext } from './hooks/useSafeBundleFlowContext'
 export * from './containers/TradeWidget/types'
 export { useIsNoImpactWarningAccepted } from './containers/NoImpactWarning/index'
 export * from './utils/getReceiveAmountInfo'

apps/cowswap-frontend/src/modules/trade/pure/TradeConfirmation/index.cosmos.tsx

@@ -17,7 +17,7 @@ const Fixtures = {
       refreshInterval={10_000}
       recipient={null}
     >
-      <span>Trade confirmation</span>
+      {() => <span>Trade confirmation</span>}
     </TradeConfirmation>
   ),
 }

apps/cowswap-frontend/src/modules/trade/types/index.ts

@@ -1,4 +1,3 @@
 export * from './TradeDerivedState'
 export * from './ReceiveAmountInfo'
 export * from './TradeType'
-export * from './TradeFlowContext'

apps/cowswap-frontend/src/modules/tradeFlow/hooks/useHandleSwap.ts

@@ -0,0 +1,56 @@
+import { useCallback } from 'react'
+
+import { useTradePriceImpact } from 'modules/trade'
+import { logTradeFlow } from 'modules/trade/utils/logger'
+
+import { useConfirmPriceImpactWithoutFee } from 'common/hooks/useConfirmPriceImpactWithoutFee'
+
+import { useSafeBundleFlowContext } from './useSafeBundleFlowContext'
+import { TradeFlowParams, useTradeFlowContext } from './useTradeFlowContext'
+import { useTradeFlowType } from './useTradeFlowType'
+
+import { safeBundleApprovalFlow, safeBundleEthFlow } from '../services/safeBundleFlow'
+import { swapFlow } from '../services/swapFlow'
+import { FlowType } from '../types/TradeFlowContext'
+
+export function useHandleSwap(params: TradeFlowParams) {
+  const tradeFlowType = useTradeFlowType()
+  const tradeFlowContext = useTradeFlowContext(params)
+  const safeBundleFlowContext = useSafeBundleFlowContext()
+  const { confirmPriceImpactWithoutFee } = useConfirmPriceImpactWithoutFee()
+  const priceImpactParams = useTradePriceImpact()
+
+  const contextIsReady =
+    Boolean(
+      [FlowType.SAFE_BUNDLE_ETH, FlowType.SAFE_BUNDLE_APPROVAL].includes(tradeFlowType)
+        ? safeBundleFlowContext
+        : tradeFlowContext,
+    ) && !!tradeFlowContext
+
+  const callback = useCallback(async () => {
+    if (!tradeFlowContext) return
+
+    if (tradeFlowType === FlowType.SAFE_BUNDLE_APPROVAL) {
+      if (!safeBundleFlowContext) throw new Error('Safe bundle flow context is not ready')
+
+      logTradeFlow('SAFE BUNDLE APPROVAL FLOW', 'Start safe bundle approval flow')
+      return safeBundleApprovalFlow(
+        tradeFlowContext,
+        safeBundleFlowContext,
+        priceImpactParams,
+        confirmPriceImpactWithoutFee,
+      )
+    }
+    if (tradeFlowType === FlowType.SAFE_BUNDLE_ETH) {
+      if (!safeBundleFlowContext) throw new Error('Safe bundle flow context is not ready')
+
+      logTradeFlow('SAFE BUNDLE ETH FLOW', 'Start safe bundle eth flow')
+      return safeBundleEthFlow(tradeFlowContext, safeBundleFlowContext, priceImpactParams, confirmPriceImpactWithoutFee)
+    }
+
+    logTradeFlow('SWAP FLOW', 'Start swap flow')
+    return swapFlow(tradeFlowContext, priceImpactParams, confirmPriceImpactWithoutFee)
+  }, [tradeFlowType, tradeFlowContext, safeBundleFlowContext, priceImpactParams, confirmPriceImpactWithoutFee])
+
+  return { callback, contextIsReady }
+}

apps/cowswap-frontend/src/modules/trade/hooks/useSafeBundleFlowContext.ts → apps/cowswap-frontend/src/modules/tradeFlow/hooks/useSafeBundleFlowContext.ts

@@ -5,12 +5,12 @@ import { useSafeAppsSdk } from '@cowprotocol/wallet'
 
 import useSWR from 'swr'
 
+import { useReceiveAmountInfo } from 'modules/trade'
+
 import { useGP2SettlementContract, useTokenContract, useWETHContract } from 'common/hooks/useContract'
 import { useNeedsApproval } from 'common/hooks/useNeedsApproval'
 import { useTradeSpenderAddress } from 'common/hooks/useTradeSpenderAddress'
 
-import { useReceiveAmountInfo } from './useReceiveAmountInfo'
-
 import { SafeBundleFlowContext } from '../types/TradeFlowContext'
 
 export function useSafeBundleFlowContext(): SafeBundleFlowContext | null {

apps/cowswap-frontend/src/modules/trade/hooks/useTradeFlowContext.ts → apps/cowswap-frontend/src/modules/tradeFlow/hooks/useTradeFlowContext.ts

@@ -20,11 +20,11 @@ import { useGP2SettlementContract } from 'common/hooks/useContract'
 
 import { TradeFlowContext } from '../types/TradeFlowContext'
 
-interface Params {
+export interface TradeFlowParams {
   deadline: number
 }
 
-export function useTradeFlowContext({ deadline }: Params): TradeFlowContext | null {
+export function useTradeFlowContext({ deadline }: TradeFlowParams): TradeFlowContext | null {
   const { chainId, account } = useWalletInfo()
   const provider = useWalletProvider()
   const { allowsOffchainSigning } = useWalletDetails()

apps/cowswap-frontend/src/modules/trade/hooks/useTradeFlowType.ts → apps/cowswap-frontend/src/modules/tradeFlow/hooks/useTradeFlowType.ts

@@ -1,10 +1,8 @@
-import { useIsSafeApprovalBundle } from 'common/hooks/useIsSafeApprovalBundle'
+import { useIsEoaEthFlow, useIsSafeEthFlow, useReceiveAmountInfo } from 'modules/trade'
 
-import { useIsEoaEthFlow } from './useIsEoaEthFlow'
-import { useIsSafeEthFlow } from './useIsSafeEthFlow'
-import { useReceiveAmountInfo } from './useReceiveAmountInfo'
+import { useIsSafeApprovalBundle } from 'common/hooks/useIsSafeApprovalBundle'
 
-import { FlowType } from '../types'
+import { FlowType } from '../types/TradeFlowContext'
 
 export function useTradeFlowType(): FlowType {
   const isEoaEthFlow = useIsEoaEthFlow()

apps/cowswap-frontend/src/modules/tradeFlow/index.ts

@@ -0,0 +1,4 @@
+export { useHandleSwap } from './hooks/useHandleSwap'
+export { useTradeFlowContext } from './hooks/useTradeFlowContext'
+export { useTradeFlowType } from './hooks/useTradeFlowType'
+export * from './types/TradeFlowContext'

apps/cowswap-frontend/src/modules/swap/services/safeBundleFlow/safeBundleApprovalFlow.ts → apps/cowswap-frontend/src/modules/tradeFlow/services/safeBundleFlow/safeBundleApprovalFlow.ts

@@ -11,13 +11,14 @@ import { buildApproveTx } from 'modules/operations/bundle/buildApproveTx'
 import { buildPresignTx } from 'modules/operations/bundle/buildPresignTx'
 import { buildZeroApproveTx } from 'modules/operations/bundle/buildZeroApproveTx'
 import { emitPostedOrderEvent } from 'modules/orders'
-import { SafeBundleFlowContext, TradeFlowContext } from 'modules/trade'
 import { addPendingOrderStep } from 'modules/trade/utils/addPendingOrderStep'
 import { logTradeFlow } from 'modules/trade/utils/logger'
 import { getSwapErrorMessage } from 'modules/trade/utils/swapErrorHelper'
 import { tradeFlowAnalytics } from 'modules/trade/utils/tradeFlowAnalytics'
 import { shouldZeroApprove as shouldZeroApproveFn } from 'modules/zeroApproval'
 
+import { SafeBundleFlowContext, TradeFlowContext } from '../../types/TradeFlowContext'
+
 const LOG_PREFIX = 'SAFE APPROVAL BUNDLE FLOW'
 
 export async function safeBundleApprovalFlow(

apps/cowswap-frontend/src/modules/swap/services/safeBundleFlow/safeBundleEthFlow.ts → apps/cowswap-frontend/src/modules/tradeFlow/services/safeBundleFlow/safeBundleEthFlow.ts

@@ -12,12 +12,13 @@ import { buildApproveTx } from 'modules/operations/bundle/buildApproveTx'
 import { buildPresignTx } from 'modules/operations/bundle/buildPresignTx'
 import { buildWrapTx } from 'modules/operations/bundle/buildWrapTx'
 import { emitPostedOrderEvent } from 'modules/orders'
-import { SafeBundleFlowContext, TradeFlowContext } from 'modules/trade'
 import { addPendingOrderStep } from 'modules/trade/utils/addPendingOrderStep'
 import { logTradeFlow } from 'modules/trade/utils/logger'
 import { getSwapErrorMessage } from 'modules/trade/utils/swapErrorHelper'
 import { tradeFlowAnalytics } from 'modules/trade/utils/tradeFlowAnalytics'
 
+import { SafeBundleFlowContext, TradeFlowContext } from '../../types/TradeFlowContext'
+
 const LOG_PREFIX = 'SAFE BUNDLE ETH FLOW'
 
 export async function safeBundleEthFlow(

apps/cowswap-frontend/src/modules/swap/services/swapFlow/index.ts → apps/cowswap-frontend/src/modules/tradeFlow/services/swapFlow/index.ts

@@ -10,14 +10,15 @@ import { signAndPostOrder } from 'legacy/utils/trade'
 import { emitPostedOrderEvent } from 'modules/orders'
 import { handlePermit } from 'modules/permit'
 import { callDataContainsPermitSigner } from 'modules/permit'
-import { TradeFlowContext } from 'modules/trade'
 import { addPendingOrderStep } from 'modules/trade/utils/addPendingOrderStep'
 import { logTradeFlow } from 'modules/trade/utils/logger'
 import { getSwapErrorMessage } from 'modules/trade/utils/swapErrorHelper'
 import { tradeFlowAnalytics } from 'modules/trade/utils/tradeFlowAnalytics'
 
 import { presignOrderStep } from './steps/presignOrderStep'
 
+import { TradeFlowContext } from '../../types/TradeFlowContext'
+
 export async function swapFlow(
   input: TradeFlowContext,
   priceImpactParams: PriceImpact,

apps/cowswap-frontend/src/modules/trade/types/TradeFlowContext.ts → apps/cowswap-frontend/src/modules/tradeFlow/types/TradeFlowContext.ts

@@ -8,9 +8,8 @@ import type { PostOrderParams } from 'legacy/utils/trade'
 
 import type { TypedAppDataHooks } from 'modules/appData'
 import type { GeneratePermitHook, IsTokenPermittableResult, useGetCachedPermit } from 'modules/permit'
-
-import type { TradeConfirmActions } from '../hooks/useTradeConfirmActions'
-import type { TradeFlowAnalyticsContext } from '../utils/tradeFlowAnalytics'
+import type { TradeConfirmActions } from 'modules/trade'
+import type { TradeFlowAnalyticsContext } from 'modules/trade/utils/tradeFlowAnalytics'
 
 export enum FlowType {
   REGULAR = 'REGULAR',

apps/cowswap-frontend/src/modules/tradeSlippage/state/slippageValueAndTypeAtom.ts

@@ -6,7 +6,8 @@ import { bpsToPercent } from '@cowprotocol/common-utils'
 import { mapSupportedNetworks, SupportedChainId } from '@cowprotocol/cow-sdk'
 import { walletInfoAtom } from '@cowprotocol/wallet'
 
-import { isEoaEthFlowAtom, TradeType, tradeTypeAtom } from 'modules/trade'
+import { isEoaEthFlowAtom, tradeTypeAtom } from 'modules/trade'
+import { TradeType } from 'modules/trade/types/TradeType'
 
 type SlippageBpsPerNetwork = Record<SupportedChainId, number | null>
 

apps/cowswap-frontend/src/modules/twap/hooks/useTwapWarningsContext.ts

@@ -2,7 +2,6 @@ import { useMemo } from 'react'
 
 import { useWalletInfo } from '@cowprotocol/wallet'
 
-import { useTradePriceImpact } from 'modules/trade'
 import { useGetTradeFormValidation } from 'modules/tradeFormValidation'
 import { TradeFormValidation } from 'modules/tradeFormValidation/types'
 
@@ -16,7 +15,6 @@ export interface TwapWarningsContext {
 export function useTwapWarningsContext(): TwapWarningsContext {
   const { account } = useWalletInfo()
   const primaryFormValidation = useGetTradeFormValidation()
-  const priceImpactParams = useTradePriceImpact()
 
   return useMemo(() => {
     const canTrade = !primaryFormValidation || NOT_BLOCKING_VALIDATIONS.includes(primaryFormValidation)
@@ -26,5 +24,5 @@ export function useTwapWarningsContext(): TwapWarningsContext {
       canTrade,
       walletIsNotConnected,
     }
-  }, [primaryFormValidation, account, priceImpactParams])
+  }, [primaryFormValidation, account])
 }

apps/cowswap-frontend/src/modules/yield/containers/YieldConfirmModal/index.tsx

@@ -1,24 +1,20 @@
-import React, { useCallback, useMemo } from 'react'
+import React, { useMemo } from 'react'
 
 import { useWalletDetails, useWalletInfo } from '@cowprotocol/wallet'
 
 import type { PriceImpact } from 'legacy/hooks/usePriceImpact'
 
 import { useAppData } from 'modules/appData'
-import { swapFlow } from 'modules/swap/services/swapFlow'
-import type { SwapFlowContext } from 'modules/swap/services/types'
 import {
   TradeBasicConfirmDetails,
   TradeConfirmation,
   TradeConfirmModal,
   useOrderSubmittedContent,
   useReceiveAmountInfo,
   useTradeConfirmActions,
-  useTradePriceImpact,
 } from 'modules/trade'
 import { HighFeeWarning } from 'modules/tradeWidgetAddons'
 
-import { useConfirmPriceImpactWithoutFee } from 'common/hooks/useConfirmPriceImpactWithoutFee'
 import { useRateInfoParams } from 'common/hooks/useRateInfoParams'
 import { CurrencyPreviewInfo } from 'common/pure/CurrencyAmountPreview'
 
@@ -27,44 +23,34 @@ import { useYieldDerivedState } from '../../hooks/useYieldDerivedState'
 const CONFIRM_TITLE = 'Confirm order'
 
 export interface YieldConfirmModalProps {
-  tradeFlowContext: SwapFlowContext
+  doTrade(): Promise<false | void>
   inputCurrencyInfo: CurrencyPreviewInfo
   outputCurrencyInfo: CurrencyPreviewInfo
   priceImpact: PriceImpact
   recipient?: string | null
 }
 
 export function YieldConfirmModal(props: YieldConfirmModalProps) {
-  const { inputCurrencyInfo, outputCurrencyInfo, priceImpact, recipient, tradeFlowContext: tradeContextInitial } = props
+  const { inputCurrencyInfo, outputCurrencyInfo, priceImpact, recipient, doTrade: _doTrade } = props
 
   /**
    * This is a very important part of the code.
    * After the confirmation modal opens, the trade context should not be recreated.
    * In order to prevent this, we use useMemo to keep the trade context the same when the modal was opened.
    */
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  const tradeFlowContext = useMemo(() => tradeContextInitial, [])
+  const doTrade = useMemo(() => _doTrade, [])
 
   const { account, chainId } = useWalletInfo()
   const { ensName } = useWalletDetails()
   const appData = useAppData()
   const receiveAmountInfo = useReceiveAmountInfo()
   const tradeConfirmActions = useTradeConfirmActions()
   const { slippage } = useYieldDerivedState()
-  const priceImpactParams = useTradePriceImpact()
-  const { confirmPriceImpactWithoutFee } = useConfirmPriceImpactWithoutFee()
 
   const rateInfoParams = useRateInfoParams(inputCurrencyInfo.amount, outputCurrencyInfo.amount)
   const submittedContent = useOrderSubmittedContent(chainId)
 
-  const doTrade = useCallback(async () => {
-    if (!tradeFlowContext) return
-
-    swapFlow(tradeFlowContext, priceImpactParams, confirmPriceImpactWithoutFee)
-  }, [tradeFlowContext, priceImpactParams, confirmPriceImpactWithoutFee])
-
-  const isConfirmDisabled = false // TODO: add conditions if needed
-
   return (
     <TradeConfirmModal title={CONFIRM_TITLE} submittedContent={submittedContent}>
       <TradeConfirmation
@@ -75,9 +61,9 @@ export function YieldConfirmModal(props: YieldConfirmModalProps) {
         outputCurrencyInfo={outputCurrencyInfo}
         onConfirm={doTrade}
         onDismiss={tradeConfirmActions.onDismiss}
-        isConfirmDisabled={isConfirmDisabled}
+        isConfirmDisabled={false}
         priceImpact={priceImpact}
-        buttonText="Confirm and swap" // TODO
+        buttonText="Confirm and swap"
         recipient={recipient}
         appData={appData || undefined}
         isPriceStatic={true}

apps/cowswap-frontend/src/modules/yield/containers/YieldWidget/index.tsx

@@ -9,11 +9,12 @@ import {
   useTradeConfirmState,
   useTradePriceImpact,
 } from 'modules/trade'
-import { useTradeFlowContext } from 'modules/trade'
+import { useHandleSwap } from 'modules/tradeFlow'
 import { useTradeQuote } from 'modules/tradeQuote'
 import { SettingsTab, TradeRateDetails } from 'modules/tradeWidgetAddons'
 
 import { useRateInfoParams } from 'common/hooks/useRateInfoParams'
+import { useSafeMemoObject } from 'common/hooks/useSafeMemo'
 import { CurrencyInfo } from 'common/pure/CurrencyInputPanel/types'
 
 import { useYieldDerivedState } from '../../hooks/useYieldDerivedState'
@@ -44,7 +45,7 @@ export function YieldWidget() {
     outputCurrencyFiatAmount,
     recipient,
   } = useYieldDerivedState()
-  const tradeFlowContext = useTradeFlowContext({ deadline: deadlineState[0] })
+  const doTrade = useHandleSwap(useSafeMemoObject({ deadline: deadlineState[0] }))
 
   const inputCurrencyInfo: CurrencyInfo = {
     field: Field.INPUT,
@@ -88,7 +89,7 @@ export function YieldWidget() {
           <TradeRateDetails rateInfoParams={rateInfoParams} deadline={deadlineState[0]} />
           <Warnings />
           {tradeWarnings}
-          <TradeButtons isTradeContextReady={!!tradeFlowContext} />
+          <TradeButtons isTradeContextReady={doTrade.contextIsReady} />
         </>
       )
     },
@@ -112,9 +113,9 @@ export function YieldWidget() {
       inputCurrencyInfo={inputCurrencyInfo}
       outputCurrencyInfo={outputCurrencyInfo}
       confirmModal={
-        tradeFlowContext ? (
+        doTrade.contextIsReady ? (
           <YieldConfirmModal
-            tradeFlowContext={tradeFlowContext}
+            doTrade={doTrade.callback}
             recipient={recipient}
             priceImpact={priceImpact}
             inputCurrencyInfo={inputCurrencyPreviewInfo}

apps/cowswap-frontend/src/modules/yield/state/yieldRawStateAtom.ts

@@ -22,7 +22,7 @@ export function getDefaultYieldState(chainId: SupportedChainId | null): YieldRaw
 }
 
 export const { atom: yieldRawStateAtom, updateAtom: updateYieldRawStateAtom } = atomWithPartialUpdate(
-  atomWithStorage<YieldRawState>('yieldStateAtom:v0', getDefaultYieldState(null), getJotaiIsolatedStorage()),
+  atomWithStorage<YieldRawState>('yieldStateAtom:v1', getDefaultYieldState(null), getJotaiIsolatedStorage()),
 )
 
 export const yieldDerivedStateAtom = atom<YieldDerivedState>({