further progress on menu/navigation changes

growthepie · Sep 18, 2024 · fb94ef7 · fb94ef7
1 parent 64c32e4
commit fb94ef7
Show file tree

Hide file tree

Showing 7 changed files with 869 additions and 787 deletions.
diff --git a/app/(layout)/fundamentals/[metric]/layout.tsx b/app/(layout)/fundamentals/[metric]/layout.tsx
@@ -13,6 +13,7 @@ import { track } from "@vercel/analytics/server";
 import Link from "next/link";
 import Icon from "@/components/layout/Icon";
 import StableInsights from "@/components/layout/StableInsights";
+import { MetricItem, metricItems } from "@/lib/metrics";
 
 type Props = {
   params: { metric: string };
@@ -27,9 +28,7 @@ const unitsMap = {
 export async function generateMetadata({ params }: Props): Promise<Metadata> {
   if (
     !params.metric ||
-    navigationItems
-      .find((item) => item.label === "Fundamentals")
-      ?.options.find((item) => item.urlKey === params.metric) === undefined
+    metricItems.find((item) => item.urlKey === params.metric) === undefined
   ) {
     track("404 Error", {
       location: "404 Error",
@@ -38,9 +37,7 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
     return notFound();
   }
 
-  const option = navigationItems
-    .find((item) => item.label === "Fundamentals")
-    ?.options.find((item) => item.urlKey === params.metric);
+  const option = metricItems.find((item) => item.urlKey === params.metric);
 
   if (option) {
     const currentDate = new Date();
@@ -79,9 +76,8 @@ export default async function Layout({
 }) {
   const url = MetricsURLs[params.metric];
 
-  const pageData = navigationItems[1]?.options.find(
-    (item) => item.urlKey === params.metric,
-  )?.page ?? {
+  const pageData = metricItems.find((item) => item.urlKey === params.metric)
+    ?.page ?? {
     title: "",
     description: "",
     icon: "",

diff --git a/app/(refactor)/refactor/components/layout/Chains/ChainChart.tsx b/app/(refactor)/refactor/components/layout/Chains/ChainChart.tsx
diff --git a/components/charts/ChainComponent.tsx b/components/charts/ChainComponent.tsx
@@ -28,7 +28,7 @@ import {
 } from "@/components/layout/Tooltip";
 import Link from "next/link";
 import { Sources } from "@/lib/datasources";
-import { metricItems, MetricItem } from "@/lib/metrics";
+import { metricItems, MetricItem, metricCategories } from "@/lib/metrics";
 import { navigationItems, navigationCategories } from "@/lib/navigation";
 import { useUIContext } from "@/contexts/UIContext";
 import { useMediaQuery } from "usehooks-ts";
@@ -351,23 +351,23 @@ export default function ChainComponent({
 
       if (!navItem || !navItem.category) return null;
 
-      return navigationCategories[navItem.category]
-        ? navigationCategories[navItem.category].icon
+      return metricCategories[navItem.category]
+        ? metricCategories[navItem.category].icon
         : null;
     },
-    [navigationItems],
+    [metricItems],
   );
 
   const getNavLabel = useCallback(
     (key: string) => {
       const navItem = metricItems[metric_index];
       if (!navItem || !navItem.category) return null;
 
-      return navigationCategories[navItem.category]
-        ? navigationCategories[navItem.category].label
+      return metricCategories[navItem.category]
+        ? metricCategories[navItem.category].label
         : null;
     },
-    [navigationItems],
+    [metricItems],
   );
 
   const displayValues = useMemo(() => {

diff --git a/components/layout/SidebarMenuGroup.tsx b/components/layout/SidebarMenuGroup.tsx
diff --git a/components/layout/SingleChains/ChainChart.tsx b/components/layout/SingleChains/ChainChart.tsx
@@ -1119,7 +1119,7 @@ export default function ChainChart({
         ? metricCategories[metricItem.category].icon
         : null;
     },
-    [navigationItems],
+    [metricItems],
   );
 
   const lastPointLines = useMemo<{

diff --git a/icons/gtp-figma-export.json b/icons/gtp-figma-export.json
diff --git a/lib/navigation.tsx b/lib/navigation.tsx
@@ -32,6 +32,7 @@ export type NavigationItem = {
     excludeFromSitemap?: boolean;
     hide?: boolean;
     showNew?: boolean;
+    url?: string;
   }[];
   href?: string;
 };
@@ -58,6 +59,16 @@ export const navigationCategories = {
     group: "fundamentals",
   },
 
+  "blockspace-categories": {
+    label: "Categories",
+    icon: "gtp:package",
+    group: "blockspace",
+  },
+  contracts: {
+    label: "Contracts",
+    icon: "gtp:package",
+    group: "contracts",
+  },
   developer: {
     label: "Developer",
     icon: "feather:code",
@@ -246,6 +257,7 @@ export const navigationItems: NavigationItem[] = [
         key: "economics-overview",
         rootKey: "economics",
         urlKey: "economics",
+        url: "/economics",
       },
       {
         label: "Fees Paid by Users",
@@ -261,6 +273,7 @@ export const navigationItems: NavigationItem[] = [
         key: "fees",
         rootKey: "metricsFeesPaidToEthereum",
         urlKey: "fees-paid-by-users",
+        url: "/fundamentals/fees-paid-by-users",
       },
       {
         label: "Rent Paid to L1",
@@ -276,6 +289,7 @@ export const navigationItems: NavigationItem[] = [
         key: "rent_paid",
         rootKey: "metricsRentPaid",
         urlKey: "rent-paid",
+        url: "/fundamentals/rent-paid",
       },
       {
         label: "Onchain Profit",
@@ -291,6 +305,7 @@ export const navigationItems: NavigationItem[] = [
         key: "profit",
         rootKey: "metricsEarnings",
         urlKey: "profit",
+        url: "/fundamentals/profit",
       },
       {
         label: "Fully Diluted Valuation",
@@ -328,6 +343,7 @@ export const navigationItems: NavigationItem[] = [
         key: "fdv",
         rootKey: "metricsFullyDilutedValuation",
         urlKey: "fully-diluted-valuation",
+        url: "/fundamentals/fully-diluted-valuation",
       },
       {
         label: "Market Cap",
@@ -367,6 +383,7 @@ export const navigationItems: NavigationItem[] = [
         key: "market_cap",
         rootKey: "marketCap",
         urlKey: "market-cap",
+        url: "/fundamentals/market-cap",
       },
     ],
   },
@@ -377,6 +394,7 @@ export const navigationItems: NavigationItem[] = [
     options: [
       {
         label: "Chain Overview",
+        category: "blockspace-categories",
         page: {
           title: "Chain Overview",
           description: `We measure the gas fees spent and the number of transactions sent to smart contracts. We then map these smart contracts to distinct categories. The chart below breaks down the total blockspace of a chain into these categories. Each category is made up of multiple subcategories, which are listed in the mapping table below the chart.
@@ -391,6 +409,7 @@ export const navigationItems: NavigationItem[] = [
       },
       {
         label: "Category Comparison",
+        category: "blockspace-categories",
         page: {
           title: "Category Comparison",
           description:
@@ -401,6 +420,21 @@ export const navigationItems: NavigationItem[] = [
         rootKey: "categoryComparison",
         urlKey: "category-comparison",
       },
+      {
+        label: "Contracts",
+        category: "contracts",
+        page: {
+          title: "Contracts",
+          description:
+            "The number of contracts created in the last 24 hours. Methodology and data is derived from L2Beat.com.",
+          icon: "gtp:contracts",
+        },
+        icon: "gtp:contracts",
+        key: "contracts",
+        rootKey: "contracts",
+        urlKey: "contracts",
+        url: "https://labels.growthepie.xyz/",
+      },
     ],
     // href: "",
   },