From 6bd7efc364f2ffc256d0065ad9f238ddc314ee4d Mon Sep 17 00:00:00 2001
From: Alexandr Kazachenko <shoom3301@gmail.com>
Date: Wed, 16 Oct 2024 15:17:14 +0500
Subject: [PATCH] fix: add new label to Hooks tab

---
 .../src/common/constants/routes.ts            |  9 ++++-
 .../TradeWidgetLinks/index.cosmos.tsx         | 35 -------------------
 .../containers/TradeWidgetLinks/index.tsx     | 33 ++++-------------
 3 files changed, 14 insertions(+), 63 deletions(-)
 delete mode 100644 apps/cowswap-frontend/src/modules/trade/containers/TradeWidgetLinks/index.cosmos.tsx

diff --git a/apps/cowswap-frontend/src/common/constants/routes.ts b/apps/cowswap-frontend/src/common/constants/routes.ts
index 1457da5df3..bdc140310a 100644
--- 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
deleted file mode 100644
index 77fed8e4d1..0000000000
--- a/apps/cowswap-frontend/src/modules/trade/containers/TradeWidgetLinks/index.cosmos.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { BadgeType } from '@cowprotocol/ui'
-
-import { Widget } from 'modules/application/pure/Widget'
-
-import { TradeWidgetLinks } from './index'
-
-type BadgeInfo = {
-  text: string
-  type: BadgeType
-}
-
-const BADGES: BadgeInfo[] = [
-  { text: 'BETA', type: 'default' },
-  { text: 'NEW!', type: 'success' },
-  { text: 'ALPHA', type: 'alert' },
-  { text: 'NEW!', type: 'alert2' },
-  { text: 'RELEASE', type: 'information' },
-]
-
-type Fixtures = {
-  [key: string]: React.FunctionComponent
-}
-
-const BadgeFixtures = BADGES.reduce<Fixtures>((fixtures, badge) => {
-  const Fixture = () => (
-    <Widget>
-      <TradeWidgetLinks highlightedBadgeText={badge.text} highlightedBadgeType={badge.type} />
-    </Widget>
-  )
-
-  fixtures[`Badge - ${badge.text} (${badge.type})`] = Fixture
-  return fixtures
-}, {})
-
-export default BadgeFixtures
diff --git a/apps/cowswap-frontend/src/modules/trade/containers/TradeWidgetLinks/index.tsx b/apps/cowswap-frontend/src/modules/trade/containers/TradeWidgetLinks/index.tsx
index cb7c298f86..2e99cb8b40 100644
--- 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>