solanapolis 1.0.0

package/src/components/WalletPanel.tsx

@@ -0,0 +1,421 @@
+"use client";
+
+import { useEffect, useState, lazy, Suspense } from "react";
+import { WalletBuilding } from "@/types/wallet";
+import { getBuildingDimensions, floors } from "@/lib/building-math";
+import { useAuth } from "@/context/AuthContext";
+import { createClient } from "@/lib/supabase";
+
+const CitizenCardModal = lazy(() => import("./CitizenCardModal"));
+
+interface WalletPanelProps {
+  wallet: WalletBuilding | null;
+  onClose: () => void;
+}
+
+interface BuildingProfile {
+  x_username: string | null;
+  x_avatar_url: string | null;
+}
+
+interface WalletIdentity {
+  name: string;
+  type: string;
+  category: string;
+}
+
+interface TokenInfo {
+  mint: string;
+  symbol?: string;
+  name?: string;
+  image?: string;
+  uiAmount: number;
+  price?: number;
+  value?: number;
+}
+
+interface BalanceData {
+  solBalance: number;
+  tokenCount: number;
+  tokens: TokenInfo[];
+}
+
+export default function WalletPanel({ wallet, onClose }: WalletPanelProps) {
+  const { profile, connectX } = useAuth();
+  const [buildingProfile, setBuildingProfile] =
+    useState<BuildingProfile | null>(null);
+  const [balances, setBalances] = useState<BalanceData | null>(null);
+  const [balancesLoading, setBalancesLoading] = useState(false);
+  const [showCard, setShowCard] = useState(false);
+  const [nowSeconds, setNowSeconds] = useState(() => Math.floor(Date.now() / 1000));
+
+  useEffect(() => {
+    const interval = window.setInterval(() => {
+      setNowSeconds(Math.floor(Date.now() / 1000));
+    }, 60_000);
+    return () => window.clearInterval(interval);
+  }, []);
+
+  // Identity from pre-loaded wallet data
+  const identity: WalletIdentity | null = wallet?.identityName
+    ? { name: wallet.identityName, type: wallet.identityType ?? "unknown", category: wallet.identityCategory ?? "" }
+    : null;
+
+  const identityAtMatch = identity?.name?.match(/@(\w+)/);
+  const identityXHandle = identityAtMatch ? identityAtMatch[1] : null;
+  const identityDisplayName = identity?.name ? identity.name.replace(/@\w+/, "").trim() || null : null;
+
+  useEffect(() => {
+    if (!wallet) {
+      setBuildingProfile(null);
+      setBalances(null);
+      setShowCard(false);
+      return;
+    }
+
+    const supabase = createClient();
+    supabase
+      .from("profiles")
+      .select("x_username, x_avatar_url")
+      .eq("wallet_address", wallet.address)
+      .single()
+      .then(({ data }) => setBuildingProfile(data));
+
+    // Fetch live balances via DAS (getAssetsByOwner)
+    setBalancesLoading(true);
+    fetch(`/api/wallet/${wallet.address}/balances`)
+      .then((res) => res.json())
+      .then((data) => {
+        if (!data.error) setBalances(data);
+      })
+      .catch(() => { })
+      .finally(() => setBalancesLoading(false));
+  }, [wallet]);
+
+  if (!wallet) return null;
+
+  const dims = getBuildingDimensions(wallet);
+  const isOwner = profile?.wallet_address === wallet.address;
+  const floorCount = floors(wallet.txnCount);
+
+  function formatLastActive(blocktime: number | undefined): string {
+    if (!blocktime) return "Unknown";
+    const days = Math.floor((nowSeconds - blocktime) / 86400);
+    if (days === 0) return "Today";
+    if (days === 1) return "Yesterday";
+    if (days < 30) return `${days} days ago`;
+    if (days < 365) return `${Math.floor(days / 30)} months ago`;
+    return `${(days / 365).toFixed(1)} years ago`;
+  }
+
+  function formatTokenAmount(amount: number): string {
+    if (amount >= 1_000_000) return `${(amount / 1_000_000).toFixed(2)}M`;
+    if (amount >= 1_000) return `${(amount / 1_000).toFixed(2)}K`;
+    if (amount >= 1) return amount.toFixed(2);
+    if (amount >= 0.001) return amount.toFixed(4);
+    return amount.toExponential(2);
+  }
+
+  function formatUsd(value: number): string {
+    if (value >= 1_000_000) return `$${(value / 1_000_000).toFixed(2)}M`;
+    if (value >= 1_000) return `$${(value / 1_000).toFixed(1)}K`;
+    if (value >= 1) return `$${value.toFixed(2)}`;
+    return `$${value.toFixed(4)}`;
+  }
+
+  // Calculate total portfolio USD value
+  const solPrice = balances?.tokens?.length
+    ? undefined // we don't have SOL price from DAS, will be shown separately
+    : undefined;
+  const tokenUsdTotal = balances?.tokens?.reduce((sum, t) => sum + (t.value ?? 0), 0) ?? 0;
+
+  return (
+    <div className="w-full sm:w-80 bg-black/50 backdrop-blur-xl border border-white/[0.08] rounded-t-2xl sm:rounded-2xl p-5 text-white max-h-[60vh] sm:max-h-[calc(100vh-8rem)] overflow-y-auto">
+      <div className="flex justify-between items-center mb-4">
+        <div className="flex items-center gap-2">
+          <h3 className="text-xs font-semibold text-white/40 uppercase tracking-wider">
+            Wallet
+          </h3>
+          {(!wallet.ingestionStatus || wallet.ingestionStatus === "complete") && (
+            <button
+              onClick={() => setShowCard(true)}
+              className="px-2 py-0.5 bg-[#E35930]/15 hover:bg-[#E35930]/25 border border-[#E35930]/20 rounded-lg text-[10px] font-medium text-[#E35930] transition-colors cursor-pointer"
+            >
+              ID Card
+            </button>
+          )}
+        </div>
+        <button
+          onClick={onClose}
+          className="w-6 h-6 flex items-center justify-center rounded-lg text-white/30 hover:text-white hover:bg-white/[0.06] transition-colors cursor-pointer"
+        >
+          <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" strokeWidth="1.5">
+            <path d="M1 1l8 8M9 1l-8 8" />
+          </svg>
+        </button>
+      </div>
+
+      {/* Address with Solscan link */}
+      <a
+        href={`https://solscan.io/account/${wallet.address}`}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="group flex items-center gap-1.5 font-mono text-sm text-purple-300/80 hover:text-purple-300 break-all mb-5 transition-colors"
+      >
+        {wallet.address}
+        <svg className="w-3 h-3 shrink-0 text-white/20 group-hover:text-purple-300/60 transition-colors" fill="none" viewBox="0 0 24 24" strokeWidth="2" stroke="currentColor">
+          <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
+        </svg>
+      </a>
+
+      {/* Unified identity + profile section */}
+      {(() => {
+        const xAvatar = buildingProfile?.x_avatar_url ?? null;
+        const xHandle = buildingProfile?.x_username ?? identityXHandle;
+        const displayName = identityDisplayName || (identity && !identityXHandle ? identity.name : null);
+        const categoryBadge = identity && !identityXHandle ? (identity.category || identity.type) : null;
+        const isVerified = !!buildingProfile || !!identityXHandle;
+        const showSection = displayName || xHandle || isVerified || categoryBadge;
+
+        return showSection ? (
+          <div className="mb-5 pb-4 border-b border-white/[0.06] space-y-2.5">
+            <div className="flex items-center gap-2.5">
+              {xAvatar && (
+                <img src={xAvatar} alt="" className="w-7 h-7 rounded-full shrink-0" />
+              )}
+              <div className="flex flex-wrap items-center gap-2 min-w-0">
+                {displayName && (
+                  <span className="text-sm font-medium text-white/80 truncate">{displayName}</span>
+                )}
+                {xHandle && (
+                  <a href={`https://x.com/${xHandle}`} target="_blank" rel="noopener noreferrer" className="text-sm text-blue-300 hover:underline truncate">@{xHandle}</a>
+                )}
+                {isVerified && (
+                  <span className="flex items-center gap-1 px-2 py-0.5 bg-green-500/10 border border-green-500/15 rounded-lg text-xs text-green-300 shrink-0">
+                    <svg width="10" height="10" viewBox="0 0 20 20" fill="currentColor">
+                      <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+                    </svg>
+                    Verified
+                  </span>
+                )}
+                {categoryBadge && (
+                  <span className="px-2 py-0.5 bg-white/[0.06] border border-white/[0.08] rounded-lg text-xs text-white/35 shrink-0">
+                    {categoryBadge}
+                  </span>
+                )}
+              </div>
+            </div>
+            {isOwner && !buildingProfile?.x_username && (
+              <button
+                onClick={connectX}
+                className="flex items-center gap-2 px-3 py-1.5 bg-white/[0.04] hover:bg-white/[0.08] border border-white/[0.08] rounded-xl text-sm text-white/60 transition-colors cursor-pointer"
+              >
+                <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
+                  <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
+                </svg>
+                Connect X to your building
+              </button>
+            )}
+          </div>
+        ) : null;
+      })()}
+
+      {wallet.ingestionStatus && wallet.ingestionStatus !== "complete" && (
+        <div
+          className={`mb-4 px-3 py-2 rounded-xl text-sm ${wallet.ingestionStatus === "failed"
+              ? "bg-red-500/10 border border-red-500/15 text-red-300"
+              : "bg-yellow-500/10 border border-yellow-500/15 text-yellow-200"
+            }`}
+        >
+          {wallet.ingestionStatus === "failed"
+            ? "Ingestion failed"
+            : wallet.ingestionStatus === "processing"
+              ? "Processing transactions..."
+              : "Queued for processing"}
+        </div>
+      )}
+
+      {isOwner && (
+        <div className="mb-4 px-3 py-2 bg-purple-500/10 border border-purple-500/15 rounded-xl text-sm text-purple-200">
+          This is your building
+        </div>
+      )}
+
+      {/* Live Balances — SOL + USD */}
+      <div className="mb-5 pb-4 border-b border-white/[0.06] space-y-2.5">
+        <h4 className="text-xs font-semibold text-white/40 uppercase tracking-wider mb-2">
+          Live Balances
+        </h4>
+        {balancesLoading ? (
+          <div className="flex items-center gap-2">
+            <div className="w-3 h-3 border-2 border-white/10 border-t-purple-400/60 rounded-full animate-spin" />
+            <p className="text-sm text-white/30">Fetching via Helius DAS...</p>
+          </div>
+        ) : balances ? (
+          <>
+            <div className="flex justify-between items-center text-sm">
+              <span className="text-white/45">SOL Balance</span>
+              <span className="font-mono text-white/80 tabular-nums">
+                {balances.solBalance.toLocaleString(undefined, {
+                  maximumFractionDigits: 4,
+                })}{" "}
+                SOL
+              </span>
+            </div>
+            {tokenUsdTotal > 0 && (
+              <div className="flex justify-between items-center text-sm">
+                <span className="text-white/45">Token Value</span>
+                <span className="font-mono text-emerald-300/70 tabular-nums">
+                  {formatUsd(tokenUsdTotal)}
+                </span>
+              </div>
+            )}
+            <div className="flex justify-between text-sm">
+              <span className="text-white/45">Token Accounts</span>
+              <span className="font-mono text-white/80">{balances.tokenCount}</span>
+            </div>
+          </>
+        ) : (
+          <p className="text-sm text-white/30">Unable to load balances</p>
+        )}
+        <div className="flex justify-between text-sm">
+          <span className="text-white/45">Unique Tokens Swapped</span>
+          <span className="font-mono text-white/80">
+            {wallet.uniqueTokensSwapped ?? 0}
+          </span>
+        </div>
+        <div className="flex justify-between text-sm">
+          <span className="text-white/45">Last Active</span>
+          <span className="font-mono text-white/80">
+            {formatLastActive(wallet.latestBlocktime)}
+          </span>
+        </div>
+      </div>
+
+      {/* Top tokens with images and USD values */}
+      {balances && balances.tokens.length > 0 && (
+        <div className="mb-5 pb-4 border-b border-white/[0.06]">
+          <h4 className="text-xs font-semibold text-white/40 uppercase tracking-wider mb-2.5">
+            Top Holdings
+          </h4>
+          <div className="space-y-1.5">
+            {balances.tokens.slice(0, 10).map((t) => (
+              <a
+                key={t.mint}
+                href={`https://solscan.io/token/${t.mint}`}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex items-center gap-2 text-sm hover:bg-white/[0.03] rounded-lg px-1.5 py-1 -mx-1.5 transition-colors group"
+              >
+                {/* Token image */}
+                {t.image ? (
+                  <img
+                    src={t.image}
+                    alt=""
+                    className="w-5 h-5 rounded-full shrink-0 bg-white/5"
+                    onError={(e) => { (e.target as HTMLImageElement).style.display = 'none'; }}
+                  />
+                ) : (
+                  <div className="w-5 h-5 rounded-full bg-gradient-to-br from-purple-500/20 to-blue-500/20 shrink-0 flex items-center justify-center text-[8px] text-white/30">
+                    {(t.symbol || '?')[0]}
+                  </div>
+                )}
+                <div className="flex-1 min-w-0">
+                  <span className="text-white/60 truncate group-hover:text-white/80 transition-colors">
+                    {t.symbol || t.name || `${t.mint.slice(0, 4)}...${t.mint.slice(-4)}`}
+                  </span>
+                </div>
+                <div className="text-right shrink-0">
+                  <div className="font-mono text-white/45 text-xs tabular-nums">
+                    {formatTokenAmount(t.uiAmount)}
+                  </div>
+                  {t.value != null && t.value > 0 && (
+                    <div className="font-mono text-emerald-400/50 text-[10px] tabular-nums">
+                      {formatUsd(t.value)}
+                    </div>
+                  )}
+                </div>
+              </a>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* On-chain stats → Building dimensions */}
+      <div className="space-y-2.5 text-sm">
+        <h4 className="text-xs font-semibold text-white/40 uppercase tracking-wider mb-1">
+          On-Chain Stats → Building
+        </h4>
+        <div className="flex justify-between">
+          <span className="text-white/45">Transactions</span>
+          <span className="font-mono text-white/80">
+            {wallet.txnCount.toLocaleString()}
+            <span className="text-white/25 text-xs ml-1">→ {floorCount}F</span>
+          </span>
+        </div>
+        <div className="flex justify-between">
+          <span className="text-white/45">Age</span>
+          <span className="font-mono text-white/80">{wallet.walletAgeDays} days</span>
+        </div>
+        <div className="flex justify-between">
+          <span className="text-white/45">Volume</span>
+          <span className="font-mono text-white/80">
+            {wallet.volumeTraded.toLocaleString()} SOL
+            <span className="text-white/25 text-xs ml-1">→ w{dims.width.toFixed(1)}</span>
+          </span>
+        </div>
+        <div className="flex justify-between">
+          <span className="text-white/45">Fees Paid</span>
+          <span className="font-mono text-white/80">
+            {wallet.feesPaid.toLocaleString()} SOL
+          </span>
+        </div>
+      </div>
+
+      {/* Building dimensions visual */}
+      <div className="mt-5 pt-4 border-t border-white/[0.06]">
+        <div className="flex items-end gap-3">
+          {/* Mini building preview */}
+          <div
+            className="bg-gradient-to-t from-slate-600/40 to-slate-400/20 border border-white/10 rounded-sm"
+            style={{
+              width: Math.max(16, dims.width * 12),
+              height: Math.max(12, Math.min(60, dims.height * 1.2)),
+            }}
+          />
+          <div className="space-y-1 text-xs text-white/30 flex-1">
+            <div className="flex justify-between">
+              <span>Height</span>
+              <span className="font-mono">{floorCount} floors ({dims.height.toFixed(1)}u)</span>
+            </div>
+            <div className="flex justify-between">
+              <span>Width</span>
+              <span className="font-mono">{dims.width.toFixed(2)}u</span>
+            </div>
+            <div className="flex justify-between">
+              <span>Windows</span>
+              <span className="font-mono">{wallet.uniqueTokensSwapped ?? 0} token diversity</span>
+            </div>
+          </div>
+        </div>
+        <p className="text-[8px] text-white/15 mt-2">
+          Building stats powered by Helius • getSignaturesForAddress • getAssetsByOwner • getWalletIdentity
+        </p>
+      </div>
+
+      {showCard && (
+        <Suspense fallback={null}>
+          <CitizenCardModal
+            wallet={wallet}
+            identityName={
+              buildingProfile?.x_username
+                ? `@${buildingProfile.x_username}`
+                : identityDisplayName || identity?.name || null
+            }
+            onClose={() => setShowCard(false)}
+          />
+        </Suspense>
+      )}
+    </div>
+  );
+}

package/src/components/WalletSearch.tsx

@@ -0,0 +1,244 @@
+"use client";
+
+import { useState, useMemo, useRef } from "react";
+import { PlacedWallet } from "@/types/wallet";
+import { getBuildingDimensions, getWalletWorldPosition } from "@/lib/building-math";
+
+type Status = "idle" | "searching" | "found" | "not-found" | "error";
+
+interface WalletSearchProps {
+  wallets: PlacedWallet[];
+  onSelect: (wallet: PlacedWallet, position: [number, number, number]) => void;
+  onRefetch: () => Promise<PlacedWallet[]>;
+}
+
+export default function WalletSearch({ wallets, onSelect, onRefetch }: WalletSearchProps) {
+  const [query, setQuery] = useState("");
+  const [status, setStatus] = useState<Status>("idle");
+  const [message, setMessage] = useState("");
+  const [showSuggestions, setShowSuggestions] = useState(false);
+  const blurTimeout = useRef<ReturnType<typeof setTimeout>>(undefined);
+
+  const suggestions = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (q.length < 2) return [];
+
+    const scored: { wallet: PlacedWallet; score: number; matchField: string }[] = [];
+
+    for (const w of wallets) {
+      const name = w.identityName?.toLowerCase() ?? "";
+      const xUser = w.xUsername?.toLowerCase() ?? "";
+      const addr = w.address.toLowerCase();
+
+      let best = -1;
+      let field = "";
+
+      // Name matches (highest priority)
+      if (name && name.startsWith(q)) { best = 5; field = "name"; }
+      else if (name && name.includes(q)) { best = 4; field = "name"; }
+
+      // X handle matches
+      if (xUser && xUser.startsWith(q.replace(/^@/, ""))) {
+        if (best < 5) { best = 5; field = "x"; }
+      } else if (xUser && xUser.includes(q.replace(/^@/, ""))) {
+        if (best < 4) { best = 4; field = "x"; }
+      }
+
+      // Address matches
+      if (best < 0) {
+        if (addr.startsWith(q)) { best = 1; field = "address"; }
+        else if (addr.includes(q)) { best = 0; field = "address"; }
+      }
+
+      if (best >= 0) scored.push({ wallet: w, score: best, matchField: field });
+    }
+
+    scored.sort((a, b) => b.score - a.score);
+    return scored.slice(0, 3);
+  }, [query, wallets]);
+
+  function selectWallet(wallet: PlacedWallet) {
+    const dims = getBuildingDimensions(wallet);
+    const pos = getWalletWorldPosition(wallet, dims);
+    onSelect(wallet, pos);
+    setQuery("");
+    setShowSuggestions(false);
+    setStatus("found");
+    setMessage("Flying to building...");
+    setTimeout(() => setStatus("idle"), 2000);
+  }
+
+  function selectFromArray(address: string, arr: PlacedWallet[]): boolean {
+    const wallet = arr.find((w) => w.address === address);
+    if (!wallet) return false;
+    selectWallet(wallet);
+    return true;
+  }
+
+  async function handleSearch(e: React.FormEvent) {
+    e.preventDefault();
+    setShowSuggestions(false);
+    const address = query.trim();
+    if (!address) return;
+
+    // If there's a top suggestion that matches, use it directly
+    if (suggestions.length > 0) {
+      const q = address.toLowerCase().replace(/^@/, "");
+      const exact = suggestions.find(
+        (s) =>
+          s.wallet.identityName?.toLowerCase() === address.toLowerCase() ||
+          s.wallet.xUsername?.toLowerCase() === q
+      );
+      if (exact) {
+        selectWallet(exact.wallet);
+        return;
+      }
+      // If there are suggestions but no exact match, use the top one
+      selectWallet(suggestions[0].wallet);
+      return;
+    }
+
+    // Check local wallets first
+    if (selectFromArray(address, wallets)) return;
+
+    // Not in local array — try to look up or auto-add via API
+    setStatus("searching");
+    setMessage("Adding wallet to city...");
+
+    try {
+      const res = await fetch(`/api/wallet/${address}`);
+
+      if (res.status === 400) {
+        setStatus("error");
+        setMessage("Invalid Solana address");
+        return;
+      }
+
+      if (res.status === 404) {
+        setStatus("not-found");
+        setMessage("No transactions found for this wallet");
+        return;
+      }
+
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}));
+        setStatus("error");
+        setMessage(data.error || "Something went wrong");
+        return;
+      }
+
+      const data = await res.json();
+
+      if (data.isNew) {
+        setMessage("Building placed! Loading...");
+      } else {
+        setMessage("Found! Loading building...");
+      }
+
+      // Refetch wallets to include the new/existing one
+      const fresh = await onRefetch();
+      if (selectFromArray(address, fresh)) {
+        setStatus("found");
+        setMessage("Flying to building...");
+      } else {
+        setStatus("found");
+        setMessage("Wallet added to city!");
+        setTimeout(() => {
+          onRefetch().then((newest) => selectFromArray(address, newest));
+        }, 1000);
+      }
+    } catch {
+      setStatus("error");
+      setMessage("Failed to add wallet");
+    }
+  }
+
+  const statusColor =
+    status === "found"
+      ? "text-green-400/80"
+      : status === "error" || status === "not-found"
+        ? "text-red-400/80"
+        : "text-white/50";
+
+  function shortAddr(addr: string) {
+    return addr.slice(0, 4) + "..." + addr.slice(-4);
+  }
+
+  return (
+    <form onSubmit={handleSearch} className="relative">
+      <div className="flex gap-2">
+        <input
+          type="text"
+          placeholder="Paste wallet address to add..."
+          value={query}
+          onChange={(e) => {
+            setQuery(e.target.value);
+            setStatus("idle");
+            setShowSuggestions(true);
+          }}
+          onFocus={() => setShowSuggestions(true)}
+          onBlur={() => {
+            blurTimeout.current = setTimeout(() => setShowSuggestions(false), 150);
+          }}
+          className="w-full sm:w-72 px-4 py-2.5 bg-black/50 backdrop-blur-xl border border-white/[0.08] rounded-xl text-white placeholder-white/25 font-mono text-sm focus:outline-none focus:border-[#E35930]/50 focus:ring-1 focus:ring-[#E35930]/30 transition-colors"
+        />
+        <button
+          type="submit"
+          disabled={!query.trim() || status === "searching"}
+          className="px-4 py-2.5 bg-white/30 hover:bg-white/40 backdrop-blur-xl border border-white/30 rounded-xl text-white text-sm font-medium transition-colors disabled:opacity-40 cursor-pointer"
+        >
+          {status === "searching" ? "..." : "Add"}
+        </button>
+      </div>
+
+      {showSuggestions && suggestions.length > 0 && status === "idle" && (
+        <div className="absolute top-full left-0 mt-1.5 w-full sm:w-72 bg-black/80 backdrop-blur-xl border border-white/[0.08] rounded-xl overflow-hidden z-30">
+          {suggestions.map(({ wallet: w }) => {
+            const displayName = w.identityName?.replace(/@\w+/, "").trim() || null;
+            const xHandle = w.xUsername || w.identityName?.match(/@(\w+)/)?.[1] || null;
+
+            return (
+              <button
+                key={w.address}
+                type="button"
+                onMouseDown={() => {
+                  clearTimeout(blurTimeout.current);
+                  selectWallet(w);
+                }}
+                className="w-full px-3.5 py-2.5 flex items-center gap-2.5 hover:bg-white/10 transition-colors text-left cursor-pointer"
+              >
+                <div className="min-w-0 flex-1">
+                  {displayName || xHandle ? (
+                    <>
+                      <div className="flex items-center gap-1.5">
+                        {displayName && (
+                          <span className="text-sm text-white truncate">{displayName}</span>
+                        )}
+                        {xHandle && (
+                          <span className="text-xs text-blue-300 truncate">@{xHandle}</span>
+                        )}
+                      </div>
+                      <p className="text-xs text-white/30 font-mono">{shortAddr(w.address)}</p>
+                    </>
+                  ) : (
+                    <p className="text-sm text-white font-mono">{shortAddr(w.address)}</p>
+                  )}
+                </div>
+                <span className="text-xs text-white/20 shrink-0">{w.txnCount.toLocaleString()} txns</span>
+              </button>
+            );
+          })}
+        </div>
+      )}
+
+      {status !== "idle" && (
+        <p className={`text-xs mt-2 text-center ${statusColor}`}>
+          {status === "searching" && (
+            <span className="inline-block w-2.5 h-2.5 border-2 border-current border-t-transparent rounded-full animate-spin mr-1.5 align-middle" />
+          )}
+          {message}
+        </p>
+      )}
+    </form>
+  );
+}