From f016ad68aea3183150ff34917a2eb96dec7a9a52 Mon Sep 17 00:00:00 2001
From: Manish Gupta <manishiwa@gmail.com>
Date: Fri, 3 May 2024 12:20:16 -0700
Subject: [PATCH 1/5] add id to chain page charts container

---
 components/layout/ChainChart.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/layout/ChainChart.tsx b/components/layout/ChainChart.tsx
index c163df4e..94d70c4a 100644
--- a/components/layout/ChainChart.tsx
+++ b/components/layout/ChainChart.tsx
@@ -1530,6 +1530,7 @@ export default function ChainChart({
 
       {data && (
         <div
+          id="chart-container"
           className={`grid grid-rows-8 lg:grid-rows-4 lg:grid-cols-2 lg:grid-flow-row gap-y-0 gap-x-[15px] `}
           // style={{
           //   gridRow: `span ${Math.ceil(enabledFundamentalsKeys.length / 2)}`,

From b38248e2406763ed632c3ec7252ca4300777826c Mon Sep 17 00:00:00 2001
From: Manish Gupta <manishiwa@gmail.com>
Date: Fri, 3 May 2024 13:08:31 -0700
Subject: [PATCH 2/5] added content-container ids to og pages

---
 components/layout/CategoryMetrics.tsx | 890 +++++++++++++-------------
 components/layout/ChainChart.tsx      |   2 +-
 components/layout/ComparisonChart.tsx |   1 +
 components/layout/Container.tsx       |   3 +
 components/layout/OverviewMetrics.tsx |   5 +-
 5 files changed, 459 insertions(+), 442 deletions(-)

diff --git a/components/layout/CategoryMetrics.tsx b/components/layout/CategoryMetrics.tsx
index 737704dc..74475c0d 100644
--- a/components/layout/CategoryMetrics.tsx
+++ b/components/layout/CategoryMetrics.tsx
@@ -1129,49 +1129,50 @@ export default function CategoryMetrics({
           </div>
         </div>
       </Container> */}
-          <Container className="block w-full !pr-0 lg:!px-[40px] px-[100px] lg:mt-0 mt-6 lg:w-[100%] lg:mx-auto ">
-            <div
-              className={`w-[100%] mx-auto  overflow-x-scroll scrollbar-thin scrollbar-thumb-forest-900 scrollbar-track-forest-500/5 scrollbar-thumb-rounded-full scrollbar-track-rounded-full scroller pb-2 ${
-                isSidebarOpen ? "exl:overflow-hidden" : "cxl:overflow-hidden"
-              }`}
-            >
-              <animated.div
-                className="relative min-w-[950px] md:min-w-[900px] w-[20%] md:w-[97.5%] h-[67px] m-auto border-x-[1px] border-y-[1px] rounded-[15px] dark:text-forest-50  text-forest-1000 border-forest-400 dark:border-forest-800  dark:bg-forest-1000 mt-8 overflow-hidden"
-                style={{ ...categoryAnimation }}
+          <div id="content-container">
+            <Container className="block w-full !pr-0 lg:!px-[40px] px-[100px] lg:mt-0 mt-6 lg:w-[100%] lg:mx-auto ">
+              <div
+                className={`w-[100%] mx-auto  overflow-x-scroll scrollbar-thin scrollbar-thumb-forest-900 scrollbar-track-forest-500/5 scrollbar-thumb-rounded-full scrollbar-track-rounded-full scroller pb-2 ${
+                  isSidebarOpen ? "exl:overflow-hidden" : "cxl:overflow-hidden"
+                }`}
               >
-                {!openSub ? (
-                  <div className="flex w-full h-full text-[12px]">
-                    {Object.keys(categories).map((category, i) =>
-                      categories[category] !== "Categories" ? (
-                        <div
-                          key={category}
-                          className={`relative flex w-full h-full justify-between items-center ${
-                            selectedCategory === category
-                              ? "borden-hidden rounded-[0px] text-white"
-                              : "h-full"
-                          }
-                    ${isCategoryHovered[category] ? "" : ""}`}
-                          onMouseEnter={() => {
-                            setIsCategoryHovered((prev) => ({
-                              ...prev,
-                              [category]: true,
-                            }));
-                          }}
-                          onMouseLeave={() => {
-                            setIsCategoryHovered((prev) => ({
-                              ...prev,
-                              [category]: false,
-                            }));
-                          }}
-                          style={{
-                            borderLeft:
-                              "0.5px dotted var(--dark-active-text, #CDD8D3)",
-                            background:
+                <animated.div
+                  className="relative min-w-[950px] md:min-w-[900px] w-[20%] md:w-[97.5%] h-[67px] m-auto border-x-[1px] border-y-[1px] rounded-[15px] dark:text-forest-50  text-forest-1000 border-forest-400 dark:border-forest-800  dark:bg-forest-1000 mt-8 overflow-hidden"
+                  style={{ ...categoryAnimation }}
+                >
+                  {!openSub ? (
+                    <div className="flex w-full h-full text-[12px]">
+                      {Object.keys(categories).map((category, i) =>
+                        categories[category] !== "Categories" ? (
+                          <div
+                            key={category}
+                            className={`relative flex w-full h-full justify-between items-center ${
                               selectedCategory === category
-                                ? "#5A6462"
-                                : theme === "light"
-                                ? "#FFFFFF"
-                                : `linear-gradient(
+                                ? "borden-hidden rounded-[0px] text-white"
+                                : "h-full"
+                            }
+                    ${isCategoryHovered[category] ? "" : ""}`}
+                            onMouseEnter={() => {
+                              setIsCategoryHovered((prev) => ({
+                                ...prev,
+                                [category]: true,
+                              }));
+                            }}
+                            onMouseLeave={() => {
+                              setIsCategoryHovered((prev) => ({
+                                ...prev,
+                                [category]: false,
+                              }));
+                            }}
+                            style={{
+                              borderLeft:
+                                "0.5px dotted var(--dark-active-text, #CDD8D3)",
+                              background:
+                                selectedCategory === category
+                                  ? "#5A6462"
+                                  : theme === "light"
+                                  ? "#FFFFFF"
+                                  : `linear-gradient(
                                 90deg,
                                 rgba(16, 20, 19, ${
                                   0.3 -
@@ -1190,111 +1191,112 @@ export default function CategoryMetrics({
                                     0.2
                                 }) 100%
                               )`,
-                          }}
-                        >
-                          <div
-                            key={category}
-                            className={`w-full h-full flex flex-col text-center items-center first-letter justify-between hover:cursor-pointer  ${
-                              selectedCategory === category
-                                ? ""
-                                : "hover:bg-forest-500 dark:hover:bg-white/5"
-                            }`}
-                            onClick={() => {
-                              if (selectedCategory === category) {
-                                handleOpen(category);
-                              }
-
-                              setSelectedCategory(category);
                             }}
                           >
                             <div
-                              className={`flex items-center h-[25px]  mt-1 ${
+                              key={category}
+                              className={`w-full h-full flex flex-col text-center items-center first-letter justify-between hover:cursor-pointer  ${
                                 selectedCategory === category
-                                  ? "text-sm font-bold"
-                                  : "text-xs font-medium"
+                                  ? ""
+                                  : "hover:bg-forest-500 dark:hover:bg-white/5"
                               }`}
-                            >
-                              <h1>{categories[category]}</h1>
-                            </div>
-
-                            <div
-                              key={i}
-                              className="relative flex items-center mb-2.5 top-[8px] h-[24px] w-full"
                               onClick={() => {
-                                handleOpen(category);
+                                if (selectedCategory === category) {
+                                  handleOpen(category);
+                                }
+
+                                setSelectedCategory(category);
                               }}
                             >
-                              <Icon
-                                icon="icon-park-outline:down"
-                                className="w-full h-full"
-                              />
+                              <div
+                                className={`flex items-center h-[25px]  mt-1 ${
+                                  selectedCategory === category
+                                    ? "text-sm font-bold"
+                                    : "text-xs font-medium"
+                                }`}
+                              >
+                                <h1>{categories[category]}</h1>
+                              </div>
+
+                              <div
+                                key={i}
+                                className="relative flex items-center mb-2.5 top-[8px] h-[24px] w-full"
+                                onClick={() => {
+                                  handleOpen(category);
+                                }}
+                              >
+                                <Icon
+                                  icon="icon-park-outline:down"
+                                  className="w-full h-full"
+                                />
+                              </div>
                             </div>
                           </div>
-                        </div>
-                      ) : (
-                        // Different response for "Chains" category
-                        <div
-                          key={category}
-                          className={
-                            "relative flex flex-col min-w-[140px] w-full h-full justify-start mt-2 ml-0.5 pl-[14px] 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
+                        ) : (
+                          // Different response for "Chains" category
+                          <div
+                            key={category}
+                            className={
+                              "relative flex flex-col min-w-[140px] w-full h-full justify-start mt-2 ml-0.5 pl-[14px] 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>
-                      ),
-                    )}
-                  </div>
-                ) : (
-                  <div className="flex w-full h-full text-[12px]">
-                    {categoryTransitions((style, item) =>
-                      categories[item.category] !== "Categories" ? (
-                        <animated.div
-                          key={item.category}
-                          className={`relative flex w-full h-full ${
-                            selectedCategory === item.category
-                              ? `border-hidden rounded-[0px] dark:text-inherit text-white ${
-                                  Object.keys(data[item.category].subcategories)
-                                    .length > 8
-                                    ? "w-[650px]"
-                                    : Object.keys(
-                                        data[item.category].subcategories,
-                                      ).length > 5
-                                    ? "w-[500px]"
-                                    : "w-[400px]"
-                                }`
-                              : "h-full w-full min-w-[40px] hover:max-w-[180px]"
-                          }
+                        ),
+                      )}
+                    </div>
+                  ) : (
+                    <div className="flex w-full h-full text-[12px]">
+                      {categoryTransitions((style, item) =>
+                        categories[item.category] !== "Categories" ? (
+                          <animated.div
+                            key={item.category}
+                            className={`relative flex w-full h-full ${
+                              selectedCategory === item.category
+                                ? `border-hidden rounded-[0px] dark:text-inherit text-white ${
+                                    Object.keys(
+                                      data[item.category].subcategories,
+                                    ).length > 8
+                                      ? "w-[650px]"
+                                      : Object.keys(
+                                          data[item.category].subcategories,
+                                        ).length > 5
+                                      ? "w-[500px]"
+                                      : "w-[400px]"
+                                  }`
+                                : "h-full w-full min-w-[40px] hover:max-w-[180px]"
+                            }
 
 
 
                       ${isCategoryHovered[item.category] ? "bg-white/5" : ""}
                       `}
-                          onMouseEnter={() => {
-                            setIsCategoryHovered((prev) => ({
-                              ...prev,
-                              [item.category]: true,
-                            }));
-                          }}
-                          onMouseLeave={() => {
-                            setIsCategoryHovered((prev) => ({
-                              ...prev,
-                              [item.category]: false,
-                            }));
-                          }}
-                          style={{
-                            borderLeft:
-                              "0.5px dotted var(--dark-active-text, #CDD8D3)",
-                            background:
-                              selectedCategory === item.category
-                                ? "#5A6462"
-                                : theme === "light"
-                                ? "#FFFFFF"
-                                : `linear-gradient(
+                            onMouseEnter={() => {
+                              setIsCategoryHovered((prev) => ({
+                                ...prev,
+                                [item.category]: true,
+                              }));
+                            }}
+                            onMouseLeave={() => {
+                              setIsCategoryHovered((prev) => ({
+                                ...prev,
+                                [item.category]: false,
+                              }));
+                            }}
+                            style={{
+                              borderLeft:
+                                "0.5px dotted var(--dark-active-text, #CDD8D3)",
+                              background:
+                                selectedCategory === item.category
+                                  ? "#5A6462"
+                                  : theme === "light"
+                                  ? "#FFFFFF"
+                                  : `linear-gradient(
                                 90deg,
                                 rgba(16, 20, 19, ${
                                   0.3 -
@@ -1316,345 +1318,353 @@ export default function CategoryMetrics({
                                     0.2
                                 }) 100%
                               )`,
-                            ...style,
-                          }}
-                        >
-                          <div
-                            key={item.category}
-                            className={`h-full flex flex-col first-letter justify-between  hover:cursor-pointer overflow-hidden ${
-                              selectedCategory === item.category
-                                ? `border-hidden rounded-[0px] ${
-                                    Object.keys(
-                                      data[item.category].subcategories,
-                                    ).length > 8
-                                      ? "w-[650px]"
-                                      : Object.keys(
-                                          data[item.category].subcategories,
-                                        ).length > 4
-                                      ? "w-[500px]"
-                                      : "w-[400px]"
-                                  }`
-                                : "hover:bg-white/5 w-full min-w-[40px] hover:max-w-[180px] "
-                            }`}
-                            onClick={() => {
-                              if (selectedCategory === item.category) {
-                                handleOpen(item.category);
-                                return;
-                              }
-
-                              setSelectedCategory(item.category);
+                              ...style,
                             }}
                           >
                             <div
-                              key={"label" + item.category}
-                              className={`flex self-center justify-center mx-auto pb-8 pt-2 h-[30px]  ${
+                              key={item.category}
+                              className={`h-full flex flex-col first-letter justify-between  hover:cursor-pointer overflow-hidden ${
                                 selectedCategory === item.category
-                                  ? "text-base font-bold "
-                                  : `text-base font-medium truncate hover:text-ellipsis ${
-                                      isCategoryHovered[item.category]
-                                        ? item.category ===
-                                            "native_transfers" ||
-                                          item.category === "token_transfers"
-                                          ? "pl-[0px] w-full"
-                                          : "w-full pl-0"
-                                        : item.category ===
-                                            "native_transfers" ||
-                                          item.category === "token_transfers"
-                                        ? "w-full "
-                                        : "w-full pl-0"
+                                  ? `border-hidden rounded-[0px] ${
+                                      Object.keys(
+                                        data[item.category].subcategories,
+                                      ).length > 8
+                                        ? "w-[650px]"
+                                        : Object.keys(
+                                            data[item.category].subcategories,
+                                          ).length > 4
+                                        ? "w-[500px]"
+                                        : "w-[400px]"
                                     }`
+                                  : "hover:bg-white/5 w-full min-w-[40px] hover:max-w-[180px] "
                               }`}
-                              style={{
-                                background:
-                                  selectedCategory === item.category
-                                    ? "#5A6462"
-                                    : "none",
-                                backgroundClip:
-                                  selectedCategory === item.category
-                                    ? "initial"
-                                    : "text",
-                                WebkitBackgroundClip:
-                                  selectedCategory === item.category
-                                    ? "initial"
-                                    : "text",
-                                WebkitTextFillColor:
-                                  selectedCategory === item.category
-                                    ? "inherit"
-                                    : theme === "light"
-                                    ? "initial"
-                                    : "transparent",
-                                backgroundImage:
-                                  selectedCategory === item.category
-                                    ? "none"
-                                    : theme === "light"
-                                    ? "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 +
-                                        (item.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 +
-                                        (item.i /
-                                          (Object.keys(categories).length -
-                                            1)) *
-                                          0.4
-                                      }) 100%)`,
+                              onClick={() => {
+                                if (selectedCategory === item.category) {
+                                  handleOpen(item.category);
+                                  return;
+                                }
+
+                                setSelectedCategory(item.category);
                               }}
                             >
-                              {categories[item.category]}
-                            </div>
+                              <div
+                                key={"label" + item.category}
+                                className={`flex self-center justify-center mx-auto pb-8 pt-2 h-[30px]  ${
+                                  selectedCategory === item.category
+                                    ? "text-base font-bold "
+                                    : `text-base font-medium truncate hover:text-ellipsis ${
+                                        isCategoryHovered[item.category]
+                                          ? item.category ===
+                                              "native_transfers" ||
+                                            item.category === "token_transfers"
+                                            ? "pl-[0px] w-full"
+                                            : "w-full pl-0"
+                                          : item.category ===
+                                              "native_transfers" ||
+                                            item.category === "token_transfers"
+                                          ? "w-full "
+                                          : "w-full pl-0"
+                                      }`
+                                }`}
+                                style={{
+                                  background:
+                                    selectedCategory === item.category
+                                      ? "#5A6462"
+                                      : "none",
+                                  backgroundClip:
+                                    selectedCategory === item.category
+                                      ? "initial"
+                                      : "text",
+                                  WebkitBackgroundClip:
+                                    selectedCategory === item.category
+                                      ? "initial"
+                                      : "text",
+                                  WebkitTextFillColor:
+                                    selectedCategory === item.category
+                                      ? "inherit"
+                                      : theme === "light"
+                                      ? "initial"
+                                      : "transparent",
+                                  backgroundImage:
+                                    selectedCategory === item.category
+                                      ? "none"
+                                      : theme === "light"
+                                      ? "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 +
+                                          (item.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 +
+                                          (item.i /
+                                            (Object.keys(categories).length -
+                                              1)) *
+                                            0.4
+                                        }) 100%)`,
+                                }}
+                              >
+                                {categories[item.category]}
+                              </div>
 
-                            <div
-                              className="flex flex-col gap-x-1 overflow-hidden h-full 
+                              <div
+                                className="flex flex-col gap-x-1 overflow-hidden h-full 
                                     mx-4 items-center"
-                            >
-                              {selectedCategory === item.category ? (
-                                <div
-                                  className={`flex h-full ${
-                                    Object.keys(
-                                      data[item.category].subcategories,
-                                    ).length > 8
-                                      ? "w-[600px]"
-                                      : Object.keys(
-                                          data[item.category].subcategories,
-                                        ).length > 4
-                                      ? "w-[450px]"
-                                      : "w-[350px]"
-                                  }`}
-                                >
+                              >
+                                {selectedCategory === item.category ? (
                                   <div
-                                    key={data[item.category].subcategories}
-                                    className="flex flex-wrap w-full gap-x-2 gap-y-2 justify-center self-center items-center  "
+                                    className={`flex h-full ${
+                                      Object.keys(
+                                        data[item.category].subcategories,
+                                      ).length > 8
+                                        ? "w-[600px]"
+                                        : Object.keys(
+                                            data[item.category].subcategories,
+                                          ).length > 4
+                                        ? "w-[450px]"
+                                        : "w-[350px]"
+                                    }`}
                                   >
-                                    {item.category !== "unlabeled" &&
-                                    item.category !== "native_transfers" ? (
-                                      <div
-                                        key={categories[item.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(item.category)
-                                            ? "opacity-100"
-                                            : "opacity-30"
-                                        }`}
-                                        onClick={(e) => {
-                                          handleSelectAllSubcategories(
-                                            item.category,
-                                          );
-                                          e.stopPropagation();
-                                        }}
-                                      >
-                                        <div className="mr-2">
-                                          Select All Subcategories
+                                    <div
+                                      key={data[item.category].subcategories}
+                                      className="flex flex-wrap w-full gap-x-2 gap-y-2 justify-center self-center items-center  "
+                                    >
+                                      {item.category !== "unlabeled" &&
+                                      item.category !== "native_transfers" ? (
+                                        <div
+                                          key={categories[item.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(item.category)
+                                              ? "opacity-100"
+                                              : "opacity-30"
+                                          }`}
+                                          onClick={(e) => {
+                                            handleSelectAllSubcategories(
+                                              item.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(item.category)
+                                                  ? "opacity-100"
+                                                  : "opacity-0"
+                                              }`}
+                                            />
+                                          </div>
                                         </div>
-                                        <div className="rounded-full bg-forest-900 mr-[1px]">
+                                      ) : null}
+                                      {item.category !== "unlabeled" &&
+                                      item.category !== "native_transfers" ? (
+                                        data[
+                                          item.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(
+                                                  item.category,
+                                                  subcategory,
+                                                )
+                                                  ? "opacity-100"
+                                                  : "opacity-30"
+                                              }`}
+                                              onClick={(e) => {
+                                                handleToggleSubcategory(
+                                                  item.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(
+                                                      item.category,
+                                                      subcategory,
+                                                    )
+                                                      ? "opacity-100"
+                                                      : "opacity-0"
+                                                  }  `}
+                                                />
+                                              </div>
+                                            </button>
+                                          ),
+                                        )
+                                      ) : (
+                                        <div className="flex items-center gap-x-1 ">
                                           <Icon
-                                            icon="feather:check-circle"
-                                            className={`w-[14px] h-[14px] ${
-                                              checkAllSelected(item.category)
-                                                ? "opacity-100"
-                                                : "opacity-0"
-                                            }`}
+                                            icon="feather:info"
+                                            className="w-6 h-6"
                                           />
+                                          <h1>
+                                            {" "}
+                                            There are currently no subcategories
+                                            for the given category.{" "}
+                                          </h1>
                                         </div>
-                                      </div>
-                                    ) : null}
-                                    {item.category !== "unlabeled" &&
-                                    item.category !== "native_transfers" ? (
-                                      data[
-                                        item.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(
-                                                item.category,
-                                                subcategory,
-                                              )
-                                                ? "opacity-100"
-                                                : "opacity-30"
-                                            }`}
-                                            onClick={(e) => {
-                                              handleToggleSubcategory(
-                                                item.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(
-                                                    item.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>
-                                </div>
-                              ) : null}
-                            </div>
+                                ) : null}
+                              </div>
 
-                            <button
-                              className="relative bottom-[4px] h-[24px] w-full"
-                              onClick={() => {
-                                if (selectedCategory === item.category) {
-                                  handleOpen(item.category);
-                                }
-                              }}
-                            >
-                              <Icon
-                                icon="icon-park-outline:up"
-                                className="w-full h-full"
-                              />
-                            </button>
+                              <button
+                                className="relative bottom-[4px] h-[24px] w-full"
+                                onClick={() => {
+                                  if (selectedCategory === item.category) {
+                                    handleOpen(item.category);
+                                  }
+                                }}
+                              >
+                                <Icon
+                                  icon="icon-park-outline:up"
+                                  className="w-full h-full"
+                                />
+                              </button>
+                            </div>
+                          </animated.div>
+                        ) : (
+                          // Different response for "Chains" category
+                          <div
+                            key={item.category}
+                            className={
+                              "relative flex flex-col min-w-[140px] max-w-[140px] w-full h-full justify-start pl-[16px] pt-2"
+                            }
+                          >
+                            <div className="text-sm font-bold pb-[10px]">
+                              {categories[item.category]}
+                            </div>
+                            <div className="text-xs font-medium">
+                              Subcategories
+                            </div>
                           </div>
+                        ),
+                      )}
+                    </div>
+                  )}
+                </animated.div>
+              </div>
+            </Container>
+
+            <Container>
+              <div className="flex flex-col justify-between lg:flex-row w-[98.5%] gap-y-8 mx-auto mt-[20px] lg:mt-[30px] mb-[20px] lg:mb-0">
+                <div className="w-full lg:w-[44%] flex flex-col justify-between ">
+                  <div
+                    className="mt-4 relative"
+                    style={{
+                      height: height,
+                      minHeight: isMobile ? undefined : "500px",
+                    }}
+                  >
+                    {sortedChainValues &&
+                      master &&
+                      transitions((style, item) => (
+                        <animated.div
+                          className="absolute w-full"
+                          key={item.item}
+                          style={{
+                            ...style,
+                          }}
+                        >
+                          <ChainAnimations
+                            chain={item.item}
+                            value={item.value}
+                            index={item.index}
+                            sortedValues={sortedChainValues}
+                            selectedValue={selectedValue}
+                            selectedMode={selectedMode}
+                            selectedChains={selectedChains}
+                            setSelectedChains={setSelectedChains}
+                            selectedCategory={selectedCategory}
+                            master={master}
+                          />
                         </animated.div>
-                      ) : (
-                        // Different response for "Chains" category
+                      ))}
+                  </div>
+                </div>
+                <div className="w-full lg:w-[56%] relative bottom-2 mt-6 mb-[30px] h-[320px] lg:mt-0 lg:h-auto">
+                  {chartSeries && (
+                    <Chart
+                      chartType={
+                        selectedChartType === "absolute" ? "line" : "area"
+                      }
+                      stack={selectedChartType !== "absolute"}
+                      types={
+                        selectedCategory === null ||
+                        selectedCategory === "Chains"
+                          ? data.native_transfers[dailyKey].types
+                          : data[selectedCategory][dailyKey].types
+                      }
+                      timespan={selectedTimespan}
+                      series={chartSeries}
+                      yScale={
+                        selectedChartType === "percentage"
+                          ? "percentage"
+                          : "linear"
+                      }
+                      // yScale="linear"
+                      chartHeight={isMobile ? "400" : "560"}
+                      chartWidth="100%"
+                      decimals={selectedMode === "txcount_" ? 0 : 2}
+                    />
+                  )}
+                </div>
+                <div className="flex flex-wrap items-center w-[100%] gap-y-2 lg:hidden mt-8 ">
+                  <div className="font-bold text-sm pr-2 pl-2">
+                    {formatSubcategories(selectedCategory)}:{" "}
+                  </div>
+
+                  {selectedSubcategories[selectedCategory] &&
+                    selectedSubcategories[selectedCategory].map(
+                      (subcategory) => (
                         <div
-                          key={item.category}
-                          className={
-                            "relative flex flex-col min-w-[140px] max-w-[140px] w-full h-full justify-start pl-[16px] pt-2"
-                          }
+                          key={subcategory}
+                          className="  text-xs px-[2px] py-[5px] mx-[5px]"
                         >
-                          <div className="text-sm font-bold pb-[10px]">
-                            {categories[item.category]}
-                          </div>
-                          <div className="text-xs font-medium">
-                            Subcategories
-                          </div>
+                          {formatSubcategories(subcategory)}
                         </div>
                       ),
                     )}
-                  </div>
-                )}
-              </animated.div>
-            </div>
-          </Container>
-
-          <Container>
-            <div className="flex flex-col justify-between lg:flex-row w-[98.5%] gap-y-8 mx-auto mt-[20px] lg:mt-[30px] mb-[20px] lg:mb-0">
-              <div className="w-full lg:w-[44%] flex flex-col justify-between ">
-                <div
-                  className="mt-4 relative"
-                  style={{
-                    height: height,
-                    minHeight: isMobile ? undefined : "500px",
-                  }}
-                >
-                  {sortedChainValues &&
-                    master &&
-                    transitions((style, item) => (
-                      <animated.div
-                        className="absolute w-full"
-                        key={item.item}
-                        style={{
-                          ...style,
-                        }}
-                      >
-                        <ChainAnimations
-                          chain={item.item}
-                          value={item.value}
-                          index={item.index}
-                          sortedValues={sortedChainValues}
-                          selectedValue={selectedValue}
-                          selectedMode={selectedMode}
-                          selectedChains={selectedChains}
-                          setSelectedChains={setSelectedChains}
-                          selectedCategory={selectedCategory}
-                          master={master}
-                        />
-                      </animated.div>
-                    ))}
                 </div>
               </div>
-              <div className="w-full lg:w-[56%] relative bottom-2 mt-6 mb-[30px] h-[320px] lg:mt-0 lg:h-auto">
-                {chartSeries && (
-                  <Chart
-                    chartType={
-                      selectedChartType === "absolute" ? "line" : "area"
-                    }
-                    stack={selectedChartType !== "absolute"}
-                    types={
-                      selectedCategory === null || selectedCategory === "Chains"
-                        ? data.native_transfers[dailyKey].types
-                        : data[selectedCategory][dailyKey].types
-                    }
-                    timespan={selectedTimespan}
-                    series={chartSeries}
-                    yScale={
-                      selectedChartType === "percentage"
-                        ? "percentage"
-                        : "linear"
-                    }
-                    // yScale="linear"
-                    chartHeight={isMobile ? "400" : "560"}
-                    chartWidth="100%"
-                    decimals={selectedMode === "txcount_" ? 0 : 2}
-                  />
-                )}
-              </div>
-              <div className="flex flex-wrap items-center w-[100%] gap-y-2 lg:hidden mt-8 ">
-                <div className="font-bold text-sm pr-2 pl-2">
-                  {formatSubcategories(selectedCategory)}:{" "}
-                </div>
+              <div>
+                {" "}
+                <div className="flex flex-wrap items-center w-[98%] mx-auto gap-y-2 invisible lg:visible ">
+                  <div className="font-bold text-sm pr-2 pl-2">
+                    {formatSubcategories(selectedCategory)}:{" "}
+                  </div>
 
-                {selectedSubcategories[selectedCategory] &&
-                  selectedSubcategories[selectedCategory].map((subcategory) => (
-                    <div
-                      key={subcategory}
-                      className="  text-xs px-[2px] py-[5px] mx-[5px]"
-                    >
-                      {formatSubcategories(subcategory)}
-                    </div>
-                  ))}
+                  {selectedSubcategories[selectedCategory] &&
+                    selectedSubcategories[selectedCategory].map(
+                      (subcategory) => (
+                        <div
+                          key={subcategory}
+                          className="  text-xs px-[4px] py-[5px] mx-[5px]"
+                        >
+                          {formatSubcategories(subcategory)}
+                        </div>
+                      ),
+                    )}
+                </div>{" "}
               </div>
-            </div>
-            <div>
-              {" "}
-              <div className="flex flex-wrap items-center w-[98%] mx-auto gap-y-2 invisible lg:visible ">
-                <div className="font-bold text-sm pr-2 pl-2">
-                  {formatSubcategories(selectedCategory)}:{" "}
-                </div>
-
-                {selectedSubcategories[selectedCategory] &&
-                  selectedSubcategories[selectedCategory].map((subcategory) => (
-                    <div
-                      key={subcategory}
-                      className="  text-xs px-[4px] py-[5px] mx-[5px]"
-                    >
-                      {formatSubcategories(subcategory)}
-                    </div>
-                  ))}
-              </div>{" "}
-            </div>
-          </Container>
+            </Container>
+          </div>
           <Container>
             {" "}
             <div className="flex flex-row w-[100%] mx-auto justify-center md:items-center items-end md:justify-end rounded-full  text-sm md:text-base  md:rounded-full bg-forest-50 dark:bg-[#1F2726] p-0.5 px-0.5 md:px-1 mt-8 gap-x-1 text-md py-[4px]">
diff --git a/components/layout/ChainChart.tsx b/components/layout/ChainChart.tsx
index 94d70c4a..0fc1194f 100644
--- a/components/layout/ChainChart.tsx
+++ b/components/layout/ChainChart.tsx
@@ -1530,7 +1530,7 @@ export default function ChainChart({
 
       {data && (
         <div
-          id="chart-container"
+          id="content-container"
           className={`grid grid-rows-8 lg:grid-rows-4 lg:grid-cols-2 lg:grid-flow-row gap-y-0 gap-x-[15px] `}
           // style={{
           //   gridRow: `span ${Math.ceil(enabledFundamentalsKeys.length / 2)}`,
diff --git a/components/layout/ComparisonChart.tsx b/components/layout/ComparisonChart.tsx
index a7c3b33e..48e8c1d7 100644
--- a/components/layout/ComparisonChart.tsx
+++ b/components/layout/ComparisonChart.tsx
@@ -1905,6 +1905,7 @@ export default function ComparisonChart({
                     }
                   >
                     <div
+                      id="content-container"
                       className={
                         is_embed
                           ? "relative block w-full top-0 md:top-8"
diff --git a/components/layout/Container.tsx b/components/layout/Container.tsx
index e964d8c7..e1f82c4b 100644
--- a/components/layout/Container.tsx
+++ b/components/layout/Container.tsx
@@ -1,5 +1,6 @@
 type ContainerProps = {
   children: React.ReactNode;
+  id?: string;
   className?: string;
   ref?: React.Ref<HTMLDivElement>;
   style?: React.CSSProperties;
@@ -7,12 +8,14 @@ type ContainerProps = {
 
 export default function Container({
   children,
+  id,
   ref,
   className = "",
   style,
 }: ContainerProps) {
   return (
     <div
+      id={id}
       className={`px-[20px] md:px-[64px] ${className}`}
       ref={ref ?? null}
       style={style}
diff --git a/components/layout/OverviewMetrics.tsx b/components/layout/OverviewMetrics.tsx
index 673a28bb..610d4fa7 100644
--- a/components/layout/OverviewMetrics.tsx
+++ b/components/layout/OverviewMetrics.tsx
@@ -350,7 +350,10 @@ export default function OverviewMetrics({
             </TopRowContainer>
           </Container>
           {/*Chain Rows/List */}
-          <Container className="block w-full !pr-0 lg:!px-[50px]">
+          <Container
+            id="content-container"
+            className="block w-full !pr-0 lg:!px-[50px]"
+          >
             <RowProvider
               value={{
                 master,

From 5b003c8e0949e37b2bd499dcd356bcc963da372e Mon Sep 17 00:00:00 2001
From: Manish Gupta <manishiwa@gmail.com>
Date: Fri, 3 May 2024 13:46:16 -0700
Subject: [PATCH 3/5] sitemap changes, redirect for chain-overview

---
 app/(layout)/server-sitemap.xml/route.ts | 4 ++++
 components/layout/LandingChart.tsx       | 5 ++++-
 lib/navigation.tsx                       | 1 +
 next.config.js                           | 5 +++++
 4 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/app/(layout)/server-sitemap.xml/route.ts b/app/(layout)/server-sitemap.xml/route.ts
index 2a2d3c3f..feedbb4c 100644
--- a/app/(layout)/server-sitemap.xml/route.ts
+++ b/app/(layout)/server-sitemap.xml/route.ts
@@ -27,6 +27,10 @@ export async function GET(request: Request) {
       .map(
         (option) => `https://www.growthepie.xyz/blockspace/${option.urlKey}`,
       ),
+    ...Object.keys(masterData.blockspace_categories.main_categories).map(
+      (category) =>
+        `https://www.growthepie.xyz/blockspace/chain-overview/${category}`,
+    ),
     ...chains.options
       .filter(
         (c) =>
diff --git a/components/layout/LandingChart.tsx b/components/layout/LandingChart.tsx
index b7715c95..faf3cf96 100644
--- a/components/layout/LandingChart.tsx
+++ b/components/layout/LandingChart.tsx
@@ -1719,7 +1719,10 @@ export default function LandingChart({
     );
 
   return (
-    <div className="w-full h-full flex flex-col justify-between">
+    <div
+      id="content-container"
+      className="w-full h-full flex flex-col justify-between"
+    >
       <div className="h-[225px] lg:h-[81px] xl:h-[60px]">
         <div className="flex flex-col lg:hidden justify-center pb-[15px] gap-y-[5px]">
           <MobileMetricCard
diff --git a/lib/navigation.tsx b/lib/navigation.tsx
index 2a247695..becc1c04 100644
--- a/lib/navigation.tsx
+++ b/lib/navigation.tsx
@@ -363,6 +363,7 @@ export const navigationItems: NavigationItem[] = [
         key: "chain-overview",
         rootKey: "chainOverview",
         urlKey: "chain-overview",
+        excludeFromSitemap: true,
       },
       {
         label: "Category Comparison",
diff --git a/next.config.js b/next.config.js
index f39f7088..c8335030 100644
--- a/next.config.js
+++ b/next.config.js
@@ -40,6 +40,11 @@ const nextConfig = {
         destination: "https://fees.growthepie.xyz",
         permanent: true,
       },
+      {
+        source: "/blockspace/chain-overview",
+        destination: "/blockspace/chain-overview/nft",
+        permanent: true,
+      },
     ];
   },
   images: {

From 7b91d0be2ec98ccd9b15fc821888756ca1cc9543 Mon Sep 17 00:00:00 2001
From: Manish Gupta <manishiwa@gmail.com>
Date: Fri, 3 May 2024 16:57:39 -0700
Subject: [PATCH 4/5] hide console log

---
 components/layout/ComparisonChart.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/layout/ComparisonChart.tsx b/components/layout/ComparisonChart.tsx
index 4a5a24d8..1d04ccb7 100644
--- a/components/layout/ComparisonChart.tsx
+++ b/components/layout/ComparisonChart.tsx
@@ -1642,7 +1642,7 @@ export default function ComparisonChart({
 
   // const { width, height } = useWindowSize();
 
-  console.log(data.filter((d) => d.name === "ethereum").length > 0);
+  // console.log(data.filter((d) => d.name === "ethereum").length > 0);
 
   useLayoutEffect(() => {
     if (chartComponent.current) {

From 5332ab182c8d833f11dfce832101039de2286149 Mon Sep 17 00:00:00 2001
From: Manish Gupta <manishiwa@gmail.com>
Date: Fri, 3 May 2024 17:20:19 -0700
Subject: [PATCH 5/5] update layouts to only single og image

---
 app/(embeds)/layout.tsx | 12 ------------
 app/(fees)/layout.tsx   | 12 ------------
 app/(layout)/layout.tsx | 14 +-------------
 3 files changed, 1 insertion(+), 37 deletions(-)

diff --git a/app/(embeds)/layout.tsx b/app/(embeds)/layout.tsx
index d3755a1e..619eb493 100644
--- a/app/(embeds)/layout.tsx
+++ b/app/(embeds)/layout.tsx
@@ -88,18 +88,6 @@ export const metadata: Metadata = {
         height: 627,
         alt: "growthepie.xyz",
       },
-      {
-        url: "https://www.growthepie.xyz/logo_full.png",
-        width: 772,
-        height: 181,
-        alt: "growthepie.xyz",
-      },
-      {
-        url: "https://www.growthepie.xyz/logo_pie_only.png",
-        width: 168,
-        height: 181,
-        alt: "growthepie",
-      },
     ],
     locale: "en_US",
     type: "website",
diff --git a/app/(fees)/layout.tsx b/app/(fees)/layout.tsx
index dacdfbf8..e5d7dac8 100644
--- a/app/(fees)/layout.tsx
+++ b/app/(fees)/layout.tsx
@@ -114,18 +114,6 @@ export const metadata: Metadata = {
         height: 627,
         alt: "growthepie.xyz",
       },
-      {
-        url: `https://${host}/logo_full.png`,
-        width: 772,
-        height: 181,
-        alt: "growthepie.xyz",
-      },
-      {
-        url: `https://${host}/logo_pie_only.png`,
-        width: 168,
-        height: 181,
-        alt: "growthepie",
-      },
     ],
     locale: "en_US",
     type: "website",
diff --git a/app/(layout)/layout.tsx b/app/(layout)/layout.tsx
index 6847aa8d..d46024f8 100644
--- a/app/(layout)/layout.tsx
+++ b/app/(layout)/layout.tsx
@@ -84,6 +84,7 @@ export const metadata: Metadata = {
     title: "growthepie",
     description: "Growing Ethereum’s Ecosystem Together",
     url: "https://www.growthepie.xyz",
+
     images: [
       {
         url: "https://www.growthepie.xyz/gtp_og.png",
@@ -91,18 +92,6 @@ export const metadata: Metadata = {
         height: 627,
         alt: "growthepie.xyz",
       },
-      {
-        url: "https://www.growthepie.xyz/logo_full.png",
-        width: 772,
-        height: 181,
-        alt: "growthepie.xyz",
-      },
-      {
-        url: "https://www.growthepie.xyz/logo_pie_only.png",
-        width: 168,
-        height: 181,
-        alt: "growthepie",
-      },
     ],
     locale: "en_US",
     type: "website",
@@ -174,7 +163,6 @@ export default function RootLayout({
               <SidebarContainer />
               <div className="flex flex-col flex-1 overflow-y-auto z-10 overflow-x-hidden relative min-h-full bg-white dark:bg-inherit">
                 <div className="w-full relative min-h-full">
-
                   <div className="background-container">
                     <div className="background-gradient-group">
                       <div className="background-gradient-yellow"></div>