fix: add new label to Hooks tab

cowprotocol · Oct 16, 2024 · 6bd7efc · 6bd7efc
1 parent 60b87ef
commit 6bd7efc
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 63 deletions.
diff --git a/apps/cowswap-frontend/src/common/constants/routes.ts b/apps/cowswap-frontend/src/common/constants/routes.ts
@@ -37,7 +37,13 @@ export const Routes = {
 export type RoutesKeys = keyof typeof Routes
 export type RoutesValues = (typeof Routes)[RoutesKeys]
 
-export const MENU_ITEMS: { route: RoutesValues; label: string; fullLabel?: string; description: string }[] = [
+export const MENU_ITEMS: {
+  route: RoutesValues
+  label: string
+  fullLabel?: string
+  description: string
+  badge?: string
+}[] = [
   { 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' },
@@ -47,4 +53,5 @@ export const HOOKS_STORE_MENU_ITEM = {
   route: Routes.HOOKS,
   label: 'Hooks',
   description: 'Powerful tool to generate pre/post interaction for CoW Protocol',
+  badge: 'New',
 }
diff --git a/apps/cowswap-frontend/src/modules/trade/containers/TradeWidgetLinks/index.cosmos.tsx b/apps/cowswap-frontend/src/modules/trade/containers/TradeWidgetLinks/index.cosmos.tsx
diff --git a/apps/cowswap-frontend/src/modules/trade/containers/TradeWidgetLinks/index.tsx b/apps/cowswap-frontend/src/modules/trade/containers/TradeWidgetLinks/index.tsx
@@ -1,7 +1,6 @@
 import { useMemo, useState } from 'react'
 
 import { Command } from '@cowprotocol/types'
-import { BadgeType } from '@cowprotocol/ui'
 import type { TradeType } from '@cowprotocol/widget-lib'
 
 import { Trans } from '@lingui/macro'
@@ -23,6 +22,7 @@ import { parameterizeTradeRoute } from '../../utils/parameterizeTradeRoute'
 interface MenuItemConfig {
   route: RoutesValues
   label: string
+  badge?: string
 }
 
 const TRADE_TYPE_TO_ROUTE: Record<TradeType, string> = {
@@ -32,16 +32,10 @@ const TRADE_TYPE_TO_ROUTE: Record<TradeType, string> = {
 }
 
 interface TradeWidgetLinksProps {
-  highlightedBadgeText?: string
-  highlightedBadgeType?: BadgeType
   isDropdown?: boolean
 }
 
-export function TradeWidgetLinks({
-  highlightedBadgeText,
-  highlightedBadgeType,
-  isDropdown = false,
-}: TradeWidgetLinksProps) {
+export function TradeWidgetLinks({ isDropdown = false }: TradeWidgetLinksProps) {
   const tradeContext = useTradeRouteContext()
   const location = useLocation()
   const [isDropdownVisible, setDropdownVisible] = useState(false)
@@ -72,23 +66,12 @@ export function TradeWidgetLinks({
           routePath={routePath}
           item={item}
           isActive={isActive}
-          badgeText={highlightedBadgeText}
-          badgeType={highlightedBadgeType}
           onClick={() => handleMenuItemClick(item)}
           isDropdownVisible={isDropdown && isDropdownVisible}
         />
       )
     })
-  }, [
-    isDropdown,
-    isDropdownVisible,
-    enabledItems,
-    tradeContext,
-    location.pathname,
-    highlightedBadgeText,
-    highlightedBadgeType,
-    handleMenuItemClick,
-  ])
+  }, [isDropdown, isDropdownVisible, enabledItems, tradeContext, location.pathname, handleMenuItemClick])
 
   const singleMenuItem = menuItemsElements.length === 1
 
@@ -122,25 +105,21 @@ const MenuItem = ({
   routePath,
   item,
   isActive,
-  badgeText,
-  badgeType,
   onClick,
   isDropdownVisible,
 }: {
   routePath: string
   item: MenuItemConfig
   isActive: boolean
-  badgeText?: string
-  badgeType?: BadgeType
   onClick: Command
   isDropdownVisible: boolean
 }) => (
   <styledEl.MenuItem isActive={isActive} onClick={onClick} isDropdownVisible={isDropdownVisible}>
     <styledEl.Link to={routePath}>
       <Trans>{item.label}</Trans>
-      {!isActive && badgeText && (
-        <styledEl.Badge type={badgeType}>
-          <Trans>{badgeText}</Trans>
+      {!isActive && item.badge && (
+        <styledEl.Badge type="information">
+          <Trans>{item.badge}</Trans>
         </styledEl.Badge>
       )}
     </styledEl.Link>