feat: switch cowfi header cta button (#4769)

* feat: switch cowfi header cta button * feat: lint fix * feat: add cow-amm text changes * feat: fix capitalization
cowprotocol · Aug 8, 2024 · f87c0fe · f87c0fe
1 parent 344fbd2
commit f87c0fe
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 19 deletions.
diff --git a/apps/cow-fi/components/Layout/const.ts b/apps/cow-fi/components/Layout/const.ts
@@ -1,4 +1,5 @@
 import { MenuItem, ProductVariant } from '@cowprotocol/ui'
+import { clickOnNavigation } from 'modules/analytics'
 
 export const PAGE_MAX_WIDTH = 1760
 export const THEME_MODE = 'dark'
@@ -80,20 +81,30 @@ export const NAV_ITEMS: MenuItem[] = [
 ]
 
 export const NAV_ADDITIONAL_BUTTONS = [
+  // {
+  //   label: 'Use MEV Blocker',
+  //   href: 'https://cow.fi/mev-blocker',
+  //   utmContent: 'menubar-nav-button-use-mev-blocker',
+  //   external: true,
+  //   isButton: true,
+  //   bgColor: '#EC4612',
+  //   color: '#FEE7CF',
+  // },
   {
-    label: 'Use MEV Blocker',
-    href: 'https://cow.fi/mev-blocker',
-    utmContent: 'menubar-nav-button-use-mev-blocker',
+    label: 'LP on CoW AMM',
+    href: 'https://balancer.fi/pools/cow',
+    utmContent: 'menubar-nav-button-lp-on-cow-amm',
+    onClick: () => clickOnNavigation('click-lp-on-cow-amm'),
     external: true,
     isButton: true,
-    bgColor: '#EC4612',
-    color: '#FEE7CF',
+    bgColor: '#194D05',
+    color: '#BCEC79',
   },
-
   {
     label: 'Trade on CoW Swap',
     href: 'https://swap.cow.fi/#/1/swap/USDC/COW',
     utmContent: 'menubar-nav-button-trade-on-cow-swap',
+    onClick: () => clickOnNavigation('click-trade-on-cow-swap'),
     external: true,
     isButton: true,
     bgColor: '#65D9FF',

diff --git a/apps/cow-fi/modules/analytics/events.ts b/apps/cow-fi/modules/analytics/events.ts
@@ -108,3 +108,10 @@ export function clickOnLegal(event: string) {
     action: event,
   })
 }
+
+export function clickOnNavigation(event: string) {
+  cowAnalytics.sendEvent({
+    category: Category.NAVIGATION,
+    action: event,
+  })
+}
diff --git a/apps/cow-fi/pages/cow-amm.tsx b/apps/cow-fi/pages/cow-amm.tsx
@@ -66,13 +66,13 @@ export default function Page() {
             <Link
               bgColor={'#194D05'}
               color={'#BCEC79'}
-              href="https://deploy-cow-amm.bleu.fi/"
+              href="https://balancer.fi/pools/cow"
               external
               linkType={LinkType.HeroButton}
-              utmContent={'cow-amm-hero-button-protect-liquidity'}
-              onClick={() => clickOnCowAmm('click-protect-liquidity')}
+              utmContent={'cow-amm-hero-button-lp-on-cow-amm'}
+              onClick={() => clickOnCowAmm('click-lp-on-cow-amm')}
             >
-              Protect your liquidity
+              LP on CoW AMM ↗
             </Link>
           </HeroContent>
           <HeroImage width={470} height={470} color={'#194D05'} marginMobile="24px auto 56px">
@@ -82,16 +82,16 @@ export default function Page() {
 
         <MetricsCard bgColor={Color.neutral100} color="#194D05" columns={3} touchFooter>
           <MetricsItem dividerColor="#9BD955">
-            <h2>3%</h2>
-            <p>performance improvement over reference pool</p>
+            <h2>4.75%</h2>
+            <p>more TVL achieved than reference pool (beta phase)</p>
           </MetricsItem>
           <MetricsItem dividerColor="#9BD955">
-            <h2>$4.8M+</h2>
-            <p>liquidity protected from LVR</p>
+            <h2>$5M+</h2>
+            <p>liquidity protected from LVR (beta phase)</p>
           </MetricsItem>
           <MetricsItem>
-            <h2>$59K+</h2>
-            <p>surplus captured for LPs</p>
+            <h2>$90K+</h2>
+            <p>surplus captured for LPs (beta phase)</p>
           </MetricsItem>
 
           <Link
@@ -298,11 +298,12 @@ export default function Page() {
                 paddingMobile="0"
               >
                 <TopicCardInner contentAlign="left">
-                  <TopicTitle fontSize={52}>Unlock the power of passive income</TopicTitle>
+                  <TopicTitle fontSize={52}>Unlock the power of passive income while reducing risk</TopicTitle>
                   <TopicDescription fontSize={24} color={Color.neutral50}>
                     With LVR in the rear view mirror, providing liquidity becomes identical to running a passive
                     investment strategy: solvers rebalance the pool at the correct market price to keep the value of its
-                    reserves equal, thereby keeping portfolios balanced and reducing risk.
+                    reserves equal, thereby keeping portfolios balanced and reducing risk. On top of that, liquidity
+                    providers earn surplus when they trade with CoW Protocol traders.
                   </TopicDescription>
                 </TopicCardInner>
                 <TopicImage

diff --git a/apps/cowswap-frontend/src/modules/tradeQuote/hooks/useProcessUnsupportedTokenError.ts b/apps/cowswap-frontend/src/modules/tradeQuote/hooks/useProcessUnsupportedTokenError.ts
@@ -1,10 +1,10 @@
 import { useCallback } from 'react'
 
 import { getQuoteUnsupportedToken } from '@cowprotocol/common-utils'
+import { SupportedChainId } from '@cowprotocol/cow-sdk'
 import { useAddUnsupportedToken } from '@cowprotocol/tokens'
 
 import QuoteApiError from 'api/cowProtocol/errors/QuoteError'
-import { SupportedChainId } from '@cowprotocol/cow-sdk'
 
 export function useProcessUnsupportedTokenError() {
   const addGpUnsupportedToken = useAddUnsupportedToken()