From d6db3b006898380dfc1f6aee9e71d2c01ca5f147 Mon Sep 17 00:00:00 2001 From: Leifu Chen Date: Sat, 8 Jul 2023 01:12:55 +0300 Subject: [PATCH] Added icon next to the label --- packages/app/src/pages/dashboard/staking.tsx | 4 ++ .../app/src/sections/dashboard/RewardsTab.tsx | 55 ++++++++++++++----- .../dashboard/Stake/StakingPortfolio.tsx | 14 ++++- .../sections/dashboard/Stake/StakingTab.tsx | 20 +++++-- 4 files changed, 73 insertions(+), 20 deletions(-) diff --git a/packages/app/src/pages/dashboard/staking.tsx b/packages/app/src/pages/dashboard/staking.tsx index 9d01ca9f66..5a6160fb74 100644 --- 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: , card: [ { key: 'early-vest-rewards-claimable', diff --git a/packages/app/src/sections/dashboard/RewardsTab.tsx b/packages/app/src/sections/dashboard/RewardsTab.tsx index b93f816503..7f0e6d29d4 100644 --- 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 = ({ period = 0 }) => { const { t } = useTranslation() const dispatch = useAppDispatch() @@ -66,7 +83,7 @@ const RewardsTab: FC = ({ period = 0 }) => { : ZERO_WEI }, [futuresFeePaid, totalFuturesFeePaid]) - const rewardsInfo = useMemo( + const rewardsInfo: RewardsInfo[] = useMemo( () => [ { key: 'trading-rewards', @@ -75,10 +92,12 @@ const RewardsTab: FC = ({ period = 0 }) => { labels: [ { label: t('dashboard.stake.portfolio.rewards.title'), + labelIcon: , value: formatNumber(kwentaRewards, { minDecimals: 4 }), }, { label: t('dashboard.stake.tabs.trading-rewards.fee-paid'), + labelIcon: , value: formatDollars(futuresFeePaid, { minDecimals: 2 }), }, { @@ -100,8 +119,6 @@ const RewardsTab: FC = ({ period = 0 }) => { value: formatNumber(estimatedKwentaRewards, { minDecimals: 4 }), }, ], - kwentaIcon: true, - linkIcon: true, }, { key: 'op-rewards', @@ -111,6 +128,7 @@ const RewardsTab: FC = ({ period = 0 }) => { { label: t('dashboard.stake.portfolio.rewards.title'), value: formatNumber(opRewards, { minDecimals: 4 }), + valueIcon: , }, ], info: [ @@ -119,8 +137,6 @@ const RewardsTab: FC = ({ period = 0 }) => { value: formatNumber(estimatedOpRewards, { minDecimals: 4 }), }, ], - kwentaIcon: false, - linkIcon: false, }, { key: 'snx-rewards', @@ -130,6 +146,7 @@ const RewardsTab: FC = ({ period = 0 }) => { { label: t('dashboard.stake.portfolio.rewards.title'), value: formatNumber(snxOpRewards, { minDecimals: 4 }), + valueIcon: , }, ], info: [ @@ -138,8 +155,6 @@ const RewardsTab: FC = ({ period = 0 }) => { value: NO_VALUE, }, ], - kwentaIcon: false, - linkIcon: false, }, ], [ @@ -210,22 +225,27 @@ const RewardsTab: FC = ({ period = 0 }) => { - {labels.map(({ label, value }) => ( + {labels.map(({ label, value, labelIcon, valueIcon }) => ( - {label} - + + {label} + {labelIcon} + + {value} - + {valueIcon} + ))} - {info.map(({ label, value }) => ( + {info.map(({ label, value, valueIcon }) => ( {label} - + {value} - + {valueIcon} + ))} @@ -249,6 +269,13 @@ const RewardsTab: FC = ({ 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 index 69b56dc7a2..a6a052844e 100644 --- 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 = memo(({ cards }) => { - {cards.map(({ category, card, onClick }, i) => ( + {cards.map(({ category, card, onClick, icon }, i) => ( - {category} + + {category} + {icon} + {card.map(({ key, title, value, onClick }) => ( @@ -57,6 +60,13 @@ const StakingPortfolio: FC = 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 index 3e2b9e35c5..b72b8eab52 100644 --- 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: , card: [ { key: 'early-vest-rewards-claimable', @@ -93,9 +96,11 @@ const StakingTab = () => { {t('dashboard.stake.tabs.staking.staking-rewards.title')} - {stakingAndRewardsInfo.map(({ category, card, flex }, i) => ( + {stakingAndRewardsInfo.map(({ category, card, flex, icon }, i) => ( - {category} + + {category} {icon} + {card.map(({ key, title, value }) => ( @@ -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;