| import React, { useState, useEffect } from 'react'; |
| import { createPortal } from 'react-dom'; |
| import { |
| ArrowLeft, X, ExternalLink, |
| Shield, Copy, Check, |
| TrendingUp |
| } from 'lucide-react'; |
| import './TokenDetailModal.css'; |
|
|
| const TokenDetailModal = ({ token, onClose }) => { |
| const [activeTab, setActiveTab] = useState('curve'); |
| const isOnCurve = Boolean(token?.launchpadProgress !== undefined && token.launchpadProgress < 1); |
| const [chartMode, setChartMode] = useState(isOnCurve ? 'curve' : 'dexscreener'); |
| const [copied, setCopied] = useState(false); |
|
|
| |
| useEffect(() => { |
| if (!token) return; |
| const handleKeyDown = (e) => { |
| if (e.key === 'Escape') onClose(); |
| }; |
| window.addEventListener('keydown', handleKeyDown); |
| return () => window.removeEventListener('keydown', handleKeyDown); |
| }, [token, onClose]); |
|
|
| |
| useEffect(() => { |
| if (!token) return; |
| const prevOverflow = document.body.style.overflow; |
| document.body.style.overflow = 'hidden'; |
| return () => { |
| document.body.style.overflow = prevOverflow; |
| }; |
| }, [token]); |
|
|
| if (!token) return null; |
|
|
| const copyAddress = () => { |
| if (token?.tokenAddress) { |
| navigator.clipboard.writeText(token.tokenAddress); |
| setCopied(true); |
| setTimeout(() => setCopied(false), 2000); |
| } |
| }; |
|
|
| const curvePercent = token.launchpadProgress !== undefined |
| ? Math.min(100, Math.max(0, Math.round(token.launchpadProgress * 100))) |
| : 0; |
|
|
| const dexscreenerUrl = `https://dexscreener.com/bsc/${token.tokenAddress}?embed=1&theme=dark&trades=0&info=0`; |
|
|
| const modalContent = ( |
| <div className="detail-modal-overlay" onClick={onClose} role="dialog" aria-modal="true"> |
| {/* Floating Close Button for immediate exit regardless of scroll position */} |
| <button |
| className="modal-floating-close-btn" |
| onClick={onClose} |
| title="Close (Esc)" |
| aria-label="Close modal" |
| > |
| <X size={18} /> |
| <span>CLOSE [ESC]</span> |
| </button> |
| |
| <div className="detail-modal-card" onClick={e => e.stopPropagation()}> |
| |
| {/* Top Navigation Bar: Guaranteed visible, dedicated Back button */} |
| <div className="modal-top-nav-bar"> |
| <button className="back-to-scanner-btn" onClick={onClose} title="Back to Scanner Feed"> |
| <ArrowLeft size={16} /> |
| <span>← BACK TO SCANNER FEED</span> |
| </button> |
| |
| <div className="top-nav-actions"> |
| <span className="esc-key-hint font-mono">ESC</span> |
| <button className="modal-close-icon" onClick={onClose} title="Close modal (Esc)"> |
| <X size={18} /> |
| </button> |
| </div> |
| </div> |
| |
| {/* Token Identity Banner */} |
| <div className="modal-token-banner"> |
| <div className="banner-left"> |
| <button |
| className="banner-inline-back-btn" |
| onClick={onClose} |
| title="Back to Scanner Feed" |
| > |
| <ArrowLeft size={14} /> |
| <span>BACK</span> |
| </button> |
| <img |
| src={token.realLogo || `https://api.dicebear.com/9.x/shapes/svg?seed=${token.tokenAddress}`} |
| alt={token.tokenSymbol} |
| className="modal-token-logo" |
| onError={e => { e.target.src = `https://api.dicebear.com/9.x/shapes/svg?seed=${token.tokenAddress}`; }} |
| /> |
| |
| <div className="modal-title-box"> |
| <h2 className="modal-token-name"> |
| {token.tokenName} |
| {token.tokenSymbol && ( |
| <span className="token-symbol-badge"> ${token.tokenSymbol}</span> |
| )} |
| </h2> |
| <div className="modal-token-addr"> |
| <span title={token.tokenAddress}> |
| {token.tokenAddress ? `${token.tokenAddress.slice(0, 8)}…${token.tokenAddress.slice(-6)}` : ''} |
| </span> |
| <button className="copy-btn" onClick={copyAddress} title="Copy Address"> |
| {copied ? <Check size={11} color="var(--accent-green)" /> : <Copy size={11} />} |
| </button> |
| <a |
| href={`https://bscscan.com/token/${token.tokenAddress}`} |
| target="_blank" |
| rel="noreferrer" |
| className="addr-link" |
| title="View on BscScan" |
| > |
| <ExternalLink size={11} /> |
| </a> |
| </div> |
| </div> |
| </div> |
| |
| <div className="banner-right"> |
| {isOnCurve ? ( |
| <span className="curve-status-chip on-curve"> |
| 🚀 ON FLAP CURVE ({curvePercent}%) |
| </span> |
| ) : ( |
| <span className="curve-status-chip migrated"> |
| ✅ MIGRATED TO DEX |
| </span> |
| )} |
| |
| <a |
| href={`https://flap.sh/bnb/${token.tokenAddress}`} |
| target="_blank" |
| rel="noreferrer" |
| className="header-trade-cta" |
| > |
| <span>Trade on Flap.sh</span> |
| <ExternalLink size={13} /> |
| </a> |
| </div> |
| </div> |
| |
| {/* Navigation Tabs */} |
| <div className="modal-tab-selector"> |
| <button |
| className={`tab-btn ${activeTab === 'curve' ? 'active' : ''}`} |
| onClick={() => setActiveTab('curve')} |
| > |
| <TrendingUp size={13} style={{ marginRight: 6 }} /> |
| 📈 BONDING CURVE & CHART |
| </button> |
| <button |
| className={`tab-btn ${activeTab === 'audit' ? 'active' : ''}`} |
| onClick={() => setActiveTab('audit')} |
| > |
| <Shield size={13} style={{ marginRight: 6 }} /> |
| 🛡️ SECURITY AUDIT |
| </button> |
| </div> |
| |
| {/* Modal Body */} |
| <div className="modal-body-content"> |
| {activeTab === 'curve' && ( |
| <div className="tab-pane curve-pane"> |
| |
| {/* Bonding Curve Telemetry Banner */} |
| <div className="curve-telemetry-banner"> |
| <div className="curve-banner-header"> |
| <div> |
| <span className="curve-title">FLAP.SH BONDING CURVE TELEMETRY</span> |
| <p className="curve-desc"> |
| {isOnCurve |
| ? 'Token is accumulating liquidity on Flap.sh bonding curve before DEX listing.' |
| : 'Bonding curve 100% completed. Liquidity has been seeded to PancakeSwap DEX.'} |
| </p> |
| </div> |
| <div className="curve-percent-badge font-mono"> |
| {curvePercent}% <span className="curve-percent-sub">TO DEX</span> |
| </div> |
| </div> |
| |
| <div className="curve-progress-bar-bg"> |
| <div |
| className="curve-progress-bar-fill" |
| style={{ width: `${Math.max(4, curvePercent)}%` }} |
| /> |
| </div> |
| |
| {/* Key Metrics Grid */} |
| <div className="curve-stats-grid"> |
| <div className="curve-stat-card"> |
| <span className="stat-label">MARKET CAP</span> |
| <span className="stat-value font-mono text-cyan"> |
| {token.marketCapUsd ? `$${Number(token.marketCapUsd).toLocaleString('en-US', { maximumFractionDigits: 0 })}` : 'N/A'} |
| </span> |
| </div> |
| <div className="curve-stat-card"> |
| <span className="stat-label">CURVE LIQUIDITY</span> |
| <span className="stat-value font-mono text-green"> |
| {token.liquidityUsd ? `$${Number(token.liquidityUsd).toLocaleString('en-US', { maximumFractionDigits: 0 })}` : 'N/A'} |
| </span> |
| </div> |
| <div className="curve-stat-card"> |
| <span className="stat-label">TOP 10 HOLDERS</span> |
| <span className="stat-value font-mono"> |
| {token.top10HolderRate ? `${(Number(token.top10HolderRate) * 100).toFixed(1)}%` : 'N/A'} |
| </span> |
| </div> |
| <div className="curve-stat-card"> |
| <span className="stat-label">DEV HOLDING</span> |
| <span className="stat-value font-mono"> |
| {token.creatorHoldRate !== undefined ? `${(Number(token.creatorHoldRate) * 100).toFixed(2)}%` : '0%'} |
| </span> |
| </div> |
| </div> |
| |
| {/* Primary CTA Button */} |
| <div className="curve-actions-row"> |
| <a |
| href={`https://flap.sh/bnb/${token.tokenAddress}`} |
| target="_blank" |
| rel="noreferrer" |
| className="curve-primary-btn" |
| > |
| 🚀 TRADE ON FLAP.SH OFFICIAL PORTAL ↗ |
| </a> |
| {chartMode === 'curve' ? ( |
| <button |
| className="curve-secondary-btn" |
| onClick={() => setChartMode('dexscreener')} |
| > |
| 📊 View DexScreener Chart |
| </button> |
| ) : ( |
| <button |
| className="curve-secondary-btn" |
| onClick={() => setChartMode('curve')} |
| > |
| 🔄 Back to Curve Telemetry |
| </button> |
| )} |
| </div> |
| </div> |
| |
| {/* Chart embed if user toggles or if migrated */} |
| {chartMode === 'dexscreener' && ( |
| <div className="chart-embed-wrapper"> |
| <iframe |
| src={dexscreenerUrl} |
| title="DexScreener Chart" |
| className="chart-iframe" |
| loading="lazy" |
| /> |
| </div> |
| )} |
| |
| {/* Quick Links Row */} |
| <div className="quick-links-bar"> |
| <span className="quick-links-label">Direct Explorers:</span> |
| <a |
| href={`https://flap.sh/bnb/${token.tokenAddress}`} |
| target="_blank" |
| rel="noreferrer" |
| className="quick-chip" |
| > |
| 🚀 Flap.sh ↗ |
| </a> |
| <a |
| href={`https://dexscreener.com/bsc/${token.tokenAddress}`} |
| target="_blank" |
| rel="noreferrer" |
| className="quick-chip" |
| > |
| 📊 DexScreener ↗ |
| </a> |
| <a |
| href={`https://gmgn.ai/bsc/token/${token.tokenAddress}`} |
| target="_blank" |
| rel="noreferrer" |
| className="quick-chip" |
| > |
| 📈 GMGN.ai ↗ |
| </a> |
| <a |
| href={`https://bscscan.com/token/${token.tokenAddress}`} |
| target="_blank" |
| rel="noreferrer" |
| className="quick-chip" |
| > |
| 🔍 BscScan Token ↗ |
| </a> |
| {token.creator && ( |
| <a |
| href={`https://bscscan.com/address/${token.creator}`} |
| target="_blank" |
| rel="noreferrer" |
| className="quick-chip" |
| > |
| 👨💻 Deployer BscScan ↗ |
| </a> |
| )} |
| </div> |
| |
| </div> |
| )} |
| |
| {activeTab === 'audit' && ( |
| <div className="tab-pane audit-pane"> |
| <div className="audit-header-summary"> |
| <h3 className="audit-summary-title"> |
| <Shield size={18} className="text-cyan" /> |
| AUTOMATED CONTRACT & DEV AUDIT REPORT |
| </h3> |
| <p className="audit-summary-desc"> |
| Real-time algorithmic checks analyzing smart contract bytecode, transaction clustering, dev funding origins, and anti-honeypot safeties. |
| </p> |
| </div> |
| |
| <div className="audit-grid"> |
| {/* 1. Contract Bytecode Audit */} |
| <div className="audit-card"> |
| <div className="audit-card-top"> |
| <span className="audit-card-title">1. BYTECODE & PROXY INTEGRITY</span> |
| <span className={`audit-badge ${token.taxInnovation?.includes('Custom') || token.taxInnovation?.includes('Suspicious') ? 'badge-warn' : 'badge-good'}`}> |
| {token.taxInnovation?.includes('Custom') || token.taxInnovation?.includes('Suspicious') ? '⚠️ SUSPICIOUS' : '✅ VERIFIED'} |
| </span> |
| </div> |
| <div className="audit-card-body"> |
| <div className="audit-row"> |
| <span className="lbl">Architecture:</span> |
| <span className="val text-bright font-bold">{token.taxInnovation || 'Standard Flap Proxy'}</span> |
| </div> |
| <div className="audit-row"> |
| <span className="lbl">Proxy Type:</span> |
| <span className={`val font-bold ${token.taxInnovation?.includes('Custom') ? 'text-red' : 'text-green'}`}> |
| {token.taxInnovation?.includes('Custom') ? 'Non-Standard Minimal Proxy' : 'Official ERC-1167 Flap Implementation'} |
| </span> |
| </div> |
| <div className="audit-row"> |
| <span className="lbl">Honeypot Detected:</span> |
| <span className={`val font-bold ${token.isHoneypot ? 'text-red' : 'text-green'}`}> |
| {token.isHoneypot ? '🚨 YES — High Honeypot Risk' : '✅ NO — Standard Transferability'} |
| </span> |
| </div> |
| </div> |
| </div> |
| |
| {/* 2. Dev Wallet Clustering */} |
| <div className="audit-card"> |
| <div className="audit-card-top"> |
| <span className="audit-card-title">2. DEV ON-CHAIN CLUSTERING</span> |
| <span className={`audit-badge ${(token.pastScamsCount && token.pastScamsCount > 20) ? 'badge-danger' : 'badge-good'}`}> |
| {(token.pastScamsCount && token.pastScamsCount > 20) ? '🚨 HIGH RISK' : '✅ CLEAN'} |
| </span> |
| </div> |
| <div className="audit-card-body"> |
| <div className="audit-row"> |
| <span className="lbl">Deployer Cluster:</span> |
| <span className="val text-bright font-bold">{token.devClusterHistory || 'Private Wallet'}</span> |
| </div> |
| <div className="audit-row"> |
| <span className="lbl">Funding Source:</span> |
| <span className="val text-cyan">{token.funderText || 'Exchange / Private'}</span> |
| </div> |
| <div className="audit-row"> |
| <span className="lbl">Serial Launches:</span> |
| <span className="val font-mono">{token.creatorCreatedCount ? `${token.creatorCreatedCount} previous tokens` : '1st Launch'}</span> |
| </div> |
| </div> |
| </div> |
| |
| {/* 3. Tax & Safeties */} |
| <div className="audit-card"> |
| <div className="audit-card-top"> |
| <span className="audit-card-title">3. TAX & HONEYPOT SAFEGUARD</span> |
| <span className={`audit-badge ${((token.buyTax && token.buyTax > 8) || (token.sellTax && token.sellTax > 8)) ? 'badge-danger' : 'badge-good'}`}> |
| {((token.buyTax && token.buyTax > 8) || (token.sellTax && token.sellTax > 8)) ? '🚨 PREDATORY (>8%)' : '✅ SAFE (≤8%)'} |
| </span> |
| </div> |
| <div className="audit-card-body"> |
| <div className="audit-row"> |
| <span className="lbl">Buy Tax:</span> |
| <span className="val font-mono text-bright">{token.buyTax !== null && token.buyTax !== undefined ? `${token.buyTax}%` : '0%'}</span> |
| </div> |
| <div className="audit-row"> |
| <span className="lbl">Sell Tax:</span> |
| <span className="val font-mono text-bright">{token.sellTax !== null && token.sellTax !== undefined ? `${token.sellTax}%` : '0%'}</span> |
| </div> |
| <div className="audit-row"> |
| <span className="lbl">Dev Token Hold:</span> |
| <span className="val font-mono text-bright">{token.creatorHoldRate ? `${(token.creatorHoldRate * 100).toFixed(2)}%` : '0%'}</span> |
| </div> |
| </div> |
| </div> |
| |
| {/* 4. Social & Phishing Checks */} |
| <div className="audit-card"> |
| <div className="audit-card-top"> |
| <span className="audit-card-title">4. SOCIAL CLONE & PHISHING</span> |
| <span className={`audit-badge ${token.hasSocialClone ? 'badge-danger' : 'badge-good'}`}> |
| {token.hasSocialClone ? '🚨 CLONE DETECTED' : '✅ ORIGINAL'} |
| </span> |
| </div> |
| <div className="audit-card-body"> |
| <div className="audit-row"> |
| <span className="lbl">Social Status:</span> |
| <span className="val text-bright">{token.webStatus || 'No Public Socials'}</span> |
| </div> |
| <div className="audit-row"> |
| <span className="lbl">Telegram:</span> |
| <span className="val">{token.tgUrl ? <a href={token.tgUrl} target="_blank" rel="noreferrer" className="text-cyan">Joined ↗</a> : 'None'}</span> |
| </div> |
| <div className="audit-row"> |
| <span className="lbl">Twitter / X:</span> |
| <span className="val">{token.xUrl ? <a href={token.xUrl} target="_blank" rel="noreferrer" className="text-cyan">Linked ↗</a> : 'None'}</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| )} |
| </div> |
| |
| {/* Modal Bottom Return Bar for Easy Dismissal */} |
| <div className="modal-bottom-return-bar"> |
| <button className="bottom-back-btn" onClick={onClose} title="Return to Live Scanner Feed"> |
| <ArrowLeft size={15} /> |
| <span>← Return to Live Scanner Feed</span> |
| </button> |
| <span className="bottom-esc-hint font-mono">Press ESC or click outside to dismiss</span> |
| </div> |
| |
| </div> |
| </div> |
| ); |
|
|
| return typeof document !== 'undefined' |
| ? createPortal(modalContent, document.body) |
| : modalContent; |
| }; |
|
|
| export default TokenDetailModal; |
|
|
