"use client"; import React, { useState, useEffect, useRef } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { Activity, ArrowUpRight, ArrowDownRight, Wifi, Server, Zap } from "lucide-react"; // --- Types & Initial Data --- type Asset = { id: string; symbol: string; name: string; price: number; change: number; volume: string; trend: "up" | "down" | "neutral"; timestamp: number; }; const INITIAL_ASSETS: Asset[] = [ { id: "IDX-01", symbol: "BTC/USD", name: "Bitcoin", price: 64230.50, change: 2.45, volume: "1.2B", trend: "neutral", timestamp: Date.now() }, { id: "IDX-02", symbol: "ETH/USD", name: "Ethereum", price: 3450.75, change: 1.20, volume: "840M", trend: "neutral", timestamp: Date.now() }, { id: "IDX-03", symbol: "SOL/USD", name: "Solana", price: 145.20, change: -0.85, volume: "420M", trend: "neutral", timestamp: Date.now() }, { id: "IDX-04", symbol: "AVAX/USD", name: "Avalanche", price: 42.10, change: 5.60, volume: "180M", trend: "neutral", timestamp: Date.now() }, { id: "IDX-05", symbol: "LINK/USD", name: "Chainlink", price: 18.90, change: -2.10, volume: "95M", trend: "neutral", timestamp: Date.now() }, { id: "IDX-06", symbol: "DOT/USD", name: "Polkadot", price: 8.45, change: 0.50, volume: "65M", trend: "neutral", timestamp: Date.now() }, ]; // --- Subcomponent: Live Cell --- // Encapsulates the flashing animation logic when the value prop changes const LivePriceCell = ({ price, trend, timestamp }: { price: number, trend: "up" | "down" | "neutral", timestamp: number }) => { const [isFlashing, setIsFlashing] = useState(false); const prevTimestamp = useRef(timestamp); useEffect(() => { if (timestamp !== prevTimestamp.current) { setIsFlashing(true); prevTimestamp.current = timestamp; const timer = setTimeout(() => setIsFlashing(false), 800); return () => clearTimeout(timer); } }, [timestamp]); const flashColor = trend === "up" ? "bg-emerald-500/20 text-emerald-600 dark:text-emerald-400" : trend === "down" ? "bg-rose-500/20 text-rose-600 dark:text-rose-400" : "bg-transparent text-slate-900 dark:text-white"; return ( ${price.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })} {isFlashing && ( )} ); }; export default function RealTimeSyncIndicator() { const [assets, setAssets] = useState(INITIAL_ASSETS); const [connectionStatus, setConnectionStatus] = useState<"connecting" | "live" | "interrupted">("live"); // --- WebSocket Data Simulation --- useEffect(() => { const interval = setInterval(() => { setAssets((prev) => prev.map((asset) => { // Randomly decide to update this asset (30% chance per tick) if (Math.random() > 0.7) { const volatility = asset.price * 0.002; // 0.2% max movement per tick const changeAmt = (Math.random() * volatility * 2) - volatility; const newPrice = Math.max(0, asset.price + changeAmt); const trend = changeAmt > 0 ? "up" : "down"; return { ...asset, price: newPrice, change: asset.change + (changeAmt / asset.price * 100), trend, timestamp: Date.now(), }; } return asset; }) ); }, 1500); // Trigger updates every 1.5 seconds return () => clearInterval(interval); }, []); return (

{/* Header & Status */}

Market Data Stream

High-frequency trading terminal

WSS Latency 12ms

Live Sync

{/* Data Table */}

{/* Subtle moving scanline effect for pro terminal feel */}

{assets.map((asset) => ( {/* Asset Info */} {/* Live Price Cell (Contains internal animation logic) */} {/* 24h Change */} {/* Volume */} {/* Line Status */} ))}

Asset Pair	Last Price	24h Change	24h Vol	Connection
{asset.symbol.split('/')[0].charAt(0)} {asset.symbol} {asset.name}		= 0 ? "text-emerald-500" : "text-rose-500"}`}> {asset.change >= 0 ? : } {Math.abs(asset.change).toFixed(2)}%	{asset.volume}

); }