\n \n \n \n\n",[18,67],"a3760a1e-53ae-11f1-8bd1-ee650bb23af1",["D",1779214495694],[18,91],"pulls","branches",1,"forks","envVars",{"_197":26,"_199":26},"connections",{"_197":26,"_198":26},"count","unfilledCount","emptyCount",{"_35":167,"_13":18,"_65":93,"_45":-5,"_37":38,"_170":171,"_178":24,"_39":258,"_41":26,"_68":92,"_168":-5,"_69":30,"_172":-5,"_215":259,"_17":260},{"_35":186,"_13":91,"_65":90,"_45":93,"_37":38,"_170":85,"_178":24,"_39":255,"_41":26,"_68":92,"_168":-5,"_69":30,"_172":-5,"_215":256,"_17":257},{"_35":247,"_13":248,"_65":249,"_45":90,"_37":38,"_170":250,"_178":24,"_39":251,"_41":26,"_68":82,"_168":252,"_69":30,"_172":-5,"_215":253,"_17":254},{"_35":239,"_13":240,"_65":241,"_45":90,"_37":38,"_170":242,"_178":24,"_39":243,"_41":26,"_68":82,"_168":244,"_69":30,"_172":-5,"_215":245,"_17":246},{"_35":231,"_13":232,"_65":233,"_45":90,"_37":38,"_170":234,"_178":24,"_39":235,"_41":26,"_68":82,"_168":236,"_69":30,"_172":-5,"_215":237,"_17":238},{"_35":182,"_13":67,"_65":66,"_45":93,"_37":38,"_170":42,"_178":24,"_39":228,"_41":26,"_68":21,"_168":184,"_69":30,"_172":-5,"_215":229,"_17":230},{"_35":177,"_13":81,"_65":80,"_45":93,"_37":38,"_170":75,"_178":24,"_39":225,"_41":26,"_68":82,"_168":180,"_69":30,"_172":-5,"_215":226,"_17":227},{"_35":218,"_13":219,"_65":220,"_45":-5,"_37":38,"_170":132,"_178":24,"_39":221,"_41":26,"_68":21,"_168":222,"_69":30,"_172":-5,"_215":223,"_17":224},{"_35":209,"_13":210,"_65":105,"_45":-5,"_37":38,"_170":211,"_178":24,"_39":212,"_41":26,"_68":213,"_168":214,"_69":30,"_172":-5,"_215":216,"_17":217},"99b388ee-53ae-11f1-83c5-ee650bb23af1","index.ts",5,["D",1779214479321],"http","import { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\n// Serve frontend\napp.get(\"/\", () => serveFile(\"/frontend/index.html\"));\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path));\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// ─── Yahoo Finance API ───────────────────────────────────────────────\n\napp.get(\"/api/chart\", async (c) => {\n const symbol = c.req.query(\"symbol\") || \"AAPL\";\n const interval = c.req.query(\"interval\") || \"1d\"; // \"5m\" or \"1d\"\n const range = c.req.query(\"range\") || \"6mo\"; // depends on interval\n\n // Yahoo Finance v8 chart API\n const url = `https://query1.finance.yahoo.com/v8/finance/chart/${encodeURIComponent(symbol)}`\n + `?interval=${interval}&range=${range}&includePrePost=false`;\n\n const resp = await fetch(url, {\n headers: {\n \"User-Agent\": \"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36\",\n },\n });\n\n if (!resp.ok) {\n return c.json({ error: `Yahoo Finance error: ${resp.status}` }, 400);\n }\n\n const data = await resp.json();\n const result = data?.chart?.result?.[0];\n if (!result) {\n return c.json({ error: \"No data found for this symbol\" }, 404);\n }\n\n const timestamps = result.timestamp || [];\n const quote = result.indicators?.quote?.[0] || {};\n const { open, high, low, close, volume } = quote;\n\n // Build OHLCV candles\n const candles = [];\n for (let i = 0; i < timestamps.length; i++) {\n if (open[i] == null || high[i] == null || low[i] == null || close[i] == null) continue;\n candles.push({\n time: timestamps[i],\n open: Number(open[i].toFixed(4)),\n high: Number(high[i].toFixed(4)),\n low: Number(low[i].toFixed(4)),\n close: Number(close[i].toFixed(4)),\n volume: volume[i] || 0,\n });\n }\n\n const meta = result.meta || {};\n return c.json({\n symbol: meta.symbol,\n currency: meta.currency,\n exchangeName: meta.exchangeName,\n instrumentType: meta.instrumentType,\n candles,\n });\n});\n\n// Search / autocomplete symbols\napp.get(\"/api/search\", async (c) => {\n const q = c.req.query(\"q\") || \"\";\n if (q.length < 1) return c.json({ results: [] });\n\n const url = `https://query1.finance.yahoo.com/v1/finance/search?q=${encodeURIComponent(q)}"esCount=8&newsCount=0`;\n const resp = await fetch(url, {\n headers: {\n \"User-Agent\": \"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36\",\n },\n });\n\n if (!resp.ok) return c.json({ results: [] });\n const data = await resp.json();\n const results = (data.quotes || []).map((q: any) => ({\n symbol: q.symbol,\n name: q.shortname || q.longname || q.symbol,\n type: q.quoteType,\n exchange: q.exchange,\n }));\n\n return c.json({ results });\n});\n\napp.onError((err) => Promise.reject(err));\nexport default app.fetch;\n","children",[],[210],"de7ddbbe-53ae-11f1-a85a-ee650bb23af1","README.md","de7ddc86-53ae-11f1-a85a-ee650bb23af1",["D",1779214594725],"# ⚓ Anchored VWAP\n\nInteractive **Anchored Volume Weighted Average Price** (AVWAP) chart tool powered by Yahoo Finance data.\n\n## Features\n\n- **Click to anchor** — Click any candle on the chart to set the VWAP anchor point\n- **All asset types** — Stocks, ETFs, Crypto, Forex, Futures\n- **Two timeframes** — 5-minute (5 days of data) and Daily (1 year of data)\n- **Symbol search** — Autocomplete search for any Yahoo Finance symbol\n- **Real-time VWAP calculation** — `AVWAP = Σ(TP × Volume) / Σ(Volume)` from anchor forward\n\n## How to Use\n\n1. Search for a symbol (e.g., `AAPL`, `BTC-USD`, `EURUSD=X`)\n2. Select a timeframe (5 min or Daily)\n3. **Click any candle** on the chart to set the anchor point\n4. The golden AVWAP line will appear from that point forward\n5. Click \"Clear Anchor\" to remove the VWAP line\n\n## Architecture\n\n```mermaid\ngraph LR\n A[Browser] --> B[Hono Server]\n B --> C[Yahoo Finance API]\n C --> B\n B --> A\n A --> D[Lightweight Charts]\n D --> E[Click → Anchor VWAP]\n```\n\n## Tech Stack\n\n- **Backend**: Hono (TypeScript)\n- **Frontend**: React 18 + TradingView Lightweight Charts\n- **Data**: Yahoo Finance v8 API\n- **Styling**: Twind (Tailwind CSS)\n",[],[219],["D",1779214491818],[],[18,81],["D",1779214487487],[],[18,67],"b203f3b6-53ae-11f1-83c5-ee650bb23af1","SearchBar.tsx","b203f47e-53ae-11f1-83c5-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",[],[18,91,232],"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",[],[18,91,240],"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",[],[18,91,248],["D",1779214495694],[202,203,204],[18,91],["D",1779214482084],[201,205,206],[18],["D",1779214164558],["D",1789501878689],{"_11":12,"_145":72},{"_11":12,"_141":12,"_71":72,"_31":70,"_142":143,"_144":30},{"_41":132,"_13":16,"_35":38,"_133":95,"_134":-5,"_135":-5,"_136":-5,"_137":-5,"_138":-5,"_139":14,"_140":12},"ctx",{"_55":-5,"_164":299,"_300":301,"_302":303,"_304":30,"_305":30,"_306":30,"_307":24,"_308":-5,"_309":-7,"_310":-7,"_311":26,"_312":30,"_313":30,"_314":-5,"_315":30,"_316":30,"_317":30,"_318":-5},"ENV",{"_270":271,"_272":273,"_274":16,"_275":276,"_277":278,"_279":280,"_281":282,"_283":284,"_285":286,"_287":288,"_289":290,"_291":292,"_293":294,"_295":296,"_297":298},"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 · frontend