Perps Alpha Link (#1843)

* add link to perps v2 alpha * add badge * fix theming
Kwenta · Jan 6, 2023 · a96397b · a96397b
1 parent 4c53230
commit a96397b
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 12 deletions.
diff --git a/assets/svg/app/link-light.svg b/assets/svg/app/link-light.svg
diff --git a/components/Nav/DropDownLabel.tsx b/components/Nav/DropDownLabel.tsx
@@ -2,13 +2,17 @@ import styled from 'styled-components';
 
 import { FlexDivRow } from 'styles/common';
 
-export const LabelContainer = styled(FlexDivRow)<{ noPadding?: boolean }>`
+export const LabelContainer = styled(FlexDivRow)<{ noPadding?: boolean; external?: boolean }>`
  padding: ${(props) => !props.noPadding && '16px'};
  font-size: 13px;
  align-items: center;
  font-family: ${(props) => props.theme.fonts.regular};
  width: 100%;
- color: ${(props) => props.theme.colors.selectedTheme.button.text.primary};
+ color: ${(props) =>
+ props.external
+ ? props.theme.colors.selectedTheme.button.yellow.text
+ : props.theme.colors.selectedTheme.button.text.primary};
+
  :hover {
  > svg {
  path {
@@ -18,7 +22,10 @@ export const LabelContainer = styled(FlexDivRow)<{ noPadding?: boolean }>`
  }
  > svg {
  path {
- fill: ${(props) => props.theme.colors.selectedTheme.icon.fill};
+ fill: ${(props) =>
+ props.external
+ ? props.theme.colors.selectedTheme.white
+ : props.theme.colors.selectedTheme.icon.fill};
  }
  }
 `;

diff --git a/constants/links.ts b/constants/links.ts
@@ -48,6 +48,7 @@ export const EXTERNAL_LINKS = {
  },
  Trade: {
  NextPriceBlogPost: 'https://docs.kwenta.io/products/futures/next-price',
+ PerpsV2: 'https://alpha.kwenta.eth.limo/market/?accountType=isolated_margin&asset=sETH',
  },
  Governance: {
  Kips: 'https://kips.kwenta.io/all-kip/',

diff --git a/sections/shared/Layout/AppLayout/Header/Nav/Nav.tsx b/sections/shared/Layout/AppLayout/Header/Nav/Nav.tsx
@@ -21,6 +21,7 @@ type ReactSelectOptionProps = {
  link: string;
  badge: BadgeType[];
  Icon: FunctionComponent<any>;
+ externalLink?: boolean;
 };
 
 const Nav: FC = () => {
@@ -38,6 +39,7 @@ const Nav: FC = () => {
  badge,
  link,
  isActive,
+ externalLink,
  }: ReactSelectOptionProps) => {
  if (i18nLabel === 'header.nav.markets' || i18nLabel === 'header.nav.leaderboard')
  return (
@@ -47,14 +49,16 @@ const Nav: FC = () => {
  );
  return (
  <Link href={link}>
- <LabelContainer>
- <NavLabel>
- {t(i18nLabel)}
- {badge &&
- badge.map(({ i18nLabel, color }) => <Badge color={color}>{t(i18nLabel)}</Badge>)}
- </NavLabel>
- {Icon && <Icon />}
- </LabelContainer>
+ <a target={externalLink ? '_blank' : ''} rel={externalLink ? 'noopener noreferrer' : ''}>
+ <LabelContainer external={externalLink}>
+ <NavLabel>
+ {t(i18nLabel)}
+ {badge &&
+ badge.map(({ i18nLabel, color }) => <Badge color={color}>{t(i18nLabel)}</Badge>)}
+ </NavLabel>
+ {Icon && <Icon />}
+ </LabelContainer>
+ </a>
  </Link>
  );
  };
@@ -142,7 +146,6 @@ const DropDownSelect = styled(Select)`
  padding: 20px;
 
  .react-select__group-heading {
- color: ${(props) => props.theme.colors.selectedTheme.button.text.primary};
  font-size: 12px;
  padding: 0;
  margin-bottom: 15px;
@@ -156,6 +159,12 @@ const DropDownSelect = styled(Select)`
  padding: 0;
  }
 
+ .react-select__menu-list {
+ .react-select__option:last-child {
+ background-color: ${(props) => props.theme.colors.selectedTheme.button.yellow.fill};
+ }
+ }
+
  .react-select__value-container {
  padding: 0px;
  width: ${(props) => {

diff --git a/sections/shared/Layout/AppLayout/Header/constants.tsx b/sections/shared/Layout/AppLayout/Header/constants.tsx
@@ -1,5 +1,6 @@
 import { FunctionComponent } from 'react';
 
+import LinkIconLight from 'assets/svg/app/link-light.svg';
 import { CrossMarginIcon, IsolatedMarginIcon } from 'components/Nav/FuturesIcon';
 import { COMPETITION_ENABLED } from 'constants/competition';
 import { CROSS_MARGIN_ENABLED, DEFAULT_FUTURES_MARGIN_TYPE } from 'constants/defaults';
@@ -16,6 +17,7 @@ export type SubMenuLink = {
  link: string;
  badge?: Badge[];
  Icon?: FunctionComponent<any>;
+ externalLink?: boolean;
 };
 
 export type MenuLink = {
@@ -99,6 +101,18 @@ export const getMenuLinks = (isMobile: boolean): MenuLinks => [
  ],
  Icon: CrossMarginIcon,
  },
+ {
+ link: EXTERNAL_LINKS.Trade.PerpsV2,
+ externalLink: true,
+ i18nLabel: 'header.nav.v2-alpha',
+ badge: [
+ {
+ i18nLabel: 'header.nav.alpha-badge',
+ color: 'red',
+ },
+ ],
+ Icon: LinkIconLight,
+ },
  ]
  : null,
  },

diff --git a/translations/en.json b/translations/en.json
@@ -16,11 +16,13 @@
  "markets": "futures",
  "isolated-margin": "Isolated Margin",
  "cross-margin": "Cross Margin",
+ "v2-alpha": "Try Futures V2 Alpha",
  "leaderboard-alltime": "All Time",
  "competition-round-1": "Round 1",
  "competition-round-2": "Round 2",
  "leaderboard": "leaderboard",
  "earn": "earn",
+ "alpha-badge": "Alpha",
  "beta-badge": "Beta",
  "reward-badge": "Rewards"
  },