v5.3.5 (#1840)

* Query open orders from contract instead of subgraph (#1833) * Fixed the wrong reward badge after the market page refresh (#1836) * Fixed the issue that showing the wrong reward badge after page refresh * Move the staking data fetch to the hook * Cleaned the unnecessary changes * Perps Alpha Link (#1843) * add link to perps v2 alpha * add badge * fix theming Co-authored-by: Adam Clarke <adam@adamclarke.co> Co-authored-by: troyb.eth <me@troyb.xyz>
Kwenta · Jan 6, 2023 · 86b5991 · 86b5991 · vercel · Jan 6, 2023
1 parent b139a89
commit 86b5991
Show file tree

Hide file tree

Showing 8 changed files with 52 additions and 22 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/futures/FeeInfoBox/FeeInfoBox.tsx b/sections/futures/FeeInfoBox/FeeInfoBox.tsx
@@ -1,5 +1,5 @@
 import router from 'next/router';
-import React, { FC, useMemo, useEffect } from 'react';
+import React, { FC, useMemo } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 
@@ -22,8 +22,7 @@ import {
 	selectOrderType,
 	selectTradeSizeInputs,
 } from 'state/futures/selectors';
-import { useAppDispatch, useAppSelector } from 'state/hooks';
-import { fetchStakingData } from 'state/staking/actions';
+import { useAppSelector } from 'state/hooks';
 import {
 	selectStakedEscrowedKwentaBalance,
 	selectStakedKwentaBalance,
@@ -35,7 +34,6 @@ import { formatCurrency, formatDollars, formatPercent, zeroBN } from 'utils/form
 const FeeInfoBox: React.FC = () => {
 	const { t } = useTranslation();
 	const { walletAddress } = Connector.useContainer();
-	const dispatch = useAppDispatch();
 	const orderType = useAppSelector(selectOrderType);
 	const stakedEscrowedKwentaBalance = useAppSelector(selectStakedEscrowedKwentaBalance);
 	const stakedKwentaBalance = useAppSelector(selectStakedKwentaBalance);
@@ -82,12 +80,6 @@ const FeeInfoBox: React.FC = () => {
 		[walletAddress, stakedKwentaBalance, stakedEscrowedKwentaBalance]
 	);
 
-	useEffect(() => {
-		if (!!walletAddress) {
-			dispatch(fetchStakingData());
-		}
-	}, [dispatch, walletAddress]);
-
 	const feesInfo = useMemo<Record<string, DetailedInfo | null | undefined>>(() => {
 		const crossMarginFeeInfo = {
 			'Protocol Fee': {

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/state/futures/hooks.ts b/state/futures/hooks.ts
@@ -1,4 +1,5 @@
 import { useAppSelector, useFetchAction, usePollAction } from 'state/hooks';
+import { fetchStakingData } from 'state/staking/actions';
 import { selectNetwork, selectWallet } from 'state/wallet/selectors';
 
 import {
@@ -21,6 +22,7 @@ export const usePollMarketFuturesData = () => {
 	const selectedAccountType = useAppSelector(selectFuturesType);
 
 	useFetchAction(fetchCrossMarginSettings, { changeKeys: [networkId] });
+	useFetchAction(fetchStakingData, { changeKeys: [networkId, wallet] });
 	usePollAction('fetchSharedFuturesData', fetchSharedFuturesData, {
 		dependencies: [networkId],
 		intervalTime: 60000,

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"
 		},