From 2481ec0864062b9a8f9eaf037eb350446617a6fe Mon Sep 17 00:00:00 2001
From: triangles-bot <dev@cryptographic-triangles.org>
Date: Tue, 16 Jun 2026 15:11:31 -0700
Subject: [PATCH] explorer: add Rich List page (top holders from scanner API)

---
 src/lib/api.ts                      |  4 +++
 src/routes/+layout.svelte           |  1 +
 src/routes/richlist/+page.server.ts | 11 ++++++++
 src/routes/richlist/+page.svelte    | 42 +++++++++++++++++++++++++++++
 4 files changed, 58 insertions(+)
 create mode 100644 src/routes/richlist/+page.server.ts
 create mode 100644 src/routes/richlist/+page.svelte

diff --git a/src/lib/api.ts b/src/lib/api.ts
index 3cb5d1d..7f71814 100644
--- a/src/lib/api.ts
+++ b/src/lib/api.ts
@@ -137,3 +137,7 @@ export async function getLatestBlocks(count: number): Promise<Block[]> {
 		.filter((r): r is PromiseFulfilledResult<Block> => r.status === 'fulfilled')
 		.map(r => r.value);
 }
+
+export interface RichListEntry { address: string; balance: number; }
+export interface RichListResponse { status: string; total: number; addresses: RichListEntry[]; }
+export const getRichList = (limit = 100) => getCached<RichListResponse>(`richlist?limit=${limit}`);
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index a0af0ea..4b7f289 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -11,6 +11,7 @@
 		{ href: '/staking', label: 'Staking' },
 		{ href: '/network', label: 'Network' },
 		{ href: '/nodes', label: 'Nodes' },
+		{ href: '/richlist', label: 'Rich List' },
 		{ href: '/mempool', label: 'Mempool' },
 		{ href: '/api', label: 'API' }
 	];
diff --git a/src/routes/richlist/+page.server.ts b/src/routes/richlist/+page.server.ts
new file mode 100644
index 0000000..ce9fff5
--- /dev/null
+++ b/src/routes/richlist/+page.server.ts
@@ -0,0 +1,11 @@
+import { getRichList } from '$lib/api';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async () => {
+	try {
+		const data = await getRichList(100);
+		return { richlist: data.addresses || [], total: data.total || 0 };
+	} catch (e) {
+		return { richlist: [], total: 0, error: String(e) };
+	}
+};
diff --git a/src/routes/richlist/+page.svelte b/src/routes/richlist/+page.svelte
new file mode 100644
index 0000000..962fcad
--- /dev/null
+++ b/src/routes/richlist/+page.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+	let { data } = $props();
+	const SUPPLY = 2222222;
+</script>
+
+<svelte:head><title>Rich List - Triangles Block Explorer</title></svelte:head>
+
+<div class="space-y-4">
+	<h1 class="text-xl font-semibold text-tri-text">
+		Rich List
+		<span class="text-tri-muted text-sm font-normal">(top {data.richlist.length} of {data.total} addresses)</span>
+	</h1>
+
+	{#if data.error}
+		<p class="text-tri-muted">Rich list is being generated, please check back shortly.</p>
+	{:else}
+		<div class="overflow-x-auto rounded-lg border border-tri-border">
+			<table class="w-full text-sm">
+				<thead>
+					<tr class="text-tri-muted text-xs uppercase tracking-wider border-b border-tri-border">
+						<th class="text-left py-3 px-3">#</th>
+						<th class="text-left py-3 px-3">Address</th>
+						<th class="text-right py-3 px-3">Balance (TRI)</th>
+						<th class="text-right py-3 px-3">% of supply</th>
+					</tr>
+				</thead>
+				<tbody>
+					{#each data.richlist as e, i}
+						<tr class="border-b border-tri-border/50 hover:bg-tri-surface/50 transition-colors">
+							<td class="py-2.5 px-3 text-tri-muted">{i + 1}</td>
+							<td class="py-2.5 px-3 font-mono text-xs">
+								<a href="/address/{e.address}" class="text-tri-accent hover:text-tri-accent-light">{e.address}</a>
+							</td>
+							<td class="py-2.5 px-3 text-right font-mono">{e.balance.toLocaleString(undefined, { maximumFractionDigits: 2 })}</td>
+							<td class="py-2.5 px-3 text-right text-tri-muted">{(e.balance / SUPPLY * 100).toFixed(3)}%</td>
+						</tr>
+					{/each}
+				</tbody>
+			</table>
+		</div>
+	{/if}
+</div>