Added icon next to the label

Kwenta · Jul 7, 2023 · d6db3b0 · d6db3b0
1 parent d5279fd
commit d6db3b0
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 20 deletions.
diff --git a/packages/app/src/pages/dashboard/staking.tsx b/packages/app/src/pages/dashboard/staking.tsx
@@ -4,6 +4,7 @@ import { useRouter } from 'next/router'
 import React, { ReactNode, useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
+import HelpIcon from 'assets/svg/app/question-mark.svg'
 import { NO_VALUE } from 'constants/placeholder'
 import DashboardLayout from 'sections/dashboard/DashboardLayout'
 import StakingPortfolio, { StakeTab } from 'sections/dashboard/Stake/StakingPortfolio'
@@ -36,6 +37,8 @@ export type StakingCards = {
 	category: string
 	card: StakingCard[]
 	onClick?: () => void
+	icon?: React.ReactNode
+	flex?: number
 }
 
 const StakingPage: StakingComponent = () => {
@@ -131,6 +134,7 @@ const StakingPage: StakingComponent = () => {
 			},
 			{
 				category: t('dashboard.stake.portfolio.early-vest-rewards.title'),
+				icon: <HelpIcon />,
 				card: [
 					{
 						key: 'early-vest-rewards-claimable',

diff --git a/packages/app/src/sections/dashboard/RewardsTab.tsx b/packages/app/src/sections/dashboard/RewardsTab.tsx
@@ -5,6 +5,8 @@ import { FC, useCallback, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 
+import HelpIcon from 'assets/svg/app/question-mark.svg'
+import OptimismLogo from 'assets/svg/providers/optimism.svg'
 import Button from 'components/Button'
 import { FlexDivCol, FlexDivRow, FlexDivRowCentered } from 'components/layout/flex'
 import LabelContainer from 'components/Nav/DropDownLabel'
@@ -37,6 +39,21 @@ type EpochValue = {
 	label: string
 }
 
+type RewardsInfo = {
+	key: string
+	title: string
+	copy: string
+	labels: RewardsCard[]
+	info: RewardsCard[]
+}
+
+type RewardsCard = {
+	label: string
+	value: string
+	labelIcon?: React.ReactNode
+	valueIcon?: React.ReactNode
+}
+
 const RewardsTab: FC<TradingRewardProps> = ({ period = 0 }) => {
 	const { t } = useTranslation()
 	const dispatch = useAppDispatch()
@@ -66,7 +83,7 @@ const RewardsTab: FC<TradingRewardProps> = ({ period = 0 }) => {
 			: ZERO_WEI
 	}, [futuresFeePaid, totalFuturesFeePaid])
 
-	const rewardsInfo = useMemo(
+	const rewardsInfo: RewardsInfo[] = useMemo(
 		() => [
 			{
 				key: 'trading-rewards',
@@ -75,10 +92,12 @@ const RewardsTab: FC<TradingRewardProps> = ({ period = 0 }) => {
 				labels: [
 					{
 						label: t('dashboard.stake.portfolio.rewards.title'),
+						labelIcon: <HelpIcon />,
 						value: formatNumber(kwentaRewards, { minDecimals: 4 }),
 					},
 					{
 						label: t('dashboard.stake.tabs.trading-rewards.fee-paid'),
+						labelIcon: <HelpIcon />,
 						value: formatDollars(futuresFeePaid, { minDecimals: 2 }),
 					},
 					{
@@ -100,8 +119,6 @@ const RewardsTab: FC<TradingRewardProps> = ({ period = 0 }) => {
 						value: formatNumber(estimatedKwentaRewards, { minDecimals: 4 }),
 					},
 				],
-				kwentaIcon: true,
-				linkIcon: true,
 			},
 			{
 				key: 'op-rewards',
@@ -111,6 +128,7 @@ const RewardsTab: FC<TradingRewardProps> = ({ period = 0 }) => {
 					{
 						label: t('dashboard.stake.portfolio.rewards.title'),
 						value: formatNumber(opRewards, { minDecimals: 4 }),
+						valueIcon: <OptimismLogo height={18} width={18} />,
 					},
 				],
 				info: [
@@ -119,8 +137,6 @@ const RewardsTab: FC<TradingRewardProps> = ({ period = 0 }) => {
 						value: formatNumber(estimatedOpRewards, { minDecimals: 4 }),
 					},
 				],
-				kwentaIcon: false,
-				linkIcon: false,
 			},
 			{
 				key: 'snx-rewards',
@@ -130,6 +146,7 @@ const RewardsTab: FC<TradingRewardProps> = ({ period = 0 }) => {
 					{
 						label: t('dashboard.stake.portfolio.rewards.title'),
 						value: formatNumber(snxOpRewards, { minDecimals: 4 }),
+						valueIcon: <OptimismLogo height={18} width={18} />,
 					},
 				],
 				info: [
@@ -138,8 +155,6 @@ const RewardsTab: FC<TradingRewardProps> = ({ period = 0 }) => {
 						value: NO_VALUE,
 					},
 				],
-				kwentaIcon: false,
-				linkIcon: false,
 			},
 		],
 		[
@@ -210,22 +225,27 @@ const RewardsTab: FC<TradingRewardProps> = ({ period = 0 }) => {
 						</div>
 						<RewardsContainer>
 							<FlexDivRow justifyContent="flex-start" columnGap="25px">
-								{labels.map(({ label, value }) => (
+								{labels.map(({ label, value, labelIcon, valueIcon }) => (
 									<FlexDivCol rowGap="5px">
-										<Body color="secondary">{label}</Body>
-										<Body size="large" color="preview">
+										<IconContainer color="secondary">
+											{label}
+											{labelIcon}
+										</IconContainer>
+										<IconContainer size="large" color="preview">
 											{value}
-										</Body>
+											{valueIcon}
+										</IconContainer>
 									</FlexDivCol>
 								))}
 							</FlexDivRow>
 							<FlexDivRow justifyContent="flex-start" columnGap="25px">
-								{info.map(({ label, value }) => (
+								{info.map(({ label, value, valueIcon }) => (
 									<FlexDivCol rowGap="5px">
 										<Body color="secondary">{label}</Body>
-										<Body size="large" color="primary">
+										<IconContainer size="large" color="primary">
 											{value}
-										</Body>
+											{valueIcon}
+										</IconContainer>
 									</FlexDivCol>
 								))}
 							</FlexDivRow>
@@ -249,6 +269,13 @@ const RewardsTab: FC<TradingRewardProps> = ({ period = 0 }) => {
 	)
 }
 
+const IconContainer = styled(Body)`
+	display: flex;
+	flex-direction: row;
+	column-gap: 5px;
+	align-items: center;
+`
+
 const SelectLabelContainer = styled(LabelContainer)`
 	font-size: 12px;
 `

diff --git a/packages/app/src/sections/dashboard/Stake/StakingPortfolio.tsx b/packages/app/src/sections/dashboard/Stake/StakingPortfolio.tsx
@@ -37,9 +37,12 @@ const StakingPortfolio: FC<StakingPortfolioProps> = memo(({ cards }) => {
 				</StyledButton>
 			</StakingHeading>
 			<CardsContainer>
-				{cards.map(({ category, card, onClick }, i) => (
+				{cards.map(({ category, card, onClick, icon }, i) => (
 					<StyledFlexDivCol rowGap="15px" key={i} onClick={onClick}>
-						<Body size="large">{category}</Body>
+						<LabelContainer size="large">
+							{category}
+							{icon}
+						</LabelContainer>
 						<FlexDivRow columnGap="15px" justifyContent="flex-start">
 							{card.map(({ key, title, value, onClick }) => (
 								<FlexDivCol key={key} onClick={onClick} rowGap="5px">
@@ -57,6 +60,13 @@ const StakingPortfolio: FC<StakingPortfolioProps> = memo(({ cards }) => {
 	)
 })
 
+const LabelContainer = styled(Body)`
+	display: flex;
+	flex-direction: row;
+	column-gap: 5px;
+	align-items: center;
+`
+
 const StyledFlexDivCol = styled(FlexDivCol)`
 	${(props) =>
 		props.onClick &&

diff --git a/packages/app/src/sections/dashboard/Stake/StakingTab.tsx b/packages/app/src/sections/dashboard/Stake/StakingTab.tsx
@@ -3,11 +3,13 @@ import { useCallback, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 
+import HelpIcon from 'assets/svg/app/question-mark.svg'
 import Button from 'components/Button'
 import { FlexDivCol, FlexDivRow, FlexDivRowCentered } from 'components/layout/flex'
 import { SplitContainer } from 'components/layout/grid'
 import { Body, Heading } from 'components/Text'
 import { NO_VALUE } from 'constants/placeholder'
+import { StakingCards } from 'pages/dashboard/staking'
 import { StakingCard } from 'sections/dashboard/Stake/card'
 import { useAppDispatch, useAppSelector } from 'state/hooks'
 import { claimStakingRewardsV2, compoundRewards } from 'state/staking/actions'
@@ -36,10 +38,10 @@ const StakingTab = () => {
 		dispatch(compoundRewards())
 	}, [dispatch])
 
-	const stakingAndRewardsInfo = useMemo(
+	const stakingAndRewardsInfo: StakingCards[] = useMemo(
 		() => [
 			{
-				category: 'Staking',
+				category: t('dashboard.stake.tabs.staking.title'),
 				card: [
 					{
 						key: 'staking-staked',
@@ -67,6 +69,7 @@ const StakingTab = () => {
 			},
 			{
 				category: t('dashboard.stake.portfolio.early-vest-rewards.title'),
+				icon: <HelpIcon />,
 				card: [
 					{
 						key: 'early-vest-rewards-claimable',
@@ -93,9 +96,11 @@ const StakingTab = () => {
 					{t('dashboard.stake.tabs.staking.staking-rewards.title')}
 				</StyledHeading>
 				<CardsContainer>
-					{stakingAndRewardsInfo.map(({ category, card, flex }, i) => (
+					{stakingAndRewardsInfo.map(({ category, card, flex, icon }, i) => (
 						<FlexDivCol rowGap="15px" key={i}>
-							<Body size="large">{category}</Body>
+							<LabelContainer size="large">
+								{category} {icon}
+							</LabelContainer>
 							<FlexDivRow columnGap="25px" justifyContent="flex-start" style={{ flex }}>
 								{card.map(({ key, title, value }) => (
 									<FlexDivCol key={key}>
@@ -134,6 +139,13 @@ const StakingTab = () => {
 	)
 }
 
+const LabelContainer = styled(Body)`
+	display: flex;
+	flex-direction: row;
+	column-gap: 5px;
+	align-items: center;
+`
+
 const CardsContainer = styled(FlexDivRowCentered)`
 	width: 100%;
 	justify-content: flex-start;