chore: v2 trading rewards update (#2039)

* Added learn more button * Update the estimated info * Fixed the mobile display * Added kwenta logo next to the futures nav button * Upate the future icon on mobile menu * Fixed the height of trading rewards tab * Fixed the padding space * Try to fix the vertical alignment * Added a tooltip to futures nav and try to fix the vertical alignment of badge * Fixed the build error * Fixed the tooltip text on nav
Kwenta · Feb 22, 2023 · cdb7111 · cdb7111 · vercel · Feb 22, 2023
1 parent 6c247bb
commit cdb7111
Show file tree

Hide file tree

Showing 10 changed files with 126 additions and 50 deletions.
diff --git a/assets/svg/app/eligible.svg b/assets/svg/app/eligible.svg
diff --git a/assets/svg/app/not-eligible.svg b/assets/svg/app/not-eligible.svg
diff --git a/assets/svg/brand/logo-yellow.svg b/assets/svg/brand/logo-yellow.svg
diff --git a/components/Text/LogoText.tsx b/components/Text/LogoText.tsx
@@ -1,19 +1,22 @@
 import { memo, FC } from 'react';
 import styled, { css } from 'styled-components';
 
+import HelpIcon from 'assets/svg/app/question-mark.svg';
 import KwentaLogo from 'assets/svg/earn/KWENTA.svg';
 
 import Heading from './Heading';
 
 type LogoTextProps = {
 	yellow?: boolean;
+	isToolTip?: boolean;
 };
 
-export const LogoText: FC<LogoTextProps> = memo(({ children, yellow }) => {
+export const LogoText: FC<LogoTextProps> = memo(({ children, yellow, isToolTip = false }) => {
 	return (
 		<div style={{ display: 'flex', alignItems: 'center' }}>
 			<TitleText $yellow={yellow}>{children}</TitleText>
 			<KwentaLogo />
+			{isToolTip && <SpacedHelpIcon />}
 		</div>
 	);
 });
@@ -30,4 +33,8 @@ const TitleText = styled(Heading)<{ $yellow?: boolean; $mono?: boolean }>`
 		`}
 `;
 
+const SpacedHelpIcon = styled(HelpIcon)`
+	margin-left: 8px;
+`;
+
 export default LogoText;
diff --git a/constants/links.ts b/constants/links.ts
@@ -46,6 +46,7 @@ export const EXTERNAL_LINKS = {
 		Faq: 'https://docs.kwenta.io/resources/faq',
 		CrossMarginFaq: 'https://docs.kwenta.io/products/futures/cross-margin-accounts',
 		Staking: 'https://docs.kwenta.io/using-kwenta/staking-kwenta',
+		TradingRewardsV2: 'https://mirror.xyz/kwenta.eth/7k-5UYXXcCNJ_DRRWvYBsK5zDm5UA945My4QrInhxoI',
 	},
 	Optimism: {
 		Home: 'https://optimism.io/',

diff --git a/sections/dashboard/Stake/TradingRewardsTab.tsx b/sections/dashboard/Stake/TradingRewardsTab.tsx
@@ -12,6 +12,7 @@ import { SplitContainer } from 'components/layout/grid';
 import { MobileHiddenView, MobileOnlyView } from 'components/Media';
 import { Body, LogoText } from 'components/Text';
 import Tooltip from 'components/Tooltip/Tooltip';
+import { EXTERNAL_LINKS } from 'constants/links';
 import Connector from 'containers/Connector';
 import useGetFile from 'queries/files/useGetFile';
 import useGetFuturesFee from 'queries/staking/useGetFuturesFee';
@@ -138,10 +139,21 @@ const TradingRewardsTab: FC<TradingRewardProps> = memo(
 							</div>
 							{showEstimatedValue ? (
 								<>
-									<div>
-										<Title>{t('dashboard.stake.tabs.trading-rewards.estimated-rewards')}</Title>
-										<LogoText yellow>{truncateNumbers(wei(estimatedReward), 4)}</LogoText>
-									</div>
+									<CustomStyledTooltip
+										preset="bottom"
+										width="260px"
+										height="auto"
+										content={t('dashboard.stake.tabs.trading-rewards.estimated-info')}
+									>
+										<WithCursor cursor="help">
+											<Title>{t('dashboard.stake.tabs.trading-rewards.estimated-rewards')}</Title>
+											<Value inline={true}>
+												<LogoText yellow isToolTip={true}>
+													{truncateNumbers(wei(estimatedReward), 4)}
+												</LogoText>
+											</Value>
+										</WithCursor>
+									</CustomStyledTooltip>
 									<div>
 										<Title>
 											{t('dashboard.stake.tabs.trading-rewards.estimated-reward-share', {
@@ -153,22 +165,25 @@ const TradingRewardsTab: FC<TradingRewardProps> = memo(
 								</>
 							) : null}
 						</CardGrid>
-						{showEstimatedValue ? (
-							<FlexDivRow>
-								<PeriodLabel>
-									{t('dashboard.stake.tabs.trading-rewards.estimated-info')}
-								</PeriodLabel>
-							</FlexDivRow>
-						) : null}
+						<Button
+							fullWidth
+							variant="flat"
+							size="sm"
+							onClick={() =>
+								window.open(EXTERNAL_LINKS.Docs.TradingRewardsV2, '_blank', 'noopener noreferrer')
+							}
+						>
+							{t('dashboard.stake.tabs.trading-rewards.learn-more')}
+						</Button>
 					</CardGridContainer>
 				</MobileHiddenView>
 				<MobileOnlyView>
 					<CardGridContainer>
 						<CardGrid>
 							<CustomStyledTooltip
-								preset="bottom"
 								width="260px"
 								height="auto"
+								left="15px !important"
 								content={t('dashboard.stake.tabs.trading-rewards.trading-rewards-tooltip')}
 							>
 								<WithCursor cursor="help">
@@ -185,10 +200,19 @@ const TradingRewardsTab: FC<TradingRewardProps> = memo(
 							</div>
 							{showEstimatedValue ? (
 								<>
-									<div>
-										<Title>{t('dashboard.stake.tabs.trading-rewards.estimated-rewards')}</Title>
-										<LogoText yellow>{truncateNumbers(wei(estimatedReward), 4)}</LogoText>
-									</div>
+									<CustomStyledTooltip
+										width="260px"
+										height="auto"
+										right="0px !important"
+										content={t('dashboard.stake.tabs.trading-rewards.estimated-info')}
+									>
+										<WithCursor cursor="help">
+											<Title>{t('dashboard.stake.tabs.trading-rewards.estimated-rewards')}</Title>
+											<LogoText yellow isToolTip={true}>
+												{truncateNumbers(wei(estimatedReward), 4)}
+											</LogoText>
+										</WithCursor>
+									</CustomStyledTooltip>
 									<div>
 										<Title>
 											{t('dashboard.stake.tabs.trading-rewards.estimated-reward-share-mobile', {
@@ -200,34 +224,27 @@ const TradingRewardsTab: FC<TradingRewardProps> = memo(
 								</>
 							) : null}
 						</CardGrid>
-						{showEstimatedValue ? (
-							<FlexDivRow>
-								<PeriodLabel>
-									{t('dashboard.stake.tabs.trading-rewards.estimated-info')}
-								</PeriodLabel>
-							</FlexDivRow>
-						) : null}
+						<Button
+							fullWidth
+							variant="flat"
+							size="sm"
+							onClick={() =>
+								window.open(EXTERNAL_LINKS.Docs.TradingRewardsV2, '_blank', 'noopener noreferrer')
+							}
+						>
+							{t('dashboard.stake.tabs.trading-rewards.learn-more')}
+						</Button>
 					</CardGridContainer>
 				</MobileOnlyView>
 			</SplitContainer>
 		);
 	}
 );
 
-const PeriodLabel = styled.div`
-	font-size: 13px;
-	line-height: 20px;
-	display: flex;
-	align-items: center;
-	font-family: ${(props) => props.theme.fonts.regular};
-	color: ${(props) => props.theme.colors.selectedTheme.gray};
-`;
-
 const CustomStyledTooltip = styled(Tooltip)`
 	padding: 10px;
 	${media.lessThan('md')`
 		width: 310px;
-		left: -5px;
 	`}
 `;
 
@@ -239,6 +256,7 @@ const CardGridContainer = styled(StakingCard)`
 	display: flex;
 	flex-direction: column;
 	justify-content: space-between;
+	height: 240px;
 `;
 
 const Value = styled(Body).attrs({ variant: 'bold', mono: true })`

diff --git a/sections/futures/FeeInfoBox/FeeInfoBox.tsx b/sections/futures/FeeInfoBox/FeeInfoBox.tsx
@@ -167,13 +167,13 @@ const FeeInfoBox: React.FC = () => {
 				'Trading Reward': {
 					value: '',
 					compactBox: true,
-					spaceBeneath: true,
+					spaceBeneath: false,
 					keyNode: (
 						<CompactBox
 							$isEligible={isRewardEligible}
 							onClick={() => router.push(ROUTES.Dashboard.Stake)}
 						>
-							<FlexDivRow style={{ marginBottom: '8px' }}>
+							<FlexDivRow style={{ marginBottom: '5px' }}>
 								<div>{t('dashboard.stake.tabs.trading-rewards.trading-reward')}</div>
 								{isRewardEligible ? (
 									<div className="badge badge-yellow">
@@ -255,13 +255,13 @@ const RewardCopy = styled(Body)`
 const CompactBox = styled.div<{ $isEligible: boolean }>`
 	color: ${(props) => props.theme.colors.selectedTheme.text.value};
 	font-size: 13px;
-	padding-left: 8px;
+	padding-left: 10px;
 	cursor: pointer;
-	margin-top: 16px;
+	margin-top: 10px;
 
 	.badge {
 		font-family: ${(props) => props.theme.fonts.black};
-		padding: 0px 6px;
+		padding: 1px 5px;
 		border-radius: 100px;
 		font-variant: all-small-caps;
 	}
@@ -279,7 +279,7 @@ const CompactBox = styled.div<{ $isEligible: boolean }>`
 	}
 
 	${(props) =>
-		`border-left: 3px solid 
+		`border-left: 2px solid 
 				${
 					props.$isEligible
 						? props.theme.colors.selectedTheme.badge.yellow.background

diff --git a/sections/shared/Layout/AppLayout/Header/MobileUserMenu/MobileMenuModal.tsx b/sections/shared/Layout/AppLayout/Header/MobileUserMenu/MobileMenuModal.tsx
@@ -5,7 +5,9 @@ import { useTranslation } from 'react-i18next';
 import styled, { css } from 'styled-components';
 
 import MobileMenuArrow from 'assets/svg/app/mobile-menu-arrow.svg';
+import KwentaYellowIcon from 'assets/svg/brand/logo-yellow.svg';
 import FullScreenModal from 'components/FullScreenModal';
+import { FlexDivRowCentered } from 'components/layout/flex';
 import ROUTES from 'constants/routes';
 import Links from 'sections/dashboard/Links';
 import Logo from 'sections/shared/Layout/Logo';
@@ -74,7 +76,12 @@ export const MobileMenuModal: FC<MobileMenuModalProps> = ({ onDismiss }) => {
 										isActive={router.asPath.includes(link)}
 										onClick={onDismiss}
 									>
-										{t(i18nLabel)}
+										<FlexDivRowCentered>
+											{t(i18nLabel)}
+											{i18nLabel === 'header.nav.markets' ? (
+												<KwentaYellowIcon height={18} width={18} style={{ marginLeft: 5 }} />
+											) : null}
+										</FlexDivRowCentered>
 										<MobileMenuArrow />
 									</MenuButton>
 								</Link>

diff --git a/sections/shared/Layout/AppLayout/Header/Nav.tsx b/sections/shared/Layout/AppLayout/Header/Nav.tsx
@@ -4,13 +4,17 @@ import { FC, FunctionComponent, memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 
+import KwentaYellowIcon from 'assets/svg/brand/logo-yellow.svg';
 import Badge from 'components/Badge';
+import { FlexDivRow } from 'components/layout/flex';
 import LabelContainer from 'components/Nav/DropDownLabel';
 import Select from 'components/Select';
 import { DropdownIndicator, IndicatorSeparator } from 'components/Select/Select';
+import Tooltip from 'components/Tooltip/Tooltip';
 import { selectMarketAsset } from 'state/futures/selectors';
 import { useAppSelector } from 'state/hooks';
 import { linkCSS } from 'styles/common';
+import media from 'styles/media';
 
 import { DESKTOP_NAV_LINKS, Badge as BadgeType } from './constants';
 
@@ -42,7 +46,7 @@ const Nav: FC = memo(() => {
 		link,
 		isActive,
 	}: ReactSelectOptionProps) => {
-		if (i18nLabel === 'header.nav.markets' || i18nLabel === 'header.nav.leaderboard') {
+		if (i18nLabel === 'header.nav.leaderboard') {
 			return (
 				<MenuInside isDropDown isActive={isActive}>
 					{t(i18nLabel)}
@@ -77,7 +81,25 @@ const Nav: FC = memo(() => {
 					if (!links) {
 						return (
 							<Link key={url} href={url}>
-								<MenuInside isActive={isActive}>{t(i18nLabel)}</MenuInside>
+								<MenuInside isActive={isActive}>
+									{i18nLabel === 'header.nav.markets' ? (
+										<CustomStyledTooltip
+											preset="bottom"
+											width="260px"
+											height="auto"
+											content={t('dashboard.stake.tabs.trading-rewards.trading-rewards-tooltip')}
+										>
+											<WithCursor cursor="pointer">
+												<FlexDivRow>
+													{t(i18nLabel)}
+													<KwentaYellowIcon height={20} width={20} style={{ paddingLeft: 5 }} />
+												</FlexDivRow>
+											</WithCursor>
+										</CustomStyledTooltip>
+									) : (
+										t(i18nLabel)
+									)}
+								</MenuInside>
 							</Link>
 						);
 					}
@@ -101,8 +123,22 @@ const Nav: FC = memo(() => {
 	);
 });
 
+const CustomStyledTooltip = styled(Tooltip)`
+	padding: 10px;
+	text-align: left;
+	text-transform: none;
+	${media.lessThan('md')`
+		width: 310px;
+	`}
+`;
+
+const WithCursor = styled.div<{ cursor: 'help' | 'pointer' }>`
+	cursor: ${(props) => props.cursor};
+`;
+
 const MenuLinks = styled.ul`
 	display: flex;
+	padding-top: 2px;
 `;
 
 const NavLabel = styled.div`

diff --git a/translations/en.json b/translations/en.json
@@ -528,21 +528,22 @@
 					"future-fee-paid-mobile": "Futures Fees Paid",
 					"fees-paid": "Total Fees in Pool: Ep. {{EpochPeriod}}",
 					"fees-paid-mobile": "Total Fees in Pool",
-					"estimated-rewards": "Estimated Reward*",
-					"estimated-reward-share": "Estimated Reward Share*",
-					"estimated-reward-share-mobile": "Est. Reward Share*",
+					"estimated-rewards": "Estimated Reward",
+					"estimated-reward-share": "Estimated Reward Share",
+					"estimated-reward-share-mobile": "Est. Reward Share",
 					"trading-activity-reset": "Time until next epoch",
 					"epoch": "Epoch {{EpochPeriod}}: {{EpochDate}}",
 					"claimable-rewards-epoch": "Claimable Rewards: Epoch {{EpochPeriod}}",
 					"claimable-rewards-all": "Claimable Trading Rewards",
 					"claim-epoch": "Claim: Epoch {{EpochPeriod}}",
 					"claim": "Claim",
-					"estimated-info": "* Estimated values do not reflect the final reward value and are subject to change as a result of future fees paid and staked amounts by other participants.",
+					"estimated-info": "Estimated values do not reflect the final reward value and are subject to change as a result of future fees paid and staked amounts by other participants.",
 					"trading-reward": "Trading Reward:",
 					"not-eligible": "Not Eligible",
 					"eligible": "Eligible",
 					"stake-to-earn": "Stake <0>$KWENTA</0> to earn more rewards",
-					"stake-to-start": "Stake <0>$KWENTA</0> to start earning rewards"
+					"stake-to-start": "Stake <0>$KWENTA</0> to start earning rewards",
+					"learn-more": "Learn More"
 				},
 				"escrow": {
 					"title": "Escrow",