From 335554a4f3c7ef1d925f4473a6785cc500fa31a6 Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Tue, 21 Apr 2026 14:51:20 +0900
Subject: [PATCH 1/2] [#888] Add leaderboard component with top 50 and user
 rank

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/app/airdrop/page.tsx               |   2 +
 src/components/airdrop/Leaderboard.tsx | 107 +++++++++++++++++++++++++
 2 files changed, 109 insertions(+)
 create mode 100644 src/components/airdrop/Leaderboard.tsx

diff --git a/src/app/airdrop/page.tsx b/src/app/airdrop/page.tsx
index 54649432..3d4ea7d5 100644
--- a/src/app/airdrop/page.tsx
+++ b/src/app/airdrop/page.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { CampaignHero } from "../../components/airdrop/CampaignHero";
 import { UserPoints } from "../../components/airdrop/UserPoints";
+import { Leaderboard } from "../../components/airdrop/Leaderboard";
 import { MilestoneTrack } from "../../components/airdrop/MilestoneTrack";
 
 export const metadata: Metadata = {
@@ -13,6 +14,7 @@ export default function AirdropPage() {
     <main className="mx-auto max-w-xl px-4 py-8 space-y-6">
       <CampaignHero />
       <UserPoints />
+      <Leaderboard />
       <MilestoneTrack />
     </main>
   );
diff --git a/src/components/airdrop/Leaderboard.tsx b/src/components/airdrop/Leaderboard.tsx
new file mode 100644
index 00000000..21abaddf
--- /dev/null
+++ b/src/components/airdrop/Leaderboard.tsx
@@ -0,0 +1,107 @@
+"use client";
+
+import { useAccount } from "wagmi";
+import { useQuery } from "@tanstack/react-query";
+
+interface LeaderboardEntry {
+  rank: number;
+  address: string;
+  username: string | null;
+  totalPoints: number;
+  sharePercent: number;
+}
+
+interface LeaderboardData {
+  entries: LeaderboardEntry[];
+  userRank: number | null;
+}
+
+function truncateAddress(addr: string) {
+  return `${addr.slice(0, 6)}...${addr.slice(-4)}`;
+}
+
+export function Leaderboard() {
+  const { address, isConnected } = useAccount();
+
+  const { data, isLoading } = useQuery<LeaderboardData>({
+    queryKey: ["airdrop-leaderboard", address],
+    queryFn: async () => {
+      const params = address ? `?address=${address.toLowerCase()}` : "";
+      const res = await fetch(`/api/airdrop/leaderboard${params}`);
+      if (!res.ok) throw new Error("Failed to fetch leaderboard");
+      return res.json();
+    },
+    staleTime: 60_000,
+    refetchInterval: 60_000,
+  });
+
+  if (isLoading || !data) {
+    return (
+      <div className="border-border rounded border p-4">
+        <div className="text-muted text-sm">Loading leaderboard...</div>
+      </div>
+    );
+  }
+
+  if (data.entries.length === 0) {
+    return (
+      <div className="border-border rounded border p-4">
+        <h3 className="text-foreground text-sm font-bold mb-2">Leaderboard</h3>
+        <div className="text-muted text-xs">No participants yet.</div>
+      </div>
+    );
+  }
+
+  const userAddr = address?.toLowerCase();
+  const inTop50 = userAddr && data.entries.some((e) => e.address === userAddr);
+
+  return (
+    <div className="border-border rounded border p-4">
+      <h3 className="text-foreground text-sm font-bold mb-3">Leaderboard</h3>
+
+      <div className="overflow-x-auto">
+        <table className="w-full text-xs">
+          <thead>
+            <tr className="text-muted text-left">
+              <th className="pb-2 pr-2 font-medium">#</th>
+              <th className="pb-2 pr-2 font-medium">User</th>
+              <th className="pb-2 pr-2 font-medium text-right">PL</th>
+              <th className="pb-2 font-medium text-right">Share</th>
+            </tr>
+          </thead>
+          <tbody>
+            {data.entries.map((entry) => {
+              const isUser = isConnected && userAddr === entry.address;
+              return (
+                <tr
+                  key={entry.address}
+                  className={isUser ? "bg-accent/10" : ""}
+                >
+                  <td className="py-1 pr-2 text-muted">{entry.rank}</td>
+                  <td className="py-1 pr-2 font-mono text-foreground">
+                    {entry.username ?? truncateAddress(entry.address)}
+                    {isUser && <span className="text-accent ml-1">(you)</span>}
+                  </td>
+                  <td className="py-1 pr-2 text-right text-foreground font-medium">
+                    {entry.totalPoints.toLocaleString()}
+                  </td>
+                  <td className="py-1 text-right text-muted">
+                    {entry.sharePercent}%
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+
+      {/* User's rank if outside top 50 */}
+      {isConnected && !inTop50 && data.userRank && (
+        <div className="border-border mt-3 border-t pt-2 text-center text-xs">
+          <span className="text-muted">Your rank: </span>
+          <span className="text-foreground font-medium">#{data.userRank}</span>
+        </div>
+      )}
+    </div>
+  );
+}

From b10fc5c47e26956cf7d485921ee57d43e0ac6987 Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Tue, 21 Apr 2026 14:52:48 +0900
Subject: [PATCH 2/2] [#888] Add defensive lowercase comparison for user
 address matching

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/components/airdrop/Leaderboard.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/airdrop/Leaderboard.tsx b/src/components/airdrop/Leaderboard.tsx
index 21abaddf..03d04d89 100644
--- a/src/components/airdrop/Leaderboard.tsx
+++ b/src/components/airdrop/Leaderboard.tsx
@@ -53,7 +53,7 @@ export function Leaderboard() {
   }
 
   const userAddr = address?.toLowerCase();
-  const inTop50 = userAddr && data.entries.some((e) => e.address === userAddr);
+  const inTop50 = userAddr && data.entries.some((e) => e.address.toLowerCase() === userAddr);
 
   return (
     <div className="border-border rounded border p-4">
@@ -71,7 +71,7 @@ export function Leaderboard() {
           </thead>
           <tbody>
             {data.entries.map((entry) => {
-              const isUser = isConnected && userAddr === entry.address;
+              const isUser = isConnected && userAddr === entry.address.toLowerCase();
               return (
                 <tr
                   key={entry.address}