refactor(launchpad): improve based on PR review feedback

gnoswap-labs · Oct 31, 2024 · 7f9e014 · 7f9e014
1 parent e5b97ef
commit 7f9e014
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 9 deletions.
diff --git a/packages/web/src/utils/launchpad-get-tier-number.ts b/packages/web/src/utils/launchpad-get-tier-number.ts
@@ -1,20 +1,21 @@
-import { i18n } from "next-i18next";
-
 export type TierType = "TIER30" | "TIER90" | "TIER180" | null | undefined;
 
 export const getTierNumber = (tier: TierType): number => {
   if (!tier) return 0;
   return parseInt(tier.replace("TIER", ""));
 };
 
-export const getTierDuration = (tier: TierType) => {
+export const getTierDuration = (
+  tier: TierType,
+  format: (key: string, options?: { [key: string]: string | number }) => string,
+) => {
   switch (tier) {
     case "TIER30":
-      return i18n?.t("Launchpad:common.tierDuration.1month");
+      return format("Launchpad:common.tierDuration.1month");
     case "TIER90":
-      return i18n?.t("Launchpad:common.tierDuration.3months");
+      return format("Launchpad:common.tierDuration.3months");
     case "TIER180":
-      return i18n?.t("Launchpad:common.tierDuration.6months");
+      return format("Launchpad:common.tierDuration.6months");
   }
 };
 

diff --git a/...ges/web/src/views/launchpad/components/launchpad-pool-tier-chip/LaunchpadPoolTierChip.tsx b/...ges/web/src/views/launchpad/components/launchpad-pool-tier-chip/LaunchpadPoolTierChip.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { useTranslation } from "react-i18next";
 
 import { TierType } from "@utils/launchpad-get-tier-number";
 import { getTierDuration } from "@utils/launchpad-get-tier-number";
@@ -10,7 +11,11 @@ interface LaunchpadPoolTierChipProps {
 }
 
 const LaunchpadPoolTierChip = ({ poolTier }: LaunchpadPoolTierChipProps) => {
-  return <PoolTierChipWrapper>{getTierDuration(poolTier)}</PoolTierChipWrapper>;
+  const { t } = useTranslation();
+
+  return (
+    <PoolTierChipWrapper>{getTierDuration(poolTier, t)}</PoolTierChipWrapper>
+  );
 };
 
 export default LaunchpadPoolTierChip;
diff --git a/...-detail/components/launchpad-pool-list/launchpad-pool-list-card/LaunchpadPoolListCard.tsx b/...-detail/components/launchpad-pool-list/launchpad-pool-list-card/LaunchpadPoolListCard.tsx
@@ -92,7 +92,7 @@ const LaunchpadPoolListCard: React.FC<LaunchpadPoolListCardProps> = ({
             day: getClaimableDays(data.poolTier),
           }}
         >
-          Staking for {getTierDuration(data.poolTier)}. <br />
+          Staking for {getTierDuration(data.poolTier, t)}. <br />
           Rewards claimable starting <br />
           after {getClaimableDays(data.poolTier)} days.
         </Trans>

diff --git a/...components/launchpad-pool-list/launchpad-pool-list-card/LaunchpadPoolListSkeletonCard.tsx b/...components/launchpad-pool-list/launchpad-pool-list-card/LaunchpadPoolListSkeletonCard.tsx
@@ -1,12 +1,15 @@
 import { getTierDuration, TierType } from "@utils/launchpad-get-tier-number";
 import { getClaimableDays } from "@utils/launchpad-get-claimable";
+import { useTranslation } from "react-i18next";
 
 import { CardWrapper } from "./LaunchpadPoolListCard.styles";
 import { Divider } from "@components/common/select-token/SelectToken.styles";
 import LaunchpadPoolTierChip from "@views/launchpad/components/launchpad-pool-tier-chip/LaunchpadPoolTierChip";
 import { pulseSkeletonStyle } from "@constants/skeleton.constant";
 
 export const LaunchpadPoolListSkeletonCard = ({ idx }: { idx: number }) => {
+  const { t } = useTranslation();
+
   const data = [
     { poolTier: "TIER180", status: "ONGOING", claimableDays: 14 },
     { poolTier: "TIER90", status: "ONGOING", claimableDays: 7 },
@@ -23,7 +26,7 @@ export const LaunchpadPoolListSkeletonCard = ({ idx }: { idx: number }) => {
       </div>
 
       <div className="card-description">
-        Staking for {getTierDuration(data[idx].poolTier as TierType)}. <br />
+        Staking for {getTierDuration(data[idx].poolTier as TierType, t)}. <br />
         Rewards claimable starting <br />
         after {getClaimableDays(data[idx].poolTier)} days.
       </div>