refactor(launchpad): improve based on PR review feedback

- Removed direct dependency on i18n instance. - Made formatTime a pure function by passing the formatting function as an argument. - Updated getStatusText to follow the same pattern.
gnoswap-labs · Oct 31, 2024 · 1ea9e6d · 1ea9e6d
1 parent 3f47cf3
commit 1ea9e6d
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 43 deletions.
diff --git a/...b/src/components/common/launchpad-modal/launchpad-deposit-modal/LaunchpadDepositModal.tsx b/...b/src/components/common/launchpad-modal/launchpad-deposit-modal/LaunchpadDepositModal.tsx
@@ -185,11 +185,11 @@ const LaunchpadDepositModal = ({
                 {t("Launchpad:modal.deposit.note.list1")}
               </li>
               <li className="list">
-                <Trans ns="Launchpad" i18nKey={"modal.deposit.note.list2"}>
-                  Only send supported tokens to this deposit address. <br />
-                  Depositing any other cryptocurrencies to this <br />
-                  launchpad will result in the loss of your funds.
-                </Trans>
+                <Trans
+                  ns="Launchpad"
+                  components={{ br: <br /> }}
+                  i18nKey={"modal.deposit.note.list2"}
+                />
               </li>
             </ul>
             <Link href="https://docs.gnoswap.io/" target="_blank">

diff --git a/packages/web/src/utils/launchpad-get-status-text.ts b/packages/web/src/utils/launchpad-get-status-text.ts
@@ -1,10 +1,10 @@
 import { PROJECT_STATUS_TYPE } from "@common/values";
-import { i18n } from "next-i18next";
 
 export const getStatusText = (
   type: PROJECT_STATUS_TYPE,
   startTime?: string,
   endTime?: string,
+  format: (key: string, options?: { [key: string]: string | number }) => string,
 ) => {
   if (!startTime || !endTime) return "-";
 
@@ -27,16 +27,16 @@ export const getStatusText = (
 
   const formatTime = (days: number, hours: number, minutes: number) => {
     if (days > 0) {
-      return i18n?.t("Launchpad:common.time.inDaysHours", { days, hours });
+      return format("Launchpad:common.time.inDaysHours", { days, hours });
     } else if (hours > 0) {
-      return i18n?.t("Launchpad:common.time.inHoursMinutes", {
+      return format("Launchpad:common.time.inHoursMinutes", {
         hours,
         minutes,
       });
     } else if (minutes > 0) {
-      return i18n?.t("Launchpad:common.time.inMinutes", { minutes });
+      return format("Launchpad:common.time.inMinutes", { minutes });
     } else {
-      return i18n?.t("Launchpad:common.time.inOneMinute");
+      return format("Launchpad:common.time.inOneMinute");
     }
   };
 
@@ -47,7 +47,7 @@ export const getStatusText = (
         hours: upcomingHours,
         minutes: upcomingMinutes,
       } = getTimeDifference(start, now);
-      return i18n?.t("Launchpad:common.status.upcoming", {
+      return format("Launchpad:common.status.upcoming", {
         time: formatTime(upcomingDays, upcomingHours, upcomingMinutes),
       });
     case PROJECT_STATUS_TYPE.ONGOING:
@@ -59,10 +59,10 @@ export const getStatusText = (
       if (ongoingDays < 0 && ongoingHours < 0 && ongoingMinutes < 0) {
         return "Ends in 1 minute";
       }
-      return i18n?.t("Launchpad:common.status.ongoing", {
+      return format("Launchpad:common.status.ongoing", {
         time: formatTime(ongoingDays, ongoingHours, ongoingMinutes),
       });
     case PROJECT_STATUS_TYPE.ENDED:
-      return i18n?.t("Launchpad:common.status.ended");
+      return format("Launchpad:common.status.ended");
   }
 };
diff --git a/...launchpad-detail/components/common/launchpad-status-time-chip/LaunchpadStatusTimeChip.tsx b/...launchpad-detail/components/common/launchpad-status-time-chip/LaunchpadStatusTimeChip.tsx
@@ -5,6 +5,7 @@ import { getStatusText } from "@utils/launchpad-get-status-text";
 
 import { StatusTimeChipWrapper } from "./LaunchpadStatusTimeChip.styled";
 import IconTimer from "@components/common/icons/IconTimer";
+import { useTranslation } from "react-i18next";
 
 interface LaunchpadStatusTimeChipProps {
   startTime?: string;
@@ -17,10 +18,12 @@ const LaunchpadStatusTimeChip = ({
   endTime,
   status,
 }: LaunchpadStatusTimeChipProps) => {
+  const { t } = useTranslation();
+
   return (
     <StatusTimeChipWrapper type={status}>
       <IconTimer type={status} />
-      <div>{getStatusText(status, startTime, endTime)}</div>
+      <div>{getStatusText(status, startTime, endTime, t)}</div>
     </StatusTimeChipWrapper>
   );
 };

diff --git a/...ad-my-participation/launchpad-my-participation-no-data/LaunchpadMyParticipationNoData.tsx b/...ad-my-participation/launchpad-my-participation-no-data/LaunchpadMyParticipationNoData.tsx
@@ -28,9 +28,7 @@ const LaunchpadMyParticipationNoData = ({
             ns="Launchpad"
             i18nKey="myParticipation.nodata.text1"
             components={{ span: <span /> }}
-          >
-            Deposit <span>GNS</span>
-          </Trans>
+          />
         </div>
         <div className="banner-text-description">
           {t("Launchpad:myParticipation.nodata.text2")}

diff --git a/...iews/launchpad/launchpad-detail/components/launchpad-participate/LaunchpadParticipate.tsx b/...iews/launchpad/launchpad-detail/components/launchpad-participate/LaunchpadParticipate.tsx
@@ -273,10 +273,11 @@ const LaunchpadParticipate: React.FC<LaunchpadParticipateProps> = ({
             {t("Launchpad:participate.col.endDate")}{" "}
             <LaunchpadTooltip
               floatingContent={
-                <Trans ns="Launchpad" i18nKey="common.tooltip.endDate">
-                  The launchpad program you selected <br />
-                  ends on this date.
-                </Trans>
+                <Trans
+                  ns="Launchpad"
+                  components={{ br: <br /> }}
+                  i18nKey="common.tooltip.endDate"
+                />
               }
             />
           </div>
@@ -312,24 +313,6 @@ const LaunchpadParticipate: React.FC<LaunchpadParticipateProps> = ({
         </div>
       </div>
 
-      {/* {!isLoading && (
-        <div className="participate-button-wrapper">
-          <DepositButton
-            isAvailableDeposit={isAvailableDeposit}
-            isSwitchNetwork={isSwitchNetwork}
-            isWalletConnected={isWalletConnected}
-            status={status}
-            isDepositAllowed={isDepositAllowed}
-            text={depositButtonText}
-            openConnectWallet={openConnectWallet}
-            switchNetwork={switchNetwork}
-            openLaunchpadDepositAction={() => {
-              setIsOpenDepositConfirmModal(true);
-            }}
-          />
-        </div>
-      )}
-      {isLoading && <div css={pulseSkeletonStyle({ w: "100%", h: 57 })} />} */}
       {buttonRender()}
 
       {isOpenDepositConfirmModal && (

diff --git a/...unchpad/launchpad-detail/components/launchpad-project-summary/LaunchpadProjectSummary.tsx b/...unchpad/launchpad-detail/components/launchpad-project-summary/LaunchpadProjectSummary.tsx
@@ -93,11 +93,9 @@ const LaunchpadProjectSummary: React.FC<LaunchpadProjectSummaryProps> = ({
             floatingContent={
               <Trans
                 ns="Launchpad"
+                components={{ br: <br /> }}
                 i18nKey={"common.tooltip.tokensDistributed"}
-              >
-                The total amount of project tokens <br />
-                distributed to participants.
-              </Trans>
+              />
             }
           />
         </div>