Merge pull request #1095 from dacadeorg/fix/show-prize-in-10k

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

Author: musayann

src/components/badges/RewardBadge.tsx

@@ -1,4 +1,5 @@
 import Coin from "@/components/ui/Coin";
+import { shortenNumber } from "@/utilities";
 import classNames from "classnames";
 import { ReactElement } from "react";
 
@@ -46,8 +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}
-          {token}
+          {displayAmount && shortenNumber(amount)} {token}
         </div>
       )}
     </span>

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 { shortenNumber } 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`}`}
+                      {shortenNumber(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 { shortenNumber } 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>{shortenNumber(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)}
+                    {shortenNumber(reward.amount)} {reward.token}/{formatToken(reward.type)}
                   </span>
                 ))}
               </div>

src/components/cards/community/_partials/RewardBadge.tsx

@@ -1,6 +1,7 @@
 import { CSSProperties, ReactElement } from "react";
 import Coin from "@/components/ui/Coin";
 import classNames from "classnames";
+import { shortenNumber } from "@/utilities";
 
 /**
  * Interface for Badge props
@@ -40,8 +41,7 @@ export default function RewardBadge({ reward = {}, type = "transparent", styles
       {reward.token && <Coin token={reward.token} size="small" />}
 
       <div className="pl-0 pr-2 font-medium">
-        {reward.amount}
-        {reward.token}
+        {shortenNumber(reward.amount as number)} {reward.token}
       </div>
     </span>
   );

src/components/cards/community/index.tsx

@@ -74,7 +74,7 @@ export default function CommunityCard({ showRewards = true, community }: Communi
             </div>
             <div className="flex flex-col items-start justify-start max-w-xs -mt-4 md:flex-row lg:flex-col md:-mt-7 md:max-w-lg">
               {showRewards && reward && (
-                <div className="text-sm flex">
+                <div className="text-sm flex bg-lime-400">
                   <RewardBadge reward={{ token: reward.token }} styles={rewardBadgeStyle} />
                 </div>
               )}

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

@@ -1,15 +1,16 @@
 import { Distribution, Reward } from "@/types/course";
+import { shortenNumber } 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>{`${shortenNumber(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 ${shortenNumber(first)}; 2nd Place ${shortenNumber(second)}; 3rd Place ${shortenNumber(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 { shortenNumber } 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">{shortenNumber(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 shortenNumber = (amount: number) => {
+  const abreviations = [
+    { value: 1000000000, notation: "B" },
+    { value: 1000000, notation: "M" },
+    { value: 1000, notation: "K" },
+  ];
+
+  const abbreviation = abreviations.find(({ value }) => amount >= value);
+
+  if (!abbreviation) return amount;
+
+  const product = amount / abbreviation.value;
+  const isFloat = product % 1 !== 0;
+  return `${isFloat ? product.toFixed(1) : product}${abbreviation.notation}`;
+};