From aec7ac09b05f162a2c8781b99483939c4d4fdb56 Mon Sep 17 00:00:00 2001
From: veloura-dev <ceze72175@gmail.com>
Date: Thu, 3 Sep 2026 23:47:23 +0000
Subject: [PATCH] #777 feat(campaign): Backer leaderboard show top supporters
 on campaign page FIXED

---
 apps/web/package.json                         |   4 +-
 .../(overview)/campaigns/[id]/page.test.tsx   |  99 ++++
 .../app/(overview)/campaigns/[id]/page.tsx    | 112 ++---
 .../web/src/app/(overview)/campaigns/page.tsx |  17 +-
 .../[id]/backers/featured/route.test.ts       | 102 ++++
 .../campaigns/[id]/backers/featured/route.ts  |  99 ++++
 .../api/campaigns/[id]/backers/route.test.ts  | 139 ++++++
 .../app/api/campaigns/[id]/backers/route.ts   | 125 +++++
 .../api/campaigns/success-stories/route.ts    |   1 +
 .../campaign/backers/TopBackers.test.tsx      | 162 ++++++
 .../modules/campaign/backers/TopBackers.tsx   | 296 +++++++++++
 .../campaign/community/BackerCommunity.tsx    |   4 +-
 .../success-stories/SuccessStories.tsx        |  12 +-
 .../src/components/organisms/wallet-modal.tsx |   3 -
 apps/web/src/hooks/use-top-backers.ts         | 133 +++++
 apps/web/src/lib/co2-impact.ts                |  10 +-
 .../services/campaign-backers.service.test.ts | 363 ++++++++++++++
 .../src/services/campaign-backers.service.ts  | 467 ++++++++++++++++++
 apps/web/src/services/certificate.service.ts  |   5 +-
 apps/web/src/types/campaign-backers.ts        | 242 +++++++++
 20 files changed, 2288 insertions(+), 107 deletions(-)
 create mode 100644 apps/web/src/app/(overview)/campaigns/[id]/page.test.tsx
 create mode 100644 apps/web/src/app/api/campaigns/[id]/backers/featured/route.test.ts
 create mode 100644 apps/web/src/app/api/campaigns/[id]/backers/featured/route.ts
 create mode 100644 apps/web/src/app/api/campaigns/[id]/backers/route.test.ts
 create mode 100644 apps/web/src/app/api/campaigns/[id]/backers/route.ts
 create mode 100644 apps/web/src/components/modules/campaign/backers/TopBackers.test.tsx
 create mode 100644 apps/web/src/components/modules/campaign/backers/TopBackers.tsx
 create mode 100644 apps/web/src/hooks/use-top-backers.ts
 create mode 100644 apps/web/src/services/campaign-backers.service.test.ts
 create mode 100644 apps/web/src/services/campaign-backers.service.ts
 create mode 100644 apps/web/src/types/campaign-backers.ts

diff --git a/apps/web/package.json b/apps/web/package.json
index d4e87cda..794c9ddb 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -34,7 +34,7 @@
     "@radix-ui/react-switch": "^1.2.6",
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-tooltip": "^1.2.8",
-    "@stellar/freghter-api": "^6.0.1",
+    "@stellar/freighter-api": "^6.0.1",
     "@stellar/stellar-sdk": "^14.4.3",
     "@tanstack/react-query": "^5.90.20",
     "@tanstack/react-table": "^8.21.3",
@@ -47,7 +47,6 @@
     "framer-motion": "^12.28.1",
     "graphql": "^16.9.0",
     "graphql-yoga": "^5.7.0",
-    "html2canvas": "^1.4.1",
     "ioredis": "^6.0.0",
     "leaflet": "^1.9.4",
     "lucide-react": "^0.562.0",
@@ -69,7 +68,6 @@
     "@playwright/test": "^1.48.0",
     "@tailwindcss/postcss": "^4",
     "@testing-library/react": "^16.3.2",
-    "@types/html2canvas": "^1.2.6",
     "@types/node": "^20",
     "@types/qrcode": "^1.5.5",
     "@types/react": "^19",
diff --git a/apps/web/src/app/(overview)/campaigns/[id]/page.test.tsx b/apps/web/src/app/(overview)/campaigns/[id]/page.test.tsx
new file mode 100644
index 00000000..bca6df92
--- /dev/null
+++ b/apps/web/src/app/(overview)/campaigns/[id]/page.test.tsx
@@ -0,0 +1,99 @@
+import React from "react";
+import { describe, expect, it, vi } from "vitest";
+import { act, fireEvent, render, screen } from "@testing-library/react";
+
+// The page reads its route params with React 19's `use(params)`. jsdom's
+// scheduler never flushes that suspension, so resolve the promise inline for
+// tests — the component code path is otherwise untouched.
+vi.mock("react", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("react")>();
+  return {
+    ...actual,
+    use: (value: unknown) =>
+      value instanceof Promise ? { id: "camp-101" } : (actual as { use: (v: unknown) => unknown }).use(value),
+  };
+});
+
+// Recharts measures its container; jsdom has no layout engine, so stub the
+// observer the charts rely on.
+class ResizeObserverStub {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+}
+vi.stubGlobal("ResizeObserver", ResizeObserverStub);
+
+import CampaignDetailPage from "./page";
+import { TopBackers } from "@/components/modules/campaign/backers/TopBackers";
+import { backersService, DEMO_CAMPAIGN_ID, DEMO_CREATOR_ADDRESS } from "@/services/campaign-backers.service";
+
+const renderPage = () => render(<CampaignDetailPage params={Promise.resolve({ id: DEMO_CAMPAIGN_ID })} />);
+
+const openBackersTab = async () => {
+  const tab = screen.getByRole("tab", { name: /top backers/i });
+  // Radix selects a tab on pointer-down rather than on click.
+  fireEvent.mouseDown(tab);
+  fireEvent.click(tab);
+  await act(async () => {
+    await Promise.resolve();
+  });
+};
+
+describe("Campaign detail page — top backers tab", () => {
+  it("exposes a Top Backers tab that renders the ranked leaderboard", async () => {
+    renderPage();
+    await openBackersTab();
+
+    expect(screen.getByText("Top 10 Backers")).toBeTruthy();
+    expect(screen.getAllByTestId(/^backer-row-/)).toHaveLength(10);
+    // The mock page renders as the campaign creator, who may resolve every
+    // backer, but opted-out backers are still badged so featuring is explained.
+    expect(screen.getByText("Anonymous")).toBeTruthy();
+    expect(screen.getByText(/0\/3 featured/)).toBeTruthy();
+  });
+
+  it("redacts the anonymous backer for everyone but the creator", async () => {
+    renderPage();
+    await openBackersTab();
+
+    // Same campaign, public viewer: identity hidden, rank kept.
+    const publicBoard = backersService.getTopBackers(DEMO_CAMPAIGN_ID, { viewerAddress: "GPUBLIC...PPPP" });
+    expect(publicBoard.backers.map((entry) => entry.displayName)).toContain("Anonymous backer");
+    expect(publicBoard.backers.some((entry) => entry.displayName === "Ken Adeyemi")).toBe(false);
+    expect(publicBoard.privateBackers).toBe(1);
+
+    // ...and a public viewer is told how many backers stay off the board.
+    render(<TopBackers campaignId={DEMO_CAMPAIGN_ID} viewerAddress="GPUBLIC...PPPP" />);
+    expect(screen.getByText(/1 backer keeps their support private/)).toBeTruthy();
+    expect(screen.getByText("Anonymous backer")).toBeTruthy();
+  });
+
+  it("lets the creator feature a backer from the detail page", async () => {
+    renderPage();
+    await openBackersTab();
+
+    // The mock page renders as the campaign creator, so featuring is available.
+    expect(backersService.getCampaignCreator(DEMO_CAMPAIGN_ID)).toBe(DEMO_CREATOR_ADDRESS);
+    const featureButtons = screen.getAllByRole("button", { name: /feature/i });
+    expect(featureButtons.length).toBeGreaterThan(0);
+
+    fireEvent.click(featureButtons[0]);
+    await act(async () => {
+      await Promise.resolve();
+    });
+
+    expect(screen.getByText("Featured")).toBeTruthy();
+    expect(screen.getByText(/1\/3 featured/)).toBeTruthy();
+  });
+
+  it("renders one clean tab list after the merge repair", async () => {
+    renderPage();
+
+    expect(screen.getAllByRole("tablist")).toHaveLength(1);
+    expect(screen.getAllByRole("tab")).toHaveLength(8);
+    // Only the active tab's content is mounted.
+    expect(screen.getByText("Full Campaign Story")).toBeTruthy();
+    // The duplicated insurance-claim modal is gone: exactly one trigger.
+    expect(screen.getAllByRole("button", { name: /submit insurance claim/i })).toHaveLength(1);
+  });
+});
diff --git a/apps/web/src/app/(overview)/campaigns/[id]/page.tsx b/apps/web/src/app/(overview)/campaigns/[id]/page.tsx
index 5a7de5b7..96478f1f 100644
--- a/apps/web/src/app/(overview)/campaigns/[id]/page.tsx
+++ b/apps/web/src/app/(overview)/campaigns/[id]/page.tsx
@@ -11,14 +11,11 @@ import {
   Edit,
   ShieldCheck,
   MessageSquare,
-  Calendar,
-  Share2,
-  Edit,
-  ShieldCheck,
   Trophy,
   BarChart3,
   Globe,
   AlertTriangle,
+  Crown,
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
@@ -30,6 +27,8 @@ import { CampaignQAModeration } from "@/components/modules/campaign/qa/CampaignQ
 import { CampaignSeries } from "@/components/modules/campaign/series/CampaignSeries";
 import { CampaignAnalyticsDashboard } from "@/components/modules/campaign/analytics/CampaignAnalyticsDashboard";
 import { BackerCommunity } from "@/components/modules/campaign/community/BackerCommunity";
+import { TopBackers } from "@/components/modules/campaign/backers/TopBackers";
+import { TOP_BACKERS_LIMIT } from "@/types/campaign-backers";
 import { CampaignFundingVelocityChart } from "@/components/modules/campaign/FundingVelocityChart";
 
 const translations = {
@@ -112,6 +111,12 @@ export default function CampaignDetailPage({ params }: { params: Promise<{ id: s
     treesPlanted: "1,500",
   };
 
+  // The mock detail page renders as the campaign creator, so creator-only
+  // controls (featuring backers, managing community spaces) are exercised.
+  // Replace with the connected wallet address once wallet state is wired here.
+  const viewerAddress = campaign.creator;
+  const isCreatorView = viewerAddress === campaign.creator;
+
   const detectedLang = detectLanguage(campaign.title + campaign.shortDescription + campaign.fullStory);
   const detectedLanguageName = languageNames[detectedLang] ?? detectedLang;
   const [translationLang, setTranslationLang] = useState<TranslationKey | "">("");
@@ -159,7 +164,7 @@ export default function CampaignDetailPage({ params }: { params: Promise<{ id: s
           <div className="w-full max-w-md rounded-xl border border-zinc-700 bg-zinc-900 p-6 space-y-4">
             <div className="flex items-center justify-between">
               <h2 className="text-lg font-bold text-zinc-100">Submit Insurance Claim</h2>
-              <button onClick={() => setShowInsuranceModal(false)} className="text-zinc-400 hover:text-zinc-200 text-xl">×</button>
+              <button type="button" onClick={() => { setShowInsuranceModal(false); setClaimSubmitted(false); }} className="text-zinc-400 hover:text-zinc-200 text-xl">×</button>
             </div>
             {claimSubmitted ? (
               <div className="space-y-2">
@@ -185,7 +190,7 @@ export default function CampaignDetailPage({ params }: { params: Promise<{ id: s
                   />
                 </div>
                 <div className="flex justify-end gap-2">
-                  <Button type="button" variant="outline" size="sm" onClick={() => setShowInsuranceModal(false)}>Cancel</Button>
+                  <Button type="button" variant="outline" size="sm" onClick={() => { setShowInsuranceModal(false); setClaimSubmitted(false); }}>Cancel</Button>
                   <Button type="submit" size="sm" className="bg-amber-600 text-white hover:bg-amber-700">Submit Claim</Button>
                 </div>
               </form>
@@ -270,25 +275,28 @@ export default function CampaignDetailPage({ params }: { params: Promise<{ id: s
         goalAmount={campaign.goalAmount}
       />
 
-      {/* Main Content Tabs (Overview, Sponsor Wall #724, Co-Creators #722) */}
+      {/* Main Content Tabs (Overview, Sponsor Wall #724, Top Backers, Co-Creators #722) */}
       {/* Backer community spaces (#788) render inside the overview sidebar. */}
       <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full space-y-6">
-        <TabsList className="grid w-full grid-cols-3 bg-zinc-900 border border-zinc-800 p-1 rounded-xl">
-        <TabsList className="grid w-full grid-cols-4 bg-zinc-900 border border-zinc-800 p-1 rounded-xl">
-        <TabsList className="grid w-full grid-cols-5 bg-zinc-900 border border-zinc-800 p-1 rounded-xl">
+        <TabsList className="grid w-full grid-cols-2 gap-1 rounded-xl border border-zinc-800 bg-zinc-900 p-1 md:grid-cols-4 xl:grid-cols-8">
           <TabsTrigger value="overview" className="text-xs font-semibold data-[state=active]:bg-purple-600 data-[state=active]:text-white">
             <Target className="mr-1.5 h-4 w-4" /> Overview & Story
           </TabsTrigger>
           <TabsTrigger value="sponsors" className="text-xs font-semibold data-[state=active]:bg-purple-600 data-[state=active]:text-white">
             <Heart className="mr-1.5 h-4 w-4 text-rose-400" /> Sponsor Wall (#724)
           </TabsTrigger>
+          <TabsTrigger value="backers" className="text-xs font-semibold data-[state=active]:bg-purple-600 data-[state=active]:text-white">
+            <Crown className="mr-1.5 h-4 w-4 text-amber-400" /> Top Backers
+          </TabsTrigger>
           <TabsTrigger value="collaboration" className="text-xs font-semibold data-[state=active]:bg-purple-600 data-[state=active]:text-white">
             <Users className="mr-1.5 h-4 w-4 text-purple-400" /> Co-Creators (#722)
           </TabsTrigger>
           <TabsTrigger value="qa" className="text-xs font-semibold data-[state=active]:bg-purple-600 data-[state=active]:text-white">
             <MessageSquare className="mr-1.5 h-4 w-4 text-purple-400" /> Q&A (#791)
+          </TabsTrigger>
           <TabsTrigger value="success" className="text-xs font-semibold data-[state=active]:bg-purple-600 data-[state=active]:text-white">
             <Trophy className="mr-1.5 h-4 w-4 text-amber-400" /> Success Story
+          </TabsTrigger>
           <TabsTrigger value="series" className="text-xs font-semibold data-[state=active]:bg-purple-600 data-[state=active]:text-white">
             <Sparkles className="mr-1.5 h-4 w-4 text-amber-400" /> Series & Sequels
           </TabsTrigger>
@@ -356,7 +364,7 @@ export default function CampaignDetailPage({ params }: { params: Promise<{ id: s
                 </div>
               </div>
 
-              <BackerCommunity campaignId={campaign.id} />
+              <BackerCommunity campaignId={campaign.id} canManage={isCreatorView} />
             </div>
           </div>
         </TabsContent>
@@ -366,15 +374,28 @@ export default function CampaignDetailPage({ params }: { params: Promise<{ id: s
           <CampaignSponsorWall campaignId={campaign.id} campaignTitle={campaign.title} />
         </TabsContent>
 
-        {/* Tab 3: Co-Creators Collaboration (#722) */}
+        {/* Tab 3: Top backers by amount, with creator featuring + privacy */}
+        <TabsContent value="backers">
+          <TopBackers
+            campaignId={campaign.id}
+            campaignTitle={campaign.title}
+            creatorAddress={campaign.creator}
+            viewerAddress={viewerAddress}
+            limit={TOP_BACKERS_LIMIT}
+          />
+        </TabsContent>
+
+        {/* Tab 4: Co-Creators Collaboration (#722) */}
         <TabsContent value="collaboration">
           <CampaignCollaboration campaignId={campaign.id} campaignTitle={campaign.title} />
         </TabsContent>
 
-        {/* Tab 4: Q&A Moderation (#791) */}
+        {/* Tab 5: Q&A Moderation (#791) */}
         <TabsContent value="qa">
           <CampaignQAModeration campaignId={campaign.id} campaignTitle={campaign.title} />
-        {/* Tab 4: Success Story */}
+        </TabsContent>
+
+        {/* Tab 6: Success Story */}
         <TabsContent value="success" className="space-y-6">
           <div className="relative overflow-hidden rounded-2xl border border-emerald-800/60 bg-gradient-to-br from-emerald-950/40 via-zinc-900 to-zinc-900 p-6 md:p-8">
             <div className="flex items-center gap-2">
@@ -395,79 +416,26 @@ export default function CampaignDetailPage({ params }: { params: Promise<{ id: s
             <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
               {campaign.successStory.backerTestimonials.map((testimonial) => (
                 <figure key={testimonial.name} className="rounded-xl border border-zinc-800 bg-zinc-950/60 p-4">
-                  <blockquote className="text-sm text-zinc-300 leading-relaxed">"{testimonial.quote}"</blockquote>
+                  <blockquote className="text-sm text-zinc-300 leading-relaxed">&ldquo;{testimonial.quote}&rdquo;</blockquote>
                   <figcaption className="mt-3 text-xs text-zinc-400">
-                    <strong className="text-zinc-200">{testimonial.name}</strong> · {testimonial.location}
+                    <strong className="text-zinc-200">{testimonial.name}</strong> &middot; {testimonial.location}
                   </figcaption>
                 </figure>
               ))}
             </div>
           </div>
+        </TabsContent>
 
-        {/* Tab 4: Series & Sequels */}
+        {/* Tab 7: Series & Sequels */}
         <TabsContent value="series">
           <CampaignSeries campaignId={campaign.id} campaignTitle={campaign.title} />
         </TabsContent>
 
-        {/* Tab 5: Analytics for creators */}
+        {/* Tab 8: Analytics for creators */}
         <TabsContent value="analytics">
           <CampaignAnalyticsDashboard campaignId={campaign.id} campaignTitle={campaign.title} />
         </TabsContent>
       </Tabs>
-      {showInsuranceModal && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 px-4">
-          <div className="w-full max-w-md rounded-2xl border border-zinc-800 bg-zinc-950 p-6 shadow-2xl">
-            <div className="flex items-center justify-between">
-              <h3 className="text-lg font-bold text-amber-400 flex items-center gap-2">
-                <AlertTriangle className="h-5 w-5" /> Campaign Insurance Claim
-              </h3>
-              <button
-                type="button"
-                onClick={() => { setShowInsuranceModal(false); setClaimSubmitted(false); }}
-                className="text-xs font-semibold text-zinc-400 hover:text-zinc-200"
-              >
-                Close
-              </button>
-            </div>
-            {claimSubmitted ? (
-              <p className="mt-4 text-sm text-emerald-400">Claim submitted successfully.</p>
-            ) : (
-              <form
-                className="mt-4 space-y-4"
-                onSubmit={(e) => {
-                  e.preventDefault();
-                  setClaimSubmitted(true);
-                }}
-              >
-                <textarea
-                  required
-                  rows={4}
-                  placeholder="Describe how the campaign failed and upload proof below"
-                  className="w-full rounded-lg border border-zinc-800 bg-zinc-900 px-3 py-2 text-sm text-zinc-100 placeholder:text-zinc-600 focus:outline-none focus:ring-2 focus:ring-amber-500/40"
-                />
-                <input
-                  required
-                  type="file"
-                  className="w-full text-sm text-zinc-300 file:mr-3 file:rounded-md file:border-0 file:bg-amber-500/20 file:px-3 file:py-1.5 file:text-xs file:font-semibold file:text-amber-300 hover:file:bg-amber-500/30"
-                />
-                <div className="flex justify-end gap-2">
-                  <Button
-                    type="button"
-                    variant="outline"
-                    size="sm"
-                    onClick={() => { setShowInsuranceModal(false); setClaimSubmitted(false); }}
-                  >
-                    Cancel
-                  </Button>
-                  <Button type="submit" size="sm" className="bg-amber-600 text-white hover:bg-amber-700">
-                    Submit Claim
-                  </Button>
-                </div>
-              </form>
-            )}
-          </div>
-        </div>
-      )}
     </div>
   );
 }
\ No newline at end of file
diff --git a/apps/web/src/app/(overview)/campaigns/page.tsx b/apps/web/src/app/(overview)/campaigns/page.tsx
index f00f8780..f5199c43 100644
--- a/apps/web/src/app/(overview)/campaigns/page.tsx
+++ b/apps/web/src/app/(overview)/campaigns/page.tsx
@@ -2,7 +2,7 @@
 
 import React from "react";
 import Link from "next/link";
-import { Rocket, Plus, Heart, Users, Sparkles, ShieldCheck, ChevronRight, Trophy, Scale, ShoppingBag } from "lucide-react";
+import { Rocket, Plus, Heart, Users, ShieldCheck, ChevronRight, Trophy, Scale, ShoppingBag } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import SuccessStories from "@/components/modules/campaign/success-stories/SuccessStories";
@@ -37,8 +37,6 @@ export default function CampaignsDirectoryPage() {
 
   return (
     <div className="container mx-auto px-4 py-8 max-w-6xl space-y-8">
-      <!-- Header -->
-      <div className="flex flex-col sm-flex-row sm-items-center sm-justify-between gap-4 border-b border-zinc-800 pb-6">
       {/* Header */}
       <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4 border-b border-zinc-800 pb-6">
         <div>
@@ -83,18 +81,17 @@ export default function CampaignsDirectoryPage() {
         </div>
       </div>
 
-      <!-- Success Stories Section -->
+      {/* Success Stories Section */}
       <SuccessStories />
 
-      <!-- Campaigns Grid -->
+      {/* Campaigns Grid */}
       <div className="grid grid-cols-1 md-grid-cols-2 gap-6">
         {campaigns.map((c) => {
           const progress = Math.round((parseFloat(c.raisedAmount.replace(/,/g, "")) / parseFloat(c.goalAmount.replace(/,/g, ""))) * 100);
           return (
             <div
               key={c.id}
-              className="group flex flex-col justify-between rounded-xl border border-zinc-800 bg-zinc-900/80 p-6 shadow-xl transition-all duration-300 hover:border-purple-500/50 
-hover:shadow-2xl"
+              className="group flex flex-col justify-between rounded-xl border border-zinc-800 bg-zinc-900/80 p-6 shadow-xl transition-all duration-300 hover:border-purple-500/50 hover:shadow-2xl"
             >
               <div className="space-y-3">
                 <div className="flex items-center justify-between">
@@ -118,11 +115,11 @@ hover:shadow-2xl"
                   <span className="text-emerald-400 font-bold">{progress}% Goal</span>
                 </div>
 
-                <!-- Progress bar -->
+                {/* Progress bar */}
                 <div className="h-1.5 w-full overflow-hidden rounded-full bg-zinc-800">
                   <div
                     className="h-full rounded-full bg-gradient-to-r from-purple-500 to-emerald-400"
-                    style={ width: `${progress}%` }
+                    style={{ width: `${progress}%` }}
                   />
                 </div>
 
@@ -138,7 +135,7 @@ hover:shadow-2xl"
                     </span>
                   </div>
 
-                  <Link href={"/campaigns/${c.id}"}>
+                  <Link href={`/campaigns/${c.id}`}>
                     <Button size="sm" variant="ghost" className="text-xs text-purple-400 hover-text-purple-300 hover-bg-purple-950/40">
                       View Campaign <ChevronRight className="ml-1 h-3.5 w-3.5" />
                     </Button>
diff --git a/apps/web/src/app/api/campaigns/[id]/backers/featured/route.test.ts b/apps/web/src/app/api/campaigns/[id]/backers/featured/route.test.ts
new file mode 100644
index 00000000..a5773194
--- /dev/null
+++ b/apps/web/src/app/api/campaigns/[id]/backers/featured/route.test.ts
@@ -0,0 +1,102 @@
+import { beforeEach, describe, expect, it } from "vitest";
+import { DELETE, POST } from "./route";
+import { backersService } from "@/services/campaign-backers.service";
+import { MAX_FEATURED_BACKERS } from "@/types/campaign-backers";
+
+const CAMPAIGN = "camp-featured-api";
+const CREATOR = "GCREATOR...AAAA";
+const ALICE = "GALICE...AAAA";
+const BOB = "GBOB...BBBB";
+const CAROL = "GCAROL...CCCC";
+const DAVE = "GDAVE...DDDD";
+
+const params = { params: Promise.resolve({ id: CAMPAIGN }) };
+const call = (method: string, body?: unknown, query = "") =>
+  new Request(`http://test/api/campaigns/${CAMPAIGN}/backers/featured${query}`, {
+    method,
+    body: body === undefined ? undefined : JSON.stringify(body),
+  });
+const json = <T>(response: Response) => response.json() as Promise<T>;
+
+function seed() {
+  backersService.reset();
+  backersService.registerCampaignCreator(CAMPAIGN, CREATOR);
+  backersService.recordContribution({ campaignId: CAMPAIGN, backerAddress: ALICE, amount: "100", displayName: "Alice Adams" });
+  backersService.recordContribution({ campaignId: CAMPAIGN, backerAddress: BOB, amount: "200", displayName: "Bob Bale" });
+  backersService.recordContribution({ campaignId: CAMPAIGN, backerAddress: CAROL, amount: "300", displayName: "Carol Cruz" });
+  backersService.recordContribution({ campaignId: CAMPAIGN, backerAddress: DAVE, amount: "400", displayName: "Dave Diaz" });
+}
+
+describe("POST /api/campaigns/:id/backers/featured", () => {
+  beforeEach(seed);
+
+  it("lets the creator feature a backer", async () => {
+    const response = await POST(call("POST", { backerAddress: ALICE, featuredBy: CREATOR, note: "First in." }) as never, params as never);
+    expect(response.status).toBe(201);
+    const body = await json<{ success: boolean; featured: { backerAddress: string; note?: string } }>(response);
+    expect(body.success).toBe(true);
+    expect(body.featured).toMatchObject({ backerAddress: ALICE, note: "First in." });
+    expect(backersService.isFeatured(CAMPAIGN, ALICE)).toBe(true);
+  });
+
+  it("rejects anyone who is not the creator", async () => {
+    const response = await POST(call("POST", { backerAddress: ALICE, featuredBy: BOB }) as never, params as never);
+    expect(response.status).toBe(403);
+    const body = await json<{ error: string }>(response);
+    expect(body.error).toMatch(/Only the campaign creator/);
+  });
+
+  it("refuses to feature a backer who is not public", async () => {
+    backersService.setPrivacyPreference({ campaignId: CAMPAIGN, backerAddress: BOB, visibility: "ANONYMOUS" });
+    const response = await POST(call("POST", { backerAddress: BOB, featuredBy: CREATOR }) as never, params as never);
+    expect(response.status).toBe(403);
+    expect(backersService.isFeatured(CAMPAIGN, BOB)).toBe(false);
+  });
+
+  it(`caps featuring at ${MAX_FEATURED_BACKERS}`, async () => {
+    for (const address of [ALICE, BOB, CAROL]) {
+      expect((await POST(call("POST", { backerAddress: address, featuredBy: CREATOR }) as never, params as never)).status).toBe(201);
+    }
+    const overflow = await POST(call("POST", { backerAddress: DAVE, featuredBy: CREATOR }) as never, params as never);
+    expect(overflow.status).toBe(403);
+    const body = await json<{ error: string }>(overflow);
+    expect(body.error).toMatch(/up to 3/);
+  });
+
+  it("requires an address and an actor", async () => {
+    expect((await POST(call("POST", { featuredBy: CREATOR }) as never, params as never)).status).toBe(400);
+    expect((await POST(call("POST", { backerAddress: ALICE }) as never, params as never)).status).toBe(400);
+  });
+});
+
+describe("DELETE /api/campaigns/:id/backers/featured", () => {
+  beforeEach(seed);
+
+  it("removes a feature for the creator", async () => {
+    backersService.featureBacker({ campaignId: CAMPAIGN, backerAddress: ALICE, featuredBy: CREATOR });
+
+    const response = await DELETE(call("DELETE", { backerAddress: ALICE, featuredBy: CREATOR }) as never, params as never);
+    expect(response.status).toBe(200);
+    const body = await json<{ success: boolean; removed: boolean }>(response);
+    expect(body).toMatchObject({ success: true, removed: true });
+    expect(backersService.isFeatured(CAMPAIGN, ALICE)).toBe(false);
+  });
+
+  it("accepts query parameters when the client sends no body", async () => {
+    backersService.featureBacker({ campaignId: CAMPAIGN, backerAddress: BOB, featuredBy: CREATOR });
+
+    const response = await DELETE(
+      call("DELETE", undefined, `?backerAddress=${encodeURIComponent(BOB)}&featuredBy=${encodeURIComponent(CREATOR)}`) as never,
+      params as never,
+    );
+    expect(response.status).toBe(200);
+    expect(backersService.isFeatured(CAMPAIGN, BOB)).toBe(false);
+  });
+
+  it("rejects non-creators", async () => {
+    backersService.featureBacker({ campaignId: CAMPAIGN, backerAddress: ALICE, featuredBy: CREATOR });
+    const response = await DELETE(call("DELETE", { backerAddress: ALICE, featuredBy: CAROL }) as never, params as never);
+    expect(response.status).toBe(403);
+    expect(backersService.isFeatured(CAMPAIGN, ALICE)).toBe(true);
+  });
+});
diff --git a/apps/web/src/app/api/campaigns/[id]/backers/featured/route.ts b/apps/web/src/app/api/campaigns/[id]/backers/featured/route.ts
new file mode 100644
index 00000000..6cc0ea96
--- /dev/null
+++ b/apps/web/src/app/api/campaigns/[id]/backers/featured/route.ts
@@ -0,0 +1,99 @@
+import { NextRequest, NextResponse } from "next/server";
+import { backersService } from "@/services/campaign-backers.service";
+import { MAX_FEATURED_BACKERS } from "@/types/campaign-backers";
+
+/**
+ * Creator featuring for the top backers leaderboard.
+ *
+ *  POST   /api/campaigns/:id/backers/featured   feature a backer (creator only)
+ *  DELETE /api/campaigns/:id/backers/featured   remove a feature (creator only)
+ *
+ * Featuring is rejected when the backer is anonymous/private or has opted out
+ * of being featured, and is capped at MAX_FEATURED_BACKERS per campaign.
+ */
+
+const NO_STORE = { "Cache-Control": "private, no-store, max-age=0" } as const;
+
+interface FeatureBody {
+  backerAddress?: string;
+  featuredBy?: string;
+  campaignCreator?: string;
+  note?: string;
+}
+
+export async function POST(
+  request: NextRequest,
+  { params }: { params: Promise<{ id: string }> },
+) {
+  const { id } = await params;
+  let body: FeatureBody = {};
+  try {
+    body = (await request.json()) as FeatureBody;
+  } catch {
+    return NextResponse.json({ error: "Invalid JSON body" }, { status: 400, headers: NO_STORE });
+  }
+
+  if (!body.backerAddress?.trim()) {
+    return NextResponse.json({ error: "backerAddress is required" }, { status: 400, headers: NO_STORE });
+  }
+  if (!body.featuredBy?.trim()) {
+    return NextResponse.json({ error: "featuredBy is required" }, { status: 400, headers: NO_STORE });
+  }
+
+  const result = backersService.featureBacker({
+    campaignId: id,
+    backerAddress: body.backerAddress,
+    featuredBy: body.featuredBy,
+    campaignCreator: body.campaignCreator,
+    note: body.note,
+  });
+
+  if (!result.ok) {
+    return NextResponse.json({ error: result.error }, { status: 403, headers: NO_STORE });
+  }
+
+  return NextResponse.json(
+    { success: true, featured: result.value, max: MAX_FEATURED_BACKERS },
+    { status: 201, headers: NO_STORE },
+  );
+}
+
+export async function DELETE(
+  request: NextRequest,
+  { params }: { params: Promise<{ id: string }> },
+) {
+  const { id } = await params;
+
+  let body: FeatureBody = {};
+  try {
+    body = (await request.json()) as FeatureBody;
+  } catch {
+    // DELETE requests often omit the body — fall back to the query string.
+    const url = new URL(request.url);
+    body = {
+      backerAddress: url.searchParams.get("backerAddress") ?? undefined,
+      featuredBy: url.searchParams.get("featuredBy") ?? undefined,
+      campaignCreator: url.searchParams.get("campaignCreator") ?? undefined,
+    };
+  }
+
+  if (!body.backerAddress?.trim()) {
+    return NextResponse.json({ error: "backerAddress is required" }, { status: 400, headers: NO_STORE });
+  }
+  if (!body.featuredBy?.trim()) {
+    return NextResponse.json({ error: "featuredBy is required" }, { status: 400, headers: NO_STORE });
+  }
+
+  const result = backersService.unfeatureBacker({
+    campaignId: id,
+    backerAddress: body.backerAddress,
+    featuredBy: body.featuredBy,
+    campaignCreator: body.campaignCreator,
+  });
+
+  if (!result.ok) {
+    return NextResponse.json({ error: result.error }, { status: 403, headers: NO_STORE });
+  }
+
+  return NextResponse.json({ success: true, ...result.value }, { headers: NO_STORE });
+}
diff --git a/apps/web/src/app/api/campaigns/[id]/backers/route.test.ts b/apps/web/src/app/api/campaigns/[id]/backers/route.test.ts
new file mode 100644
index 00000000..1c932186
--- /dev/null
+++ b/apps/web/src/app/api/campaigns/[id]/backers/route.test.ts
@@ -0,0 +1,139 @@
+import { beforeEach, describe, expect, it } from "vitest";
+import { GET, PATCH, POST } from "./route";
+import { backersService } from "@/services/campaign-backers.service";
+
+const CAMPAIGN = "camp-api";
+const CREATOR = "GCREATOR...AAAA";
+const ALICE = "GALICE...AAAA";
+const BOB = "GBOB...BBBB";
+
+const params = { params: Promise.resolve({ id: CAMPAIGN }) };
+const request = (url: string, init?: RequestInit) => new Request(url, init);
+const json = <T>(response: Response) => response.json() as Promise<T>;
+
+function seed() {
+  backersService.reset();
+  backersService.registerCampaignCreator(CAMPAIGN, CREATOR);
+  backersService.recordContribution({ campaignId: CAMPAIGN, backerAddress: ALICE, amount: "900", token: "XLM", displayName: "Alice Adams" });
+  backersService.recordContribution({ campaignId: CAMPAIGN, backerAddress: BOB, amount: "1200", token: "XLM", displayName: "Bob Bale" });
+}
+
+describe("GET /api/campaigns/:id/backers", () => {
+  beforeEach(seed);
+
+  it("returns the ranked leaderboard", async () => {
+    const response = await GET(request(`http://test/api/campaigns/${CAMPAIGN}/backers`) as never, params as never);
+    const body = await json<{ backers: { displayName: string; rank: number }[]; totalBackers: number }>(response);
+
+    expect(response.status).toBe(200);
+    expect(body.totalBackers).toBe(2);
+    expect(body.backers[0]).toMatchObject({ rank: 1, displayName: "Bob Bale" });
+  });
+
+  it("applies privacy preferences for public viewers", async () => {
+    backersService.setPrivacyPreference({ campaignId: CAMPAIGN, backerAddress: BOB, visibility: "ANONYMOUS" });
+    backersService.setPrivacyPreference({ campaignId: CAMPAIGN, backerAddress: ALICE, visibility: "PRIVATE" });
+
+    const publicResponse = await json<{ backers: { displayName: string }[]; privateBackers: number }>(
+      await GET(request(`http://test/api/campaigns/${CAMPAIGN}/backers?viewer=GPUBLIC...PPPP`) as never, params as never),
+    );
+    expect(publicResponse.backers.map((entry) => entry.displayName)).toEqual(["Anonymous backer"]);
+    expect(publicResponse.privateBackers).toBe(1);
+
+    const creatorResponse = await json<{ backers: { displayName: string }[] }>(
+      await GET(
+        request(`http://test/api/campaigns/${CAMPAIGN}/backers?viewer=${CREATOR}&creator=${CREATOR}`) as never,
+        params as never,
+      ),
+    );
+    expect(creatorResponse.backers.map((entry) => entry.displayName)).toContain("Bob Bale");
+  });
+
+  it("honours the limit query parameter", async () => {
+    const body = await json<{ backers: unknown[]; limit: number }>(
+      await GET(request(`http://test/api/campaigns/${CAMPAIGN}/backers?limit=1`) as never, params as never),
+    );
+    expect(body.limit).toBe(1);
+    expect(body.backers).toHaveLength(1);
+  });
+});
+
+describe("POST /api/campaigns/:id/backers", () => {
+  beforeEach(seed);
+
+  it("records a contribution and returns the refreshed board", async () => {
+    const response = await POST(
+      request(`http://test/api/campaigns/${CAMPAIGN}/backers`, {
+        method: "POST",
+        body: JSON.stringify({ backerAddress: "GCAROL...CCCC", amount: "5000", token: "USDC", displayName: "Carol Cruz" }),
+      }) as never,
+      params as never,
+    );
+
+    expect(response.status).toBe(201);
+    const body = await json<{ success: boolean; leaderboard: { backers: { displayName: string }[] } }>(response);
+    expect(body.success).toBe(true);
+    expect(body.leaderboard.backers[0].displayName).toBe("Carol Cruz");
+  });
+
+  it("rejects payloads without an address or amount", async () => {
+    const noAddress = await POST(
+      request(`http://test/api/campaigns/${CAMPAIGN}/backers`, { method: "POST", body: JSON.stringify({ amount: "10" }) }) as never,
+      params as never,
+    );
+    expect(noAddress.status).toBe(400);
+
+    const noAmount = await POST(
+      request(`http://test/api/campaigns/${CAMPAIGN}/backers`, { method: "POST", body: JSON.stringify({ backerAddress: ALICE }) }) as never,
+      params as never,
+    );
+    expect(noAmount.status).toBe(400);
+  });
+});
+
+describe("PATCH /api/campaigns/:id/backers", () => {
+  beforeEach(seed);
+
+  it("updates the backer's privacy preference", async () => {
+    const response = await PATCH(
+      request(`http://test/api/campaigns/${CAMPAIGN}/backers`, {
+        method: "PATCH",
+        body: JSON.stringify({ backerAddress: BOB, visibility: "ANONYMOUS", showAmount: false }),
+      }) as never,
+      params as never,
+    );
+
+    expect(response.status).toBe(200);
+    const body = await json<{ preference: { visibility: string; showAmount: boolean } }>(response);
+    expect(body.preference).toMatchObject({ visibility: "ANONYMOUS", showAmount: false });
+  });
+
+  it("removes an existing feature when the backer opts out", async () => {
+    backersService.featureBacker({ campaignId: CAMPAIGN, backerAddress: BOB, featuredBy: CREATOR });
+    expect(backersService.isFeatured(CAMPAIGN, BOB)).toBe(true);
+
+    const body = await json<{ removedFromFeatured: boolean }>(
+      await PATCH(
+        request(`http://test/api/campaigns/${CAMPAIGN}/backers`, {
+          method: "PATCH",
+          body: JSON.stringify({ backerAddress: BOB, visibility: "PRIVATE" }),
+        }) as never,
+        params as never,
+      ),
+    );
+
+    expect(body.removedFromFeatured).toBe(true);
+    expect(backersService.isFeatured(CAMPAIGN, BOB)).toBe(false);
+  });
+
+  it("rejects an unknown visibility", async () => {
+    const response = await PATCH(
+      request(`http://test/api/campaigns/${CAMPAIGN}/backers`, {
+        method: "PATCH",
+        body: JSON.stringify({ backerAddress: BOB, visibility: "SECRET" }),
+      }) as never,
+      params as never,
+    );
+    expect(response.status).toBe(400);
+  });
+});
diff --git a/apps/web/src/app/api/campaigns/[id]/backers/route.ts b/apps/web/src/app/api/campaigns/[id]/backers/route.ts
new file mode 100644
index 00000000..df51de8f
--- /dev/null
+++ b/apps/web/src/app/api/campaigns/[id]/backers/route.ts
@@ -0,0 +1,125 @@
+import { NextRequest, NextResponse } from "next/server";
+import { backersService } from "@/services/campaign-backers.service";
+import { TOP_BACKERS_LIMIT, isBackerVisibility } from "@/types/campaign-backers";
+
+/**
+ * Top backers for a campaign.
+ *
+ *  GET    /api/campaigns/:id/backers?limit=10&viewer=G...&creator=G...
+ *         Privacy-aware leaderboard (private backers excluded, anonymous
+ *         backers redacted). Pass `viewer` = campaign creator for the
+ *         un-redacted creator view.
+ *  POST   /api/campaigns/:id/backers            record a contribution
+ *  PATCH  /api/campaigns/:id/backers            update a backer's privacy
+ */
+
+const NO_STORE = { "Cache-Control": "private, no-store, max-age=0" } as const;
+
+function parseLimit(raw: string | null): number {
+  const parsed = Number.parseInt(raw ?? "", 10);
+  if (!Number.isFinite(parsed) || parsed <= 0) return TOP_BACKERS_LIMIT;
+  return Math.min(parsed, 100);
+}
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: Promise<{ id: string }> },
+) {
+  const { id } = await params;
+  const url = new URL(request.url);
+  const limit = parseLimit(url.searchParams.get("limit"));
+  const viewerAddress = url.searchParams.get("viewer") ?? undefined;
+  const creatorAddress = url.searchParams.get("creator") ?? undefined;
+
+  const result = backersService.getTopBackers(id, { limit, viewerAddress, creatorAddress });
+  return NextResponse.json(result, { headers: NO_STORE });
+}
+
+export async function POST(
+  request: NextRequest,
+  { params }: { params: Promise<{ id: string }> },
+) {
+  const { id } = await params;
+  try {
+    const body = (await request.json()) as {
+      backerAddress?: string;
+      amount?: string;
+      token?: string;
+      displayName?: string;
+      avatarUrl?: string;
+      message?: string;
+      txHash?: string;
+    };
+
+    if (!body.backerAddress?.trim()) {
+      return NextResponse.json({ error: "backerAddress is required" }, { status: 400, headers: NO_STORE });
+    }
+    if (!body.amount) {
+      return NextResponse.json({ error: "amount is required" }, { status: 400, headers: NO_STORE });
+    }
+
+    const contribution = backersService.recordContribution({
+      campaignId: id,
+      backerAddress: body.backerAddress,
+      amount: String(body.amount),
+      token: body.token,
+      displayName: body.displayName,
+      avatarUrl: body.avatarUrl,
+      message: body.message,
+      txHash: body.txHash,
+    });
+
+    return NextResponse.json(
+      { success: true, contribution, leaderboard: backersService.getTopBackers(id) },
+      { status: 201, headers: NO_STORE },
+    );
+  } catch (err) {
+    return NextResponse.json(
+      { error: err instanceof Error ? err.message : "Invalid contribution payload" },
+      { status: 400, headers: NO_STORE },
+    );
+  }
+}
+
+export async function PATCH(
+  request: NextRequest,
+  { params }: { params: Promise<{ id: string }> },
+) {
+  const { id } = await params;
+  try {
+    const body = (await request.json()) as {
+      backerAddress?: string;
+      visibility?: unknown;
+      showAmount?: boolean;
+      allowFeaturing?: boolean;
+    };
+
+    if (!body.backerAddress?.trim()) {
+      return NextResponse.json({ error: "backerAddress is required" }, { status: 400, headers: NO_STORE });
+    }
+    if (body.visibility !== undefined && !isBackerVisibility(body.visibility)) {
+      return NextResponse.json(
+        { error: "visibility must be one of PUBLIC, ANONYMOUS, PRIVATE" },
+        { status: 400, headers: NO_STORE },
+      );
+    }
+
+    const { preference, removedFromFeatured } = backersService.setPrivacyPreference({
+      campaignId: id,
+      backerAddress: body.backerAddress,
+      visibility: body.visibility as never,
+      showAmount: body.showAmount,
+      allowFeaturing: body.allowFeaturing,
+    });
+
+    return NextResponse.json(
+      { success: true, preference, removedFromFeatured },
+      { headers: NO_STORE },
+    );
+  } catch (err) {
+    return NextResponse.json(
+      { error: err instanceof Error ? err.message : "Invalid privacy payload" },
+      { status: 400, headers: NO_STORE },
+    );
+  }
+}
diff --git a/apps/web/src/app/api/campaigns/success-stories/route.ts b/apps/web/src/app/api/campaigns/success-stories/route.ts
index 765f8878..6b4ec639 100644
--- a/apps/web/src/app/api/campaigns/success-stories/route.ts
+++ b/apps/web/src/app/api/campaigns/success-stories/route.ts
@@ -29,6 +29,7 @@ const successStories = [
         author: 'John Doe',
         content: 'Been part of this journey was incredible. The team kept us updated every step of the way and the land is now protected.',
         rating: 5,
+      },
       {
         id: 'test-002',
         author: 'Jane Smith',
diff --git a/apps/web/src/components/modules/campaign/backers/TopBackers.test.tsx b/apps/web/src/components/modules/campaign/backers/TopBackers.test.tsx
new file mode 100644
index 00000000..74405381
--- /dev/null
+++ b/apps/web/src/components/modules/campaign/backers/TopBackers.test.tsx
@@ -0,0 +1,162 @@
+import React from "react";
+import { beforeEach, describe, expect, it } from "vitest";
+import { fireEvent, render, screen, within } from "@testing-library/react";
+import { TopBackers } from "./TopBackers";
+import { backersService } from "@/services/campaign-backers.service";
+import { ANONYMOUS_BACKER_LABEL } from "@/types/campaign-backers";
+
+const CAMPAIGN = "camp-ui";
+const CREATOR = "GCREATOR...AAAA";
+const VIEWER = "GVIEWER...VVVV";
+
+function seed() {
+  backersService.reset();
+  backersService.registerCampaignCreator(CAMPAIGN, CREATOR);
+  backersService.recordContribution({ campaignId: CAMPAIGN, backerAddress: "GAlice...AAAA", amount: "1500", token: "XLM", displayName: "Alice Adams", contributedAt: 1_000 });
+  backersService.recordContribution({ campaignId: CAMPAIGN, backerAddress: "GBob...BBBB", amount: "900", token: "XLM", displayName: "Bob Bale", contributedAt: 2_000 });
+  backersService.recordContribution({ campaignId: CAMPAIGN, backerAddress: "GCarol...CCCC", amount: "400", token: "USDC", displayName: "Carol Cruz", contributedAt: 3_000 });
+}
+
+describe("TopBackers", () => {
+  beforeEach(seed);
+
+  it("renders the backers ranked by total contribution", () => {
+    render(<TopBackers campaignId={CAMPAIGN} />);
+
+    expect(screen.getByText("Top 10 Backers")).toBeTruthy();
+    expect(screen.getByText("Alice Adams")).toBeTruthy();
+    expect(screen.getByText("1,500")).toBeTruthy();
+
+    const rows = screen.getAllByTestId(/^backer-row-/);
+    expect(rows).toHaveLength(3);
+    expect(within(rows[0]).getByText("Alice Adams")).toBeTruthy();
+    expect(within(rows[1]).getByText("Bob Bale")).toBeTruthy();
+    expect(within(rows[2]).getByText("Carol Cruz")).toBeTruthy();
+  });
+
+  it("shows at most ten rows", () => {
+    for (let i = 0; i < 12; i += 1) {
+      backersService.recordContribution({
+        campaignId: CAMPAIGN,
+        backerAddress: `GExtra${i}...ZZZZ`,
+        amount: String(10 + i),
+        contributedAt: 9_000 + i,
+      });
+    }
+    render(<TopBackers campaignId={CAMPAIGN} />);
+    expect(screen.getAllByTestId(/^backer-row-/)).toHaveLength(10);
+  });
+
+  it("redacts anonymous backers while keeping their rank", () => {
+    backersService.setPrivacyPreference({ campaignId: CAMPAIGN, backerAddress: "GBob...BBBB", visibility: "ANONYMOUS" });
+    render(<TopBackers campaignId={CAMPAIGN} viewerAddress={VIEWER} />);
+
+    expect(screen.queryByText("Bob Bale")).toBeNull();
+    expect(screen.getByText(ANONYMOUS_BACKER_LABEL)).toBeTruthy();
+    expect(screen.getByText("Anonymous")).toBeTruthy();
+    // Still ranked #2 by amount.
+    expect(within(screen.getByTestId("backer-row-2")).getByText(ANONYMOUS_BACKER_LABEL)).toBeTruthy();
+  });
+
+  it("hides the amount when an anonymous backer asks for it", () => {
+    backersService.setPrivacyPreference({
+      campaignId: CAMPAIGN,
+      backerAddress: "GBob...BBBB",
+      visibility: "ANONYMOUS",
+      showAmount: false,
+    });
+    render(<TopBackers campaignId={CAMPAIGN} viewerAddress={VIEWER} />);
+    expect(screen.getByText("Amount hidden")).toBeTruthy();
+  });
+
+  it("excludes private backers and tells the viewer how many are hidden", () => {
+    backersService.setPrivacyPreference({ campaignId: CAMPAIGN, backerAddress: "GCarol...CCCC", visibility: "PRIVATE" });
+    backersService.setPrivacyPreference({ campaignId: CAMPAIGN, backerAddress: "GBob...BBBB", visibility: "PRIVATE" });
+    render(<TopBackers campaignId={CAMPAIGN} viewerAddress={VIEWER} />);
+
+    expect(screen.queryByText("Carol Cruz")).toBeNull();
+    expect(screen.queryByText("Bob Bale")).toBeNull();
+    expect(screen.getAllByTestId(/^backer-row-/)).toHaveLength(1);
+    expect(screen.getByText(/2 backers keep their support private/)).toBeTruthy();
+  });
+
+  it("only offers featuring to the campaign creator", () => {
+    const { unmount } = render(<TopBackers campaignId={CAMPAIGN} creatorAddress={CREATOR} viewerAddress={VIEWER} />);
+    expect(screen.queryByRole("button", { name: /feature/i })).toBeNull();
+    unmount();
+
+    render(<TopBackers campaignId={CAMPAIGN} creatorAddress={CREATOR} viewerAddress={CREATOR} />);
+    expect(screen.getAllByRole("button", { name: /feature/i }).length).toBe(3);
+    expect(screen.getByText(/0\/3 featured/)).toBeTruthy();
+  });
+
+  it("pins a backer to the top when the creator features them", () => {
+    render(<TopBackers campaignId={CAMPAIGN} creatorAddress={CREATOR} viewerAddress={CREATOR} />);
+
+    const carolRow = screen.getByTestId("backer-row-3");
+    fireEvent.click(within(carolRow).getByRole("button", { name: /feature/i }));
+
+    const firstRow = screen.getAllByTestId(/^backer-row-/)[0];
+    expect(within(firstRow).getByText("Carol Cruz")).toBeTruthy();
+    expect(within(firstRow).getByText("Featured")).toBeTruthy();
+    expect(screen.getByText(/1\/3 featured/)).toBeTruthy();
+
+    // Un-featuring restores amount order.
+    fireEvent.click(within(firstRow).getByRole("button", { name: /un-feature/i }));
+    const afterUnfeature = screen.getAllByTestId(/^backer-row-/)[0];
+    expect(within(afterUnfeature).getByText("Alice Adams")).toBeTruthy();
+  });
+
+  it("surfaces the service error when featuring is not allowed", () => {
+    backersService.setPrivacyPreference({ campaignId: CAMPAIGN, backerAddress: "GBob...BBBB", allowFeaturing: false });
+    render(<TopBackers campaignId={CAMPAIGN} creatorAddress={CREATOR} viewerAddress={CREATOR} />);
+
+    const bobRow = screen.getByTestId("backer-row-2");
+    fireEvent.click(within(bobRow).getByRole("button", { name: /feature/i }));
+
+    expect(screen.getByRole("alert").textContent).toMatch(/opted out of being featured/);
+  });
+
+  it("lets a backer change their own privacy preference", () => {
+    render(<TopBackers campaignId={CAMPAIGN} creatorAddress={CREATOR} viewerAddress="GAlice...AAAA" />);
+
+    expect(screen.getByText("Your privacy preference")).toBeTruthy();
+    expect(screen.getByText("You")).toBeTruthy();
+
+    fireEvent.click(screen.getByRole("button", { name: "Private" }));
+
+    expect(backersService.getPrivacyPreference(CAMPAIGN, "GAlice...AAAA").visibility).toBe("PRIVATE");
+    expect(screen.getByRole("button", { name: "Private" }).getAttribute("aria-pressed")).toBe("true");
+  });
+
+  it("keeps the privacy controls reachable for a backer who went anonymous", () => {
+    backersService.setPrivacyPreference({ campaignId: CAMPAIGN, backerAddress: "GBob...BBBB", visibility: "ANONYMOUS" });
+    render(<TopBackers campaignId={CAMPAIGN} creatorAddress={CREATOR} viewerAddress="GBob...BBBB" />);
+
+    // Bob still resolves his own row (and can undo the choice) even though the
+    // row is redacted for everybody else.
+    expect(screen.getByText("Bob Bale")).toBeTruthy();
+    const bobRow = screen.getByTestId("backer-row-2");
+    expect(within(bobRow).getByText("Anonymous")).toBeTruthy();
+    expect(screen.getByText("Your privacy preference")).toBeTruthy();
+    expect(screen.getByText("You")).toBeTruthy();
+    expect(screen.getByRole("button", { name: "Anonymous" }).getAttribute("aria-pressed")).toBe("true");
+
+    // A third party still sees the redacted row.
+    expect(
+      backersService
+        .getTopBackers(CAMPAIGN, { viewerAddress: "GOTHER...OOOO" })
+        .backers.some((entry) => entry.displayName === ANONYMOUS_BACKER_LABEL),
+    ).toBe(true);
+
+    fireEvent.click(screen.getByRole("button", { name: "Public" }));
+    expect(backersService.getPrivacyPreference(CAMPAIGN, "GBob...BBBB").visibility).toBe("PUBLIC");
+    expect(within(screen.getByTestId("backer-row-2")).queryByText("Anonymous")).toBeNull();
+  });
+
+  it("renders an empty state before the first contribution", () => {
+    backersService.reset();
+    render(<TopBackers campaignId="camp-empty" />);
+    expect(screen.getByText("No backers yet")).toBeTruthy();
+  });
+});
diff --git a/apps/web/src/components/modules/campaign/backers/TopBackers.tsx b/apps/web/src/components/modules/campaign/backers/TopBackers.tsx
new file mode 100644
index 00000000..521ab52c
--- /dev/null
+++ b/apps/web/src/components/modules/campaign/backers/TopBackers.tsx
@@ -0,0 +1,296 @@
+"use client";
+
+import React, { useState } from "react";
+import {
+  AlertCircle,
+  EyeOff,
+  Lock,
+  Medal,
+  Sparkles,
+  Star,
+  Trophy,
+  Users,
+} from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  ANONYMOUS_BACKER_LABEL,
+  BackerVisibility,
+  HIDDEN_AMOUNT_LABEL,
+  MAX_FEATURED_BACKERS,
+  TOP_BACKERS_LIMIT,
+  TopBackerEntry,
+  backerInitials,
+  formatBackerAmount,
+} from "@/types/campaign-backers";
+import { useTopBackers } from "@/hooks/use-top-backers";
+
+export interface TopBackersProps {
+  campaignId: string;
+  campaignTitle?: string;
+  /** Address of the person looking at the page. */
+  viewerAddress?: string;
+  /** Campaign creator address — only they can feature backers. */
+  creatorAddress?: string;
+  /** Defaults to {@link TOP_BACKERS_LIMIT} (top 10). */
+  limit?: number;
+  /** Override creator detection (e.g. while the wallet is still connecting). */
+  canManage?: boolean;
+}
+
+const RANK_STYLES: Record<number, string> = {
+  1: "border-amber-500/60 bg-amber-500/15 text-amber-300",
+  2: "border-zinc-400/50 bg-zinc-400/10 text-zinc-200",
+  3: "border-orange-700/60 bg-orange-800/20 text-orange-300",
+};
+
+const VISIBILITY_OPTIONS: { value: BackerVisibility; label: string; hint: string }[] = [
+  { value: "PUBLIC", label: "Public", hint: "Name, address and amount are shown" },
+  { value: "ANONYMOUS", label: "Anonymous", hint: "Keep your rank, hide your identity" },
+  { value: "PRIVATE", label: "Private", hint: "Leave the leaderboard entirely" },
+];
+
+/**
+ * Top backers leaderboard for the campaign detail page.
+ *
+ * Shows the top `limit` (default 10) backers ranked by total contribution,
+ * lets the campaign creator feature up to {@link MAX_FEATURED_BACKERS} of them,
+ * and renders every row through the backer's own privacy preference.
+ */
+export function TopBackers({
+  campaignId,
+  campaignTitle,
+  viewerAddress,
+  creatorAddress,
+  limit = TOP_BACKERS_LIMIT,
+  canManage,
+}: TopBackersProps) {
+  const {
+    backers,
+    totalBackers,
+    privateBackers,
+    totalAmount,
+    featuredCount,
+    isCreator,
+    myEntry,
+    myPrivacy,
+    error,
+    toggleFeatured,
+    setPrivacy,
+  } = useTopBackers({ campaignId, viewerAddress, creatorAddress, limit });
+
+  const [privacyDraft, setPrivacyDraft] = useState<BackerVisibility | null>(null);
+
+  const canFeature = canManage ?? isCreator;
+  const featureSlotsLeft = MAX_FEATURED_BACKERS - featuredCount;
+
+  return (
+    <section className="rounded-xl border border-zinc-800 bg-zinc-900/60 p-6 space-y-4">
+      <div className="flex flex-wrap items-start justify-between gap-3">
+        <div>
+          <h3 className="text-lg font-bold text-zinc-100 flex items-center gap-2">
+            <Trophy className="h-5 w-5 text-amber-400" />
+            Top {limit} Backers
+          </h3>
+          <p className="text-xs text-zinc-400 mt-0.5">
+            {campaignTitle ? `${campaignTitle} · ` : ""}Ranked by total contribution.
+          </p>
+        </div>
+        <div className="flex flex-wrap items-center gap-2">
+          <Badge variant="outline" className="border-zinc-700 text-zinc-300 text-[11px]">
+            <Users className="mr-1 h-3 w-3" /> {totalBackers} backers
+          </Badge>
+          <Badge variant="outline" className="border-zinc-700 text-zinc-300 text-[11px]">
+            {formatBackerAmount(totalAmount)} raised
+          </Badge>
+          {canFeature && (
+            <Badge variant="outline" className="border-purple-600/50 text-purple-300 text-[11px]">
+              <Sparkles className="mr-1 h-3 w-3" /> {featuredCount}/{MAX_FEATURED_BACKERS} featured
+            </Badge>
+          )}
+        </div>
+      </div>
+
+      {error != null && (
+        <p role="alert" className="flex items-center gap-1.5 rounded-md border border-rose-900/50 bg-rose-950/40 px-3 py-2 text-xs text-rose-300">
+          <AlertCircle className="h-3.5 w-3.5" /> {error}
+        </p>
+      )}
+
+      {backers.length === 0 ? (
+        <div className="rounded-lg border border-dashed border-zinc-700 bg-zinc-950/40 px-4 py-8 text-center">
+          <p className="text-sm text-zinc-300">No backers yet</p>
+          <p className="mt-1 text-xs text-zinc-500">
+            The top {limit} backers by amount will appear here as soon as the first contribution lands.
+          </p>
+        </div>
+      ) : (
+        <ol className="space-y-2" aria-label={`Top ${limit} backers by amount`}>
+          {backers.map((entry) => (
+            <BackerRow
+              key={`${entry.rank}-${entry.backerAddress}`}
+              entry={entry}
+              canFeature={canFeature}
+              featureDisabled={featureSlotsLeft <= 0 && !entry.isFeatured}
+              onToggleFeatured={() => toggleFeatured(entry.backerAddress)}
+            />
+          ))}
+        </ol>
+      )}
+
+      {myEntry && (
+        <div className="rounded-lg border border-purple-900/40 bg-purple-950/20 p-4 space-y-2">
+          <p className="text-xs font-semibold text-purple-200 flex items-center gap-1.5">
+            <Lock className="h-3.5 w-3.5" /> Your privacy preference
+          </p>
+          <div className="flex flex-wrap gap-2">
+            {VISIBILITY_OPTIONS.map((option) => {
+              const active = (privacyDraft ?? myPrivacy?.visibility ?? "PUBLIC") === option.value;
+              return (
+                <button
+                  key={option.value}
+                  type="button"
+                  aria-pressed={active}
+                  title={option.hint}
+                  onClick={() => {
+                    setPrivacyDraft(option.value);
+                    if (viewerAddress) setPrivacy(viewerAddress, { visibility: option.value });
+                  }}
+                  className={`px-3 py-1.5 rounded-md text-xs font-semibold border ${
+                    active
+                      ? "border-purple-500 bg-purple-900/50 text-purple-100"
+                      : "border-zinc-700 bg-zinc-900 text-zinc-400 hover:text-zinc-200"
+                  }`}
+                >
+                  {option.label}
+                </button>
+              );
+            })}
+          </div>
+          <p className="text-[11px] text-zinc-500">
+            Choosing Private removes you from the leaderboard; choosing Anonymous keeps your rank but
+            hides your name and address. Backers who hide their identity can never be featured.
+          </p>
+        </div>
+      )}
+
+      <p className="text-[11px] text-zinc-500 leading-relaxed">
+        {privateBackers > 0
+          ? `${privateBackers} backer${privateBackers === 1 ? "" : "s"} keep${privateBackers === 1 ? "s" : ""} their support private and ${privateBackers === 1 ? "is" : "are"} not ranked here. `
+          : ""}
+        Backers control their own visibility — anonymous backers keep their rank with their identity
+        hidden{canFeature ? `, and only the campaign creator can feature up to ${MAX_FEATURED_BACKERS} backers` : ""}.
+      </p>
+    </section>
+  );
+}
+
+interface BackerRowProps {
+  entry: TopBackerEntry;
+  canFeature: boolean;
+  featureDisabled: boolean;
+  onToggleFeatured: () => void;
+}
+
+function BackerRow({ entry, canFeature, featureDisabled, onToggleFeatured }: BackerRowProps) {
+  // Identity is hidden for public viewers of an anonymous row; creators and the
+  // backer themselves still resolve it, so the badge is keyed off the
+  // preference rather than the rendered name.
+  const identityHidden = entry.displayName === ANONYMOUS_BACKER_LABEL;
+  const isAnonymous = entry.visibility === "ANONYMOUS";
+  const isPrivate = entry.visibility === "PRIVATE";
+
+  return (
+    <li
+      data-testid={`backer-row-${entry.rank}`}
+      className={`flex items-center gap-3 rounded-lg border p-3 ${
+        entry.isFeatured
+          ? "border-amber-600/50 bg-amber-950/20"
+          : "border-zinc-800 bg-zinc-950/50"
+      }`}
+    >
+      <div
+        className={`flex h-8 w-8 shrink-0 items-center justify-center rounded-md border text-xs font-bold ${
+          RANK_STYLES[entry.rank] ?? "border-zinc-700 bg-zinc-900 text-zinc-400"
+        }`}
+        aria-hidden="true"
+      >
+        {entry.rank <= 3 ? <Medal className="h-4 w-4" /> : entry.rank}
+      </div>
+
+      <div
+        className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full border border-zinc-700 bg-zinc-900 text-xs font-semibold text-zinc-300"
+        aria-hidden="true"
+      >
+        {identityHidden ? (
+          <EyeOff className="h-4 w-4 text-zinc-500" />
+        ) : (
+          backerInitials(entry.displayName, entry.backerAddress)
+        )}
+      </div>
+
+      <div className="min-w-0 flex-1">
+        <div className="flex flex-wrap items-center gap-1.5">
+          <span className="truncate text-sm font-semibold text-zinc-100">
+            {entry.isFeatured && <Star className="mr-1 inline h-3.5 w-3.5 fill-amber-400 text-amber-400" />}
+            {entry.displayName}
+          </span>
+          {entry.isFeatured && (
+            <Badge className="bg-amber-600/90 text-white text-[10px] px-1.5 py-0">Featured</Badge>
+          )}
+          {isAnonymous && (
+            <Badge variant="outline" className="border-zinc-600 text-zinc-400 text-[10px] px-1.5 py-0">
+              <EyeOff className="mr-1 h-2.5 w-2.5" /> Anonymous
+            </Badge>
+          )}
+          {isPrivate && (
+            <Badge variant="outline" className="border-zinc-600 text-zinc-400 text-[10px] px-1.5 py-0">
+              <Lock className="mr-1 h-2.5 w-2.5" /> Private
+            </Badge>
+          )}
+          {entry.isSelf && (
+            <Badge className="bg-purple-600 text-white text-[10px] px-1.5 py-0">You</Badge>
+          )}
+        </div>
+        <p className="truncate text-[11px] text-zinc-500">
+          {entry.backerAddress} · {entry.contributionCount} contribution{entry.contributionCount === 1 ? "" : "s"}
+        </p>
+        {entry.featureNote && (
+          <p className="mt-1 text-[11px] italic text-amber-200/80">&ldquo;{entry.featureNote}&rdquo;</p>
+        )}
+        {!entry.featureNote && entry.message && (
+          <p className="mt-1 truncate text-[11px] italic text-zinc-400">&ldquo;{entry.message}&rdquo;</p>
+        )}
+      </div>
+
+      <div className="flex shrink-0 flex-col items-end gap-1">
+        <span className="text-sm font-bold text-zinc-100">
+          {entry.totalAmount === null ? (
+            <span className="text-xs font-medium text-zinc-500">{HIDDEN_AMOUNT_LABEL}</span>
+          ) : (
+            <>
+              {formatBackerAmount(entry.totalAmount)}
+              <span className="ml-1 text-[11px] font-medium text-zinc-400">{entry.token}</span>
+            </>
+          )}
+        </span>
+        {canFeature && (
+          <Button
+            type="button"
+            size="xs"
+            variant="outline"
+            aria-pressed={entry.isFeatured}
+            disabled={featureDisabled}
+            onClick={onToggleFeatured}
+            className="border-zinc-700 text-[10px] text-zinc-300 hover:bg-zinc-800"
+          >
+            <Star className={entry.isFeatured ? "fill-amber-400 text-amber-400" : ""} />
+            {entry.isFeatured ? "Un-feature" : "Feature"}
+          </Button>
+        )}
+      </div>
+    </li>
+  );
+}
+
+export default TopBackers;
diff --git a/apps/web/src/components/modules/campaign/community/BackerCommunity.tsx b/apps/web/src/components/modules/campaign/community/BackerCommunity.tsx
index ff562cea..23add60d 100644
--- a/apps/web/src/components/modules/campaign/community/BackerCommunity.tsx
+++ b/apps/web/src/components/modules/campaign/community/BackerCommunity.tsx
@@ -21,7 +21,7 @@ import { useCampaignCommunity } from "@/hooks/use-campaign-community";
 export interface BackerCommunityProps {
   campaignId: string;
   currentUserAddress?: string;
-  canManage?: bool;
+  canManage?: boolean;
 }
 
 const PLATFORM_ICON: Record<CommunityPlatform, React.ReactNode> = {
@@ -127,7 +127,7 @@ export function BackerCommunity({
         </div>
       )}
 
-      {community.spaces.isEmpty ? (
+      {community.spaces.length === 0 ? (
         <p className="text-xs text-zinc-500 py-2">
           No community spaces linked yet.
         </p>
diff --git a/apps/web/src/components/modules/campaign/success-stories/SuccessStories.tsx b/apps/web/src/components/modules/campaign/success-stories/SuccessStories.tsx
index c76e0a1b..25995f48 100644
--- a/apps/web/src/components/modules/campaign/success-stories/SuccessStories.tsx
+++ b/apps/web/src/components/modules/campaign/success-stories/SuccessStories.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import React, { useEffect, useState } from "react";
-import { Trophy, Star, Quote, Users, Heart } from "lucide-react";
+import { Trophy, Star, Quote, Users } from "lucide-react";
 import { Badge } from "@/components/ui/badge";
 import { getSuccessStories, SuccessStory } from "@/services/campaign-success.service";
 
@@ -54,11 +54,11 @@ export default function SuccessStories() {
       <div className="border-b border-zinc-800 pb-4">
         <h2 className="text-2xl font-extrabold text-zinc-50 tracking-tight flex items-center gap-2">
           <Trophy className="h-6 w-6 text-amber-400" />
-          Success Stories</h2>
-          <p className="mt-1 text-sm text-zinc-400">
-            Campaigns that shipped and delivered real impact. Hear directly from creators and backers.
-          </p>
-        </div>
+          Success Stories
+        </h2>
+        <p className="mt-1 text-sm text-zinc-400">
+          Campaigns that shipped and delivered real impact. Hear directly from creators and backers.
+        </p>
       </div>
 
       <div className="grid grid-cols-1 md-grid-cols-2 gap-6">
diff --git a/apps/web/src/components/organisms/wallet-modal.tsx b/apps/web/src/components/organisms/wallet-modal.tsx
index e53b4184..bfd8548a 100644
--- a/apps/web/src/components/organisms/wallet-modal.tsx
+++ b/apps/web/src/components/organisms/wallet-modal.tsx
@@ -125,8 +125,6 @@ export function WalletModal() {
     <Dialog open={isModalOpen} onOpenChange={(open) => !open && closeModal()}>
       <DialogContent
         onCloseAutoFocus={handleCloseAutoFocus}
-        className="max-w-md p-1 overflow-hidden border-white/10 bg-[#0F1621] rounded-3xl shadow-2xl"
-      >
         className="w-full max-w-sm sm:max-w-md p-1 overflow-hidden border-white/10 bg-[#0F1621] rounded-3xl shadow-2xl mx-4 sm:mx-auto"
         aria-modal="true"
       >
@@ -158,7 +156,6 @@ export function WalletModal() {
                 <button
                   key={wallet.id}
                   type="button"
-                  aria-pressed={isSelected}
                   role="radio"
                   aria-checked={isSelected}
                   onClick={() => setActiveSelection(wallet.id)}
diff --git a/apps/web/src/hooks/use-top-backers.ts b/apps/web/src/hooks/use-top-backers.ts
new file mode 100644
index 00000000..99ab89ab
--- /dev/null
+++ b/apps/web/src/hooks/use-top-backers.ts
@@ -0,0 +1,133 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import {
+  BackerPrivacyPreference,
+  BackerVisibility,
+  TOP_BACKERS_LIMIT,
+  TopBackersResult,
+} from "@/types/campaign-backers";
+import { backersService, seedDemoBackers } from "@/services/campaign-backers.service";
+
+export interface UseTopBackersOptions {
+  campaignId: string;
+  /** Address of the person viewing the page. */
+  viewerAddress?: string;
+  /** Campaign creator address — creators may feature backers. */
+  creatorAddress?: string;
+  limit?: number;
+  /** Seed the mock campaign's demo backers (campaign detail page demo data). */
+  seedDemoData?: boolean;
+}
+
+const sameAddress = (a?: string, b?: string) =>
+  Boolean(a && b && a.trim().toLowerCase() === b.trim().toLowerCase());
+
+/**
+ * Top backers leaderboard — ranks a campaign's backers by total contribution,
+ * lets the creator feature up to a handful of them, and applies each backer's
+ * privacy preference before anything reaches the UI.
+ */
+export function useTopBackers({
+  campaignId,
+  viewerAddress,
+  creatorAddress,
+  limit = TOP_BACKERS_LIMIT,
+  seedDemoData = true,
+}: UseTopBackersOptions) {
+  const [prevCampaignId, setPrevCampaignId] = useState(campaignId);
+  const [error, setError] = useState<string | null>(null);
+
+  const loadResult = useCallback((): TopBackersResult => {
+    if (seedDemoData) seedDemoBackers(campaignId);
+    return backersService.getTopBackers(campaignId, { limit, viewerAddress, creatorAddress });
+  }, [campaignId, limit, viewerAddress, creatorAddress, seedDemoData]);
+
+  const [result, setResult] = useState<TopBackersResult>(loadResult);
+
+  if (prevCampaignId !== campaignId) {
+    setPrevCampaignId(campaignId);
+    setResult(loadResult());
+    setError(null);
+  }
+
+  // Refresh the leaderboard without touching the current error banner — the
+  // caller decides whether an action succeeded.
+  const reload = useCallback(() => {
+    setResult(loadResult());
+  }, [loadResult]);
+
+  const creator = creatorAddress ?? backersService.getCampaignCreator(campaignId) ?? undefined;
+  const isCreator = sameAddress(viewerAddress, creator);
+
+  const toggleFeatured = useCallback(
+    (backerAddress: string, note?: string) => {
+      if (!viewerAddress) {
+        const message = "Connect your wallet to feature backers";
+        setError(message);
+        return { ok: false as const, error: message };
+      }
+
+      const outcome = backersService.toggleFeatured({
+        campaignId,
+        backerAddress,
+        featuredBy: viewerAddress,
+        campaignCreator: creator,
+        note,
+      });
+      setError(outcome.ok ? null : outcome.error);
+      reload();
+      return outcome;
+    },
+    [campaignId, viewerAddress, creator, reload],
+  );
+
+  const setPrivacy = useCallback(
+    (
+      backerAddress: string,
+      update: { visibility?: BackerVisibility; showAmount?: boolean; allowFeaturing?: boolean },
+    ) => {
+      try {
+        const outcome = backersService.setPrivacyPreference({
+          campaignId,
+          backerAddress,
+          ...update,
+        });
+        setError(null);
+        reload();
+        return { ok: true as const, ...outcome };
+      } catch (err) {
+        const message = err instanceof Error ? err.message : "Failed to update privacy preference";
+        setError(message);
+        return { ok: false as const, error: message };
+      }
+    },
+    [campaignId, reload],
+  );
+
+  // Match on the service's `isSelf` flag rather than the address: an anonymous
+  // row has its address redacted, so address matching would lose the viewer's
+  // own entry (and with it their privacy controls).
+  const myEntry = result.backers.find((entry) => entry.isSelf);
+
+  const myPrivacy: BackerPrivacyPreference | undefined = viewerAddress
+    ? backersService.getPrivacyPreference(campaignId, viewerAddress)
+    : undefined;
+
+  return {
+    result,
+    backers: result.backers,
+    totalBackers: result.totalBackers,
+    privateBackers: result.privateBackers,
+    totalAmount: result.totalAmount,
+    featuredCount: result.featuredCount,
+    isCreator,
+    creatorAddress: creator,
+    myEntry,
+    myPrivacy,
+    error,
+    toggleFeatured,
+    setPrivacy,
+    reload,
+  };
+}
diff --git a/apps/web/src/lib/co2-impact.ts b/apps/web/src/lib/co2-impact.ts
index 19cae5cd..5e8a11f2 100644
--- a/apps/web/src/lib/co2-impact.ts
+++ b/apps/web/src/lib/co2-impact.ts
@@ -23,13 +23,6 @@ export function getTreeSpecies(id: string): TreeSpecies {
   return TREE_SPECIES.find((s) => s.id === id) ?? TREE_SPECIES[0];
 }
 
-export function calculateCo2Offset(speciesId: string, quantity: number) {
-  const safeQuantity = Number.isFinite(quantity) ? Math.max(0, quantity) : 0;
-  const species = getTreeSpecies(speciesId);
-  const co2PerYearKg = safeQuantity * species.co2PerTreePerYearKg;
-  return TREE_SPECIES.find((species) => species.id === id) ?? TREE_SPECIES[0];
-}
-
 export interface Co2ImpactResult {
   speciesId: string;
   speciesLabel: string;
@@ -68,8 +61,7 @@ export function calculateCo2Offset(
     co2PerYearKg,
     co2PerYearTonnes: co2PerYearKg / 1000,
     co2Over10YearsKg,
-    corOver10YearsTonnes: co2Over10YearsKg / 1000,
+    co2Over10YearsTonnes: co2Over10YearsKg / 1000,
     carKmEquivalentPerYear: Math.round(co2PerYearKg / CAR_CO2_KG_PER_KM),
   };
 }
-  return TREE_SPECIES[0] : {return TREE_SPECIEENTRY : {id: "oak", label: "Oak", co2PerTreePerYearKg: 21 }} }
diff --git a/apps/web/src/services/campaign-backers.service.test.ts b/apps/web/src/services/campaign-backers.service.test.ts
new file mode 100644
index 00000000..f95e697f
--- /dev/null
+++ b/apps/web/src/services/campaign-backers.service.test.ts
@@ -0,0 +1,363 @@
+import { beforeEach, describe, expect, it } from "vitest";
+import { backersService, seedDemoBackers, DEMO_CAMPAIGN_ID, DEMO_CREATOR_ADDRESS } from "./campaign-backers.service";
+import {
+  ANONYMOUS_BACKER_LABEL,
+  HIDDEN_ADDRESS_LABEL,
+  MAX_FEATURED_BACKERS,
+  TOP_BACKERS_LIMIT,
+  backerInitials,
+  canBeFeatured,
+  formatBackerAmount,
+  formatTokenAmount,
+  parseTokenAmount,
+  sumTokenAmounts,
+} from "@/types/campaign-backers";
+
+const CAMPAIGN = "camp-test";
+const CREATOR = "GCREATOR...AAAA";
+const ALICE = "GALICE...AAAA";
+const BOB = "GBOB...BBBB";
+const CAROL = "GCAROL...CCCC";
+const DAVE = "GDAVE...DDDD";
+
+function seedBasic() {
+  backersService.registerCampaignCreator(CAMPAIGN, CREATOR);
+  backersService.recordContribution({ campaignId: CAMPAIGN, backerAddress: ALICE, amount: "100", token: "XLM", contributedAt: 1_000, displayName: "Alice Adams" });
+  backersService.recordContribution({ campaignId: CAMPAIGN, backerAddress: BOB, amount: "500", token: "XLM", contributedAt: 2_000, displayName: "Bob Bale" });
+  backersService.recordContribution({ campaignId: CAMPAIGN, backerAddress: CAROL, amount: "250.5", token: "USDC", contributedAt: 3_000, displayName: "Carol Cruz" });
+  backersService.recordContribution({ campaignId: CAMPAIGN, backerAddress: DAVE, amount: "250.5", token: "USDC", contributedAt: 4_000, displayName: "Dave Diaz" });
+}
+
+describe("campaign-backers.service — contributions", () => {
+  beforeEach(() => backersService.reset());
+
+  it("rejects contributions without an address or a positive amount", () => {
+    expect(() => backersService.recordContribution({ campaignId: CAMPAIGN, backerAddress: "", amount: "10" }))
+      .toThrow(/backerAddress is required/);
+    expect(() => backersService.recordContribution({ campaignId: CAMPAIGN, backerAddress: ALICE, amount: "0" }))
+      .toThrow(/positive contribution amount/);
+    expect(() => backersService.recordContribution({ campaignId: CAMPAIGN, backerAddress: ALICE, amount: "abc" }))
+      .toThrow(/positive contribution amount/);
+    expect(() => backersService.recordContribution({ campaignId: "", backerAddress: ALICE, amount: "10" }))
+      .toThrow(/campaignId is required/);
+  });
+
+  it("defaults new backers to a public, featureable preference", () => {
+    backersService.recordContribution({ campaignId: CAMPAIGN, backerAddress: ALICE, amount: "10" });
+    const preference = backersService.getPrivacyPreference(CAMPAIGN, ALICE);
+    expect(preference.visibility).toBe("PUBLIC");
+    expect(preference.showAmount).toBe(true);
+    expect(preference.allowFeaturing).toBe(true);
+    expect(canBeFeatured(preference)).toBe(true);
+  });
+});
+
+describe("campaign-backers.service — ranking", () => {
+  beforeEach(() => {
+    backersService.reset();
+    seedBasic();
+  });
+
+  it("ranks backers by total contributed amount", () => {
+    const { backers } = backersService.getTopBackers(CAMPAIGN);
+    expect(backers.map((entry) => entry.displayName)).toEqual([
+      "Bob Bale",
+      "Carol Cruz",
+      "Dave Diaz",
+      "Alice Adams",
+    ]);
+    expect(backers.map((entry) => entry.rank)).toEqual([1, 2, 3, 4]);
+  });
+
+  it("breaks amount ties by earliest contribution, then address", () => {
+    const { backers } = backersService.getTopBackers(CAMPAIGN);
+    // Carol and Dave both gave 250.5 — Carol contributed first.
+    expect(backers[1].displayName).toBe("Carol Cruz");
+    expect(backers[2].displayName).toBe("Dave Diaz");
+  });
+
+  it("sums multiple contributions from the same backer", () => {
+    backersService.recordContribution({ campaignId: CAMPAIGN, backerAddress: ALICE, amount: "900", token: "XLM", contributedAt: 5_000 });
+    const { backers } = backersService.getTopBackers(CAMPAIGN);
+    const alice = backers.find((entry) => entry.displayName === "Alice Adams");
+    expect(alice?.rank).toBe(1);
+    expect(alice?.totalAmount).toBe("1000");
+    expect(alice?.contributionCount).toBe(2);
+  });
+
+  it("defaults to the top 10 and accepts a custom limit", () => {
+    for (let i = 0; i < 15; i += 1) {
+      backersService.recordContribution({
+        campaignId: CAMPAIGN,
+        backerAddress: `GEXTRA${i}...ZZZZ`,
+        amount: String(1000 + i),
+        contributedAt: 10_000 + i,
+      });
+    }
+    const top = backersService.getTopBackers(CAMPAIGN);
+    expect(top.limit).toBe(TOP_BACKERS_LIMIT);
+    expect(top.backers).toHaveLength(TOP_BACKERS_LIMIT);
+    expect(top.totalBackers).toBe(19);
+    // Biggest contributor is first even though it was recorded last.
+    expect(top.backers[0].totalAmount).toBe("1014");
+
+    expect(backersService.getTopBackers(CAMPAIGN, { limit: 3 }).backers).toHaveLength(3);
+  });
+
+  it("reports the aggregate amount and backer count", () => {
+    const result = backersService.getTopBackers(CAMPAIGN);
+    expect(result.totalBackers).toBe(4);
+    expect(result.totalAmount).toBe("1101");
+  });
+});
+
+describe("campaign-backers.service — privacy preferences", () => {
+  beforeEach(() => {
+    backersService.reset();
+    seedBasic();
+  });
+
+  it("keeps an anonymous backer ranked but redacts their identity", () => {
+    backersService.setPrivacyPreference({ campaignId: CAMPAIGN, backerAddress: BOB, visibility: "ANONYMOUS" });
+    const { backers } = backersService.getTopBackers(CAMPAIGN);
+
+    expect(backers[0].rank).toBe(1);
+    expect(backers[0].displayName).toBe(ANONYMOUS_BACKER_LABEL);
+    expect(backers[0].backerAddress).toBe(HIDDEN_ADDRESS_LABEL);
+    expect(backers[0].avatarUrl).toBeUndefined();
+    expect(backers[0].message).toBeUndefined();
+    // Amount still shown by default when only the identity is hidden.
+    expect(backers[0].totalAmount).toBe("500");
+    expect(backers[0].amountVisible).toBe(true);
+  });
+
+  it("hides the amount for anonymous backers who opt out of showing it", () => {
+    backersService.setPrivacyPreference({
+      campaignId: CAMPAIGN,
+      backerAddress: BOB,
+      visibility: "ANONYMOUS",
+      showAmount: false,
+    });
+    const { backers } = backersService.getTopBackers(CAMPAIGN);
+    expect(backers[0].totalAmount).toBeNull();
+    expect(backers[0].amountVisible).toBe(false);
+  });
+
+  it("excludes private backers from the public board but still counts them", () => {
+    backersService.setPrivacyPreference({ campaignId: CAMPAIGN, backerAddress: BOB, visibility: "PRIVATE" });
+    const result = backersService.getTopBackers(CAMPAIGN);
+
+    expect(result.backers.map((entry) => entry.displayName)).not.toContain("Bob Bale");
+    expect(result.privateBackers).toBe(1);
+    expect(result.totalBackers).toBe(4);
+    // Private backers do not leave a gap: the next backer becomes rank 1.
+    expect(result.backers[0]).toMatchObject({ rank: 1, displayName: "Carol Cruz" });
+    // The aggregate still includes their contribution.
+    expect(result.totalAmount).toBe("1101");
+  });
+
+  it("shows the creator the unredacted board, including private backers", () => {
+    backersService.setPrivacyPreference({ campaignId: CAMPAIGN, backerAddress: BOB, visibility: "PRIVATE" });
+    backersService.setPrivacyPreference({ campaignId: CAMPAIGN, backerAddress: CAROL, visibility: "ANONYMOUS", showAmount: false });
+
+    const creatorView = backersService.getTopBackers(CAMPAIGN, { viewerAddress: CREATOR, creatorAddress: CREATOR });
+    expect(creatorView.privateBackers).toBe(0);
+    expect(creatorView.backers.map((entry) => entry.displayName)).toContain("Bob Bale");
+    const carol = creatorView.backers.find((entry) => entry.displayName === "Carol Cruz");
+    expect(carol?.totalAmount).toBe("250.5");
+
+    const publicView = backersService.getTopBackers(CAMPAIGN);
+    expect(publicView.privateBackers).toBe(1);
+    expect(publicView.backers[0].displayName).toBe(ANONYMOUS_BACKER_LABEL);
+    expect(publicView.backers[0].totalAmount).toBeNull();
+  });
+
+  it("lets a backer see their own row even when they are private", () => {
+    backersService.setPrivacyPreference({ campaignId: CAMPAIGN, backerAddress: BOB, visibility: "PRIVATE" });
+    const selfView = backersService.getTopBackers(CAMPAIGN, { viewerAddress: BOB });
+    const bob = selfView.backers.find((entry) => entry.isSelf);
+    expect(bob?.displayName).toBe("Bob Bale");
+    expect(bob?.backerAddress).toBe(BOB);
+    expect(bob?.visibility).toBe("PRIVATE");
+  });
+
+  it("rejects an unknown visibility value", () => {
+    expect(() =>
+      backersService.setPrivacyPreference({ campaignId: CAMPAIGN, backerAddress: BOB, visibility: "SEMI" as never }),
+    ).toThrow(/Unknown visibility/);
+  });
+});
+
+describe("campaign-backers.service — creator featuring", () => {
+  beforeEach(() => {
+    backersService.reset();
+    seedBasic();
+  });
+
+  it("lets the campaign creator feature a backer and pins them to the top", () => {
+    const result = backersService.featureBacker({
+      campaignId: CAMPAIGN,
+      backerAddress: ALICE,
+      featuredBy: CREATOR,
+      note: "First believer in the reserve.",
+    });
+    expect(result.ok).toBe(true);
+
+    const { backers, featuredCount } = backersService.getTopBackers(CAMPAIGN);
+    expect(featuredCount).toBe(1);
+    expect(backers[0].displayName).toBe("Alice Adams");
+    expect(backers[0].isFeatured).toBe(true);
+    expect(backers[0].featureNote).toBe("First believer in the reserve.");
+    // Alice is the smallest backer — she keeps the rank she earned by amount.
+    expect(backers[0].rank).toBe(4);
+  });
+
+  it("refuses to let anyone but the creator feature backers", () => {
+    const result = backersService.featureBacker({ campaignId: CAMPAIGN, backerAddress: ALICE, featuredBy: BOB });
+    expect(result.ok).toBe(false);
+    if (!result.ok) expect(result.error).toMatch(/Only the campaign creator/);
+    expect(backersService.getFeaturedBackers(CAMPAIGN)).toHaveLength(0);
+  });
+
+  it("refuses to feature an address that never contributed", () => {
+    const result = backersService.featureBacker({ campaignId: CAMPAIGN, backerAddress: "GNOBODY...ZZZZ", featuredBy: CREATOR });
+    expect(result.ok).toBe(false);
+    if (!result.ok) expect(result.error).toMatch(/has not contributed/);
+  });
+
+  it("refuses to feature anonymous or private backers", () => {
+    backersService.setPrivacyPreference({ campaignId: CAMPAIGN, backerAddress: BOB, visibility: "ANONYMOUS" });
+    const anonymous = backersService.featureBacker({ campaignId: CAMPAIGN, backerAddress: BOB, featuredBy: CREATOR });
+    expect(anonymous.ok).toBe(false);
+    if (!anonymous.ok) expect(anonymous.error).toMatch(/opted out/);
+
+    backersService.setPrivacyPreference({ campaignId: CAMPAIGN, backerAddress: CAROL, visibility: "PRIVATE" });
+    const privateBacker = backersService.featureBacker({ campaignId: CAMPAIGN, backerAddress: CAROL, featuredBy: CREATOR });
+    expect(privateBacker.ok).toBe(false);
+    if (!privateBacker.ok) expect(privateBacker.error).toMatch(/private/);
+  });
+
+  it("refuses to feature a backer who disabled featuring while staying public", () => {
+    backersService.setPrivacyPreference({ campaignId: CAMPAIGN, backerAddress: BOB, allowFeaturing: false });
+    const result = backersService.featureBacker({ campaignId: CAMPAIGN, backerAddress: BOB, featuredBy: CREATOR });
+    expect(result.ok).toBe(false);
+    if (!result.ok) expect(result.error).toMatch(/opted out/);
+  });
+
+  it(`caps featuring at ${MAX_FEATURED_BACKERS} backers`, () => {
+    expect(backersService.featureBacker({ campaignId: CAMPAIGN, backerAddress: BOB, featuredBy: CREATOR }).ok).toBe(true);
+    expect(backersService.featureBacker({ campaignId: CAMPAIGN, backerAddress: CAROL, featuredBy: CREATOR }).ok).toBe(true);
+    expect(backersService.featureBacker({ campaignId: CAMPAIGN, backerAddress: DAVE, featuredBy: CREATOR }).ok).toBe(true);
+
+    const overflow = backersService.featureBacker({ campaignId: CAMPAIGN, backerAddress: ALICE, featuredBy: CREATOR });
+    expect(overflow.ok).toBe(false);
+    if (!overflow.ok) expect(overflow.error).toMatch(/up to 3/);
+    expect(backersService.getFeaturedBackers(CAMPAIGN)).toHaveLength(MAX_FEATURED_BACKERS);
+  });
+
+  it("is idempotent when re-featuring the same backer", () => {
+    backersService.featureBacker({ campaignId: CAMPAIGN, backerAddress: BOB, featuredBy: CREATOR, note: "First" });
+    backersService.featureBacker({ campaignId: CAMPAIGN, backerAddress: BOB, featuredBy: CREATOR, note: "Updated" });
+    const featured = backersService.getFeaturedBackers(CAMPAIGN);
+    expect(featured).toHaveLength(1);
+    expect(featured[0].note).toBe("Updated");
+  });
+
+  it("removes a feature when the creator un-features or toggles", () => {
+    backersService.featureBacker({ campaignId: CAMPAIGN, backerAddress: BOB, featuredBy: CREATOR });
+    expect(backersService.isFeatured(CAMPAIGN, BOB)).toBe(true);
+
+    const removed = backersService.unfeatureBacker({ campaignId: CAMPAIGN, backerAddress: BOB, featuredBy: CREATOR });
+    expect(removed.ok && removed.value.removed).toBe(true);
+    expect(backersService.isFeatured(CAMPAIGN, BOB)).toBe(false);
+
+    // toggleFeatured flips both ways.
+    backersService.toggleFeatured({ campaignId: CAMPAIGN, backerAddress: BOB, featuredBy: CREATOR });
+    expect(backersService.isFeatured(CAMPAIGN, BOB)).toBe(true);
+    backersService.toggleFeatured({ campaignId: CAMPAIGN, backerAddress: BOB, featuredBy: CREATOR });
+    expect(backersService.isFeatured(CAMPAIGN, BOB)).toBe(false);
+  });
+
+  it("drops the feature automatically when the backer tightens their privacy", () => {
+    backersService.featureBacker({ campaignId: CAMPAIGN, backerAddress: BOB, featuredBy: CREATOR });
+    expect(backersService.isFeatured(CAMPAIGN, BOB)).toBe(true);
+
+    const { removedFromFeatured } = backersService.setPrivacyPreference({
+      campaignId: CAMPAIGN,
+      backerAddress: BOB,
+      visibility: "ANONYMOUS",
+    });
+
+    expect(removedFromFeatured).toBe(true);
+    expect(backersService.isFeatured(CAMPAIGN, BOB)).toBe(false);
+    expect(backersService.getFeaturedBackers(CAMPAIGN)).toHaveLength(0);
+  });
+
+  it("keeps the feature when the backer stays public", () => {
+    backersService.featureBacker({ campaignId: CAMPAIGN, backerAddress: BOB, featuredBy: CREATOR });
+    const { removedFromFeatured } = backersService.setPrivacyPreference({
+      campaignId: CAMPAIGN,
+      backerAddress: BOB,
+      showAmount: false,
+    });
+    expect(removedFromFeatured).toBe(false);
+    expect(backersService.isFeatured(CAMPAIGN, BOB)).toBe(true);
+  });
+
+  it("requires a known campaign creator before featuring is possible", () => {
+    backersService.reset();
+    backersService.recordContribution({ campaignId: CAMPAIGN, backerAddress: BOB, amount: "10" });
+    const result = backersService.featureBacker({ campaignId: CAMPAIGN, backerAddress: BOB, featuredBy: CREATOR });
+    expect(result.ok).toBe(false);
+    if (!result.ok) expect(result.error).toMatch(/creator is unknown/);
+  });
+});
+
+describe("campaign-backers.service — demo seed data", () => {
+  beforeEach(() => backersService.reset());
+
+  it("seeds the mock campaign once with privacy variety", () => {
+    expect(seedDemoBackers()).toBe(true);
+    expect(seedDemoBackers()).toBe(false);
+
+    const result = backersService.getTopBackers(DEMO_CAMPAIGN_ID);
+    expect(result.backers).toHaveLength(TOP_BACKERS_LIMIT);
+    expect(result.privateBackers).toBe(1);
+    expect(result.backers.some((entry) => entry.displayName === ANONYMOUS_BACKER_LABEL)).toBe(true);
+    expect(backersService.getCampaignCreator(DEMO_CAMPAIGN_ID)).toBe(DEMO_CREATOR_ADDRESS);
+  });
+
+  it("does not touch other campaigns", () => {
+    expect(seedDemoBackers("camp-other")).toBe(false);
+    expect(backersService.hasContributions("camp-other")).toBe(false);
+  });
+});
+
+describe("campaign-backers types — amount helpers", () => {
+  it("parses and formats decimal amounts without float drift", () => {
+    expect(parseTokenAmount("0.1")).toBe(1_000_000n);
+    expect(parseTokenAmount("250.5")).toBe(2_505_000_000n);
+    expect(formatTokenAmount(2_505_000_000n)).toBe("250.5");
+    expect(formatTokenAmount(1_000_000_000n)).toBe("100");
+    expect(parseTokenAmount("abc")).toBeNull();
+    expect(parseTokenAmount("")).toBeNull();
+    expect(parseTokenAmount(undefined)).toBeNull();
+  });
+
+  it("sums amounts exactly and ignores malformed entries", () => {
+    expect(sumTokenAmounts(["0.1", "0.2"])).toBe("0.3");
+    expect(sumTokenAmounts(["100", "abc", null, "-5", "50.25"])).toBe("150.25");
+  });
+
+  it("groups amounts for display", () => {
+    expect(formatBackerAmount("1234567")).toBe("1,234,567");
+    expect(formatBackerAmount("1234.5")).toBe("1,234.5");
+    expect(formatBackerAmount(null)).toBe("Amount hidden");
+  });
+
+  it("derives avatar initials", () => {
+    expect(backerInitials("Alice Adams", "GALICE")).toBe("AA");
+    expect(backerInitials("Madonna", "GALICE")).toBe("M");
+    expect(backerInitials("", "GB88...K992")).toBe("GB");
+  });
+});
diff --git a/apps/web/src/services/campaign-backers.service.ts b/apps/web/src/services/campaign-backers.service.ts
new file mode 100644
index 00000000..4fad7224
--- /dev/null
+++ b/apps/web/src/services/campaign-backers.service.ts
@@ -0,0 +1,467 @@
+import {
+  ANONYMOUS_BACKER_LABEL,
+  BackerContribution,
+  BackerPrivacyPreference,
+  BackerVisibility,
+  FeaturedBacker,
+  FeatureBackerInput,
+  GetTopBackersOptions,
+  HIDDEN_ADDRESS_LABEL,
+  MAX_FEATURED_BACKERS,
+  RecordContributionInput,
+  SetPrivacyInput,
+  TOP_BACKERS_LIMIT,
+  TopBackerEntry,
+  TopBackersResult,
+  canBeFeatured,
+  defaultBackerPrivacy,
+  isBackerVisibility,
+  parseTokenAmount,
+  sumTokenAmounts,
+  formatTokenAmount,
+} from "@/types/campaign-backers";
+
+/**
+ * Top backers per campaign.
+ *
+ * Ranks every backer of a campaign by the total amount they contributed and
+ * exposes a privacy-aware view of the leaderboard:
+ *
+ *  - PRIVATE backers never appear publicly (they are only counted).
+ *  - ANONYMOUS backers keep their rank but are shown without a name, address
+ *    or avatar — and optionally without an amount.
+ *  - Campaign creators may feature up to {@link MAX_FEATURED_BACKERS} backers,
+ *    which pins them to the top of the list. Featuring is only possible for
+ *    backers that are PUBLIC and allow featuring, and a backer who changes
+ *    their preference is un-featured immediately (privacy wins).
+ *
+ * Mirrors the in-memory singleton pattern used by campaign-community.service
+ * and campaign-collaboration.service until a persistent data source lands.
+ */
+export type BackerActionResult<T> = { ok: true; value: T } | { ok: false; error: string };
+
+export interface BackerAggregate {
+  backerAddress: string;
+  totalScaled: bigint;
+  totalAmount: string;
+  contributionCount: number;
+  firstContributedAt: number;
+  lastContributedAt: number;
+  token: string;
+  displayName?: string;
+  avatarUrl?: string;
+  message?: string;
+}
+
+const sameAddress = (a?: string | null, b?: string | null) =>
+  Boolean(a && b && a.trim().toLowerCase() === b.trim().toLowerCase());
+
+class CampaignBackersService {
+  private contributions = new Map<string, BackerContribution[]>();
+  private preferences = new Map<string, BackerPrivacyPreference>();
+  private featured = new Map<string, FeaturedBacker[]>();
+  private creators = new Map<string, string>();
+
+  private prefKey(campaignId: string, backerAddress: string) {
+    return `${campaignId}:${backerAddress.trim().toLowerCase()}`;
+  }
+
+  // ---------------------------------------------------------------- creators
+
+  /** Register the campaign creator — required before backers can be featured. */
+  registerCampaignCreator(campaignId: string, creatorAddress: string): void {
+    if (!campaignId?.trim() || !creatorAddress?.trim()) return;
+    this.creators.set(campaignId.trim(), creatorAddress.trim());
+  }
+
+  getCampaignCreator(campaignId: string): string | undefined {
+    return this.creators.get(campaignId?.trim() ?? "");
+  }
+
+  // ----------------------------------------------------------- contributions
+
+  getContributions(campaignId: string): BackerContribution[] {
+    return [...(this.contributions.get(campaignId?.trim() ?? "") ?? [])];
+  }
+
+  hasContributions(campaignId: string): boolean {
+    return (this.contributions.get(campaignId?.trim() ?? "") ?? []).length > 0;
+  }
+
+  recordContribution(input: RecordContributionInput): BackerContribution {
+    const campaignId = input.campaignId?.trim();
+    const backerAddress = input.backerAddress?.trim();
+    if (!campaignId) throw new Error("campaignId is required");
+    if (!backerAddress) throw new Error("backerAddress is required");
+
+    const scaled = parseTokenAmount(input.amount);
+    if (scaled === null || scaled <= 0n) throw new Error("A positive contribution amount is required");
+
+    const contribution: BackerContribution = {
+      id: `bk-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+      campaignId,
+      backerAddress,
+      amount: String(input.amount).trim(),
+      token: (input.token?.trim() || "XLM").toUpperCase(),
+      contributedAt: input.contributedAt ?? Date.now(),
+      txHash: input.txHash?.trim() || undefined,
+      displayName: input.displayName?.trim() || undefined,
+      avatarUrl: input.avatarUrl?.trim() || undefined,
+      message: input.message?.trim() || undefined,
+    };
+
+    const list = this.contributions.get(campaignId) ?? [];
+    list.push(contribution);
+    this.contributions.set(campaignId, list);
+
+    // First contribution establishes the default (public) preference; an
+    // existing preference is always left untouched.
+    const key = this.prefKey(campaignId, backerAddress);
+    if (!this.preferences.has(key)) {
+      this.preferences.set(key, defaultBackerPrivacy(campaignId, backerAddress, contribution.contributedAt));
+    }
+
+    return contribution;
+  }
+
+  // ----------------------------------------------------------------- privacy
+
+  getPrivacyPreference(campaignId: string, backerAddress: string): BackerPrivacyPreference {
+    return (
+      this.preferences.get(this.prefKey(campaignId ?? "", backerAddress ?? "")) ??
+      defaultBackerPrivacy(campaignId ?? "", backerAddress ?? "")
+    );
+  }
+
+  setPrivacyPreference(
+    input: SetPrivacyInput,
+    now = Date.now(),
+  ): { preference: BackerPrivacyPreference; removedFromFeatured: boolean } {
+    const campaignId = input.campaignId?.trim();
+    const backerAddress = input.backerAddress?.trim();
+    if (!campaignId) throw new Error("campaignId is required");
+    if (!backerAddress) throw new Error("backerAddress is required");
+    if (input.visibility !== undefined && !isBackerVisibility(input.visibility)) {
+      throw new Error(`Unknown visibility: ${String(input.visibility)}`);
+    }
+
+    const current = this.getPrivacyPreference(campaignId, backerAddress);
+    const preference: BackerPrivacyPreference = {
+      ...current,
+      visibility: (input.visibility ?? current.visibility) as BackerVisibility,
+      showAmount: input.showAmount ?? current.showAmount,
+      allowFeaturing: input.allowFeaturing ?? current.allowFeaturing,
+      updatedAt: now,
+    };
+    this.preferences.set(this.prefKey(campaignId, backerAddress), preference);
+
+    // Privacy wins: a backer who is no longer publicly featureable must not
+    // stay pinned on the leaderboard.
+    let removedFromFeatured = false;
+    if (!canBeFeatured(preference)) {
+      removedFromFeatured = this.removeFeatured(campaignId, backerAddress);
+    }
+
+    return { preference, removedFromFeatured };
+  }
+
+  // ---------------------------------------------------------------- featuring
+
+  getFeaturedBackers(campaignId: string): FeaturedBacker[] {
+    return [...(this.featured.get(campaignId?.trim() ?? "") ?? [])];
+  }
+
+  isFeatured(campaignId: string, backerAddress: string): boolean {
+    return this.getFeaturedBackers(campaignId).some((entry) => sameAddress(entry.backerAddress, backerAddress));
+  }
+
+  private removeFeatured(campaignId: string, backerAddress: string): boolean {
+    const list = this.getFeaturedBackers(campaignId);
+    const updated = list.filter((entry) => !sameAddress(entry.backerAddress, backerAddress));
+    if (updated.length === list.length) return false;
+    this.featured.set(campaignId.trim(), updated);
+    return true;
+  }
+
+  featureBacker(input: FeatureBackerInput, now = Date.now()): BackerActionResult<FeaturedBacker> {
+    const campaignId = input.campaignId?.trim();
+    const backerAddress = input.backerAddress?.trim();
+    const featuredBy = input.featuredBy?.trim();
+    if (!campaignId) return { ok: false, error: "campaignId is required" };
+    if (!backerAddress) return { ok: false, error: "backerAddress is required" };
+    if (!featuredBy) return { ok: false, error: "featuredBy is required" };
+
+    const creator = (input.campaignCreator?.trim() || this.getCampaignCreator(campaignId) || "").trim();
+    if (!creator) return { ok: false, error: "Campaign creator is unknown — cannot feature backers" };
+    if (!sameAddress(creator, featuredBy)) {
+      return { ok: false, error: "Only the campaign creator can feature backers" };
+    }
+
+    if (!this.hasBacker(campaignId, backerAddress)) {
+      return { ok: false, error: "This address has not contributed to the campaign" };
+    }
+
+    const preference = this.getPrivacyPreference(campaignId, backerAddress);
+    if (preference.visibility === "PRIVATE") {
+      return { ok: false, error: "This backer keeps their support private and cannot be featured" };
+    }
+    if (!canBeFeatured(preference)) {
+      return { ok: false, error: "This backer opted out of being featured" };
+    }
+
+    const existing = this.getFeaturedBackers(campaignId).find((entry) =>
+      sameAddress(entry.backerAddress, backerAddress),
+    );
+    if (existing) {
+      const updated: FeaturedBacker = {
+        ...existing,
+        featuredAt: now,
+        note: input.note?.trim() ? input.note.trim() : existing.note,
+      };
+      this.replaceFeatured(campaignId, updated);
+      return { ok: true, value: updated };
+    }
+
+    const list = this.getFeaturedBackers(campaignId);
+    if (list.length >= MAX_FEATURED_BACKERS) {
+      return {
+        ok: false,
+        error: `You can feature up to ${MAX_FEATURED_BACKERS} backers — un-feature one first`,
+      };
+    }
+
+    const featured: FeaturedBacker = {
+      campaignId,
+      backerAddress,
+      featuredBy,
+      featuredAt: now,
+      note: input.note?.trim() || undefined,
+    };
+    list.push(featured);
+    this.featured.set(campaignId, list);
+    return { ok: true, value: featured };
+  }
+
+  unfeatureBacker(
+    input: Omit<FeatureBackerInput, "note">,
+  ): BackerActionResult<{ removed: boolean }> {
+    const campaignId = input.campaignId?.trim();
+    const backerAddress = input.backerAddress?.trim();
+    const featuredBy = input.featuredBy?.trim();
+    if (!campaignId) return { ok: false, error: "campaignId is required" };
+    if (!backerAddress) return { ok: false, error: "backerAddress is required" };
+    if (!featuredBy) return { ok: false, error: "featuredBy is required" };
+
+    const creator = (input.campaignCreator?.trim() || this.getCampaignCreator(campaignId) || "").trim();
+    if (!creator) return { ok: false, error: "Campaign creator is unknown — cannot feature backers" };
+    if (!sameAddress(creator, featuredBy)) {
+      return { ok: false, error: "Only the campaign creator can feature backers" };
+    }
+
+    return { ok: true, value: { removed: this.removeFeatured(campaignId, backerAddress) } };
+  }
+
+  /** Creator-facing toggle used by the leaderboard UI. */
+  toggleFeatured(input: FeatureBackerInput, now = Date.now()): BackerActionResult<FeaturedBacker | { removed: boolean }> {
+    const campaignId = input.campaignId?.trim();
+    const backerAddress = input.backerAddress?.trim();
+    if (!campaignId || !backerAddress) return { ok: false, error: "campaignId and backerAddress are required" };
+    if (this.isFeatured(campaignId, backerAddress)) return this.unfeatureBacker(input);
+    return this.featureBacker(input, now);
+  }
+
+  private replaceFeatured(campaignId: string, entry: FeaturedBacker): void {
+    const list = this.getFeaturedBackers(campaignId).map((item) =>
+      sameAddress(item.backerAddress, entry.backerAddress) ? entry : item,
+    );
+    this.featured.set(campaignId.trim(), list);
+  }
+
+  private hasBacker(campaignId: string, backerAddress: string): boolean {
+    return this.getContributions(campaignId).some((entry) => sameAddress(entry.backerAddress, backerAddress));
+  }
+
+  // --------------------------------------------------------------- leaderboard
+
+  /** Aggregate contributions per backer, ordered by total amount (desc). */
+  aggregateBackers(campaignId: string): BackerAggregate[] {
+    const byAddress = new Map<string, BackerAggregate>();
+
+    for (const contribution of this.getContributions(campaignId)) {
+      const key = contribution.backerAddress.trim().toLowerCase();
+      const scaled = parseTokenAmount(contribution.amount);
+      if (scaled === null || scaled <= 0n) continue;
+
+      const existing = byAddress.get(key);
+      if (existing) {
+        existing.totalScaled += scaled;
+        existing.totalAmount = formatTokenAmount(existing.totalScaled);
+        existing.contributionCount += 1;
+        existing.firstContributedAt = Math.min(existing.firstContributedAt, contribution.contributedAt);
+        existing.lastContributedAt = Math.max(existing.lastContributedAt, contribution.contributedAt);
+        existing.displayName = contribution.displayName ?? existing.displayName;
+        existing.avatarUrl = contribution.avatarUrl ?? existing.avatarUrl;
+        existing.message = contribution.message ?? existing.message;
+      } else {
+        byAddress.set(key, {
+          backerAddress: contribution.backerAddress,
+          totalScaled: scaled,
+          totalAmount: formatTokenAmount(scaled),
+          contributionCount: 1,
+          firstContributedAt: contribution.contributedAt,
+          lastContributedAt: contribution.contributedAt,
+          token: contribution.token,
+          displayName: contribution.displayName,
+          avatarUrl: contribution.avatarUrl,
+          message: contribution.message,
+        });
+      }
+    }
+
+    return Array.from(byAddress.values())
+      .sort(
+        (a, b) =>
+          (a.totalScaled < b.totalScaled ? 1 : a.totalScaled > b.totalScaled ? -1 : 0) ||
+          a.firstContributedAt - b.firstContributedAt ||
+          a.backerAddress.localeCompare(b.backerAddress),
+      );
+  }
+
+  /**
+   * Privacy-aware top backers list.
+   *
+   * Ranks are assigned by amount across the rows the viewer is allowed to see,
+   * so private backers never leak a gap in the ranking. Featured backers are
+   * pinned to the top while keeping the rank they earned by amount.
+   */
+  getTopBackers(campaignId: string, options: GetTopBackersOptions = {}, now = Date.now()): TopBackersResult {
+    const id = campaignId?.trim() ?? "";
+    const limit = Math.min(Math.max(Math.trunc(options.limit ?? TOP_BACKERS_LIMIT), 1), 100);
+    const viewerAddress = options.viewerAddress?.trim();
+    const creatorAddress = options.creatorAddress?.trim() || this.getCampaignCreator(id);
+    const viewerIsCreator = sameAddress(viewerAddress, creatorAddress);
+    const includePrivate = options.includePrivate ?? viewerIsCreator;
+
+    const featuredList = this.getFeaturedBackers(id);
+    const aggregates = this.aggregateBackers(id);
+
+    const totalAmount = sumTokenAmounts(this.getContributions(id).map((entry) => entry.amount));
+
+    let privateBackers = 0;
+    const entries: TopBackerEntry[] = [];
+    let rank = 0;
+
+    for (const aggregate of aggregates) {
+      const preference = this.getPrivacyPreference(id, aggregate.backerAddress);
+      const isSelf = sameAddress(viewerAddress, aggregate.backerAddress);
+      const unredacted = viewerIsCreator || isSelf || preference.visibility === "PUBLIC";
+
+      if (preference.visibility === "PRIVATE" && !includePrivate && !isSelf) {
+        privateBackers += 1;
+        continue;
+      }
+
+      rank += 1;
+      const anonymous = preference.visibility !== "PUBLIC" && !unredacted;
+      const amountVisible = unredacted || preference.showAmount !== false;
+      const featured = featuredList.find((entry) => sameAddress(entry.backerAddress, aggregate.backerAddress));
+
+      entries.push({
+        rank,
+        backerAddress: anonymous ? HIDDEN_ADDRESS_LABEL : aggregate.backerAddress,
+        displayName: anonymous
+          ? ANONYMOUS_BACKER_LABEL
+          : aggregate.displayName || aggregate.backerAddress,
+        avatarUrl: anonymous ? undefined : aggregate.avatarUrl,
+        totalAmount: amountVisible ? aggregate.totalAmount : null,
+        amountVisible,
+        token: aggregate.token,
+        contributionCount: aggregate.contributionCount,
+        firstContributedAt: aggregate.firstContributedAt,
+        lastContributedAt: aggregate.lastContributedAt,
+        // The stored preference, so the UI can badge opted-out backers even
+        // when the creator is allowed to resolve their identity.
+        visibility: preference.visibility,
+        isFeatured: Boolean(featured),
+        featuredAt: featured?.featuredAt,
+        featureNote: featured?.note,
+        isSelf,
+        message: anonymous ? undefined : aggregate.message,
+      });
+    }
+
+    // Featured rows first, then amount order (which is already how we ranked).
+    const ordered = [...entries].sort((a, b) => Number(b.isFeatured) - Number(a.isFeatured) || a.rank - b.rank);
+
+    return {
+      campaignId: id,
+      backers: ordered.slice(0, limit),
+      limit,
+      totalBackers: aggregates.length,
+      privateBackers,
+      totalAmount,
+      featuredCount: featuredList.length,
+      updatedAt: now,
+    };
+  }
+
+  /** Test helper — wipes every in-memory collection. */
+  reset(): void {
+    this.contributions.clear();
+    this.preferences.clear();
+    this.featured.clear();
+    this.creators.clear();
+  }
+}
+
+export const backersService = new CampaignBackersService();
+
+/** Demo backer set for the mock campaign used by the campaign detail page. */
+export const DEMO_CAMPAIGN_ID = "camp-101";
+export const DEMO_CREATOR_ADDRESS = "GD6W...X892";
+
+export const DEMO_BACKER_CONTRIBUTIONS: RecordContributionInput[] = [
+  { campaignId: DEMO_CAMPAIGN_ID, backerAddress: "GB44...R771", amount: "15000", token: "XLM", displayName: "Satoshi Forestry Fund", contributedAt: 1_767_225_600_000, message: "Standing behind this reserve for the long run." },
+  { campaignId: DEMO_CAMPAIGN_ID, backerAddress: "GD99...Z100", amount: "12500", token: "XLM", displayName: "GreenFuture Capital", contributedAt: 1_767_312_000_000 },
+  { campaignId: DEMO_CAMPAIGN_ID, backerAddress: "GA7B...M221", amount: "5000", token: "USDC", displayName: "EcoDAO Ventures", contributedAt: 1_767_398_400_000, message: "Matching our community's donations 1:1." },
+  { campaignId: DEMO_CAMPAIGN_ID, backerAddress: "GC11...P443", amount: "2400", token: "XLM", displayName: "Terra Restora", contributedAt: 1_767_484_800_000 },
+  { campaignId: DEMO_CAMPAIGN_ID, backerAddress: "GB88...K992", amount: "1000", token: "XLM", displayName: "Elena Rostova", contributedAt: 1_767_571_200_000 },
+  { campaignId: DEMO_CAMPAIGN_ID, backerAddress: "GA31...Q815", amount: "850.5", token: "XLM", displayName: "Ken Adeyemi", contributedAt: 1_767_657_600_000 },
+  { campaignId: DEMO_CAMPAIGN_ID, backerAddress: "GC72...T260", amount: "600", token: "USDC", displayName: "Marcus Vance", contributedAt: 1_767_744_000_000 },
+  { campaignId: DEMO_CAMPAIGN_ID, backerAddress: "GB19...F534", amount: "400", token: "XLM", displayName: "Lumen Roots", contributedAt: 1_767_830_400_000 },
+  { campaignId: DEMO_CAMPAIGN_ID, backerAddress: "GD05...N918", amount: "250", token: "XLM", contributedAt: 1_767_916_800_000, message: "Small contributions add up!" },
+  { campaignId: DEMO_CAMPAIGN_ID, backerAddress: "GA58...W307", amount: "250", token: "XLM", displayName: "Amara Osei", contributedAt: 1_768_003_200_000 },
+  { campaignId: DEMO_CAMPAIGN_ID, backerAddress: "GC33...H442", amount: "180", token: "USDC", displayName: "Nils Berg", contributedAt: 1_768_089_600_000 },
+  { campaignId: DEMO_CAMPAIGN_ID, backerAddress: "GB76...L689", amount: "120", token: "XLM", displayName: "Priya Nair", contributedAt: 1_768_176_000_000 },
+  { campaignId: DEMO_CAMPAIGN_ID, backerAddress: "GA90...D153", amount: "90", token: "XLM", contributedAt: 1_768_262_400_000 },
+  { campaignId: DEMO_CAMPAIGN_ID, backerAddress: "GD47...S826", amount: "60", token: "USDC", contributedAt: 1_768_348_800_000 },
+];
+
+/**
+ * Seed the demo campaign once so the leaderboard is not empty on the mock
+ * campaign detail page. Safe to call repeatedly; returns true when it seeded.
+ */
+export function seedDemoBackers(campaignId: string = DEMO_CAMPAIGN_ID): boolean {
+  if (campaignId !== DEMO_CAMPAIGN_ID || backersService.hasContributions(campaignId)) return false;
+
+  backersService.registerCampaignCreator(campaignId, DEMO_CREATOR_ADDRESS);
+  for (const contribution of DEMO_BACKER_CONTRIBUTIONS) {
+    backersService.recordContribution(contribution);
+  }
+
+  // Two backers exercise the privacy paths: one anonymous (rank kept, identity
+  // hidden, amount shown) and one fully private (excluded from the board).
+  backersService.setPrivacyPreference({
+    campaignId,
+    backerAddress: "GA31...Q815",
+    visibility: "ANONYMOUS",
+    showAmount: true,
+  });
+  backersService.setPrivacyPreference({
+    campaignId,
+    backerAddress: "GD47...S826",
+    visibility: "PRIVATE",
+  });
+
+  return true;
+}
diff --git a/apps/web/src/services/certificate.service.ts b/apps/web/src/services/certificate.service.ts
index f619f363..cfedaa0c 100644
--- a/apps/web/src/services/certificate.service.ts
+++ b/apps/web/src/services/certificate.service.ts
@@ -82,8 +82,7 @@ export interface CertificateInput {
   /** Optional carbon offset credit details for tradeable CO2 certificates */
   carbonCredits?: CarbonCreditDetails;
   /** Document type — controls the title printed on the PDF */
-  documentType?: "certificate" | "invoice" | "campaign";
-  documentType?: "certificate" | "invoice" | "carbon";
+  documentType?: "certificate" | "invoice" | "carbon" | "campaign";
 }
 
 /** Typed result from the certificate service. */
@@ -468,6 +467,8 @@ export async function buildCertificatePdf(
       { x: MARGIN, y: cursor, size: 11, font: fontBold, color: COLOR_PRIMARY }
     );
     cursor -= 28;
+  }
+
   if (docType === "carbon" && input.carbonCredits) {
     cursor -= 20;
     page.drawText("CARBON OFFSET CREDITS", {
diff --git a/apps/web/src/types/campaign-backers.ts b/apps/web/src/types/campaign-backers.ts
new file mode 100644
index 00000000..a8a59659
--- /dev/null
+++ b/apps/web/src/types/campaign-backers.ts
@@ -0,0 +1,242 @@
+/**
+ * Types for the per-campaign top backers leaderboard.
+ *
+ * The campaign detail page shows the top backers ranked by the total amount
+ * they contributed. Campaign creators can additionally feature (pin/highlight)
+ * a small number of backers, and every backer controls their own privacy:
+ *
+ *  - PUBLIC     -> name, address and amount are shown on the leaderboard
+ *  - ANONYMOUS  -> still ranked, but name/address (and optionally amount) are
+ *                  redacted so the contribution cannot be attributed
+ *  - PRIVATE    -> excluded from the leaderboard entirely (only counted in the
+ *                  aggregate totals)
+ *
+ * Privacy always wins: a backer who is not PUBLIC can never be featured, and
+ * switching away from PUBLIC removes any existing feature automatically.
+ */
+
+export type BackerVisibility = "PUBLIC" | "ANONYMOUS" | "PRIVATE";
+
+/** A single on-chain contribution from a backer to a campaign. */
+export interface BackerContribution {
+  id: string;
+  campaignId: string;
+  /** Stellar address (G...) of the backer. */
+  backerAddress: string;
+  /** Decimal amount in token units, e.g. "1500" or "250.5". */
+  amount: string;
+  /** Token symbol, e.g. "XLM" or "USDC". */
+  token: string;
+  contributedAt: number; // Unix timestamp ms
+  txHash?: string;
+  /** Optional profile supplied by the backer at contribution time. */
+  displayName?: string;
+  avatarUrl?: string;
+  /** Optional public message shown next to the contribution. */
+  message?: string;
+}
+
+/** Per-campaign privacy preference for one backer. */
+export interface BackerPrivacyPreference {
+  campaignId: string;
+  backerAddress: string;
+  visibility: BackerVisibility;
+  /** Whether the amount may be shown when the backer is ANONYMOUS. */
+  showAmount: boolean;
+  /** Whether the campaign creator may feature/highlight this backer. */
+  allowFeaturing: boolean;
+  updatedAt: number; // Unix timestamp ms
+}
+
+/** A backer the campaign creator pinned to the top of the leaderboard. */
+export interface FeaturedBacker {
+  campaignId: string;
+  backerAddress: string;
+  /** Address of the campaign creator that featured this backer. */
+  featuredBy: string;
+  featuredAt: number; // Unix timestamp ms
+  /** Optional creator shout-out shown on the leaderboard row. */
+  note?: string;
+}
+
+/** One row of the (already privacy-redacted) public leaderboard. */
+export interface TopBackerEntry {
+  /** Rank by total contributed amount, 1-based. */
+  rank: number;
+  /** Redacted ("Hidden address") unless the viewer may see it. */
+  backerAddress: string;
+  /** "Anonymous backer" for anonymous rows the viewer may not resolve. */
+  displayName: string;
+  avatarUrl?: string;
+  /** Formatted total amount, or null when the amount is hidden. */
+  totalAmount: string | null;
+  amountVisible: boolean;
+  token: string;
+  contributionCount: number;
+  firstContributedAt: number;
+  lastContributedAt: number;
+  /** Effective visibility after redaction rules were applied. */
+  visibility: BackerVisibility;
+  isFeatured: boolean;
+  featuredAt?: number;
+  featureNote?: string;
+  /** True when the viewer is this backer (lets the UI offer "You"). */
+  isSelf: boolean;
+  /** Latest public message, only present for fully public rows. */
+  message?: string;
+}
+
+export interface TopBackersResult {
+  campaignId: string;
+  /** Ranked, redacted rows — at most `limit` entries. */
+  backers: TopBackerEntry[];
+  limit: number;
+  /** Every backer that contributed, including private ones. */
+  totalBackers: number;
+  /** Backers excluded from the board because they chose PRIVATE. */
+  privateBackers: number;
+  /** Aggregate amount across every contribution (private ones included). */
+  totalAmount: string;
+  /** How many of the ranked rows are creator-featured. */
+  featuredCount: number;
+  updatedAt: number;
+}
+
+export interface RecordContributionInput {
+  campaignId: string;
+  backerAddress: string;
+  amount: string;
+  token?: string;
+  contributedAt?: number;
+  txHash?: string;
+  displayName?: string;
+  avatarUrl?: string;
+  message?: string;
+}
+
+export interface SetPrivacyInput {
+  campaignId: string;
+  backerAddress: string;
+  visibility?: BackerVisibility;
+  showAmount?: boolean;
+  allowFeaturing?: boolean;
+}
+
+export interface FeatureBackerInput {
+  campaignId: string;
+  backerAddress: string;
+  /** Address performing the action — must be the campaign creator. */
+  featuredBy: string;
+  /** Optional creator override (defaults to the registered creator). */
+  campaignCreator?: string;
+  note?: string;
+}
+
+export interface GetTopBackersOptions {
+  limit?: number;
+  /** Address of the person reading the leaderboard. */
+  viewerAddress?: string;
+  /** Campaign creator address; a creator sees their backers unredacted. */
+  creatorAddress?: string;
+  /** Force-show private rows (creator/admin views). Defaults to creator only. */
+  includePrivate?: boolean;
+}
+
+/** How many backers the campaign detail page shows. */
+export const TOP_BACKERS_LIMIT = 10;
+
+/** Creators may only pin a handful of backers. */
+export const MAX_FEATURED_BACKERS = 3;
+
+export const ANONYMOUS_BACKER_LABEL = "Anonymous backer";
+export const HIDDEN_ADDRESS_LABEL = "Hidden address";
+export const HIDDEN_AMOUNT_LABEL = "Amount hidden";
+
+export const BACKER_VISIBILITIES: readonly BackerVisibility[] = [
+  "PUBLIC",
+  "ANONYMOUS",
+  "PRIVATE",
+];
+
+export function isBackerVisibility(value: unknown): value is BackerVisibility {
+  return typeof value === "string" && (BACKER_VISIBILITIES as readonly string[]).includes(value);
+}
+
+export function defaultBackerPrivacy(
+  campaignId: string,
+  backerAddress: string,
+  updatedAt = Date.now(),
+): BackerPrivacyPreference {
+  return {
+    campaignId,
+    backerAddress,
+    visibility: "PUBLIC",
+    showAmount: true,
+    allowFeaturing: true,
+    updatedAt,
+  };
+}
+
+/** A backer may be featured only when fully public and they allow it. */
+export function canBeFeatured(preference: Pick<BackerPrivacyPreference, "visibility" | "allowFeaturing">): boolean {
+  return preference.visibility === "PUBLIC" && preference.allowFeaturing !== false;
+}
+
+const AMOUNT_SCALE = 10_000_000n; // 7 decimals — Stellar stroops
+const AMOUNT_DECIMALS = 7;
+const AMOUNT_PATTERN = /^-?(\d+)(?:\.(\d+))?$/;
+
+/**
+ * Parse a decimal token amount into a fixed-point bigint (7 decimals).
+ * Returns null for anything that is not a plain decimal number so callers can
+ * skip malformed data instead of producing NaN totals.
+ */
+export function parseTokenAmount(value: string | number | bigint | null | undefined): bigint | null {
+  if (value === null || value === undefined || value === "") return null;
+  if (typeof value === "bigint") return value * AMOUNT_SCALE;
+  const text = String(value).trim();
+  const match = AMOUNT_PATTERN.exec(text);
+  if (!match) return null;
+  const negative = text.startsWith("-");
+  const whole = BigInt(match[1] ?? "0");
+  const fraction = (match[2] ?? "").padEnd(AMOUNT_DECIMALS, "0").slice(0, AMOUNT_DECIMALS);
+  const scaled = whole * AMOUNT_SCALE + BigInt(fraction);
+  return negative ? -scaled : scaled;
+}
+
+/** Inverse of {@link parseTokenAmount} — trailing zeros are trimmed. */
+export function formatTokenAmount(scaled: bigint): string {
+  const negative = scaled < 0n;
+  const abs = negative ? -scaled : scaled;
+  const whole = (abs / AMOUNT_SCALE).toString();
+  const fraction = (abs % AMOUNT_SCALE).toString().padStart(AMOUNT_DECIMALS, "0").replace(/0+$/, "");
+  return `${negative ? "-" : ""}${whole}${fraction ? `.${fraction}` : ""}`;
+}
+
+/** Sum decimal token amounts exactly, ignoring malformed/negative entries. */
+export function sumTokenAmounts(values: Array<string | number | bigint | null | undefined>): string {
+  let total = 0n;
+  for (const value of values) {
+    const parsed = parseTokenAmount(value);
+    if (parsed !== null && parsed > 0n) total += parsed;
+  }
+  return formatTokenAmount(total);
+}
+
+/** Compact "12,345" grouping used by the leaderboard UI. */
+export function formatBackerAmount(amount: string | null): string {
+  if (amount === null) return HIDDEN_AMOUNT_LABEL;
+  const [whole, fraction] = amount.split(".");
+  const grouped = whole.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  return fraction ? `${grouped}.${fraction}` : grouped;
+}
+
+/** Initials fallback for backer rows without an avatar. */
+export function backerInitials(displayName: string, address: string): string {
+  const trimmed = (displayName || "").trim();
+  if (trimmed) {
+    const parts = trimmed.split(/\s+/).slice(0, 2);
+    return parts.map((part) => part[0]?.toUpperCase() ?? "").join("") || trimmed.slice(0, 2).toUpperCase();
+  }
+  return (address || "?").replace(/[^A-Za-z0-9]/g, "").slice(0, 2).toUpperCase() || "??";
+}