Migrating from TradingView

/* Replaces public/tv-theme.css. Fill-only surfaces; hover shifts the fill. */
html .cts-theme {
  --cts-bg: #171717; --cts-panel: #171717; --cts-panel-raised: #262626; --cts-edge: transparent;
  --cts-idle: #a1a1a1; --cts-muted: #737373; --cts-hover: #fafafa;
  --cts-accent: #00ff3f; --cts-accent-soft: #262626; --cts-on-accent: #0a0a0a;
  --cts-font: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
html .cts-theme .cts-btn { border-radius: 9999px; }

import { info, type Candle as HyperliquidCandle } from '@workspace/trading-core/hyperliquid/info';
import type { FetchBars } from '@bloxwap/chart/datafeed';
import { TIMEFRAME_MS, type Timeframe } from './candle-data';

const TIMEFRAME_BY_MS = new Map(Object.entries(TIMEFRAME_MS).map(([tf, ms]) => [ms, tf as Timeframe]));

const toCandle = (k: HyperliquidCandle) => ({ time: k.t / 1000, open: +k.o, high: +k.h, low: +k.l, close: +k.c, volume: +k.v });

export const fetchBars: FetchBars = async ({ symbol, intervalMs, fromMs, toMs, signal }) =>
  (await info.candleSnapshot(symbol, TIMEFRAME_BY_MS.get(intervalMs)!, fromMs, toMs, signal)).map(toCandle);

let mark: PriceLine | null = null;
const unsubscribe = feed.subscribeCoin(symbol, (price) => {
  if (mark === null) mark = chart.series.createPriceLine({ price, color: '#35b5ff', lineStyle: 'dashed', title: 'mark' });
  else mark.applyOptions({ price });
  datafeed.pushTick(price, symbol);
});

let last: PriceLine | null = null;
const setLast = (price: number) => {
  if (last === null) last = chart.series.createPriceLine({ price, color: 'rgba(255, 255, 255, 0.6)', lineStyle: 'dotted', title: 'last' });
  else last.applyOptions({ price });
};
const offLoad = chart.subscribeDataLoad(({ reason }) => {
  const bars = chart.getData();
  if (reason === 'set') {
    if (bars.length > 0) setLast(bars.at(-1)!.close);
    else { last?.remove(); last = null; } // a failed switch cleared the chart
  } else if (reason === 'append' && bars.length > 1) {
    setLast(bars.at(-2)!.close); // a new bar opened
  }
});

'use client';

import { useEffect, useRef, useState } from 'react';
import { cn } from '@workspace/ui/lib/utils';
import { info, type Candle as HyperliquidCandle } from '@workspace/trading-core/hyperliquid/info';
import { ensurePriceFeed } from '@workspace/trading-core/hyperliquid/price-feed';
import type { Chart, PriceLine } from '@bloxwap/chart';
import { presetChartTheme } from '@bloxwap/chart';
import { createDatafeedChart, type Datafeed, type FetchBars } from '@bloxwap/chart/datafeed';
import {
  BLOXWAP_HEADER_TOKENS,
  createChartHeader,
  createChartSettings,
  createDrawingToolbar,
  createIndicatorsDialog,
  icon,
} from '@bloxwap/chart/ui';
import { TIMEFRAME_MS, priceFormatFor, type Timeframe } from './candle-data';

/** TradingView's `interval: '15'`. */
const DEFAULT_INTERVAL_MS = TIMEFRAME_MS['15m'];
const MARK_COLOR = '#35b5ff'; // --bloxwap-blue
const LAST_COLOR = 'rgba(255, 255, 255, 0.6)'; // ProChart's "last" line
const TIMEFRAME_BY_MS = new Map(Object.entries(TIMEFRAME_MS).map(([tf, ms]) => [ms, tf as Timeframe]));

const toCandle = (k: HyperliquidCandle) => ({ time: k.t / 1000, open: +k.o, high: +k.h, low: +k.l, close: +k.c, volume: +k.v });

/** Hyperliquid bars opening within [fromMs, toMs]; the datafeed pages, dedupes and aborts. */
const fetchBars: FetchBars = async ({ symbol, intervalMs, fromMs, toMs, signal }) =>
  (await info.candleSnapshot(symbol, TIMEFRAME_BY_MS.get(intervalMs)!, fromMs, toMs, signal)).map(toCandle);

/** A header button styled like the built-in ones. */
function headerButton(iconName: string, title: string, onClick?: () => void): HTMLButtonElement {
  const button = document.createElement('button');
  button.type = 'button';
  button.className = 'cts-header-btn';
  button.title = title;
  button.setAttribute('aria-label', title);
  button.innerHTML = icon(iconName, 18);
  if (onClick !== undefined) button.addEventListener('click', onClick);
  return button;
}

export function BloxwapChart({ symbol, className }: { symbol: string; className?: string }) {
  const headerRef = useRef<HTMLDivElement | null>(null);
  const railRef = useRef<HTMLDivElement | null>(null);
  const stageRef = useRef<HTMLDivElement | null>(null);
  const canvasRef = useRef<HTMLCanvasElement | null>(null);
  const boundRef = useRef<{ chart: Chart; datafeed: Datafeed } | null>(null);
  const [loading, setLoading] = useState(true);

  // The chart, its datafeed and UI live as long as the component.
  useEffect(() => {
    const canvas = canvasRef.current!;
    const stage = stageRef.current!;
    const { chart, datafeed, destroy } = createDatafeedChart({
      container: canvas,
      autoResize: true,
      preset: 'bloxwapDark',
      config: {
        statusLine: { symbolVisible: false }, // the header shows the symbol
      },
      fetchBars,
      onError: (error) => console.warn('chart data', error),
    });
    const chartTheme = presetChartTheme('bloxwapDark');

    // ProChart's dotted "last" line: the latest close on load, then the close of each bar that just closed.
    let last: PriceLine | null = null;
    const setLast = (price: number) => {
      if (last === null) last = chart.series.createPriceLine({ price, color: LAST_COLOR, lineStyle: 'dotted', title: 'last' });
      else last.applyOptions({ price });
    };
    const offLoad = chart.subscribeDataLoad(({ reason }) => {
      const bars = chart.getData();
      if (reason === 'set') {
        if (bars.length > 0) setLast(bars.at(-1)!.close);
        else { last?.remove(); last = null; } // a failed switch cleared the chart
      } else if (reason === 'append' && bars.length > 1) {
        setLast(bars.at(-2)!.close); // a new bar opened
      }
    });

    const toolbar = createDrawingToolbar({
      chart, document, canvas, rail: railRef.current!, overlay: stage,
      theme: 'dark',
      chartTheme, // keep bloxwapDark's colors
      contextMenu: {
        onChartSettings: () => settings.open(),
        onIndicatorSettings: (id) => indicators.openSettings(id), // the dialog follows the menu's edits
      },
    });
    const indicators = createIndicatorsDialog({
      chart, document, theme: 'dark',
      onOpen: () => { settings.close(); toolbar.flyouts.close(); },
    });
    const settingsButton = headerButton('settings', 'Chart settings'); // the settings card toggles on its click
    const settings = createChartSettings({
      chart, document, trigger: settingsButton, theme: 'dark', chartTheme,
      onOpen: () => { indicators.close(); toolbar.flyouts.close(); toolbar.cancelNavigation(); },
      onChange: () => toolbar.refreshViewport(),
    });
    const screenshotButton = headerButton('image', 'Copy chart image', () => {
      void chart.toBlob({ type: 'image/png' })
        .then((blob) => navigator.clipboard.write([new ClipboardItem({ 'image/png': blob })]))
        .catch((error: unknown) => console.warn('chart screenshot', error));
    });
    const header = createChartHeader({
      chart, document, container: headerRef.current!,
      datafeed, // timeframe picks reload the symbol; the header follows setSymbol
      flyouts: toolbar.flyouts,
      tokens: BLOXWAP_HEADER_TOKENS,
      scaleButtons: false, // the app hides TradingView's bottom toolbar, which holds these
      onIndicators: () => indicators.openPicker(),
      slots: { right: [screenshotButton, settingsButton] },
    });
    const offState = datafeed.subscribeState((state) => setLoading(state.loading));

    boundRef.current = { chart, datafeed };
    return () => {
      boundRef.current = null;
      offState();
      offLoad();
      header.destroy();
      settings.destroy();
      indicators.destroy();
      toolbar.destroy();
      destroy(); // the datafeed, then the chart
    };
  }, []);

  // Load the symbol and stream its price; runs after the chart exists and on every asset switch.
  useEffect(() => {
    const bound = boundRef.current;
    if (bound === null || !symbol) return;
    const { chart, datafeed } = bound;
    void datafeed.setSymbol(symbol, datafeed.intervalMs ?? DEFAULT_INTERVAL_MS);

    const feed = ensurePriceFeed();
    const releaseFast = feed.acquireFastCoin(symbol);
    let mark: PriceLine | null = null;
    const unsubscribe = feed.subscribeCoin(symbol, (price) => {
      if (!Number.isFinite(price) || price <= 0) return;
      if (mark === null) {
        // resolveSymbol's pricescale: decimals from the first price.
        chart.updateConfig({ priceAxis: { precision: priceFormatFor(price).precision } });
        mark = chart.series.createPriceLine({ price, color: MARK_COLOR, lineStyle: 'dashed', title: 'mark' });
      } else {
        mark.applyOptions({ price });
      }
      datafeed.pushTick(price, symbol); // ignored until history has loaded
    });

    return () => {
      unsubscribe();
      releaseFast();
      mark?.remove();
    };
  }, [symbol]);

  return (
    <div className={cn('flex h-full min-h-0 flex-col bg-card', className)}>
      <div ref={headerRef} className="shrink-0" />
      <div className="flex min-h-0 flex-1">
        <div ref={railRef} className="w-[52px] flex-none" />
        <div ref={stageRef} className="relative min-w-0 flex-1" aria-busy={loading}>
          <canvas ref={canvasRef} />
        </div>
      </div>
    </div>
  );
}