Build a token page

import WebSocket from "ws";

const API = "https://{{API_HOST}}/v1";
const headers = { Authorization: `Bearer ${process.env.API_KEY}` };
const chain = "solana";
const address = "DezXAZ8z7PnrnRJjz3wXBoRgixCa6xjnB7YaB1pPB263";

const socket = new WebSocket("wss://{{API_HOST}}/v1/stream", { headers });
const buffered: any[] = [];
let ready = false;

socket.on("error", (error) => console.error("stream error:", error.message));

const subscribed = new Promise<void>((resolve) => {
  let acks = 0;
  socket.on("message", (raw) => {
    const frame = JSON.parse(raw.toString());
    if (frame.type === "ack" && ++acks === 2) resolve();
    if (frame.type !== "update") return;
    if (ready) apply(frame);
    else buffered.push(frame);
  });
});

socket.on("open", () => {
  socket.send(JSON.stringify({ action: "subscribe", channel: "spot.tokens", filters: { chain, tokens: [address] } }));
  socket.send(JSON.stringify({ action: "subscribe", channel: "spot.trades", filters: { chain, token: address } }));
});

await subscribed;

async function getJson(url: string) {
  const response = await fetch(url, { headers });
  if (response.status === 404) return null;
  if (!response.ok) throw new Error(`HTTP ${response.status}`);
  return response.json();
}

const [token, page] = await Promise.all([
  getJson(`${API}/tokens/${chain}/${address}`),
  getJson(`${API}/tokens/${chain}/${address}/trades?limit=50`),
]);

// A token the API does not know returns 404. Show a "token not found" state rather than retrying.
if (token === null) throw new Error("Token not found");

const state = { token, trades: page.trades as any[] };
for (const frame of buffered) apply(frame);
ready = true;
render(state);

function apply(frame: { channel: string; data: any }) {
  if (frame.channel === "spot.tokens") {
    if (frame.data.updatedAt >= state.token.updatedAt) state.token = frame.data;
  }
  if (frame.channel === "spot.trades") {
    if (!state.trades.some((trade) => trade.id === frame.data.id)) {
      state.trades = [frame.data, ...state.trades].slice(0, 50);
    }
  }
  render(state);
}

const price = Number(state.token.price.usd);            // display only; keep the string for maths
const change24h = state.token.stats["24h"].priceChangePct; // "-3.4" means -3.4%