Lowcap Chart

import { useEnigmaPriceServiceMetadata } from "@symmio/trading-react";
 
interface Props {
  /** Base-token address for the market you want the chart of. */
  tokenAddress: string;
}
 
export function LowcapDexScreenerChart(props: Props) {
  const { data, isLoading } = useEnigmaPriceServiceMetadata({
    addresses: [props.tokenAddress],
  });
 
  if (isLoading) return <ChartSkeleton />;
 
  const meta = data?.[props.tokenAddress];
  if (!meta?.pair_address || !meta?.chain_id) return <ChartUnavailable />;
 
  const url = buildDexScreenerEmbedUrl({
    chainSlug: meta.chain_id.toLowerCase(),
    pairAddress: meta.pair_address,
  });
 
  return <iframe title="DexScreener Chart" src={url} width="100%" height="100%" style={{ border: 0 }} />;
}

interface BuildDexScreenerEmbedUrlOptions {
  chainSlug: string;
  pairAddress: string;
  /** Override any of the default query params. */
  overrides?: Record<string, string>;
}
 
export function buildDexScreenerEmbedUrl(options: BuildDexScreenerEmbedUrlOptions) {
  const params = new URLSearchParams({
    embed: "1",
    loadChartSettings: "0",
    trades: "0",
    info: "0",
    chartLeftToolbar: "0",
    chartTheme: "dark",
    theme: "dark",
    chartStyle: "1",
    interval: "15",
    chartType: "price",
    ...options.overrides,
  });
  return `https://dexscreener.com/${options.chainSlug}/${options.pairAddress}?${params.toString()}`;
}

import { useQuery } from "@tanstack/react-query";
import { useEnigmaPriceServiceMetadata } from "@symmio/trading-react";
import { createChart, type UTCTimestamp } from "lightweight-charts";
import { useEffect, useRef } from "react";
 
interface Props {
  tokenAddress: string;
  /** Candle timeframe accepted by GeckoTerminal: "minute" | "hour" | "day". */
  timeframe?: "minute" | "hour" | "day";
}
 
export function LowcapOhlcChart(props: Props) {
  const timeframe = props.timeframe ?? "minute";
  const { data: metadata } = useEnigmaPriceServiceMetadata({
    addresses: [props.tokenAddress],
  });
  const meta = metadata?.[props.tokenAddress];
 
  const candles = useQuery({
    queryKey: ["gt-ohlcv", meta?.chain_id, meta?.pair_address, timeframe],
    queryFn: () => fetchGeckoTerminalOhlcv(meta!.chain_id, meta!.pair_address, timeframe),
    enabled: Boolean(meta?.chain_id && meta?.pair_address),
    staleTime: 30_000,
  });
 
  const containerRef = useRef<HTMLDivElement>(null);
 
  useEffect(() => {
    if (!containerRef.current || !candles.data) return;
    const chart = createChart(containerRef.current, { autoSize: true });
    const series = chart.addCandlestickSeries();
    series.setData(candles.data);
    return () => chart.remove();
  }, [candles.data]);
 
  return <div ref={containerRef} style={{ width: "100%", height: "100%" }} />;
}
 
async function fetchGeckoTerminalOhlcv(chainSlug: string, poolAddress: string, timeframe: string) {
  const url = `https://api.geckoterminal.com/api/v2/networks/${chainSlug.toLowerCase()}/pools/${poolAddress}/ohlcv/${timeframe}`;
  const res = await fetch(url);
  if (!res.ok) throw new Error(`GeckoTerminal OHLCV ${res.status}`);
  const json = await res.json();
  // ohlcv_list: [[unixSeconds, open, high, low, close, volume], …]
  return (json.data.attributes.ohlcv_list as number[][]).map(([t, open, high, low, close]) => ({
    time: t as UTCTimestamp,
    open,
    high,
    low,
    close,
  }));
}