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); + } + } +`