refactor: add translatioon that receives parameters

Author: serapieTuyishime

public/locales/bg/common.json

@@ -104,7 +104,8 @@
   "communities.overview.info.prerequisite.subtitle": "In order to complete this course you should:",
   "communities.overview.trailer.video": "Video",
   "communities.overview.reward.title": "Награди",
-  "communities.overview.reward.prize.pool": "награден фонд",
+  "communities.overview.reward.fiat.prize.pool": "{{amount}} {{currency}} в {{token}} награден фонд",
+  "communities.overview.reward.crypto.prize.pool": "{{amount}} {{token}} награден фонд",
   "communities.overview.challenge.title": "Вече сте готови да изпълните предизвикателството?",
   "communities.overview.challenge.objective.title": "Цели на предизвикателството",
   "communities.overview.reward.subtitle": "Какво може да получите в тази общност:",

public/locales/en/common.json

@@ -102,7 +102,8 @@
   "communities.overview.info.prerequisite.subtitle": "In order to complete this course you should:",
   "communities.overview.trailer.video": "Video",
   "communities.overview.reward.title": "Rewards",
-  "communities.overview.reward.prize.pool": "Prize pool",
+  "communities.overview.reward.fiat.prize.pool": "{{amount}} {{currency}} in {{token}} prize pool",
+  "communities.overview.reward.crypto.prize.pool": "{{amount}} {{token}} prize pool",
   "communities.overview.challenge.objective.title": "Challenge objectives",
   "communities.overview.reward.subtitle": "What you can earn in this community:",
   "communities.chapter.objective.subtitle": "After completing this chapter, you will:",

public/locales/es/common.json

@@ -102,7 +102,8 @@
   "communities.overview.info.prerequisite.subtitle": "Para completar este curso deberáIn order to complete this course you should:",
   "communities.overview.trailer.video": "Video",
   "communities.overview.reward.title": "Recompensas",
-  "communities.overview.reward.prize.pool": "bolsa de premios",
+  "communities.overview.reward.fiat.prize.pool": "{{amount}} {{currency}} en {{token}} bolsa de premios",
+  "communities.overview.reward.crypto.prize.pool": "{{amount}} {{token}} bolsa de premios",
   "communities.overview.challenge.objective.title": "Objetivos del desafío",
   "communities.overview.reward.subtitle": "Vea qué puede ganar en esta comunidad:",
   "communities.chapter.objective.subtitle": "Después de completar este capítulo, usetd:",

public/locales/hr/common.json

@@ -104,7 +104,8 @@
   "communities.overview.info.prerequisite.subtitle": "In order to complete this course you should:",
   "communities.overview.trailer.video": "Video",
   "communities.overview.reward.title": "Nagrade",
-  "communities.overview.reward.prize.pool": "nagradni fond",
+  "communities.overview.reward.fiat.prize.pool": "{{amount}} {{currency}} u {{token}} fondu nagrada",
+  "communities.overview.reward.crypto.prize.pool": "{{amount}} {{token}} fondu nagrada",
   "communities.overview.challenge.objective.title": "Ciljevi izazova",
   "communities.overview.reward.subtitle": "Što možete zaraditi u ovoj zajednici:",
   "communities.chapter.objective.subtitle": "After completing this chapter, you will:",

src/components/cards/challenge/Challenge.tsx

@@ -31,7 +31,6 @@ export default function ChallengeCard({ data, community, isCourseEnd }: Challeng
   const expiresAt = useMemo(() => (data.expiresAt ? new Date(data.expiresAt).toLocaleDateString() : null), [data.expiresAt]);
   const reward = isCourseEnd ? data?.rewards?.find((reward) => reward.type === "SUBMISSION") : data?.reward;
   const totalReward = data?.rewards?.reduce((acc, reward) => (acc += Number(reward.amount)), 0);
-  const prize = `${shortenNumber(totalReward)} ${reward?.fiatCurrency ? `${reward?.fiatCurrency} in` : ''} ${reward?.token} ${data?.isHackathon ? t("communities.overview.reward.prize.pool") : ""} ${t("communities.overview.reward.title")}`
 
   return (
     <div className="border-solid border border-gray-200 bg-gray-50 rounded-3xl mb-5 group text-gray-700">
@@ -61,7 +60,12 @@ export default function ChallengeCard({ data, community, isCourseEnd }: Challeng
                 <div className="md:pl-2 max-w-max">
                   <div className="flex text-sm text-gray-700">
                     <span className="block font-medium">
-                      {prize}
+                      {data?.isHackathon ? <>{reward?.fiatCurrency ?
+                        t('communities.overview.reward.fiat.prize.pool', { amount: shortenNumber(totalReward), currency: reward.fiatCurrency, token: reward?.token }) :
+                        t('communities.overview.reward.crypto.prize.pool', { amount: shortenNumber(totalReward), token: reward?.token })
+                      } </> : <>{shortenNumber(totalReward)} {reward?.token} </>}
+
+                      {t("communities.overview.reward.title")}
                     </span>
                   </div>
                   <div className="text-gray-400 text-xs font-normal">{data?.isHackathon ? "Top projects win money prizes" : "For submission and feedback"}</div>

src/components/sections/challenges/_partials/HackathonPrize.tsx

@@ -5,11 +5,15 @@ import { useTranslation } from "react-i18next";
 export default function HackathonPrize({ reward, description }: { reward: Reward; description: string }) {
   const { t } = useTranslation()
   const { first, second, third } = reward?.distribution || ({} as Distribution);
-  const totalPrize = `${shortenNumber(reward?.amount)} ${reward?.fiatCurrency ? `${reward?.fiatCurrency} in` : ''} ${reward.token} ${t("communities.overview.reward.prize.pool")}`;
+
   return (
     <>
       <div className="flex gap-1 text-gray-700 font-medium">
-        <span>{totalPrize}</span>
+        <span>
+          {reward?.fiatCurrency ?
+            t('communities.overview.reward.fiat.prize.pool', { amount: shortenNumber(reward?.amount), currency: reward.fiatCurrency, token: reward?.token }) :
+            t('communities.overview.reward.crypto.prize.pool', { amount: shortenNumber(reward?.amount), token: reward?.token })}
+        </span>
         <span>{description}</span>
       </div>
       <div className="text-gray-400 text-xs font-medium leading-3 mt-1 flex">