feat: merge branch dev into ft/incorporate-new-certificate

Author: mhenriette

next-i18next.config.js

@@ -3,7 +3,7 @@ const path = require("path");
 
 module.exports = {
   i18n: {
-    locales: ["en", "bg", "es", "hr"],
+    locales: ["en", "bg", "es", "hr", "ko", "zh"],
     defaultLocale: "en",
   },
   localePath: path.resolve("./public/locales"),

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/Reputation.tsx

@@ -32,10 +32,16 @@ interface ReputationCardProps {
  */
 export default function ReputationCard({ details = {} }: ReputationCardProps): ReactElement {
   return (
-    <div className="flex space-x-3 text-left hover:bg-gray-50 pb-3 -mx-5 px-5">
-      <Avatar icon={details.community?.icon} color={details.community?.colors?.cover?.background || details.community?.colors.primary} size="medium" shape="rounded" />
+    <div className="flex space-x-3 text-left hover:bg-gray-50 py-3 -mx-5 px-5 relative">
+      <Avatar
+        icon={details.community?.icon}
+        color={details.community?.colors?.cover?.background || details.community?.colors.primary}
+        size="medium"
+        shape="rounded"
+        useLink={false}
+      />
       {details?.score && (
-        <Link href={details?.community ? `/communities/${details.community.slug}` : ""} className="pt-1">
+        <Link href={details?.community ? `/communities/${details.community.slug}` : ""} className="pt-1 before:content-[''] before:absolute before:top-0 before:left-0 before:w-full before:h-full before:z-0 before:block">
           <span className="block text-base font-medium leading-normal">
             <Currency value={details.score} token="REP" />
           </span>

src/components/cards/challenge/Challenge.tsx

@@ -7,6 +7,7 @@ import Badges from "./Badges";
 import { useMemo } from "react";
 import { useTranslation } from "next-i18next";
 import Image from "next/image";
+import { shortenNumber } from "@/utilities";
 
 /**
  * `ChallengeCard` is a function component that renders a card
@@ -27,8 +28,7 @@ export default function ChallengeCard({ data, community, isCourseEnd }: Challeng
   const link = `/communities/${community.slug}/challenges/${data.id}`;
   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 learningModulesCount = useMemo(() => (data?.learningModules?.length ? data?.learningModules.length : 0), [data?.learningModules?.length]);
-
+  const learningModulesCount = data?.learningModules.length || 0;
 
   return (
     <div className="w-full justify-between- flex flex-col sm:flex-row  md:flex-col lg:flex-row  border-solid border border-gray-200 bg-gray-50 rounded-3xl mb-5 group text-gray-700">
@@ -72,7 +72,7 @@ export default function ChallengeCard({ data, community, isCourseEnd }: Challeng
               <Coin size="small" token={reward?.token} />
               <div className="text-sm">
                 <span>
-                  {reward.amount} {reward.token}
+                  {shortenNumber(reward.amount)} {reward.token}
                 </span>
                 <span>
                   {reward.type === "SUBMISSION" ? (

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/List.tsx

@@ -59,7 +59,7 @@ export default function CommunityListCard({ community }: CommunityListCardProps)
                           {t("communities.list-card.earn")} <span className="font-bold">{reward?.token}</span>
                         </div>
                         <div className="font-light leading-tight">
-                          {t(community.courses !== 1 ? "communities.card.courses" : "communities.card.course", { count: community.courses })}
+                          {t(community.challenges > 1 ? "communities.card.challenges" : "communities.card.challenge", { count: community.challenges })}
                         </div>
                       </div>
                     </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/popups/user/Dropdown.tsx

@@ -128,7 +128,7 @@ const UserProfileDropdown = ({ buttonStyles, onClose }: { buttonStyles?: CSSProp
         ) : (
           <></>
         )}
-        {showLanguageSwitcher && <LanguageList />}
+        {showLanguageSwitcher && <LanguageList onSelect={onClose} />}
         <div className="p-4 flex justify-center bg-indigo-50">
           <div className="z-10">
             <Button

src/components/sections/bounties/Navigation.tsx

@@ -55,7 +55,7 @@ export default function BountiesNavigation(): ReactElement {
           ...UniqBy(
             bounties.map((bounty) => {
               return {
-                label: bounty.name,
+                label: bounty.community,
                 exact: true,
                 link: `/bounties/${bounty.slug}`,
               };