fix: shortnen numbers to K in rewards, bounties, challenge cards

Author: serapieTuyishime

src/components/badges/RewardBadge.tsx

@@ -1,4 +1,5 @@
 import Coin from "@/components/ui/Coin";
+import { shorternNumber } from "@/utilities";
 import classNames from "classnames";
 import { ReactElement } from "react";
 
@@ -46,7 +47,7 @@ export default function RewardBadge({ reward = {}, type = "transparent", display
       {token && <Coin token={token} size="small" />}
       {amount && (
         <div className="font-medium pl-0 pr-2">
-          {displayAmount && amount}
+          {displayAmount && shorternNumber(amount)}
           {token}
         </div>
       )}

src/components/cards/challenge/Challenge.tsx

@@ -8,6 +8,7 @@ import RelatedContent from "./RelatedContent";
 import Badges from "./Badges";
 import { useMemo } from "react";
 import { useTranslation } from "next-i18next";
+import { shorternNumber } from "@/utilities";
 
 /**
  * `ChallengeCard` is a function component that renders a card
@@ -59,7 +60,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">
-                      {`${data?.isHackathon ? "$" : ""} ${totalReward} ${data?.isHackathon ? `Prize Pool Rewards` : `${reward?.token} Rewards`}`}
+                      {shorternNumber(totalReward)} {reward?.token} {` ${data?.isHackathon ? `Prize pool` : ""} rewards`}
                     </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

@@ -4,6 +4,7 @@ import { useTranslation } from "next-i18next";
 import DateManager from "@/utilities/DateManager";
 import Certificate from "@/components/ui/Certificate";
 import { Community } from "@/types/community";
+import { shorternNumber } from "@/utilities";
 
 interface Props {
   challenge: Challenge;
@@ -53,15 +54,15 @@ export default function Overview({ challenge, community }: Props) {
             <Coin size="medium" token={reward?.token} />
             <div className="text-sm md:pl-2 max-w-max">
               <div className="flex gap-1 text-gray-700 font-medium">
-                <span>{reward.amount}</span>
+                <span>{shorternNumber(reward.amount)}</span>
                 <span>{reward?.token}</span>
                 <span>{t("communities.overview.challenge.rewards")}</span>
               </div>
               <div className="text-gray-400 text-xs font-medium leading-3 mt-1 flex">
                 {challenge.rewards.map((reward, index) => (
                   <span key={`reward-${index}`}>
                     {index > 0 && "\u003B "}
-                    {reward.amount} {reward.token}/{formatToken(reward.type)}
+                    {shorternNumber(reward.amount)} {reward.token}/{formatToken(reward.type)}
                   </span>
                 ))}
               </div>

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

@@ -1,15 +1,16 @@
 import { Distribution, Reward } from "@/types/course";
+import { shorternNumber } from "@/utilities";
 
 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>{`${shorternNumber(reward?.amount)} ${reward.token} Prize Pool`}</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>
+        <span>{`1st Place ${shorternNumber(first)}; 2nd Place $${shorternNumber(second)}; 3rd Place $${shorternNumber(third)}`}</span>
       </div>
     </>
   );

src/components/ui/Reward.tsx

@@ -1,6 +1,7 @@
 import Coin from "../ui/Coin";
 import { useTranslation } from "next-i18next";
 import { Reward } from "@/types/course";
+import { shorternNumber } from "@/utilities";
 
 interface OverviewRewardsProps {
   reward: Reward;
@@ -18,7 +19,7 @@ export default function OverviewRewards({ reward, category, size }: OverviewRewa
           <Coin token={reward.token} className="flex-none" />
           <div className="text-base lg:pl-2 lg:pr-3 md:px-2 max-w-max">
             <div className="flex">
-              <span className="block font-medium text-base pr-1">{reward.amount}</span>
+              <span className="block font-medium text-base pr-1">{shorternNumber(reward.amount)}</span>
               <span className="block font-medium text-base">{reward.token}</span>
             </div>
             <div className="flex">

src/types/course.d.ts

@@ -143,9 +143,9 @@ export type Reward = {
   distribution?: Distribution;
 };
 export type Distribution = {
-  first: string;
-  second: string;
-  third: string;
+  first: number;
+  second: number;
+  third: number;
 };
 
 export type Introduction = {

src/utilities/index.ts

@@ -8,3 +8,23 @@
 export function sleep(ms: number): Promise<unknown> {
   return new Promise((resolve) => setTimeout(resolve, ms));
 }
+
+/**
+ * Convert a number to K ex : 7000 -> 7K, 2510 -> 2.5K
+ * @date 12/7/2023 - 6:50:18 PM
+ */
+export const shorternNumber = (amount: number) => {
+  const abbrevObject = [
+    { value: 1000000000, abbreviation: "B" },
+    { value: 1000000, abbreviation: "M" },
+    { value: 1000, abbreviation: "K" },
+  ];
+  for (const { value, abbreviation } of abbrevObject) {
+    if (amount >= value) {
+      const product = amount / value;
+      const isFloat = product % 1 !== 0;
+      return `${isFloat ? product.toFixed(1) : product}${abbreviation}`;
+    }
+  }
+  return amount;
+};