> ## Documentation Index
> Fetch the complete documentation index at: https://docs.etherscan.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Token Page

> The endpoints behind a token page on etherscan.io.

export const EndpointShowcase = ({image, alt, items}) => {
  const [active, setActive] = useState(null);
  const [selected, setSelected] = useState(null);
  const current = active != null ? active : selected;
  const accent = "#0784C3";
  const PAD = 7;
  const epHref = ep => ep.href || (ep.slug ? "/api-reference/endpoint/" + ep.slug : null);
  const tierBadge = tier => <span style={{
    display: "inline-block",
    verticalAlign: "middle",
    fontSize: "9px",
    fontWeight: 700,
    lineHeight: 1.35,
    letterSpacing: "0.04em",
    textTransform: "uppercase",
    padding: "0.15em 0.45em",
    borderRadius: "0.35em",
    background: "#0784C3",
    color: "#ffffff",
    whiteSpace: "nowrap"
  }}>
      {tier}
    </span>;
  const scrollToItem = i => {
    setSelected(i);
    if (typeof document !== "undefined") {
      const el = document.getElementById("eps-" + i);
      if (el && el.scrollIntoView) el.scrollIntoView({
        behavior: "smooth",
        block: "center"
      });
    }
  };
  return <div>
      {}
      <div className="not-prose">
        <div className="relative w-full overflow-hidden rounded-xl border border-zinc-950/10 dark:border-white/10">
          <img src={image} alt={alt} className="block w-full select-none" />
          {items.map((it, i) => it.region ? <button key={i} type="button" onMouseEnter={() => setActive(i)} onMouseLeave={() => setActive(null)} onClick={() => scrollToItem(i)} aria-label={it.label} className="absolute rounded-md transition-all duration-150 cursor-pointer" style={{
    left: "calc(" + it.region.x + "% - " + PAD + "px)",
    top: "calc(" + it.region.y + "% - " + PAD + "px)",
    width: "calc(" + it.region.w + "% + " + PAD * 2 + "px)",
    height: "calc(" + it.region.h + "% + " + PAD * 2 + "px)",
    border: "2px solid " + (current === i ? accent : "rgba(7,132,195,0.35)"),
    background: current === i ? "rgba(7,132,195,0.16)" : "transparent",
    boxShadow: current === i ? "0 0 0 3px rgba(7,132,195,0.25)" : "none"
  }}>
                <span className="absolute -top-2.5 -left-2.5 w-5 h-5 rounded-full text-white text-[11px] font-semibold flex items-center justify-center shadow" style={{
    background: accent,
    opacity: current === i ? 1 : 0.75
  }}>
                  {i + 1}
                </span>
              </button> : null)}
        </div>

        <p className="mt-2 text-[11px] text-zinc-400 dark:text-zinc-500">
          Hover an area to find it on the page. Select it to jump to the endpoints below.
        </p>
      </div>

      {}
      <ol>
        {items.map((it, i) => {
    const isOn = current === i;
    return <li key={i} id={"eps-" + i} onMouseEnter={() => setActive(i)} onMouseLeave={() => setActive(null)} className="scroll-mt-24">
              <strong className={isOn ? "text-[#0784C3]" : undefined}>{it.label}</strong>
              {it.note ? " (" + it.note + ")" : null}
              <ul>
                {(it.endpoints || []).map((ep, j) => <li key={j}>
                    <a href={epHref(ep)}>{ep.path}</a>
                    {ep.tier ? <> {tierBadge(ep.tier)}</> : null}
                    {ep.desc ? ": " + ep.desc : null}
                  </li>)}
                {it.explore ? <li>
                    {it.explore.pre}
                    <a href={it.explore.href}>{it.explore.linkText}</a>
                    {it.explore.post}
                  </li> : null}
              </ul>
            </li>;
  })}
      </ol>
    </div>;
};

A [token page](https://etherscan.io/token/0xdac17f958d2ee523a2206206994597c13d831ec7) on etherscan.io is built from the Tokens, Stats, Accounts, and Contracts endpoints. The list below maps each part of the page to the endpoint behind it. One API key works across all 60+ [supported chains](/supported-chains); set `chainid` to choose one.

export const items = [{
  label: "Max total supply",
  region: {
    x: 2.5,
    y: 40.5,
    w: 18,
    h: 6
  },
  endpoints: [{
    path: "/stats/tokensupply",
    slug: "tokensupply",
    desc: "Total token supply."
  }, {
    path: "/stats/tokensupplyhistory",
    slug: "tokensupplyhistory",
    tier: "PRO",
    desc: "Historical total supply."
  }]
}, {
  label: "Holders",
  region: {
    x: 2.5,
    y: 49,
    w: 24.5,
    h: 6
  },
  endpoints: [{
    path: "/token/tokenholdercount",
    slug: "tokenholdercount",
    tier: "PRO",
    desc: "Number of token holders."
  }, {
    path: "/token/topholders",
    slug: "topholders",
    tier: "PRO",
    desc: "Largest holders."
  }, {
    path: "/token/tokenholderlist",
    slug: "tokenholderlist",
    tier: "PRO",
    desc: "Full holder list."
  }]
}, {
  label: "Transfers",
  region: {
    x: 2.5,
    y: 57.5,
    w: 21,
    h: 7
  },
  endpoints: [{
    path: "/account/tokentx",
    slug: "advanced-filter-tokentx",
    desc: "Token transfers via Advanced Filter."
  }]
}, {
  label: "Price",
  region: {
    x: 35,
    y: 40.5,
    w: 17,
    h: 5.5
  },
  endpoints: [{
    path: "/token/tokeninfo",
    slug: "tokeninfo",
    tier: "PRO",
    desc: "Price, name, and project links."
  }]
}, {
  label: "Contract",
  region: {
    x: 27.5,
    y: 71,
    w: 6,
    h: 4
  },
  endpoints: [{
    path: "/contract/getsourcecode",
    slug: "getsourcecode",
    desc: "Verified source code."
  }, {
    path: "/contract/getabi",
    slug: "getabi",
    desc: "Contract ABI."
  }]
}];

<EndpointShowcase image="https://mintcdn.com/etherscan/PrmCI8xWhLgr8YZ-/images/token-page.png?fit=max&auto=format&n=PrmCI8xWhLgr8YZ-&q=85&s=99621ab6f4ab4db5168fef352df5b0de" alt="Etherscan token page" items={items} width="2264" height="1392" data-path="images/token-page.png" />