From 8fbcdf0564f256c844edfd4cabd0f308d191e65f Mon Sep 17 00:00:00 2001
From: mokelgit <maym2018@gmail.com>
Date: Thu, 30 May 2024 15:14:55 -0400
Subject: [PATCH 1/6] Moving single chains components to single chains folder
 for organization

---
 app/(layout)/chains/[chain]/page.tsx          |   4 +-
 .../layout/{ => SingleChains}/ChainChart.tsx  | 258 ++++++++++--------
 .../{ => SingleChains}/ChainSectionHead.tsx   |   0
 3 files changed, 139 insertions(+), 123 deletions(-)
 rename components/layout/{ => SingleChains}/ChainChart.tsx (92%)
 rename components/layout/{ => SingleChains}/ChainSectionHead.tsx (100%)

diff --git a/app/(layout)/chains/[chain]/page.tsx b/app/(layout)/chains/[chain]/page.tsx
index 409948e8..0d661686 100644
--- a/app/(layout)/chains/[chain]/page.tsx
+++ b/app/(layout)/chains/[chain]/page.tsx
@@ -4,7 +4,7 @@ import useSWR, { preload } from "swr";
 import { useSWRConfig } from "swr";
 import { MasterResponse } from "@/types/api/MasterResponse";
 import { AllChains, AllChainsByKeys, AllChainsByUrlKey } from "@/lib/chains";
-import ChainChart from "@/components/layout/ChainChart";
+import ChainChart from "@/components/layout/SingleChains/ChainChart";
 import Heading from "@/components/layout/Heading";
 import Subheading from "@/components/layout/Subheading";
 import { Icon } from "@iconify/react";
@@ -25,7 +25,7 @@ import {
   Chains,
 } from "@/types/api/ChainOverviewResponse";
 import { getFundamentalsByKey } from "@/lib/navigation";
-import ChainSectionHead from "@/components/layout/ChainSectionHead";
+import ChainSectionHead from "@/components/layout/SingleChains/ChainSectionHead";
 import { useMemo, useState, useEffect, useCallback, useRef } from "react";
 import { useSessionStorage, useLocalStorage } from "usehooks-ts";
 import { notFound } from "next/navigation";
diff --git a/components/layout/ChainChart.tsx b/components/layout/SingleChains/ChainChart.tsx
similarity index 92%
rename from components/layout/ChainChart.tsx
rename to components/layout/SingleChains/ChainChart.tsx
index 1f723940..37904c80 100644
--- a/components/layout/ChainChart.tsx
+++ b/components/layout/SingleChains/ChainChart.tsx
@@ -43,17 +43,21 @@ import { useUIContext } from "@/contexts/UIContext";
 import { ChainURLs, MasterURL } from "@/lib/urls";
 import { MasterResponse } from "@/types/api/MasterResponse";
 import useSWR, { preload } from "swr";
-import ChartWatermark from "./ChartWatermark";
+import ChartWatermark from "@/components/layout/ChartWatermark";
 import { ChainsData } from "@/types/api/ChainResponse";
 import { IS_DEVELOPMENT, IS_PREVIEW, IS_PRODUCTION } from "@/lib/helpers";
-import ChainSectionHead from "@/components/layout/ChainSectionHead";
+import ChainSectionHead from "@/components/layout/SingleChains/ChainSectionHead";
 import {
   TopRowContainer,
   TopRowChild,
   TopRowParent,
 } from "@/components/layout/TopRow";
 import "@/app/highcharts.axis.css";
-import { Tooltip, TooltipContent, TooltipTrigger } from "./Tooltip";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/layout/Tooltip";
 import { useSWRConfig } from "swr";
 
 const COLORS = {
@@ -289,7 +293,7 @@ export default function ChainChart({
       Object.keys(item.metrics).forEach((key) => {
         maxUnixtimes.push(
           item.metrics[key].daily.data[
-          item.metrics[key].daily.data.length - 1
+            item.metrics[key].daily.data.length - 1
           ][0],
         );
       });
@@ -667,17 +671,20 @@ export default function ChainChart({
           // if (series.name === item.chain_name) {
           return `
                 <div class="flex w-full space-x-2 items-center font-medium mb-1">
-                  <div class="w-4 h-1.5 rounded-r-full" style="background-color: ${AllChainsByKeys[name].colors[theme ?? "dark"][0]
-            }"></div>
+                  <div class="w-4 h-1.5 rounded-r-full" style="background-color: ${
+                    AllChainsByKeys[name].colors[theme ?? "dark"][0]
+                  }"></div>
                   <div class="flex-1 text-left justify-start font-inter flex">
-                      <div class="opacity-70 mr-0.5 ${!prefix && "hidden"
-            }">${prefix}</div>
+                      <div class="opacity-70 mr-0.5 ${
+                        !prefix && "hidden"
+                      }">${prefix}</div>
                       ${parseFloat(value).toLocaleString("en-GB", {
-              minimumFractionDigits: decimals,
-              maximumFractionDigits: decimals,
-            })}
-                      <div class="opacity-70 ml-0.5 ${!suffix && "hidden"
-            }">${suffix}</div>
+                        minimumFractionDigits: decimals,
+                        maximumFractionDigits: decimals,
+                      })}
+                      <div class="opacity-70 ml-0.5 ${
+                        !suffix && "hidden"
+                      }">${suffix}</div>
                   </div>
                 </div>`;
           // } else {
@@ -1050,12 +1057,12 @@ export default function ChainChart({
             [
               0,
               AllChainsByKeys[data[0].chain_id].colors[theme ?? "dark"][0] +
-              "33",
+                "33",
             ],
             [
               1,
               AllChainsByKeys[data[0].chain_id].colors[theme ?? "dark"][1] +
-              "33",
+                "33",
             ],
           ],
         },
@@ -1255,16 +1262,16 @@ export default function ChainChart({
             const seriesData = item.metrics[key]?.daily.types.includes("eth")
               ? showUsd
                 ? item.metrics[key].daily.data.map((d) => [
-                  d[0],
-                  d[item.metrics[key].daily.types.indexOf("usd")],
-                ])
+                    d[0],
+                    d[item.metrics[key].daily.types.indexOf("usd")],
+                  ])
                 : item.metrics[key].daily.data.map((d) => [
-                  d[0],
-                  showGwei(key)
-                    ? d[item.metrics[key].daily.types.indexOf("eth")] *
-                    1000000000
-                    : d[item.metrics[key].daily.types.indexOf("eth")],
-                ])
+                    d[0],
+                    showGwei(key)
+                      ? d[item.metrics[key].daily.types.indexOf("eth")] *
+                        1000000000
+                      : d[item.metrics[key].daily.types.indexOf("eth")],
+                  ])
               : item.metrics[key]?.daily.data.map((d) => [d[0], d[1]]);
 
             const seriesTypes = item.metrics[key]?.daily.types;
@@ -1287,16 +1294,16 @@ export default function ChainChart({
                 data: item.metrics[key]?.daily.types.includes("eth")
                   ? showUsd
                     ? item.metrics[key].daily.data.map((d) => [
-                      d[0],
-                      d[item.metrics[key].daily.types.indexOf("usd")],
-                    ])
+                        d[0],
+                        d[item.metrics[key].daily.types.indexOf("usd")],
+                      ])
                     : item.metrics[key].daily.data.map((d) => [
-                      d[0],
-                      showGwei(key)
-                        ? d[item.metrics[key].daily.types.indexOf("eth")] *
-                        1000000000
-                        : d[item.metrics[key].daily.types.indexOf("eth")],
-                    ])
+                        d[0],
+                        showGwei(key)
+                          ? d[item.metrics[key].daily.types.indexOf("eth")] *
+                            1000000000
+                          : d[item.metrics[key].daily.types.indexOf("eth")],
+                      ])
                   : item.metrics[key]?.daily.data.map((d) => [d[0], d[1]]),
                 showInLegend: false,
                 marker: {
@@ -1322,13 +1329,13 @@ export default function ChainChart({
                     [
                       0,
                       AllChainsByKeys[item.chain_id].colors[
-                      theme ?? "dark"
+                        theme ?? "dark"
                       ][0] + "33",
                     ],
                     [
                       1,
                       AllChainsByKeys[item.chain_id].colors[
-                      theme ?? "dark"
+                        theme ?? "dark"
                       ][1] + "33",
                     ],
                   ],
@@ -1477,16 +1484,18 @@ export default function ChainChart({
         `}
       </style>
       <TopRowContainer
-        className={`mb-[15px] flex w-full justify-between gap-y-3 lg:gap-y-0 items-center text-xs bg-forest-50 dark:bg-[#1F2726] lg:z-30 flex-col-reverse rounded-t-[15px] md:rounded-t-[20px] rounded-b-[30px] p-[3px] lg:p-0 lg:flex-row lg:rounded-full transition-shadow duration-300  ${compareTo &&
+        className={`mb-[15px] flex w-full justify-between gap-y-3 lg:gap-y-0 items-center text-xs bg-forest-50 dark:bg-[#1F2726] lg:z-30 flex-col-reverse rounded-t-[15px] md:rounded-t-[20px] rounded-b-[30px] p-[3px] lg:p-0 lg:flex-row lg:rounded-full transition-shadow duration-300  ${
+          compareTo &&
           "shadow-[0px_4px_4px_#00000033] dark:shadow-[0px_4px_4px_#0000003F] lg:shadow-none lg:dark:shadow-none"
-          } `}
+        } `}
       >
         <div className="flex flex-col relative h-full lg:h-[54px] w-full lg:w-[271px] -my-[1px]">
           <div
-            className={`relative flex rounded-full h-full w-full lg:z-30 p-[5px] cursor-pointer ${compChain
-              ? AllChainsByKeys[compChain].backgrounds[theme ?? "dark"][0]
-              : "bg-white dark:bg-[#151A19]"
-              } ${isMobile ? "w-full" : "w-[271px]"} `}
+            className={`relative flex rounded-full h-full w-full lg:z-30 p-[5px] cursor-pointer ${
+              compChain
+                ? AllChainsByKeys[compChain].backgrounds[theme ?? "dark"][0]
+                : "bg-white dark:bg-[#151A19]"
+            } ${isMobile ? "w-full" : "w-[271px]"} `}
           >
             <div
               className="rounded-[40px] w-[54px] h-[44px] bg-forest-50 dark:bg-[#1F2726] flex items-center justify-center z-[15] hover:cursor-pointer"
@@ -1504,26 +1513,28 @@ export default function ChainChart({
               }}
             >
               <div
-                className={` font-[500] leading-[150%] text-[12px] ${compChain
-                  ? !AllChainsByKeys[compChain].darkTextOnBackground ||
-                    (theme === "light" &&
-                      (compChain === "ethereum" || compChain === "imx"))
-                    ? "text-forest-50"
-                    : "text-[#1F2726]"
-                  : "text-forest-400 dark:text-[#5A6462]"
-                  }`}
+                className={` font-[500] leading-[150%] text-[12px] ${
+                  compChain
+                    ? !AllChainsByKeys[compChain].darkTextOnBackground ||
+                      (theme === "light" &&
+                        (compChain === "ethereum" || compChain === "imx"))
+                      ? "text-forest-50"
+                      : "text-[#1F2726]"
+                    : "text-forest-400 dark:text-[#5A6462]"
+                }`}
               >
                 Compare to
               </div>
               <div
-                className={`flex font-[550] ${compChain
-                  ? !AllChainsByKeys[compChain].darkTextOnBackground ||
-                    (theme === "light" &&
-                      (compChain === "ethereum" || compChain === "imx"))
-                    ? "text-forest-50"
-                    : "text-[#1F2726]"
-                  : ""
-                  } gap-x-[5px] justify-center items-center w-32`}
+                className={`flex font-[550] ${
+                  compChain
+                    ? !AllChainsByKeys[compChain].darkTextOnBackground ||
+                      (theme === "light" &&
+                        (compChain === "ethereum" || compChain === "imx"))
+                      ? "text-forest-50"
+                      : "text-[#1F2726]"
+                    : ""
+                } gap-x-[5px] justify-center items-center w-32`}
               >
                 {compChain && (
                   <Icon
@@ -1547,10 +1558,11 @@ export default function ChainChart({
             </div>
           </div>
           <div
-            className={`flex flex-col relative lg:absolute lg:top-[27px] bottom-auto lg:left-0 lg:right-0 bg-forest-50 dark:bg-[#1F2726] rounded-t-none border-0 lg:border-b lg:border-l lg:border-r transition-all ease-in-out duration-300 ${compareTo
-              ? `max-h-[640px] lg:z-[25] border-transparent rounded-b-[30px] lg:border-forest-200 lg:dark:border-forest-500 lg:rounded-b-2xl lg:shadow-[0px_4px_46.2px_#00000066] lg:dark:shadow-[0px_4px_46.2px_#000000]`
-              : "max-h-0 z-20 overflow-hidden border-transparent rounded-b-[22px]"
-              } `}
+            className={`flex flex-col relative lg:absolute lg:top-[27px] bottom-auto lg:left-0 lg:right-0 bg-forest-50 dark:bg-[#1F2726] rounded-t-none border-0 lg:border-b lg:border-l lg:border-r transition-all ease-in-out duration-300 ${
+              compareTo
+                ? `max-h-[640px] lg:z-[25] border-transparent rounded-b-[30px] lg:border-forest-200 lg:dark:border-forest-500 lg:rounded-b-2xl lg:shadow-[0px_4px_46.2px_#00000066] lg:dark:shadow-[0px_4px_46.2px_#000000]`
+                : "max-h-0 z-20 overflow-hidden border-transparent rounded-b-[22px]"
+            } `}
           >
             <div className="pb-[20px] lg:pb-[10px]">
               <div className="h-[10px] lg:h-[28px]"></div>
@@ -1569,10 +1581,11 @@ export default function ChainChart({
                 <div className="flex w-[22px] h-[22px] items-center justify-center">
                   <Icon
                     icon="feather:x"
-                    className={`transition-all duration-300 ${compChain === null
-                      ? "w-[22px] h-[22px]"
-                      : "w-[15px] h-[15px]"
-                      }`}
+                    className={`transition-all duration-300 ${
+                      compChain === null
+                        ? "w-[22px] h-[22px]"
+                        : "w-[15px] h-[15px]"
+                    }`}
                     style={{
                       color: compChain === null ? "" : "#5A6462",
                     }}
@@ -1613,16 +1626,17 @@ export default function ChainChart({
                   <div className="flex w-[22px] h-[22px] items-center justify-center">
                     <Icon
                       icon={`gtp:${chain.urlKey}-logo-monochrome`}
-                      className={`transition-all duration-300 ${compChain === chain.key
-                        ? "w-[22px] h-[22px]"
-                        : "w-[15px] h-[15px]"
-                        }`}
+                      className={`transition-all duration-300 ${
+                        compChain === chain.key
+                          ? "w-[22px] h-[22px]"
+                          : "w-[15px] h-[15px]"
+                      }`}
                       style={{
                         color:
                           compChain === chain.key
                             ? AllChainsByKeys[chain.key].colors[
-                            theme ?? "dark"
-                            ][0]
+                                theme ?? "dark"
+                              ][0]
                             : "#5A6462",
                       }}
                     />
@@ -1752,8 +1766,8 @@ export default function ChainChart({
                     .map((key, i) => {
                       const isAllZeroValues = data[0].metrics[key]
                         ? data[0].metrics[key].daily.data.every(
-                          (d) => d[1] === 0,
-                        )
+                            (d) => d[1] === 0,
+                          )
                         : false;
 
                       if (!Object.keys(data[0].metrics).includes(key))
@@ -1792,54 +1806,56 @@ export default function ChainChart({
                                     {Object.keys(data[0].metrics).includes(
                                       key,
                                     ) && (
-                                        <Icon
-                                          icon={getNavIcon(key)}
-                                          className="absolute h-[40px] w-[40px] top-[116px] left-[24px] dark:text-[#CDD8D3] opacity-20 pointer-events-none"
-                                        />
-                                      )}
+                                      <Icon
+                                        icon={getNavIcon(key)}
+                                        className="absolute h-[40px] w-[40px] top-[116px] left-[24px] dark:text-[#CDD8D3] opacity-20 pointer-events-none"
+                                      />
+                                    )}
                                   </div>
                                 </div>
 
                                 {!zoomed
                                   ? (key === "market_cap" ||
-                                    key === "txcosts") && (
-                                    <div
-                                      className={`w-full h-[15px] absolute -bottom-[15px] text-[10px] text-forest-600/80 dark:text-forest-500/80 ${key === "txcosts"
-                                        ? "hidden lg:block"
-                                        : ""
+                                      key === "txcosts") && (
+                                      <div
+                                        className={`w-full h-[15px] absolute -bottom-[15px] text-[10px] text-forest-600/80 dark:text-forest-500/80 ${
+                                          key === "txcosts"
+                                            ? "hidden lg:block"
+                                            : ""
                                         }`}
-                                    ></div>
-                                  )
+                                      ></div>
+                                    )
                                   : (key === "profit" || key === "txcosts") &&
-                                  intervalShown && (
-                                    <div
-                                      className={`w-full h-[15px] absolute -bottom-[15px] text-[10px] text-forest-600/80 dark:text-forest-500/80 ${key === "txcosts"
-                                        ? "hidden lg:block"
-                                        : ""
+                                    intervalShown && (
+                                      <div
+                                        className={`w-full h-[15px] absolute -bottom-[15px] text-[10px] text-forest-600/80 dark:text-forest-500/80 ${
+                                          key === "txcosts"
+                                            ? "hidden lg:block"
+                                            : ""
                                         }`}
-                                    >
-                                      <div className="absolute left-[15px] align-bottom flex items-end z-10">
-                                        {new Date(
-                                          intervalShown.min,
-                                        ).toLocaleDateString("en-GB", {
-                                          timeZone: "UTC",
-                                          month: "short",
-                                          day: "numeric",
-                                          year: "numeric",
-                                        })}
-                                      </div>
-                                      <div className="absolute right-[15px] align-bottom flex items-end z-10">
-                                        {new Date(
-                                          intervalShown.max,
-                                        ).toLocaleDateString("en-GB", {
-                                          timeZone: "UTC",
-                                          month: "short",
-                                          day: "numeric",
-                                          year: "numeric",
-                                        })}
+                                      >
+                                        <div className="absolute left-[15px] align-bottom flex items-end z-10">
+                                          {new Date(
+                                            intervalShown.min,
+                                          ).toLocaleDateString("en-GB", {
+                                            timeZone: "UTC",
+                                            month: "short",
+                                            day: "numeric",
+                                            year: "numeric",
+                                          })}
+                                        </div>
+                                        <div className="absolute right-[15px] align-bottom flex items-end z-10">
+                                          {new Date(
+                                            intervalShown.max,
+                                          ).toLocaleDateString("en-GB", {
+                                            timeZone: "UTC",
+                                            month: "short",
+                                            day: "numeric",
+                                            year: "numeric",
+                                          })}
+                                        </div>
                                       </div>
-                                    </div>
-                                  )}
+                                    )}
                               </div>
                             ) : (
                               <div className="absolute left-[15px] top-[15px] flex items-center justify-between w-full">
@@ -1892,10 +1908,10 @@ export default function ChainChart({
                                   ...options.chart,
                                   animation: isAnimate
                                     ? {
-                                      duration: 500,
-                                      delay: 0,
-                                      easing: "easeOutQuint",
-                                    }
+                                        duration: 500,
+                                        delay: 0,
+                                        easing: "easeOutQuint",
+                                      }
                                     : false,
                                   index: enabledFundamentalsKeys.indexOf(key),
                                   margin: zoomed ? zoomedMargin : defaultMargin,
@@ -1953,7 +1969,7 @@ export default function ChainChart({
                                       if (chart.series.length > 0) {
                                         const lastPoint =
                                           chart.series[0].points[
-                                          chart.series[0].points.length - 1
+                                            chart.series[0].points.length - 1
                                           ];
                                         if (lastPoint && lastPoint.plotY) {
                                           primaryLineEndPos =
@@ -1963,7 +1979,7 @@ export default function ChainChart({
                                         if (chart.series.length > 1) {
                                           const lastPoint =
                                             chart.series[1].points[
-                                            chart.series[1].points.length - 1
+                                              chart.series[1].points.length - 1
                                             ];
                                           if (
                                             lastPoint &&
@@ -1985,7 +2001,7 @@ export default function ChainChart({
                                         (series, seriesIndex) => {
                                           const lastPoint =
                                             series.points[
-                                            series.points.length - 1
+                                              series.points.length - 1
                                             ];
 
                                           if (!lastPoint || !lastPoint.plotY)
@@ -2120,7 +2136,7 @@ export default function ChainChart({
                                                   stroke:
                                                     AllChainsByKeys[series.name]
                                                       .colors[
-                                                    theme ?? "dark"
+                                                      theme ?? "dark"
                                                     ][0],
                                                   "stroke-width": 1,
                                                   "stroke-dasharray": 2,
@@ -2188,7 +2204,7 @@ export default function ChainChart({
                                             .circle(
                                               linesXPos,
                                               chart.plotTop -
-                                              (seriesIndex === 0 ? 24 : 0),
+                                                (seriesIndex === 0 ? 24 : 0),
                                               3,
                                             )
                                             .attr({
diff --git a/components/layout/ChainSectionHead.tsx b/components/layout/SingleChains/ChainSectionHead.tsx
similarity index 100%
rename from components/layout/ChainSectionHead.tsx
rename to components/layout/SingleChains/ChainSectionHead.tsx

From af166cca8f98fcf488289b9ea0714f3e93a21ed3 Mon Sep 17 00:00:00 2001
From: mokelgit <maym2018@gmail.com>
Date: Thu, 30 May 2024 15:23:49 -0400
Subject: [PATCH 2/6] improved shadow behavior

---
 app/(layout)/chains/[chain]/page.tsx                | 4 ++--
 components/layout/SingleChains/ChainSectionHead.tsx | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/(layout)/chains/[chain]/page.tsx b/app/(layout)/chains/[chain]/page.tsx
index 0d661686..c110da1f 100644
--- a/app/(layout)/chains/[chain]/page.tsx
+++ b/app/(layout)/chains/[chain]/page.tsx
@@ -753,8 +753,8 @@ const Chain = ({ params }: { params: any }) => {
                       isMobile
                         ? "opacity-0"
                         : isSidebarOpen
-                        ? "xl:opacity-0 md:opacity-100 "
-                        : "lg:opacity-0 md:opacity-100"
+                        ? "2xl:opacity-0 md:opacity-100 "
+                        : "xl:opacity-0 md:opacity-100"
                     }`}
                     style={{
                       background:
diff --git a/components/layout/SingleChains/ChainSectionHead.tsx b/components/layout/SingleChains/ChainSectionHead.tsx
index 7f6c4334..1b841620 100644
--- a/components/layout/SingleChains/ChainSectionHead.tsx
+++ b/components/layout/SingleChains/ChainSectionHead.tsx
@@ -89,8 +89,8 @@ const ChainSectionHead = ({
                 : "xl:opacity-0 md:opacity-100"
               : title === "Technology"
               ? isSidebarOpen
-                ? "xl:opacity-0 md:opacity-100 "
-                : "lg:opacity-0 md:opacity-100"
+                ? "2xl:opacity-0 md:opacity-100 "
+                : "xl:opacity-0 md:opacity-100"
               : ""
           }`}
           style={{

From dd53d3cda57107ece352b73aa0f340860e482897 Mon Sep 17 00:00:00 2001
From: mokelgit <maym2018@gmail.com>
Date: Thu, 30 May 2024 16:28:53 -0400
Subject: [PATCH 3/6] further progress on category metrics bar rework

---
 components/layout/CategoryBar.tsx     | 180 ++++++++++++++++++++++++++
 components/layout/CategoryMetrics.tsx |  83 ++----------
 2 files changed, 193 insertions(+), 70 deletions(-)
 create mode 100644 components/layout/CategoryBar.tsx

diff --git a/components/layout/CategoryBar.tsx b/components/layout/CategoryBar.tsx
new file mode 100644
index 00000000..a2143b73
--- /dev/null
+++ b/components/layout/CategoryBar.tsx
@@ -0,0 +1,180 @@
+import Container from "./Container";
+import {
+  useMemo,
+  useState,
+  useEffect,
+  useRef,
+  ReactNode,
+  useCallback,
+} from "react";
+import { Icon } from "@iconify/react";
+import { CategoryComparisonResponseData } from "@/types/api/CategoryComparisonResponse";
+
+const CategoryBar = ({
+  data,
+  categories,
+  querySubcategories,
+  selectedCategory,
+  setSelectedCategory,
+  checkSubcategory,
+  formatSubcategories,
+  checkAllSelected,
+  handleSelectAllSubcategories,
+  handleToggleSubcategory,
+}: {
+  data: CategoryComparisonResponseData;
+  categories: any;
+  querySubcategories: Object | undefined;
+  selectedCategory: string;
+  setSelectedCategory: React.Dispatch<React.SetStateAction<string>>;
+  checkSubcategory: (category: string, subcategory: string) => boolean;
+  formatSubcategories: (str: string) => string;
+  checkAllSelected: (category: string) => boolean;
+  handleSelectAllSubcategories: (category: string) => void;
+  handleToggleSubcategory: (category: string, subcategory: string) => void;
+}) => {
+  const [openSub, setOpenSub] = useState(querySubcategories ? true : false);
+
+  return (
+    <Container>
+      <div
+        className={`border-forest-400 dark:border-forest-800 flex border-[0.5px] mx-[2px] mt-[30px] rounded-2xl transition-all duration-500 ease-in-out overflow-hidden bg-forest-1000 ${
+          openSub ? "h-[160px]" : "h-[65px]"
+        }`}
+      >
+        {Object.keys(categories).map((category, i) =>
+          categories[category] !== "Categories" ? (
+            <div
+              key={category}
+              className={`w-full relative hover:cursor-pointer overflow-hidden items-center transition-transform  duration-1000 justify-between flex flex-col border-forest-50 border-dotted border-l-[1px] pt-2 pb-0.5 text-[12px] font-semibold ${
+                selectedCategory === category
+                  ? "bg-[#5A6462]"
+                  : "hover:bg-forest-500 dark:hover:bg-white/5"
+              } `}
+              onClick={() => {
+                if (selectedCategory === category) {
+                  setOpenSub(!openSub);
+                }
+
+                setSelectedCategory(category);
+              }}
+              style={{
+                transition: "min-width 0.5s",
+                minWidth:
+                  selectedCategory === category && openSub ? "500px" : "10px",
+              }}
+            >
+              <div
+                className={`flex items-center h-[25px] overflow-hidden min-w-[120px] justify-center  ${
+                  selectedCategory === category
+                    ? "text-base font-bold"
+                    : openSub
+                    ? "text-sm font-semibold "
+                    : "text-xs font-medium"
+                }`}
+              >
+                <h1>{categories[category]}</h1>
+              </div>
+              <div
+                className={`z-10 min-w-[480px] min-h-[80px] ${
+                  selectedCategory === category && openSub
+                    ? "flex flex-wrap items-center justify-center gap-y-[5px] gap-x-[5px]"
+                    : "hidden"
+                }`}
+              >
+                {category !== "unlabeled" && category !== "native_transfers" ? (
+                  <div
+                    key={categories[category]}
+                    className={`flex border-forest-500 rounded-[15px] border-[1.5px] p-[5px] justify-between items-center max-h-[35px] min-w-[90px] hover:bg-white/5 z-10    ${
+                      checkAllSelected(category) ? "opacity-100" : "opacity-30"
+                    }`}
+                    onClick={(e) => {
+                      handleSelectAllSubcategories(category);
+                      e.stopPropagation();
+                    }}
+                  >
+                    <div className="mr-2">Select All Subcategories</div>
+                    <div className="rounded-full bg-forest-900 mr-[1px]">
+                      <Icon
+                        icon="feather:check-circle"
+                        className={`w-[14px] h-[14px] ${
+                          checkAllSelected(category)
+                            ? "opacity-100"
+                            : "opacity-0"
+                        }`}
+                      />
+                    </div>
+                  </div>
+                ) : null}
+                {category !== "unlabeled" && category !== "native_transfers" ? (
+                  data[category].subcategories.list.map((subcategory) => (
+                    <button
+                      key={subcategory}
+                      className={`flex border-forest-500 rounded-[15px] border-[1.5px] p-[5px] justify-between items-center max-h-[35px] min-w-[90px] hover:bg-white/5 z-10 ${
+                        checkSubcategory(category, subcategory)
+                          ? "opacity-100"
+                          : "opacity-30"
+                      }`}
+                      onClick={(e) => {
+                        handleToggleSubcategory(category, subcategory);
+                        e.stopPropagation();
+                      }}
+                    >
+                      <div className="mr-2">
+                        {formatSubcategories(subcategory)}
+                      </div>
+                      <div className="rounded-full bg-forest-900">
+                        <Icon
+                          icon="feather:check-circle"
+                          className={`w-[14px] h-[14px]  ${
+                            checkSubcategory(category, subcategory)
+                              ? "opacity-100"
+                              : "opacity-0"
+                          }  `}
+                        />
+                      </div>
+                    </button>
+                  ))
+                ) : (
+                  <div className="flex items-center gap-x-1 ">
+                    <Icon icon="feather:info" className="w-6 h-6" />
+                    <h1>
+                      {" "}
+                      There are currently no subcategories for the given
+                      category.{" "}
+                    </h1>
+                  </div>
+                )}
+              </div>
+              <div
+                key={i}
+                className={`relative transition-transform duration-100 flex min-w-[24px] min-h-[24px] items-center mb-2.5 top-[8px] h-[24px] w-full ${
+                  openSub ? "rotate-180 " : "rotate-0"
+                }`}
+                onClick={() => {
+                  setOpenSub(!openSub);
+                }}
+              >
+                <Icon icon="icon-park-outline:down" className="w-full h-full" />
+              </div>
+            </div>
+          ) : (
+            <div
+              key={category}
+              className={
+                "relative flex flex-col min-w-[140px] w-full h-full justify-start mt-2 ml-0.5 pl-[18px] dark:text-white bg-white dark:bg-inherit"
+              }
+            >
+              <div className="text-sm font-bold pb-[10px]">
+                {categories[category]}
+              </div>
+              <div className="text-xs font-medium">Subcategories</div>
+            </div>
+          ),
+        )}
+      </div>
+    </Container>
+  );
+};
+
+export default CategoryBar;
diff --git a/components/layout/CategoryMetrics.tsx b/components/layout/CategoryMetrics.tsx
index b44956ab..9745f96a 100644
--- a/components/layout/CategoryMetrics.tsx
+++ b/components/layout/CategoryMetrics.tsx
@@ -27,6 +27,7 @@ import { MasterResponse } from "@/types/api/MasterResponse";
 import ChainAnimations from "./ChainAnimations";
 import { useUIContext } from "@/contexts/UIContext";
 import ContractLabelModal from "./ContractLabelModal";
+import CategoryBar from "@/components/layout/CategoryBar";
 
 import {
   TopRowContainer,
@@ -1141,76 +1142,18 @@ export default function CategoryMetrics({
       </Container> */}
           <div id="content-container">
             {IS_PREVIEW || IS_DEVELOPMENT ? (
-              <Container>
-                <div
-                  className={`border-forest-400 dark:border-forest-800 flex border-[0.5px] mx-[2px] mt-[30px] rounded-2xl transition-all duration-300 ease-in-out overflow-hidden bg-forest-1000 ${
-                    openSub ? "h-[130px]" : "h-[65px]"
-                  }`}
-                >
-                  {Object.keys(categories).map((category, i) =>
-                    categories[category] !== "Categories" ? (
-                      <div
-                        key={category}
-                        className={`w-full hover:cursor-pointer overflow-hidden items-center transition-transform  duration-1000 justify-between flex flex-col border-forest-50 border-dotted border-l-[1px] pt-2 pb-0.5 text-[12px] font-semibold ${
-                          selectedCategory === category
-                            ? "bg-forest-600"
-                            : "hover:bg-forest-500 dark:hover:bg-white/5"
-                        } `}
-                        onClick={() => {
-                          if (selectedCategory === category) {
-                            setOpenSub(!openSub);
-                          }
-
-                          setSelectedCategory(category);
-                        }}
-                        style={{
-                          transition: "min-width 0.5s",
-                          minWidth:
-                            selectedCategory === category && openSub
-                              ? "500px"
-                              : "10px",
-                        }}
-                      >
-                        <div
-                          className={`flex items-center h-[25px] min-w-[100px] justify-center  ${
-                            selectedCategory === category
-                              ? "text-sm font-bold"
-                              : "text-xs font-medium"
-                          }`}
-                        >
-                          <h1>{categories[category]}</h1>
-                        </div>
-                        <div
-                          key={i}
-                          className={`relative transition-transform duration-100 flex min-w-[24px] min-h-[24px] items-center mb-2.5 top-[8px] h-[24px] w-full ${
-                            openSub ? "rotate-180 " : "rotate-0"
-                          }`}
-                          onClick={() => {
-                            setOpenSub(!openSub);
-                          }}
-                        >
-                          <Icon
-                            icon="icon-park-outline:down"
-                            className="w-full h-full"
-                          />
-                        </div>
-                      </div>
-                    ) : (
-                      <div
-                        key={category}
-                        className={
-                          "relative flex flex-col min-w-[140px] w-full h-full justify-start mt-2 ml-0.5 pl-[18px] dark:text-white bg-white dark:bg-inherit"
-                        }
-                      >
-                        <div className="text-sm font-bold pb-[10px]">
-                          {categories[category]}
-                        </div>
-                        <div className="text-xs font-medium">Subcategories</div>
-                      </div>
-                    ),
-                  )}
-                </div>
-              </Container>
+              <CategoryBar
+                data={data}
+                categories={categories}
+                querySubcategories={querySubcategories}
+                selectedCategory={selectedCategory}
+                setSelectedCategory={setSelectedCategory}
+                checkSubcategory={checkSubcategory}
+                formatSubcategories={formatSubcategories}
+                checkAllSelected={checkAllSelected}
+                handleSelectAllSubcategories={handleSelectAllSubcategories}
+                handleToggleSubcategory={handleToggleSubcategory}
+              />
             ) : (
               <Container className="block w-full !pr-0 lg:!px-[40px] px-[100px] lg:mt-0 mt-6 lg:w-[100%] lg:mx-auto ">
                 <div

From 5fa6f7d00a315c423b4a690d18fc1d712f973766 Mon Sep 17 00:00:00 2001
From: mokelgit <maym2018@gmail.com>
Date: Fri, 31 May 2024 11:06:38 -0400
Subject: [PATCH 4/6] updated handling for hottest contract on single chains
 page

---
 app/(layout)/chains/[chain]/page.tsx | 86 +++++++++++++++++++++++-----
 types/api/ChainResponse.ts           |  2 +-
 2 files changed, 73 insertions(+), 15 deletions(-)

diff --git a/app/(layout)/chains/[chain]/page.tsx b/app/(layout)/chains/[chain]/page.tsx
index c110da1f..ef5e976c 100644
--- a/app/(layout)/chains/[chain]/page.tsx
+++ b/app/(layout)/chains/[chain]/page.tsx
@@ -720,20 +720,78 @@ const Chain = ({ params }: { params: any }) => {
                       <div className="text-[10px] text-[#5A6462] font-bold min-w-[150px] ">
                         Hottest Contract
                       </div>
-                      <div className="text-[10px] font-bold min-w-[160px] whitespace-nowrap">
-                        {chainData
-                          ? `${
-                              chainData.hottest_contract
-                                ? `${
-                                    chainData.hottest_contract.data[0]
-                                      ? chainData.hottest_contract.data[0][1] +
-                                        " - " +
-                                        chainData.hottest_contract.data[0][2]
-                                      : "N/A"
-                                  }`
-                                : "N/A"
-                            }`
-                          : "N/A"}
+                      <div
+                        className="text-[10px] flex gap-x-1 font-bold min-w-[160px] whitespace-nowrap"
+                        onClick={() => {
+                          if (
+                            !chainData.hottest_contract.data[0][
+                              chainData.hottest_contract.types.indexOf("name")
+                            ]
+                          ) {
+                            navigator.clipboard.writeText(
+                              chainData.hottest_contract.data[0][
+                                chainData.hottest_contract.types.indexOf(
+                                  "address",
+                                )
+                              ],
+                            );
+                          }
+                        }}
+                      >
+                        {chainData ? (
+                          chainData.hottest_contract ? (
+                            chainData.hottest_contract.data[0] ? (
+                              <>
+                                <span
+                                  className={` truncate ${
+                                    chainData.hottest_contract.data[0][
+                                      chainData.hottest_contract.types.indexOf(
+                                        "project_name",
+                                      )
+                                    ]
+                                      ? "max-w-[80px]"
+                                      : "max-w-[140px]"
+                                  }`}
+                                >
+                                  {chainData.hottest_contract.data[0][
+                                    chainData.hottest_contract.types.indexOf(
+                                      "name",
+                                    )
+                                  ] ||
+                                    chainData.hottest_contract.data[0][
+                                      chainData.hottest_contract.types.indexOf(
+                                        "address",
+                                      )
+                                    ]}
+                                </span>
+                                <span>
+                                  {chainData.hottest_contract.data[0][
+                                    chainData.hottest_contract.types.indexOf(
+                                      "project_name",
+                                    )
+                                  ]
+                                    ? "-"
+                                    : ""}{" "}
+                                </span>
+                                <span>
+                                  {
+                                    chainData.hottest_contract.data[0][
+                                      chainData.hottest_contract.types.indexOf(
+                                        "project_name",
+                                      )
+                                    ]
+                                  }
+                                </span>
+                              </>
+                            ) : (
+                              "N/A"
+                            )
+                          ) : (
+                            "N/A"
+                          )
+                        ) : (
+                          "N/A"
+                        )}
                       </div>
                     </div>
                     <div className="h-full flex items-start pr-[5px]"></div>
diff --git a/types/api/ChainResponse.ts b/types/api/ChainResponse.ts
index 5bf9f935..9f285df7 100644
--- a/types/api/ChainResponse.ts
+++ b/types/api/ChainResponse.ts
@@ -14,7 +14,7 @@ export interface ChainsData {
   };
   hottest_contract: {
     data: any[][];
-    types: any[][];
+    types: any[];
   };
 }
 export interface Metrics {

From a409d892d66790ddc548a93f0796d9ba32ceed92 Mon Sep 17 00:00:00 2001
From: mokelgit <maym2018@gmail.com>
Date: Fri, 31 May 2024 11:51:57 -0400
Subject: [PATCH 5/6] further progress on category bar

---
 components/layout/CategoryBar.tsx | 47 +++++++++++++++++++++++++++----
 1 file changed, 42 insertions(+), 5 deletions(-)

diff --git a/components/layout/CategoryBar.tsx b/components/layout/CategoryBar.tsx
index a2143b73..8d0b4a52 100644
--- a/components/layout/CategoryBar.tsx
+++ b/components/layout/CategoryBar.tsx
@@ -38,8 +38,8 @@ const CategoryBar = ({
   return (
     <Container>
       <div
-        className={`border-forest-400 dark:border-forest-800 flex border-[0.5px] mx-[2px] mt-[30px] rounded-2xl transition-all duration-500 ease-in-out overflow-hidden bg-forest-1000 ${
-          openSub ? "h-[160px]" : "h-[65px]"
+        className={`border-forest-400 dark:border-forest-800 flex border-[0.5px] mx-[2px] mt-[30px] rounded-2xl transition-all duration-[650] ease-in-out overflow-hidden bg-forest-1000 ${
+          openSub ? "h-[170px]" : "h-[65px]"
         }`}
       >
         {Object.keys(categories).map((category, i) =>
@@ -59,24 +59,61 @@ const CategoryBar = ({
                 setSelectedCategory(category);
               }}
               style={{
-                transition: "min-width 0.5s",
+                transition: "min-width 0.65s",
                 minWidth:
                   selectedCategory === category && openSub ? "500px" : "10px",
+
+                borderLeft: "0.5px dotted var(--dark-active-text, #CDD8D3)",
+                background:
+                  selectedCategory === category
+                    ? "#5A6462"
+                    : `linear-gradient(
+                    90deg,
+                    rgba(16, 20, 19, ${
+                      0.3 - (i / (Object.keys(categories).length - 1)) * 0.2
+                    }) 0%,
+                    #101413 15.10%,
+                    rgba(16, 20, 19, ${
+                      0.06 + (i / Object.keys(categories).length) * 0.94
+                    }) 48.96%,
+                    #101413 86.98%,
+                    rgba(16, 20, 19, ${
+                      0.3 - (i / (Object.keys(categories).length - 1)) * 0.2
+                    }) 100%
+                  )`,
               }}
             >
               <div
-                className={`flex items-center h-[25px] overflow-hidden min-w-[120px] justify-center  ${
+                className={`flex items-center p-[5px] h-[30px] overflow-hidden min-w-[120px] justify-center  ${
                   selectedCategory === category
                     ? "text-base font-bold"
                     : openSub
                     ? "text-sm font-semibold "
                     : "text-xs font-medium"
                 }`}
+                style={{
+                  background:
+                    selectedCategory === category ? "#5A6462" : "none",
+                  backgroundClip:
+                    selectedCategory === category ? "initial" : "text",
+                  WebkitBackgroundClip:
+                    selectedCategory === category ? "initial" : "text",
+                  WebkitTextFillColor:
+                    selectedCategory === category ? "inherit" : "transparent",
+                  backgroundImage:
+                    selectedCategory === category
+                      ? "none"
+                      : `radial-gradient(ellipse at center, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 1) 100%), linear-gradient(90deg, rgba(16, 20, 19, ${
+                          0.4 + (i / (Object.keys(categories).length - 1)) * 0.4
+                        }) 0%, #101413 15.10%, rgba(16, 20, 19, 0.00) 48.96%, #101413 86.98%, rgba(16, 20, 19, ${
+                          0.4 + (i / (Object.keys(categories).length - 1)) * 0.4
+                        }) 100%)`,
+                }}
               >
                 <h1>{categories[category]}</h1>
               </div>
               <div
-                className={`z-10 min-w-[480px] min-h-[80px] ${
+                className={`z-10 min-w-[490px] basis-0 absolute top-[40px] min-h-[90px] content-center leading-tight  ${
                   selectedCategory === category && openSub
                     ? "flex flex-wrap items-center justify-center gap-y-[5px] gap-x-[5px]"
                     : "hidden"

From 8d97f62e8acf5a0a8bc4770b1303d034ec4440a7 Mon Sep 17 00:00:00 2001
From: mokelgit <maym2018@gmail.com>
Date: Fri, 31 May 2024 12:25:41 -0400
Subject: [PATCH 6/6] fixed issue switching from single chains to blockspace
 overview with 1d timespan

---
 app/(layout)/blockspace/chain-overview/[category]/page.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/app/(layout)/blockspace/chain-overview/[category]/page.tsx b/app/(layout)/blockspace/chain-overview/[category]/page.tsx
index 6511ac33..441657e4 100644
--- a/app/(layout)/blockspace/chain-overview/[category]/page.tsx
+++ b/app/(layout)/blockspace/chain-overview/[category]/page.tsx
@@ -74,6 +74,12 @@ const ChainOverview = ({ params }: { params: any }) => {
     icon: "",
   };
 
+  useEffect(() => {
+    if (selectedTimespan === "1d") {
+      setSelectedTimespan("7d");
+    }
+  }, []);
+
   const chainFilter = useMemo(() => {
     const filteredChains: Chains = Object.keys(AllChainsByKeys)
       .filter((chain) => {