feat(mints): Cashu mint directory (MintRadar) + same-origin proxy

New '/mints' page: browse Community MintRadar mints with health (online/latency/
degraded/archived), NUT count, terms, and add-to-wallet on native.

MintRadar has no CORS, so it's fetched same-origin at /api/mints/*:
- prod: Netlify proxy redirect in public/_redirects (+ 10m cache in _headers)
- dev: Vite server.proxy in vite.config.ts
This also hides users' IPs from MintRadar. Data is unofficial/rate-limited;
the page degrades to a friendly error state. Nav entry + smoke route added.

AGENTS.md

@@ -57,6 +57,11 @@ session with **no other memory of this project**. So:
 - **Wallet**: `useCashu` (coco-cashu) is **native-only** — it returns early on
   web (mints are CORS-blocked). Zap rails are NWC + WebLN + Cashu melt (`useZaps`).
 - **Group DMs**: NIP-17 (`useDirectMessages`, `GroupConversationPage`).
+- **Mints directory**: `/mints` page lists Cashu mints from the community
+  **MintRadar** project. MintRadar has **no CORS**, so it's fetched same-origin
+  at `/api/mints/*` — prod proxies via `public/_redirects` (`/api/mints/* →
+  https://mintradar.org/api/mints/:splat 200`), dev via `server.proxy` in
+  `vite.config.ts`. Data is unofficial/rate-limited; adding a mint is native-only.
 - **Lazy routes**: every route uses `lazyWithRetry` (`src/lib/lazyWithRetry.ts`) —
   retries, then one full reload per session, so a chunk-load failure self-heals
   instead of showing the error boundary.

public/_headers

@@ -4,3 +4,7 @@
   X-Frame-Options: DENY
   Referrer-Policy: strict-origin-when-cross-origin
   Permissions-Policy: geolocation=(self), camera=(self), microphone=()
+
+# Cache the proxied mint directory so we don't hammer the rate-limited API.
+/api/mints/*
+  Cache-Control: public, max-age=600

public/_redirects

@@ -1 +1,6 @@
-/* /index.html 200
+# MintRadar proxy: the browser can't call mintradar.org directly (no CORS), so
+# proxy same-origin server-side. Also hides users' IPs and lets us cache.
+/api/mints/*  https://mintradar.org/api/mints/:splat  200
+
+# SPA fallback (must stay last).
+/*  /index.html  200

scripts/smoke-test.mjs

@@ -134,6 +134,7 @@ const ROUTES = [
   '/stash',
   '/collections',
   '/stats',
+  '/mints',
   '/messages/group/abc123',
 ];
 const problems = [];

src/AppRouter.tsx

@@ -15,6 +15,7 @@ const Index = lazyWithRetry(() => import("./pages/Index"));
 const EventsPage = lazyWithRetry(() => import("./pages/EventsPage"));
 const LabPage = lazyWithRetry(() => import("./pages/LabPage"));
 const WalletPage = lazyWithRetry(() => import("./pages/WalletPage"));
+const MintsPage = lazyWithRetry(() => import("./pages/MintsPage"));
 const SettingsPage = lazyWithRetry(() => import("./pages/SettingsPage"));
 const CreateSpotPage = lazyWithRetry(() => import("./pages/CreateSpotPage"));
 const CreateShopPage = lazyWithRetry(() => import("./pages/CreateShopPage"));
@@ -123,6 +124,7 @@ export function AppRouter() {
           <Route path="/faq" element={<FAQPage />} />
           <Route path="/food" element={<FoodPage />} />
           <Route path="/wallet" element={<WalletPage />} />
+          <Route path="/mints" element={<MintsPage />} />
           <Route path="/settings" element={<SettingsPage />} />
           <Route path="/create-spot" element={<CreateSpotPage />} />
           <Route path="/create-shop" element={<CreateShopPage />} />

src/hooks/useMintDirectory.ts

@@ -0,0 +1,46 @@
+import { useQuery } from '@tanstack/react-query';
+
+/**
+ * A mint from the MintRadar community directory (https://mintradar.org).
+ *
+ * Fetched **same-origin** at `/api/mints/*` — MintRadar has no CORS, so prod
+ * proxies it via a Netlify redirect (see `public/_redirects`) and dev via the
+ * Vite proxy in `vite.config.ts`. The data is unofficial, rate-limited and may
+ * change without notice — treat it as a hint, not gospel.
+ */
+export interface MintDirectoryEntry {
+  url: string;
+  name?: string;
+  iconUrl?: string;
+  descriptionLong?: string;
+  online?: boolean;
+  degraded?: boolean;
+  archived?: boolean;
+  latencyMs?: number;
+  version?: string;
+  nutCount?: number;
+  tosUrl?: string;
+  lastOnlineAt?: string;
+}
+
+export function useMintDirectory() {
+  return useQuery<MintDirectoryEntry[]>({
+    queryKey: ['mint-directory'],
+    staleTime: 10 * 60 * 1000,
+    retry: 1,
+    queryFn: async (c) => {
+      const res = await fetch('/api/mints/known', {
+        signal: AbortSignal.any([c.signal, AbortSignal.timeout(15000)]),
+        headers: { accept: 'application/json' },
+      });
+      if (!res.ok) {
+        throw new Error(`The mint directory is unavailable right now (HTTP ${res.status}).`);
+      }
+      const data = (await res.json()) as unknown;
+      if (!Array.isArray(data)) throw new Error('Unexpected mint directory response.');
+      return (data as MintDirectoryEntry[]).filter(
+        (m) => m && typeof m.url === 'string' && m.url.length > 0,
+      );
+    },
+  });
+}

src/hooks/useNavPreferences.ts

@@ -9,6 +9,7 @@ import {
   Bookmark,
   MessageCircle,
   BarChart3,
+  Coins,
   type LucideIcon,
 } from 'lucide-react';
 import { useLocalStorage } from '@/hooks/useLocalStorage';
@@ -57,6 +58,7 @@ export const NAV_CATALOG: NavTab[] = [
   { id: 'events', href: '/events', labelKey: 'nav.events', label: 'Events', icon: Calendar },
   { id: 'crews', href: '/crews', labelKey: 'nav.crews', label: 'Crews', icon: Users },
   { id: 'wallet', href: '/wallet', labelKey: 'nav.wallet', label: 'Wallet', icon: Wallet, authOnly: true },
+  { id: 'mints', href: '/mints', label: 'Mints', icon: Coins },
   { id: 'stash', href: '/stash', label: 'Stash', icon: Package, authOnly: true },
   { id: 'collections', href: '/collections', label: 'Collections', icon: Bookmark, authOnly: true },
   { id: 'contacts', href: '/contacts', label: 'Contacts', icon: Users, authOnly: true },

src/pages/MintsPage.tsx

@@ -0,0 +1,266 @@
+import { useMemo, useState } from 'react';
+import { useSeoMeta } from '@unhead/react';
+import { Link } from 'react-router-dom';
+import { Layout } from '@/components/Layout';
+import { Card, CardContent } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Skeleton } from '@/components/ui/skeleton';
+import { useMintDirectory, type MintDirectoryEntry } from '@/hooks/useMintDirectory';
+import { useCashu } from '@/hooks/wallet/useCashu';
+import { useToast } from '@/hooks/useToast';
+import { isNativePlatform } from '@/lib/platform';
+import { cn } from '@/lib/utils';
+import { Search, Coins, ExternalLink, Plus, Loader2, Check, ShieldAlert, Activity } from 'lucide-react';
+
+function hostOf(url: string): string {
+  try {
+    return new URL(url).host;
+  } catch {
+    return url;
+  }
+}
+
+function healthBadge(mint: MintDirectoryEntry) {
+  if (mint.archived) {
+    return { label: 'Archived', className: 'border-gray-600 bg-gray-800/60 text-gray-400' };
+  }
+  if (mint.degraded) {
+    return { label: 'Degraded', className: 'border-amber-500/40 bg-amber-500/10 text-amber-400' };
+  }
+  if (mint.online === false) {
+    return { label: 'Offline', className: 'border-red-500/40 bg-red-500/10 text-red-400' };
+  }
+  return { label: 'Online', className: 'border-[#ccff00]/40 bg-[#ccff00]/10 text-[#ccff00]' };
+}
+
+function MintRow({
+  mint,
+  added,
+  canAdd,
+  adding,
+  onAdd,
+}: {
+  mint: MintDirectoryEntry;
+  added: boolean;
+  canAdd: boolean;
+  adding: boolean;
+  onAdd: () => void;
+}) {
+  const health = healthBadge(mint);
+  return (
+    <Card className="bg-black/90 border-2 border-white/10 hover:border-[#ccff00]/30 transition-colors">
+      <CardContent className="p-4">
+        <div className="flex items-start gap-3">
+          {mint.iconUrl ? (
+            <img
+              src={mint.iconUrl}
+              alt=""
+              loading="lazy"
+              className="h-10 w-10 rounded-xl object-cover border border-white/10 bg-white/5"
+              onError={(e) => {
+                (e.currentTarget as HTMLImageElement).style.display = 'none';
+              }}
+            />
+          ) : (
+            <div className="h-10 w-10 rounded-xl border border-white/10 bg-white/5 flex items-center justify-center">
+              <Coins className="h-5 w-5 text-[#ccff00]/60" />
+            </div>
+          )}
+
+          <div className="min-w-0 flex-1">
+            <div className="flex items-center gap-2 flex-wrap">
+              <h3 className="font-bold text-white truncate">{mint.name || hostOf(mint.url)}</h3>
+              <Badge variant="outline" className={cn('text-[10px]', health.className)}>
+                {health.label}
+              </Badge>
+              {typeof mint.latencyMs === 'number' && mint.online && (
+                <span className="inline-flex items-center gap-1 text-[10px] text-gray-500">
+                  <Activity className="h-3 w-3" /> {mint.latencyMs} ms
+                </span>
+              )}
+            </div>
+            <p className="text-xs text-gray-500 truncate">{hostOf(mint.url)}</p>
+            {mint.descriptionLong && (
+              <p className="mt-1 text-xs text-gray-400 line-clamp-2">{mint.descriptionLong}</p>
+            )}
+            <div className="mt-2 flex items-center gap-3 text-[11px] text-gray-500">
+              {typeof mint.nutCount === 'number' && <span>{mint.nutCount} NUTs</span>}
+              {mint.version && <span className="truncate max-w-40">{mint.version}</span>}
+              {mint.tosUrl && (
+                <a
+                  href={mint.tosUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="inline-flex items-center gap-1 text-gray-400 hover:text-white"
+                >
+                  Terms <ExternalLink className="h-3 w-3" />
+                </a>
+              )}
+            </div>
+          </div>
+
+          <div className="shrink-0">
+            {added ? (
+              <Badge className="gap-1 bg-[#ccff00]/15 text-[#ccff00] border border-[#ccff00]/30">
+                <Check className="h-3 w-3" /> Added
+              </Badge>
+            ) : canAdd ? (
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={onAdd}
+                disabled={adding}
+                className="gap-1.5 border-[#ccff00]/40 text-[#ccff00] hover:bg-[#ccff00]/10"
+              >
+                {adding ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <Plus className="h-3.5 w-3.5" />}
+                Add
+              </Button>
+            ) : null}
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+export default function MintsPage() {
+  const { data, isLoading, error } = useMintDirectory();
+  const { coco, mints, isInitialized, refreshMints } = useCashu();
+  const { toast } = useToast();
+  const [query, setQuery] = useState('');
+  const [addingUrl, setAddingUrl] = useState<string | null>(null);
+
+  useSeoMeta({
+    title: 'Cashu Mints — SkateSpots',
+    description: 'Browse Cashu mints, check their health, and add one to your wallet.',
+  });
+
+  const canAdd = isNativePlatform() && isInitialized && !!coco;
+  const addedUrls = useMemo(
+    () => new Set(mints.map((m) => m.url.toLowerCase())),
+    [mints],
+  );
+
+  const filtered = useMemo(() => {
+    const list = data ?? [];
+    const q = query.trim().toLowerCase();
+    return list
+      .filter((m) => {
+        if (!q) return true;
+        return (
+          m.url.toLowerCase().includes(q) ||
+          (m.name ?? '').toLowerCase().includes(q)
+        );
+      })
+      .sort((a, b) => {
+        const rank = (m: MintDirectoryEntry) =>
+          m.archived ? 3 : m.online === false ? 2 : m.degraded ? 1 : 0;
+        const r = rank(a) - rank(b);
+        if (r !== 0) return r;
+        return (a.latencyMs ?? 9999) - (b.latencyMs ?? 9999);
+      });
+  }, [data, query]);
+
+  const handleAdd = async (url: string) => {
+    if (!coco) return;
+    setAddingUrl(url);
+    try {
+      await coco.mint.addMint(url, { trusted: true });
+      await refreshMints();
+      toast({ title: 'Mint added', description: `${hostOf(url)} is now in your wallet.` });
+    } catch (e) {
+      toast({
+        title: 'Could not add mint',
+        description: e instanceof Error ? e.message : 'Something went wrong.',
+        variant: 'destructive',
+      });
+    } finally {
+      setAddingUrl(null);
+    }
+  };
+
+  return (
+    <Layout>
+      <div className="container mx-auto max-w-3xl px-4 py-8">
+        <div className="mb-6">
+          <h1 className="flex items-center gap-3 text-3xl font-black uppercase text-white">
+            <Coins className="h-8 w-8 text-[#ccff00]" /> Mints
+          </h1>
+          <p className="mt-1 text-sm text-gray-400">
+            Browse Cashu mints and their health. Cashu wallet operations run in the
+            SkateSpots app.
+          </p>
+        </div>
+
+        <div className="relative mb-4">
+          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-500" />
+          <Input
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder="Search mints by name or URL…"
+            className="h-11 border-gray-700 bg-gray-900 pl-10 text-white"
+          />
+        </div>
+
+        {isLoading && (
+          <div className="space-y-3" aria-busy="true">
+            {Array.from({ length: 6 }).map((_, i) => (
+              <Skeleton key={i} className="h-24 w-full rounded-xl" />
+            ))}
+          </div>
+        )}
+
+        {error && !isLoading && (
+          <Card className="border-dashed border-white/15 bg-black/60">
+            <CardContent className="py-12 text-center space-y-3">
+              <ShieldAlert className="mx-auto h-8 w-8 text-amber-400" />
+              <p className="text-sm text-gray-300">
+                {error instanceof Error ? error.message : 'Could not load the mint directory.'}
+              </p>
+              <p className="text-xs text-gray-500">
+                The directory is community-run and rate-limited — it may be briefly
+                unavailable.
+              </p>
+              <Button asChild variant="outline" className="border-white/15">
+                <Link to="/wallet">Go to Wallet</Link>
+              </Button>
+            </CardContent>
+          </Card>
+        )}
+
+        {!isLoading && !error && (
+          <>
+            {!canAdd && (
+              <p className="mb-3 text-xs text-gray-500">
+                Adding a mint happens in the SkateSpots app (Cashu is app-only).
+              </p>
+            )}
+            <div className="space-y-3">
+              {filtered.map((mint) => (
+                <MintRow
+                  key={mint.url}
+                  mint={mint}
+                  added={addedUrls.has(mint.url.toLowerCase())}
+                  canAdd={canAdd}
+                  adding={addingUrl === mint.url}
+                  onAdd={() => handleAdd(mint.url)}
+                />
+              ))}
+            </div>
+            {filtered.length === 0 && (
+              <p className="py-12 text-center text-sm text-gray-500">
+                No mints match “{query}”.
+              </p>
+            )}
+            <p className="mt-6 text-center text-[11px] text-gray-600">
+              Health data from the community MintRadar project — unofficial and may be
+              stale. Always review a mint&apos;s terms before trusting it with funds.
+            </p>
+          </>
+        )}
+      </div>
+    </Layout>
+  );
+}

vite.config.ts

@@ -14,6 +14,14 @@ export default defineConfig(() => ({
   server: {
     host: "::",
     port: 8080,
+    // Dev proxy for the MintRadar directory (no CORS upstream; see public/_redirects).
+    proxy: {
+      '/api/mints': {
+        target: 'https://mintradar.org',
+        changeOrigin: true,
+        secure: true,
+      },
+    },
   },
   plugins: [
     react(),