Setup Trading View Charting Library JS for Crypto

const ChartBox = ({
baseAsset,
mobile = false,
custom_css_url = "../themed.css",
isPair = false,
isUsd = true,
}: ChartBoxProps) => {
const ref = useRef<HTMLDivElement>(null);
const { resolvedTheme } = useTheme();
const isWhiteMode = resolvedTheme === "light";

useEffect(() => {
if (!baseAsset) return () => {};

let freshWidget: IChartingLibraryWidget | null = null;
import("../../../../../../../../public/static/charting_library").then(
  ({ widget: Widget }) => {
    if (!ref.current) return;

    // Build symbol for display
    const symbol = isPair
      ? `${baseAsset.base?.symbol ?? baseAsset.symbol}/USD`
      : `${baseAsset.symbol}/USD`;

    freshWidget = new Widget({
      // Datafeed with pair/token mode support
      datafeed: Datafeed(baseAsset, isUsd),
      symbol,
      interval: "60" as ResolutionString,

      // Settings
      container: ref.current,
      container_id: ref.current.id,
      library_path: "/static/charting_library/",

      // UI & Behavior
      locale: "en",
      fullscreen: false,
      disabled_features: [
        "header_saveload",
        "header_symbol_search",
        ...(mobile ? ["left_toolbar"] : []),
      ],
      timezone: Intl.DateTimeFormat().resolvedOptions()
        .timeZone as Timezone,
      autosize: true,

      // Theme
      theme: isWhiteMode ? "Light" : "Dark",
      overrides: overrides(isWhiteMode),
      custom_css_url,
    });
  }
);

return () => {
  freshWidget?.remove();
};
}, [baseAsset, custom_css_url, mobile, isPair, isUsd]);

return <div ref={ref}></div>;
};

export const supportedResolutions = ['1s', '5s', '15s', '30s', '1', '5', '15', '30', '60', '240', '1D', '1W', '1M'];

const lastBarsCache = new Map();
const activeSubscriptions = new Map<string, string>();

type BaseAsset = {
  asset?: string;      // Token address (for token mode)
  address?: string;    // Pair/pool address (for pair mode)
  chainId: string;
  symbol?: string;
  priceUSD?: number;
  isPair?: boolean;
};

export const Datafeed = (initialBaseAsset: BaseAsset, isUsd = false) => {
  let baseAsset = initialBaseAsset;

  return {
    // Allow updating the asset without recreating the datafeed
    updateBaseAsset: (newAsset: BaseAsset) => {
      baseAsset = newAsset;
    },

    onReady: (callback: Function) => {
      setTimeout(() => {
        callback({
          supported_resolutions: supportedResolutions,
          supports_time: true,
          supports_marks: false,
        });
      }, 0);
    },

    resolveSymbol: (symbolName: string, onResolve: Function) => {
      setTimeout(() => {
        const price = baseAsset.priceUSD ?? 1;
        onResolve({
          name: symbolName,
          type: 'crypto',
          session: '24x7',
          timezone: 'Etc/UTC',
          minmov: 1,
          pricescale: Math.min(10 ** String(Math.round(10000 / price)).length, 1e16),
          has_intraday: true,
          has_seconds: true,
          supported_resolution: supportedResolutions,
          data_status: 'streaming',
        });
      }, 0);
    },
    // ... getBars and subscribeBars below
  };
};

getBars: async (
  _info: any,
  resolution: string,
  params: any,
  onResult: (bars: any[], meta: { noData: boolean }) => void
) => {
  const assetId = baseAsset.isPair ? baseAsset.address : baseAsset.asset;
  const normalizedResolution = normalizeResolution(resolution);
  const cacheKey = `${assetId}-${normalizedResolution}`;

  // TradingView provides timestamps in seconds, convert to ms
  const fromMs = params.from * 1000;
  const toMs = params.to * 1000;

  try {
    const client = getMobulaClient();
    
    // Build request params based on mode (token vs pair)
    const requestParams: any = {
      from: fromMs,
      to: toMs,
      amount: params.countBack,
      usd: `${isUsd}`,
      period: normalizedResolution,
      blockchain: baseAsset.chainId
    };

    if (baseAsset.isPair) {
      // Pair mode: use pool address directly
      requestParams.address = baseAsset.address;
      requestParams.mode = 'pool';
    } else {
      // Token mode: use asset address, routes to highest liquidity pool
      requestParams.asset = baseAsset.asset;
      requestParams.mode = 'asset';
    }

    const response = await client.fetchMarketHistoricalPairData(requestParams);
    const bars = response.data || [];
    
    onResult(bars, { noData: !bars.length });

    // Cache last bar for real-time updates
    if (bars.length > 0) {
      lastBarsCache.set(cacheKey, bars[bars.length - 1]);
    }
  } catch (err) {
    console.error('Error fetching bars:', err);
    onResult([], { noData: true });
  }
}

subscribeBars: async (
  _info: any,
  resolution: string,
  onRealtime: (bar: any) => void,
  subscriberUID: string
) => {
  const client = getMobulaClient();
  if (!client) return;

  const assetId = baseAsset.isPair ? baseAsset.address : baseAsset.asset;
  const key = `${assetId}-${subscriberUID}`;
  const normalizedResolution = normalizeResolution(resolution);
  const cacheKey = `${assetId}-${normalizedResolution}`;

  // Unsubscribe from existing subscription if any
  if (activeSubscriptions.has(key)) {
    try {
      await client.streams.unsubscribe('ohlcv', activeSubscriptions.get(key)!);
    } catch {}
    activeSubscriptions.delete(key);
  }

  try {
    // Build subscription params based on mode
    const subscribeParams: any = {
      period: normalizedResolution,
      chainId: baseAsset.chainId,
    };

    if (baseAsset.isPair) {
      subscribeParams.address = baseAsset.address;
    } else {
      subscribeParams.asset = baseAsset.asset;
    }

    // Subscribe to OHLCV stream
    const subId = client.streams.subscribe(
      'ohlcv',
      subscribeParams,
      (candle: any) => {
        if (!candle?.time) return;

        // Handle candle timestamp format
        const normalizedCandle = {
          ...candle,
          time: candle.time > 10000000000 ? candle.time / 1000 : candle.time
        };

        onRealtime(normalizedCandle);
        lastBarsCache.set(cacheKey, normalizedCandle);
      }
    );
    
    activeSubscriptions.set(key, subId);
  } catch (err) {
    console.error('Error subscribing to OHLCV stream', err);
  }
},

unsubscribeBars: async (subscriberUID: string) => {
  const client = getMobulaClient();
  const assetId = baseAsset.isPair ? baseAsset.address : baseAsset.asset;
  const key = `${assetId}-${subscriberUID}`;
  const subId = activeSubscriptions.get(key);

  if (subId && client) {
    try {
      await client.streams.unsubscribe('ohlcv', subId);
    } catch (err) {
      console.error('Unsubscribe error:', err);
    }
    activeSubscriptions.delete(key);
  }
}

const normalizeResolution = (resolution: string): string => {
  switch (resolution) {
    case '1S':
    case '1s':
      return '1s';
    case '5S':
    case '5s':
      return '5s';
    case '15S':
    case '15s':
      return '15s';
    case '30S':
    case '30s':
      return '30s';
    case '1':
    case '1m':
      return '1m';
    case '5':
    case '5m':
      return '5m';
    case '15':
    case '15m':
      return '15m';
    case '60':
    case '1h':
      return '1h';
    case '240':
    case '4h':
      return '4h';
    case '1D':
    case '1d':
      return '1d';
    case '1W':
    case '1w':
      return '1w';
    case '1M':
    case '1month':
      return '1M';
    default:
      return resolution;
  }
};