refactor:

solve hydration error in the hachathon rewards card

Author: serapieTuyishime

public/locales/en/common.json

@@ -122,7 +122,7 @@
   "communities.overview.challenge.team.setup.info": "To complete the team challenge, you need to follow these steps:",
   "communities.overview.challenge.team.setup.submit-title": "Submit your team",
   "communities.overview.challenge.submission.description": "Paste the code of your team below and it will automatically link to all the profiles",
-  "communities.challenge.submission.hint": "Submitions will be enabled when when all the team members accept the invitation and the team is fully formed.",
+  "communities.challenge.submission.hint": "Submissions will be enabled when when all the team members accept the invitation and the team is fully formed.",
   "communities.overview.challenge.deadline": "Deadline",
   "communities.overview.challenge.submissions-closed": "Submissions for this challenge are now closed.",
   "communities.challenge.hint": "Hint",

src/components/sections/challenges/Rewards.tsx

@@ -50,7 +50,7 @@ export function OverviewRewards(): ReactElement {
             <Coin size="medium" token={reward?.token} />
             <div className="text-sm space-y-2 md:pl-2 max-w-max">
               {challenge?.isHackathon ? (
-                <HackathonPrize reward={reward} />
+                <HackathonPrize reward={reward} description={t("communities.overview.challenge.rewards")} />
               ) : (
                 <>
                   <div className="flex gap-1 text-gray-700 font-medium">

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

@@ -1,14 +1,12 @@
 import { Distribution, Reward } from "@/types/course";
-import { useTranslation } from "react-i18next";
 
-export default function HackathonPrize({ reward }: { reward: Reward }) {
-  const { t } = useTranslation();
+export default function HackathonPrize({ reward, description }: { reward: Reward; description: string }) {
   const { first, second, third } = reward?.distribution || ({} as Distribution);
   return (
     <>
       <div className="flex gap-1 text-gray-700 font-medium">
         <span>{`$${reward?.amount} Prize Pool`}</span>
-        <span>{t("communities.overview.challenge.rewards")}</span>
+        <span>{description}</span>
       </div>
       <div className="text-gray-400 text-xs font-medium leading-3 mt-1 flex">
         <span>{`1st Place $${first};  2nd Place $${second}; 3rd Place $${third}`}</span>