From c0bd95f5f36dece4ae638a4559e99d6781a4fb98 Mon Sep 17 00:00:00 2001 From: fairlighteth <31534717+fairlighteth@users.noreply.github.com> Date: Thu, 18 Dec 2025 16:56:08 +0000 Subject: [PATCH] refactor: centralize CoW Swap CTA cta constants --- apps/cow-fi/app/(main)/cow-swap/page.tsx | 23 +++++++++++++---------- apps/cow-fi/components/Layout/const.ts | 6 ++++-- apps/cow-fi/const/cta.ts | 7 +++++++ apps/cow-fi/data/home/const.tsx | 9 +++++---- 4 files changed, 29 insertions(+), 16 deletions(-) create mode 100644 apps/cow-fi/const/cta.ts diff --git a/apps/cow-fi/app/(main)/cow-swap/page.tsx b/apps/cow-fi/app/(main)/cow-swap/page.tsx index 8194b90ba69..6719a8a1cf9 100644 --- a/apps/cow-fi/app/(main)/cow-swap/page.tsx +++ b/apps/cow-fi/app/(main)/cow-swap/page.tsx @@ -1,5 +1,6 @@ 'use client' +import type { ReactNode } from 'react' import { useEffect, useRef } from 'react' import { useCowAnalytics } from '@cowprotocol/analytics' @@ -10,10 +11,13 @@ import IMG_ICON_UNICORN from '@cowprotocol/assets/images/icon-unicorn.svg' import IMG_COWSWAP_HERO from '@cowprotocol/assets/images/image-cowswap-hero.svg' import { Color, ProductLogo, ProductVariant, UI } from '@cowprotocol/ui' +import { CowFiCategory } from 'src/common/analytics/types' + import FAQ from '@/components/FAQ' import LazyLoadTweet from '@/components/LazyLoadTweet' import LazySVG from '@/components/LazySVG' import { Link, LinkType } from '@/components/Link' +import { COW_SWAP_CTA } from '@/const/cta' import { ADVANCED_ORDER_TYPES, BETTER_UX, COW_IS_DIFFERENT, FAQ_DATA, TWEETS } from '@/data/cow-swap/const' import { ContainerCard, @@ -38,9 +42,8 @@ import { TopicList, TopicTitle, } from '@/styles/styled' -import { CowFiCategory } from 'src/common/analytics/types' -export default function Page() { +export default function Page(): ReactNode { const analytics = useCowAnalytics() const tweetSectionRef = useRef(null) @@ -82,18 +85,18 @@ export default function Page() { analytics.sendEvent({ category: CowFiCategory.COWSWAP, - action: 'click-launch-app', + action: COW_SWAP_CTA.action, }) } > - Launch app + {COW_SWAP_CTA.text} @@ -416,18 +419,18 @@ export default function Page() { analytics.sendEvent({ category: CowFiCategory.COWSWAP, - action: 'click-launch-app', + action: COW_SWAP_CTA.action, }) } > - Launch app + {COW_SWAP_CTA.text} diff --git a/apps/cow-fi/components/Layout/const.ts b/apps/cow-fi/components/Layout/const.ts index 28c4916661c..78d0e3002e1 100644 --- a/apps/cow-fi/components/Layout/const.ts +++ b/apps/cow-fi/components/Layout/const.ts @@ -3,6 +3,8 @@ import { MenuItem, ProductVariant, Color, UI } from '@cowprotocol/ui' import { CowFiCategory } from 'src/common/analytics/types' +import { COW_SWAP_CTA } from '@/const/cta' + const analytics = initGtm() export const PAGE_MAX_WIDTH = 1760 @@ -106,8 +108,8 @@ export const NAV_ADDITIONAL_BUTTONS = [ color: Color.cowamm_green, }, { - label: 'Trade on CoW Swap', - href: 'https://swap.cow.fi/#/1/swap/USDC/COW', + label: COW_SWAP_CTA.text, + href: COW_SWAP_CTA.deeplinkHref, utmContent: 'menubar-nav-button-trade-on-cow-swap', onClick: () => analytics.sendEvent({ diff --git a/apps/cow-fi/const/cta.ts b/apps/cow-fi/const/cta.ts new file mode 100644 index 00000000000..0aa1969be10 --- /dev/null +++ b/apps/cow-fi/const/cta.ts @@ -0,0 +1,7 @@ +export const COW_SWAP_CTA = { + text: 'Trade on CoW Swap', + action: 'click-trade-on-cow-swap', + utmContent: 'cow-swap-trade-on-cow-swap-button', + href: 'https://swap.cow.fi/', + deeplinkHref: 'https://swap.cow.fi/#/1/swap/USDC/COW', +} as const diff --git a/apps/cow-fi/data/home/const.tsx b/apps/cow-fi/data/home/const.tsx index 4884a525c58..0ab3bc66596 100644 --- a/apps/cow-fi/data/home/const.tsx +++ b/apps/cow-fi/data/home/const.tsx @@ -9,8 +9,10 @@ import IMG_TUBE from '@cowprotocol/assets/images/image-tube.svg' import { Color, ProductVariant, UI } from '@cowprotocol/ui' import SVG from 'react-inlinesvg' +import { CowFiCategory } from 'src/common/analytics/types' import { Link, LinkType } from '@/components/Link' +import { COW_SWAP_CTA } from '@/const/cta' import { ContainerCard, ContainerCardSection, @@ -23,7 +25,6 @@ import { TopicList, TopicTitle, } from '@/styles/styled' -import { CowFiCategory } from 'src/common/analytics/types' const analytics = initGtm() @@ -45,9 +46,9 @@ export const PRODUCT_LIST = [ { title: 'CoW Swap', description: 'The DEX that lets you do what you want', - linkHref: 'https://swap.cow.fi/#/1/swap/USDC/COW', - linkText: 'Start trading', - linkEvent: 'click-trade-on-cow-swap', + linkHref: COW_SWAP_CTA.deeplinkHref, + linkText: COW_SWAP_CTA.text, + linkEvent: COW_SWAP_CTA.action, linkExternal: true, linkUtmContent: 'home-page-trade-on-cow-swap', bgColor: `var(${UI.COLOR_BLUE_300_PRIMARY})`,