refactor: rename function from shorternNumber to shortenNumber

Author: serapieTuyishime

src/components/badges/RewardBadge.tsx

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

src/components/cards/challenge/Challenge.tsx

@@ -8,7 +8,7 @@ import RelatedContent from "./RelatedContent";
 import Badges from "./Badges";
 import { useMemo } from "react";
 import { useTranslation } from "next-i18next";
-import { shorternNumber } from "@/utilities";
+import { shortenNumber } from "@/utilities";
 
 /**
  * `ChallengeCard` is a function component that renders a card
@@ -60,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">
-                      {shorternNumber(totalReward)} {reward?.token} {` ${data?.isHackathon ? `Prize pool` : ""} 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,7 +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";
+import { shortenNumber } from "@/utilities";
 
 interface Props {
   challenge: Challenge;
@@ -54,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>{shorternNumber(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 "}
-                    {shorternNumber(reward.amount)} {reward.token}/{formatToken(reward.type)}
+                    {shortenNumber(reward.amount)} {reward.token}/{formatToken(reward.type)}
                   </span>
                 ))}
               </div>

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

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

src/components/ui/Reward.tsx

@@ -1,7 +1,7 @@
 import Coin from "../ui/Coin";
 import { useTranslation } from "next-i18next";
 import { Reward } from "@/types/course";
-import { shorternNumber } from "@/utilities";
+import { shortenNumber } from "@/utilities";
 
 interface OverviewRewardsProps {
   reward: Reward;
@@ -19,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">{shorternNumber(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/utilities/index.ts

@@ -13,7 +13,7 @@ export function sleep(ms: number): Promise<unknown> {
  * Convert a number to K ex : 7000 -> 7K, 2510 -> 2.5K
  * @date 12/7/2023 - 6:50:18 PM
  */
-export const shorternNumber = (amount: number) => {
+export const shortenNumber = (amount: number) => {
   const abbrevObject = [
     { value: 1000000000, abbreviation: "B" },
     { value: 1000000, abbreviation: "M" },