diff --git a/packages/web/src/views/pool/pool-incentivize/components/incentivize-pool-history/incentivize-pool-history-box/IncentivizePoolHistoryBox.styles.ts b/packages/web/src/views/pool/pool-incentivize/components/incentivize-pool-history/incentivize-pool-history-box/IncentivizePoolHistoryBox.styles.ts index d51442e8c..17a1bdc7e 100644 --- a/packages/web/src/views/pool/pool-incentivize/components/incentivize-pool-history/incentivize-pool-history-box/IncentivizePoolHistoryBox.styles.ts +++ b/packages/web/src/views/pool/pool-incentivize/components/incentivize-pool-history/incentivize-pool-history-box/IncentivizePoolHistoryBox.styles.ts @@ -1,4 +1,5 @@ import { fonts } from "@constants/font.constant"; +import { css, type Theme } from "@emotion/react"; import styled from "@emotion/styled"; export const IncentivizePoolHistoryBoxWrapper = styled.div` @@ -69,3 +70,12 @@ export const IncentivizePoolHistoryBoxWrapper = styled.div` font-weight: 400; } `; + +export const historyTooltipContent = (theme: Theme) => css` + font-size: 14px; + a:hover { + * { + fill: ${theme.color.text10}; + } + } +`; diff --git a/packages/web/src/views/pool/pool-incentivize/components/incentivize-pool-history/incentivize-pool-history-box/IncentivizePoolHistoryBox.tsx b/packages/web/src/views/pool/pool-incentivize/components/incentivize-pool-history/incentivize-pool-history-box/IncentivizePoolHistoryBox.tsx index 69589e378..85b18fefc 100644 --- a/packages/web/src/views/pool/pool-incentivize/components/incentivize-pool-history/incentivize-pool-history-box/IncentivizePoolHistoryBox.tsx +++ b/packages/web/src/views/pool/pool-incentivize/components/incentivize-pool-history/incentivize-pool-history-box/IncentivizePoolHistoryBox.tsx @@ -1,4 +1,5 @@ import React from "react"; +import Link from "next/link"; import { useTranslation, Trans } from "react-i18next"; import { css } from "@emotion/react"; @@ -17,6 +18,8 @@ import IconInfo from "@components/common/icons/IconInfo"; import Tooltip from "@components/common/tooltip/Tooltip"; import DoubleLogo from "@components/common/double-logo/DoubleLogo"; import MissingLogo from "@components/common/missing-logo/MissingLogo"; +import IconOpenLink from "@components/common/icons/IconOpenLink"; +import { historyTooltipContent } from "./IncentivizePoolHistoryBox.styles"; interface IncentivizePoolHistoryBoxProps { stakingData: ExtendedPoolStakingModel; @@ -60,7 +63,10 @@ const IncentivizePoolHistoryBox = ({ const formatAmount = (amount: string | null) => { if (!amount) return "-"; - return toNumberFormat(Number(makeDisplayTokenAmount(GNS_TOKEN, amount)), 6); + return toNumberFormat( + Number(makeDisplayTokenAmount(GNS_TOKEN, amount)), + GNS_TOKEN.decimals, + ); }; const isClaimable = React.useMemo(() => { @@ -165,10 +171,21 @@ const IncentivizePoolHistoryBox = ({ {t("IncentivizePool:incentiPool.history.label.unvestedAmount")} + }} + components={{ + br:
, + link: ( + + + + ), + }} i18nKey={"incentiPool.history.tooltip.unvestedAmount"} />
diff --git a/packages/web/src/views/pool/pool-incentivize/containers/incentivize-pool-history-container/IncentivizePoolHistoryContainer.tsx b/packages/web/src/views/pool/pool-incentivize/containers/incentivize-pool-history-container/IncentivizePoolHistoryContainer.tsx index a002feb28..5dd52658d 100644 --- a/packages/web/src/views/pool/pool-incentivize/containers/incentivize-pool-history-container/IncentivizePoolHistoryContainer.tsx +++ b/packages/web/src/views/pool/pool-incentivize/containers/incentivize-pool-history-container/IncentivizePoolHistoryContainer.tsx @@ -14,12 +14,17 @@ const IncentivizePoolHistoryContainer = () => { enabled: !!account?.address, }); - const poolStakingList: ExtendedPoolStakingModel[] = rawPoolStakingList.map( - item => ({ + const poolStakingList: ExtendedPoolStakingModel[] = rawPoolStakingList + .map(item => ({ ...item, depositGnsAmount: (item as ExtendedPoolStakingModel).depositGnsAmount, - }), - ); + })) + .sort((a, b) => { + const dateA = new Date(a.startTimestamp); + const dateB = new Date(b.startTimestamp); + + return dateA.getTime() - dateB.getTime(); + }); return isFetchedStakingList && poolStakingList.length > 0 ? (