function Navigation() { const [isMenuOpen, setIsMenuOpen] = useState(false); const [isMetaMaskConnected, setIsMetaMaskConnected] = useState(false); const { data: user, loading } = useUser(); const connectMetaMask = async ()=>{ if (typeof window.ethereum !== "undefined") { try { await window.ethereum.request({ method: "eth_requestAccounts" }); setIsMetaMaskConnected(true); } catch (error) { console.error(error); } } }; const NavigationBar = ()=>/*#__PURE__*/ React.createElement("nav", { className: "bg-[#1a1b1e] border-b border-gray-800 sticky top-0 z-50 shadow-lg", __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between h-16", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-shrink-0", __source: { fileName: "", lineNumber: 22, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-coins text-[#f3ba2f] text-2xl", __source: { fileName: "", lineNumber: 23, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "hidden md:block", __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "ml-10 flex items-baseline space-x-4", __source: { fileName: "", lineNumber: 26, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium", __source: { fileName: "", lineNumber: 27, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-home mr-2", __source: { fileName: "", lineNumber: 31, columnNumber: 19 }, __self: this }), "Home"), /*#__PURE__*/ React.createElement("a", { href: "/chat", className: "text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium", __source: { fileName: "", lineNumber: 33, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-comments mr-2", __source: { fileName: "", lineNumber: 37, columnNumber: 19 }, __self: this }), "Chat"), /*#__PURE__*/ React.createElement("a", { href: "/leaderboard", className: "text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium", __source: { fileName: "", lineNumber: 39, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-trophy mr-2", __source: { fileName: "", lineNumber: 43, columnNumber: 19 }, __self: this }), "Leaderboard"), /*#__PURE__*/ React.createElement("a", { href: "/explorer", className: "text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium", __source: { fileName: "", lineNumber: 45, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-search mr-2", __source: { fileName: "", lineNumber: 49, columnNumber: 19 }, __self: this }), "Explorer"), /*#__PURE__*/ React.createElement("a", { href: "/services", className: "text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium", __source: { fileName: "", lineNumber: 51, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-briefcase mr-2", __source: { fileName: "", lineNumber: 55, columnNumber: 19 }, __self: this }), "Services"), /*#__PURE__*/ React.createElement("div", { className: "relative group", __source: { fileName: "", lineNumber: 57, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium", __source: { fileName: "", lineNumber: 58, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-ellipsis-h mr-2", __source: { fileName: "", lineNumber: 59, columnNumber: 21 }, __self: this }), "More"), /*#__PURE__*/ React.createElement("div", { className: "absolute left-0 mt-2 w-48 bg-[#2c2d30] rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200", __source: { fileName: "", lineNumber: 61, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/currency/btc", className: "block px-4 py-2 text-sm text-gray-300 hover:bg-[#3a3b3e] rounded-t-lg", __source: { fileName: "", lineNumber: 62, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-bitcoin mr-2", __source: { fileName: "", lineNumber: 66, columnNumber: 23 }, __self: this }), "Bitcoin Details"), /*#__PURE__*/ React.createElement("a", { href: "/list-coin", className: "block px-4 py-2 text-sm text-gray-300 hover:bg-[#3a3b3e]", __source: { fileName: "", lineNumber: 68, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-plus-circle mr-2", __source: { fileName: "", lineNumber: 72, columnNumber: 23 }, __self: this }), "List Your Coin")))))), /*#__PURE__*/ React.createElement("div", { className: "hidden md:flex items-center gap-4", __source: { fileName: "", lineNumber: 79, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative group", __source: { fileName: "", lineNumber: 80, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-gradient-to-r from-[#f3ba2f] to-[#f6851b] text-black px-4 py-2 rounded-lg text-sm font-medium hover:opacity-90 transition-opacity flex items-center gap-2", __source: { fileName: "", lineNumber: 81, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-plus-circle", __source: { fileName: "", lineNumber: 82, columnNumber: 17 }, __self: this }), "List Coin"), /*#__PURE__*/ React.createElement("div", { className: "absolute right-0 mt-2 w-48 bg-[#2c2d30] rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200", __source: { fileName: "", lineNumber: 85, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/list", className: "block px-4 py-2 text-sm text-gray-300 hover:bg-[#3a3b3e] rounded-t-lg", __source: { fileName: "", lineNumber: 86, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-rocket mr-2", __source: { fileName: "", lineNumber: 90, columnNumber: 19 }, __self: this }), "Standard Listing"), /*#__PURE__*/ React.createElement("a", { href: "/list?tier=premium", className: "block px-4 py-2 text-sm text-gray-300 hover:bg-[#3a3b3e]", __source: { fileName: "", lineNumber: 92, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-star mr-2", __source: { fileName: "", lineNumber: 96, columnNumber: 19 }, __self: this }), "Premium Listing"), /*#__PURE__*/ React.createElement("a", { href: "/list?tier=sponsored", className: "block px-4 py-2 text-sm text-gray-300 hover:bg-[#3a3b3e] rounded-b-lg", __source: { fileName: "", lineNumber: 98, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-ad mr-2", __source: { fileName: "", lineNumber: 102, columnNumber: 19 }, __self: this }), "Sponsored Listing"))), /*#__PURE__*/ React.createElement("button", { onClick: connectMetaMask, className: `flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors ${isMetaMaskConnected ? "bg-[#f6851b] text-white" : "bg-[#2c2d30] text-gray-300 hover:bg-[#3a3b3e]"}`, __source: { fileName: "", lineNumber: 107, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-ethereum", __source: { fileName: "", lineNumber: 115, columnNumber: 15 }, __self: this }), isMetaMaskConnected ? /*#__PURE__*/ React.createElement("span", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 117, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "h-2 w-2 bg-green-500 rounded-full", __source: { fileName: "", lineNumber: 118, columnNumber: 19 }, __self: this }), "Connected") : "Connect Wallet"), loading ? /*#__PURE__*/ React.createElement("div", { className: "text-gray-300", __source: { fileName: "", lineNumber: 127, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin", __source: { fileName: "", lineNumber: 128, columnNumber: 17 }, __self: this })) : user ? /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 131, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsMenuOpen(!isMenuOpen), className: "flex items-center gap-2 bg-[#2c2d30] rounded-lg text-sm p-2 hover:bg-[#3a3b3e] transition-colors", __source: { fileName: "", lineNumber: 132, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { className: "h-8 w-8 rounded-full border-2 border-[#f3ba2f]", src: user.image || "https://www.gravatar.com/avatar/?d=mp", alt: "User", __source: { fileName: "", lineNumber: 136, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-gray-300", __source: { fileName: "", lineNumber: 141, columnNumber: 19 }, __self: this }, user.name), /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-down text-gray-400", __source: { fileName: "", lineNumber: 142, columnNumber: 19 }, __self: this })), isMenuOpen && /*#__PURE__*/ React.createElement("div", { className: "absolute right-0 mt-2 w-48 rounded-lg shadow-lg bg-[#2c2d30] ring-1 ring-black ring-opacity-5", __source: { fileName: "", lineNumber: 145, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "py-1", __source: { fileName: "", lineNumber: 146, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/profile", className: "flex items-center px-4 py-2 text-sm text-gray-300 hover:bg-[#3a3b3e]", __source: { fileName: "", lineNumber: 147, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user mr-2", __source: { fileName: "", lineNumber: 151, columnNumber: 25 }, __self: this }), "Profile"), /*#__PURE__*/ React.createElement("a", { href: "/settings", className: "flex items-center px-4 py-2 text-sm text-gray-300 hover:bg-[#3a3b3e]", __source: { fileName: "", lineNumber: 153, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-cog mr-2", __source: { fileName: "", lineNumber: 157, columnNumber: 25 }, __self: this }), "Settings"), /*#__PURE__*/ React.createElement("div", { className: "border-t border-gray-700 my-1", __source: { fileName: "", lineNumber: 159, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("a", { href: "/account/logout", className: "flex items-center px-4 py-2 text-sm text-red-400 hover:bg-[#3a3b3e]", __source: { fileName: "", lineNumber: 160, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-sign-out-alt mr-2", __source: { fileName: "", lineNumber: 164, columnNumber: 25 }, __self: this }), "Sign out")))) : /*#__PURE__*/ React.createElement("div", { className: "flex gap-4", __source: { fileName: "", lineNumber: 171, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/account/signin", className: "text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium", __source: { fileName: "", lineNumber: 172, columnNumber: 17 }, __self: this }, "Sign in"), /*#__PURE__*/ React.createElement("a", { href: "/account/signup", className: "bg-blue-500 hover:bg-blue-600 text-white px-3 py-2 rounded-md text-sm font-medium", __source: { fileName: "", lineNumber: 178, columnNumber: 17 }, __self: this }, "Sign up")))))); return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(NavigationBar, { __source: { fileName: "", lineNumber: 194, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-6", __source: { fileName: "", lineNumber: 195, columnNumber: 7 }, __self: this })); } function NavigationStory() { return /*#__PURE__*/ React.createElement(Navigation, { __source: { fileName: "", lineNumber: 201, columnNumber: 10 }, __self: this }); } function Tooltip1({ text, children, position = "right", width = "md" }) { const widthClasses = { sm: "w-48", md: "w-64", lg: "w-96" }; const positionClasses = { top: "bottom-full left-1/2 -translate-x-1/2 mb-2", right: "left-full top-0 ml-2", bottom: "top-full left-1/2 -translate-x-1/2 mt-2", left: "right-full top-0 mr-2" }; const arrowClasses = { top: "-bottom-1 left-1/2 -translate-x-1/2 border-t-[#1a1b1e] border-l-transparent border-r-transparent border-b-transparent", right: "-left-1 top-3 border-r-[#1a1b1e] border-t-transparent border-b-transparent border-l-transparent", bottom: "-top-1 left-1/2 -translate-x-1/2 border-b-[#1a1b1e] border-l-transparent border-r-transparent border-t-transparent", left: "-right-1 top-3 border-l-[#1a1b1e] border-t-transparent border-b-transparent border-r-transparent" }; return /*#__PURE__*/ React.createElement("div", { className: "group relative inline-block", __source: { fileName: "", lineNumber: 25, columnNumber: 5 }, __self: this }, children, /*#__PURE__*/ React.createElement("div", { className: `absolute z-50 invisible group-hover:visible opacity-0 group-hover:opacity-100 ${positionClasses[position]} ${widthClasses[width]} bg-[#1a1b1e] text-white text-sm py-2 px-3 rounded-lg shadow-xl border border-gray-700 backdrop-blur-sm transition-all duration-200 ease-in-out transform scale-95 group-hover:scale-100`, __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `absolute w-0 h-0 border-[6px] ${arrowClasses[position]}`, __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }), text)); } function Tooltip1Story() { return /*#__PURE__*/ React.createElement("div", { className: "p-8 space-y-8", __source: { fileName: "", lineNumber: 41, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, "Tooltip Positions"), /*#__PURE__*/ React.createElement("div", { className: "flex gap-8", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(Tooltip1, { text: "Top tooltip", position: "top", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-blue-500 rounded-lg", __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }, "Top")), /*#__PURE__*/ React.createElement(Tooltip1, { text: "Right tooltip", position: "right", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-blue-500 rounded-lg", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, "Right")), /*#__PURE__*/ React.createElement(Tooltip1, { text: "Bottom tooltip", position: "bottom", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-blue-500 rounded-lg", __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, "Bottom")), /*#__PURE__*/ React.createElement(Tooltip1, { text: "Left tooltip", position: "left", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-blue-500 rounded-lg", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, "Left")))), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 60, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, "Tooltip Sizes"), /*#__PURE__*/ React.createElement("div", { className: "flex gap-8", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(Tooltip1, { text: "Small width tooltip", width: "sm", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-blue-500 rounded-lg", __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this }, "Small")), /*#__PURE__*/ React.createElement(Tooltip1, { text: "Medium width tooltip", width: "md", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-blue-500 rounded-lg", __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }, "Medium")), /*#__PURE__*/ React.createElement(Tooltip1, { text: "Large width tooltip with more content that can span multiple lines if needed", width: "lg", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-blue-500 rounded-lg", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }, "Large")))), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 78, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold", __source: { fileName: "", lineNumber: 79, columnNumber: 9 }, __self: this }, "Example Usage"), /*#__PURE__*/ React.createElement("div", { className: "flex gap-8", __source: { fileName: "", lineNumber: 80, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(Tooltip1, { text: "This is a helpful tooltip explaining what this button does", position: "bottom", width: "md", __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-[#f3ba2f] text-black rounded-lg", __source: { fileName: "", lineNumber: 86, columnNumber: 13 }, __self: this }, "Hover Me"))))); } function MetaMaskButton({ onConnect, onDisconnect, onExplorerClick }) { const [walletStatus, setWalletStatus] = useState("disconnected"); const [account, setAccount] = useState(null); const [networkId, setNetworkId] = useState(null); const [showDropdown, setShowDropdown] = useState(false); const networks = { 1: "Ethereum", 137: "Polygon", 56: "BSC", 43114: "Avalanche" }; useEffect(()=>{ if (window.ethereum) { window.ethereum.on("accountsChanged", handleAccountsChanged); window.ethereum.on("chainChanged", handleChainChanged); window.ethereum.on("disconnect", handleDisconnect); } return ()=>{ if (window.ethereum) { window.ethereum.removeListener("accountsChanged", handleAccountsChanged); window.ethereum.removeListener("chainChanged", handleChainChanged); window.ethereum.removeListener("disconnect", handleDisconnect); } }; }, []); const handleAccountsChanged = (accounts)=>{ if (accounts.length === 0) { setWalletStatus("disconnected"); setAccount(null); onDisconnect?.(); } else { setAccount(accounts[0]); setWalletStatus("connected"); onConnect?.(accounts[0]); } }; const handleChainChanged = (chainId)=>{ setNetworkId(parseInt(chainId, 16)); }; const handleDisconnect = ()=>{ setWalletStatus("disconnected"); setAccount(null); setNetworkId(null); onDisconnect?.(); }; const handleWalletConnect = async ()=>{ if (typeof window.ethereum === "undefined") { setWalletStatus("error"); setTimeout(()=>window.open("https://metamask.io/download/", "_blank"), 1000); return; } setWalletStatus("connecting"); try { const accounts = await window.ethereum.request({ method: "eth_requestAccounts" }); const chainId = await window.ethereum.request({ method: "eth_chainId" }); setAccount(accounts[0]); setNetworkId(parseInt(chainId, 16)); setWalletStatus("connected"); onConnect?.(accounts[0]); } catch (error) { setWalletStatus("error"); setTimeout(()=>setWalletStatus("disconnected"), 3000); } }; const getStatusStyles = ()=>{ const baseStyles = "px-4 py-2 rounded-lg flex items-center gap-2 transition-all duration-300 relative overflow-hidden"; switch(walletStatus){ case "connected": return `${baseStyles} bg-[#2c2d30] hover:bg-[#3a3b3e] border border-green-500`; case "connecting": return `${baseStyles} bg-[#2c2d30] cursor-not-allowed`; case "error": return `${baseStyles} bg-red-600 hover:bg-red-700`; default: return `${baseStyles} bg-[#f6851b] hover:bg-[#e67e22] text-white`; } }; const getStatusIcon = ()=>{ switch(walletStatus){ case "connected": return "fa-circle text-green-500"; case "connecting": return "fa-spinner fa-spin text-gray-400"; case "error": return "fa-exclamation-circle text-white"; default: return "fa-wallet text-white"; } }; return /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 111, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: walletStatus === "connected" ? ()=>setShowDropdown(!showDropdown) : handleWalletConnect, disabled: walletStatus === "connecting", className: getStatusStyles(), __source: { fileName: "", lineNumber: 112, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${getStatusIcon()}`, __source: { fileName: "", lineNumber: 121, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "relative z-10", __source: { fileName: "", lineNumber: 122, columnNumber: 9 }, __self: this }, walletStatus === "connected" ? /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 124, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 125, columnNumber: 15 }, __self: this }, `${account.slice(0, 6)}...${account.slice(-4)}`), /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-400", __source: { fileName: "", lineNumber: 126, columnNumber: 15 }, __self: this }, networks[networkId] || `Chain ${networkId}`), /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-down text-xs", __source: { fileName: "", lineNumber: 129, columnNumber: 15 }, __self: this })) : walletStatus === "connecting" ? "Connecting..." : walletStatus === "error" ? "Error connecting" : "Connect MetaMask"), walletStatus === "connecting" && /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent animate-shimmer", __source: { fileName: "", lineNumber: 140, columnNumber: 11 }, __self: this })), showDropdown && walletStatus === "connected" && /*#__PURE__*/ React.createElement("div", { className: "absolute right-0 mt-2 w-48 rounded-lg bg-[#2c2d30] shadow-lg border border-gray-700 z-20", __source: { fileName: "", lineNumber: 145, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "py-1", __source: { fileName: "", lineNumber: 146, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleDisconnect, className: "w-full px-4 py-2 text-left text-sm text-gray-300 hover:bg-[#3a3b3e] flex items-center gap-2", __source: { fileName: "", lineNumber: 147, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-sign-out-alt", __source: { fileName: "", lineNumber: 151, columnNumber: 15 }, __self: this }), "Disconnect"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>onExplorerClick?.(account), className: "w-full px-4 py-2 text-left text-sm text-gray-300 hover:bg-[#3a3b3e] flex items-center gap-2", __source: { fileName: "", lineNumber: 154, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-external-link-alt", __source: { fileName: "", lineNumber: 158, columnNumber: 15 }, __self: this }), "View on Explorer"))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 164, columnNumber: 7 }, __self: this }, ` @keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .animate-shimmer { animation: shimmer 1.5s infinite; } `)); } function MetaMaskButtonStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-6 space-y-4", __source: { fileName: "", lineNumber: 179, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MetaMaskButton, { onConnect: (account)=>console.log("Connected:", account), onDisconnect: ()=>console.log("Disconnected"), onExplorerClick: (account)=>window.open(`https://etherscan.io/address/${account}`, "_blank"), __source: { fileName: "", lineNumber: 180, columnNumber: 7 }, __self: this })); } function MainComponent() { const [cryptoData, setCryptoData] = useState([ { id: "bitcoin", name: "Bitcoin", symbol: "BTC", price: 0, priceChange: 0, volume: 0, marketCap: 0, icon: "/icons/btc.png" }, { id: "ethereum", name: "Ethereum", symbol: "ETH", price: 0, priceChange: 0, volume: 0, marketCap: 0, icon: "/icons/eth.png" }, { id: "binancecoin", name: "Binance Coin", symbol: "BNB", price: 0, priceChange: 0, volume: 0, marketCap: 0, icon: "/icons/bnb.png" }, { id: "solana", name: "Solana", symbol: "SOL", price: 0, priceChange: 0, volume: 0, marketCap: 0, icon: "/icons/sol.png" }, { id: "cardano", name: "Cardano", symbol: "ADA", price: 0, priceChange: 0, volume: 0, marketCap: 0, icon: "/icons/ada.png" }, { id: "ripple", name: "XRP", symbol: "XRP", price: 0, priceChange: 0, volume: 0, marketCap: 0, icon: "/icons/xrp.png" }, { id: "polkadot", name: "Polkadot", symbol: "DOT", price: 0, priceChange: 0, volume: 0, marketCap: 0, icon: "/icons/dot.png" }, { id: "dogecoin", name: "Dogecoin", symbol: "DOGE", price: 0, priceChange: 0, volume: 0, marketCap: 0, icon: "/icons/doge.png" }, { id: "avalanche-2", name: "Avalanche", symbol: "AVAX", price: 0, priceChange: 0, volume: 0, marketCap: 0, icon: "/icons/avax.png" }, { id: "shiba-inu", name: "Shiba Inu", symbol: "SHIB", price: 0, priceChange: 0, volume: 0, marketCap: 0, icon: "/icons/shib.png" } ]); const [following, setFollowing] = useState([]); const [watchlist, setWatchlist] = useState([]); const [page, setPage] = useState(1); const [loading, setLoading] = useState(false); const [searchTerm, setSearchTerm] = useState(""); const [activeCategory, setActiveCategory] = useState("all"); const { data: user } = useUser(); const fetchPriceData = async ()=>{ try { setLoading(true); const response = await fetch(`https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=200&page=${page}&sparkline=false`); const data = await response.json(); const formattedData = data.map((coin)=>({ id: coin.id, name: coin.name, symbol: coin.symbol.toUpperCase(), price: coin.current_price, priceChange: coin.price_change_percentage_24h?.toFixed(2) || 0, volume: coin.total_volume / 1000000, marketCap: coin.market_cap / 1000000, icon: coin.image })); setCryptoData(formattedData); } catch (error) { console.error("Error fetching price data:", error); } finally{ setLoading(false); } }; const formatNumber = (num)=>{ if (num >= 1000) return `${(num / 1000).toFixed(1)}B`; return num.toFixed(1); }; const handleFollow = (coinId)=>{ setFollowing((prev)=>prev.includes(coinId) ? prev.filter((id)=>id !== coinId) : [ ...prev, coinId ]); }; const handleAddToWatchlist = (coinId)=>{ setWatchlist((prev)=>prev.includes(coinId) ? prev.filter((id)=>id !== coinId) : [ ...prev, coinId ]); }; useEffect(()=>{ fetchPriceData(); const interval = setInterval(()=>{ fetchPriceData(); }, 5000); return ()=>clearInterval(interval); }, []); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col min-h-screen bg-[#1a1b1e] text-white", __source: { fileName: "", lineNumber: 166, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Navigation, { __source: { fileName: "", lineNumber: 167, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex-1 p-6", __source: { fileName: "", lineNumber: 168, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto", __source: { fileName: "", lineNumber: 169, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "sticky top-0 z-10 bg-[#1a1b1e] py-4", __source: { fileName: "", lineNumber: 170, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Search cryptocurrencies...", className: "w-full px-4 py-2 bg-[#2c2d30] rounded-lg focus:outline-none focus:ring-2 focus:ring-[#f3ba2f] mb-4", __source: { fileName: "", lineNumber: 171, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4 overflow-x-auto pb-2", __source: { fileName: "", lineNumber: 176, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-blue-500 rounded-lg whitespace-nowrap", __source: { fileName: "", lineNumber: 177, columnNumber: 15 }, __self: this }, "All Assets"), /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-[#2c2d30] rounded-lg whitespace-nowrap", __source: { fileName: "", lineNumber: 180, columnNumber: 15 }, __self: this }, "Trending"), /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-[#2c2d30] rounded-lg whitespace-nowrap", __source: { fileName: "", lineNumber: 183, columnNumber: 15 }, __self: this }, "Recently Added"), /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-[#2c2d30] rounded-lg whitespace-nowrap", __source: { fileName: "", lineNumber: 186, columnNumber: 15 }, __self: this }, "DeFi"), /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-[#2c2d30] rounded-lg whitespace-nowrap", __source: { fileName: "", lineNumber: 189, columnNumber: 15 }, __self: this }, "NFTs"), /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-[#2c2d30] rounded-lg whitespace-nowrap", __source: { fileName: "", lineNumber: 192, columnNumber: 15 }, __self: this }, "Metaverse"))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#2c2d30] rounded-xl overflow-hidden shadow-lg mb-8", __source: { fileName: "", lineNumber: 197, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-7 p-4 border-b border-gray-700 text-sm font-semibold text-gray-400", __source: { fileName: "", lineNumber: 198, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "col-span-2", __source: { fileName: "", lineNumber: 199, columnNumber: 15 }, __self: this }, "Asset"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 200, columnNumber: 15 }, __self: this }, "Price"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 201, columnNumber: 15 }, __self: this }, "24h Change"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 202, columnNumber: 15 }, __self: this }, "Volume (24h)"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 203, columnNumber: 15 }, __self: this }, "Market Cap"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 204, columnNumber: 15 }, __self: this }, "Actions")), cryptoData.map((coin)=>/*#__PURE__*/ React.createElement("div", { key: coin.id, className: "grid grid-cols-7 p-4 border-b border-gray-700 hover:bg-[#3a3b3e] transition-colors", __source: { fileName: "", lineNumber: 207, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "col-span-2 flex items-center gap-3", __source: { fileName: "", lineNumber: 211, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-10 h-10 rounded-full bg-[#1a1b1e] flex items-center justify-center border border-gray-700", __source: { fileName: "", lineNumber: 212, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: coin.icon, alt: coin.name, className: "w-6 h-6", __source: { fileName: "", lineNumber: 213, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 215, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 216, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold", __source: { fileName: "", lineNumber: 217, columnNumber: 23 }, __self: this }, coin.name), /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-400", __source: { fileName: "", lineNumber: 218, columnNumber: 23 }, __self: this }, coin.symbol)), /*#__PURE__*/ React.createElement("a", { href: `/currency/${coin.id}`, className: "text-xs text-blue-400 hover:underline", __source: { fileName: "", lineNumber: 222, columnNumber: 21 }, __self: this }, "View Details"))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center font-bold", __source: { fileName: "", lineNumber: 230, columnNumber: 17 }, __self: this }, "$", coin.price.toLocaleString()), /*#__PURE__*/ React.createElement("div", { className: `flex items-center ${coin.priceChange >= 0 ? "text-green-500" : "text-red-500"}`, __source: { fileName: "", lineNumber: 233, columnNumber: 17 }, __self: this }, coin.priceChange >= 0 ? "+" : "", coin.priceChange, "%"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 239, columnNumber: 17 }, __self: this }, "$", formatNumber(coin.volume), "M"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 242, columnNumber: 17 }, __self: this }, "$", formatNumber(coin.marketCap), "M"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 245, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleFollow(coin.id), className: `px-3 py-1 rounded-lg text-xs font-bold transition-all duration-200 ${following.includes(coin.id) ? "bg-blue-500 hover:bg-blue-600" : "bg-[#3a3b3e] hover:bg-[#4a4b4e]"}`, __source: { fileName: "", lineNumber: 246, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${following.includes(coin.id) ? "fa-user-check" : "fa-user-plus"} mr-1`, __source: { fileName: "", lineNumber: 254, columnNumber: 21 }, __self: this }), following.includes(coin.id) ? "Following" : "Follow"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleAddToWatchlist(coin.id), className: `px-3 py-1 rounded-lg transition-all duration-200 ${watchlist.includes(coin.id) ? "bg-[#f3ba2f] text-black hover:bg-[#f6851b]" : "bg-[#3a3b3e] hover:bg-[#4a4b4e]"}`, __source: { fileName: "", lineNumber: 259, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-star", __source: { fileName: "", lineNumber: 267, columnNumber: 21 }, __self: this })))))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mt-4", __source: { fileName: "", lineNumber: 273, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "px-6 py-2 bg-[#2c2d30] rounded-lg hover:bg-[#3a3b3e]", __source: { fileName: "", lineNumber: 274, columnNumber: 13 }, __self: this }, "Load More"))))); }