(() => { if (!/^\/trade(?:\/|$)/.test(window.location.pathname)) return if (document.getElementById("trade-pre-hydration-shell")) return function readJson(key) { try { return JSON.parse(window.localStorage.getItem(key) || "null") } catch { return null } } const market = readJson("ixx.trade.market") const coin = market && typeof market.coin === "string" ? market.coin : "" const displayCoin = coin.replace(/^[^:]+:/, "").replace(/[^A-Za-z0-9._-]/g, "") const interval = window.localStorage.getItem("ixx.trade.interval") || "1h" const locale = window.localStorage.getItem("IXX-locale") === "en" ? "en" : "zh-CN" const labels = { en: { trade: "Trade", discover: "Explore", portfolio: "Portfolio", favorites: "Favorites", copyTrade: "Copy Trade", indicators: "Indicators", candlesLoading: "Loading candles", orderBook: "Order Book", positions: "Positions", openOrders: "Open Orders", tradeHistory: "Trade History", fundingHistory: "Funding History", noData: "No Data", }, "zh-CN": { trade: "交易", discover: "探索", portfolio: "投资组合", favorites: "收藏", copyTrade: "跟单", indicators: "指标", candlesLoading: "K 线加载中", orderBook: "订单簿", positions: "持仓", openOrders: "当前委托", tradeHistory: "历史成交", fundingHistory: "资金费历史", noData: "暂无数据", }, }[locale] const cache = coin ? readJson("ixx.trade.candles:" + coin + ":" + interval) : null const rawCandles = cache && Array.isArray(cache.candles) ? cache.candles : [] const candles = rawCandles .map((item) => ({ open: Number(item.open ?? item.o), high: Number(item.high ?? item.h), low: Number(item.low ?? item.l), close: Number(item.close ?? item.c), })) .filter((item) => Number.isFinite(item.open) && Number.isFinite(item.high) && Number.isFinite(item.low) && Number.isFinite(item.close) && item.high >= Math.max(item.open, item.close) && item.low <= Math.min(item.open, item.close) ) .slice(-120) function mountShell() { if (!document.body) { window.setTimeout(mountShell, 0) return } if (document.getElementById("trade-pre-hydration-shell")) return const shell = document.createElement("div") shell.id = "trade-pre-hydration-shell" shell.style.cssText = [ "position:fixed", "inset:0", "z-index:2147483647", "overflow:hidden", "background:#041f21", "color:#e6e8ec", "font-family:Inter,Arial,sans-serif", ].join(";") shell.innerHTML = [ '

', '

IXX

', '

' + labels.trade + '' + labels.discover + '' + labels.portfolio + '' + labels.favorites + '' + labels.copyTrade + '

', '

--USDC

', '

--x

', '

4h' + labels.indicators + '

', '

' + labels.candlesLoading + '

', '

' + labels.orderBook + '

', '

' + labels.positions + '' + labels.openOrders + '' + labels.tradeHistory + '' + labels.fundingHistory + '

-- ' + labels.noData + ' --

', ].join("") document.body.appendChild(shell) const symbol = shell.querySelector("[data-trade-preload-symbol]") if (symbol) symbol.textContent = displayCoin ? displayCoin + "-USDC" : "--USDC" if (!candles.length) return const root = shell.querySelector("[data-trade-preload-chart]") const canvas = root?.querySelector("canvas") const label = shell.querySelector("[data-trade-preload-label]") if (!(root instanceof HTMLElement) || !(canvas instanceof HTMLCanvasElement)) return if (label instanceof HTMLElement) label.style.display = "none" function draw() { const rect = root.getBoundingClientRect() if (rect.width <= 0 || rect.height <= 0) { window.requestAnimationFrame(draw) return } const dpr = window.devicePixelRatio || 1 const width = Math.max(1, Math.floor(rect.width)) const height = Math.max(1, Math.floor(rect.height)) canvas.width = Math.floor(width * dpr) canvas.height = Math.floor(height * dpr) const ctx = canvas.getContext("2d") if (!ctx) return ctx.setTransform(dpr, 0, 0, dpr, 0, 0) ctx.fillStyle = "#061f21" ctx.fillRect(0, 0, width, height) const paddingX = 12 const paddingY = 18 const plotWidth = Math.max(1, width - paddingX * 2) const plotHeight = Math.max(1, height - paddingY * 2) const minPrice = Math.min(...candles.map((item) => item.low)) const maxPrice = Math.max(...candles.map((item) => item.high)) const span = Math.max(maxPrice - minPrice, 1) const step = plotWidth / Math.max(candles.length, 1) const bodyWidth = Math.max(2, Math.min(8, step * 0.55)) const y = (price) => paddingY + ((maxPrice - price) / span) * plotHeight ctx.strokeStyle = "rgba(148,163,184,.16)" for (let index = 0; index < 5; index += 1) { const lineY = paddingY + (plotHeight * index) / 4 ctx.beginPath() ctx.moveTo(paddingX, lineY) ctx.lineTo(width - paddingX, lineY) ctx.stroke() } candles.forEach((candle, index) => { const x = paddingX + step * index + step / 2 const color = candle.close >= candle.open ? "#16a34a" : "#ef4444" ctx.strokeStyle = color ctx.fillStyle = color ctx.beginPath() ctx.moveTo(x, y(candle.high)) ctx.lineTo(x, y(candle.low)) ctx.stroke() ctx.fillRect(x - bodyWidth / 2, Math.min(y(candle.open), y(candle.close)), bodyWidth, Math.max(1, Math.abs(y(candle.close) - y(candle.open)))) }) } window.requestAnimationFrame(draw) } mountShell() })()