Fetch offers

​

Prerequisites

• CoinListProvider with working getAccessToken (session established on your backend)
• User signed in: your getAccessToken returns a non-null access token after OAuth (see Set up OAuth authentication)

​

Recommended: OffersGridContainer

"use client";

import { OffersGridContainer } from "@coinlist-co/react";

export function OffersSection() {
  return (
    <OffersGridContainer
      maxColumns={3}
      onOfferClick={(offer) => {
        // Navigate or open your detail route - offer.id is the API offer id
        console.log("Selected offer", offer.id);
      }}
    />
  );
}

• maxColumns - upper bound for the grid when space allows (default 3)
• loading, error, emptyState - replace default slots with your own React nodes
• onOfferClick - when set, cards become interactive; omit for read-only lists
• data - pre-fetched offers from CoinListServer’s coinlist.offers.list() for SSR. Pass them in to skip the client-side request on first render.

​

Server-side pre-fetch

// app/offers/page.tsx - a Server Component
import { OffersGridContainer } from "@coinlist-co/react";
import { coinListServerForRSC } from "@/lib/coinlist-server-readonly";

export default async function OffersPage() {
  const offers = await coinListServerForRSC().offers.list();

  return <OffersGridContainer data={offers} maxColumns={3} />;
}

​

Going lower

"use client";

import { useOffers } from "@coinlist-co/react";

export function CustomOffersLayout() {
  const { offersState } = useOffers();

  if (offersState.type === "LOADING") return <p>Loading…</p>;
  if (offersState.type === "ERROR") return <p>Could not load offers.</p>;

  return (
    <ul>
      {offersState.offers.map((offer) => (
        <li key={offer.id}>{offer.tagline}</li>
      ))}
    </ul>
  );
}

"use client";

import { useCoinList } from "@coinlist-co/react";
import { useEffect } from "react";

export function OffersDebugLogger() {
  const { coinlist, isReady } = useCoinList();

  useEffect(() => {
    if (!isReady) return;
    void coinlist.offers.list().then((offers) => {
      console.log(offers.length);
    });
  }, [coinlist, isReady]);

  return null;
}

​

Token display metadata

"use client";

import { useTokenMetadata } from "@coinlist-co/react";

export function TokenBadge({ chain, address }) {
  const { state } = useTokenMetadata({ chain, address });

  if (state.type !== "CONTENT" || state.tokenMetadata === null) return null;
  const { symbol, logo } = state.tokenMetadata;

  return (
    <span>
      <img src={logo.kind === "VECTOR" ? logo.url : logo.original.url} alt="" />
      {symbol}
    </span>
  );
}

• coinlist.tokens.get(token) returns metadata for one token, or null when the registry does not list it. The registry is curated, so null is a normal answer: fall back to your own display defaults rather than treating it as an error.
• coinlist.tokens.list(chain) returns every token the registry lists for a chain, in one request. Prefer it over calling get in a loop when rendering a catalogue - two hundred tokens is still a single snapshot download. A missing chain snapshot throws rather than returning [], because its absence is a deployment problem and not an empty catalogue.

​

Next step