feat(discovery): build key discovery leaderboard page for top performing keys (#1206)

src/hooks/useKeyDiscoveryLeaderboard.ts

@@ -0,0 +1,29 @@
+import { useQuery } from '@tanstack/react-query';
+import { queryKeys } from '@/lib/queryKeys';
+import {
+	analyticsService,
+	type LeaderboardMetric,
+	type KeyLeaderboardEntry,
+} from '@/services/analytics.service';
+
+export interface UseKeyDiscoveryLeaderboardOptions {
+	enabled?: boolean;
+	refetchInterval?: number | false;
+}
+
+/**
+ * Hook to fetch top performing creator keys discovery leaderboard (#1206).
+ * Ranked by volume, holders, or reputation score.
+ */
+export function useKeyDiscoveryLeaderboard(
+	metric: LeaderboardMetric = 'volume',
+	options: UseKeyDiscoveryLeaderboardOptions = {}
+) {
+	return useQuery<KeyLeaderboardEntry[]>({
+		queryKey: queryKeys.keyLeaderboard.byMetric(metric),
+		queryFn: () => analyticsService.getKeyDiscoveryLeaderboard(metric),
+		enabled: options.enabled ?? true,
+		refetchInterval: options.refetchInterval ?? false,
+		staleTime: 30_000,
+	});
+}

src/lib/queryKeys.ts

@@ -9,7 +9,10 @@
 
 import type { GetCoursesParams } from '@/services/course.service';
 import type { VolumeWindow } from '@/services/leaderboard.service';
-import type { ProtocolTimeRange } from '@/services/analytics.service';
+import type {
+	ProtocolTimeRange,
+	LeaderboardMetric,
+} from '@/services/analytics.service';
 
 export const queryKeys = {
 	creatorProfile: {
@@ -224,6 +227,11 @@ export const queryKeys = {
 		data: (range: ProtocolTimeRange = '30d') =>
 			['protocolAnalytics', 'data', range] as const,
 	},
+	keyLeaderboard: {
+		all: () => ['analytics', 'keys', 'leaderboard'] as const,
+		byMetric: (metric: LeaderboardMetric = 'volume') =>
+			['analytics', 'keys', 'leaderboard', metric] as const,
+	},
 	creatorRevenue: {
 		all: () => ['creatorRevenue'] as const,
 		summary: (creatorId: string) =>

src/pages/DiscoveryPage.tsx

@@ -1,5 +1,5 @@
 import { Link } from 'react-router';
-import { ArrowRight, RefreshCw, Flame, Sparkles, Layers } from 'lucide-react';
+import { ArrowRight, RefreshCw, Flame, Sparkles, Layers, Trophy } from 'lucide-react';
 import { useDocumentTitle } from '@/hooks/useDocumentTitle';
 import { useNavigationTiming } from '@/hooks/useNavigationTiming';
 import { useKeyDiscovery } from '@/hooks/useKeyDiscovery';
@@ -110,6 +110,15 @@ export default function DiscoveryPage() {
 								</span>
 							)}
 						</Button>
+
+						<Link
+							to="/discovery/leaderboard"
+							data-testid="discovery-leaderboard-link"
+							className="inline-flex h-7 items-center rounded-full border border-amber-400/30 bg-amber-400/10 px-3 text-[0.72rem] font-bold text-amber-300 transition-colors hover:border-amber-400/50 hover:bg-amber-400/20"
+						>
+							<Trophy className="mr-1.5 size-3.5" aria-hidden="true" />
+							Leaderboard
+						</Link>
 					</div>
 				</MarketplaceSection>