import { createAggClient } from "@agg-build/sdk";

const client = createAggClient({
  baseUrl: "https://api.agg.market",
  appId: "your-app-id",
  wsUrl: "wss://ws.agg.market/ws",
});

const ws = client.createWebSocket();

// Per-market: subscribe returns an unsubscribe function.
const offMarket = ws.subscribeArb("vm_1", (update) => {
  // update: { type, marketId, venueEventId, arbReturn, ts }
  renderArb(update.marketId, update.arbReturn);
});

// Last value received for a market (or null), e.g. to seed a re-render.
const current = ws.getArb("vm_1");

// Feed: one subscription for the whole listing.
const offFeed = ws.subscribeArbFeed((batch) => {
  // batch.entries: [{ marketId, venueEventId, arbReturn, ts }, ...]
  for (const e of batch.entries) {
    updateRow(e.marketId, e.arbReturn);
  }
});

// Clean up when done.
offMarket();
offFeed();

import { useMarketArb } from "@agg-build/hooks";

function ArbBadge({ marketId, initialArbReturn }: { marketId: string; initialArbReturn: number }) {
  const { arbReturn, isLive } = useMarketArb(marketId);

  // Fall back to the listing value until the first live update arrives.
  const value = arbReturn ?? initialArbReturn;

  return (
    <span>
      {(value * 100).toFixed(2)}%{isLive ? " ●" : ""}
    </span>
  );
}

import { useArbFeed } from "@agg-build/hooks";

function EventList({ events }: { events: VenueEvent[] }) {
  const { byEvent } = useArbFeed();

  return (
    <ul>
      {events.map((event) => {
        // Live value if the feed has sent one for this event, else the listing value.
        const arb = byEvent.get(event.id) ?? event.arbReturn ?? 0;
        return (
          <li key={event.id}>
            {event.title} — {(arb * 100).toFixed(2)}%
          </li>
        );
      })}
    </ul>
  );
}