Merge pull request #5121 from cowprotocol/release/2024-11-21

Release 2024-11-21

Author: shoom3301

apps/cowswap-frontend/src/common/constants/routes.ts

@@ -1,4 +1,6 @@
+import EXPERIMENT_ICON from '@cowprotocol/assets/cow-swap/experiment.svg'
 import { isInjectedWidget } from '@cowprotocol/common-utils'
+import { BadgeTypes } from '@cowprotocol/ui'
 
 export const TRADE_WIDGET_PREFIX = isInjectedWidget() ? '/widget' : ''
 
@@ -39,29 +41,35 @@ export const Routes = {
 export type RoutesKeys = keyof typeof Routes
 export type RoutesValues = (typeof Routes)[RoutesKeys]
 
-export const MENU_ITEMS: {
+export interface IMenuItem {
   route: RoutesValues
   label: string
   fullLabel?: string
   description: string
   badge?: string
-}[] = [
+  badgeImage?: string
+  badgeType?: (typeof BadgeTypes)[keyof typeof BadgeTypes]
+}
+
+export const MENU_ITEMS: IMenuItem[] = [
   { route: Routes.SWAP, label: 'Swap', description: 'Trade tokens' },
   { route: Routes.LIMIT_ORDER, label: 'Limit', fullLabel: 'Limit order', description: 'Set your own price' },
   { route: Routes.ADVANCED_ORDERS, label: 'TWAP', description: 'Place orders with a time-weighted average price' },
 ]
 
-export const HOOKS_STORE_MENU_ITEM = {
+export const HOOKS_STORE_MENU_ITEM: IMenuItem = {
   route: Routes.HOOKS,
   label: 'Hooks',
   description: 'Powerful tool to generate pre/post interaction for CoW Protocol',
-  badge: '🧪',
+  badgeImage: EXPERIMENT_ICON,
+  badgeType: BadgeTypes.INFORMATION,
 }
 
-export const YIELD_MENU_ITEM = {
+export const YIELD_MENU_ITEM: IMenuItem = {
   route: Routes.YIELD,
   label: 'Yield',
   fullLabel: 'Yield',
   description: 'Provide liquidity',
   badge: 'New',
+  badgeType: BadgeTypes.ALERT,
 }

apps/cowswap-frontend/src/common/containers/CoWAmmBanner/useVampireAttack.ts

@@ -18,9 +18,10 @@ interface OrderHooksDetailsProps {
   appData: string | AppDataInfo
   children: (content: ReactElement) => ReactElement
   margin?: string
+  isTradeConfirmation?: boolean
 }
 
-export function OrderHooksDetails({ appData, children, margin }: OrderHooksDetailsProps) {
+export function OrderHooksDetails({ appData, children, margin, isTradeConfirmation }: OrderHooksDetailsProps) {
   const [isOpen, setOpen] = useState(false)
   const appDataDoc = useMemo(() => {
     return typeof appData === 'string' ? decodeAppData(appData) : appData.doc
@@ -33,14 +34,14 @@ export function OrderHooksDetails({ appData, children, margin }: OrderHooksDetai
   const { mutate, isValidating, data } = useTenderlyBundleSimulation()
 
   useEffect(() => {
-    mutate()
-  }, []) // eslint-disable-line react-hooks/exhaustive-deps
+    if (isTradeConfirmation) mutate()
+  }, [isTradeConfirmation, mutate])
 
   if (!appDataDoc) return null
 
   const metadata = appDataDoc.metadata as latest.Metadata
 
-  const hasSomeFailedSimulation = Object.values(data || {}).some((hook) => !hook.status)
+  const hasSomeFailedSimulation = isTradeConfirmation && Object.values(data || {}).some((hook) => !hook.status)
 
   const preHooksToDapp = matchHooksToDappsRegistry(metadata.hooks?.pre || [], preCustomHookDapps)
   const postHooksToDapp = matchHooksToDappsRegistry(metadata.hooks?.post || [], postCustomHookDapps)
@@ -76,8 +77,8 @@ export function OrderHooksDetails({ appData, children, margin }: OrderHooksDetai
       </styledEl.Summary>
       {isOpen && (
         <styledEl.Details>
-          <HooksInfo data={preHooksToDapp} hooks={hooks.preHooks} title="Pre Hooks" />
-          <HooksInfo data={postHooksToDapp} hooks={hooks.postHooks} title="Post Hooks" />
+          <HooksInfo data={preHooksToDapp} hooks={isTradeConfirmation ? hooks.preHooks : []} title="Pre Hooks" />
+          <HooksInfo data={postHooksToDapp} hooks={isTradeConfirmation ? hooks.postHooks : []} title="Post Hooks" />
         </styledEl.Details>
       )}
     </styledEl.Wrapper>,

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

@@ -5,9 +5,9 @@ import { isLocal } from '@cowprotocol/common-utils'
 
 import { useHooksEnabled } from 'legacy/state/user/hooks'
 
-import { HOOKS_STORE_MENU_ITEM, MENU_ITEMS, YIELD_MENU_ITEM } from '../constants/routes'
+import { HOOKS_STORE_MENU_ITEM, MENU_ITEMS, IMenuItem, YIELD_MENU_ITEM } from '../constants/routes'
 
-export function useMenuItems() {
+export function useMenuItems(): IMenuItem[] {
   const isHooksEnabled = useHooksEnabled()
   const { isYieldEnabled } = useFeatureFlags()
 

apps/cowswap-frontend/src/common/hooks/useMenuItems.ts

@@ -16,7 +16,7 @@ export function ExternalSourceAlert({ className, onChange, title, children }: Ex
   return (
     <styledEl.Contents className={className}>
       <AlertTriangle size={48} strokeWidth={1} />
-      <h3>{title}</h3>
+      <styledEl.Title>{title}</styledEl.Title>
       {children}
 
       <styledEl.AcceptanceBox>

apps/cowswap-frontend/src/common/pure/ExternalSourceAlert/index.tsx

@@ -14,24 +14,21 @@ export const Contents = styled.div`
   color: var(${UI.COLOR_DANGER_TEXT});
   background: var(${UI.COLOR_DANGER_BG});
 
-  h3 {
-    font-size: 24px;
-    text-align: center;
-    margin: 16px 0;
-    font-weight: bold;
-  }
-
-  p {
-    margin: 6px 0;
-  }
-
   > svg > path,
   > svg > line {
     stroke: var(${UI.COLOR_DANGER_TEXT});
     stroke-width: 2px;
   }
 `
 
+export const Title = styled.h4`
+  font-size: 24px;
+  text-align: center;
+  margin: 16px 0;
+  font-weight: bold;
+  width: 100%;
+`
+
 export const AcceptanceBox = styled.label`
   display: flex;
   gap: 6px;

apps/cowswap-frontend/src/common/pure/ExternalSourceAlert/styled.tsx

@@ -84,7 +84,9 @@ const InvertIcon = styled.div`
     min-width: var(--size);
     min-height: var(--size);
     border-radius: var(--size);
-    transition: background var(${UI.ANIMATION_DURATION}) ease-in-out, var(${UI.ANIMATION_DURATION}) ease-in-out;
+    transition:
+      background var(${UI.ANIMATION_DURATION}) ease-in-out,
+      var(${UI.ANIMATION_DURATION}) ease-in-out;
   }
 
   > svg {
@@ -118,7 +120,7 @@ export const RateWrapper = styled.button`
   color: inherit;
   font-size: 13px;
   letter-spacing: -0.1px;
-  text-align: right;
+  text-align: left;
   font-weight: 500;
   width: 100%;
 `

apps/cowswap-frontend/src/common/pure/RateInfo/index.tsx

@@ -25,18 +25,17 @@ export const Details = styled.div`
 
 export const Summary = styled.div`
   display: grid;
-  grid-template-columns: auto 1fr;
+  grid-template-columns: 1fr auto;
   justify-content: space-between;
   align-items: center;
   width: 100%;
-  gap: 8px;
+  gap: 10px;
   font-size: inherit;
   font-weight: inherit;
 
   span {
     font-size: inherit;
     font-weight: inherit;
-    white-space: nowrap;
   }
 `
 

apps/cowswap-frontend/src/common/pure/TradeDetailsAccordion/styled.ts

@@ -50,5 +50,9 @@ export function LpBalancesAndAllowancesUpdater({ account, chainId, enablePolling
     return () => clearTimeout(timeout)
   }, [])
 
+  useEffect(() => {
+    setAreLpBalancesLoaded(false)
+  }, [account, setAreLpBalancesLoaded])
+
   return null
 }

apps/cowswap-frontend/src/common/updaters/LpBalancesAndAllowancesUpdater.tsx

@@ -102,7 +102,7 @@ export const Input = React.memo(function InnerInput({
       pattern="^[0-9]*[.,]?[0-9]*$"
       placeholder={placeholder || '0.0'}
       minLength={1}
-      maxLength={79}
+      maxLength={32}
       spellCheck="false"
     />
   )