refactor: use a variable for code readability

Author: serapieTuyishime

src/components/cards/challenge/Challenge.tsx

@@ -31,6 +31,7 @@ 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 ? `Prize pool` : ""} rewards`
 
   return (
     <div className="border-solid border border-gray-200 bg-gray-50 rounded-3xl mb-5 group text-gray-700">
@@ -60,7 +61,7 @@ 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?.fiatCurrency ? `${reward?.fiatCurrency} in` : ''} {reward?.token} {` ${data?.isHackathon ? `Prize pool` : ""} rewards`}
+                      {prize}
                     </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

@@ -3,10 +3,11 @@ import { shortenNumber } from "@/utilities";
 
 export default function HackathonPrize({ reward, description }: { reward: Reward; description: string }) {
   const { first, second, third } = reward?.distribution || ({} as Distribution);
+  const totalPrize = `${shortenNumber(reward?.amount)} ${reward?.fiatCurrency ? `${reward?.fiatCurrency} in` : ''} ${reward.token} Prize Pool`;
   return (
     <>
       <div className="flex gap-1 text-gray-700 font-medium">
-        <span>{`${shortenNumber(reward?.amount)} ${reward?.fiatCurrency ? `${reward?.fiatCurrency} in` : ''} ${reward.token} Prize Pool`}</span>
+        <span>{totalPrize}</span>
         <span>{description}</span>
       </div>
       <div className="text-gray-400 text-xs font-medium leading-3 mt-1 flex">