Metrics page fixes

__tests__/app/omPages.test.tsx

@@ -1,38 +1,39 @@
-import { render, screen } from '@testing-library/react';
-import React from 'react';
-import OmGroups from '@/app/om/om-groups/page';
+import { render, screen } from "@testing-library/react";
+import React from "react";
+import OmGroups from "@/app/om/om-groups/page";
 
-
-describe('OM pages render', () => {
-  it('renders OM Groups page', () => {
+describe("OM pages render", () => {
+  it("renders OM Groups page", () => {
     render(<OmGroups />);
     expect(screen.getAllByText(/OM GROUPS/i).length).toBeGreaterThan(0);
   });
 
-  it('renders OM Groups with content about building OM together', () => {
-    render(<OmGroups />);
-    expect(screen.getByText(/We are going to build OM together/i)).toBeInTheDocument();
-  });
-
-  it('renders OM Groups with Discord link', () => {
+  it("renders OM Groups with content about building OM together", () => {
     render(<OmGroups />);
-    expect(screen.getByRole('link', { name: /OM Discord channel/i })).toBeInTheDocument();
-    expect(screen.getByRole('link', { name: /OM Discord channel/i })).toHaveAttribute('href', 'https://discord.gg/join-om');
+    expect(
+      screen.getByText(/We are going to build OM together/i)
+    ).toBeInTheDocument();
   });
 
-  it('renders OM Groups with representative groups list', () => {
+  it("renders OM Groups with representative groups list", () => {
     render(<OmGroups />);
     expect(screen.getByText(/Representative groups:/i)).toBeInTheDocument();
-    expect(screen.getByText(/Experiences: Art, Fashion, Education, Entertainment, Personal, Work/i)).toBeInTheDocument();
-    expect(screen.getByText(/Communities: Art, PFP, Off-chain/i)).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        /Experiences: Art, Fashion, Education, Entertainment, Personal, Work/i
+      )
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(/Communities: Art, PFP, Off-chain/i)
+    ).toBeInTheDocument();
     expect(screen.getByText(/Governance & Social/i)).toBeInTheDocument();
     expect(screen.getByText(/Decentralized Tech Stack/i)).toBeInTheDocument();
     expect(screen.getByText(/Inclusion/i)).toBeInTheDocument();
     expect(screen.getByText(/Public Policy/i)).toBeInTheDocument();
   });
 
-  it('renders with proper title and meta information', () => {
+  it("renders with proper title and meta information", () => {
     render(<OmGroups />);
-    expect(document.title).toBe('OM GROUPS - 6529.io');
+    expect(document.title).toBe("OM GROUPS - 6529.io");
   });
-});
+});

__tests__/components/home/hero/HeroHeader.test.tsx

@@ -0,0 +1,33 @@
+import HeroHeader from "@/components/home/hero/HeroHeader";
+import { render, screen } from "@testing-library/react";
+
+jest.mock("next/link", () => ({
+  __esModule: true,
+  default: ({ href, children, ...props }: any) => (
+    <a href={href} {...props}>
+      {children}
+    </a>
+  ),
+}));
+
+describe("HeroHeader", () => {
+  it("renders the hero heading copy", () => {
+    render(<HeroHeader />);
+
+    expect(
+      screen.getByRole("heading", {
+        name: "Building a decentralized network state",
+      })
+    ).toBeInTheDocument();
+  });
+
+  it("renders a quick link to network health", () => {
+    render(<HeroHeader />);
+
+    const healthLink = screen.getByRole("link", {
+      name: "Open network health dashboard",
+    });
+
+    expect(healthLink).toHaveAttribute("href", "/network/health");
+  });
+});

app/network/definitions/page.client.tsx

@@ -7,7 +7,7 @@ import { Col, Container, Row } from "react-bootstrap";
 const NAV_LINKS = [
   { href: "/network/tdh", label: "TDH" },
   { href: "/network/tdh/historic-boosts", label: "TDH Historic Boosts" },
-  { href: "/network/metrics/network-tdh", label: "Network Stats" },
+  { href: "/network/health/network-tdh", label: "Network Stats" },
   { href: "/network/levels", label: "Levels" },
 ] as const;
 

app/network/metrics/components/MintMetricsCard.tsx → app/network/health/components/MintMetricsCard.tsx

@@ -1,6 +1,6 @@
-import type { ReactNode } from "react";
 import CustomTooltip from "@/components/utils/tooltip/CustomTooltip";
 import type { ApiMintMetrics } from "@/generated/models/ApiMintMetrics";
+import type { ReactNode } from "react";
 import { formatNumberWithCommas } from "../utils/formatNumbers";
 
 interface MintMetricsCardProps {
@@ -169,7 +169,7 @@ export default function MintMetricsCard({ data, icon }: MintMetricsCardProps) {
           <p className="tw-mb-3 tw-text-xs tw-font-medium tw-uppercase tw-tracking-wider tw-text-emerald-400">
             Last {data.length} Mints
           </p>
-          <MintBarChart data={data} />
+          <MintBarChart data={data.toReversed()} />
         </div>
       </div>
     </div>

app/network/metrics/page.client.tsx → app/network/health/page.client.tsx

@@ -26,7 +26,7 @@ import MetricsSkeleton from "./components/MetricsSkeleton";
 import MintMetricsCard from "./components/MintMetricsCard";
 
 export default function MetricsPageClient() {
-  useSetTitle("Metrics");
+  useSetTitle("Health");
 
   const dailyQuery = useCommunityMetrics("DAY");
   const weeklyQuery = useCommunityMetrics("WEEK");
@@ -42,7 +42,7 @@ export default function MetricsPageClient() {
     <div className="tailwind-scope tw-min-h-screen tw-bg-black">
       <div className="tw-mx-auto tw-max-w-6xl tw-px-4 tw-py-8 sm:tw-px-6 lg:tw-px-8">
         <header className="tw-mb-8">
-          <h1 className="tw-text-2xl tw-font-bold tw-text-white">Metrics</h1>
+          <h1 className="tw-text-2xl tw-font-bold tw-text-white">Health</h1>
           <p className="tw-mt-1 tw-text-sm tw-text-neutral-400">
             Activity overview across different time periods
           </p>
@@ -65,7 +65,7 @@ export default function MetricsPageClient() {
                 icon={<MintIcon />}
               />
               <MetricCard
-                title="Distinct Droppers"
+                title="Posters"
                 dailyData={dailyQuery.data.distinctDroppers}
                 weeklyData={weeklyQuery.data.distinctDroppers}
                 icon={<DroppersIcon />}
@@ -76,7 +76,7 @@ export default function MetricsPageClient() {
                 sparklineDates={series?.stepsStartTimes}
               />
               <MetricCard
-                title="Drops Created"
+                title="Posts"
                 dailyData={dailyQuery.data.dropsCreated}
                 weeklyData={weeklyQuery.data.dropsCreated}
                 icon={<DropsIcon />}
@@ -98,7 +98,7 @@ export default function MetricsPageClient() {
                 sparklineDates={series?.stepsStartTimes}
               />
               <MetricCard
-                title="Distinct Voters"
+                title="Voters"
                 dailyData={dailyQuery.data.mainStageDistinctVoters}
                 weeklyData={weeklyQuery.data.mainStageDistinctVoters}
                 icon={<VotersIcon />}
@@ -121,7 +121,7 @@ export default function MetricsPageClient() {
                 sparklineDates={series?.stepsStartTimes}
               />
               <CumulativeMetricCard
-                title="Voting Power"
+                title="Active Votes"
                 dailyData={dailyQuery.data.tdhOnMainStageSubmissions}
                 weeklyData={weeklyQuery.data.tdhOnMainStageSubmissions}
                 icon={<TdhIcon />}
@@ -140,7 +140,7 @@ export default function MetricsPageClient() {
                 iconBgColor="tw-bg-teal-500"
                 accentColor="tw-text-teal-400"
                 unit="TDH"
-                href="/network/metrics/network-tdh"
+                href="/network/health/network-tdh"
                 sparklineData={series?.networkTdh}
                 sparklineColor="tw-bg-teal-500"
                 sparklineDates={series?.stepsStartTimes}
@@ -170,7 +170,7 @@ export default function MetricsPageClient() {
                 sparklineDates={series?.stepsStartTimes}
               />
               <CumulativeMetricCard
-                title="Profile Count"
+                title="Identities"
                 dailyData={dailyQuery.data.profileCount}
                 weeklyData={weeklyQuery.data.profileCount}
                 icon={<ProfileIcon />}

app/network/metrics/page.tsx → app/network/health/page.tsx

@@ -7,5 +7,5 @@ export default function MetricsPage() {
 }
 
 export function generateMetadata(): Metadata {
-  return getAppMetadata({ title: "Metrics", description: "Metrics dashboard" });
+  return getAppMetadata({ title: "Health", description: "Health dashboard" });
 }

app/network/tdh/historic-boosts/page.client.tsx

@@ -121,7 +121,7 @@ function IntroLine(props: PropsWithChildren) {
 const NAV_LINKS = [
   { href: "/network/tdh", label: "TDH" },
   { href: "/network/definitions", label: "Definitions" },
-  { href: "/network/metrics/network-tdh", label: "Network Stats" },
+  { href: "/network/health/network-tdh", label: "Network Stats" },
   { href: "/network/levels", label: "Levels" },
 ] as const;
 

app/network/tdh/page.client.tsx

@@ -225,7 +225,7 @@ export default function TDHMainPage() {
                 metrics across the network.
               </p>
               <Link
-                href="/network/metrics/network-tdh"
+                href="/network/health/network-tdh"
                 className={BUTTON_LINK_CLASSES}
               >
                 View Network Stats

components/about/AboutContactUs.tsx

@@ -6,9 +6,7 @@ export default function AboutContactUs() {
     <Container>
       <Row>
         <Col>
-          <h1>
-            Contact Us
-          </h1>
+          <h1>Contact Us</h1>
         </Col>
       </Row>
       <Row className="pt-3 pb-3">
@@ -18,7 +16,8 @@ export default function AboutContactUs() {
             <Link
               href="https://x.com/6529collections"
               target="_blank"
-              rel="noopener noreferrer">
+              rel="noopener noreferrer"
+            >
               https://x.com/6529collections
             </Link>
           </p>
@@ -33,21 +32,24 @@ export default function AboutContactUs() {
               <Link
                 href="https://x.com/punk6529"
                 target="_blank"
-                rel="noopener noreferrer">
+                rel="noopener noreferrer"
+              >
                 punk6529
               </Link>{" "}
               or &#64;
               <Link
                 href="https://x.com/6529er"
                 target="_blank"
-                rel="noopener noreferrer">
+                rel="noopener noreferrer"
+              >
                 6529er
               </Link>{" "}
               or &#64;
               <Link
                 href="https://x.com/teexels"
                 target="_blank"
-                rel="noopener noreferrer">
+                rel="noopener noreferrer"
+              >
                 teexels
               </Link>{" "}
               on Twitter
@@ -58,32 +60,26 @@ export default function AboutContactUs() {
               <Link
                 href="https://x.com/punk6529"
                 target="_blank"
-                rel="noopener noreferrer">
+                rel="noopener noreferrer"
+              >
                 punk6529
               </Link>
               , &#64;
               <Link
                 href="https://x.com/6529er"
                 target="_blank"
-                rel="noopener noreferrer">
+                rel="noopener noreferrer"
+              >
                 6529er
               </Link>{" "}
               or &#64;
               <Link
                 href="https://x.com/teexels"
                 target="_blank"
-                rel="noopener noreferrer">
+                rel="noopener noreferrer"
+              >
                 teexels
               </Link>{" "}
-              in the OM Discord (
-              <Link
-                href="https://discord.gg/join-om"
-                target="_blank"
-                rel="noopener noreferrer">
-                https://discord.gg/join-om
-              </Link>
-              ). We don&apos;t answer Discord DMs from people we don&apos;t
-              already know.
             </li>
           </ul>
           <br />

components/footer/Footer.tsx

@@ -61,11 +61,6 @@ export default function Footer() {
           "@6529Collections"
         )}
         {printSeparator()}
-        {printLinkWithImage(
-          "https://discord.gg/join-om",
-          "/discord.png",
-          "OM Discord"
-        )}
         {printSeparator()}
         {printLinkWithImage(
           "https://github.com/6529-Collections",

components/header/AppSidebar.tsx

@@ -32,10 +32,10 @@ const MENU = [
       { label: "Memes Calendar", path: "/meme-calendar" },
       { label: "TDH", path: "/network/tdh" },
       { label: "Metrics", section: true },
-      { label: "Metrics", path: "/network/metrics" },
+      { label: "Health", path: "/network/health" },
       { label: "Definitions", path: "/network/definitions" },
       { label: "Levels", path: "/network/levels" },
-      { label: "Network Stats", path: "/network/metrics/network-tdh" },
+      { label: "Network Stats", path: "/network/health/network-tdh" },
     ],
   },
   {

components/home/hero/HeroHeader.tsx

@@ -1,8 +1,24 @@
 "use client";
 
+import { HeartIcon } from "@heroicons/react/24/solid";
+import Link from "next/link";
+
 export default function HeroHeader() {
   return (
-    <section className="tw-max-w-xl tw-px-4 tw-pt-10 md:tw-mx-auto md:tw-max-w-3xl md:tw-px-6 md:tw-text-center lg:tw-px-8">
+    <section className="tw-relative tw-max-w-xl tw-px-4 tw-pt-10 md:tw-mx-auto md:tw-max-w-3xl md:tw-px-6 md:tw-text-center lg:tw-px-8">
+      <Link
+        href="/network/health"
+        aria-label="Open network health dashboard"
+        title="Network health"
+        className="tw-bg-red/8 desktop-hover:hover:tw-bg-red/18 tw-group tw-fixed tw-right-4 tw-top-4 tw-z-40 tw-inline-flex tw-h-10 tw-w-10 tw-items-center tw-justify-center tw-rounded-full tw-border tw-border-solid tw-border-red/35 tw-text-red/85 tw-no-underline tw-shadow-[0_0_12px_rgba(249,112,102,0.16)] tw-backdrop-blur-sm tw-transition-all tw-duration-300 focus-visible:tw-outline-none focus-visible:tw-ring-2 focus-visible:tw-ring-red/40 active:tw-scale-95 desktop-hover:hover:tw-border-red/55 desktop-hover:hover:tw-text-red desktop-hover:hover:tw-shadow-[0_0_22px_rgba(249,112,102,0.26)] md:tw-right-6 md:tw-top-5"
+      >
+        <span className="tw-relative tw-inline-flex tw-items-center tw-justify-center">
+          <HeartIcon
+            className="tw-relative tw-size-4 tw-opacity-90 tw-transition-opacity tw-duration-300 group-hover:tw-opacity-100 motion-safe:tw-animate-heart-beat-soft motion-reduce:tw-animate-none"
+            aria-hidden
+          />
+        </span>
+      </Link>
       <p className="tw-mx-auto tw-mb-2 tw-text-balance tw-text-xs tw-uppercase tw-tracking-[0.2em] tw-text-iron-500">
         6529
       </p>