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 [search, setSearch] = useState(""); const [showHighlights, setShowHighlights] = useState(true); const [tooltipContent, setTooltipContent] = useState(""); const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 }); const [showTooltip, setShowTooltip] = useState(false); const [timeframe, setTimeframe] = useState("24h"); const [activeTab, setActiveTab] = useState("All"); const [marketCapRange, setMarketCapRange] = useState([ 0, 1000000000000 ]); const [priceChangeRange, setPriceChangeRange] = useState([ -100, 100 ]); const [volumeRange, setVolumeRange] = useState([ 0, 100000000000 ]); const [selectedCategories, setSelectedCategories] = useState([]); const [showFilters, setShowFilters] = useState(false); const [votes, setVotes] = useState({}); const [selectedIndicators, setSelectedIndicators] = useState([]); const [selectedSentiment, setSelectedSentiment] = useState([]); const [selectedCorrelations, setSelectedCorrelations] = useState([]); const [chartInstances, setChartInstances] = useState({}); const [connectedAddress, setConnectedAddress] = useState(null); const { data: user } = useUser(); useEffect(()=>{ const updateCharts = ()=>{ selectedIndicators.forEach((indicator)=>{ const ctx = document.getElementById(`chart-${indicator}`)?.getContext("2d"); if (ctx && !chartInstances[indicator]) { const newChart = new Chart(ctx, { type: "line", data: generateChartData(indicator), options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { y: { grid: { color: "#2c2d30" } } } } }); setChartInstances((prev)=>({ ...prev, [indicator]: newChart })); } }); selectedSentiment.forEach((sentiment)=>{ const ctx = document.getElementById(`sentiment-${sentiment}`)?.getContext("2d"); if (ctx && !chartInstances[sentiment]) { const newChart = new Chart(ctx, { type: "bar", data: generateSentimentData(sentiment), options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { y: { grid: { color: "#2c2d30" } } } } }); setChartInstances((prev)=>({ ...prev, [sentiment]: newChart })); } }); selectedCorrelations.forEach((correlation)=>{ const ctx = document.getElementById(`correlation-${correlation}`)?.getContext("2d"); if (ctx && !chartInstances[correlation]) { const newChart = new Chart(ctx, { type: "scatter", data: generateCorrelationData(correlation), options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { y: { grid: { color: "#2c2d30" } } } } }); setChartInstances((prev)=>({ ...prev, [correlation]: newChart })); } }); }; const interval = setInterval(updateCharts, 5000); updateCharts(); return ()=>{ clearInterval(interval); Object.values(chartInstances).forEach((chart)=>chart.destroy()); }; }, [ selectedIndicators, selectedSentiment, selectedCorrelations ]); const generateChartData = (indicator)=>({ labels: Array.from({ length: 20 }, (_, i)=>i), datasets: [ { data: Array.from({ length: 20 }, ()=>Math.random() * 100), borderColor: "#f3ba2f", tension: 0.4 } ] }); const generateSentimentData = (sentiment)=>({ labels: [ "Positive", "Neutral", "Negative" ], datasets: [ { data: [ Math.random() * 100, Math.random() * 100, Math.random() * 100 ], backgroundColor: [ "#4CAF50", "#FFA726", "#EF5350" ] } ] }); const generateCorrelationData = (correlation)=>({ datasets: [ { data: Array.from({ length: 50 }, ()=>({ x: Math.random() * 100, y: Math.random() * 100 })), backgroundColor: "#f3ba2f" } ] }); const technicalIndicators = [ { name: "RSI", description: "Relative Strength Index" }, { name: "MACD", description: "Moving Average Convergence Divergence" }, { name: "MA Cross", description: "Moving Average Crossover" } ]; const sentimentMetrics = [ { name: "Social Volume", description: "Social media mention volume" }, { name: "News Sentiment", description: "News article sentiment analysis" }, { name: "Market Fear/Greed", description: "Market sentiment indicator" } ]; const correlationMetrics = [ { name: "BTC Correlation", description: "Correlation with Bitcoin" }, { name: "ETH Correlation", description: "Correlation with Ethereum" }, { name: "Stock Market", description: "Correlation with S&P 500" } ]; const saveCurrentFilters = async ()=>{ if (!connectedAddress) { const accounts = await window.ethereum.request({ method: "eth_requestAccounts" }); setConnectedAddress(accounts[0]); } const filterConfig = { indicators: selectedIndicators, sentiment: selectedSentiment, correlations: selectedCorrelations, marketCap: marketCapRange, priceChange: priceChangeRange, volume: volumeRange, categories: selectedCategories, address: connectedAddress }; localStorage.setItem(`filters_${connectedAddress}`, JSON.stringify(filterConfig)); }; const cryptoData = [ { id: "bitcoin", name: "Bitcoin", symbol: "BTC", price: 50000, marketCap: 1000000000000, volume: 50000000000, change: { "24h": 5.5 }, category: "Currency" }, { id: "ethereum", name: "Ethereum", symbol: "ETH", price: 3000, marketCap: 500000000000, volume: 25000000000, change: { "24h": 3.2 }, category: "Smart Contract" } ]; const filteredCrypto = cryptoData.filter((crypto)=>(crypto.name.toLowerCase().includes(search.toLowerCase()) || crypto.symbol.toLowerCase().includes(search.toLowerCase())) && (activeTab === "All" || crypto.category === activeTab) && crypto.marketCap >= marketCapRange[0] && crypto.marketCap <= marketCapRange[1] && crypto.change[timeframe] >= priceChangeRange[0] && crypto.change[timeframe] <= priceChangeRange[1] && crypto.volume >= volumeRange[0] && crypto.volume <= volumeRange[1] && (selectedCategories.length === 0 || selectedCategories.includes(crypto.category))); const handleTooltip = (content, e)=>{ setTooltipContent(content); setTooltipPosition({ x: e.clientX, y: e.clientY }); setShowTooltip(true); }; const handleVote = (id, type)=>{ setVotes((prevVotes)=>({ ...prevVotes, [id]: (prevVotes[id] || 0) + (type === "up" ? 1 : -1) })); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#1a1b1d] text-white", __source: { fileName: "", lineNumber: 218, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Navigation, { __source: { fileName: "", lineNumber: 219, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-6", __source: { fileName: "", lineNumber: 220, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mb-6", __source: { fileName: "", lineNumber: 221, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4", __source: { fileName: "", lineNumber: 222, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 223, columnNumber: 13 }, __self: this }, "Analysis Dashboard"), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 224, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>applyPreset("High Security"), className: "px-4 py-2 bg-[#2c2d30] rounded-lg hover:bg-[#3a3b3e]", __source: { fileName: "", lineNumber: 225, columnNumber: 15 }, __self: this }, "High Security"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>applyPreset("DeFi Focus"), className: "px-4 py-2 bg-[#2c2d30] rounded-lg hover:bg-[#3a3b3e]", __source: { fileName: "", lineNumber: 231, columnNumber: 15 }, __self: this }, "DeFi Focus"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>applyPreset("NFT Projects"), className: "px-4 py-2 bg-[#2c2d30] rounded-lg hover:bg-[#3a3b3e]", __source: { fileName: "", lineNumber: 237, columnNumber: 15 }, __self: this }, "NFT Projects"))), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4", __source: { fileName: "", lineNumber: 245, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: saveCurrentFilters, className: "px-4 py-2 bg-blue-500 rounded-lg hover:bg-blue-600", __source: { fileName: "", lineNumber: 246, columnNumber: 13 }, __self: this }, "Save Filters"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowFilters(!showFilters), className: "px-4 py-2 bg-[#2c2d30] rounded-lg hover:bg-[#3a3b3e]", __source: { fileName: "", lineNumber: 252, columnNumber: 13 }, __self: this }, showFilters ? "Hide Filters" : "Show Filters"))), showFilters && /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-3 gap-6 mb-6", __source: { fileName: "", lineNumber: 262, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#2c2d30] p-4 rounded-xl", __source: { fileName: "", lineNumber: 263, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mb-4", __source: { fileName: "", lineNumber: 264, columnNumber: 15 }, __self: this }, "Technical Indicators"), technicalIndicators.map((indicator)=>/*#__PURE__*/ React.createElement("div", { key: indicator.name, className: "flex items-center gap-2 mb-2", __source: { fileName: "", lineNumber: 268, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", id: indicator.name, checked: selectedIndicators.includes(indicator.name), onChange: ()=>toggleIndicator(indicator.name), className: "rounded bg-[#3a3b3e]", __source: { fileName: "", lineNumber: 272, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: indicator.name, className: "flex-1", __source: { fileName: "", lineNumber: 279, columnNumber: 19 }, __self: this }, indicator.name), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-400", __source: { fileName: "", lineNumber: 282, columnNumber: 19 }, __self: this }, indicator.description)))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#2c2d30] p-4 rounded-xl", __source: { fileName: "", lineNumber: 289, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mb-4", __source: { fileName: "", lineNumber: 290, columnNumber: 15 }, __self: this }, "Sentiment Analysis"), sentimentMetrics.map((metric)=>/*#__PURE__*/ React.createElement("div", { key: metric.name, className: "flex items-center gap-2 mb-2", __source: { fileName: "", lineNumber: 292, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", id: metric.name, checked: selectedSentiment.includes(metric.name), onChange: ()=>toggleSentiment(metric.name), className: "rounded bg-[#3a3b3e]", __source: { fileName: "", lineNumber: 293, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: metric.name, className: "flex-1", __source: { fileName: "", lineNumber: 300, columnNumber: 19 }, __self: this }, metric.name), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-400", __source: { fileName: "", lineNumber: 303, columnNumber: 19 }, __self: this }, metric.description)))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#2c2d30] p-4 rounded-xl", __source: { fileName: "", lineNumber: 310, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mb-4", __source: { fileName: "", lineNumber: 311, columnNumber: 15 }, __self: this }, "Correlation Tracking"), correlationMetrics.map((metric)=>/*#__PURE__*/ React.createElement("div", { key: metric.name, className: "flex items-center gap-2 mb-2", __source: { fileName: "", lineNumber: 315, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", id: metric.name, checked: selectedCorrelations.includes(metric.name), onChange: ()=>toggleCorrelation(metric.name), className: "rounded bg-[#3a3b3e]", __source: { fileName: "", lineNumber: 316, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: metric.name, className: "flex-1", __source: { fileName: "", lineNumber: 323, columnNumber: 19 }, __self: this }, metric.name), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-400", __source: { fileName: "", lineNumber: 326, columnNumber: 19 }, __self: this }, metric.description))))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 335, columnNumber: 9 }, __self: this }, selectedIndicators.map((indicator)=>/*#__PURE__*/ React.createElement("div", { key: indicator, className: "bg-[#2c2d30] p-4 rounded-xl", __source: { fileName: "", lineNumber: 337, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mb-4", __source: { fileName: "", lineNumber: 338, columnNumber: 15 }, __self: this }, indicator), /*#__PURE__*/ React.createElement("div", { className: "h-[300px] bg-[#1a1b1d] rounded-lg p-4", __source: { fileName: "", lineNumber: 339, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("canvas", { id: `chart-${indicator}`, className: "w-full h-full", __source: { fileName: "", lineNumber: 340, columnNumber: 17 }, __self: this })))), selectedSentiment.map((sentiment)=>/*#__PURE__*/ React.createElement("div", { key: sentiment, className: "bg-[#2c2d30] p-4 rounded-xl", __source: { fileName: "", lineNumber: 349, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mb-4", __source: { fileName: "", lineNumber: 350, columnNumber: 15 }, __self: this }, sentiment), /*#__PURE__*/ React.createElement("div", { className: "h-[300px] bg-[#1a1b1d] rounded-lg p-4", __source: { fileName: "", lineNumber: 351, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("canvas", { id: `sentiment-${sentiment}`, className: "w-full h-full", __source: { fileName: "", lineNumber: 352, columnNumber: 17 }, __self: this })))), selectedCorrelations.map((correlation)=>/*#__PURE__*/ React.createElement("div", { key: correlation, className: "bg-[#2c2d30] p-4 rounded-xl", __source: { fileName: "", lineNumber: 361, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mb-4", __source: { fileName: "", lineNumber: 362, columnNumber: 15 }, __self: this }, correlation), /*#__PURE__*/ React.createElement("div", { className: "h-[300px] bg-[#1a1b1d] rounded-lg p-4", __source: { fileName: "", lineNumber: 363, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("canvas", { id: `correlation-${correlation}`, className: "w-full h-full", __source: { fileName: "", lineNumber: 364, columnNumber: 17 }, __self: this }))))))); }