From b3edd572f961538f9f16a45310fe69c7663b8b77 Mon Sep 17 00:00:00 2001
From: ibrahimmujidah1-stack
 <296183415+ibrahimmujidah1-stack@users.noreply.github.com>
Date: Tue, 20 Oct 2026 22:59:23 +0100
Subject: [PATCH] feat(discovery): implement key discovery leaderboard page
 (#1206)

- Add LeaderboardMetric, KeyLeaderboardEntry types and normalizer
- Add getKeyDiscoveryLeaderboard to analyticsService with fallback mock data
- Add keyLeaderboardService and useKeyDiscoveryLeaderboard React Query hook
- Create KeyDiscoveryLeaderboardPage with Volume, Holders, Reputation Score metric tabs
- Add real-time search filtering by key name and creator
- Add rank badges, metric value formatting, and 24h change indicators with positive/negative styling
- Add connected wallet creator key highlighting
- Register /discovery/leaderboard route and link from DiscoveryPage
- Add comprehensive integration and service tests
---
 src/hooks/useKeyDiscoveryLeaderboard.ts       |  29 +
 src/lib/queryKeys.ts                          |  10 +-
 src/pages/DiscoveryPage.tsx                   |  11 +-
 src/pages/KeyDiscoveryLeaderboardPage.tsx     | 518 ++++++++++++++++++
 .../KeyDiscoveryLeaderboardPage.test.tsx      | 241 ++++++++
 src/routes.tsx                                |   9 +
 .../__tests__/keyLeaderboard.service.test.ts  | 125 +++++
 src/services/analytics.service.ts             | 248 +++++++++
 src/services/keyLeaderboard.service.ts        |  24 +
 9 files changed, 1213 insertions(+), 2 deletions(-)
 create mode 100644 src/hooks/useKeyDiscoveryLeaderboard.ts
 create mode 100644 src/pages/KeyDiscoveryLeaderboardPage.tsx
 create mode 100644 src/pages/__tests__/KeyDiscoveryLeaderboardPage.test.tsx
 create mode 100644 src/services/__tests__/keyLeaderboard.service.test.ts
 create mode 100644 src/services/keyLeaderboard.service.ts

diff --git a/src/hooks/useKeyDiscoveryLeaderboard.ts b/src/hooks/useKeyDiscoveryLeaderboard.ts
new file mode 100644
index 00000000..33a98e8c
--- /dev/null
+++ b/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,
+	});
+}
diff --git a/src/lib/queryKeys.ts b/src/lib/queryKeys.ts
index 35e74288..3473c9d0 100644
--- a/src/lib/queryKeys.ts
+++ b/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) =>
diff --git a/src/pages/DiscoveryPage.tsx b/src/pages/DiscoveryPage.tsx
index b1c5219a..8ebc1a80 100644
--- a/src/pages/DiscoveryPage.tsx
+++ b/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>
 
diff --git a/src/pages/KeyDiscoveryLeaderboardPage.tsx b/src/pages/KeyDiscoveryLeaderboardPage.tsx
new file mode 100644
index 00000000..fa0b46db
--- /dev/null
+++ b/src/pages/KeyDiscoveryLeaderboardPage.tsx
@@ -0,0 +1,518 @@
+import { useMemo, useState } from 'react';
+import { Link, useSearchParams } from 'react-router';
+import { useAccount } from 'wagmi';
+import {
+	BarChart3,
+	Users,
+	Award,
+	Search,
+	X,
+	ArrowLeft,
+	RefreshCw,
+	Sparkles,
+	Trophy,
+	UserCheck,
+} from 'lucide-react';
+import { useDocumentTitle } from '@/hooks/useDocumentTitle';
+import { useNavigationTiming } from '@/hooks/useNavigationTiming';
+import { useKeyDiscoveryLeaderboard } from '@/hooks/useKeyDiscoveryLeaderboard';
+import type { LeaderboardMetric } from '@/services/analytics.service';
+import CreatorInitialsAvatar from '@/components/common/CreatorInitialsAvatar';
+import Change24hBadge from '@/components/common/Change24hBadge';
+import EmptyState from '@/components/common/EmptyState';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import {
+	formatHolderCount,
+	formatNumber,
+	formatXlmPrice,
+} from '@/utils/numberFormat.utils';
+import { cn } from '@/lib/utils';
+
+const METRIC_TABS: Array<{
+	id: LeaderboardMetric;
+	label: string;
+	description: string;
+	icon: typeof BarChart3;
+}> = [
+	{
+		id: 'volume',
+		label: 'Volume',
+		description: 'Ranked by 24-hour trading volume in XLM',
+		icon: BarChart3,
+	},
+	{
+		id: 'holders',
+		label: 'Holders',
+		description: 'Ranked by total unique creator key holders',
+		icon: Users,
+	},
+	{
+		id: 'reputation',
+		label: 'Reputation Score',
+		description: 'Ranked by community trust & reliability score',
+		icon: Award,
+	},
+];
+
+function isValidMetric(metric: string | null): metric is LeaderboardMetric {
+	return metric === 'volume' || metric === 'holders' || metric === 'reputation';
+}
+
+function truncateAddress(address: string): string {
+	if (!address) return '';
+	if (address.length <= 12) return address;
+	return `${address.slice(0, 6)}...${address.slice(-4)}`;
+}
+
+function formatMetricValue(
+	value: number,
+	metric: LeaderboardMetric
+): string {
+	switch (metric) {
+		case 'volume':
+			return formatXlmPrice(value);
+		case 'holders':
+			return `${formatHolderCount(value)} holders`;
+		case 'reputation':
+			return `${formatNumber(value, { minimumFractionDigits: 1, maximumFractionDigits: 1 })} / 100`;
+		default:
+			return formatNumber(value);
+	}
+}
+
+function RankBadge({ rank }: { rank: number }) {
+	if (rank === 1) {
+		return (
+			<span
+				data-testid={`rank-badge-${rank}`}
+				className="inline-flex size-7 items-center justify-center rounded-full border border-amber-400/50 bg-amber-400/20 text-xs font-black text-amber-300 shadow-sm shadow-amber-500/20"
+				title="Rank 1"
+			>
+				<Trophy className="size-3.5" aria-hidden="true" />
+				<span className="sr-only">Rank 1</span>
+			</span>
+		);
+	}
+	if (rank === 2) {
+		return (
+			<span
+				data-testid={`rank-badge-${rank}`}
+				className="inline-flex size-7 items-center justify-center rounded-full border border-slate-300/40 bg-slate-300/20 text-xs font-black text-slate-200"
+				title="Rank 2"
+			>
+				2
+			</span>
+		);
+	}
+	if (rank === 3) {
+		return (
+			<span
+				data-testid={`rank-badge-${rank}`}
+				className="inline-flex size-7 items-center justify-center rounded-full border border-amber-600/40 bg-amber-700/20 text-xs font-black text-amber-400"
+				title="Rank 3"
+			>
+				3
+			</span>
+		);
+	}
+	return (
+		<span
+			data-testid={`rank-badge-${rank}`}
+			className="inline-flex size-7 items-center justify-center font-mono text-xs font-semibold tabular-nums text-white/50"
+		>
+			{rank}
+		</span>
+	);
+}
+
+function LeaderboardSkeletonRow() {
+	return (
+		<div className="flex items-center gap-4 border-b border-white/5 px-5 py-4 last:border-b-0">
+			<div className="size-7 shrink-0 rounded-full bg-white/10 skeleton-shimmer" />
+			<div className="flex min-w-0 flex-1 items-center gap-3">
+				<div className="size-10 shrink-0 rounded-full bg-white/10 skeleton-shimmer" />
+				<div className="space-y-2">
+					<div className="h-4 w-32 rounded bg-white/10 skeleton-shimmer" />
+					<div className="h-3 w-20 rounded bg-white/5 skeleton-shimmer" />
+				</div>
+			</div>
+			<div className="hidden w-36 shrink-0 sm:block">
+				<div className="h-4 w-24 rounded bg-white/10 skeleton-shimmer" />
+			</div>
+			<div className="w-28 shrink-0 text-right">
+				<div className="ml-auto h-4 w-20 rounded bg-white/10 skeleton-shimmer" />
+			</div>
+			<div className="w-24 shrink-0 text-right">
+				<div className="ml-auto h-5 w-16 rounded-full bg-white/10 skeleton-shimmer" />
+			</div>
+		</div>
+	);
+}
+
+/**
+ * Key Discovery Leaderboard Page (#1206).
+ *
+ * Scope:
+ * - Metric tabs: Volume, Holders, Reputation Score
+ * - Top 50 keys ranked with position, key name, creator, metric value, and 24h change
+ * - Connected wallet's created keys highlighted in list if present
+ * - Search bar to find specific key in leaderboard
+ * - Data fetched from GET /analytics/keys/leaderboard?metric=X API
+ */
+export default function KeyDiscoveryLeaderboardPage() {
+	useNavigationTiming('key-discovery-leaderboard');
+	useDocumentTitle('Key Discovery Leaderboard — AccessLayer');
+
+	const [searchParams, setSearchParams] = useSearchParams();
+	const requestedMetric = searchParams.get('metric');
+	const activeMetric: LeaderboardMetric = isValidMetric(requestedMetric)
+		? requestedMetric
+		: 'volume';
+
+	const [searchQuery, setSearchQuery] = useState('');
+	const { address: connectedAddress } = useAccount();
+
+	const {
+		data: keys = [],
+		isLoading,
+		isFetching,
+		error,
+		refetch,
+	} = useKeyDiscoveryLeaderboard(activeMetric);
+
+	const handleMetricChange = (metric: LeaderboardMetric) => {
+		setSearchParams(
+			prev => {
+				const next = new URLSearchParams(prev);
+				next.set('metric', metric);
+				return next;
+			},
+			{ replace: true }
+		);
+	};
+
+	// Filter top 50 results based on search query
+	const filteredKeys = useMemo(() => {
+		const normalizedQuery = searchQuery.trim().toLowerCase();
+		if (!normalizedQuery) {
+			return keys;
+		}
+		return keys.filter(item => {
+			const nameMatch = item.name.toLowerCase().includes(normalizedQuery);
+			const symbolMatch = item.symbol?.toLowerCase().includes(normalizedQuery);
+			const creatorNameMatch = item.creator.name
+				?.toLowerCase()
+				.includes(normalizedQuery);
+			const creatorAddressMatch = item.creator.address
+				.toLowerCase()
+				.includes(normalizedQuery);
+			return nameMatch || symbolMatch || creatorNameMatch || creatorAddressMatch;
+		});
+	}, [keys, searchQuery]);
+
+	const activeTabMeta =
+		METRIC_TABS.find(tab => tab.id === activeMetric) ?? METRIC_TABS[0];
+	const hasError = Boolean(error && keys.length === 0);
+
+	return (
+		<div className="relative min-h-screen overflow-x-hidden bg-[linear-gradient(160deg,#08111f_0%,#10213b_45%,#f0b14d_160%)] px-4 pt-12 pb-28 sm:px-6 md:px-12 md:pb-16">
+			{/* Ambient glows */}
+			<div className="pointer-events-none absolute left-[-4rem] top-[8%] size-80 rounded-full bg-amber-400/15 blur-[120px]" />
+			<div className="pointer-events-none absolute bottom-[12%] right-[-4rem] size-80 rounded-full bg-emerald-400/10 blur-[120px]" />
+			<div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_top,rgba(255,186,73,0.08),transparent_40%)]" />
+
+			<div className="relative z-10 mx-auto max-w-6xl">
+				{/* Top Navigation */}
+				<div className="mb-6 flex items-center justify-between">
+					<Link
+						to="/discovery"
+						className="inline-flex items-center gap-1.5 font-mono text-xs uppercase tracking-wider text-white/60 transition-colors hover:text-white"
+					>
+						<ArrowLeft className="size-3.5" aria-hidden="true" />
+						Back to Discovery
+					</Link>
+
+					<span
+						role="status"
+						aria-live="polite"
+						aria-busy={isFetching || undefined}
+						data-testid="leaderboard-refresh-status"
+						className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-slate-900/40 px-3.5 py-1 text-[0.68rem] font-bold uppercase tracking-wider text-white/70 backdrop-blur-md"
+					>
+						{isFetching && !isLoading ? (
+							<RefreshCw
+								className="size-3 animate-spin text-amber-400 motion-reduce:animate-none"
+								aria-hidden="true"
+							/>
+						) : (
+							<span
+								className="size-1.5 animate-pulse rounded-full bg-emerald-400"
+								aria-hidden="true"
+							/>
+						)}
+						{isFetching && !isLoading ? 'Refreshing…' : 'Live analytics'}
+					</span>
+				</div>
+
+				{/* Page Header */}
+				<header className="mb-8 text-center sm:text-left">
+					<div className="inline-flex items-center gap-2 rounded-full border border-amber-400/30 bg-amber-400/10 px-3 py-1 text-xs font-bold uppercase tracking-wider text-amber-300">
+						<Sparkles className="size-3.5" aria-hidden="true" />
+						Platform Discovery
+					</div>
+					<h1 className="mt-3 font-grotesque text-3xl font-extrabold tracking-tight text-white sm:text-4xl md:text-5xl">
+						Top Performing Creator Keys
+					</h1>
+					<p className="mt-2 max-w-2xl font-jakarta text-sm leading-relaxed text-white/60">
+						Explore the top 50 ranked creator keys across the platform. Switch between
+						trading volume, holder distribution, and reputation score to discover high-momentum opportunities.
+					</p>
+				</header>
+
+				{/* Controls Bar: Metric Tabs & Search */}
+				<div className="mb-6 flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+					{/* Metric Tabs */}
+					<div
+						role="tablist"
+						aria-label="Leaderboard metrics"
+						className="inline-flex rounded-xl border border-white/10 bg-slate-900/60 p-1 backdrop-blur-md"
+					>
+						{METRIC_TABS.map(tab => {
+							const Icon = tab.icon;
+							const isSelected = activeMetric === tab.id;
+							return (
+								<button
+									key={tab.id}
+									type="button"
+									role="tab"
+									id={`metric-tab-${tab.id}`}
+									aria-selected={isSelected}
+									aria-controls="leaderboard-panel"
+									data-testid={`tab-${tab.id}`}
+									onClick={() => handleMetricChange(tab.id)}
+									className={cn(
+										'inline-flex items-center gap-2 rounded-lg px-4 py-2 text-xs font-bold tracking-wide transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-amber-400',
+										isSelected
+											? 'bg-amber-400 text-slate-950 shadow-md font-extrabold'
+											: 'text-white/60 hover:bg-white/5 hover:text-white'
+									)}
+								>
+									<Icon className="size-3.5" aria-hidden="true" />
+									<span>{tab.label}</span>
+								</button>
+							);
+						})}
+					</div>
+
+					{/* Search input */}
+					<div className="relative w-full sm:w-80">
+						<Search
+							className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-white/40"
+							aria-hidden="true"
+						/>
+						<Input
+							type="text"
+							value={searchQuery}
+							onChange={e => setSearchQuery(e.target.value)}
+							placeholder="Search by key or creator..."
+							data-testid="leaderboard-search-input"
+							aria-label="Search keys in leaderboard"
+							className="h-10 rounded-xl border-white/10 bg-slate-900/60 pl-9 pr-9 text-xs text-white placeholder:text-white/40 backdrop-blur-md focus:border-amber-400/50 focus:ring-amber-400/20"
+						/>
+						{searchQuery && (
+							<button
+								type="button"
+								onClick={() => setSearchQuery('')}
+								data-testid="clear-search-button"
+								aria-label="Clear search"
+								className="absolute right-3 top-1/2 -translate-y-1/2 rounded-full p-0.5 text-white/40 transition-colors hover:text-white"
+							>
+								<X className="size-3.5" aria-hidden="true" />
+							</button>
+						)}
+					</div>
+				</div>
+
+				{/* Active Metric Subtitle & Count */}
+				<div className="mb-4 flex flex-wrap items-center justify-between gap-2 px-1 text-xs text-white/50 font-jakarta">
+					<span>{activeTabMeta.description}</span>
+					<span>
+						{searchQuery
+							? `Showing ${filteredKeys.length} of ${keys.length} keys`
+							: `Top ${keys.length} keys`}
+					</span>
+				</div>
+
+				{/* Main Content Card */}
+				<div
+					id="leaderboard-panel"
+					role="tabpanel"
+					aria-labelledby={`metric-tab-${activeMetric}`}
+					className="overflow-hidden rounded-2xl border border-white/10 bg-slate-900/60 backdrop-blur-md shadow-2xl"
+				>
+					{hasError ? (
+						<EmptyState
+							title="Couldn't load discovery leaderboard"
+							description="We couldn't retrieve the latest key ranking metrics. Please check your connection and try again."
+							cta={{ label: 'Try again', onClick: () => void refetch() }}
+							className="p-12 text-center"
+						/>
+					) : (
+						<>
+							{/* Table Header */}
+							<div
+								aria-hidden="true"
+								className="flex items-center gap-4 border-b border-white/10 bg-white/[0.02] px-5 py-3 text-[11px] font-bold uppercase tracking-wider text-white/40"
+							>
+								<span className="w-7 shrink-0 text-center">#</span>
+								<span className="min-w-0 flex-1">Creator Key</span>
+								<span className="hidden w-36 shrink-0 sm:block">Creator</span>
+								<span className="w-28 shrink-0 text-right">{activeTabMeta.label}</span>
+								<span className="w-24 shrink-0 text-right">24h Change</span>
+							</div>
+
+							{/* Loading State */}
+							{isLoading ? (
+								<div data-testid="leaderboard-loading-skeleton">
+									{Array.from({ length: 10 }).map((_, index) => (
+										<LeaderboardSkeletonRow key={index} />
+									))}
+								</div>
+							) : filteredKeys.length === 0 ? (
+								/* Empty Search State */
+								<div
+									data-testid="leaderboard-empty-search"
+									className="flex flex-col items-center justify-center p-12 text-center"
+								>
+									<div className="mb-3 rounded-full border border-white/10 bg-white/5 p-3 text-white/40">
+										<Search className="size-6" aria-hidden="true" />
+									</div>
+									<h2 className="font-grotesque text-lg font-bold text-white">
+										No creator keys found
+									</h2>
+									<p className="mt-1 max-w-sm text-xs text-white/50">
+										{searchQuery
+											? `No keys or creators matched "${searchQuery}". Try a different keyword.`
+											: 'No leaderboard entries are currently available for this metric.'}
+									</p>
+									{searchQuery && (
+										<Button
+											variant="outline"
+											size="sm"
+											onClick={() => setSearchQuery('')}
+											className="mt-4 rounded-xl border-white/15 bg-white/5 text-xs text-white hover:bg-white/10"
+										>
+											Clear search
+										</Button>
+									)}
+								</div>
+							) : (
+								/* Key Rows */
+								<div
+									data-testid="leaderboard-rows-container"
+									className="divide-y divide-white/5"
+								>
+									{filteredKeys.map(entry => {
+										const isOwnKey = Boolean(
+											connectedAddress &&
+												entry.creator.address &&
+												connectedAddress.toLowerCase() ===
+													entry.creator.address.toLowerCase()
+										);
+
+										const creatorDisplayName =
+											entry.creator.name || truncateAddress(entry.creator.address);
+
+										return (
+											<div
+												key={entry.id}
+												data-testid={`leaderboard-row-${entry.rank}`}
+												className={cn(
+													'group flex items-center gap-4 px-5 py-3.5 transition-colors duration-150',
+													isOwnKey
+														? 'bg-amber-400/10 border-l-4 border-l-amber-400 hover:bg-amber-400/15'
+														: 'hover:bg-white/[0.04]'
+												)}
+											>
+												{/* Rank Column */}
+												<div className="flex w-7 shrink-0 items-center justify-center">
+													<RankBadge rank={entry.rank} />
+												</div>
+
+												{/* Key Name & Avatar Column */}
+												<div className="flex min-w-0 flex-1 items-center gap-3">
+													<div className="size-10 shrink-0 overflow-hidden rounded-full border border-white/15 bg-slate-800 shadow-sm">
+														<CreatorInitialsAvatar
+															name={entry.name}
+															creatorId={entry.id}
+															imageSrc={entry.thumbnail}
+															className="size-full text-xs font-bold"
+														/>
+													</div>
+													<div className="min-w-0 flex-1">
+														<div className="flex items-center gap-2">
+															<Link
+																to={`/creator/${entry.id}`}
+																className="truncate font-jakarta text-sm font-bold text-white transition-colors hover:text-amber-400"
+															>
+																{entry.name}
+															</Link>
+															{entry.symbol && (
+																<span className="hidden font-mono text-[10px] font-semibold uppercase text-white/40 sm:inline">
+																	${entry.symbol}
+																</span>
+															)}
+															{isOwnKey && (
+																<span
+																	data-testid="own-key-badge"
+																	className="inline-flex items-center gap-1 rounded-full border border-amber-400/40 bg-amber-400/20 px-2 py-0.5 text-[0.62rem] font-extrabold uppercase tracking-wide text-amber-300"
+																>
+																	<UserCheck className="size-2.5" aria-hidden="true" />
+																	Your Key
+																</span>
+															)}
+														</div>
+														<div className="mt-0.5 flex items-center gap-2 text-xs text-white/50 sm:hidden">
+															<span>{creatorDisplayName}</span>
+														</div>
+													</div>
+												</div>
+
+												{/* Creator Column (Desktop) */}
+												<div className="hidden w-36 shrink-0 sm:block">
+													<Link
+														to={`/creator/${entry.creator.address}/profile`}
+														className="truncate font-jakarta text-xs text-white/70 transition-colors hover:text-white"
+														title={entry.creator.address}
+													>
+														{creatorDisplayName}
+													</Link>
+												</div>
+
+												{/* Metric Value Column */}
+												<div className="w-28 shrink-0 text-right font-mono text-xs font-semibold tabular-nums text-white">
+													<span data-testid={`metric-value-${entry.rank}`}>
+														{formatMetricValue(entry.metricValue, activeMetric)}
+													</span>
+												</div>
+
+												{/* 24h Change Column */}
+												<div className="flex w-24 shrink-0 items-center justify-end">
+													<Change24hBadge
+														change={entry.change24h}
+														className="text-xs"
+													/>
+												</div>
+											</div>
+										);
+									})}
+								</div>
+							)}
+						</>
+					)}
+				</div>
+			</div>
+		</div>
+	);
+}
diff --git a/src/pages/__tests__/KeyDiscoveryLeaderboardPage.test.tsx b/src/pages/__tests__/KeyDiscoveryLeaderboardPage.test.tsx
new file mode 100644
index 00000000..ac3fa454
--- /dev/null
+++ b/src/pages/__tests__/KeyDiscoveryLeaderboardPage.test.tsx
@@ -0,0 +1,241 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { MemoryRouter } from 'react-router';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import KeyDiscoveryLeaderboardPage from '../KeyDiscoveryLeaderboardPage';
+import { analyticsService } from '@/services/analytics.service';
+import type { KeyLeaderboardEntry } from '@/services/analytics.service';
+
+const mockUseAccount = vi.fn();
+vi.mock('wagmi', () => ({
+	useAccount: () => mockUseAccount(),
+}));
+
+vi.mock('@/services/analytics.service', async importOriginal => {
+	const actual = await importOriginal<typeof import('@/services/analytics.service')>();
+	return {
+		...actual,
+		analyticsService: {
+			...actual.analyticsService,
+			getKeyDiscoveryLeaderboard: vi.fn(),
+		},
+	};
+});
+
+const MOCK_VOLUME_KEYS: KeyLeaderboardEntry[] = [
+	{
+		rank: 1,
+		id: 'key-1',
+		name: 'Apex Trader',
+		symbol: 'APEX',
+		creator: { address: '0xMYWALLET123', name: 'My Creator' },
+		metricValue: 125000,
+		change24h: 14.5,
+		price: 45.0,
+	},
+	{
+		rank: 2,
+		id: 'key-2',
+		name: 'Stellar Nexus',
+		symbol: 'NEXUS',
+		creator: { address: 'GBPL7QW411912C', name: 'Nexus Studio' },
+		metricValue: 88000,
+		change24h: -3.2,
+		price: 28.5,
+	},
+	{
+		rank: 3,
+		id: 'key-3',
+		name: 'CyberPulse',
+		symbol: 'CPULSE',
+		creator: { address: 'GCKV8994MM332X', name: 'Cyber Labs' },
+		metricValue: 54000,
+		change24h: 0.0,
+		price: 12.0,
+	},
+];
+
+const MOCK_HOLDERS_KEYS: KeyLeaderboardEntry[] = [
+	{
+		rank: 1,
+		id: 'key-2',
+		name: 'Stellar Nexus',
+		symbol: 'NEXUS',
+		creator: { address: 'GBPL7QW411912C', name: 'Nexus Studio' },
+		metricValue: 5200,
+		change24h: 4.8,
+		price: 28.5,
+	},
+	{
+		rank: 2,
+		id: 'key-1',
+		name: 'Apex Trader',
+		symbol: 'APEX',
+		creator: { address: '0xMYWALLET123', name: 'My Creator' },
+		metricValue: 3100,
+		change24h: -1.2,
+		price: 45.0,
+	},
+];
+
+const MOCK_REPUTATION_KEYS: KeyLeaderboardEntry[] = [
+	{
+		rank: 1,
+		id: 'key-3',
+		name: 'CyberPulse',
+		symbol: 'CPULSE',
+		creator: { address: 'GCKV8994MM332X', name: 'Cyber Labs' },
+		metricValue: 98.6,
+		change24h: 6.2,
+		price: 12.0,
+	},
+	{
+		rank: 2,
+		id: 'key-1',
+		name: 'Apex Trader',
+		symbol: 'APEX',
+		creator: { address: '0xMYWALLET123', name: 'My Creator' },
+		metricValue: 92.4,
+		change24h: 0.0,
+		price: 45.0,
+	},
+];
+
+function renderPage(initialPath = '/discovery/leaderboard') {
+	const queryClient = new QueryClient({
+		defaultOptions: { queries: { retry: false } },
+	});
+	return render(
+		<MemoryRouter initialEntries={[initialPath]}>
+			<QueryClientProvider client={queryClient}>
+				<KeyDiscoveryLeaderboardPage />
+			</QueryClientProvider>
+		</MemoryRouter>
+	);
+}
+
+describe('KeyDiscoveryLeaderboardPage (#1206)', () => {
+	beforeEach(() => {
+		vi.clearAllMocks();
+		mockUseAccount.mockReturnValue({
+			address: undefined,
+			isConnected: false,
+		});
+		vi.mocked(analyticsService.getKeyDiscoveryLeaderboard).mockImplementation(
+			async (metric = 'volume') => {
+				if (metric === 'holders') return MOCK_HOLDERS_KEYS;
+				if (metric === 'reputation') return MOCK_REPUTATION_KEYS;
+				return MOCK_VOLUME_KEYS;
+			}
+		);
+	});
+
+	it('renders correct ranked list for volume metric by default', async () => {
+		renderPage();
+
+		expect(
+			screen.getByRole('heading', { name: /Top Performing Creator Keys/i })
+		).toBeInTheDocument();
+
+		await waitFor(() => {
+			expect(screen.getByText('Apex Trader')).toBeInTheDocument();
+			expect(screen.getByText('Stellar Nexus')).toBeInTheDocument();
+			expect(screen.getByText('CyberPulse')).toBeInTheDocument();
+		});
+
+		// Check metric formatted value for volume
+		expect(screen.getByTestId('metric-value-1')).toHaveTextContent(/125000\.00 XLM/i);
+		expect(screen.getByTestId('metric-value-2')).toHaveTextContent(/88000\.00 XLM/i);
+	});
+
+	it('displays 24h change with correct positive, negative, and neutral formatting', async () => {
+		renderPage();
+
+		await waitFor(() => {
+			expect(screen.getByText('Apex Trader')).toBeInTheDocument();
+		});
+
+		// Positive change has + sign
+		expect(screen.getByText('+14.5%')).toBeInTheDocument();
+		// Negative change has - sign
+		expect(screen.getByText('-3.2%')).toBeInTheDocument();
+		// Neutral change is 0.0% / 0%
+		expect(screen.getByText(/0(\.0)?%/)).toBeInTheDocument();
+	});
+
+	it('highlights connected wallet creator own keys correctly', async () => {
+		mockUseAccount.mockReturnValue({
+			address: '0xMYWALLET123',
+			isConnected: true,
+		});
+
+		renderPage();
+
+		await waitFor(() => {
+			expect(screen.getByText('Apex Trader')).toBeInTheDocument();
+		});
+
+		const ownKeyBadge = screen.getByTestId('own-key-badge');
+		expect(ownKeyBadge).toBeInTheDocument();
+		expect(ownKeyBadge).toHaveTextContent(/Your Key/i);
+	});
+
+	it('search correctly filters visible results by key name and creator', async () => {
+		const user = userEvent.setup();
+		renderPage();
+
+		await waitFor(() => {
+			expect(screen.getByText('Apex Trader')).toBeInTheDocument();
+			expect(screen.getByText('Stellar Nexus')).toBeInTheDocument();
+		});
+
+		const searchInput = screen.getByTestId('leaderboard-search-input');
+		await user.type(searchInput, 'Stellar');
+
+		expect(screen.getByText('Stellar Nexus')).toBeInTheDocument();
+		expect(screen.queryByText('Apex Trader')).not.toBeInTheDocument();
+		expect(screen.queryByText('CyberPulse')).not.toBeInTheDocument();
+
+		// Displays empty state when search finds no matches
+		await user.clear(searchInput);
+		await user.type(searchInput, 'NonExistentKeyxyz');
+
+		expect(screen.getByTestId('leaderboard-empty-search')).toBeInTheDocument();
+		expect(screen.getByText(/No creator keys found/i)).toBeInTheDocument();
+
+		// Clicking clear search resets the search
+		const clearButton = screen.getByTestId('clear-search-button');
+		await user.click(clearButton);
+
+		expect(screen.getByText('Apex Trader')).toBeInTheDocument();
+	});
+
+	it('metric tab switch correctly refetches and re-renders for all three metrics', async () => {
+		const user = userEvent.setup();
+		renderPage();
+
+		await waitFor(() => {
+			expect(screen.getByText('Apex Trader')).toBeInTheDocument();
+		});
+		expect(analyticsService.getKeyDiscoveryLeaderboard).toHaveBeenCalledWith('volume');
+
+		// Switch to Holders tab
+		const holdersTab = screen.getByTestId('tab-holders');
+		await user.click(holdersTab);
+
+		await waitFor(() => {
+			expect(analyticsService.getKeyDiscoveryLeaderboard).toHaveBeenCalledWith('holders');
+			expect(screen.getByText(/5\.2K holders|5,200 holders/i)).toBeInTheDocument();
+		});
+
+		// Switch to Reputation Score tab
+		const reputationTab = screen.getByTestId('tab-reputation');
+		await user.click(reputationTab);
+
+		await waitFor(() => {
+			expect(analyticsService.getKeyDiscoveryLeaderboard).toHaveBeenCalledWith('reputation');
+			expect(screen.getByText(/98\.6 \/ 100/i)).toBeInTheDocument();
+		});
+	});
+});
diff --git a/src/routes.tsx b/src/routes.tsx
index 145b0155..cf07467a 100644
--- a/src/routes.tsx
+++ b/src/routes.tsx
@@ -33,6 +33,7 @@ import BundlesPage from './pages/BundlesPage';
 import BundleDetailPage from './pages/BundleDetailPage';
 import SearchResultsPage from './pages/SearchResultsPage';
 import KeyDiscoveryFeedPage from './pages/KeyDiscoveryFeedPage';
+import KeyDiscoveryLeaderboardPage from './pages/KeyDiscoveryLeaderboardPage';
 import WalletPortfolioPage from './pages/WalletPortfolioPage';
 import CampaignsPage from './pages/CampaignsPage';
 import AutoInvestDashboardPage from './pages/AutoInvestDashboardPage';
@@ -89,6 +90,14 @@ export const routes = [
 				path: '/campaigns',
 				element: <CampaignsPage />,
 			},
+			{
+				// Key discovery leaderboard ranking top performing keys (#1206).
+				path: '/discovery/leaderboard',
+				element: withRouteErrorBoundary(
+					<KeyDiscoveryLeaderboardPage />,
+					'Key discovery leaderboard'
+				),
+			},
 			{
 				path: '/leaderboard',
 				element: <LeaderboardPage />,
diff --git a/src/services/__tests__/keyLeaderboard.service.test.ts b/src/services/__tests__/keyLeaderboard.service.test.ts
new file mode 100644
index 00000000..032a4644
--- /dev/null
+++ b/src/services/__tests__/keyLeaderboard.service.test.ts
@@ -0,0 +1,125 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import {
+	analyticsService,
+	normalizeKeyLeaderboardEntry,
+} from '../analytics.service';
+import { keyLeaderboardService } from '../keyLeaderboard.service';
+
+describe('Key Discovery Leaderboard Service (#1206)', () => {
+	beforeEach(() => {
+		vi.restoreAllMocks();
+	});
+
+	it('normalizes raw key leaderboard entry correctly', () => {
+		const raw = {
+			rank: 1,
+			id: 'key-123',
+			name: 'Elite Key',
+			symbol: 'ELT',
+			thumbnail: 'https://example.com/avatar.png',
+			creator: {
+				address: 'GCREATOR1234567890',
+				name: 'Alice',
+			},
+			metricValue: 50000,
+			change24h: 12.5,
+			price: 15.2,
+		};
+
+		const normalized = normalizeKeyLeaderboardEntry(raw, 1, 'volume');
+		expect(normalized.id).toBe('key-123');
+		expect(normalized.name).toBe('Elite Key');
+		expect(normalized.symbol).toBe('ELT');
+		expect(normalized.creator.address).toBe('GCREATOR1234567890');
+		expect(normalized.creator.name).toBe('Alice');
+		expect(normalized.metricValue).toBe(50000);
+		expect(normalized.change24h).toBe(12.5);
+		expect(normalized.price).toBe(15.2);
+	});
+
+	it('normalizes alternative field names (e.g. title, volume24h, holderCount, creatorAddress)', () => {
+		const raw = {
+			keyId: 'alt-id',
+			title: 'Alt Key',
+			creatorAddress: 'GCALTADDRESS',
+			creatorName: 'Bob',
+			volume24h: 34000,
+			priceChange24h: -5.4,
+		};
+
+		const normalized = normalizeKeyLeaderboardEntry(raw, 2, 'volume');
+		expect(normalized.id).toBe('alt-id');
+		expect(normalized.name).toBe('Alt Key');
+		expect(normalized.creator.address).toBe('GCALTADDRESS');
+		expect(normalized.creator.name).toBe('Bob');
+		expect(normalized.metricValue).toBe(34000);
+		expect(normalized.change24h).toBe(-5.4);
+	});
+
+	it('fetches leaderboard data via GET /analytics/keys/leaderboard?metric=X', async () => {
+		const mockData = [
+			{
+				rank: 1,
+				id: 'key-1',
+				name: 'Test Key 1',
+				symbol: 'TK1',
+				creator: { address: 'G111', name: 'Creator 1' },
+				metricValue: 100000,
+				change24h: 10.2,
+				price: 5.0,
+			},
+		];
+
+		const apiService = analyticsService as unknown as {
+			api: { get: ReturnType<typeof vi.fn> };
+		};
+		const getSpy = vi.spyOn(apiService.api, 'get').mockResolvedValueOnce({
+			data: {
+				success: true,
+				data: mockData,
+				message: 'OK',
+			},
+		});
+
+		const result = await analyticsService.getKeyDiscoveryLeaderboard('volume');
+		expect(getSpy).toHaveBeenCalledWith('/analytics/keys/leaderboard', {
+			params: { metric: 'volume' },
+		});
+		expect(result).toHaveLength(1);
+		expect(result[0].name).toBe('Test Key 1');
+	});
+
+	it('delegates through keyLeaderboardService', async () => {
+		const spy = vi
+			.spyOn(analyticsService, 'getKeyDiscoveryLeaderboard')
+			.mockResolvedValueOnce([
+				{
+					rank: 1,
+					id: 'key-1',
+					name: 'Key',
+					creator: { address: 'G1' },
+					metricValue: 100,
+					change24h: 5,
+				},
+			]);
+
+		const res = await keyLeaderboardService.getKeyDiscoveryLeaderboard('holders');
+		expect(spy).toHaveBeenCalledWith('holders');
+		expect(res[0].id).toBe('key-1');
+	});
+
+	it('returns 50 fallback mock keys when the API request fails', async () => {
+		const apiService = analyticsService as unknown as {
+			api: { get: ReturnType<typeof vi.fn> };
+		};
+		vi.spyOn(apiService.api, 'get').mockRejectedValueOnce(
+			new Error('Network error')
+		);
+
+		const result = await analyticsService.getKeyDiscoveryLeaderboard('reputation');
+		expect(result).toHaveLength(50);
+		expect(result[0].rank).toBe(1);
+		expect(result[49].rank).toBe(50);
+		expect(result[0].metricValue).toBeGreaterThan(result[49].metricValue);
+	});
+});
diff --git a/src/services/analytics.service.ts b/src/services/analytics.service.ts
index a6da11ca..adc9cb7b 100644
--- a/src/services/analytics.service.ts
+++ b/src/services/analytics.service.ts
@@ -190,6 +190,254 @@ export class AnalyticsService extends BaseApiService {
 			lastUpdated: new Date().toISOString(),
 		};
 	}
+
+	/**
+	 * Fetches platform-wide creator keys leaderboard ranked by volume,
+	 * holder count, or reputation score (#1206).
+	 */
+	async getKeyDiscoveryLeaderboard(
+		metric: LeaderboardMetric = 'volume'
+	): Promise<KeyLeaderboardEntry[]> {
+		try {
+			const response = await this.api.get<
+				APIResponse<Array<RawKeyLeaderboardEntry>>
+			>('/analytics/keys/leaderboard', {
+				params: { metric },
+			});
+			const rawData = response.data.data ?? [];
+			return rawData.map((item, index) =>
+				normalizeKeyLeaderboardEntry(item, index + 1, metric)
+			);
+		} catch {
+			return this.getMockKeyDiscoveryLeaderboard(metric);
+		}
+	}
+
+	/**
+	 * Generates deterministic top 50 ranked keys for the given metric
+	 * when backend is offline or during testing (#1206).
+	 */
+	getMockKeyDiscoveryLeaderboard(
+		metric: LeaderboardMetric = 'volume'
+	): KeyLeaderboardEntry[] {
+		const baseKeys = [
+			{ name: 'Apex Trader', symbol: 'APEX', creator: 'GDKXQ7HNV42...887A', creatorName: 'Apex Alpha' },
+			{ name: 'Stellar Nexus', symbol: 'NEXUS', creator: 'GBPL7QW411...912C', creatorName: 'Nexus Studio' },
+			{ name: 'CyberPulse', symbol: 'CPULSE', creator: 'GCKV8994MM...332X', creatorName: 'Cyber Labs' },
+			{ name: 'Quantum Core', symbol: 'QCORE', creator: 'GAZT1188NN...554B', creatorName: 'Quantum Dao' },
+			{ name: 'Solaria Prime', symbol: 'SLR', creator: 'GDOP5566WW...771Q', creatorName: 'Solaria Guild' },
+			{ name: 'Vanguard Elite', symbol: 'VNG', creator: 'GBKL3344PP...882M', creatorName: 'Vanguard Collective' },
+			{ name: 'Hyperion Alpha', symbol: 'HYP', creator: 'GDRT7788KK...991S', creatorName: 'Hyperion Capital' },
+			{ name: 'Aether Dynamics', symbol: 'AETH', creator: 'GCFF2233JJ...441L', creatorName: 'Aether Team' },
+			{ name: 'MetaNode VIP', symbol: 'NODE', creator: 'GAXX9900HH...112K', creatorName: 'MetaNode' },
+			{ name: 'Nebula Protocol', symbol: 'NBLA', creator: 'GDZZ6677GG...223J', creatorName: 'Nebula DAO' },
+			{ name: 'Chronos Yield', symbol: 'CRN', creator: 'GBMM4455FF...334H', creatorName: 'Chronos Research' },
+			{ name: 'Zenith Matrix', symbol: 'ZNTH', creator: 'GCLL1122DD...445G', creatorName: 'Zenith Labs' },
+			{ name: 'Titan Vault', symbol: 'TITAN', creator: 'GAKK8899SS...556F', creatorName: 'Titan Assets' },
+			{ name: 'Echo Stream', symbol: 'ECHO', creator: 'GDJJ5566AA...667D', creatorName: 'Echo Media' },
+			{ name: 'Orion Velocity', symbol: 'ORION', creator: 'GBHH2233ZZ...778S', creatorName: 'Orion Guild' },
+			{ name: 'Spectra Key', symbol: 'SPEC', creator: 'GCGG9900YY...889A', creatorName: 'Spectra Net' },
+			{ name: 'Vortex Syndicate', symbol: 'VTX', creator: 'GAFF6677XX...990B', creatorName: 'Vortex Org' },
+			{ name: 'Beacon Horizon', symbol: 'BCN', creator: 'GDDD3344WW...001C', creatorName: 'Beacon Hub' },
+			{ name: 'Astra Foundry', symbol: 'ASTRA', creator: 'GBSS0011VV...112D', creatorName: 'Astra Creative' },
+			{ name: 'Eclipse Capital', symbol: 'ECLP', creator: 'GCAA7788UU...223E', creatorName: 'Eclipse Fund' },
+			{ name: 'Fortress Key', symbol: 'FORT', creator: 'GAQQ4455TT...334F', creatorName: 'Fortress Security' },
+			{ name: 'Mirage Ventures', symbol: 'MRG', creator: 'GDWW1122SS...445G', creatorName: 'Mirage Studio' },
+			{ name: 'Solstice Guild', symbol: 'SLST', creator: 'GBEE8899RR...556H', creatorName: 'Solstice Group' },
+			{ name: 'Radiant Edge', symbol: 'RDNT', creator: 'GCRR5566QQ...667J', creatorName: 'Radiant DAO' },
+			{ name: 'Prism Network', symbol: 'PRISM', creator: 'GATT2233PP...778K', creatorName: 'Prism Labs' },
+			{ name: 'Obsidian Pass', symbol: 'OBSD', creator: 'GDYY9900OO...889L', creatorName: 'Obsidian Guild' },
+			{ name: 'Aura Protocol', symbol: 'AURA', creator: 'GBUU6677NN...990M', creatorName: 'Aura Collective' },
+			{ name: 'Equinox Key', symbol: 'EQNX', creator: 'GCII3344MM...001N', creatorName: 'Equinox Capital' },
+			{ name: 'Synergy Alpha', symbol: 'SYN', creator: 'GAOO0011LL...112P', creatorName: 'Synergy Core' },
+			{ name: 'Velocity Run', symbol: 'VELO', creator: 'GDLL7788KK...223Q', creatorName: 'Velocity Sports' },
+			{ name: 'Catalyst Node', symbol: 'CTLY', creator: 'GBKK4455JJ...334R', creatorName: 'Catalyst Hub' },
+			{ name: 'Polaris Vault', symbol: 'PLRS', creator: 'GCJJ1122HH...445S', creatorName: 'Polaris Tech' },
+			{ name: 'Helios DAO', symbol: 'HELI', creator: 'GAHH8899GG...556T', creatorName: 'Helios Creator' },
+			{ name: 'Starlight Key', symbol: 'STR', creator: 'GDGG5566FF...667U', creatorName: 'Starlight Media' },
+			{ name: 'Zenith Forge', symbol: 'ZFRG', creator: 'GBFF2233EE...778V', creatorName: 'Forge Alpha' },
+			{ name: 'Apex Spectrum', symbol: 'ASPC', creator: 'GCEE9900DD...889W', creatorName: 'Spectrum Labs' },
+			{ name: 'Genesis Block', symbol: 'GEN', creator: 'GADD6677CC...990X', creatorName: 'Genesis Hub' },
+			{ name: 'Olympus Peak', symbol: 'OLYM', creator: 'GDCC3344BB...001Y', creatorName: 'Olympus DAO' },
+			{ name: 'Flux Matrix', symbol: 'FLUX', creator: 'GBBB0011AA...112Z', creatorName: 'Flux Labs' },
+			{ name: 'Terra Nova', symbol: 'TRRA', creator: 'GCAA7788ZZ...223A', creatorName: 'Terra Alpha' },
+			{ name: 'Cosmic Drift', symbol: 'COSM', creator: 'GAZZ4455YY...334B', creatorName: 'Cosmic Space' },
+			{ name: 'Pulse Point', symbol: 'PLSE', creator: 'GDYY1122XX...445C', creatorName: 'Pulse Guild' },
+			{ name: 'Aetherial Key', symbol: 'AETHR', creator: 'GBXX8899WW...556D', creatorName: 'Aetherial' },
+			{ name: 'Vanguard Pass', symbol: 'VPASS', creator: 'GCWW5566VV...667E', creatorName: 'Vanguard HQ' },
+			{ name: 'Singularity Key', symbol: 'SING', creator: 'GAVV2233UU...778F', creatorName: 'Singularity DAO' },
+			{ name: 'Infinity Node', symbol: 'INFT', creator: 'GDUU9900TT...889G', creatorName: 'Infinity Studio' },
+			{ name: 'Krypton Alpha', symbol: 'KRP', creator: 'GBTT6677SS...990H', creatorName: 'Krypton Tech' },
+			{ name: 'Oasis Network', symbol: 'OASIS', creator: 'GCSS3344RR...001J', creatorName: 'Oasis Labs' },
+			{ name: 'Nexus Horizon', symbol: 'NXH', creator: 'GARR0011QQ...112K', creatorName: 'Nexus Foundation' },
+			{ name: 'Valence Key', symbol: 'VLNC', creator: 'GDQQ7788PP...223L', creatorName: 'Valence Alpha' },
+		];
+
+		return baseKeys.map((item, index) => {
+			const rank = index + 1;
+			const id = `creator-key-${rank}`;
+			let metricValue = 0;
+
+			if (metric === 'volume') {
+				// 120,000 down to 1,500 XLM
+				metricValue = Math.round(120_000 * Math.pow(0.92, index) + 1500);
+			} else if (metric === 'holders') {
+				// 5,400 down to 42 holders
+				metricValue = Math.round(5_400 * Math.pow(0.91, index) + 42);
+			} else {
+				// Reputation: 99.4 down to 54.0 score
+				metricValue = Math.round((99.4 - index * 0.9) * 10) / 10;
+			}
+
+			// Varied 24h change percentages (positive, negative, flat)
+			const changes = [
+				14.5, -3.2, 28.4, 0.0, -8.7, 12.1, 5.4, -2.1, 19.8, -12.4,
+				7.3, -1.5, 34.2, -6.8, 0.0, 9.4, -4.6, 16.2, 2.1, -15.3,
+				11.8, -7.4, 4.3, 0.0, -3.9, 21.0, -9.1, 6.7, -1.8, 13.5,
+				8.9, -5.2, 0.0, 17.3, -11.0, 3.8, -2.7, 24.6, -6.1, 5.9,
+				10.4, -8.3, 1.2, 0.0, -4.5, 18.7, -13.2, 7.8, -3.4, 9.1
+			];
+			const change24h = changes[index % changes.length];
+			const price = Math.round((45 * Math.pow(0.95, index) + 1.2) * 100) / 100;
+
+			return {
+				rank,
+				id,
+				name: item.name,
+				symbol: item.symbol,
+				thumbnail: `/avatars/key-${(index % 8) + 1}.png`,
+				creator: {
+					address: item.creator,
+					name: item.creatorName,
+				},
+				metricValue,
+				change24h,
+				price,
+			};
+		});
+	}
+}
+
+export type LeaderboardMetric = 'volume' | 'holders' | 'reputation';
+
+export interface KeyLeaderboardCreator {
+	address: string;
+	name?: string;
+	avatarUrl?: string;
+}
+
+export interface KeyLeaderboardEntry {
+	rank: number;
+	id: string;
+	name: string;
+	symbol?: string;
+	thumbnail?: string;
+	creator: KeyLeaderboardCreator;
+	metricValue: number;
+	change24h: number;
+	price?: number;
+}
+
+export interface RawKeyLeaderboardEntry {
+	rank?: number;
+	id?: string;
+	keyId?: string;
+	name?: string;
+	title?: string;
+	symbol?: string;
+	thumbnail?: string;
+	avatarUrl?: string;
+	creator?:
+		| {
+				address?: string;
+				name?: string;
+				avatarUrl?: string;
+		  }
+		| string;
+	creatorAddress?: string;
+	creatorName?: string;
+	creatorAvatar?: string;
+	metricValue?: number | string;
+	value?: number | string;
+	volume?: number | string;
+	volume24h?: number | string;
+	holders?: number | string;
+	holderCount?: number | string;
+	reputation?: number | string;
+	reputationScore?: number | string;
+	change24h?: number | string;
+	priceChange24h?: number | string;
+	price?: number | string;
+	currentPrice?: number | string;
+}
+
+export function normalizeKeyLeaderboardEntry(
+	entry: RawKeyLeaderboardEntry,
+	fallbackRank: number,
+	metric: LeaderboardMetric = 'volume'
+): KeyLeaderboardEntry {
+	const id = entry.id || entry.keyId || `key-${fallbackRank}`;
+	const name = entry.name || entry.title || `Key #${fallbackRank}`;
+	const symbol = entry.symbol;
+	const thumbnail = entry.thumbnail || entry.avatarUrl;
+
+	let creatorAddress = '';
+	let creatorName: string | undefined = entry.creatorName;
+	let creatorAvatar: string | undefined = entry.creatorAvatar;
+
+	if (typeof entry.creator === 'object' && entry.creator !== null) {
+		creatorAddress = entry.creator.address || entry.creatorAddress || '';
+		creatorName = entry.creator.name || creatorName;
+		creatorAvatar = entry.creator.avatarUrl || creatorAvatar;
+	} else if (typeof entry.creator === 'string') {
+		creatorAddress = entry.creator;
+	} else if (entry.creatorAddress) {
+		creatorAddress = entry.creatorAddress;
+	}
+
+	let metricValue = 0;
+	if (metric === 'volume') {
+		metricValue = Number(
+			entry.volume24h ?? entry.volume ?? entry.metricValue ?? entry.value ?? 0
+		);
+	} else if (metric === 'holders') {
+		metricValue = Number(
+			entry.holderCount ?? entry.holders ?? entry.metricValue ?? entry.value ?? 0
+		);
+	} else if (metric === 'reputation') {
+		metricValue = Number(
+			entry.reputationScore ??
+				entry.reputation ??
+				entry.metricValue ??
+				entry.value ??
+				0
+		);
+	}
+
+	const change24h = Number(entry.change24h ?? entry.priceChange24h ?? 0);
+	const price =
+		entry.price !== undefined
+			? Number(entry.price)
+			: entry.currentPrice !== undefined
+				? Number(entry.currentPrice)
+				: undefined;
+
+	return {
+		rank: entry.rank ?? fallbackRank,
+		id,
+		name,
+		symbol,
+		thumbnail,
+		creator: {
+			address: creatorAddress,
+			name: creatorName,
+			avatarUrl: creatorAvatar,
+		},
+		metricValue: Number.isFinite(metricValue) ? metricValue : 0,
+		change24h: Number.isFinite(change24h) ? change24h : 0,
+		price: price !== undefined && Number.isFinite(price) ? price : undefined,
+	};
 }
 
 export const analyticsService = new AnalyticsService();
+
diff --git a/src/services/keyLeaderboard.service.ts b/src/services/keyLeaderboard.service.ts
new file mode 100644
index 00000000..edc0aab1
--- /dev/null
+++ b/src/services/keyLeaderboard.service.ts
@@ -0,0 +1,24 @@
+import {
+	analyticsService,
+	type LeaderboardMetric,
+	type KeyLeaderboardEntry,
+	type KeyLeaderboardCreator,
+	type RawKeyLeaderboardEntry,
+} from './analytics.service';
+
+export type {
+	LeaderboardMetric,
+	KeyLeaderboardEntry,
+	KeyLeaderboardCreator,
+	RawKeyLeaderboardEntry,
+};
+
+export class KeyLeaderboardService {
+	async getKeyDiscoveryLeaderboard(
+		metric: LeaderboardMetric = 'volume'
+	): Promise<KeyLeaderboardEntry[]> {
+		return analyticsService.getKeyDiscoveryLeaderboard(metric);
+	}
+}
+
+export const keyLeaderboardService = new KeyLeaderboardService();