fix(earn): [GSW-1830] My Incentivize History UI

gnoswap-labs · Nov 7, 2024 · 0e6ae2e · 0e6ae2e
1 parent 359d23c
commit 0e6ae2e
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 7 deletions.
diff --git a/...incentivize-pool-history/incentivize-pool-history-box/IncentivizePoolHistoryBox.styles.ts b/...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/...nents/incentivize-pool-history/incentivize-pool-history-box/IncentivizePoolHistoryBox.tsx b/...nents/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")}
             <Tooltip
               FloatingContent={
-                <span css={tooltipConent}>
+                <span css={historyTooltipContent}>
                   <Trans
+                    className="test"
                     ns="IncentivizePool"
-                    components={{ br: <br /> }}
+                    components={{
+                      br: <br />,
+                      link: (
+                        <Link
+                          href="https://docs.gnoswap.io/core-concepts/liquidity-mining#warm-up-periods"
+                          target="_blank"
+                        >
+                          <IconOpenLink />
+                        </Link>
+                      ),
+                    }}
                     i18nKey={"incentiPool.history.tooltip.unvestedAmount"}
                   />
                 </span>

diff --git a/...ntivize/containers/incentivize-pool-history-container/IncentivizePoolHistoryContainer.tsx b/...ntivize/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 ? (
     <IncentivizePoolHistory stakingList={poolStakingList} />