diff --git a/apps/cowswap-frontend/src/common/containers/OrderHooksDetails/index.tsx b/apps/cowswap-frontend/src/common/containers/OrderHooksDetails/index.tsx
index 06d2800412..5e9a27c4f2 100644
--- a/apps/cowswap-frontend/src/common/containers/OrderHooksDetails/index.tsx
+++ b/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
Hooks
+ {hasSomeFailedSimulation && Simulation failed}
+ {isValidating && }
setOpen(!isOpen)}>
{preHooksToDapp.length > 0 && (
diff --git a/apps/cowswap-frontend/src/common/containers/OrderHooksDetails/styled.tsx b/apps/cowswap-frontend/src/common/containers/OrderHooksDetails/styled.tsx
index 55f511bc35..dfc2f9716c 100644
--- a/apps/cowswap-frontend/src/common/containers/OrderHooksDetails/styled.tsx
+++ b/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);
+ }
+ }
+`