diff --git a/apps/cowswap-frontend/src/modules/mainMenu/constants/mainMenu.tsx b/apps/cowswap-frontend/src/modules/mainMenu/constants/mainMenu.tsx index f4cc4b04df..ee2b62c335 100644 --- 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 index b5ba054f26..f9706a0914 100644 --- 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 = const isExternal = kind === MenuItemKind.EXTERNAL_LINK const isDynamic = kind === MenuItemKind.PARAMETRIZED_LINK @@ -70,6 +72,7 @@ function Link({ link, context }: InternalExternalLinkProps) { {menuImage} {title} + {badge && {badge}} ) } @@ -78,6 +81,7 @@ function Link({ link, context }: InternalExternalLinkProps) { {menuImage} {title} + {badge && {badge}} ) } diff --git a/apps/cowswap-frontend/src/modules/mainMenu/pure/MenuTree/styled.ts b/apps/cowswap-frontend/src/modules/mainMenu/pure/MenuTree/styled.ts new file mode 100644 index 0000000000..bb5af729cf --- /dev/null +++ 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 index c5029891b7..90708b7610 100644 --- 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 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 new file mode 100644 index 0000000000..f4ec9ccc06 --- /dev/null +++ b/libs/assets/src/cow-swap/widget-icon.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/libs/common-const/src/common.ts b/libs/common-const/src/common.ts index 971697adfd..9be8964c2e 100644 --- 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/