feat: trigger extra simulation on swap review

bleu · Nov 8, 2024 · 389608d · 389608d
1 parent d2b652d
commit 389608d
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 1 deletion.
diff --git 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
         <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 && (

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