Merge pull request #2264 from zeitgeistpm/tr-new-categories

New categories

components/front-page/PopularCategories.tsx

@@ -9,10 +9,11 @@ export const CATEGORIES = [
   { name: "Technology", imagePath: "/category/technology.png" },
   { name: "Crypto", imagePath: "/category/crypto.png" },
   { name: "Science", imagePath: "/category/science.png" },
-  { name: "E-Sports", imagePath: "/category/e-sports.png" },
   { name: "News", imagePath: "/category/news.png" },
   { name: "Dotsama", imagePath: "/category/dotsama.png" },
   { name: "Zeitgeist", imagePath: "/category/zeitgeist.png" },
+  { name: "Entertainment", imagePath: "/category/entertainment.png" },
+  { name: "Finance", imagePath: "/category/finance.png" },
 ] as const;
 
 const Category = ({
@@ -32,7 +33,7 @@ const Category = ({
       className="ztg-transition flex w-full min-w-[80px] flex-1 flex-col md:hover:scale-[1.035]"
       data-testid="category"
     >
-      <div className="relative  aspect-square h-full w-full">
+      <div className="relative aspect-square h-full w-full">
         <Link
           href={`/markets?status=Active&tag=${title}#market-list`}
           className="relative block h-full w-full"
@@ -74,7 +75,7 @@ const PopularCategories: FC<{
     placeholder: imagePlaceholders[index],
   }))
     .sort((a, b) => b.count - a.count)
-    .slice(0, 6);
+    .slice(0, 8);
 
   return (
     <div className="flex flex-col" data-testid="popularCategories">

components/top-bar/index.tsx

@@ -267,9 +267,17 @@ const GetTokensButton = () => {
 
 const CategoriesMenu = ({ onSelect }: { onSelect: () => void }) => {
   const { data: counts } = useCategoryCounts();
+
+  const topCategories = CATEGORIES.map((category, index) => ({
+    ...category,
+    count: counts?.[index] ?? 0,
+  }))
+    .sort((a, b) => b.count - a.count)
+    .slice(0, 9);
+
   return (
     <div className="grid grid-flow-row-dense grid-cols-2 md:h-full md:grid-cols-3">
-      {CATEGORIES.map((category, index) => (
+      {topCategories.map((category, index) => (
         <Link
           key={index}
           onClick={onSelect}
@@ -286,9 +294,7 @@ const CategoriesMenu = ({ onSelect }: { onSelect: () => void }) => {
           </div>
           <div className="flex flex-col">
             <div className="font-light">{category.name}</div>
-            <div className="h-[16px] text-xs font-light">
-              {counts ? counts[index] : ""}
-            </div>
+            <div className="h-[16px] text-xs font-light">{category.count}</div>
           </div>
         </Link>
       ))}

lib/constants/category-images.ts

@@ -10,9 +10,11 @@ export const CATEGORY_IMAGES = union<(typeof tags)[number]>().exhaustAsRecord({
   Technology: range(1, 5).map((i) => `/categories/tech/${i}.png`),
   Crypto: range(1, 5).map((i) => `/categories/crypto/${i}.png`),
   Science: range(1, 5).map((i) => `/categories/science/${i}.png`),
-  "E-Sports": range(1, 6).map((i) => `/categories/esports/${i}.png`),
   News: range(1, 6).map((i) => `/categories/news/${i}.png`),
   Dotsama: range(1, 2).map((i) => `/categories/dotsama/${i}.png`),
   Zeitgeist: range(1, 2).map((i) => `/categories/zeitgeist/${i}.png`),
+  Finance: range(1, 5).map((i) => `/categories/finance/${i}.png`),
+  //todo: add selections for entertainment
+  Entertainment: range(1, 2).map((i) => `/categories/zeitgeist/${i}.png`),
   untagged: range(1, 2).map((i) => `/categories/zeitgeist/${i}.png`),
 });

lib/constants/market-filter.ts

@@ -28,10 +28,11 @@ export const categoryImages: Record<
   Technology: "/category/technology.png",
   Crypto: "/category/crypto.png",
   Science: "/category/science.png",
-  "E-Sports": "/category/e-sports.png",
   Zeitgeist: "/category/zeitgeist.png",
   Dotsama: "/category/dotsama.png",
   News: "/category/news.png",
+  Entertainment: "/category/entertainment.png",
+  Finance: "/category/finance.png",
 } as const;
 
 export const marketTagFilterOptions: MarketTagFilter[] = defaultTags.map(

lib/constants/markets.ts

@@ -9,7 +9,8 @@ export const prodTags = [
   "Science",
   "News",
   "Sports",
-  "E-Sports",
+  "Entertainment",
+  "Finance",
 ] as const;
 
 const otherTags = process.env.NEXT_PUBLIC_OTHER_TAGS