insightsonindia.net

import { useState, useEffect, useRef } from "react"; const SYMBOLS = [ "BTCUSDT","ETHUSDT","SOLUSDT","BNBUSDT","XRPUSDT", "DOGEUSDT","ADAUSDT","AVAXUSDT","LINKUSDT","DOTUSDT" ]; const streams = SYMBOLS.map(s => `${s.toLowerCase()}@ticker`).join("/"); const WS_URL = `wss://fstream.binance.com/stream?streams=${streams}`; function FlowBar({ buyPct }) { return (

); } function Sparkle({ positive }) { return ( {positive ? "▲" : "▼"} {positive ? "BUY" : "SELL"} ); } export default function SmartMoney() { const [tickers, setTickers] = useState({}); const [status, setStatus] = useState("connecting"); const [filter, setFilter] = useState("ALL"); const [selected, setSelected] = useState(null); const wsRef = useRef(null); const retryRef = useRef(null); useEffect(() => { function connect() { setStatus("connecting"); const ws = new WebSocket(WS_URL); wsRef.current = ws; ws.onopen = () => setStatus("live"); ws.onmessage = (e) => { try { const msg = JSON.parse(e.data); const d = msg.data; if (!d || d.e !== "24hrTicker") return; const pct = parseFloat(d.P); const buyPct = Math.min(Math.max(50 + pct * 2.5, 15), 85); setTickers(prev => ({ ...prev, [d.s]: { symbol: d.s, price: parseFloat(d.c), pct, vol: parseFloat(d.q), buyPct: Math.round(buyPct), signal: buyPct >= 50 ? "B" : "S", high: parseFloat(d.h), low: parseFloat(d.l), ts: Date.now() } })); } catch {} }; ws.onerror = () => setStatus("error"); ws.onclose = () => { setStatus("reconnecting"); retryRef.current = setTimeout(connect, 3000); }; } connect(); return () => { clearTimeout(retryRef.current); wsRef.current?.close(); }; }, []); const list = SYMBOLS .map(s => tickers[s]) .filter(Boolean) .filter(t => filter === "ALL" || (filter === "BUY" && t.signal === "B") || (filter === "SELL" && t.signal === "S")) .sort((a, b) => b.vol - a.vol); const fmtVol = v => v >= 1e9 ? (v/1e9).toFixed(2)+"B" : (v/1e6).toFixed(2)+"M"; const fmtPrice = p => p >= 1000 ? p.toLocaleString(undefined,{maximumFractionDigits:2}) : p >= 1 ? p.toFixed(4) : p.toFixed(6); const statusColors = { live:"#00c853", connecting:"#ffd740", reconnecting:"#ff9800", error:"#ff5252" }; const statusText = { live:"🟢 LIVE", connecting:"🟡 সংযোগ হচ্ছে...", reconnecting:"🟠 পুনরায় সংযোগ...", error:"🔴 সংযোগ ব্যর্থ" }; const sel = selected ? tickers[selected] : null; return (

{/* Header */}

💰 Smart Money

Binance Futures · WebSocket Stream

{status === "live" && (

)} {statusText[status]}

{/* Filter Tabs */}

{[["ALL","⚡","#ffd740"],["BUY","📈","#00c853"],["SELL","📉","#ff5252"]].map(([f,icon,color])=>( ))}

🟢 {Object.values(tickers).filter(t=>t.signal==="B").length} 🔴 {Object.values(tickers).filter(t=>t.signal==="S").length}

{/* Loading State */} {list.length === 0 && (

Binance WebSocket এ সংযোগ হচ্ছে...

প্রথমবার লোড হতে ৩-৫ সেকেন্ড লাগতে পারে

)} {/* Ticker List */}

{list.map(t => (

setSelected(t.symbol === selected ? null : t.symbol)} style={{ background: selected===t.symbol ? "rgba(255,255,255,0.06)" : "rgba(255,255,255,0.025)", border:`1px solid ${selected===t.symbol ? "rgba(255,255,255,0.15)" : "rgba(255,255,255,0.055)"}`, borderRadius:14, padding:"15px 16px", cursor:"pointer", transition:"all 0.2s", position:"relative", overflow:"hidden" }} > {/* Top accent line */}

{t.symbol.replace("USDT","").slice(0,3)}

{t.symbol.replace("USDT","")} /USDT

Dominant Flow

${fmtPrice(t.price)}

= 0} />

{t.signal} {fmtVol(t.vol)} USDT

= 0 ? "#00c853" : "#ff5252", fontSize:12, fontWeight:700 }}> {t.pct >= 0 ? "+" : ""}{t.pct.toFixed(2)}%

{/* Expanded Detail */} {selected === t.symbol && (

{[ { label:"Buy Pressure", value:`${t.buyPct}%`, color:"#00c853" }, { label:"24h High", value:`$${fmtPrice(t.high)}`, color:"#ffd740" }, { label:"24h Low", value:`$${fmtPrice(t.low)}`, color:"#ff9800" }, ].map(item => (

{item.label}

{item.value}

))}

e.stopPropagation()} style={{ display:"block", textAlign:"center", background:"rgba(255,215,64,0.08)", border:"1px solid rgba(255,215,64,0.2)", color:"#ffd740", borderRadius:8, padding:"8px", textDecoration:"none", fontSize:11, fontWeight:600 }}> Binance-এ Trade করুন →

)}

))}

{/* Footer note */} {list.length > 0 && (

⚡ WebSocket stream — ডাটা real-time আসছে • যেকোনো card ক্লিক করলে বিস্তারিত দেখাবে

)}

); }