\n \n\n\n",[],[252,254],"28ec6afe-5458-11f1-b5cf-ee650bb23af1","app-loader.js","28ec6ba8-5458-11f1-b5cf-ee650bb23af1",18,["D",1779287304549],"import { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { createElement } from \"https://esm.sh/react@18.2.0\";\n\n// Load the app & styles from esm.town (handles TSX transpilation)\nconst [{ default: App }, { CSS }] = await Promise.all([\n import(\"https://esm.town/v/minhheoaaa/trading-signals/frontend/App.tsx\"),\n import(\"https://esm.town/v/minhheoaaa/trading-signals/frontend/styles.ts\"),\n]);\n\n// Inject styles\nconst style = document.createElement(\"style\");\nstyle.textContent = CSS;\ndocument.head.appendChild(style);\n\n// Mount React app\nconst root = createRoot(document.getElementById(\"root\"));\nroot.render(createElement(App));\n",[],[252,262],"1efdb4f8-5458-11f1-bb6e-ee650bb23af1","App.tsx","a14a4c16-5456-11f1-b79f-ee650bb23af1",16,["D",1779287287888],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect, useCallback, useRef } from \"https://esm.sh/react@18.2.0\";\n\ninterface SignalData {\n symbol: string;\n timeframe: string;\n candleCount: number;\n lastPrice: number | null;\n priceChange: number;\n signals: {\n type: \"BUY\" | \"SELL\" | \"NEUTRAL\";\n strength: number;\n confidence: number;\n reasons: string[];\n indicators: Record;\n };\n chart: {\n timestamp: number[];\n open: number[];\n high: number[];\n low: number[];\n close: number[];\n volume: number[];\n };\n}\n\nconst POPULAR = [\n { symbol: \"BINANCE:BTCUSDT\", name: \"Bitcoin\", icon: \"₿\", cat: \"crypto\" },\n { symbol: \"BINANCE:ETHUSDT\", name: \"Ethereum\", icon: \"Ξ\", cat: \"crypto\" },\n { symbol: \"BINANCE:SOLUSDT\", name: \"Solana\", icon: \"◎\", cat: \"crypto\" },\n { symbol: \"BINANCE:XRPUSDT\", name: \"XRP\", icon: \"✕\", cat: \"crypto\" },\n { symbol: \"BINANCE:BNBUSDT\", name: \"BNB\", icon: \"⬡\", cat: \"crypto\" },\n { symbol: \"BINANCE:DOGEUSDT\", name: \"DOGE\", icon: \"🐕\", cat: \"crypto\" },\n { symbol: \"BINANCE:PEPEUSDT\", name: \"PEPE\", icon: \"🐸\", cat: \"crypto\" },\n { symbol: \"BINANCE:SUIUSDT\", name: \"SUI\", icon: \"💧\", cat: \"crypto\" },\n { symbol: \"NASDAQ:AAPL\", name: \"Apple\", icon: \"🍎\", cat: \"stock\" },\n { symbol: \"NASDAQ:TSLA\", name: \"Tesla\", icon: \"⚡\", cat: \"stock\" },\n { symbol: \"NASDAQ:NVDA\", name: \"NVIDIA\", icon: \"🟢\", cat: \"stock\" },\n { symbol: \"NASDAQ:MSFT\", name: \"Microsoft\", icon: \"🪟\", cat: \"stock\" },\n { symbol: \"NASDAQ:GOOGL\", name: \"Google\", icon: \"🔍\", cat: \"stock\" },\n { symbol: \"NASDAQ:AMZN\", name: \"Amazon\", icon: \"📦\", cat: \"stock\" },\n { symbol: \"NASDAQ:META\", name: \"Meta\", icon: \"👁️\", cat: \"stock\" },\n { symbol: \"NYSE:AMD\", name: \"AMD\", icon: \"🔴\", cat: \"stock\" },\n { symbol: \"TVC:GOLD\", name: \"Vàng\", icon: \"🥇\", cat: \"commodity\" },\n { symbol: \"TVC:SILVER\", name: \"Bạc\", icon: \"🥈\", cat: \"commodity\" },\n { symbol: \"NYMEX:CL1!\", name: \"Dầu thô\", icon: \"🛢️\", cat: \"commodity\" },\n { symbol: \"NYMEX:NG1!\", name: \"Khí gas\", icon: \"🔥\", cat: \"commodity\" },\n { symbol: \"FX:EURUSD\", name: \"EUR/USD\", icon: \"€\", cat: \"forex\" },\n { symbol: \"FX:GBPUSD\", name: \"GBP/USD\", icon: \"£\", cat: \"forex\" },\n { symbol: \"FX:USDJPY\", name: \"USD/JPY\", icon: \"¥\", cat: \"forex\" },\n];\n\nconst TIMEFRAMES = [\n { key: \"1\", label: \"1m\" },\n { key: \"5\", label: \"5m\" },\n { key: \"15\", label: \"15m\" },\n { key: \"60\", label: \"1H\" },\n { key: \"1D\", label: \"1D\" },\n { key: \"1W\", label: \"1W\" },\n { key: \"1M\", label: \"1M\" },\n];\n\nconst CATEGORIES = [\n { key: \"all\", label: \"Tất cả\", icon: \"🌐\" },\n { key: \"crypto\", label: \"Crypto\", icon: \"₿\" },\n { key: \"stock\", label: \"Cổ phiếu\", icon: \"📈\" },\n { key: \"commodity\", label: \"Hàng hóa\", icon: \"🥇\" },\n { key: \"forex\", label: \"Forex\", icon: \"💱\" },\n];\n\nexport default function App() {\n const [symbol, setSymbol] = useState(\"BINANCE:BTCUSDT\");\n const [timeframe, setTimeframe] = useState(\"1D\");\n const [data, setData] = useState(null);\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(\"\");\n const [query, setQuery] = useState(\"\");\n const [searchResults, setSearchResults] = useState([]);\n const [showSearch, setShowSearch] = useState(false);\n const [category, setCategory] = useState(\"all\");\n const [watchlist, setWatchlist] = useState(() => {\n try { return JSON.parse(localStorage.getItem(\"wl\") || \"[]\"); }\n catch { return []; }\n });\n const [now, setNow] = useState(Date.now());\n const searchRef = useRef(null);\n\n // Clock\n useEffect(() => {\n const t = setInterval(() => setNow(Date.now()), 1000);\n return () => clearInterval(t);\n }, []);\n\n // Save watchlist\n useEffect(() => { localStorage.setItem(\"wl\", JSON.stringify(watchlist)); }, [watchlist]);\n\n // Search\n useEffect(() => {\n if (query.length < 2) { setSearchResults([]); return; }\n const t = setTimeout(async () => {\n try {\n const r = await fetch(`/api/search?q=${encodeURIComponent(query)}`);\n const d = await r.json();\n setSearchResults(d?.quotes?.slice(0, 8) || []);\n } catch { setSearchResults([]); }\n }, 250);\n return () => clearTimeout(t);\n }, [query]);\n\n // Click outside\n useEffect(() => {\n const h = (e: MouseEvent) => {\n if (searchRef.current && !searchRef.current.contains(e.target as Node)) setShowSearch(false);\n };\n document.addEventListener(\"mousedown\", h);\n return () => document.removeEventListener(\"mousedown\", h);\n }, []);\n\n // Fetch data\n const load = useCallback(async () => {\n setLoading(true);\n setError(\"\");\n try {\n const r = await fetch(`/api/signals/${symbol}?tf=${timeframe}`);\n const d = await r.json();\n if (d.error) throw new Error(d.error);\n setData(d);\n } catch (e: any) {\n setError(e.message);\n } finally {\n setLoading(false);\n }\n }, [symbol, timeframe]);\n\n useEffect(() => {\n load();\n const iv = setInterval(load, 45_000);\n return () => clearInterval(iv);\n }, [load]);\n\n const pick = (s: string) => { setSymbol(s); setShowSearch(false); setQuery(\"\"); };\n const inWl = (s: string) => watchlist.includes(s);\n const toggleWl = (s: string, e?: React.MouseEvent) => {\n e?.stopPropagation();\n setWatchlist(p => inWl(s) ? p.filter(x => x !== s) : [...p, s]);\n };\n\n const filtered = POPULAR.filter(p => category === \"all\" || p.cat === category);\n const sig = data?.signals;\n const sigColor = !sig ? \"#666\" : sig.type === \"BUY\" ? \"#00e676\" : sig.type === \"SELL\" ? \"#ff1744\" : \"#ffab00\";\n const priceFmt = (n: number | null | undefined) => {\n if (n == null) return \"—\";\n if (n >= 1000) return n.toLocaleString(\"en-US\", { minimumFractionDigits: 2, maximumFractionDigits: 2 });\n if (n >= 1) return n.toFixed(2);\n return n.toFixed(6);\n };\n\n return (\n

\n {/* TOP BAR */}\n

\n 📊\n TradingSignals\n LIVE\n

\n 🔍\n setShowSearch(true)}\n onChange={e => setQuery(e.target.value)}\n />\n

\n {showSearch && query.length >= 2 && (\n

\n {searchResults.length === 0\n ?

Không tìm thấy

\n : searchResults.map((r: any, i: number) => (\n

pick(r.symbol || `${r.exchDisp}:${r.symbol}`)}>\n

\n {r.symbol}\n {r.shortname || r.longname}\n

\n {r.typeDisp || r.quoteType}\n

\n ))}\n

\n )}\n

\n {new Date(now).toLocaleTimeString(\"vi-VN\")} UTC+7\n {\"\"}\n

\n\n

\n {/* SIDEBAR */}\n

\n {/* Category tabs */}\n

\n {CATEGORIES.map(c => (\n \n ))}\n

\n\n {/* Watchlist */}\n {watchlist.length > 0 && (\n

⭐ Watchlist

\n {watchlist.map(s => (\n

pick(s)}>\n {s.split(\":\")[1]}\n \n

\n ))}\n

\n )}\n\n {/* Market list */}\n

\n {CATEGORIES.find(c => c.key === category)?.icon}{\" \"}\n {CATEGORIES.find(c => c.key === category)?.label}\n

\n {filtered.map(p => (\n

pick(p.symbol)}>\n {p.icon}\n

\n {p.symbol.split(\":\")[1]}\n {p.name}\n

\n \n

\n ))}\n

\n\n {/* MAIN */}\n

\n {/* Symbol header */}\n

{symbol}

\n \n {data && (\n

\n {priceFmt(data.lastPrice)}\n = 0 ? \"up\" : \"down\"}`}>\n {data.priceChange >= 0 ? \"▲\" : \"▼\"} {Math.abs(data.priceChange).toFixed(2)}%\n \n

\n )}\n

\n {TIMEFRAMES.map(tf => (\n \n ))}\n \n

\n\n {/* Loading bar */}\n {loading &&

}\n {error &&

⚠️ {error}

}\n\n {/* CHART */}\n

\n {data?.chart ? : (\n

{loading ? \"Đang tải...\" : \"Chọn mã để xem biểu đồ\"}

\n )}\n

\n\n {/* SIGNAL DASHBOARD */}\n {sig && (\n

\n {/* Hero signal */}\n

\n {sig.type === \"BUY\" ? \"🟢 MUA MẠNH\" : sig.type === \"SELL\" ? \"🔴 BÁN MẠNH\" : \"🟡 CHỜ ĐỢI\"}\n

\n \n \n

\n {sig.strength}%\n

Xác suất {sig.type === \"BUY\" ? \"tăng\" : sig.type === \"SELL\" ? \"giảm\" : \"đi ngang\"}

\n\n {/* Indicator cards */}\n

\n 70 ? \"Quá mua\" : \"Trung tính\"}\n color={Number(sig.indicators.rsi) < 30 ? \"#00e676\" : Number(sig.indicators.rsi) > 70 ? \"#ff1744\" : \"#9e9e9e\"} />\n \n \n \n \n \n

\n\n {/* Reasons */}\n

📋 Phân tích chi tiết ({data?.candleCount} nến)

\n {sig.reasons.map((r, i) =>

→ {r}

)}\n

\n\n

\n ⚠️ Tín hiệu dựa trên phân tích kỹ thuật tự động. KHÔNG phải lời khuyên đầu tư. Hãy luôn tự nghiên cứu (DYOR).\n

\n )}\n

\n );\n}\n\nfunction Meter({ label, value, color }: { label: string; value: number; color: string }) {\n return (\n

\n {label}\n {value}%\n

\n );\n}\n\nfunction IndCard({ label, value, hint, color }: { label: string; value: string; hint?: string; color: string }) {\n return (\n

\n {label}\n {value}\n {hint && {hint}}\n

\n );\n}\n\nfunction CandleChart({ chart }: { chart: SignalData[\"chart\"] }) {\n const { timestamp, open, high, low, close, volume } = chart;\n // Filter valid candles\n const indices: number[] = [];\n for (let i = 0; i < timestamp.length; i++) {\n if (open[i] != null && close[i] != null && open[i] > 0) indices.push(i);\n }\n if (indices.length < 2) return

Không đủ dữ liệu biểu đồ

;\n\n const W = 960, H = 400, PAD = { t: 15, r: 70, b: 40, l: 10 };\n const cW = W - PAD.l - PAD.r;\n const cH = H - PAD.t - PAD.b;\n const volH = 60; // volume section height at bottom\n\n const prices = indices.flatMap(i => [high[i], low[i]]);\n const minP = Math.min(...prices);\n const maxP = Math.max(...prices);\n const pRange = maxP - minP || 1;\n const maxVol = Math.max(...indices.map(i => volume[i] || 0)) || 1;\n\n const toY = (p: number) => PAD.t + (cH - volH) * (1 - (p - minP) / pRange);\n const gap = cW / indices.length;\n const candleW = Math.max(1.5, Math.min(10, gap - 1.5));\n\n // SMA20 line\n const sma20: (number | null)[] = indices.map((_, j) => {\n if (j < 19) return null;\n let sum = 0;\n for (let k = j - 19; k <= j; k++) sum += close[indices[k]];\n return sum / 20;\n });\n\n const smaPath = sma20.map((v, j) => {\n if (v === null) return \"\";\n const x = PAD.l + j * gap + gap / 2;\n const y = toY(v);\n return (j === 0 || sma20[j - 1] === null) ? `M${x},${y}` : `L${x},${y}`;\n }).join(\"\");\n\n // Price grid\n const gridSteps = 6;\n const gridLines = Array.from({ length: gridSteps + 1 }, (_, i) => {\n const p = minP + (pRange / gridSteps) * i;\n return { p, y: toY(p) };\n });\n\n const lastClose = close[indices[indices.length - 1]];\n const lastY = toY(lastClose);\n\n return (\n \n );\n}\n",[],[252,270],"a14aae4a-5456-11f1-b79f-ee650bb23af1",4,["D",1779286647500],[220,221,222,223],[252],["D",1779286565955],[],[18,83],["D",1779287129285],[],[18,92],["D",1779287116688],[],[18,68],["D",1779286533919],[216,217,218],[18],["D",1779286509590],{"_11":12,"_161":74},{"_11":12,"_156":157,"_73":74,"_31":72,"_158":159,"_160":30},{"_43":147,"_13":16,"_37":40,"_148":112,"_149":-5,"_150":-5,"_151":-5,"_152":-5,"_153":-5,"_154":14,"_155":12},"ctx",{"_56":-5,"_180":331,"_332":333,"_334":335,"_336":30,"_337":30,"_338":30,"_339":24,"_340":-5,"_341":-7,"_342":-7,"_343":26,"_344":30,"_345":30,"_346":-5,"_347":30,"_348":30,"_349":30,"_350":-5},"ENV",{"_302":303,"_304":305,"_306":16,"_307":308,"_309":310,"_311":312,"_313":314,"_315":316,"_317":318,"_319":320,"_321":322,"_323":324,"_325":326,"_327":328,"_329":330},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History · backend