feat(hook-store): override Hook Gas limit and tokens balances with Tenderly Simulation Data

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

@@ -1,4 +1,4 @@
-import { ReactElement, useMemo, useState } from 'react'
+import { ReactElement, useEffect, useMemo, useState } from 'react'
 
 import { latest } from '@cowprotocol/app-data'
 import { HookToDappMatch, matchHooksToDappsRegistry } from '@cowprotocol/hook-dapp-lib'
@@ -12,6 +12,7 @@ import { useCustomHookDapps } from 'modules/hooksStore'
 import { HookItem } from './HookItem'
 import * as styledEl from './styled'
 import { CircleCount } from './styled'
+import { useTenderlyBundleSimulation } from 'modules/tenderly/hooks/useTenderlyBundleSimulation'
 
 interface OrderHooksDetailsProps {
   appData: string | AppDataInfo
@@ -27,10 +28,18 @@ export function OrderHooksDetails({ appData, children, margin }: OrderHooksDetai
   const preCustomHookDapps = useCustomHookDapps(true)
   const postCustomHookDapps = useCustomHookDapps(false)
 
+  const { mutate, isValidating, data } = useTenderlyBundleSimulation()
+
+  useEffect(() => {
+    mutate()
+  }, [])
+
   if (!appDataDoc) return null
 
   const metadata = appDataDoc.metadata as latest.Metadata
 
+  const hasSomeFailedSimulation = Object.values(data || {}).some((hook) => !hook.status)
+
   const preHooksToDapp = matchHooksToDappsRegistry(metadata.hooks?.pre || [], preCustomHookDapps)
   const postHooksToDapp = matchHooksToDappsRegistry(metadata.hooks?.post || [], postCustomHookDapps)
 
@@ -42,6 +51,8 @@ export function OrderHooksDetails({ appData, children, margin }: OrderHooksDetai
         <styledEl.Label>
           Hooks
           <InfoTooltip content="Hooks are interactions before/after order execution." />
+          {hasSomeFailedSimulation && <styledEl.ErrorLabel>Simulation failed</styledEl.ErrorLabel>}
+          {isValidating && <styledEl.Spinner />}
         </styledEl.Label>
         <styledEl.Content onClick={() => setOpen(!isOpen)}>
           {preHooksToDapp.length > 0 && (

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

@@ -33,6 +33,17 @@ export const Label = styled.span`
   gap: 4px;
 `
 
+export const ErrorLabel = styled.span`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  color: var(${UI.COLOR_DANGER_TEXT});
+  background-color: var(${UI.COLOR_DANGER_BG});
+  border-radius: 8px;
+  margin-left: 4px;
+  padding: 2px 6px;
+`
+
 export const Content = styled.div`
   display: flex;
   width: max-content;
@@ -164,3 +175,21 @@ export const CircleCount = styled.span`
   font-weight: var(${UI.FONT_WEIGHT_BOLD});
   margin: 0;
 `
+
+export const Spinner = styled.div`
+  border: 5px solid transparent;
+  border-top-color: ${`var(${UI.COLOR_PRIMARY_LIGHTER})`};
+  border-radius: 50%;
+  width: 12px;
+  height: 12px;
+  animation: spin 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
+
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+`

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

@@ -6,7 +6,7 @@ import { useIsSmartContractWallet } from '@cowprotocol/wallet'
 
 import { Nullish } from 'types'
 
-import { useHooks } from 'modules/hooksStore'
+import { useHooksStateWithSimulatedGas } from 'modules/hooksStore'
 import { useAccountAgnosticPermitHookData } from 'modules/permit'
 import { useDerivedTradeState, useHasTradeEnoughAllowance, useIsHooksTradeType, useIsSellNative } from 'modules/trade'
 
@@ -33,7 +33,7 @@ function useAgnosticPermitDataIfUserHasNoAllowance(): Nullish<PermitHookData> {
 export function AppDataHooksUpdater(): null {
   const tradeState = useDerivedTradeState()
   const isHooksTradeType = useIsHooksTradeType()
-  const hooksStoreState = useHooks()
+  const hooksStoreState = useHooksStateWithSimulatedGas()
   const preHooks = isHooksTradeType ? hooksStoreState.preHooks : null
   const postHooks = isHooksTradeType ? hooksStoreState.postHooks : null
   const updateAppDataHooks = useUpdateAppDataHooks()

apps/cowswap-frontend/src/modules/combinedBalances/hooks/useCurrencyAmountBalanceCombined.ts

@@ -0,0 +1,22 @@
+import { useMemo } from 'react'
+
+import { TokenWithLogo } from '@cowprotocol/common-const'
+import { CurrencyAmount } from '@uniswap/sdk-core'
+
+import { useTokensBalancesCombined } from './useTokensBalancesCombined'
+
+export function useCurrencyAmountBalanceCombined(
+  token: TokenWithLogo | undefined | null,
+): CurrencyAmount<TokenWithLogo> | undefined {
+  const { values: balances } = useTokensBalancesCombined()
+
+  return useMemo(() => {
+    if (!token) return undefined
+
+    const balance = balances[token.address.toLowerCase()]
+
+    if (!balance) return undefined
+
+    return CurrencyAmount.fromRawAmount(token, balance.toHexString())
+  }, [token, balances])
+}

apps/cowswap-frontend/src/modules/combinedBalances/hooks/useTokensBalancesCombined.ts

@@ -0,0 +1,45 @@
+import { useMemo } from 'react'
+
+import { BalancesState, useTokensBalances } from '@cowprotocol/balances-and-allowances'
+import { useWalletInfo } from '@cowprotocol/wallet'
+
+import { BigNumber } from 'ethers'
+
+import { usePreHookBalanceDiff } from 'modules/hooksStore/hooks/useBalancesDiff'
+import { useIsHooksTradeType } from 'modules/trade'
+
+export function useTokensBalancesCombined() {
+  const { account } = useWalletInfo()
+  const preHooksBalancesDiff = usePreHookBalanceDiff()
+  const tokenBalances = useTokensBalances()
+  const isHooksTradeType = useIsHooksTradeType()
+
+  return useMemo(() => {
+    if (!account || !isHooksTradeType) return tokenBalances
+    const accountBalancesDiff = preHooksBalancesDiff[account.toLowerCase()] || {}
+    return applyBalanceDiffs(tokenBalances, accountBalancesDiff)
+  }, [account, preHooksBalancesDiff, tokenBalances, isHooksTradeType])
+}
+
+function applyBalanceDiffs(currentBalances: BalancesState, balanceDiff: Record<string, string>): BalancesState {
+  // Get all unique addresses from both objects
+  const allAddresses = [...new Set([...Object.keys(currentBalances.values), ...Object.keys(balanceDiff)])]
+
+  const normalizedValues = allAddresses.reduce(
+    (acc, address) => {
+      const currentBalance = currentBalances.values[address] || BigNumber.from(0)
+      const diff = balanceDiff[address] ? BigNumber.from(balanceDiff[address]) : BigNumber.from(0)
+
+      return {
+        ...acc,
+        [address]: currentBalance.add(diff),
+      }
+    },
+    {} as Record<string, BigNumber>,
+  )
+
+  return {
+    isLoading: currentBalances.isLoading,
+    values: normalizedValues,
+  }
+}

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

@@ -0,0 +1,2 @@
+export * from './hooks/useCurrencyAmountBalanceCombined'
+export * from './hooks/useTokensBalancesCombined'

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

@@ -12,6 +12,7 @@ import { useAddHook } from '../../hooks/useAddHook'
 import { useEditHook } from '../../hooks/useEditHook'
 import { useHookById } from '../../hooks/useHookById'
 import { useOrderParams } from '../../hooks/useOrderParams'
+import { useHookBalancesDiff } from '../../hooks/useBalancesDiff'
 import { HookDapp, HookDappContext as HookDappContextType } from '../../types/hooks'
 import { isHookDappIframe } from '../../utils'
 import { IframeDappContainer } from '../IframeDappContainer'
@@ -35,6 +36,7 @@ export function HookDappContainer({ dapp, isPreHook, onDismiss, hookToEdit }: Ho
   const tradeState = useTradeState()
   const tradeNavigate = useTradeNavigate()
   const isDarkMode = useIsDarkMode()
+  const balancesDiff = useHookBalancesDiff(isPreHook, hookToEditDetails?.uuid)
 
   const { inputCurrencyId = null, outputCurrencyId = null } = tradeState.state || {}
   const signer = useMemo(() => provider?.getSigner(), [provider])
@@ -49,6 +51,7 @@ export function HookDappContainer({ dapp, isPreHook, onDismiss, hookToEdit }: Ho
       isSmartContract,
       isPreHook,
       isDarkMode,
+      balancesDiff,
       editHook(...args) {
         editHook(...args)
         onDismiss()

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

@@ -0,0 +1,120 @@
+import { useTenderlyBundleSimulation } from 'modules/tenderly/hooks/useTenderlyBundleSimulation'
+import { useOrderParams } from './useOrderParams'
+import { useHooks } from './useHooks'
+import { useMemo } from 'react'
+import { useWalletInfo } from '@cowprotocol/wallet'
+import { BalancesDiff } from 'modules/tenderly/types'
+import { BigNumber } from 'ethers'
+
+const EMPTY_BALANCE_DIFF: BalancesDiff = {}
+
+export function usePreHookBalanceDiff(): BalancesDiff {
+  const { data } = useTenderlyBundleSimulation()
+
+  const { preHooks } = useHooks()
+
+  return useMemo(() => {
+    if (!data || !preHooks.length) return EMPTY_BALANCE_DIFF
+
+    const lastPreHook = preHooks[preHooks.length - 1]
+    return data[lastPreHook?.uuid]?.cumulativeBalancesDiff || EMPTY_BALANCE_DIFF
+  }, [data, preHooks])
+}
+
+// Returns all the ERC20 Balance Diff of the current hook to be passed to the iframe context
+export function useHookBalancesDiff(isPreHook: boolean, hookToEditUid?: string): BalancesDiff {
+  const { account } = useWalletInfo()
+  const { data } = useTenderlyBundleSimulation()
+  const orderParams = useOrderParams()
+  const { preHooks, postHooks } = useHooks()
+  const preHookBalanceDiff = usePreHookBalanceDiff()
+
+  // balance diff expected from the order without the simulation
+  // this is used when the order isn't simulated like in the case of only preHooks
+  const orderExpectedBalanceDiff = useMemo(() => {
+    if (!account) return EMPTY_BALANCE_DIFF
+    const balanceDiff: Record<string, string> = {}
+
+    if (orderParams?.buyAmount && orderParams.buyTokenAddress && account)
+      balanceDiff[orderParams.buyTokenAddress.toLowerCase()] = orderParams.buyAmount
+
+    if (orderParams?.sellAmount && orderParams.sellTokenAddress && account)
+      balanceDiff[orderParams.sellTokenAddress.toLowerCase()] = `-${orderParams.sellAmount}`
+
+    return { account: balanceDiff }
+  }, [orderParams, account])
+
+  const firstPostHookBalanceDiff = useMemo(() => {
+    return mergeBalanceDiffs(preHookBalanceDiff, orderExpectedBalanceDiff)
+  }, [preHookBalanceDiff, orderExpectedBalanceDiff])
+
+  const postHookBalanceDiff = useMemo(() => {
+    // is adding the first post hook or simulation not available
+    if (!data || !postHooks) return firstPostHookBalanceDiff
+
+    const lastPostHook = postHooks[postHooks.length - 1]
+    return data[lastPostHook?.uuid]?.cumulativeBalancesDiff || firstPostHookBalanceDiff
+  }, [data, postHooks, orderExpectedBalanceDiff, preHookBalanceDiff])
+
+  const hookToEditBalanceDiff = useMemo(() => {
+    if (!data || !hookToEditUid) return EMPTY_BALANCE_DIFF
+
+    const otherHooks = isPreHook ? preHooks : postHooks
+
+    const hookToEditIndex = otherHooks.findIndex((hook) => hook.uuid === hookToEditUid)
+
+    // is editing first preHook -> return empty state
+    if (!hookToEditIndex && isPreHook) return EMPTY_BALANCE_DIFF
+
+    // is editing first postHook -> return
+    if (!hookToEditIndex && !isPreHook) return firstPostHookBalanceDiff
+
+    // is editing a non first hook, return the latest available hook state
+    const previousHookIndex = hookToEditIndex - 1
+
+    return data[otherHooks[previousHookIndex]?.uuid]?.cumulativeBalancesDiff || EMPTY_BALANCE_DIFF
+  }, [data, hookToEditUid, isPreHook, preHooks, postHooks, firstPostHookBalanceDiff])
+
+  return useMemo(() => {
+    if (hookToEditUid) return hookToEditBalanceDiff
+    if (isPreHook) return preHookBalanceDiff
+    return postHookBalanceDiff
+  }, [data, orderParams, preHooks, postHooks])
+}
+
+function mergeBalanceDiffs(first: BalancesDiff, second: BalancesDiff): BalancesDiff {
+  const result: BalancesDiff = {}
+
+  // Helper function to add BigNumber strings
+
+  // Process all addresses from first input
+  for (const address of Object.keys(first)) {
+    result[address] = { ...first[address] }
+  }
+
+  // Process all addresses from second input
+  for (const address of Object.keys(second)) {
+    if (!result[address]) {
+      // If address doesn't exist in result, just copy the entire record
+      result[address] = { ...second[address] }
+    } else {
+      // If address exists, we need to merge token balances
+      for (const token of Object.keys(second[address])) {
+        if (!result[address][token]) {
+          // If token doesn't exist for this address, just copy the balance
+          result[address][token] = second[address][token]
+        } else {
+          // If token exists, sum up the balances
+          try {
+            result[address][token] = BigNumber.from(result[address][token]).add(second[address][token]).toString()
+          } catch (error) {
+            console.error(`Error adding balances for address ${address} and token ${token}:`, error)
+            throw error
+          }
+        }
+      }
+    }
+  }
+
+  return result
+}

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

@@ -0,0 +1,30 @@
+import { useCallback, useMemo } from 'react'
+
+import { CowHookDetails } from '@cowprotocol/hook-dapp-lib'
+
+import { useTenderlyBundleSimulation } from 'modules/tenderly/hooks/useTenderlyBundleSimulation'
+
+import { useHooks } from './useHooks'
+
+import { HooksStoreState } from '../state/hookDetailsAtom'
+
+export function useHooksStateWithSimulatedGas(): HooksStoreState {
+  const hooksRaw = useHooks()
+  const { data: tenderlyData } = useTenderlyBundleSimulation()
+
+  const combineHookWithSimulatedGas = useCallback(
+    (hook: CowHookDetails): CowHookDetails => {
+      const hookTenderlyData = tenderlyData?.[hook.uuid]
+      if (!hookTenderlyData?.gasUsed || hookTenderlyData.gasUsed === '0' || !hookTenderlyData.status) return hook
+      const hookData = { ...hook.hook, gasLimit: hookTenderlyData.gasUsed }
+      return { ...hook, hook: hookData }
+    },
+    [tenderlyData],
+  )
+
+  return useMemo(() => {
+    const preHooksCombined = hooksRaw.preHooks.map(combineHookWithSimulatedGas)
+    const postHooksCombined = hooksRaw.postHooks.map(combineHookWithSimulatedGas)
+    return { preHooks: preHooksCombined, postHooks: postHooksCombined }
+  }, [hooksRaw, combineHookWithSimulatedGas])
+}

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

@@ -2,3 +2,4 @@ export { HooksStoreWidget } from './containers/HooksStoreWidget'
 export { useHooks } from './hooks/useHooks'
 export { usePostHooksRecipientOverride } from './hooks/usePostHooksRecipientOverride'
 export { useCustomHookDapps } from './hooks/useCustomHookDapps'
+export { useHooksStateWithSimulatedGas } from './hooks/useHooksStateWithSimulatedGas'

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

@@ -7,7 +7,7 @@ import ICON_X from '@cowprotocol/assets/cow-swap/x.svg'
 import { CowHookDetails } from '@cowprotocol/hook-dapp-lib'
 import { InfoTooltip } from '@cowprotocol/ui'
 
-import { Edit2, Trash2, ExternalLink as ExternalLinkIcon } from 'react-feather'
+import { Edit2, Trash2, ExternalLink as ExternalLinkIcon, RefreshCw } from 'react-feather'
 import SVG from 'react-inlinesvg'
 
 import { useTenderlyBundleSimulation } from 'modules/tenderly/hooks/useTenderlyBundleSimulation'
@@ -31,7 +31,7 @@ interface HookItemProp {
 const isBundleSimulationReady = true
 
 export function AppliedHookItem({ account, hookDetails, dapp, isPreHook, editHook, removeHook, index }: HookItemProp) {
-  const { isValidating, data } = useTenderlyBundleSimulation()
+  const { isValidating, data, mutate } = useTenderlyBundleSimulation()
 
   const simulationData = useMemo(() => {
     if (!data) return
@@ -56,6 +56,9 @@ export function AppliedHookItem({ account, hookDetails, dapp, isPreHook, editHoo
           {isValidating && <styledEl.Spinner />}
         </styledEl.HookItemInfo>
         <styledEl.HookItemActions>
+          <styledEl.ActionBtn onClick={() => mutate()} disabled={isValidating}>
+            <RefreshCw size={14} />
+          </styledEl.ActionBtn>
           <styledEl.ActionBtn onClick={() => editHook(hookDetails.uuid)}>
             <Edit2 size={14} />
           </styledEl.ActionBtn>