Merge pull request #1181 from dacadeorg/fix/add-rewarding-currency

refactor: add fiat currency token on the rewards card

Author: musayann

public/locales/bg/common.json

@@ -104,6 +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.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,6 +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.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,6 +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.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,6 +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.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

@@ -30,7 +30,7 @@ export default function ChallengeCard({ data, community, isCourseEnd }: Challeng
   const link = `/communities/${community.slug}/challenges/${data.id}`;
   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 amount = shortenNumber(data?.rewards?.reduce((acc, reward) => (acc += Number(reward.amount)), 0));
 
   return (
     <div className="border-solid border border-gray-200 bg-gray-50 rounded-3xl mb-5 group text-gray-700">
@@ -60,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">
-                      {shortenNumber(totalReward)} {reward?.token} {` ${data?.isHackathon ? `Prize pool` : ""} rewards`}
+                      {data?.isHackathon ? <>{reward?.fiatCurrency ?
+                        t('communities.overview.reward.fiat.prize.pool', { amount, currency: reward.fiatCurrency, token: reward?.token }) :
+                        t('communities.overview.reward.crypto.prize.pool', { amount, token: reward?.token })
+                      } </> : <>{amount} {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/cards/challenge/Overview.tsx

@@ -55,6 +55,7 @@ export default function Overview({ challenge, community }: Props) {
             <div className="text-sm md:pl-2 max-w-max">
               <div className="flex gap-1 text-gray-700 font-medium">
                 <span>{shortenNumber(reward.amount)}</span>
+                <span>{reward?.fiatCurrency ? `${reward?.fiatCurrency} in` : ''}</span>
                 <span>{reward?.token}</span>
                 <span>{t("communities.overview.challenge.rewards")}</span>
               </div>

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

@@ -1,12 +1,19 @@
 import { Distribution, Reward } from "@/types/course";
 import { shortenNumber } from "@/utilities";
+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 amount = shortenNumber(reward?.amount);
   return (
     <>
       <div className="flex gap-1 text-gray-700 font-medium">
-        <span>{`${shortenNumber(reward?.amount)} ${reward.token} Prize Pool`}</span>
+        <span>
+          {reward?.fiatCurrency ?
+            t('communities.overview.reward.fiat.prize.pool', { amount, currency: reward.fiatCurrency, token: reward?.token }) :
+            t('communities.overview.reward.crypto.prize.pool', { amount, token: reward?.token })}
+        </span>
         <span>{description}</span>
       </div>
       <div className="text-gray-400 text-xs font-medium leading-3 mt-1 flex">

src/types/course.d.ts

@@ -144,6 +144,7 @@ export type Reward = {
   community: string;
   token: string;
   stable: boolean;
+  fiatCurrency?: string;
   amount: number;
   timestamp: number;
   distribution?: Distribution;