"use client"; import React, { useState, useMemo, useRef, useEffect } from "react"; import { Activity, Fingerprint, Zap, ArrowRightLeft } from "lucide-react"; // --- High-Volume Data Generation (10,000 items) --- const TOTAL_ROWS = 10000; const ROW_HEIGHT = 48; // Slightly taller for better touch targets on mobile const generateMassiveData = () => { const assets = ["BTC-USD", "ETH-USD", "SOL-USD", "AVAX-USD", "DOT-USD", "LINK-USD"]; const networks = ["Lightning", "ERC-20", "Solana", "Avalanche", "Polkadot"]; return Array.from({ length: TOTAL_ROWS }, (_, i) => { const isBuy = Math.random() > 0.5; const basePrice = Math.random() * 50000 + 10; return { index: i, txHash: `0x${Math.random().toString(16).slice(2, 10)}...${Math.random().toString(16).slice(2, 6)}`, asset: assets[Math.floor(Math.random() * assets.length)], type: isBuy ? "LONG" : "SHORT", amount: (Math.random() * 10).toFixed(4), price: basePrice.toLocaleString('en-US', { style: 'currency', currency: 'USD' }), network: networks[Math.floor(Math.random() * networks.length)], timestamp: new Date(Date.now() - i * 15000).toISOString().split('T')[1].slice(0, -1) + 'Z', }; }); }; const massiveDataset = generateMassiveData(); export default function VirtualScrollLargeData() { const containerRef = useRef(null); const [scrollTop, setScrollTop] = useState(0); const [viewportHeight, setViewportHeight] = useState(600); // Measure viewport on mount and resize useEffect(() => { if (containerRef.current) { setViewportHeight(containerRef.current.clientHeight); } const handleResize = () => { if (containerRef.current) { setViewportHeight(containerRef.current.clientHeight); } }; window.addEventListener("resize", handleResize); return () => window.removeEventListener("resize", handleResize); }, []); const handleScroll = (e: React.UIEvent) => { // Capture the value synchronously to avoid React synthetic event nullification inside async RAF const currentScrollTop = e.currentTarget.scrollTop; window.requestAnimationFrame(() => { setScrollTop(currentScrollTop); }); }; // Virtualization Math const overscan = 5; const startIndex = Math.max(0, Math.floor(scrollTop / ROW_HEIGHT) - overscan); const endIndex = Math.min( TOTAL_ROWS, Math.ceil((scrollTop + viewportHeight) / ROW_HEIGHT) + overscan ); const visibleRows = useMemo(() => { return massiveDataset.slice(startIndex, endIndex); }, [startIndex, endIndex]); const totalHeight = TOTAL_ROWS * ROW_HEIGHT; const offsetY = startIndex * ROW_HEIGHT; return (

{/* Aggressive, Tech-Heavy Header */}

Global Transaction Ledger

Real-time virtualized view. Rendering {TOTAL_ROWS.toLocaleString()} nodes seamlessly.

Status Syncing

Latency 12ms

{/* The Virtualized Table */} {/* Outer wrapper for borders and background */}

{/* Horizontal scroll wrapper for mobile responsiveness */}

{/* Static Header */}

IDX

Hash

Pair

Type

Size

Price

Timestamp

{/* Scrollable Viewport (Vertical) */}

{/* Massive inner container to force the scrollbar to the true data height */}

{/* Only the visible items are rendered inside this absolute wrapper, pushed down by offsetY */}

{visibleRows.map((row) => { const isLong = row.type === "LONG"; return (

{/* Index */}

{(row.index + 1).toString().padStart(5, '0')}

{/* Hash */}

{row.txHash}

{/* Asset Pair */}

{row.asset}

{/* Type Badge */}

{row.type}

{/* Size */}

{row.amount}

{/* Price */}

{row.price}

{/* Timestamp */}

{row.timestamp}

); })}

{/* Footer Metrics */}

Showing {startIndex + 1} - {Math.min(endIndex, TOTAL_ROWS)} End-to-End Encryption

System Load: Healthy

{/* Embedded Styles for custom scrollbar */}