{"path":"apps/dashboard/src/components/wallet-button.tsx","size":4433,"locked":false,"binary":false,"truncated":false,"content":"import { useState, useRef, useEffect } from \"react\";\nimport { useWallet } from \"@solana/wallet-adapter-react\";\nimport { Wallet, ChevronDown, LogOut, Copy, Check, Zap } from \"lucide-react\";\n\nfunction truncate(addr: string) {\n  return `${addr.slice(0, 4)}…${addr.slice(-4)}`;\n}\n\nexport function WalletButton({ compact = false }: { compact?: boolean }) {\n  const { publicKey, connected, connecting, disconnect, select, wallets } = useWallet();\n  const [open, setOpen] = useState(false);\n  const [copied, setCopied] = useState(false);\n  const ref = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    function handler(e: MouseEvent) {\n      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);\n    }\n    document.addEventListener(\"mousedown\", handler);\n    return () => document.removeEventListener(\"mousedown\", handler);\n  }, []);\n\n  const handleConnect = () => {\n    const phantom = wallets.find((w) => w.adapter.name === \"Phantom\");\n    if (phantom) select(phantom.adapter.name);\n    else select(wallets[0]?.adapter.name ?? null);\n  };\n\n  const handleCopy = () => {\n    if (publicKey) {\n      navigator.clipboard.writeText(publicKey.toBase58()).catch(() => {});\n      setCopied(true);\n      setTimeout(() => setCopied(false), 1500);\n    }\n  };\n\n  if (!connected) {\n    return (\n      <button\n        onClick={handleConnect}\n        disabled={connecting}\n        className={`group relative flex items-center justify-center gap-2 font-mono text-xs rounded-xl border border-emerald-500/25 text-emerald-400/80 hover:text-emerald-300 hover:border-emerald-500/50 hover:bg-emerald-500/10 active:scale-[0.97] transition-all duration-200 disabled:opacity-40 disabled:cursor-not-allowed overflow-hidden ${\n          compact ? \"px-3 py-2 min-h-[36px]\" : \"w-full px-4 py-3 min-h-[44px]\"\n        }`}\n      >\n        <div className=\"absolute inset-0 opacity-0 group-hover:opacity-100 bg-gradient-to-r from-emerald-500/5 to-transparent transition-opacity duration-300\" />\n        <Wallet className=\"w-3.5 h-3.5 shrink-0\" />\n        <span>{connecting ? \"Connecting…\" : compact ? \"Connect\" : \"Connect Wallet\"}</span>\n      </button>\n    );\n  }\n\n  return (\n    <div ref={ref} className=\"relative\">\n      <button\n        onClick={() => setOpen((o) => !o)}\n        className={`group flex items-center gap-2 font-mono text-xs rounded-xl border border-emerald-500/30 bg-emerald-500/10 text-emerald-400 hover:bg-emerald-500/15 hover:border-emerald-500/50 active:scale-[0.97] transition-all duration-200 ${\n          compact ? \"px-3 py-2 min-h-[36px]\" : \"w-full px-4 py-3 min-h-[44px]\"\n        }`}\n      >\n        <Zap className=\"w-3 h-3 shrink-0 text-emerald-400\" />\n        <span className=\"truncate flex-1 text-left\">{truncate(publicKey!.toBase58())}</span>\n        <ChevronDown className={`w-3 h-3 shrink-0 transition-transform duration-200 ${open ? \"rotate-180\" : \"\"}`} />\n      </button>\n\n      {open && (\n        <div className=\"absolute bottom-full left-0 right-0 mb-2 glass rounded-xl border border-white/10 shadow-[0_16px_48px_rgba(0,0,0,0.5)] z-50 overflow-hidden animate-in fade-in slide-in-from-bottom-2 duration-150\">\n          <div className=\"px-4 py-3 border-b border-white/[0.06]\">\n            <div className=\"text-[9px] font-mono text-muted-foreground/60 uppercase tracking-widest mb-1\">Connected</div>\n            <div className=\"text-[11px] font-mono text-foreground break-all leading-relaxed\">\n              {publicKey!.toBase58()}\n            </div>\n          </div>\n          <div className=\"p-1\">\n            <button\n              onClick={handleCopy}\n              className=\"w-full flex items-center gap-2.5 px-3 py-2.5 text-xs font-mono rounded-lg text-muted-foreground hover:text-foreground hover:bg-white/[0.05] transition-all duration-150\"\n            >\n              {copied ? <Check className=\"w-3.5 h-3.5 text-emerald-400\" /> : <Copy className=\"w-3.5 h-3.5\" />}\n              {copied ? \"Copied!\" : \"Copy address\"}\n            </button>\n            <button\n              onClick={() => { disconnect().catch(() => {}); setOpen(false); }}\n              className=\"w-full flex items-center gap-2.5 px-3 py-2.5 text-xs font-mono rounded-lg text-rose-400/80 hover:text-rose-400 hover:bg-rose-400/[0.08] transition-all duration-150\"\n            >\n              <LogOut className=\"w-3.5 h-3.5\" />\n              Disconnect\n            </button>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n"}