auramaxx 0.0.1

package/src/components/docs/ClientSideMarkdown.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import { useCallback, type MouseEvent } from 'react';
+import { useRouter } from 'next/navigation';
+
+interface ClientSideMarkdownProps {
+  html: string;
+  className?: string;
+}
+
+const hasModifierKey = (event: MouseEvent<HTMLElement>) =>
+  event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
+
+export default function ClientSideMarkdown({ html, className }: ClientSideMarkdownProps) {
+  const router = useRouter();
+
+  const handleClick = useCallback((event: MouseEvent<HTMLDivElement>) => {
+    if (event.defaultPrevented) return;
+    if (event.button !== 0) return;
+    if (hasModifierKey(event)) return;
+
+    const target = event.target as HTMLElement | null;
+    const anchor = target?.closest('a');
+    if (!anchor) return;
+    if (anchor.target && anchor.target !== '_self') return;
+    if (anchor.hasAttribute('download')) return;
+
+    const href = anchor.getAttribute('href');
+    if (!href || href.startsWith('#')) return;
+
+    let url: URL;
+    try {
+      url = new URL(href, window.location.href);
+    } catch {
+      return;
+    }
+
+    if (url.origin !== window.location.origin) return;
+
+    event.preventDefault();
+    router.push(`${url.pathname}${url.search}${url.hash}`);
+  }, [router]);
+
+  return (
+    <div
+      className={className}
+      onClick={handleClick}
+      dangerouslySetInnerHTML={{ __html: html }}
+    />
+  );
+}

package/src/components/docs/DocsSearchBar.tsx

@@ -0,0 +1,118 @@
+'use client';
+
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+
+interface DocsSearchBarProps {
+  initialQuery?: string;
+}
+
+export default function DocsSearchBar({ initialQuery = '' }: DocsSearchBarProps) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const searchParamsString = searchParams.toString();
+  const currentQuery = searchParams.get('query') ?? searchParams.get('q') ?? '';
+
+  const [value, setValue] = useState(() => currentQuery || initialQuery);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const pendingQueryRef = useRef<string | null>(null);
+  const lastTypedValueRef = useRef<string>(currentQuery || initialQuery);
+
+  useEffect(() => {
+    if (pendingQueryRef.current !== null) {
+      if (currentQuery === pendingQueryRef.current) {
+        const appliedPendingValue = pendingQueryRef.current;
+        pendingQueryRef.current = null;
+        if (lastTypedValueRef.current !== appliedPendingValue) {
+          return;
+        }
+      } else {
+        return;
+      }
+    }
+
+    lastTypedValueRef.current = currentQuery;
+    setValue((previous) => (previous === currentQuery ? previous : currentQuery));
+  }, [currentQuery]);
+
+  const replaceQueryInUrl = useCallback((nextQuery: string) => {
+    const nextParams = new URLSearchParams(searchParamsString);
+    nextParams.delete('q');
+    nextParams.delete('query');
+    if (nextQuery) nextParams.set('query', nextQuery);
+    const next = nextParams.toString();
+    router.replace(next ? `${pathname}?${next}` : pathname, { scroll: false });
+  }, [pathname, router, searchParamsString]);
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (!(event.metaKey || event.ctrlKey) || event.key.toLowerCase() !== 'k') return;
+      event.preventDefault();
+      inputRef.current?.focus();
+      inputRef.current?.select();
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, []);
+
+  useEffect(() => {
+    if (value === currentQuery) return;
+
+    const nextValue = value;
+    const timeout = window.setTimeout(() => {
+      pendingQueryRef.current = nextValue;
+      replaceQueryInUrl(nextValue);
+    }, 180);
+
+    return () => window.clearTimeout(timeout);
+  }, [value, currentQuery, replaceQueryInUrl]);
+
+  return (
+    <div className="fixed bottom-4 left-1/2 z-40 w-[min(760px,calc(100%-2rem))] -translate-x-1/2">
+      <form
+        onSubmit={(event) => {
+          event.preventDefault();
+          pendingQueryRef.current = value;
+          replaceQueryInUrl(value);
+        }}
+        className="border border-[var(--color-border,#d4d4d8)] bg-[var(--color-surface,#f4f4f2)] shadow-lg px-3 py-2 flex items-center gap-2 font-mono"
+      >
+        <label htmlFor="docs-search" className="text-[9px] tracking-widest uppercase text-[var(--color-text-muted,#6b7280)] shrink-0">
+          Search
+        </label>
+        <input
+          ref={inputRef}
+          id="docs-search"
+          name="query"
+          type="search"
+          value={value}
+          onChange={(event) => {
+            const nextValue = event.target.value;
+            lastTypedValueRef.current = nextValue;
+            setValue(nextValue);
+          }}
+          placeholder="Search docs by title, file, or summary"
+          className="flex-1 min-w-0 border border-[var(--color-border,#d4d4d8)] bg-[var(--color-surface,#ffffff)] px-2 py-1 text-[11px] text-[var(--color-text,#0a0a0a)] outline-none focus:border-[var(--color-text,#0a0a0a)]"
+        />
+        {value.trim() ? (
+          <button
+            type="button"
+            onClick={() => {
+              lastTypedValueRef.current = '';
+              setValue('');
+            }}
+            className="px-2 py-1 text-[9px] tracking-widest uppercase text-[var(--color-text-muted,#6b7280)] hover:text-[var(--color-text,#0a0a0a)] transition-colors"
+          >
+            Clear
+          </button>
+        ) : (
+          <span className="px-2 py-1 text-[9px] tracking-widest uppercase text-[var(--color-text-faint,#9ca3af)]">
+            Cmd/Ctrl+K
+          </span>
+        )}
+      </form>
+    </div>
+  );
+}

package/src/components/docs/DocsThemeToggle.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import { useTheme } from '@/hooks/useTheme';
+
+export default function DocsThemeToggle() {
+  const { colorMode, setColorMode } = useTheme();
+  const isLightMode = colorMode === 'light';
+
+  const toggle = () => {
+    setColorMode(isLightMode ? 'dark' : 'light');
+  };
+
+  return (
+    <button
+      onClick={toggle}
+      className="p-1.5 text-[var(--color-text-muted,#6b7280)] hover:text-[var(--color-text,#0a0a0a)] hover:bg-[var(--color-surface,#ffffff)]/50 transition-colors rounded"
+      aria-label={isLightMode ? 'Switch to dark mode' : 'Switch to light mode'}
+    >
+      {isLightMode ? (
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+        </svg>
+      ) : (
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <circle cx="12" cy="12" r="5" />
+          <line x1="12" y1="1" x2="12" y2="3" />
+          <line x1="12" y1="21" x2="12" y2="23" />
+          <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+          <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+          <line x1="1" y1="12" x2="3" y2="12" />
+          <line x1="21" y1="12" x2="23" y2="12" />
+          <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+          <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+        </svg>
+      )}
+    </button>
+  );
+}

package/src/components/docs/PersistentDocGroup.tsx

@@ -0,0 +1,91 @@
+'use client';
+
+import { useCallback, useEffect, useLayoutEffect, useState } from 'react';
+import type { ReactNode } from 'react';
+
+interface PersistentDocGroupProps {
+  storageKey: string;
+  label: string;
+  forceOpen?: boolean;
+  defaultOpen?: boolean;
+  children: ReactNode;
+}
+
+const OPEN_VALUE = '1';
+const CLOSED_VALUE = '0';
+
+export default function PersistentDocGroup({
+  storageKey,
+  label,
+  forceOpen = false,
+  defaultOpen = false,
+  children,
+}: PersistentDocGroupProps) {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+  const [hydrated, setHydrated] = useState(false);
+
+  // Read saved state from localStorage before paint (avoids flash).
+  useLayoutEffect(() => {
+    try {
+      const stored = window.localStorage.getItem(storageKey);
+      if (stored === OPEN_VALUE) setIsOpen(true);
+      else if (stored === CLOSED_VALUE) setIsOpen(false);
+    } catch {
+      // localStorage may be blocked; keep default.
+    }
+    setHydrated(true);
+  }, [storageKey]);
+
+  // Persist changes to localStorage only after the initial read.
+  useEffect(() => {
+    if (!hydrated || forceOpen) return;
+    try {
+      window.localStorage.setItem(storageKey, isOpen ? OPEN_VALUE : CLOSED_VALUE);
+    } catch {
+      // Ignore persistence errors.
+    }
+  }, [hydrated, forceOpen, isOpen, storageKey]);
+
+  const open = forceOpen || isOpen;
+
+  // Use onClick + preventDefault instead of onToggle to avoid the
+  // React/details toggle race condition during navigation reconciliation.
+  const handleClick = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault();
+      if (!forceOpen) setIsOpen((prev) => !prev);
+    },
+    [forceOpen],
+  );
+
+  return (
+    <details
+      className="group"
+      open={open}
+      suppressHydrationWarning
+    >
+      <summary
+        className="list-none cursor-pointer px-1 py-0.5 flex items-center justify-between text-[8px] text-[var(--color-text-faint,#9ca3af)] tracking-widest uppercase hover:text-[var(--color-text,#0a0a0a)] transition-colors [&::-webkit-details-marker]:hidden"
+        onClick={handleClick}
+      >
+        <span>{label}</span>
+        <svg
+          width="10"
+          height="10"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          className={`transition-transform ${open ? 'rotate-180' : ''}`}
+        >
+          <polyline points="6 9 12 15 18 9" />
+        </svg>
+      </summary>
+      <div className="mt-1 space-y-0.5">
+        {children}
+      </div>
+    </details>
+  );
+}

package/src/components/docs/ShareUrlButton.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import { useState } from 'react';
+
+interface ShareUrlButtonProps {
+  url: string;
+}
+
+export default function ShareUrlButton({ url }: ShareUrlButtonProps) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(url);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1200);
+    } catch {
+      setCopied(false);
+    }
+  };
+
+  return (
+    <button
+      type="button"
+      onClick={handleCopy}
+      className="text-[var(--color-text-muted,#6b7280)] hover:text-[var(--color-text,#0a0a0a)] transition-colors"
+      aria-label="Copy share URL"
+      data-testid="header-share-button"
+    >
+      {copied ? 'COPIED' : 'SHARE'}
+    </button>
+  );
+}

package/src/components/docs/SidebarScrollMemory.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import { useLayoutEffect } from 'react';
+
+interface SidebarScrollMemoryProps {
+  containerId: string;
+  storageKey: string;
+}
+
+export default function SidebarScrollMemory({ containerId, storageKey }: SidebarScrollMemoryProps) {
+  useLayoutEffect(() => {
+    if (typeof window === 'undefined') return;
+    const node = document.getElementById(containerId);
+    if (!node) return;
+
+    const restore = () => {
+      const saved = window.sessionStorage.getItem(storageKey);
+      if (!saved) return;
+      const parsed = Number.parseInt(saved, 10);
+      if (!Number.isFinite(parsed)) return;
+      node.scrollTop = parsed;
+    };
+
+    const persist = () => {
+      window.sessionStorage.setItem(storageKey, String(node.scrollTop));
+    };
+
+    // Restore before paint when possible, then once more on the next frame
+    // to survive layout shifts caused by route updates.
+    restore();
+    const raf = requestAnimationFrame(restore);
+
+    const onScroll = () => {
+      persist();
+    };
+
+    const onClickCapture = (event: Event) => {
+      const target = event.target as HTMLElement | null;
+      if (target?.closest('a[href]')) {
+        persist();
+      }
+    };
+
+    node.addEventListener('scroll', onScroll, { passive: true });
+    node.addEventListener('click', onClickCapture, { capture: true });
+
+    return () => {
+      cancelAnimationFrame(raf);
+      persist();
+      node.removeEventListener('scroll', onScroll);
+      node.removeEventListener('click', onClickCapture, { capture: true });
+    };
+  }, [containerId, storageKey]);
+
+  return null;
+}

package/src/components/health/CredentialHealthDashboard.tsx

@@ -0,0 +1,214 @@
+'use client';
+
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import Link from 'next/link';
+import { api, Api } from '@/lib/api';
+
+type HealthFlagSummary = {
+  totalAnalyzed: number;
+  safe: number;
+  weak: number;
+  reused: number;
+  breached: number;
+  unknown: number;
+  lastScanAt: string;
+};
+
+type HealthRow = {
+  id: string;
+  name: string;
+  type: string;
+  vaultId: string;
+  health: {
+    status: string;
+    flags: { weak: boolean; reused: boolean; breached: boolean; unknown: boolean };
+    evidence: {
+      reuseCount: number;
+      breachCount: number | null;
+      weakReasons: string[];
+    };
+    engineVersion: string;
+    lastScannedAt: string | null;
+  };
+};
+
+type ScanStatus = 'idle' | 'queued' | 'running' | 'complete' | 'failed' | 'expired';
+
+const STATUS_TONE: Record<string, string> = {
+  safe: 'text-emerald-700',
+  weak: 'text-amber-700',
+  reused: 'text-orange-700',
+  breached: 'text-red-700',
+  unknown: 'text-slate-600',
+  weak_reused: 'text-orange-700',
+  weak_breached: 'text-red-700',
+  reused_breached: 'text-red-700',
+  weak_reused_breached: 'text-red-700',
+};
+
+function fmtTime(input?: string | null): string {
+  if (!input) return '—';
+  const date = new Date(input);
+  if (Number.isNaN(date.getTime())) return '—';
+  return date.toLocaleString();
+}
+
+export function CredentialHealthDashboard() {
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [summary, setSummary] = useState<HealthFlagSummary | null>(null);
+  const [rows, setRows] = useState<HealthRow[]>([]);
+  const [scanId, setScanId] = useState<string | null>(null);
+  const [scanStatus, setScanStatus] = useState<ScanStatus>('idle');
+  const [scanError, setScanError] = useState<string | null>(null);
+
+  const load = useCallback(async () => {
+    setError(null);
+    try {
+      const [summaryRes, rowsRes] = await Promise.all([
+        api.get<{ success: boolean; summary: HealthFlagSummary }>(Api.Wallet, '/credentials/health/summary'),
+        api.get<{ success: boolean; credentials: HealthRow[] }>(Api.Wallet, '/credentials/health'),
+      ]);
+      setSummary(summaryRes.summary);
+      setRows(rowsRes.credentials || []);
+    } catch (err) {
+      setError((err as Error).message || 'Failed to load credential health');
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void load();
+  }, [load]);
+
+  useEffect(() => {
+    if (!scanId || (scanStatus !== 'queued' && scanStatus !== 'running')) return;
+
+    const timer = setInterval(async () => {
+      try {
+        const res = await api.get<{
+          success: boolean;
+          scan: { status: ScanStatus; error?: string };
+        }>(Api.Wallet, `/credentials/health/rescan/${scanId}`);
+        setScanStatus(res.scan.status);
+        setScanError(res.scan.error || null);
+        if (res.scan.status === 'complete') {
+          await load();
+        }
+      } catch (err) {
+        setScanStatus('failed');
+        setScanError((err as Error).message || 'Failed to read scan status');
+      }
+    }, 1000);
+
+    return () => clearInterval(timer);
+  }, [scanId, scanStatus, load]);
+
+  const startRescan = useCallback(async () => {
+    setScanError(null);
+    setScanStatus('queued');
+    try {
+      const res = await api.post<{ accepted: boolean; scanId: string }>(Api.Wallet, '/credentials/health/rescan');
+      setScanId(res.scanId);
+    } catch (err) {
+      setScanStatus('failed');
+      setScanError((err as Error).message || 'Failed to start rescan');
+    }
+  }, []);
+
+  const engineVersion = useMemo(() => rows.find((row) => row.health?.engineVersion)?.health.engineVersion, [rows]);
+
+  if (loading) {
+    return <div className="p-6 font-mono text-xs">LOADING_HEALTH...</div>;
+  }
+
+  if (error) {
+    return (
+      <div className="p-6 space-y-4">
+        <div className="font-mono text-xs text-red-700">{error}</div>
+        <button className="border px-3 py-2 font-mono text-xs" onClick={() => void load()}>RETRY</button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-[var(--color-background,#f4f4f5)] p-6">
+      <div className="max-w-6xl mx-auto space-y-4">
+        <div className="flex items-center justify-between gap-3">
+          <div>
+            <h1 className="font-mono text-lg">Credential Health</h1>
+            <p className="font-mono text-xs text-[var(--color-text-muted,#6b7280)]">
+              Last scan: {fmtTime(summary?.lastScanAt)} {engineVersion ? `· Engine v${engineVersion}` : ''}
+            </p>
+          </div>
+          <div className="flex items-center gap-2">
+            <Link href="/" className="border px-3 py-2 font-mono text-xs">VAULT</Link>
+            <button className="border px-3 py-2 font-mono text-xs" onClick={() => void startRescan()}>
+              RESCAN
+            </button>
+          </div>
+        </div>
+
+        {(scanStatus !== 'idle' || scanError) && (
+          <div className="border p-3 font-mono text-xs bg-white">
+            RESCAN_STATUS: {scanStatus.toUpperCase()}
+            {scanError ? ` · ${scanError}` : ''}
+          </div>
+        )}
+
+        {summary && summary.unknown > 0 && (
+          <div className="border border-amber-500/40 bg-amber-50 p-3 font-mono text-xs text-amber-800">
+            Some breach checks are unknown (network/rate-limit/disabled). Retry later or enable HEALTH_BREACH_CHECK.
+          </div>
+        )}
+
+        <div className="grid grid-cols-2 md:grid-cols-5 gap-2">
+          {[
+            ['WEAK', summary?.weak || 0],
+            ['REUSED', summary?.reused || 0],
+            ['BREACHED', summary?.breached || 0],
+            ['UNKNOWN', summary?.unknown || 0],
+            ['SAFE', summary?.safe || 0],
+          ].map(([label, count]) => (
+            <div key={label} className="border bg-white p-3">
+              <div className="font-mono text-[10px] text-[var(--color-text-muted,#6b7280)]">{label}</div>
+              <div className="font-mono text-xl">{count}</div>
+            </div>
+          ))}
+        </div>
+
+        <div className="border bg-white overflow-hidden">
+          <table className="w-full text-left font-mono text-xs">
+            <thead className="bg-[var(--color-background,#f4f4f5)]">
+              <tr>
+                <th className="p-2">Credential</th>
+                <th className="p-2">Status</th>
+                <th className="p-2">Evidence</th>
+              </tr>
+            </thead>
+            <tbody>
+              {rows.length === 0 ? (
+                <tr><td className="p-3" colSpan={3}>No scannable credentials found.</td></tr>
+              ) : rows.map((row) => (
+                <tr key={row.id} className="border-t">
+                  <td className="p-2">
+                    <div>{row.name}</div>
+                    <div className="text-[10px] text-[var(--color-text-muted,#6b7280)]">{row.type} · {row.vaultId}</div>
+                  </td>
+                  <td className={`p-2 uppercase ${STATUS_TONE[row.health.status] || 'text-slate-700'}`}>
+                    {row.health.status.replaceAll('_', ' ')}
+                  </td>
+                  <td className="p-2 text-[10px] text-[var(--color-text-muted,#6b7280)]">
+                    reuse={row.health.evidence.reuseCount}; breaches={row.health.evidence.breachCount ?? 'unknown'};
+                    weak={row.health.evidence.weakReasons.length > 0 ? row.health.evidence.weakReasons.join(',') : 'none'}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/icons/ChainIcons.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+
+interface IconProps {
+  size?: number;
+  className?: string;
+}
+
+export const BaseIcon: React.FC<IconProps> = ({ size = 16, className = '' }) => (
+  <svg width={size} height={size} viewBox="0 0 111 111" fill="none" className={className}>
+    <path d="M54.921 110.034C85.359 110.034 110.034 85.402 110.034 55.017C110.034 24.6319 85.359 0 54.921 0C26.0432 0 2.35281 22.1714 0 50.3923H72.8467V59.6416H0C2.35281 87.8625 26.0432 110.034 54.921 110.034Z" fill="currentColor"/>
+  </svg>
+);
+
+export const EthereumIcon: React.FC<IconProps> = ({ size = 16, className = '' }) => (
+  <svg width={size} height={size} viewBox="0 0 256 417" className={className}>
+    <path fill="currentColor" d="M127.961 0l-2.795 9.5v275.668l2.795 2.79 127.962-75.638z"/>
+    <path fill="currentColor" opacity="0.6" d="M127.962 0L0 212.32l127.962 75.639V154.158z"/>
+    <path fill="currentColor" d="M127.961 312.187l-1.575 1.92v98.199l1.575 4.6L256 236.587z"/>
+    <path fill="currentColor" opacity="0.6" d="M127.962 416.905v-104.72L0 236.585z"/>
+    <path fill="currentColor" opacity="0.8" d="M127.961 287.958l127.96-75.637-127.96-58.162z"/>
+    <path fill="currentColor" opacity="0.4" d="M0 212.32l127.96 75.638v-133.8z"/>
+  </svg>
+);
+
+export const ArbitrumIcon: React.FC<IconProps> = ({ size = 16, className = '' }) => (
+  <svg width={size} height={size} viewBox="0 0 256 256" className={className}>
+    <path fill="currentColor" d="M128 0C57.308 0 0 57.308 0 128s57.308 128 128 128 128-57.308 128-128S198.692 0 128 0zm70.56 186.624l-17.856-49.088L128 217.6l-52.704-80.064-17.856 49.088L128 38.4l70.56 148.224z"/>
+  </svg>
+);
+
+export const OptimismIcon: React.FC<IconProps> = ({ size = 16, className = '' }) => (
+  <svg width={size} height={size} viewBox="0 0 256 256" className={className}>
+    <circle cx="128" cy="128" r="128" fill="currentColor"/>
+    <path fill="white" d="M81.5 170.5c-11.3 0-20.2-3.2-26.7-9.5-6.5-6.4-9.8-15.3-9.8-26.8 0-14.5 4.2-26.2 12.5-35.2 8.4-9 19.5-13.5 33.3-13.5 11 0 19.7 3.1 26.2 9.4 6.5 6.2 9.7 14.9 9.7 26 0 14.7-4.2 26.6-12.5 35.7-8.3 9-19.4 13.5-33.3 13.5h.6v.4zm3.8-18c7.4 0 13.3-3.1 17.8-9.2 4.5-6.2 6.7-14.3 6.7-24.4 0-6.8-1.5-12-4.6-15.8-3-3.7-7.3-5.6-12.8-5.6-7.4 0-13.4 3.1-17.8 9.3-4.5 6.2-6.7 14.3-6.7 24.3 0 6.8 1.6 12 4.7 15.7 3.1 3.8 7.3 5.7 12.7 5.7z"/>
+    <path fill="white" d="M137.5 169V87.5h26.3c10.5 0 18.5 2.2 24 6.7 5.5 4.4 8.3 10.8 8.3 19.2 0 8.8-2.9 15.8-8.8 20.8-5.9 5-14.1 7.5-24.6 7.5h-7.8V169h-17.4zm17.4-43.8h5.3c5.2 0 9.1-1.1 11.8-3.4 2.7-2.3 4-5.5 4-9.8 0-3.8-1.2-6.6-3.6-8.6-2.4-2-6-3-10.8-3h-6.7v24.8z"/>
+  </svg>
+);
+
+export const PolygonIcon: React.FC<IconProps> = ({ size = 16, className = '' }) => (
+  <svg width={size} height={size} viewBox="0 0 256 256" className={className}>
+    <path fill="currentColor" d="M177.1 94.9c-3.5-2-7.8-2-11.3 0l-26.4 15.6-17.9 10.2-26.4 15.6c-3.5 2-7.8 2-11.3 0l-20.7-12.2c-3.5-2-5.7-5.8-5.7-9.8V91.8c0-3.9 2.1-7.7 5.7-9.8l20.5-11.9c3.5-2 7.8-2 11.3 0l20.5 11.9c3.5 2 5.7 5.8 5.7 9.8v15.6l17.9-10.4V81.1c0-3.9-2.1-7.7-5.7-9.8L95.7 47.8c-3.5-2-7.8-2-11.3 0L45.2 71.4c-3.6 2.1-5.7 5.9-5.7 9.8v47.1c0 3.9 2.1 7.7 5.7 9.8l38.8 22.5c3.5 2 7.8 2 11.3 0l26.4-15.4 17.9-10.4 26.4-15.4c3.5-2 7.8-2 11.3 0l20.5 11.9c3.5 2 5.7 5.8 5.7 9.8v22.5c0 3.9-2.1 7.7-5.7 9.8l-20.4 12c-3.5 2-7.8 2-11.3 0l-20.5-11.9c-3.5-2-5.7-5.8-5.7-9.8v-15.4l-17.9 10.4v15.8c0 3.9 2.1 7.7 5.7 9.8l38.8 22.5c3.5 2 7.8 2 11.3 0l38.8-22.5c3.5-2 5.7-5.8 5.7-9.8v-47.3c0-3.9-2.1-7.7-5.7-9.8l-39-22.3z"/>
+  </svg>
+);
+
+export const SolanaIcon: React.FC<IconProps> = ({ size = 16, className = '' }) => (
+  <svg width={size} height={size} viewBox="0 0 397 311" className={className}>
+    <path fill="currentColor" d="M64.6 237.9c2.4-2.4 5.7-3.8 9.2-3.8h317.4c5.8 0 8.7 7 4.6 11.1l-62.7 62.7c-2.4 2.4-5.7 3.8-9.2 3.8H6.5c-5.8 0-8.7-7-4.6-11.1l62.7-62.7z"/>
+    <path fill="currentColor" d="M64.6 3.8C67.1 1.4 70.4 0 73.8 0h317.4c5.8 0 8.7 7 4.6 11.1l-62.7 62.7c-2.4 2.4-5.7 3.8-9.2 3.8H6.5c-5.8 0-8.7-7-4.6-11.1L64.6 3.8z"/>
+    <path fill="currentColor" d="M333.1 120.1c-2.4-2.4-5.7-3.8-9.2-3.8H6.5c-5.8 0-8.7 7-4.6 11.1l62.7 62.7c2.4 2.4 5.7 3.8 9.2 3.8h317.4c5.8 0 8.7-7 4.6-11.1l-62.7-62.7z"/>
+  </svg>
+);
+
+export const DefaultChainIcon: React.FC<IconProps> = ({ size = 16, className = '' }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className={className}>
+    <circle cx="12" cy="12" r="10"/>
+    <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
+    <path d="M2 12h20"/>
+  </svg>
+);
+
+export const getChainIcon = (chain: string): React.FC<IconProps> => {
+  const icons: Record<string, React.FC<IconProps>> = {
+    base: BaseIcon,
+    ethereum: EthereumIcon,
+    arbitrum: ArbitrumIcon,
+    optimism: OptimismIcon,
+    polygon: PolygonIcon,
+    solana: SolanaIcon,
+    'solana-devnet': SolanaIcon,
+  };
+  return icons[chain.toLowerCase()] || DefaultChainIcon;
+};