import React, { useState, useEffect, useRef } from 'react'; import Header from './components/Header'; import { Container } from "@/components/ui/container"; import { Card } from "@/components/ui/card"; import { Badge } from "@/components/ui/badge"; import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"; import { Button } from "@/components/ui/button"; import { TrendingUp, Plus, ArrowUpRight, ArrowDownRight, RefreshCw, ExternalLink, Search, Filter, LayoutGrid, List } from "lucide-react"; import { motion, AnimatePresence } from "motion/react"; interface TradeEvent { signature: string; mint: string; traderPublicKey: string; txType: 'buy' | 'sell'; vTokensInBondingCurve: number; vSolInBondingCurve: number; marketCapSol: number; uiAmount: number; name?: string; symbol?: string; timestamp: number; } interface NewTokenEvent { signature: string; mint: string; traderPublicKey: string; txType: 'create'; name: string; symbol: string; uri: string; timestamp: number; } export default function App() { const [status, setStatus] = useState<'connected' | 'connecting' | 'disconnected'>('connecting'); const [trades, setTrades] = useState([]); const [tokens, setTokens] = useState([]); const [view, setView] = useState<'list' | 'grid'>('list'); const ws = useRef(null); useEffect(() => { const connect = () => { ws.current = new WebSocket('wss://pumpportal.fun/api/data'); ws.current.onopen = () => { console.log('Connected to PumpPortal'); setStatus('connected'); // Subscribe to events ws.current?.send(JSON.stringify({ method: "subscribeNewToken" })); ws.current?.send(JSON.stringify({ method: "subscribeMigration" })); }; ws.current.onmessage = (event) => { const data = JSON.parse(event.data); if (data.txType === 'create') { setTokens(prev => [ { ...data, timestamp: Date.now() }, ...prev ].slice(0, 50)); } else if (data.txType === 'buy' || data.txType === 'sell') { setTrades(prev => [ { ...data, timestamp: Date.now() }, ...prev ].slice(0, 50)); } }; ws.current.onclose = () => { setStatus('disconnected'); setTimeout(connect, 3000); // Reconnect logic }; }; connect(); return () => ws.current?.close(); }, []); return (

{/* Stats Bar */}

{/* Main Content Area */}

ALL STREAMS NEW TOKENS TRADES

{tokens.map((token) => ( ))}

{trades.length === 0 ? ( ) : ( trades.map((trade) => ( )) )}

Token	Type	Amount	Mkt Cap	Time
Waiting for live trade data...
{trade.symbol \|\| '---'}	{trade.txType.toUpperCase()}	{(trade.uiAmount / 1e6).toFixed(2)}M	{(trade.marketCapSol).toFixed(2)} SOL	Just now

{/* Sidebar Controls */}

Filters

Min Liquidity

Max Dev Holding

Trending Now

{[1, 2, 3].map((i) => (

{i === 1 ? '🔥' : i === 2 ? '🚀' : '💎'}

PEPE{i}000

$242k Vol

))}

); } function TokenCard({ token, compact = false }: { token: NewTokenEvent, compact?: boolean }) { return (

{token.name}

NEW

{token.symbol} {token.mint.slice(0, 4)}...{token.mint.slice(-4)}

{!compact && (

Creator {token.traderPublicKey.slice(0, 6)}

Created Just now

)}

); } function StatsCard({ label, value, trend, isPrimary = false }: { label: string, value: string, trend: string, isPrimary?: boolean }) { return (

{label}

{value}

{trend}

); }

Real-Time Trading Dashboard