Stats to metrics

[simo6529]

Summary by CodeRabbit

• New Features

  • Metric cards are now clickable, enabling navigation to detailed metric views.
  • External link icons display on navigable cards for clarity.

• Navigation Updates

  • Reorganized metrics section: Network Stats relocated under the Metrics menu.
  • Updated page header label from "Community Metrics" to "Metrics."

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR restructures network metrics navigation by consolidating the Network Stats page under a new /network/metrics/network-tdh path. It adds optional linking capabilities to metric card components, renames the Community Metrics section to Metrics, and updates sidebar navigation to reflect the reorganized hierarchy.

Changes

Cohort / File(s)	Summary
Navigation Routing Updates components/header/AppSidebar.tsx, hooks/useSidebarSections.ts, tests/pages/network-tdh.spec.ts	Reorganize network sidebar menu: shift Metrics from /metrics to /network/metrics and relocate Network Stats from /network/stats to /network/metrics/network-tdh. Update test navigation target accordingly.
Page Router Updates app/network/definitions/page.client.tsx, app/network/tdh/historic-boosts/page.client.tsx, app/network/tdh/page.client.tsx	Update internal navigation links targeting /network/stats to point to /network/metrics/network-tdh. Minor Tailwind class reordering applied for consistency.
Metric Card Component Enhancements app/network/metrics/components/MetricCard.tsx, app/network/metrics/components/CumulativeMetricCard.tsx	Add optional href prop to enable clickable metric cards. Conditionally wrap card content in Next.js Link and display external-link icon (ArrowTopRightOnSquareIcon) in title when href is provided. Apply hover/transition styles when link is present.
Metrics Page Updates app/network/metrics/page.client.tsx	Rebrand heading from "Community Metrics" to "Metrics" and add href prop to CumulativeMetricCard pointing to /network/metrics/network-tdh.
Metadata Configuration app/network/metrics/network-tdh/page.tsx	Convert generateMetadata from async to synchronous function signature.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

• App ui/ux fixes #1582: Modifies AppSidebar navigation structure for network-related menu items, directly aligning with this PR's navigation changes.
• xTDH info page #1637: Updates network sidebar entries in useSidebarSections.ts by adding xTDH route, complementing this PR's metrics hierarchy restructuring.
• SZN12 Boosts - TDH 1.4 #1522: Changes network navigation and TDH-related link targets, overlapping with this PR's path consolidation strategy.

Suggested reviewers

• ragnep

Poem

🐰 A hop through metrics, paths aligned,
Cards now linked with styles refined,
Stats consolidated, clean and neat,
Navigation's rhythm now complete! ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Stats to metrics' clearly summarizes the main change: refactoring navigation and routes from a /network/stats endpoint to /network/metrics/network-tdh across multiple files.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

🧹 Recent nitpick comments

app/network/metrics/components/CumulativeMetricCard.tsx (1)

3-4: Icon semantically implies external link.

ArrowTopRightOnSquareIcon typically conveys "opens in new tab/window" (external link). Since this is internal navigation without target="_blank", consider using ChevronRightIcon or ArrowRightIcon instead for clearer UX semantics.

app/network/metrics/components/MetricCard.tsx (2)

107-162: Duplicated link-wrapping logic with CumulativeMetricCard.

This pattern (content variable + conditional Link wrapper + hover styles + external icon) is identical to CumulativeMetricCard.tsx. Consider extracting into a shared wrapper component or utility to reduce duplication.

Example shared wrapper

// components/LinkableCard.tsx
interface LinkableCardProps {
  href?: string;
  children: ReactNode;
  className?: string;
}

export function LinkableCard({ href, children, className }: LinkableCardProps) {
  const hoverStyles = href 
    ? "hover:-tw-translate-y-1 hover:tw-border-neutral-700 hover:tw-shadow-xl hover:tw-shadow-neutral-900/50" 
    : "";
  
  const content = (
    <div className={`tw-transition-all tw-duration-300 ${hoverStyles} ${className}`}>
      {children}
    </div>
  );

  if (href) {
    return (
      <Link href={href} className="tw-block tw-no-underline hover:tw-no-underline">
        {content}
      </Link>
    );
  }
  return content;
}

---

112-117: Same icon semantics concern as CumulativeMetricCard.

ArrowTopRightOnSquareIcon suggests external navigation. Since this links internally, a directional arrow icon would be more appropriate.

---

📜 Recent review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 7de6ddd and fd349fa.

📒 Files selected for processing (16)

• app/network/definitions/page.client.tsx
• app/network/metrics/components/CumulativeMetricCard.tsx
• app/network/metrics/components/MetricCard.tsx
• app/network/metrics/components/MetricsError.tsx
• app/network/metrics/components/MetricsIcons.tsx
• app/network/metrics/components/MetricsSkeleton.tsx
• app/network/metrics/components/MintMetricsCard.tsx
• app/network/metrics/network-tdh/page.tsx
• app/network/metrics/page.client.tsx
• app/network/metrics/page.tsx
• app/network/metrics/utils/formatNumbers.ts
• app/network/tdh/historic-boosts/page.client.tsx
• app/network/tdh/page.client.tsx
• components/header/AppSidebar.tsx
• hooks/useSidebarSections.ts
• tests/pages/network-tdh.spec.ts

🧰 Additional context used

🧬 Code graph analysis (4)

app/network/metrics/components/MetricCard.tsx (1)

hooks/useCommunityMetrics.ts (1)

• MetricData (17-22)

tests/pages/network-tdh.spec.ts (1)

tests/testHelpers.ts (1)

• test (5-12)

app/network/metrics/network-tdh/page.tsx (1)

app/network/metrics/page.tsx (1)

• generateMetadata (9-11)

app/network/tdh/historic-boosts/page.client.tsx (1)

contexts/TitleContext.tsx (1)

• useSetTitle (210-218)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: Analyze (javascript-typescript)

🔇 Additional comments (12)

components/header/AppSidebar.tsx (1)

34-38: Route changes look correct and consistent with the PR objectives.

The navigation paths for "Metrics" and "Network Stats" have been updated to align with the new routing structure. However, note that line 34 declares a section header named "Metrics" and line 35 declares a navigation item also named "Metrics" — this could be slightly confusing in the UI. Consider whether differentiating these labels would improve clarity.

app/network/metrics/page.client.tsx (2)

42-42: Header rename looks good.

The header text change from "Community Metrics" to "Metrics" aligns with the PR objectives and maintains consistency with the navigation updates.

---

114-123: Link integration for Network TDH card looks correct.

The href prop addition enables navigation to the detailed Network Stats page at /network/metrics/network-tdh, which is consistent with the routing changes across the PR.

hooks/useSidebarSections.ts (1)

31-40: Navigation updates are consistent across files.

The route changes for "Metrics" (/network/metrics) and "Network Stats" (/network/metrics/network-tdh) match the corresponding updates in AppSidebar.tsx and other files in this PR. The subsection structure is clear and logically organized.

app/network/metrics/network-tdh/page.tsx (1)

26-31: Synchronous generateMetadata is appropriate here.

The change from async to synchronous aligns with the pattern used in app/network/metrics/page.tsx (as seen in the relevant code snippet). Since getAppMetadata returns a plain object without awaiting any promises, the synchronous form is correct and cleaner.

app/network/definitions/page.client.tsx (3)

7-12: Navigation link update is consistent with PR objectives.

The Network Stats link correctly points to the new route /network/metrics/network-tdh, maintaining consistency with the sidebar and other navigation components updated in this PR.

---

21-21: Class reordering has no functional impact.

The padding class order change (tw-pb-12 tw-pt-12 vs tw-pt-12 tw-pb-12) is purely cosmetic — Tailwind applies styles based on utility specificity, not declaration order. No concerns here.

---

93-99: Inline Link styling classes reordered.

The class reordering on the TDH link is a cosmetic change with no functional impact. The styling remains equivalent.

app/network/metrics/components/CumulativeMetricCard.tsx (1)

79-161: Clean conditional link-wrapping pattern.

The approach of extracting content into a variable and conditionally wrapping with Link is clean and maintainable. Hover effects are correctly scoped to linkable cards only.

app/network/tdh/page.client.tsx (1)

227-232: Link target updated to new metrics route.

The cross-link to Network Stats correctly points to /network/metrics/network-tdh, aligning with the PR's route restructuring.

app/network/tdh/historic-boosts/page.client.tsx (2)

26-26: Cleaner type expression.

Good simplification - using a direct conditional expression instead of a type cast is more readable and type-safe.

---

121-126: NAV_LINKS updated consistently with route restructuring.

The Network Stats link correctly points to /network/metrics/network-tdh, maintaining consistency with other navigation updates in this PR.

_{✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.}

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
No data about Coverage
0.0% Duplication on New Code

See analysis details on SonarQube Cloud