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/