> ## 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.

# Gas Tracker

> The endpoints behind the gas tracker 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>;
};

The [gas tracker](https://etherscan.io/gastracker) on etherscan.io is built from the Gas Tracker 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: "Gas prices",
  region: {
    x: 1,
    y: 69,
    w: 73,
    h: 11
  },
  endpoints: [{
    path: "/gastracker/gasoracle",
    slug: "gasoracle",
    desc: "Low, average, and high gas price suggestions."
  }]
}, {
  label: "Confirmation time",
  region: {
    x: 1,
    y: 85,
    w: 73,
    h: 9
  },
  endpoints: [{
    path: "/gastracker/gasestimate",
    slug: "gasestimate",
    desc: "Estimated confirmation time for a given gas price."
  }]
}];

<EndpointShowcase image="https://mintcdn.com/etherscan/PrmCI8xWhLgr8YZ-/images/gas-page.png?fit=max&auto=format&n=PrmCI8xWhLgr8YZ-&q=85&s=c4b2a21be15e13ff7da1366dd403dbcb" alt="Etherscan gas tracker" items={items} width="2484" height="766" data-path="images/gas-page.png" />