\n \n \n \n\n",[],[143,185],"b203f3b6-53ae-11f1-83c5-ee650bb23af1","SearchBar.tsx","b203f47e-53ae-11f1-83c5-ee650bb23af1","a3760adc-53ae-11f1-8bd1-ee650bb23af1",11,["D",1779214520114],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useRef, useEffect, useCallback } from \"https://esm.sh/react@18.2.0\";\n\ninterface SearchResult {\n symbol: string;\n name: string;\n type: string;\n exchange: string;\n}\n\nexport function SearchBar({ onSelect }: { onSelect: (symbol: string) => void }) {\n const [query, setQuery] = useState(\"\");\n const [results, setResults] = useState([]);\n const [isOpen, setIsOpen] = useState(false);\n const [loading, setLoading] = useState(false);\n const debounceRef = useRef(null);\n const containerRef = useRef(null);\n\n // Close dropdown on outside click\n useEffect(() => {\n const handler = (e: MouseEvent) => {\n if (containerRef.current && !containerRef.current.contains(e.target as Node)) {\n setIsOpen(false);\n }\n };\n document.addEventListener(\"mousedown\", handler);\n return () => document.removeEventListener(\"mousedown\", handler);\n }, []);\n\n const search = useCallback(async (q: string) => {\n if (q.length < 1) { setResults([]); return; }\n setLoading(true);\n try {\n const resp = await fetch(`/api/search?q=${encodeURIComponent(q)}`);\n const data = await resp.json();\n setResults(data.results || []);\n setIsOpen(true);\n } catch {\n setResults([]);\n } finally {\n setLoading(false);\n }\n }, []);\n\n const handleInput = (e: Event) => {\n const val = (e.target as HTMLInputElement).value;\n setQuery(val);\n if (debounceRef.current) clearTimeout(debounceRef.current);\n debounceRef.current = window.setTimeout(() => search(val), 300);\n };\n\n const handleSelect = (sym: string) => {\n setQuery(sym);\n setIsOpen(false);\n onSelect(sym);\n };\n\n const handleKeyDown = (e: KeyboardEvent) => {\n if (e.key === \"Enter\" && query.trim()) {\n setIsOpen(false);\n onSelect(query.trim().toUpperCase());\n }\n };\n\n const typeEmoji: Record = {\n EQUITY: \"📈\",\n ETF: \"📦\",\n CRYPTOCURRENCY: \"🪙\",\n CURRENCY: \"💱\",\n FUTURES: \"📊\",\n INDEX: \"🏛️\",\n };\n\n return (\n

\n 🔍\n results.length > 0 && setIsOpen(true)}\n placeholder=\"Search symbol (AAPL, BTC-USD, EURUSD=X)\"\n class=\"bg-transparent outline-none text-sm text-white placeholder-gray-500 w-64\"\n />\n {loading && ...}\n

\n\n {isOpen && results.length > 0 && (\n

\n {results.map((r) => (\n handleSelect(r.symbol)}\n >\n {typeEmoji[r.type] || \"📄\"}\n

{r.symbol}

{r.name}

\n {r.exchange}\n \n ))}\n

\n )}\n

\n );\n}\n",[],[143,201,193],"components","c6b94040-53ae-11f1-a85a-ee650bb23af1","Chart.tsx","c6b940ea-53ae-11f1-a85a-ee650bb23af1",12,["D",1779214554856],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect, useRef, useCallback } from \"https://esm.sh/react@18.2.0\";\n\ninterface Candle {\n time: number;\n open: number;\n high: number;\n low: number;\n close: number;\n volume: number;\n}\n\ninterface ChartData {\n symbol: string;\n currency: string;\n exchangeName: string;\n instrumentType: string;\n candles: Candle[];\n}\n\n// Calculate anchored VWAP from a given index\nfunction calcAnchoredVWAP(candles: Candle[], anchorIdx: number) {\n const vwapData: { time: number; value: number }[] = [];\n let cumTPV = 0; // cumulative (typical price * volume)\n let cumVol = 0; // cumulative volume\n\n for (let i = anchorIdx; i < candles.length; i++) {\n const c = candles[i];\n const tp = (c.high + c.low + c.close) / 3;\n cumTPV += tp * c.volume;\n cumVol += c.volume;\n if (cumVol > 0) {\n vwapData.push({ time: c.time, value: Number((cumTPV / cumVol).toFixed(4)) });\n }\n }\n return vwapData;\n}\n\nexport function Chart({ symbol, interval }: { symbol: string; interval: \"5m\" | \"1d\" }) {\n const containerRef = useRef(null);\n const chartRef = useRef(null);\n const candleSeriesRef = useRef(null);\n const volumeSeriesRef = useRef(null);\n const vwapSeriesRef = useRef(null);\n const candlesRef = useRef([]);\n const [anchorTime, setAnchorTime] = useState(null);\n const [status, setStatus] = useState(\"Loading...\");\n const [chartInfo, setChartInfo] = useState<{ symbol: string; currency: string } | null>(null);\n const lwcModuleRef = useRef(null);\n\n const range = interval === \"5m\" ? \"5d\" : \"1y\";\n\n // Load lightweight-charts dynamically\n const getLWC = useCallback(async () => {\n if (lwcModuleRef.current) return lwcModuleRef.current;\n lwcModuleRef.current = await import(\"https://esm.sh/lightweight-charts@4.1.3\");\n return lwcModuleRef.current;\n }, []);\n\n // Initialize chart\n useEffect(() => {\n let disposed = false;\n\n (async () => {\n const lwc = await getLWC();\n if (disposed || !containerRef.current) return;\n\n // Clean up previous chart\n if (chartRef.current) {\n chartRef.current.remove();\n chartRef.current = null;\n }\n\n const chart = lwc.createChart(containerRef.current, {\n layout: {\n background: { color: \"#0a0a1a\" },\n textColor: \"#9ca3af\",\n },\n grid: {\n vertLines: { color: \"#1f2937\" },\n horzLines: { color: \"#1f2937\" },\n },\n crosshair: {\n mode: lwc.CrosshairMode.Normal,\n },\n rightPriceScale: {\n borderColor: \"#374151\",\n },\n timeScale: {\n borderColor: \"#374151\",\n timeVisible: interval === \"5m\",\n secondsVisible: false,\n },\n width: containerRef.current.clientWidth,\n height: containerRef.current.clientHeight,\n });\n\n const candleSeries = chart.addCandlestickSeries({\n upColor: \"#22c55e\",\n downColor: \"#ef4444\",\n borderDownColor: \"#ef4444\",\n borderUpColor: \"#22c55e\",\n wickDownColor: \"#ef4444\",\n wickUpColor: \"#22c55e\",\n });\n\n const volumeSeries = chart.addHistogramSeries({\n color: \"#3b82f6\",\n priceFormat: { type: \"volume\" },\n priceScaleId: \"\",\n });\n\n volumeSeries.priceScale().applyOptions({\n scaleMargins: { top: 0.8, bottom: 0 },\n });\n\n chartRef.current = chart;\n candleSeriesRef.current = candleSeries;\n volumeSeriesRef.current = volumeSeries;\n\n // Handle resize\n const resizeObserver = new ResizeObserver((entries) => {\n if (entries[0] && chartRef.current) {\n const { width, height } = entries[0].contentRect;\n chartRef.current.applyOptions({ width, height });\n }\n });\n resizeObserver.observe(containerRef.current);\n\n // Click handler for anchoring\n chart.subscribeClick((param: any) => {\n if (!param.time) return;\n // Find the candle index by time\n const candles = candlesRef.current;\n const clickedTime = typeof param.time === \"object\"\n ? new Date(param.time.year, param.time.month - 1, param.time.day).getTime() / 1000\n : param.time;\n const idx = candles.findIndex((c) => c.time === clickedTime);\n if (idx >= 0) {\n setAnchorTime(clickedTime);\n drawVWAP(candles, idx);\n }\n });\n\n return () => {\n resizeObserver.disconnect();\n };\n })();\n\n return () => {\n disposed = true;\n if (chartRef.current) {\n chartRef.current.remove();\n chartRef.current = null;\n }\n };\n }, [interval]);\n\n // Draw VWAP line\n const drawVWAP = useCallback(async (candles: Candle[], anchorIdx: number) => {\n const lwc = await getLWC();\n if (!chartRef.current) return;\n\n // Remove old VWAP line\n if (vwapSeriesRef.current) {\n chartRef.current.removeSeries(vwapSeriesRef.current);\n vwapSeriesRef.current = null;\n }\n\n const vwapData = calcAnchoredVWAP(candles, anchorIdx);\n if (vwapData.length === 0) return;\n\n const vwapSeries = chartRef.current.addLineSeries({\n color: \"#f59e0b\",\n lineWidth: 2,\n lineStyle: lwc.LineStyle.Solid,\n title: \"AVWAP\",\n priceLineVisible: true,\n lastValueVisible: true,\n });\n\n vwapSeries.setData(vwapData);\n\n // Add anchor marker\n candleSeriesRef.current?.setMarkers([{\n time: candles[anchorIdx].time,\n position: \"belowBar\",\n color: \"#f59e0b\",\n shape: \"arrowUp\",\n text: \"⚓ Anchor\",\n }]);\n\n vwapSeriesRef.current = vwapSeries;\n }, [getLWC]);\n\n // Fetch data\n useEffect(() => {\n let cancelled = false;\n\n (async () => {\n setStatus(\"Loading...\");\n setAnchorTime(null);\n\n // Remove old vwap and markers\n if (vwapSeriesRef.current && chartRef.current) {\n chartRef.current.removeSeries(vwapSeriesRef.current);\n vwapSeriesRef.current = null;\n }\n if (candleSeriesRef.current) {\n candleSeriesRef.current.setMarkers([]);\n }\n\n try {\n const resp = await fetch(`/api/chart?symbol=${encodeURIComponent(symbol)}&interval=${interval}&range=${range}`);\n const data: ChartData = await resp.json();\n if (cancelled) return;\n\n if ((data as any).error) {\n setStatus((data as any).error);\n return;\n }\n\n const candles = data.candles;\n candlesRef.current = candles;\n\n if (candleSeriesRef.current) {\n candleSeriesRef.current.setData(\n candles.map((c) => ({ time: c.time, open: c.open, high: c.high, low: c.low, close: c.close })),\n );\n }\n\n if (volumeSeriesRef.current) {\n volumeSeriesRef.current.setData(\n candles.map((c) => ({\n time: c.time,\n value: c.volume,\n color: c.close >= c.open ? \"rgba(34,197,94,0.3)\" : \"rgba(239,68,68,0.3)\",\n })),\n );\n }\n\n if (chartRef.current) {\n chartRef.current.timeScale().fitContent();\n }\n\n setChartInfo({ symbol: data.symbol, currency: data.currency });\n setStatus(\"\");\n } catch (err) {\n if (!cancelled) setStatus(\"Failed to load data\");\n }\n })();\n\n return () => { cancelled = true; };\n }, [symbol, interval, range]);\n\n // Clear anchor\n const clearAnchor = () => {\n setAnchorTime(null);\n if (vwapSeriesRef.current && chartRef.current) {\n chartRef.current.removeSeries(vwapSeriesRef.current);\n vwapSeriesRef.current = null;\n }\n if (candleSeriesRef.current) {\n candleSeriesRef.current.setMarkers([]);\n }\n };\n\n return (\n

\n {/* Status bar */}\n {(status || chartInfo || anchorTime) && (\n

\n {status && {status}}\n {chartInfo && !status && (\n \n {chartInfo.symbol} · {chartInfo.currency} · {interval === \"5m\" ? \"5 min\" : \"Daily\"}\n \n )}\n {anchorTime && (\n \n ⚓ Clear Anchor\n \n )}\n

\n )}\n

\n );\n}\n",[],[143,201,203],"a95f6308-53ae-11f1-8bd1-ee650bb23af1","App.tsx","a95f6434-53ae-11f1-8bd1-ee650bb23af1",10,["D",1779214505606],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useCallback } from \"https://esm.sh/react@18.2.0\";\nimport { SearchBar } from \"./SearchBar.tsx\";\nimport { Chart } from \"./Chart.tsx\";\n\nexport function App() {\n const [symbol, setSymbol] = useState(\"AAPL\");\n const [interval, setInterval_] = useState<\"5m\" | \"1d\">(\"1d\");\n\n const handleSymbolSelect = useCallback((sym: string) => {\n setSymbol(sym);\n }, []);\n\n return (\n

\n {/* Header */}\n

\n ⚓\n Anchored VWAP\n

\n\n \n\n {/* Interval Toggle */}\n

\n setInterval_(\"5m\")}\n >\n 5 min\n \n setInterval_(\"1d\")}\n >\n Daily\n \n

\n\n

\n Click any candle to anchor VWAP\n view source\n

\n\n {/* Chart */}\n

\n \n

\n );\n}\n",[],[143,201,211],"a3760a1e-53ae-11f1-8bd1-ee650bb23af1",9,["D",1779214495694],[161,162,163],[143,201],["D",1779214482084],[160,164,165],[143],["D",1779214164558],["D",1789501878689],{"_11":12,"_99":95},{"_11":12,"_93":12,"_94":95,"_31":50,"_96":97,"_98":30},{"_82":83,"_13":16,"_39":84,"_85":40,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":14,"_92":12},"ctx",{"_75":-5,"_117":264,"_265":266,"_267":268,"_269":30,"_270":30,"_271":30,"_272":24,"_273":-5,"_274":-7,"_275":-7,"_276":26,"_277":30,"_278":30,"_279":-5,"_280":30,"_281":30,"_282":30,"_283":-5},"ENV",{"_235":236,"_237":238,"_239":16,"_240":241,"_242":243,"_244":245,"_246":247,"_248":249,"_250":251,"_252":253,"_254":255,"_256":257,"_258":259,"_260":261,"_262":263},"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 · untitled-folder-9181