function SocialsVerificationButton({ socialAccessStatus, walletAddress, onAccessGranted, tokenAddress, chainId, forceOpen }) { const [showPopup, setShowPopup] = React.useState(false); const [accessStatus, setAccessStatus] = React.useState(socialAccessStatus); const [showTooltip, setShowTooltip] = React.useState(false); const [loading, setLoading] = React.useState(false); React.useEffect(()=>{ setAccessStatus(socialAccessStatus); }, [ socialAccessStatus ]); React.useEffect(()=>{ if (socialAccessStatus === "Access") return; async function checkAccess() { if (!walletAddress || !tokenAddress || !chainId) { setAccessStatus("No Access"); return; } setLoading(true); try { const response = await fetch("/api/check-social-access", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ tokenAddress, chainId, walletAddress }) }); if (!response.ok) throw new Error("API error"); const data = await response.json(); setAccessStatus(data.hasAccess ? "Access" : "No Access"); } catch (err) { setAccessStatus("No Access"); console.error("Fout bij check access:", err); } finally{ setLoading(false); } } checkAccess(); }, [ walletAddress, tokenAddress, chainId, socialAccessStatus ]); React.useEffect(()=>{ if (forceOpen && !showPopup) { setShowPopup(true); } }, [ forceOpen, showPopup ]); const isAccessGranted = accessStatus === "Access"; const isWalletConnected = !!walletAddress; const isDisabled = !isWalletConnected || loading; let buttonBg = "bg-blue-600 hover:bg-blue-700"; let buttonText = loading ? "Checking..." : "Socials"; let buttonIcon = /*#__PURE__*/ React.createElement("i", { className: "fa-solid fa-users-line", __source: { fileName: "", lineNumber: 57, columnNumber: 20 }, __self: this }); if (isAccessGranted) { buttonBg = "bg-green-600 hover:bg-green-700"; buttonText = "Access"; buttonIcon = /*#__PURE__*/ React.createElement("i", { className: "fa-solid fa-lock-open", __source: { fileName: "", lineNumber: 61, columnNumber: 18 }, __self: this }); } else if (!isWalletConnected) { buttonBg = "bg-[#575e69] text-gray-400 border-none hover:bg-[#575e69]"; buttonText = "Socials"; buttonIcon = /*#__PURE__*/ React.createElement("i", { className: "fa-solid fa-users-line", __source: { fileName: "", lineNumber: 65, columnNumber: 18 }, __self: this }); } const buttonClass = `h-[48px] w-full px-4 rounded-lg font-bold flex items-center justify-center gap-2 transition-colors text-white ${buttonBg} ${!isWalletConnected ? "cursor-not-allowed" : ""}`; const tooltip = !isWalletConnected ? /*#__PURE__*/ React.createElement("div", { className: "absolute z-50 mt-2 left-1/2 -translate-x-1/2 bg-black text-white text-xs rounded px-2 py-1 shadow-lg whitespace-nowrap", style: { pointerEvents: "none" }, __source: { fileName: "", lineNumber: 71, columnNumber: 5 }, __self: this }, "First connect your wallet") : null; const handleAccessGranted = ()=>{ setAccessStatus("Access"); setShowPopup(false); if (onAccessGranted) onAccessGranted(); }; return /*#__PURE__*/ React.createElement("div", { className: "relative flex-1 min-w-0 flex justify-center", __source: { fileName: "", lineNumber: 86, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: buttonClass, onClick: ()=>{ if (!isAccessGranted && isWalletConnected) setShowPopup(true); }, disabled: isDisabled || isAccessGranted, type: "button", __source: { fileName: "", lineNumber: 87, columnNumber: 7 }, __self: this }, buttonIcon, buttonText), showTooltip && tooltip, showPopup && /*#__PURE__*/ React.createElement(SocialsAccessPopup, { open: showPopup, onClose: ()=>setShowPopup(false), tokenAddress: tokenAddress, chainId: chainId, walletAddress: walletAddress, initialData: isAccessGranted ? { hasAccess: true } : null, onAccessGranted: handleAccessGranted, popupTitle: isAccessGranted ? /*#__PURE__*/ React.createElement("span", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 111, columnNumber: 15 } }, /*#__PURE__*/ React.createElement("i", { className: "fa-solid fa-lock-open", __source: { fileName: "", lineNumber: 112, columnNumber: 17 } }), "Access") : /*#__PURE__*/ React.createElement("span", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 115, columnNumber: 15 } }, /*#__PURE__*/ React.createElement("i", { className: "fa-solid fa-users-line", __source: { fileName: "", lineNumber: 116, columnNumber: 17 } }), "Socials"), __source: { fileName: "", lineNumber: 101, columnNumber: 9 }, __self: this })); } function SocialsVerificationButtonStory() { const [status, setStatus] = React.useState("No Access"); return /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 129, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(SocialsVerificationButton, { socialAccessStatus: status, walletAddress: "0x123", tokenAddress: "0x123", chainId: 1, onAccessGranted: ()=>setStatus("Access"), __source: { fileName: "", lineNumber: 130, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(SocialsVerificationButton, { socialAccessStatus: "No Access", walletAddress: "0x123", tokenAddress: "0x123", chainId: 1, __source: { fileName: "", lineNumber: 137, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(SocialsVerificationButton, { socialAccessStatus: "No Access", walletAddress: null, tokenAddress: "0x123", chainId: 1, __source: { fileName: "", lineNumber: 143, columnNumber: 7 }, __self: this })); } function getSocialIcon(platform) { if (!platform) return "fas fa-link"; const p = platform.toLowerCase(); if (p.includes("twitter")) return "fab fa-twitter"; if (p.includes("telegram")) return "fab fa-telegram"; if (p.includes("discord")) return "fab fa-discord"; if (p.includes("github")) return "fab fa-github"; if (p.includes("reddit")) return "fab fa-reddit"; if (p.includes("youtube")) return "fab fa-youtube"; if (p.includes("instagram")) return "fab fa-instagram"; if (p.includes("facebook")) return "fab fa-facebook"; if (p.includes("tiktok")) return "fab fa-tiktok"; if (p.includes("website")) return "fa-solid fa-globe"; return "fas fa-link"; } function normalizeSocials(socials, token) { if (Array.isArray(socials)) { return socials; } if (socials && typeof socials === "object") { return Object.entries(socials).filter(([_, url])=>!!url).map(([platform, url])=>({ platform, url })); } // Fallback: check losse velden uit token (zoals twitter_url, telegram_url, etc) const platforms = [ "twitter", "telegram", "discord", "reddit", "youtube", "instagram", "facebook", "tiktok", "website" ]; return platforms.map((platform)=>{ const url = token?.[platform + "_url"] || token?.[platform]; return url ? { platform, url } : null; }).filter(Boolean); } function TokenHeaderSocialsExpand({ displayImage, name, symbol, chainId, tokenAddress, website, socials = [], isFavorite = false, onFavoriteChange, walletAddress, dexscreenerInfo, customData }) { const [showExtraInfo, setShowExtraInfo] = React.useState(false); let socialsToShow = []; if (Array.isArray(socials) && socials.length > 0) { socialsToShow = socials; } if (customData?.custom_socials && Array.isArray(customData.custom_socials) && customData.custom_socials.length > 0) { const existingPlatforms = new Set(socialsToShow.map((s)=>s.platform)); customData.custom_socials.forEach((s)=>{ if (s.platform && !existingPlatforms.has(s.platform)) { socialsToShow.push(s); } }); } if (customData?.socials && Array.isArray(customData.socials) && customData.socials.length > 0) { const existingPlatforms = new Set(socialsToShow.map((s)=>s.platform)); customData.socials.forEach((s)=>{ if (s.platform && !existingPlatforms.has(s.platform)) { socialsToShow.push(s); } }); } if (dexscreenerInfo) { if (dexscreenerInfo.website && !socialsToShow.find((s)=>s.platform === "website")) socialsToShow.push({ platform: "website", url: dexscreenerInfo.website }); if (dexscreenerInfo.twitter && !socialsToShow.find((s)=>s.platform === "twitter")) socialsToShow.push({ platform: "twitter", url: dexscreenerInfo.twitter }); if (dexscreenerInfo.telegram && !socialsToShow.find((s)=>s.platform === "telegram")) socialsToShow.push({ platform: "telegram", url: dexscreenerInfo.telegram }); if (dexscreenerInfo.discord && !socialsToShow.find((s)=>s.platform === "discord")) socialsToShow.push({ platform: "discord", url: dexscreenerInfo.discord }); } if (website && !socialsToShow.find((s)=>s.platform === "website")) { socialsToShow.unshift({ platform: "website", url: website }); } return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row md:items-center w-full justify-between gap-2 md:gap-0", __source: { fileName: "", lineNumber: 120, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-3 min-w-0 flex-1", __source: { fileName: "", lineNumber: 121, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: displayImage || "/default-token.png", alt: name, className: "w-12 h-12 rounded-full object-cover bg-gray-800", style: { minWidth: 48, minHeight: 48 }, __source: { fileName: "", lineNumber: 122, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col min-w-0", __source: { fileName: "", lineNumber: 128, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2 min-w-0", __source: { fileName: "", lineNumber: 129, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-bold text-lg truncate text-white", title: name, __source: { fileName: "", lineNumber: 130, columnNumber: 13 }, __self: this }, name), /*#__PURE__*/ React.createElement("button", { className: `ml-1 focus:outline-none`, onClick: onFavoriteChange, disabled: !walletAddress, "aria-label": isFavorite ? "Remove from favorites" : "Add to favorites", type: "button", __source: { fileName: "", lineNumber: 136, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: isFavorite ? "fas fa-star text-yellow-400" : "fas fa-star text-gray-400", style: { filter: isFavorite ? undefined : "grayscale(1)" }, __source: { fileName: "", lineNumber: 145, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "ml-1 text-lg", title: "contract info en holders", style: { color: "#22c55e" }, onClick: ()=>setShowExtraInfo(true), type: "button", __source: { fileName: "", lineNumber: 154, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa-solid fa-shield-halved", __source: { fileName: "", lineNumber: 161, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "text-gray-400 text-sm truncate", __source: { fileName: "", lineNumber: 164, columnNumber: 11 }, __self: this }, symbol, " - Chain: ", chainId), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-3 mt-2", __source: { fileName: "", lineNumber: 167, columnNumber: 11 }, __self: this }, socialsToShow.map((item, idx)=>item.url ? /*#__PURE__*/ React.createElement("a", { key: item.platform + idx, href: item.url, target: "_blank", rel: "noopener noreferrer", className: "text-gray-400 hover:text-white text-lg", title: item.platform, __source: { fileName: "", lineNumber: 170, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: getSocialIcon(item.platform), __source: { fileName: "", lineNumber: 178, columnNumber: 19 }, __self: this })) : null)))), /*#__PURE__*/ React.createElement("div", { className: "ml-auto", __source: { fileName: "", lineNumber: 185, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(ExtraInfoPopup, { isOpen: showExtraInfo, onClose: ()=>setShowExtraInfo(false), tokenAddress: tokenAddress, chainId: chainId, __source: { fileName: "", lineNumber: 186, columnNumber: 7 }, __self: this })); } function TokenkaartComponent({ name, symbol, chainId, image, price, marketCap, volume24h, liquidity, priceChange24h, website, socials = [], exchanges = [], onSave, isSaving = false, address, walletAddress, voteCounts = { day_votes: 0, week_votes: 0, month_votes: 0, total_votes: 0 }, onVote, hasVotedToday = false, refreshTokenData, trackyBalance, isFavorite = false, onFavoriteChange, activeBoostCount = 0, totalBoostMultiplier = 0, hasAccess = false, customData = null, onExpand, displayImage, profileImage, websiteUrl, dexscreenerInfo, website_url, twitter_url, tiktok_url, youtube_url, reddit_url, telegram_url, instagram_url, discord_url, profile_image_url, image_url, updating = false, isAdmin = false, socialAccessStatus: socialAccessStatusProp, rank, ...rest }) { const [voteLoading, setVoteLoading] = React.useState(false); const [voteError, setVoteError] = React.useState(null); const [hasVotedTodayState, setHasVotedToday] = React.useState(hasVotedToday); const [localVoteCounts, setLocalVoteCounts] = React.useState(voteCounts); const [showChart, setShowChart] = React.useState(false); const [showCopiedLink, setShowCopiedLink] = React.useState(false); const [showCopiedAddress, setShowCopiedAddress] = React.useState(false); const [favoriteLoading, setFavoriteLoading] = React.useState(false); const [favoriteError, setFavoriteError] = React.useState(null); const [localIsFavorite, setLocalIsFavorite] = React.useState(isFavorite); const [showBoostPopup, setShowBoostPopup] = React.useState(false); const [socialAccessStatus, setSocialAccessStatus] = React.useState(socialAccessStatusProp || null); const [boostPopupTrackyBalance, setBoostPopupTrackyBalance] = React.useState(null); const [showExchanges, setShowExchanges] = React.useState(false); const [favoriteMessage, setFavoriteMessage] = React.useState(null); const favoriteMessageTimeout = React.useRef(null); const [boostData, setBoostData] = React.useState({ count: activeBoostCount, multiplier: totalBoostMultiplier }); const [boostLoading, setBoostLoading] = React.useState(false); const [boostError, setBoostError] = React.useState(null); const [deleteLoading, setDeleteLoading] = React.useState(false); const [deleteError, setDeleteError] = React.useState(null); const [deleteSuccess, setDeleteSuccess] = React.useState(null); const [showDeletePopup, setShowDeletePopup] = React.useState(false); React.useEffect(()=>{ setLocalIsFavorite(isFavorite); }, [ isFavorite ]); React.useEffect(()=>{ setBoostData({ count: activeBoostCount, multiplier: totalBoostMultiplier }); }, [ activeBoostCount, totalBoostMultiplier ]); const formatPriceChange = (priceChange)=>{ if (priceChange === null || priceChange === undefined) { return "0.00%"; } const numericValue = Number(priceChange); if (isNaN(numericValue)) { return "0.00%"; } const sign = numericValue >= 0 ? "+" : ""; return `${sign}${numericValue.toFixed(2)}%`; }; const formatCompactPrice = (price)=>{ if (!price || isNaN(price)) return "$0"; try { const numPrice = parseFloat(price); if (numPrice >= 1) { return `${numPrice.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 3 })}`; } const priceStr = numPrice.toExponential(10); const [num, exp] = priceStr.split("e-"); const leadingZeros = parseInt(exp) - 1; const cleanNum = num.replace(".", "").slice(0, 4); return /*#__PURE__*/ React.createElement("span", { className: "font-mono", __source: { fileName: "", lineNumber: 314, columnNumber: 9 }, __self: this }, "$0.0", /*#__PURE__*/ React.createElement("span", { className: "relative -top-1 text-xs", __source: { fileName: "", lineNumber: 315, columnNumber: 15 }, __self: this }, leadingZeros), cleanNum); } catch (error) { return "$0"; } }; const formatCompactNumber = (number)=>{ if (!number || isNaN(number)) return "0"; try { const num = parseFloat(number); if (num >= 1e9) return (num / 1e9).toFixed(2) + "B"; if (num >= 1e6) return (num / 1e6).toFixed(2) + "M"; if (num >= 1e3) return (num / 1e3).toFixed(2) + "K"; return num.toFixed(2); } catch (error) { return "0"; } }; // --- PATCH: Gebruik customWebsite en custom_image_url als eerste, met fallback naar website en image_url --- const displayImageFinal = customData?.custom_image_url && customData.custom_image_url.trim() !== "" ? customData.custom_image_url : customData?.profile_image_url && customData.profile_image_url.trim() !== "" ? customData.profile_image_url : image && image.trim() !== "" ? image : null; const websiteUrlFinal = customData?.custom_website && customData.custom_website.trim() !== "" ? customData.custom_website : customData?.website_url && customData.website_url.trim() !== "" ? customData.website_url : website && website.trim() !== "" ? website : null; // --- PATCH: socialsToShow vult ALTIJD alle losse social links uit customData, ook als custom_socials null is --- let socialsToShow = []; if (customData) { const socialPlatforms = [ { platform: "twitter", url: customData.twitter_url }, { platform: "telegram", url: customData.telegram_url }, { platform: "discord", url: customData.discord_url }, { platform: "reddit", url: customData.reddit_url }, { platform: "youtube", url: customData.youtube_url }, { platform: "instagram", url: customData.instagram_url }, { platform: "facebook", url: customData.facebook_url }, { platform: "tiktok", url: customData.tiktok_url }, { platform: "website", url: customData.website_url || customData.custom_website } ]; // Voeg alle losse social links toe, ook als custom_socials null is socialPlatforms.forEach((s)=>{ if (s.url && !socialsToShow.find((x)=>x.platform === s.platform)) { socialsToShow.push(s); } }); // Voeg custom_socials toe als array (oude logica) if (Array.isArray(customData.custom_socials)) { customData.custom_socials.forEach((s)=>{ if (s.platform && s.url && !socialsToShow.find((x)=>x.platform === s.platform)) { socialsToShow.push(s); } }); } } // Fallback naar props.socials als customData niet bestaat of leeg is if ((!customData || socialsToShow.length === 0) && Array.isArray(rest.socials)) { socialsToShow = rest.socials.map((item)=>{ if (typeof item === "string") { return { platform: item, url: null }; } if (typeof item === "object" && item !== null) { return { platform: item.platform || "", url: item.url || null }; } return { platform: "", url: null }; }); } else if ((!customData || socialsToShow.length === 0) && typeof rest.socials === "object" && rest.socials !== null) { socialsToShow = Object.entries(rest.socials).map(([platform, url])=>({ platform, url })); } const getDexScreenerChartUrl = (chainIdValue, addressValue)=>{ if (!chainIdValue || !addressValue) return ""; let chainString = typeof chainIdValue === "string" ? chainIdValue : String(chainIdValue); return `https://dexscreener.com/${chainString.toLowerCase()}/${addressValue}?embed=1&loadChartSettings=0&trades=0&tabs=0&info=0&chartLeftToolbar=0&chartTheme=dark&theme=dark&chartStyle=0&chartType=usd&interval=15&fullscreen=1`; }; const handleVote = async ()=>{ if (!walletAddress || !address || !chainId || voteLoading || hasVotedTodayState) return; setVoteLoading(true); setVoteError(null); try { const response = await fetch("/api/vote-token", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ walletAddress, tokenAddress: address, chainId }) }); if (!response.ok) throw new Error("Error voting"); const result = await response.json(); if (result.error) { setVoteError("Something went wrong while voting"); } else { setHasVotedToday(true); setLocalVoteCounts(result.voteCounts); if (onVote) { onVote(result); } } } catch (error) { setVoteError("Something went wrong while voting"); console.error(error); } finally{ setVoteLoading(false); } }; const handleExpand = ()=>{ if (onExpand) onExpand(); }; const handleShare = async ()=>{ if (typeof window !== "undefined") { const url = `${window.location.origin}/#${address}`; await navigator.clipboard.writeText(url); setShowCopiedLink(true); setTimeout(()=>setShowCopiedLink(false), 2000); } }; const handleCopyAddress = async ()=>{ await navigator.clipboard.writeText(address); setShowCopiedAddress(true); setTimeout(()=>setShowCopiedAddress(false), 2000); }; const showFavoriteMessage = (msg)=>{ setFavoriteMessage(msg); if (favoriteMessageTimeout.current) { clearTimeout(favoriteMessageTimeout.current); } favoriteMessageTimeout.current = setTimeout(()=>{ setFavoriteMessage(null); }, 2000); }; const [optimisticFavorite, setOptimisticFavorite] = React.useState(isFavorite); const [optimisticError, setOptimisticError] = React.useState(null); React.useEffect(()=>{ setOptimisticFavorite(isFavorite); }, [ isFavorite ]); const handleFavoriteToggleOptimistic = async ()=>{ if (!address || !chainId) return; setOptimisticError(null); if (!walletAddress) { setOptimisticError("Connect your wallet first to favorite"); return; } setOptimisticFavorite((prev)=>!prev); try { const endpoint = optimisticFavorite ? "/api/remove-favorite-token" : "/api/add-favorite-token"; const response = await fetch(endpoint, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ walletAddress, tokenAddress: address, chainId }) }); if (!response.ok) throw new Error("Error saving favorite"); const result = await response.json(); if (result.error) { setOptimisticFavorite(isFavorite); setOptimisticError("Failed to save favorite"); } else { if (onFavoriteChange) onFavoriteChange(!optimisticFavorite); } } catch (err) { setOptimisticFavorite(isFavorite); setOptimisticError("Failed to save favorite"); } }; const handleBoostToggle = async ()=>{ if (!address || !chainId) return; setFavoriteError(null); setFavoriteLoading(true); if (!walletAddress) { showBoostMessage("Connect your wallet first to boost"); setFavoriteLoading(false); return; } setLocalIsFavorite((prev)=>!prev); try { const endpoint = localIsFavorite ? "/api/remove-boost-token" : "/api/add-boost-token"; const response = await fetch(endpoint, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ walletAddress, tokenAddress: address, chainId }) }); if (!response.ok) throw new Error("Error saving boost"); const result = await response.json(); if (result.error) { setFavoriteError("Failed to save boost"); setLocalIsFavorite(isFavorite); } else { if (onFavoriteChange) { onFavoriteChange(!localIsFavorite); } showBoostMessage(localIsFavorite ? "Removed from boost" : "Added to boost"); } } catch (err) { setFavoriteError("Failed to save boost"); setLocalIsFavorite(isFavorite); console.error(err); } finally{ setFavoriteLoading(false); } }; const topExchanges = [ ...exchanges ].sort((a, b)=>(b.liquidity || 0) - (a.liquidity || 0)).slice(0, 3); const currentExchanges = exchanges; const getPriceChangeClass = (value)=>{ if (value === null || value === undefined || isNaN(Number(value))) return "text-white"; return Number(value) > 0 ? "text-green-500" : Number(value) < 0 ? "text-red-500" : "text-white"; }; React.useEffect(()=>{ async function fetchAccess() { if (!address || !chainId || !walletAddress) { setSocialAccessStatus(null); return; } try { const response = await fetch("/api/check-social-access", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ tokenAddress: address, chainId, walletAddress }) }); if (!response.ok) throw new Error("Error accessing socials"); const data = await response.json(); setSocialAccessStatus(data.hasAccess ? "Access Granted" : null); } catch (e) { setSocialAccessStatus(null); } } fetchAccess(); }, [ address, chainId, walletAddress, socialAccessStatusProp ]); // --- PATCH: Top 3 badge info --- let topBadge = null; if (rank === 1) { topBadge = { img: "https://ucarecdn.com/01a98844-8ff7-4a38-a74f-c67491eda880/-/format/auto/", alt: "Goud - #1", label: "#1" }; } else if (rank === 2) { topBadge = { img: "https://ucarecdn.com/9ce416ee-be21-4100-a34d-f599d98dc434/-/format/auto/", alt: "Zilver - #2", label: "#2" }; } else if (rank === 3) { topBadge = { img: "https://ucarecdn.com/f406f103-fd0e-4224-80f2-3e756b7e71eb/-/format/auto/", alt: "Brons - #3", label: "#3" }; } return /*#__PURE__*/ React.createElement("div", { className: "bg-[#1e1e1e] rounded-lg p-6 text-white mt-[64px] text-sm relative", style: { minWidth: 325, maxWidth: 450, width: "100%", flex: "1 1 450px", margin: "0 auto", boxSizing: "border-box" }, __source: { fileName: "", lineNumber: 642, columnNumber: 5 }, __self: this }, topBadge && /*#__PURE__*/ React.createElement("div", { style: { position: "absolute", left: 0, top: 15, zIndex: 20, width: 48, height: 48, pointerEvents: "none" }, __source: { fileName: "", lineNumber: 655, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { position: "relative", width: 52, height: 52 }, __source: { fileName: "", lineNumber: 666, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: topBadge.img, alt: topBadge.alt, style: { width: 52, height: 52, borderRadius: "50%", objectFit: "cover", boxShadow: "0 2px 8px rgba(0,0,0,0)" }, __source: { fileName: "", lineNumber: 667, columnNumber: 13 }, __self: this }))), isAdmin && /*#__PURE__*/ React.createElement("div", { className: "absolute top-4 right-4 z-10", style: { top: 11 }, __source: { fileName: "", lineNumber: 685, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(EditSocialsButton, { tokenAddress: address, chainId: typeof chainId === "string" ? chainId : String(chainId), __source: { fileName: "", lineNumber: 686, columnNumber: 11 }, __self: this })), socialAccessStatus === "Access Granted" && !isAdmin && /*#__PURE__*/ React.createElement("div", { className: "absolute top-4 right-4 z-10", style: { top: 11 }, __source: { fileName: "", lineNumber: 694, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(EditSocialsButton, { tokenAddress: address, chainId: typeof chainId === "string" ? chainId : String(chainId), walletAddress: walletAddress, __source: { fileName: "", lineNumber: 695, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement(TokenHeaderSocialsExpand, { displayImage: displayImageFinal, name: name, symbol: symbol, chainId: typeof chainId === "string" ? chainId : String(chainId), tokenAddress: address, updatePriceData: refreshTokenData, updating: updating, onSave: onSave, isSaving: isSaving, walletAddress: walletAddress, website: websiteUrlFinal, isFavorite: optimisticFavorite, onFavoriteChange: handleFavoriteToggleOptimistic, favoriteLoading: favoriteLoading, favoriteError: optimisticError, dexscreenerInfo: dexscreenerInfo, socials: socialsToShow, customData: customData, __source: { fileName: "", lineNumber: 702, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(Component24HEnBoost, { priceChange24h: formatPriceChange(priceChange24h), activeBoostCount: boostData.count, totalBoostMultiplier: boostData.multiplier, showChart: showChart, onToggleChart: ()=>setShowChart(!showChart), tokenData: { name, symbol, chainId: typeof chainId === "string" ? chainId : String(chainId), displayImage, price, marketCap, volume24h, liquidity, priceChange24h: formatPriceChange(priceChange24h), website, address, walletAddress, updating: false, activeBoostCount: boostData.count, totalBoostMultiplier: boostData.multiplier, voteLoading, hasVotedToday: hasVotedTodayState, timeUntilNextVote: 0, onVote: handleVote, onSave, isSaving, onBoostActivated: ()=>{} }, updateInterval: 62000, onUpdatePrice: refreshTokenData, className: "mb-4", onExpand: onExpand, __source: { fileName: "", lineNumber: 723, columnNumber: 7 }, __self: this }), showChart && /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 760, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 761, columnNumber: 11 }, __self: this }, ` #dexscreener-embed { position: relative; width: 100%; padding-bottom: 125%; } @media (min-width: 1400px) { #dexscreener-embed { padding-bottom: 65%; } } #dexscreener-embed iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: 0; } `), /*#__PURE__*/ React.createElement("div", { id: "dexscreener-embed", __source: { fileName: "", lineNumber: 781, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("iframe", { src: getDexScreenerChartUrl(chainId, address), title: "DexScreener Chart", __source: { fileName: "", lineNumber: 782, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4 mb-4 mt-2", __source: { fileName: "", lineNumber: 790, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative bg-[#2a2a2a] p-3 rounded-lg", __source: { fileName: "", lineNumber: 791, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-gray-400 text-sm", __source: { fileName: "", lineNumber: 792, columnNumber: 11 }, __self: this }, "Price:"), /*#__PURE__*/ React.createElement("div", { className: "font-bold text-white", __source: { fileName: "", lineNumber: 793, columnNumber: 11 }, __self: this }, formatCompactPrice(price))), /*#__PURE__*/ React.createElement("div", { className: "relative bg-[#2a2a2a] p-3 rounded-lg", __source: { fileName: "", lineNumber: 797, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-gray-400 text-sm", __source: { fileName: "", lineNumber: 798, columnNumber: 11 }, __self: this }, "MCap:"), /*#__PURE__*/ React.createElement("div", { className: "font-bold text-white", __source: { fileName: "", lineNumber: 799, columnNumber: 11 }, __self: this }, "$", formatCompactNumber(marketCap))), /*#__PURE__*/ React.createElement("div", { className: "relative bg-[#2a2a2a] p-3 rounded-lg", __source: { fileName: "", lineNumber: 803, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-gray-400 text-sm", __source: { fileName: "", lineNumber: 804, columnNumber: 11 }, __self: this }, "24h Volume:"), /*#__PURE__*/ React.createElement("div", { className: "font-bold text-white", __source: { fileName: "", lineNumber: 805, columnNumber: 11 }, __self: this }, "$", formatCompactNumber(volume24h))), /*#__PURE__*/ React.createElement("div", { className: "relative bg-[#2a2a2a] p-3 rounded-lg", __source: { fileName: "", lineNumber: 809, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-gray-400 text-sm", __source: { fileName: "", lineNumber: 810, columnNumber: 11 }, __self: this }, "Liq:"), /*#__PURE__*/ React.createElement("div", { className: "font-bold text-white", __source: { fileName: "", lineNumber: 811, columnNumber: 11 }, __self: this }, "$", formatCompactNumber(liquidity)))), /*#__PURE__*/ React.createElement(VotingCounts, { tokenAddress: address, chainId: typeof chainId === "string" ? chainId : String(chainId), __source: { fileName: "", lineNumber: 817, columnNumber: 7 }, __self: this }), topExchanges && topExchanges.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 827, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2 mb-2 cursor-pointer select-none", onClick: ()=>setShowExchanges((v)=>!v), __source: { fileName: "", lineNumber: 828, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-400 text-sm", __source: { fileName: "", lineNumber: 832, columnNumber: 13 }, __self: this }, "Top Pairs:"), /*#__PURE__*/ React.createElement("button", { type: "button", "aria-label": showExchanges ? "Hide exchanges" : "Show exchanges", className: "ml-2 text-gray-400 hover:text-white focus:outline-none", tabIndex: 0, onClick: (e)=>{ e.stopPropagation(); setShowExchanges((v)=>!v); }, style: { transition: "transform 0.2s" }, __source: { fileName: "", lineNumber: 833, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas fa-chevron-down transition-transform duration-200 ${showExchanges ? "rotate-180" : ""}`, __source: { fileName: "", lineNumber: 844, columnNumber: 15 }, __self: this }))), showExchanges && /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-2 animate-fade-in", __source: { fileName: "", lineNumber: 852, columnNumber: 13 }, __self: this }, topExchanges.map((exchange, index)=>/*#__PURE__*/ React.createElement("a", { key: `${exchange.name}-${exchange.pairName}-${index}`, href: exchange.url, target: "_blank", rel: "noopener noreferrer", className: "w-full bg-[#23272b] p-3 rounded-lg hover:bg-[#31363b] transition-colors flex flex-row items-center justify-between gap-2", __source: { fileName: "", lineNumber: 854, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col text-left", __source: { fileName: "", lineNumber: 861, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-white font-semibold text-base capitalize", __source: { fileName: "", lineNumber: 862, columnNumber: 21 }, __self: this }, exchange.name), /*#__PURE__*/ React.createElement("span", { className: "text-xs text-gray-400", __source: { fileName: "", lineNumber: 865, columnNumber: 21 }, __self: this }, exchange.pairName)), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-end", __source: { fileName: "", lineNumber: 869, columnNumber: 19 }, __self: this }, exchange.price !== undefined && /*#__PURE__*/ React.createElement("span", { className: "text-white font-mono text-base mb-1", style: { fontSize: "0.9rem", fontWeight: 500 }, __source: { fileName: "", lineNumber: 872, columnNumber: 23 }, __self: this }, "price: ", formatCompactPrice(exchange.price)), /*#__PURE__*/ React.createElement("span", { className: "text-gray-300 text-base font-mono", style: { fontSize: "0.9rem", fontWeight: 500 }, __source: { fileName: "", lineNumber: 879, columnNumber: 21 }, __self: this }, "liq: $", formatCompactNumber(exchange.liquidity)), /*#__PURE__*/ React.createElement("span", { className: "text-xs text-blue-400 underline", __source: { fileName: "", lineNumber: 885, columnNumber: 21 }, __self: this }, "View")))))), /*#__PURE__*/ React.createElement("div", { className: "mt-4 space-y-4", __source: { fileName: "", lineNumber: 897, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 899, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex w-full gap-2", __source: { fileName: "", lineNumber: 900, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 901, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement(VoteButton, { voteLoading: voteLoading, walletAddress: walletAddress, hasVotedToday: hasVotedTodayState, timeUntilNextVote: 0, onVote: handleVote, errorMessage: voteError, className: "w-full bg-[#0f4bc4] text-white px-4 py-2 rounded-lg font-bold transition-colors flex items-center justify-center gap-2 hover:bg-[#0d3fa3] h-[48px]", style: { minWidth: 0 }, __source: { fileName: "", lineNumber: 902, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 913, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement(SocialsVerificationButton, { socialAccessStatus: socialAccessStatus, walletAddress: walletAddress, tokenAddress: address, chainId: chainId, onAccessGranted: ()=>setSocialAccessStatus("Access Granted"), className: "w-full bg-[#575e69] text-white px-4 py-2 rounded-lg font-bold transition-colors flex items-center justify-center gap-2 hover:bg-[#6b7280] h-[48px]", style: { minWidth: 0 }, __source: { fileName: "", lineNumber: 914, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 924, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: `w-full px-4 py-2 rounded-lg font-bold transition-colors flex items-center justify-center gap-2 h-[48px] ${walletAddress ? "bg-[#0f4bc4] text-white hover:bg-[#0d3fa3]" : "bg-[#575e69] text-white hover:bg-[#6b7280]"}`, onClick: ()=>walletAddress && setShowBoostPopup(true), type: "button", disabled: !walletAddress, style: { minWidth: 0 }, __source: { fileName: "", lineNumber: 925, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-rocket text-inherit", __source: { fileName: "", lineNumber: 936, columnNumber: 17 }, __self: this }), "Boost"), /*#__PURE__*/ React.createElement(BoostPopup, { isOpen: showBoostPopup, onClose: ()=>setShowBoostPopup(false), onSuccess: ()=>{}, onBoostActivated: ()=>{}, token: { name, address, chainId: typeof chainId === "string" ? chainId : String(chainId) }, walletAddress: walletAddress, trackyBalance: trackyBalance, __source: { fileName: "", lineNumber: 939, columnNumber: 15 }, __self: this }))), favoriteMessage && /*#__PURE__*/ React.createElement("div", { className: "fixed top-6 left-1/2 transform -translate-x-1/2 z-[9999] bg-[#23272b] text-white px-6 py-3 rounded-lg shadow-lg text-lg font-semibold animate-fade-in-out pointer-events-none select-none", __source: { fileName: "", lineNumber: 956, columnNumber: 13 }, __self: this }, favoriteMessage)), customData && customData.social_access_status === "Access Granted" && /*#__PURE__*/ React.createElement("div", { className: "flex mt-2", __source: { fileName: "", lineNumber: 962, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(EditSocialsButton, { tokenAddress: address, chainId: typeof chainId === "string" ? chainId : String(chainId), walletAddress: walletAddress, className: "bg-[#0f4bc4] text-white px-4 py-2 rounded-lg font-bold transition-colors flex-1 flex items-center justify-center gap-2 hover:bg-[#0d3fa3]", style: { minWidth: 0 }, __source: { fileName: "", lineNumber: 963, columnNumber: 13 }, __self: this }))), isAdmin && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("button", { className: "mt-2 bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg font-bold w-full flex items-center justify-center gap-2", onClick: ()=>setShowDeletePopup(true), disabled: deleteLoading, style: { marginTop: 16 }, __source: { fileName: "", lineNumber: 976, columnNumber: 11 }, __self: this }, deleteLoading ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin", __source: { fileName: "", lineNumber: 984, columnNumber: 17 }, __self: this }), " Verwijderen...") : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-trash", __source: { fileName: "", lineNumber: 988, columnNumber: 17 }, __self: this }), " Verwijder token")), showDeletePopup && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-70", __source: { fileName: "", lineNumber: 993, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#23272b] rounded-lg p-6 max-w-[90vw] w-[350px] text-center shadow-lg", __source: { fileName: "", lineNumber: 994, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-lg font-bold mb-4 text-white", __source: { fileName: "", lineNumber: 995, columnNumber: 17 }, __self: this }, "Weet je het zeker?"), /*#__PURE__*/ React.createElement("div", { className: "text-gray-300 mb-6", __source: { fileName: "", lineNumber: 998, columnNumber: 17 }, __self: this }, "Weet je zeker dat je dit token wilt verwijderen? Deze actie kan niet ongedaan worden gemaakt."), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4 justify-center", __source: { fileName: "", lineNumber: 1002, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg font-bold flex-1", onClick: async ()=>{ setDeleteLoading(true); setDeleteError(null); setDeleteSuccess(null); try { const response = await fetch("/api/delete-favorite-token", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ tokenAddress: address }) }); const result = await response.json(); if (result.success) { setDeleteSuccess("Token succesvol verwijderd"); setShowDeletePopup(false); if (typeof window !== "undefined") { setTimeout(()=>window.location.reload(), 1200); } } else { setDeleteError(result.error || "Kon token niet verwijderen"); } } catch (err) { setDeleteError("Kon token niet verwijderen"); } finally{ setDeleteLoading(false); } }, disabled: deleteLoading, __source: { fileName: "", lineNumber: 1003, columnNumber: 19 }, __self: this }, deleteLoading ? "Verwijderen..." : "Verwijder"), /*#__PURE__*/ React.createElement("button", { className: "bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-lg font-bold flex-1", onClick: ()=>setShowDeletePopup(false), disabled: deleteLoading, __source: { fileName: "", lineNumber: 1040, columnNumber: 19 }, __self: this }, "Annuleer"))))), deleteError && /*#__PURE__*/ React.createElement("div", { className: "mt-2 p-2 bg-red-900/50 text-red-200 rounded-lg", __source: { fileName: "", lineNumber: 1054, columnNumber: 9 }, __self: this }, deleteError), deleteSuccess && /*#__PURE__*/ React.createElement("div", { className: "mt-2 p-2 bg-green-900/50 text-green-200 rounded-lg", __source: { fileName: "", lineNumber: 1059, columnNumber: 9 }, __self: this }, deleteSuccess)); } function TokenkaartComponentStory() { return /*#__PURE__*/ React.createElement("div", { className: "token-card-list flex flex-wrap justify-start", style: { gap: 10, paddingLeft: 10, paddingRight: 10 }, __source: { fileName: "", lineNumber: 1072, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(TokenkaartComponent, { name: "Example Token", symbol: "EXT", chainId: 1, image: "/path/to/image.png", price: 123.45, marketCap: 1000000, volume24h: 50000, liquidity: 200000, priceChange24h: 5.67, website: "https://example.com", socials: [ { platform: "twitter", url: "https://twitter.com/example" }, { platform: "telegram", url: "https://t.me/example" } ], exchanges: [ { name: "Exchange1", url: "https://exchange1.com", liquidity: 100000, price: 0.00005, pairName: "EXT/USD" }, { name: "Exchange2", url: "https://exchange2.com", liquidity: 200000, pairName: "EXT/ETH" } ], address: "0x1234567890abcdef", walletAddress: "0xabcdef1234567890", voteCounts: { day_votes: 10, week_votes: 50, month_votes: 200, total_votes: 1000 }, onVote: ()=>{}, hasVotedToday: false, trackyBalance: 1234567890, isFavorite: false, onFavoriteChange: ()=>{}, __source: { fileName: "", lineNumber: 1080, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(TokenkaartComponent, { name: "Token With String Chain", symbol: "TWS", chainId: "ethereum", image: "/path/to/image2.png", price: 0.000123, marketCap: 500000, volume24h: 25000, liquidity: 100000, priceChange24h: -2.34, website: "https://tokenstringchain.com", socials: [ { platform: "twitter", url: "https://twitter.com/tokenstringchain" } ], exchanges: [ { name: "Exchange1", url: "https://exchange1.com", liquidity: 100000, pairName: "EXT/USD" }, { name: "Exchange2", url: "https://exchange2.com", liquidity: 200000, pairName: "EXT/ETH" } ], address: "0xabcdefabcdefabcdef", walletAddress: null, voteCounts: { day_votes: 5, week_votes: 20, month_votes: 80, total_votes: 200 }, onVote: ()=>{}, hasVotedToday: true, trackyBalance: 0, isFavorite: true, onFavoriteChange: ()=>{}, __source: { fileName: "", lineNumber: 1124, columnNumber: 7 }, __self: this })); } /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 1170, columnNumber: 1 }, __self: this }, ` .token-card-list { display: flex; flex-wrap: wrap; gap: 10px; padding-left: 10px; padding-right: 10px; } @media (max-width: 500px) { } `); function BoostButtonExp({ onClick, bonusMultiplier = 1, disabled, className = "" }) { const getBonusImage = (multiplier)=>{ switch(multiplier){ case 4: return "https://ucarecdn.com/7f666b87-92be-4e96-99b4-a9b90ce21425/-/format/auto/"; case 3: return "https://ucarecdn.com/94f0f6c1-a743-41f9-9a9f-4f5e18c0af3f/-/format/auto/"; case 2: return "https://ucarecdn.com/74ac6295-f961-4e93-b309-cdd5fbc7856b/-/format/auto/"; default: return null; } }; const bonusImage = getBonusImage(bonusMultiplier); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center gap-2", __source: { fileName: "", lineNumber: 23, columnNumber: 5 }, __self: this }, bonusImage && /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: bonusImage, alt: `${bonusMultiplier}x Bonus`, className: "h-16", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: onClick, disabled: disabled, className: `w-full py-3 rounded-lg flex items-center justify-center gap-2 transition-colors ${disabled ? "bg-gray-600 cursor-not-allowed" : "bg-[#1D4ED8] hover:bg-[#1e40af]"} text-white ${className}`, __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-rocket text-white", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }), "Boost ", bonusMultiplier > 1 && ` (${bonusMultiplier}x Bonus)`)); } function BoostButtonExpStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-4 bg-[#121212]", __source: { fileName: "", lineNumber: 51, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white mb-2", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, "Default State"), /*#__PURE__*/ React.createElement("div", { className: "max-w-[200px]", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(BoostButtonExp, { onClick: ()=>console.log("Boost clicked!"), __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white mb-2", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, "With 2x Bonus"), /*#__PURE__*/ React.createElement("div", { className: "max-w-[200px]", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(BoostButtonExp, { onClick: ()=>console.log("Boost clicked!"), bonusMultiplier: 2, __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 69, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white mb-2", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, "With 3x Bonus"), /*#__PURE__*/ React.createElement("div", { className: "max-w-[200px]", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(BoostButtonExp, { onClick: ()=>console.log("Boost clicked!"), bonusMultiplier: 3, __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 79, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white mb-2", __source: { fileName: "", lineNumber: 80, columnNumber: 9 }, __self: this }, "With 4x Bonus"), /*#__PURE__*/ React.createElement("div", { className: "max-w-[200px]", __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(BoostButtonExp, { onClick: ()=>console.log("Boost clicked!"), bonusMultiplier: 4, __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this })))); } function Top100Table({ tokens = [], isLoading = false, error = null }) { const [localTokens, setLocalTokens] = useState(tokens); useEffect(()=>{ setLocalTokens(tokens); }, [ tokens ]); useEffect(()=>{ const updateData = async ()=>{ try { const response = await fetch('/api/get-live-token-data', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ tokens: localTokens.map((token)=>({ token_address: token.token_address, chain_id: token.chain_id })) }) }); if (!response.ok) throw new Error('Failed to fetch'); const result = await response.json(); if (result.success && result.data) { setLocalTokens((currentTokens)=>currentTokens.map((token)=>{ const key = `${token.token_address}_${token.chain_id.toLowerCase()}`; const liveData = result.data[key] || result.data[token.token_address]; if (!liveData) return token; return { ...token, price: liveData.price, marketCap: liveData.marketCap, volume24h: liveData.volume24h, liquidity: liveData.liquidity, priceChange24h: liveData.priceChange24h }; })); } } catch (err) { console.error('Error updating data:', err); } }; const interval = setInterval(updateData, 15000); return ()=>clearInterval(interval); }, [ localTokens ]); const formatNumber = (num, isCurrency = false)=>{ if (num === undefined || num === null) return 'N/A'; if (isCurrency && num < 0.01) { return num.toFixed(8); } const formatter = new Intl.NumberFormat('en-US', { style: isCurrency ? 'currency' : 'decimal', currency: 'USD', minimumFractionDigits: 2, maximumFractionDigits: 2, notation: 'compact', compactDisplay: 'short' }); return formatter.format(num).replace('$', '$ '); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full bg-[#121212] rounded-lg overflow-hidden", __source: { fileName: "", lineNumber: 72, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "overflow-x-auto", __source: { fileName: "", lineNumber: 73, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "sticky top-0 z-10 min-w-full", __source: { fileName: "", lineNumber: 74, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#1e1e1e] text-gray-400 text-sm", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-[80px_300px_150px_150px_150px_150px_150px] gap-4 p-4", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 77, columnNumber: 15 }, __self: this }, "#"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 78, columnNumber: 15 }, __self: this }, "Token"), /*#__PURE__*/ React.createElement("div", { className: "text-right", __source: { fileName: "", lineNumber: 79, columnNumber: 15 }, __self: this }, "Prijs"), /*#__PURE__*/ React.createElement("div", { className: "text-right", __source: { fileName: "", lineNumber: 80, columnNumber: 15 }, __self: this }, "24u %"), /*#__PURE__*/ React.createElement("div", { className: "text-right", __source: { fileName: "", lineNumber: 81, columnNumber: 15 }, __self: this }, "Volume 24u"), /*#__PURE__*/ React.createElement("div", { className: "text-right", __source: { fileName: "", lineNumber: 82, columnNumber: 15 }, __self: this }, "Liquiditeit"), /*#__PURE__*/ React.createElement("div", { className: "text-right", __source: { fileName: "", lineNumber: 83, columnNumber: 15 }, __self: this }, "Marktkapitalisatie")))), /*#__PURE__*/ React.createElement("div", { className: "min-w-full", __source: { fileName: "", lineNumber: 88, columnNumber: 9 }, __self: this }, isLoading ? /*#__PURE__*/ React.createElement("div", { className: "p-4 text-center text-gray-400", __source: { fileName: "", lineNumber: 90, columnNumber: 13 }, __self: this }, "Laden...") : error ? /*#__PURE__*/ React.createElement("div", { className: "p-4 text-center text-red-400", __source: { fileName: "", lineNumber: 92, columnNumber: 13 }, __self: this }, error) : localTokens.map((token, index)=>/*#__PURE__*/ React.createElement("div", { key: `${token.token_address}_${token.chain_id}`, className: "grid grid-cols-[80px_300px_150px_150px_150px_150px_150px] gap-4 p-4 border-b border-[#2a2a2a] hover:bg-[#1e1e1e] transition-colors items-center", __source: { fileName: "", lineNumber: 95, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-gray-400", __source: { fileName: "", lineNumber: 99, columnNumber: 17 }, __self: this }, index + 1), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-3", __source: { fileName: "", lineNumber: 100, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: token.chain_logo, alt: `${token.chain_id} logo`, className: "w-6 h-6", onError: (e)=>{ e.target.onerror = null; e.target.src = "https://placehold.co/24x24/1e1e1e/gray?text=?"; }, __source: { fileName: "", lineNumber: 101, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("img", { src: token.image_url, alt: token.token_name, className: "w-8 h-8 rounded-full", onError: (e)=>{ e.target.onerror = null; e.target.src = "https://placehold.co/32x32/1e1e1e/gray?text=?"; }, __source: { fileName: "", lineNumber: 110, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-white", __source: { fileName: "", lineNumber: 119, columnNumber: 19 }, __self: this }, token.token_name)), /*#__PURE__*/ React.createElement("div", { className: "text-right text-white", __source: { fileName: "", lineNumber: 121, columnNumber: 17 }, __self: this }, "$ ", formatNumber(token.price, true)), /*#__PURE__*/ React.createElement("div", { className: `text-right ${token.priceChange24h >= 0 ? 'text-green-400' : 'text-red-400'}`, __source: { fileName: "", lineNumber: 124, columnNumber: 17 }, __self: this }, token.priceChange24h ? `${token.priceChange24h.toFixed(2)}%` : 'N/A'), /*#__PURE__*/ React.createElement("div", { className: "text-right text-white", __source: { fileName: "", lineNumber: 127, columnNumber: 17 }, __self: this }, "$ ", formatNumber(token.volume24h)), /*#__PURE__*/ React.createElement("div", { className: "text-right text-white", __source: { fileName: "", lineNumber: 130, columnNumber: 17 }, __self: this }, "$ ", formatNumber(token.liquidity)), /*#__PURE__*/ React.createElement("div", { className: "text-right text-white", __source: { fileName: "", lineNumber: 133, columnNumber: 17 }, __self: this }, "$ ", formatNumber(token.marketCap))))))); } function Top100TableStory() { const mockTokens = [ { token_address: "0x123", chain_id: "ethereum", token_name: "Example Token", chain_logo: "https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/info/logo.png", image_url: "https://placehold.co/32x32", price: 1234.56, priceChange24h: 5.67, volume24h: 1000000, liquidity: 500000, marketCap: 10000000 }, { token_address: "0x456", chain_id: "bnb", token_name: "Another Token", chain_logo: "https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/binance/info/logo.png", image_url: "https://placehold.co/32x32", price: 0.000123, priceChange24h: -2.34, volume24h: 2000000, liquidity: 1000000, marketCap: 20000000 } ]; return /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-[#121212] min-h-screen", __source: { fileName: "", lineNumber: 174, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-white text-xl mb-4", __source: { fileName: "", lineNumber: 175, columnNumber: 7 }, __self: this }, "Normal State"), /*#__PURE__*/ React.createElement(Top100Table, { tokens: mockTokens, __source: { fileName: "", lineNumber: 176, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "text-white text-xl mt-8 mb-4", __source: { fileName: "", lineNumber: 178, columnNumber: 7 }, __self: this }, "Loading State"), /*#__PURE__*/ React.createElement(Top100Table, { tokens: [], isLoading: true, __source: { fileName: "", lineNumber: 179, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "text-white text-xl mt-8 mb-4", __source: { fileName: "", lineNumber: 181, columnNumber: 7 }, __self: this }, "Error State"), /*#__PURE__*/ React.createElement(Top100Table, { tokens: [], error: "Er ging iets mis bij het laden van de tokens", __source: { fileName: "", lineNumber: 182, columnNumber: 7 }, __self: this })); } function TokenHeaderSocials({ displayImage, name, symbol, chainId, tokenAddress, updatePriceData, updating, onSave, isSaving, dexscreenerInfo, walletAddress, website, socialData: initialSocialData, trackyHoldings, activeBoosts, isFavorite, hasAccess, error, onFavoriteChange }) { const [showExtraInfo, setShowExtraInfo] = React.useState(false); const [socialData, setSocialData] = React.useState(initialSocialData || null); const [loadingSocials, setLoadingSocials] = React.useState(false); const [socialError, setSocialError] = React.useState(null); React.useEffect(()=>{ let ignore = false; async function fetchSocials() { if (!tokenAddress || !chainId) return; setLoadingSocials(true); setSocialError(null); try { const response = await fetch("/api/get-token-socials", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ tokenAddress, chainId }) }); if (!response.ok) throw new Error("Network error while fetching socials"); const result = await response.json(); if (!ignore) { if (result.success) { setSocialData(result.data); } else { setSocialData(null); if (result.error) setSocialError(result.error); } } } catch (e) { if (!ignore) { setSocialError("Could not fetch socials"); setSocialData(null); } } finally{ if (!ignore) setLoadingSocials(false); } } fetchSocials(); return ()=>{ ignore = true; }; }, [ tokenAddress, chainId ]); const getBonusMultiplier = (balance)=>{ if (balance >= 600000) return { multiplier: 4, level: 3 }; if (balance >= 400000) return { multiplier: 3, level: 2 }; if (balance >= 350000) return { multiplier: 2, level: 1 }; return { multiplier: 1, level: 0 }; }; const renderSocialLinks = ()=>{ let socialsToShow = []; if (socialData && typeof socialData === "object") { const socialFields = [ { platform: "website", field: "website_url" }, { platform: "twitter", field: "twitter_url" }, { platform: "telegram", field: "telegram_url" }, { platform: "discord", field: "discord_url" }, { platform: "reddit", field: "reddit_url" }, { platform: "tiktok", field: "tiktok_url" }, { platform: "instagram", field: "instagram_url" }, { platform: "youtube", field: "youtube_url" }, { platform: "facebook", field: "facebook_url" }, { platform: "github", field: "github_url" } ]; socialFields.forEach(({ platform, field })=>{ if (socialData[field]) { socialsToShow.push({ platform, url: socialData[field] }); } }); if (Array.isArray(socialData.custom_socials)) { socialData.custom_socials.forEach((item)=>{ if (item && item.platform && item.url && !socialsToShow.some((s)=>s.platform === item.platform && s.url === item.url)) { socialsToShow.push({ platform: item.platform, url: item.url }); } }); } if (Array.isArray(socialData.socials)) { socialData.socials.forEach((item)=>{ if (item && item.platform && item.url && !socialsToShow.some((s)=>s.platform === item.platform && s.url === item.url)) { socialsToShow.push({ platform: item.platform, url: item.url }); } }); } } if (website || socialData && (socialData.custom_website || socialData.website_url) || dexscreenerInfo && dexscreenerInfo.website) { const url = website || socialData && (socialData.custom_website || socialData.website_url) || dexscreenerInfo && dexscreenerInfo.website; if (url && !socialsToShow.some((s)=>s.platform === "website" && s.url === url)) { socialsToShow.unshift({ platform: "website", url }); } } if (dexscreenerInfo) { if (dexscreenerInfo.twitter && !socialsToShow.some((s)=>s.platform === "twitter" && s.url === dexscreenerInfo.twitter)) socialsToShow.push({ platform: "twitter", url: dexscreenerInfo.twitter }); if (dexscreenerInfo.telegram && !socialsToShow.some((s)=>s.platform === "telegram" && s.url === dexscreenerInfo.telegram)) socialsToShow.push({ platform: "telegram", url: dexscreenerInfo.telegram }); if (dexscreenerInfo.discord && !socialsToShow.some((s)=>s.platform === "discord" && s.url === dexscreenerInfo.discord)) socialsToShow.push({ platform: "discord", url: dexscreenerInfo.discord }); } if (!socialsToShow.length) return null; const socialIcons = { website: "fa-solid fa-globe", twitter: "fab fa-twitter", telegram: "fab fa-telegram", discord: "fab fa-discord", reddit: "fab fa-reddit", tiktok: "fab fa-tiktok", instagram: "fab fa-instagram", youtube: "fab fa-youtube", facebook: "fab fa-facebook", github: "fab fa-github" }; return /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 183, columnNumber: 7 }, __self: this }, socialsToShow.map((item, idx)=>item.url ? /*#__PURE__*/ React.createElement("a", { key: item.platform + idx, href: item.url, target: "_blank", rel: "noopener noreferrer", className: "text-gray-400 hover:text-white transition-colors", title: item.platform, __source: { fileName: "", lineNumber: 186, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: socialIcons[item.platform] || "fas fa-link", __source: { fileName: "", lineNumber: 194, columnNumber: 15 }, __self: this })) : null), hasAccess && /*#__PURE__*/ React.createElement("div", { className: "ml-2", __source: { fileName: "", lineNumber: 199, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(EditSocialsButton, { tokenAddress: tokenAddress, chainId: chainId, onSaved: ()=>{}, __source: { fileName: "", lineNumber: 200, columnNumber: 13 }, __self: this }))); }; const finalDisplayImage = socialData?.profile_image_url || displayImage || dexscreenerInfo?.logo; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-4", __source: { fileName: "", lineNumber: 215, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-row items-center gap-4", __source: { fileName: "", lineNumber: 216, columnNumber: 7 }, __self: this }, finalDisplayImage && /*#__PURE__*/ React.createElement("img", { src: finalDisplayImage, alt: `${name} logo`, className: "w-12 h-12 rounded-full object-cover bg-gray-800", onError: (e)=>{ e.target.onerror = null; e.target.src = "https://placehold.co/48x48/1e1e1e/gray?text=?"; }, __source: { fileName: "", lineNumber: 218, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 228, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 229, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold text-white", __source: { fileName: "", lineNumber: 230, columnNumber: 13 }, __self: this }, name), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowExtraInfo(true), className: "ml-1 text-lg", title: "contract info and holders", style: { color: "var(--shield-color, #22c55e)" }, onMouseEnter: (e)=>{ let status = "okay"; let color = "#22c55e"; if (status === "danger") color = "#ef4444"; if (status === "warning") color = "#facc15"; e.currentTarget.style.setProperty("--shield-color", color); }, onMouseLeave: (e)=>{ e.currentTarget.style.setProperty("--shield-color", "#22c55e"); }, __source: { fileName: "", lineNumber: 231, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa-solid fa-shield-halved", __source: { fileName: "", lineNumber: 247, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4", __source: { fileName: "", lineNumber: 250, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-400", __source: { fileName: "", lineNumber: 251, columnNumber: 13 }, __self: this }, symbol, " ", chainId && `- Chain: ${chainId}`), trackyHoldings !== null && !isNaN(trackyHoldings) && /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 255, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-blue-400", __source: { fileName: "", lineNumber: 256, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-wallet mr-1", __source: { fileName: "", lineNumber: 257, columnNumber: 19 }, __self: this }), Number(trackyHoldings).toLocaleString(), " TRACKY"), trackyHoldings >= 350000 && /*#__PURE__*/ React.createElement("span", { className: "bg-blue-500 text-white text-xs px-2 py-1 rounded-full", __source: { fileName: "", lineNumber: 261, columnNumber: 19 }, __self: this }, getBonusMultiplier(trackyHoldings).multiplier, "x Bonus"), activeBoosts && activeBoosts.length > 0 && /*#__PURE__*/ React.createElement("span", { className: "bg-purple-500 text-white text-xs px-2 py-1 rounded-full", __source: { fileName: "", lineNumber: 266, columnNumber: 19 }, __self: this }, "+", activeBoosts.reduce((total, boost)=>total + boost.boost_multiplier, 0), " ", "Boost"))), error && /*#__PURE__*/ React.createElement("div", { className: "text-red-500 text-sm", __source: { fileName: "", lineNumber: 278, columnNumber: 21 }, __self: this }, error)), /*#__PURE__*/ React.createElement("div", { className: "hidden md:flex ml-auto gap-2 items-center", __source: { fileName: "", lineNumber: 280, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 281, columnNumber: 11 }, __self: this }, renderSocialLinks(), onSave && /*#__PURE__*/ React.createElement("button", { onClick: onSave, disabled: isSaving, className: "px-3 py-1 bg-blue-500 rounded-lg hover:bg-blue-600 disabled:bg-blue-300 transition-colors", __source: { fileName: "", lineNumber: 284, columnNumber: 15 }, __self: this }, isSaving ? "Saving..." : "Save")))), /*#__PURE__*/ React.createElement("div", { className: "flex md:hidden items-center gap-2", __source: { fileName: "", lineNumber: 295, columnNumber: 7 }, __self: this }, renderSocialLinks(), onSave && /*#__PURE__*/ React.createElement("button", { onClick: onSave, disabled: isSaving, className: "px-3 py-1 bg-blue-500 rounded-lg hover:bg-blue-600 disabled:bg-blue-300 transition-colors", __source: { fileName: "", lineNumber: 298, columnNumber: 11 }, __self: this }, isSaving ? "Saving..." : "Save")), /*#__PURE__*/ React.createElement(ExtraInfoPopup, { isOpen: showExtraInfo, onClose: ()=>setShowExtraInfo(false), tokenAddress: tokenAddress, chainId: chainId, __source: { fileName: "", lineNumber: 307, columnNumber: 7 }, __self: this })); } function TokenHeaderSocialsStory() { const mockDexscreenerInfo = { logo: "https://placehold.co/48x48/1e1e1e/gray?text=DexLogo", website: "https://example.com", twitter: "https://twitter.com/example", telegram: "https://t.me/example", discord: "https://discord.gg/example" }; return /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-[#121212]", __source: { fileName: "", lineNumber: 327, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 328, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white mb-4", __source: { fileName: "", lineNumber: 329, columnNumber: 9 }, __self: this }, "Default View"), /*#__PURE__*/ React.createElement(TokenHeaderSocials, { displayImage: "https://placehold.co/48x48/1e1e1e/gray?text=Logo", name: "Token Name", symbol: "TKN", chainId: "Ethereum", tokenAddress: "0x123...", website: "https://default-website.com", updatePriceData: ()=>alert("Price data updated"), updating: false, onSave: ()=>alert("Saved"), isSaving: false, dexscreenerInfo: mockDexscreenerInfo, __source: { fileName: "", lineNumber: 330, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 345, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white mb-4", __source: { fileName: "", lineNumber: 346, columnNumber: 9 }, __self: this }, "With Wallet Access"), /*#__PURE__*/ React.createElement(TokenHeaderSocials, { displayImage: "https://placehold.co/48x48/1e1e1e/gray?text=Logo", name: "Token Name", symbol: "TKN", chainId: "Ethereum", tokenAddress: "0x123...", walletAddress: "0xabc...", website: "https://default-website.com", updatePriceData: ()=>alert("Price data updated"), updating: false, onSave: ()=>alert("Saved"), isSaving: false, __source: { fileName: "", lineNumber: 347, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 362, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white mb-4", __source: { fileName: "", lineNumber: 363, columnNumber: 9 }, __self: this }, "Loading View"), /*#__PURE__*/ React.createElement(TokenHeaderSocials, { displayImage: "https://placehold.co/48x48/1e1e1e/gray?text=Logo", name: "Token Name", symbol: "TKN", chainId: "Ethereum", tokenAddress: "0x123...", website: "https://default-website.com", updatePriceData: ()=>{}, updating: true, onSave: ()=>{}, isSaving: true, __source: { fileName: "", lineNumber: 364, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 378, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white mb-4", __source: { fileName: "", lineNumber: 379, columnNumber: 9 }, __self: this }, "With Dexscreener Data"), /*#__PURE__*/ React.createElement(TokenHeaderSocials, { name: "Token Name", symbol: "TKN", chainId: "Ethereum", tokenAddress: "0x123...", website: "https://default-website.com", updatePriceData: ()=>{}, updating: false, dexscreenerInfo: mockDexscreenerInfo, __source: { fileName: "", lineNumber: 380, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 392, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white mb-4", __source: { fileName: "", lineNumber: 393, columnNumber: 9 }, __self: this }, "No Social Data View"), /*#__PURE__*/ React.createElement(TokenHeaderSocials, { displayImage: "https://placehold.co/48x48/1e1e1e/gray?text=Logo", name: "Token Name", symbol: "TKN", chainId: "Ethereum", tokenAddress: "", website: "https://default-website.com", updatePriceData: ()=>{}, updating: false, __source: { fileName: "", lineNumber: 394, columnNumber: 9 }, __self: this }))); } function VoteButton({ voteLoading, walletAddress, hasVotedToday, timeUntilNextVote, onVote, errorMessage }) { const [showTooltip, setShowTooltip] = useState(false); const getButtonText = ()=>{ if (voteLoading) return "Voting"; if (!walletAddress) return "Vote"; if (hasVotedToday) return "Voted"; return "Vote"; }; const getTooltipText = ()=>{ if (!walletAddress) return "Connect your Phantom Wallet first"; if (hasVotedToday) { return `This wallet has already voted today (possible again in ${timeUntilNextVote} hours)`; } return ""; }; const isDisabled = voteLoading || hasVotedToday || !walletAddress; const tooltipText = getTooltipText(); return /*#__PURE__*/ React.createElement("div", { className: "relative w-full flex flex-col items-center", __source: { fileName: "", lineNumber: 30, columnNumber: 5 }, __self: this }, errorMessage && /*#__PURE__*/ React.createElement("div", { className: "mb-2 w-full bg-red-700/80 text-white text-center rounded-lg px-2 py-1 text-xs font-bold animate-fade-in", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, errorMessage), /*#__PURE__*/ React.createElement("button", { onClick: !isDisabled ? onVote : undefined, disabled: isDisabled, onMouseEnter: ()=>setShowTooltip(true), onMouseLeave: ()=>setShowTooltip(false), className: `w-full h-[48px] flex items-center justify-center transition-colors px-4 py-2 rounded-lg font-bold gap-2 text-white disabled:opacity-50 disabled:cursor-not-allowed ${isDisabled ? "bg-gray-500 cursor-not-allowed" : "bg-[#0f4bc4] hover:bg-[#0d3fa3]"}`, style: { minWidth: 0 }, __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-heart text-inherit", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, getButtonText())), showTooltip && tooltipText && /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-2 bg-gray-900 text-white text-sm rounded-lg whitespace-nowrap z-10", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, tooltipText, /*#__PURE__*/ React.createElement("div", { className: "absolute top-full left-1/2 transform -translate-x-1/2 border-8 border-transparent border-t-gray-900", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }))); } function VoteButtonStory() { const [isLoading, setIsLoading] = useState(false); const mockVote = ()=>{ setIsLoading(true); setTimeout(()=>setIsLoading(false), 2000); }; return /*#__PURE__*/ React.createElement("div", { className: "space-y-4 p-4", __source: { fileName: "", lineNumber: 69, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 70, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white mb-2", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, "Default State (No Wallet)"), /*#__PURE__*/ React.createElement(VoteButton, { voteLoading: false, walletAddress: "", hasVotedToday: false, timeUntilNextVote: 0, onVote: ()=>{}, __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 81, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white mb-2", __source: { fileName: "", lineNumber: 82, columnNumber: 9 }, __self: this }, "Loading State"), /*#__PURE__*/ React.createElement(VoteButton, { voteLoading: true, walletAddress: "0x123", hasVotedToday: false, timeUntilNextVote: 0, onVote: ()=>{}, __source: { fileName: "", lineNumber: 83, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 92, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white mb-2", __source: { fileName: "", lineNumber: 93, columnNumber: 9 }, __self: this }, "Already Voted Today"), /*#__PURE__*/ React.createElement(VoteButton, { voteLoading: false, walletAddress: "0x123", hasVotedToday: true, timeUntilNextVote: 12, onVote: ()=>{}, __source: { fileName: "", lineNumber: 94, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 103, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white mb-2", __source: { fileName: "", lineNumber: 104, columnNumber: 9 }, __self: this }, "Regular Vote (1 point)"), /*#__PURE__*/ React.createElement(VoteButton, { voteLoading: isLoading, walletAddress: "0x123", hasVotedToday: false, timeUntilNextVote: 0, onVote: mockVote, __source: { fileName: "", lineNumber: 105, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 114, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white mb-2", __source: { fileName: "", lineNumber: 115, columnNumber: 9 }, __self: this }, "Active Vote Button"), /*#__PURE__*/ React.createElement(VoteButton, { voteLoading: false, walletAddress: "0x123", hasVotedToday: false, timeUntilNextVote: 0, onVote: ()=>{}, __source: { fileName: "", lineNumber: 116, columnNumber: 9 }, __self: this }))); } function VoteStats({ tokenAddress, voteCounts, hasVotedToday, onVote, walletConnected, isLoading, error: externalError }) { const [stats, setStats] = useState(null); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const [isVoting, setIsVoting] = useState(false); const [voteError, setVoteError] = useState(""); useEffect(()=>{ const loadStats = async ()=>{ setLoading(true); try { const response = await fetch("/api/get-vote-stats", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ tokenAddress }) }); const result = await response.json(); if (result.error) { setError(result.error); } else { setStats(result.stats); } } catch (err) { setError("Er ging iets mis bij het laden van de statistieken"); } finally{ setLoading(false); } }; loadStats(); const interval = setInterval(loadStats, 30000); return ()=>clearInterval(interval); }, [ tokenAddress ]); const handleVote = async ()=>{ if (!walletConnected) { setVoteError("Verbind eerst je wallet om te kunnen stemmen"); return; } if (hasVotedToday) { setVoteError("Je hebt vandaag al gestemd"); return; } setIsVoting(true); setVoteError(""); try { await onVote(); } catch (err) { setVoteError("Er ging iets mis bij het stemmen"); } finally{ setIsVoting(false); } }; if (loading) { return /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-[#2a2a2a] rounded-lg animate-pulse", __source: { fileName: "", lineNumber: 69, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-4 bg-gray-700 rounded w-1/4 mb-4", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-8 bg-gray-700 rounded", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-8 bg-gray-700 rounded", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-8 bg-gray-700 rounded", __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }))); } if (error) { return /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-red-900/50 text-red-200 rounded-lg", __source: { fileName: "", lineNumber: 82, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 83, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-triangle", __source: { fileName: "", lineNumber: 84, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 85, columnNumber: 11 }, __self: this }, error))); } return /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-[#2a2a2a] rounded-lg", __source: { fileName: "", lineNumber: 92, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-bold text-white mb-4", __source: { fileName: "", lineNumber: 93, columnNumber: 7 }, __self: this }, "Stem Statistieken (laatste 7 dagen)"), stats && stats.length > 0 ? /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 98, columnNumber: 9 }, __self: this }, stats.map((stat)=>/*#__PURE__*/ React.createElement("div", { key: stat.boostLevel, className: "p-3 bg-[#1e1e1e] rounded-lg", __source: { fileName: "", lineNumber: 100, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-2", __source: { fileName: "", lineNumber: 101, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-bold text-white", __source: { fileName: "", lineNumber: 102, columnNumber: 17 }, __self: this }, stat.boostDescription), /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-400", __source: { fileName: "", lineNumber: 105, columnNumber: 17 }, __self: this }, stat.voteCount, " stemmers")), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4 text-sm", __source: { fileName: "", lineNumber: 110, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 111, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-400", __source: { fileName: "", lineNumber: 112, columnNumber: 19 }, __self: this }, "Totaal stemmen:"), /*#__PURE__*/ React.createElement("span", { className: "ml-2 text-white", __source: { fileName: "", lineNumber: 113, columnNumber: 19 }, __self: this }, stat.totalVotes.toLocaleString())), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 117, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-400", __source: { fileName: "", lineNumber: 118, columnNumber: 19 }, __self: this }, "Gem. balans:"), /*#__PURE__*/ React.createElement("span", { className: "ml-2 text-white", __source: { fileName: "", lineNumber: 119, columnNumber: 19 }, __self: this }, Math.round(stat.avgBalance).toLocaleString(), " Tracky")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 123, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-400", __source: { fileName: "", lineNumber: 124, columnNumber: 19 }, __self: this }, "Gem. hodl tijd:"), /*#__PURE__*/ React.createElement("span", { className: "ml-2 text-white", __source: { fileName: "", lineNumber: 125, columnNumber: 19 }, __self: this }, Math.round(stat.avgHoldingHours), " uur")))))) : /*#__PURE__*/ React.createElement("div", { className: "text-gray-400", __source: { fileName: "", lineNumber: 134, columnNumber: 9 }, __self: this }, "Nog geen stem statistieken beschikbaar"), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 139, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-4 gap-2 mb-4", __source: { fileName: "", lineNumber: 140, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center p-2 bg-[#1e1e1e] rounded", __source: { fileName: "", lineNumber: 141, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-400", __source: { fileName: "", lineNumber: 142, columnNumber: 13 }, __self: this }, "24u"), /*#__PURE__*/ React.createElement("p", { className: "text-lg font-bold text-white", __source: { fileName: "", lineNumber: 143, columnNumber: 13 }, __self: this }, voteCounts?.day_votes || 0)), /*#__PURE__*/ React.createElement("div", { className: "text-center p-2 bg-[#1e1e1e] rounded", __source: { fileName: "", lineNumber: 147, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-400", __source: { fileName: "", lineNumber: 148, columnNumber: 13 }, __self: this }, "Week"), /*#__PURE__*/ React.createElement("p", { className: "text-lg font-bold text-white", __source: { fileName: "", lineNumber: 149, columnNumber: 13 }, __self: this }, voteCounts?.week_votes || 0)), /*#__PURE__*/ React.createElement("div", { className: "text-center p-2 bg-[#1e1e1e] rounded", __source: { fileName: "", lineNumber: 153, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-400", __source: { fileName: "", lineNumber: 154, columnNumber: 13 }, __self: this }, "Maand"), /*#__PURE__*/ React.createElement("p", { className: "text-lg font-bold text-white", __source: { fileName: "", lineNumber: 155, columnNumber: 13 }, __self: this }, voteCounts?.month_votes || 0)), /*#__PURE__*/ React.createElement("div", { className: "text-center p-2 bg-[#1e1e1e] rounded", __source: { fileName: "", lineNumber: 159, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-400", __source: { fileName: "", lineNumber: 160, columnNumber: 13 }, __self: this }, "Totaal"), /*#__PURE__*/ React.createElement("p", { className: "text-lg font-bold text-white", __source: { fileName: "", lineNumber: 161, columnNumber: 13 }, __self: this }, voteCounts?.total_votes || 0))), /*#__PURE__*/ React.createElement("button", { onClick: handleVote, disabled: isVoting || hasVotedToday || !walletConnected || isLoading, className: `w-full px-4 py-2 rounded font-medium transition-colors ${hasVotedToday ? "bg-gray-600 text-gray-300 cursor-not-allowed" : walletConnected ? "bg-green-500 hover:bg-green-600 text-white" : "bg-gray-600 text-gray-300 cursor-not-allowed"}`, __source: { fileName: "", lineNumber: 167, columnNumber: 9 }, __self: this }, isVoting || isLoading ? /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin", __source: { fileName: "", lineNumber: 179, columnNumber: 13 }, __self: this }) : hasVotedToday ? "Al gestemd vandaag" : walletConnected ? "Stem op deze Token" : "Verbind Wallet om te Stemmen"), (voteError || externalError) && /*#__PURE__*/ React.createElement("p", { className: "mt-2 text-sm text-red-400", __source: { fileName: "", lineNumber: 190, columnNumber: 11 }, __self: this }, voteError || externalError))); } function VoteStatsStory() { const mockStats = [ { boostLevel: 4, voteCount: 50, totalVotes: 5000, avgBalance: 250000, avgHoldingHours: 168, boostDescription: "200K+ Holder (100x)" }, { boostLevel: 3, voteCount: 75, totalVotes: 5625, avgBalance: 175000, avgHoldingHours: 120, boostDescription: "150K+ Holder (75x)" }, { boostLevel: 2, voteCount: 100, totalVotes: 5000, avgBalance: 125000, avgHoldingHours: 96, boostDescription: "100K+ Holder (50x)" }, { boostLevel: 1, voteCount: 200, totalVotes: 5000, avgBalance: 75000, avgHoldingHours: 72, boostDescription: "50K+ Holder (25x)" }, { boostLevel: 0, voteCount: 1000, totalVotes: 1000, avgBalance: 25000, avgHoldingHours: 48, boostDescription: "Normale stem (1x)" } ]; const mockVoteCounts = { day_votes: 150, week_votes: 1250, month_votes: 5000, total_votes: 15000 }; return /*#__PURE__*/ React.createElement("div", { className: "space-y-8 bg-[#121212] p-4", __source: { fileName: "", lineNumber: 251, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 252, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-white mb-4", __source: { fileName: "", lineNumber: 253, columnNumber: 9 }, __self: this }, "Laden"), /*#__PURE__*/ React.createElement(VoteStats, { tokenAddress: "0x123", loading: true, voteCounts: mockVoteCounts, __source: { fileName: "", lineNumber: 254, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 261, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-white mb-4", __source: { fileName: "", lineNumber: 262, columnNumber: 9 }, __self: this }, "Foutmelding"), /*#__PURE__*/ React.createElement(VoteStats, { tokenAddress: "0x123", error: "Er ging iets mis bij het laden van de statistieken", voteCounts: mockVoteCounts, __source: { fileName: "", lineNumber: 263, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 270, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-white mb-4", __source: { fileName: "", lineNumber: 271, columnNumber: 9 }, __self: this }, "Geen data"), /*#__PURE__*/ React.createElement(VoteStats, { tokenAddress: "0x123", stats: [], voteCounts: mockVoteCounts, __source: { fileName: "", lineNumber: 272, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 279, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-white mb-4", __source: { fileName: "", lineNumber: 280, columnNumber: 9 }, __self: this }, "Met data"), /*#__PURE__*/ React.createElement(VoteStats, { tokenAddress: "0x123", stats: mockStats, voteCounts: mockVoteCounts, walletConnected: true, hasVotedToday: false, onVote: ()=>new Promise((resolve)=>setTimeout(resolve, 1000)), __source: { fileName: "", lineNumber: 281, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 291, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-white mb-4", __source: { fileName: "", lineNumber: 292, columnNumber: 9 }, __self: this }, "Al gestemd"), /*#__PURE__*/ React.createElement(VoteStats, { tokenAddress: "0x123", stats: mockStats, voteCounts: mockVoteCounts, walletConnected: true, hasVotedToday: true, __source: { fileName: "", lineNumber: 293, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 302, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-white mb-4", __source: { fileName: "", lineNumber: 303, columnNumber: 9 }, __self: this }, "Wallet niet verbonden"), /*#__PURE__*/ React.createElement(VoteStats, { tokenAddress: "0x123", stats: mockStats, voteCounts: mockVoteCounts, walletConnected: false, hasVotedToday: false, __source: { fileName: "", lineNumber: 304, columnNumber: 9 }, __self: this }))); } function BoostPopup({ token, onClose, onSuccess, onBoostActivated, isOpen = false, walletAddress }) { const [txHash, setTxHash] = React.useState(""); const [selectedPackage, setSelectedPackage] = React.useState(""); const [status, setStatus] = React.useState("idle"); const [error, setError] = React.useState(null); const [loading, setLoading] = React.useState(false); const [verifyingTx, setVerifyingTx] = React.useState(false); const [isDropdownOpen, setIsDropdownOpen] = React.useState(false); const [trackyBalance, setTrackyBalance] = React.useState(null); const [trackyLoading, setTrackyLoading] = React.useState(false); const [trackyError, setTrackyError] = React.useState(null); React.useEffect(()=>{ if (isOpen && walletAddress) { setTrackyLoading(true); setTrackyError(null); fetch("/api/get-tracky-balance", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ walletAddress }) }).then((res)=>{ if (!res.ok) throw new Error("Could not fetch Tracky balance"); return res.json(); }).then((data)=>{ if (data.error) throw new Error(data.error); setTrackyBalance(data.balance); }).catch(()=>{ setTrackyError("Could not fetch Tracky balance"); setTrackyBalance(null); }).finally(()=>setTrackyLoading(false)); } else if (!isOpen) { setTrackyBalance(null); setTrackyError(null); } }, [ isOpen, walletAddress ]); const basePackages = { basic: { amount: 0.075, votes: 25, name: "Basic Boost" }, premium: { amount: 0.13, votes: 50, name: "Premium Boost" }, super: { amount: 0.19, votes: 75, name: "Super Boost" }, ultimate: { amount: 0.24, votes: 100, name: "Ultimate Boost" } }; const getBonusMultiplier = (balance)=>{ if (balance >= 600000) return { multiplier: 4, level: 3 }; if (balance >= 400000) return { multiplier: 3, level: 2 }; if (balance >= 350000) return { multiplier: 2, level: 1 }; return { multiplier: 1, level: 0 }; }; const getBonusImage = (level)=>{ // Basic boost: geen afbeelding if (level === 3) return "https://ucarecdn.com/85c97dc4-c761-449b-b5ad-d4c1d597d871/-/format/auto/"; // Ultimate boost x4 if (level === 2) return "https://ucarecdn.com/a60d1338-e831-4fa2-aa0d-86db9a1c3a0e/-/format/auto/"; // Super boost x3 if (level === 1) return "https://ucarecdn.com/dbd858fa-b67f-4271-aca4-e2e5febadb67/-/format/auto/"; // Premium boost x2 return null; }; const getPackagesWithBonus = ()=>{ const { multiplier, level } = getBonusMultiplier(trackyBalance || 0); const result = {}; Object.entries(basePackages).forEach(([key, pkg])=>{ const bonusVotes = pkg.votes * (multiplier > 0 ? multiplier : 1); result[key] = { ...pkg, originalVotes: pkg.votes, votes: bonusVotes, bonusLevel: level, bonusMultiplier: multiplier }; }); return result; }; const packages = getPackagesWithBonus(); const { level: bonusLevel } = getBonusMultiplier(trackyBalance || 0); const bonusImage = getBonusImage(bonusLevel); const handleVerifyTransaction = async ()=>{ try { setError(null); setVerifyingTx(true); const trimmedHash = txHash.trim(); if (!trimmedHash || !selectedPackage) { throw new Error("Transaction hash and package ID are required"); } const debugResponse = await fetch("/api/debug-solana-transaction", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ transactionHash: trimmedHash }) }); if (!debugResponse.ok) { throw new Error("Could not verify transaction"); } const debugResult = await debugResponse.json(); if (!debugResult.success) { throw new Error(debugResult.error || "Could not verify transaction"); } const transactionData = debugResult.rawTransaction; if (!transactionData || !transactionData.accountData) { throw new Error("Invalid transaction data received"); } const receiverAccount = transactionData.accountData.find((account)=>account.account === "FgE7YQ6c2pTamsqJpr9R9eY4vSuJLNuGhMVpG7cgu1sf"); if (!receiverAccount) { throw new Error("No payment found to the correct address"); } const receivedAmount = Math.abs(receiverAccount.nativeBalanceChange) / 1e9; const expectedAmount = packages[selectedPackage].amount; if (Math.abs(receivedAmount - expectedAmount) > 0.0001) { throw new Error(`Incorrect amount. Expected: ${expectedAmount} SOL, Received: ${receivedAmount} SOL`); } return { senderWallet: transactionData.accountData[0].account, amount: receivedAmount, timestamp: transactionData.timestamp }; } catch (err) { setError(err.message); return false; } finally{ setVerifyingTx(false); } }; const handleSubmit = async (e)=>{ e.preventDefault(); setStatus("verifying"); setLoading(true); setError(null); try { const verifyResult = await handleVerifyTransaction(); if (!verifyResult) { throw new Error("Transaction verification failed"); } const activateResponse = await fetch("/api/activate-token-boost", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ tokenAddress: token.address, chainId: token.chainId, transactionHash: txHash.trim(), packageType: selectedPackage, walletAddress: verifyResult.senderWallet, verifiedAmount: verifyResult.amount, boostVotes: packages[selectedPackage].votes, timestamp: verifyResult.timestamp }) }); const activateResult = await activateResponse.json(); if (!activateResult.success) { throw new Error(activateResult.error || "Boost activation failed"); } let latestBoosts = null; try { const boostsRes = await fetch("/api/get-active-boosts", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ tokenAddress: token.address, chainId: token.chainId }) }); const boostsData = await boostsRes.json(); if (boostsData.success) { latestBoosts = boostsData.activeBoosts; } } catch (e) {} setStatus("success"); if (onBoostActivated) { onBoostActivated(latestBoosts || activateResult.activeBoosts); } if (onSuccess) { onSuccess(activateResult); } onClose(); } catch (err) { setError(err.message); setStatus("error"); } finally{ setLoading(false); } }; if (!isOpen) return null; let selectedPackageDisplay = null; if (selectedPackage && packages[selectedPackage]) { selectedPackageDisplay = /*#__PURE__*/ React.createElement("span", { className: "text-white", __source: { fileName: "", lineNumber: 245, columnNumber: 7 }, __self: this }, packages[selectedPackage].name, " - ", packages[selectedPackage].amount, " ", "SOL (", /*#__PURE__*/ React.createElement("span", { className: "line-through", __source: { fileName: "", lineNumber: 248, columnNumber: 9 }, __self: this }, packages[selectedPackage].originalVotes), " → ", /*#__PURE__*/ React.createElement("span", { className: "text-blue-400", __source: { fileName: "", lineNumber: 252, columnNumber: 9 }, __self: this }, packages[selectedPackage].votes), " votes)"); } else { selectedPackageDisplay = /*#__PURE__*/ React.createElement("span", { className: "text-white", __source: { fileName: "", lineNumber: 258, columnNumber: 7 }, __self: this }, "Select a package..."); } return /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black/80 flex items-center justify-center z-50", __source: { fileName: "", lineNumber: 263, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#1e1e1e] p-6 rounded-lg w-full max-w-md mx-4", __source: { fileName: "", lineNumber: 264, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-6", __source: { fileName: "", lineNumber: 265, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold text-white", __source: { fileName: "", lineNumber: 266, columnNumber: 11 }, __self: this }, "Activate Token Boost"), /*#__PURE__*/ React.createElement("button", { onClick: onClose, className: "text-gray-400 hover:text-white", __source: { fileName: "", lineNumber: 267, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times", __source: { fileName: "", lineNumber: 268, columnNumber: 13 }, __self: this }))), bonusImage && /*#__PURE__*/ React.createElement("div", { className: "mb-6 flex flex-col items-center", __source: { fileName: "", lineNumber: 273, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: bonusImage, alt: `Bonus Level ${bonusLevel}`, className: "h-24", __source: { fileName: "", lineNumber: 274, columnNumber: 13 }, __self: this }), trackyLoading && /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center", __source: { fileName: "", lineNumber: 280, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin", __source: { fileName: "", lineNumber: 281, columnNumber: 17 }, __self: this })), trackyError && /*#__PURE__*/ React.createElement("div", { className: "p-3 bg-red-900/50 text-red-200 rounded-lg text-sm", __source: { fileName: "", lineNumber: 285, columnNumber: 15 }, __self: this }, trackyError), trackyBalance !== null && /*#__PURE__*/ React.createElement("p", { className: "text-blue-400 mt-2", __source: { fileName: "", lineNumber: 290, columnNumber: 15 }, __self: this }, getBonusMultiplier(trackyBalance).multiplier, "x Tracky Holder Bonus Active!")), /*#__PURE__*/ React.createElement("div", { className: "mb-6 p-4 bg-[#2a2a2a] rounded-lg", __source: { fileName: "", lineNumber: 298, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-300 text-sm mb-2", __source: { fileName: "", lineNumber: 299, columnNumber: 11 }, __self: this }, "Send the exact amount to this address:"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2 bg-[#1e1e1e] p-2 rounded", __source: { fileName: "", lineNumber: 302, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("code", { className: "text-white text-sm break-all", __source: { fileName: "", lineNumber: 303, columnNumber: 13 }, __self: this }, "FgE7YQ6c2pTamsqJpr9R9eY4vSuJLNuGhMVpG7cgu1sf"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ navigator.clipboard.writeText("FgE7YQ6c2pTamsqJpr9R9eY4vSuJLNuGhMVpG7cgu1sf"); }, className: "text-blue-400 hover:text-blue-300", __source: { fileName: "", lineNumber: 306, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-copy", __source: { fileName: "", lineNumber: 314, columnNumber: 15 }, __self: this })))), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "space-y-4", __source: { fileName: "", lineNumber: 319, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 320, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm text-gray-400 mb-2", __source: { fileName: "", lineNumber: 321, columnNumber: 13 }, __self: this }, "Choose your boost package"), /*#__PURE__*/ React.createElement("div", { className: "w-full p-3 bg-[#2a2a2a] text-white border border-gray-700 rounded-lg cursor-pointer", onClick: ()=>setIsDropdownOpen(!isDropdownOpen), __source: { fileName: "", lineNumber: 324, columnNumber: 13 }, __self: this }, selectedPackageDisplay), isDropdownOpen ? /*#__PURE__*/ React.createElement("div", { className: "absolute w-full mt-1 bg-[#2a2a2a] border border-gray-700 rounded-lg overflow-hidden z-50", __source: { fileName: "", lineNumber: 331, columnNumber: 15 }, __self: this }, Object.entries(packages).map(([key, pkg])=>{ const pkgDisplay = /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 334, columnNumber: 21 }, __self: this }, pkg.name, " - ", pkg.amount, " SOL (", /*#__PURE__*/ React.createElement("span", { className: "line-through", __source: { fileName: "", lineNumber: 336, columnNumber: 23 }, __self: this }, pkg.originalVotes), " → ", /*#__PURE__*/ React.createElement("span", { className: "text-blue-400", __source: { fileName: "", lineNumber: 338, columnNumber: 23 }, __self: this }, pkg.votes), " votes)"); return /*#__PURE__*/ React.createElement("div", { key: key, className: "p-3 hover:bg-[#3a3a3a] cursor-pointer text-white", onClick: ()=>{ setSelectedPackage(key); setIsDropdownOpen(false); }, __source: { fileName: "", lineNumber: 343, columnNumber: 21 }, __self: this }, pkgDisplay); })) : null), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 359, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm text-gray-400 mb-2", __source: { fileName: "", lineNumber: 360, columnNumber: 13 }, __self: this }, "Transaction Hash"), /*#__PURE__*/ React.createElement("input", { type: "text", value: txHash, onChange: (e)=>setTxHash(e.target.value), className: "w-full p-3 bg-[#2a2a2a] text-white border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500", placeholder: "Paste your transaction hash here...", required: true, name: "txHash", __source: { fileName: "", lineNumber: 363, columnNumber: 13 }, __self: this })), error && /*#__PURE__*/ React.createElement("div", { className: "p-3 bg-red-900/50 text-red-200 rounded-lg text-sm", __source: { fileName: "", lineNumber: 375, columnNumber: 13 }, __self: this }, error), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end gap-2", __source: { fileName: "", lineNumber: 380, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", onClick: onClose, className: "px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-500 transition-colors", __source: { fileName: "", lineNumber: 381, columnNumber: 13 }, __self: this }, "Cancel"), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: loading || verifyingTx || trackyLoading || trackyBalance === null, className: "px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 disabled:bg-blue-300 disabled:cursor-not-allowed transition-colors", __source: { fileName: "", lineNumber: 388, columnNumber: 13 }, __self: this }, loading || verifyingTx ? /*#__PURE__*/ React.createElement("span", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 399, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin", __source: { fileName: "", lineNumber: 400, columnNumber: 19 }, __self: this }), verifyingTx ? "Verifying transaction..." : "Activating boost...") : "Activate Boost"))))); } function BoostPopupStory() { const [isOpen, setIsOpen] = React.useState(true); const mockToken = { address: "0x1234567890abcdef", chainId: 1, name: "Test Token" }; // Voeg de refreshTokenData functie toe zodat de error verdwijnt function refreshTokenData() { // Hier kun je later echte refresh-logica toevoegen console.log("Token data refreshed!"); } return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#121212] p-4", __source: { fileName: "", lineNumber: 431, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsOpen(true), className: "px-4 py-2 bg-blue-500 text-white rounded-lg", type: "button", __source: { fileName: "", lineNumber: 432, columnNumber: 7 }, __self: this }, "Open Boost Popup"), /*#__PURE__*/ React.createElement(BoostPopup, { isOpen: isOpen, token: mockToken, onClose: ()=>setIsOpen(false), onSuccess: refreshTokenData, onBoostActivated: ()=>{}, walletAddress: "0xabcdefabcdefabcdefabcdefabcdefabcdef", __source: { fileName: "", lineNumber: 439, columnNumber: 7 }, __self: this })); } function Input({ onClick, icon = "🚀", label = "Boost" }) { return /*#__PURE__*/ React.createElement("button", { onClick: onClick, className: "inline-flex items-center justify-center gap-2 py-3 px-4 rounded-lg transition-colors text-white bg-[#0f4bc4] hover:bg-[#0d3fa4]", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }, icon), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }, label)); } function InputStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Input, { onClick: ()=>alert("Boost clicked!"), __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(Input, { onClick: ()=>alert("Custom Boost clicked!"), icon: "🔥", label: "Custom Boost", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this })); } function Input2({ token, onClose, onSuccess, onBoostActivated, isOpen = false, trackyBalance = 0 }) { const [txHash, setTxHash] = useState(""); const [selectedPackage, setSelectedPackage] = useState(""); const [status, setStatus] = useState("idle"); const [error, setError] = useState(null); const [loading, setLoading] = useState(false); const [verifyingTx, setVerifyingTx] = useState(false); const basePackages = { basic: { amount: 0.075, votes: 25, name: "Basic Boost" }, premium: { amount: 0.13, votes: 50, name: "Premium Boost" }, super: { amount: 0.19, votes: 75, name: "Super Boost" }, ultimate: { amount: 0.24, votes: 100, name: "Ultimate Boost" } }; const getBonusMultiplier = (balance)=>{ if (balance >= 600000) return { multiplier: 4, level: 3, text: "3X Bonus Boost" }; if (balance >= 400000) return { multiplier: 3, level: 2, text: "2X Bonus Boost" }; if (balance >= 350000) return { multiplier: 2, level: 1, text: "1X Bonus Boost" }; return { multiplier: 1, level: 0, text: "" }; }; const getBonusImage = (level)=>{ switch(level){ case 1: return "https://ucarecdn.com/74ac6295-f961-4e93-b309-cdd5fbc7856b/-/format/auto/"; case 2: return "https://ucarecdn.com/94f0f6c1-a743-41f9-9a9f-4f5e18c0af3f/-/format/auto/"; case 3: return "https://ucarecdn.com/7f666b87-92be-4e96-99b4-a9b90ce21425/-/format/auto/"; default: return null; } }; const getPackagesWithBonus = ()=>{ const { multiplier, level } = getBonusMultiplier(trackyBalance); const bonusVotes = { 1: { basic: 50, premium: 100, super: 150, ultimate: 200 }, 2: { basic: 75, premium: 150, super: 225, ultimate: 300 }, 3: { basic: 100, premium: 200, super: 300, ultimate: 400 } }; return Object.entries(basePackages).reduce((acc, [key, pkg])=>{ acc[key] = { ...pkg, originalVotes: pkg.votes, votes: level > 0 ? bonusVotes[level][key] : pkg.votes, bonusLevel: level }; return acc; }, {}); }; const packages = getPackagesWithBonus(); const { level: bonusLevel, text: bonusText } = getBonusMultiplier(trackyBalance); const bonusImage = getBonusImage(bonusLevel); if (!isOpen) return null; const handleVerifyTransaction = async ()=>{ if (!txHash) return null; setVerifyingTx(true); setError(null); try { const response = await fetch("/api/verify-boost-payment", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ transactionHash: txHash.trim(), expectedAmount: packages[selectedPackage]?.amount }) }); const result = await response.json(); if (!result.success) { throw new Error(result.error || "Verificatie mislukt"); } return result; } catch (error) { console.error("Transaction verification error:", error); setError(error.message); return null; } finally{ setVerifyingTx(false); } }; const handleSubmit = async (e)=>{ e.preventDefault(); setStatus("verifying"); setLoading(true); setError(null); try { const verifyResult = await handleVerifyTransaction(); console.log("Verify result:", verifyResult); if (!verifyResult) { throw new Error("Transactie verificatie mislukt"); } const selectedBoostPackage = packages[selectedPackage]; const activateResponse = await fetch("/api/activate-token-boost", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ tokenAddress: token.address, chainId: token.chainId, transactionHash: txHash.trim(), packageType: selectedPackage, walletAddress: verifyResult.senderWallet, verifiedAmount: verifyResult.amount, boostVotes: selectedBoostPackage.votes, timestamp: verifyResult.timestamp, bonusLevel: selectedBoostPackage.bonusLevel || 0 }) }); const activateResult = await activateResponse.json(); console.log("Activate result:", activateResult); if (!activateResult.success) { throw new Error(activateResult.error || "Boost activatie mislukt"); } setStatus("success"); if (onBoostActivated) { onBoostActivated(activateResult.activeBoosts); } if (onSuccess) { onSuccess(activateResult); } onClose(); } catch (err) { console.error("Submission error:", err); setError(err.message); setStatus("error"); } finally{ setLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black/80 flex items-center justify-center z-50", __source: { fileName: "", lineNumber: 190, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#1e1e1e] p-6 rounded-lg w-full max-w-md mx-4", __source: { fileName: "", lineNumber: 191, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-6", __source: { fileName: "", lineNumber: 192, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold text-white", __source: { fileName: "", lineNumber: 193, columnNumber: 11 }, __self: this }, "Token Boost Activeren"), /*#__PURE__*/ React.createElement("button", { onClick: onClose, className: "text-gray-400 hover:text-white", __source: { fileName: "", lineNumber: 196, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times", __source: { fileName: "", lineNumber: 197, columnNumber: 13 }, __self: this }))), bonusLevel > 0 && /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 202, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center text-lg font-bold text-yellow-400 mb-2", __source: { fileName: "", lineNumber: 203, columnNumber: 13 }, __self: this }, bonusText), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center", __source: { fileName: "", lineNumber: 206, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: bonusImage, alt: bonusText, className: "h-24", __source: { fileName: "", lineNumber: 207, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "mb-6 p-4 bg-[#2a2a2a] rounded-lg", __source: { fileName: "", lineNumber: 212, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-300 text-sm mb-2", __source: { fileName: "", lineNumber: 213, columnNumber: 11 }, __self: this }, "Stuur het exacte bedrag naar dit adres:"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2 bg-[#1e1e1e] p-2 rounded", __source: { fileName: "", lineNumber: 216, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("code", { className: "text-white text-sm break-all", __source: { fileName: "", lineNumber: 217, columnNumber: 13 }, __self: this }, "FgE7YQ6c2pTamsqJpr9R9eY4vSuJLNuGhMVpG7cgu1sf"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ navigator.clipboard.writeText("FgE7YQ6c2pTamsqJpr9R9eY4vSuJLNuGhMVpG7cgu1sf"); }, className: "text-blue-400 hover:text-blue-300", __source: { fileName: "", lineNumber: 220, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-copy", __source: { fileName: "", lineNumber: 228, columnNumber: 15 }, __self: this })))), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "space-y-4", __source: { fileName: "", lineNumber: 233, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 234, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm text-gray-400 mb-2", __source: { fileName: "", lineNumber: 235, columnNumber: 13 }, __self: this }, "Kies je boost pakket"), /*#__PURE__*/ React.createElement("select", { value: selectedPackage, onChange: (e)=>setSelectedPackage(e.target.value), className: "w-full p-3 bg-[#2a2a2a] text-white border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500", required: true, __source: { fileName: "", lineNumber: 238, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 244, columnNumber: 15 }, __self: this }, "Selecteer een pakket..."), Object.entries(packages).map(([key, pkg])=>/*#__PURE__*/ React.createElement("option", { key: key, value: key, __source: { fileName: "", lineNumber: 246, columnNumber: 17 }, __self: this }, pkg.name, " (", pkg.bonusLevel > 0 ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("span", { className: "line-through", __source: { fileName: "", lineNumber: 250, columnNumber: 23 }, __self: this }, pkg.originalVotes), " → ", pkg.votes) : pkg.votes, " ", "votes) - ", pkg.amount, " SOL")))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 263, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm text-gray-400 mb-2", __source: { fileName: "", lineNumber: 264, columnNumber: 13 }, __self: this }, "Transaction Hash"), /*#__PURE__*/ React.createElement("input", { type: "text", value: txHash, onChange: (e)=>setTxHash(e.target.value), className: "w-full p-3 bg-[#2a2a2a] text-white border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500", placeholder: "Plak je transaction hash hier...", required: true, __source: { fileName: "", lineNumber: 267, columnNumber: 13 }, __self: this })), error && /*#__PURE__*/ React.createElement("div", { className: "p-3 bg-red-900/50 text-red-200 rounded-lg text-sm", __source: { fileName: "", lineNumber: 278, columnNumber: 13 }, __self: this }, error), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end gap-2", __source: { fileName: "", lineNumber: 283, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", onClick: onClose, className: "px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-500 transition-colors", __source: { fileName: "", lineNumber: 284, columnNumber: 13 }, __self: this }, "Annuleren"), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: loading || verifyingTx, className: "px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 disabled:bg-blue-300 disabled:cursor-not-allowed transition-colors", __source: { fileName: "", lineNumber: 291, columnNumber: 13 }, __self: this }, loading || verifyingTx ? /*#__PURE__*/ React.createElement("span", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 297, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin", __source: { fileName: "", lineNumber: 298, columnNumber: 19 }, __self: this }), verifyingTx ? "Transactie verifiëren..." : "Boost activeren...") : "Boost Activeren"))))); } function Input2Story() { return /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 316, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Input2, { name: "Token", onClose: ()=>console.log("Closed"), __source: { fileName: "", lineNumber: 317, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(Input2, { name: "User", onClose: ()=>console.log("Closed"), __source: { fileName: "", lineNumber: 318, columnNumber: 7 }, __self: this })); } function Header({ onMenuClick, walletAddress, onConnectWallet, onTrackyBalanceChange, trackyBalance: _trackyBalanceProp }) { const getBoostText = (balance)=>{ if (balance >= 700000) return "4 x Bonus Boost"; if (balance >= 500000) return "3 X Bonus Boost"; if (balance >= 300000) return "2 X Bonus Boost"; return "No Bonus Boost"; }; const formatBalance = (balance)=>{ if (balance === null) return ""; let formattedNumber; if (balance >= 1000000) formattedNumber = `${(balance / 1000000).toFixed(1)}M`; else if (balance >= 1000) formattedNumber = `${(balance / 1000).toFixed(1)}K`; else formattedNumber = balance.toFixed(1); return /*#__PURE__*/ React.createElement("span", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, formattedNumber), /*#__PURE__*/ React.createElement("span", { className: "flex items-center gap-1 text-sm", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa-solid fa-rocket text-white", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }), getBoostText(balance))); }; return /*#__PURE__*/ React.createElement("header", { className: "fixed top-0 left-0 right-0 h-[64px] bg-[#0f4bc3] z-[100] overflow-hidden", __source: { fileName: "", lineNumber: 36, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-full w-full px-2 md:px-8 flex items-center justify-between", __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-1 md:gap-4 min-w-0", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/e822989c-5579-4ca7-8d11-15b8cb992674/-/format/auto/", alt: "Tracky Gem logo", className: "h-[28px] md:h-[40px] w-auto flex-shrink-0", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4 flex-shrink-0", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, walletAddress && /*#__PURE__*/ React.createElement("div", { className: "hidden md:flex items-center gap-2 px-3 py-2 bg-[#0d3fa3] text-white rounded-lg", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-bold text-[#00cfff] text-lg mr-1", __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }, "$Tracky:"), _trackyBalanceProp === undefined || _trackyBalanceProp === null ? /*#__PURE__*/ React.createElement("span", { className: "flex items-center gap-2 text-gray-300", __source: { fileName: "", lineNumber: 56, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin", __source: { fileName: "", lineNumber: 57, columnNumber: 19 }, __self: this }), "Laden...") : formatBalance(_trackyBalanceProp || 0)), /*#__PURE__*/ React.createElement("div", { className: "hidden md:flex items-center gap-2", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: onConnectWallet, className: "flex items-center gap-2 px-4 py-2 bg-[#8A2BE2] hover:bg-[#7B1FA2] text-white rounded-lg transition-colors", __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/82e45653-5ce1-42f5-ba33-03d1770b7907/-/format/auto/", alt: "Phantom", className: "w-5 h-5", __source: { fileName: "", lineNumber: 71, columnNumber: 15 }, __self: this }), walletAddress ? `${walletAddress.slice(0, 6)}...${walletAddress.slice(-4)}` : "Connect Wallet")), /*#__PURE__*/ React.createElement("button", { onClick: onConnectWallet, className: "flex md:hidden items-center gap-1 px-2 py-1 bg-[#8A2BE2] hover:bg-[#7B1FA2] text-white rounded-md text-sm transition-colors ml-auto mr-2", style: { minWidth: 0 }, __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/82e45653-5ce1-42f5-ba33-03d1770b7907/-/format/auto/", alt: "Phantom", className: "w-5 h-5", __source: { fileName: "", lineNumber: 87, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 92, columnNumber: 13 }, __self: this }, "Connect")), /*#__PURE__*/ React.createElement("button", { onClick: onMenuClick, className: "md:hidden w-8 h-8 flex items-center justify-center text-white hover:bg-[#0d3fa3] rounded-lg transition-colors", "aria-label": "Toggle menu", __source: { fileName: "", lineNumber: 95, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bars text-lg", __source: { fileName: "", lineNumber: 100, columnNumber: 13 }, __self: this }))))); } function HeaderStory() { const [isSidebarOpen, setIsSidebarOpen] = useState(false); const [walletAddress, setWalletAddress] = useState(null); const handleConnectWallet = ()=>{ setWalletAddress("0x1234567890abcdef1234567890abcdef12345678"); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#121212]", __source: { fileName: "", lineNumber: 117, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Header, { onMenuClick: ()=>setIsSidebarOpen(!isSidebarOpen), walletAddress: walletAddress, onConnectWallet: handleConnectWallet, onTrackyBalanceChange: (balance)=>console.log("Tracky balance changed:", balance), trackyBalance: null, __source: { fileName: "", lineNumber: 118, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "pt-[64px]", __source: { fileName: "", lineNumber: 128, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "

Tracky Top 100