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 [selectedTier, setSelectedTier] = useState(null); const [loading, setLoading] = useState(false); const [account, setAccount] = useState(null); const [showTooltip, setShowTooltip] = useState(null); const [hoverEffect, setHoverEffect] = useState(false); const { data: user } = useUser(); const tier = { name: "Premium Token Listing", price: 10000, cryptoPrices: { btc: "0.16 BTC", eth: "3.92 ETH" }, features: [ { text: "Instant Token Listing", tooltip: "Your token will be listed immediately after payment confirmation", icon: "fas fa-bolt" }, { text: "Premium Placement", tooltip: "Featured placement in the trending section for maximum visibility", icon: "fas fa-star" }, { text: "Social Media Promotion", tooltip: "Promotion across Twitter, Telegram, and Discord channels", icon: "fas fa-bullhorn" }, { text: "Verified Badge", tooltip: "Official verification badge for your token listing", icon: "fas fa-check-circle" }, { text: "Priority Support", tooltip: "24/7 dedicated support via private Telegram channel", icon: "fas fa-headset" }, { text: "Marketing Package", tooltip: "Custom marketing campaign across our network", icon: "fas fa-chart-line" } ], color: "bg-gradient-to-br from-[#1a1b1e] to-[#2c2d30]", highlight: true }; const connectWallet = async ()=>{ if (typeof window.ethereum !== "undefined") { try { const accounts = await window.ethereum.request({ method: "eth_requestAccounts" }); setAccount(accounts[0]); } catch (error) { console.error("Error connecting wallet:", error); } } else { window.open("https://metamask.io/download/", "_blank"); } }; const handlePayment = async (tier)=>{ setLoading(true); setSelectedTier(tier); try { await new Promise((resolve)=>setTimeout(resolve, 1000)); } finally{ setLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#1a1b1e] text-white", __source: { fileName: "", lineNumber: 80, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Navigation, { __source: { fileName: "", lineNumber: 81, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-6", __source: { fileName: "", lineNumber: 82, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto", __source: { fileName: "", lineNumber: 83, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4 mb-8", __source: { fileName: "", lineNumber: 84, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-coins text-[#f3ba2f] text-3xl", __source: { fileName: "", lineNumber: 85, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 86, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold", __source: { fileName: "", lineNumber: 87, columnNumber: 15 }, __self: this }, "List Your Token"), /*#__PURE__*/ React.createElement("div", { className: "text-gray-400", __source: { fileName: "", lineNumber: 88, columnNumber: 15 }, __self: this }, "Premium listing service"))), /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl mx-auto", __source: { fileName: "", lineNumber: 92, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(Tooltip1, { __source: { fileName: "", lineNumber: 93, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `${tier.color} rounded-xl p-8 transform transition-all duration-300 ${hoverEffect ? "scale-[1.02] shadow-2xl" : ""}`, onMouseEnter: ()=>setHoverEffect(true), onMouseLeave: ()=>setHoverEffect(false), __source: { fileName: "", lineNumber: 94, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-6", __source: { fileName: "", lineNumber: 101, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 102, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "px-3 py-1 bg-[#f3ba2f] text-black rounded-full text-xs font-bold mb-2 inline-block", __source: { fileName: "", lineNumber: 103, columnNumber: 21 }, __self: this }, "FEATURED"), /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mt-2", __source: { fileName: "", lineNumber: 106, columnNumber: 21 }, __self: this }, tier.name)), /*#__PURE__*/ React.createElement("div", { className: "text-right", __source: { fileName: "", lineNumber: 108, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-4xl font-bold", __source: { fileName: "", lineNumber: 109, columnNumber: 21 }, __self: this }, "$", tier.price), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-400 mt-1", __source: { fileName: "", lineNumber: 110, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 111, columnNumber: 23 }, __self: this }, tier.cryptoPrices.btc), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 112, columnNumber: 23 }, __self: this }, tier.cryptoPrices.eth)))), /*#__PURE__*/ React.createElement("ul", { className: "space-y-4 mb-8", __source: { fileName: "", lineNumber: 117, columnNumber: 17 }, __self: this }, tier.features.map((feature, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "flex items-center gap-3 relative group", onMouseEnter: ()=>setShowTooltip(`feature-${index}`), onMouseLeave: ()=>setShowTooltip(null), __source: { fileName: "", lineNumber: 119, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `${feature.icon} text-[#f3ba2f] text-lg w-6`, __source: { fileName: "", lineNumber: 125, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-md", __source: { fileName: "", lineNumber: 128, columnNumber: 23 }, __self: this }, feature.text), showTooltip === `feature-${index}` && /*#__PURE__*/ React.createElement("div", { className: "absolute left-full ml-4 px-4 py-2 bg-[#3a3b3e] rounded-lg text-sm w-64 z-10 shadow-xl", __source: { fileName: "", lineNumber: 130, columnNumber: 25 }, __self: this }, feature.tooltip)))), account ? /*#__PURE__*/ React.createElement("button", { onClick: ()=>handlePayment(tier), disabled: loading, className: "w-full py-3 px-6 rounded-lg font-bold bg-gradient-to-r from-[#f3ba2f] to-[#f6851b] hover:from-[#f6851b] hover:to-[#f3ba2f] text-black transition-all duration-300 transform hover:scale-[1.02] disabled:opacity-50 disabled:cursor-not-allowed", __source: { fileName: "", lineNumber: 139, columnNumber: 19 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin", __source: { fileName: "", lineNumber: 145, columnNumber: 23 }, __self: this }) : "List Your Token Now") : /*#__PURE__*/ React.createElement(MetaMaskButton, { __source: { fileName: "", lineNumber: 151, columnNumber: 19 }, __self: this }))))))); }