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

# Supported Chains

export const Chains = ({env, id}) => {
  const key = `chains-${env}`;
  if (typeof window === "undefined") {
    return null;
  }
  if (typeof document === "undefined") {
    return null;
  }
  if (!window[key]) {
    window[key] = {
      fetching: false,
      data: null,
      observer: null
    };
  }
  if (!window[key].fetching) {
    const appendChains = data => {
      const rootElement = document.getElementById(id);
      if (!rootElement) {
        return;
      }
      const rows = data.slice().sort((a, b) => a.displayName.localeCompare(b.displayName)).map(chain => {
        return `<tr key=${chain.id}>
          <td>
            <div style="display: flex; align-items: center; gap: 8px; text-transform: capitalize;">
              <img class="chain-icon chain-icon-light" src="https://assets.relay.link/icons/square/${chain.id}/light.png" alt="" loading="lazy" onerror="this.style.display='none'" style="width: 20px; height: 20px; border-radius: 4px; flex-shrink: 0; margin: 0;" />
              <img class="chain-icon chain-icon-dark" src="https://assets.relay.link/icons/square/${chain.id}/dark.png" alt="" loading="lazy" onerror="this.style.display='none'" style="width: 20px; height: 20px; border-radius: 4px; flex-shrink: 0; margin: 0;" />
              <span>${chain.displayName}</span>
            </div>
          </td>
          <td>${chain.id}</td>
          <td>${chain.tokenSupport}</td>
        </tr>`;
      });
      rootElement.innerHTML = `<div id="${id}-marker"></div>${rows.join("")}`;
      if (!window[key].observer) {
        let observer = new MutationObserver(function (mutations) {
          if (!document.getElementById(`${id}-marker`)) {
            appendChains(data);
          }
        });
        observer.observe(document.body, {
          childList: true,
          subtree: true
        });
        window[key].observer = observer;
      }
    };
    const fetchChains = async () => {
      try {
        if (window[key].fetching) return;
        window[key].fetching = true;
        window[key].data = null;
        const response = await fetch(env === "testnets" ? "https://api.testnets.relay.link/chains" : "https://api.relay.link/chains");
        const data = await response.json();
        window[key].fetching = false;
        window[key].data = data.chains;
        appendChains(data.chains);
      } catch (e) {
        window[key].fetching = false;
        window[key].data = false;
      }
    };
    if (window[key].data) {
      appendChains(window[key].data);
    } else {
      fetchChains();
    }
  }
  return <table className="relay-table" style={{
    width: "100%"
  }}>
<thead style={{
    borderBottom: "1px solid rgb(227 226 230)"
  }}>
<tr style={{
    textAlign: "left"
  }}>
<th>Chain</th>
<th>Chain ID</th>
<th>Supported Tokens</th>
</tr>
</thead>
<tbody id={id}></tbody>
</table>;
};

Relay is currently supported on the following chains. Please reach out to learn more about how to add Relay to your chain.

## Supported Chains

### Mainnets

<Chains id="mainnetChains" env="mainnets" />

### Testnets

<Chains id="testnetChains" env="testnets" />

## Adding Relay to Your Chain

Relay can easily be added to any EVM-chain, such as OP stack rollups, Arbitrum Orbit chains, or more. Please feel free to [Reach Out](mailto:support@relay.link) to discuss getting your chain supported today!