feat(widget): add widget link to main menu

cowprotocol · Nov 10, 2023 · cbf125d · cbf125d
1 parent c953137
commit cbf125d
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 1 deletion.
diff --git a/apps/cowswap-frontend/src/modules/mainMenu/constants/mainMenu.tsx b/apps/cowswap-frontend/src/modules/mainMenu/constants/mainMenu.tsx
@@ -9,12 +9,14 @@ import IMAGE_PIE from '@cowprotocol/assets/cow-swap/pie.svg'
 import IMAGE_PRIVACY_POLICY from '@cowprotocol/assets/cow-swap/privacy-policy.svg'
 import IMAGE_TERMS_AND_CONDITIONS from '@cowprotocol/assets/cow-swap/terms-and-conditions.svg'
 import IMAGE_TWITTER from '@cowprotocol/assets/cow-swap/twitter.svg'
+import IMAGE_WIDGET_ICON from '@cowprotocol/assets/cow-swap/widget-icon.svg'
 import {
   CONTRACTS_CODE_LINK,
   DISCORD_LINK,
   DOCS_LINK,
   DUNE_DASHBOARD_LINK,
   TWITTER_LINK,
+  WIDGET_LANDING_LINK,
 } from '@cowprotocol/common-const'
 import { getExplorerBaseUrl } from '@cowprotocol/common-utils'
 import { ExternalLink } from '@cowprotocol/ui'
@@ -126,6 +128,15 @@ export const MAIN_MENU: MenuTreeItem[] = [
             iconSVG: IMAGE_CODE,
             kind: MenuItemKind.EXTERNAL_LINK,
           },
+
+          {
+            id: MainMenuItemId.WIDGET,
+            title: 'Widget',
+            url: WIDGET_LANDING_LINK,
+            iconSVG: IMAGE_WIDGET_ICON,
+            kind: MenuItemKind.EXTERNAL_LINK,
+            badge: 'New!',
+          },
         ],
       },
       {

diff --git a/apps/cowswap-frontend/src/modules/mainMenu/pure/MenuTree/index.tsx b/apps/cowswap-frontend/src/modules/mainMenu/pure/MenuTree/index.tsx
@@ -23,6 +23,8 @@ import { parameterizeTradeRoute } from 'modules/trade/utils/parameterizeTradeRou
 
 import { RoutesValues } from 'common/constants/routes'
 
+import { MenuBadge } from './styled'
+
 import { MAIN_MENU } from '../../constants/mainMenu'
 
 // Assets
@@ -58,7 +60,7 @@ function Link({ link, context }: InternalExternalLinkProps) {
     return <>{LinkComponent()}</>
   }
 
-  const { kind, title, url, iconSVG, icon } = link
+  const { kind, title, url, iconSVG, icon, badge } = link
   const menuImage = <MenuImage title={title} icon={icon} iconSVG={iconSVG} />
   const isExternal = kind === MenuItemKind.EXTERNAL_LINK
   const isDynamic = kind === MenuItemKind.PARAMETRIZED_LINK
@@ -70,6 +72,7 @@ function Link({ link, context }: InternalExternalLinkProps) {
       <ExternalLinkComponent href={url} onClickOptional={handleMobileMenuOnClick}>
         {menuImage}
         {title}
+        {badge && <MenuBadge>{badge}</MenuBadge>}
       </ExternalLinkComponent>
     )
   }
@@ -78,6 +81,7 @@ function Link({ link, context }: InternalExternalLinkProps) {
     <StyledNavLink to={internalUrl} end onClick={handleMobileMenuOnClick}>
       {menuImage}
       {title}
+      {badge && <MenuBadge>{badge}</MenuBadge>}
     </StyledNavLink>
   )
 }

diff --git a/apps/cowswap-frontend/src/modules/mainMenu/pure/MenuTree/styled.ts b/apps/cowswap-frontend/src/modules/mainMenu/pure/MenuTree/styled.ts
@@ -0,0 +1,20 @@
+import styled from 'styled-components/macro'
+
+import { UI } from 'common/constants/theme'
+
+export const MenuBadge = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 0 5px;
+  margin-left: 5px;
+  background: var(${UI.COLOR_ALERT2_BG});
+  color: var(${UI.COLOR_ALERT2_TEXT});
+  border: 0;
+  cursor: pointer;
+  border-radius: 16px;
+  font-size: 9px;
+  text-transform: uppercase;
+  letter-spacing: 0.2px;
+  font-weight: 600;
+  transition: color 0.15s ease-in-out;
+`
diff --git a/apps/cowswap-frontend/src/modules/mainMenu/types.ts b/apps/cowswap-frontend/src/modules/mainMenu/types.ts
@@ -35,6 +35,7 @@ export enum MainMenuItemId {
   OTHER_TERMS_AND_CONDITIONS = 'OTHER_TERMS_AND_CONDITIONS',
   OTHER_COOKIE_POLICY = 'OTHER_COOKIE_POLICY',
   OTHER_PRIVACY_POLICY = 'OTHER_PRIVACY_POLICY',
+  WIDGET = 'WIDGET',
 }
 
 export interface BasicMenuLink {
@@ -43,6 +44,7 @@ export interface BasicMenuLink {
   url: string
   icon?: string // If icon uses a regular <img /> tag
   iconSVG?: string
+  badge?: string
 }
 
 export interface InternalLink extends BasicMenuLink {

diff --git a/libs/assets/src/cow-swap/widget-icon.svg b/libs/assets/src/cow-swap/widget-icon.svg
diff --git a/libs/common-const/src/common.ts b/libs/common-const/src/common.ts
@@ -116,6 +116,7 @@ export const TWITTER_LINK = 'https://twitter.com/CoWSwap'
 export const GPAUDIT_LINK = 'https://github.com/cowprotocol/contracts/blob/main/audits/GnosisProtocolV2May2021.pdf'
 export const FLASHBOYS_LINK = 'https://arxiv.org/abs/1904.05234'
 export const COWWIKI_LINK = 'https://en.wikipedia.org/wiki/Coincidence_of_wants'
+export const WIDGET_LANDING_LINK = 'https://cow.fi/widget'
 export const GNOSIS_FORUM_ROADTODECENT_LINK = 'https://forum.gnosis.io/t/gpv2-road-to-decentralization/1245'
 
 // MEV Metrics from https://explore.flashbots.net/