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

# Supported Protocols & Chains

> Live reference for protocols and chains supported by LI.FI Earn.

export const ComposerChains = () => {
  const [chains, setChains] = useState(null);
  const [error, setError] = useState(null);
  useEffect(() => {
    const fetchChains = async () => {
      try {
        const response = await fetch('https://composer-wrapper-api.vercel.app/api/chains');
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        setChains(data.chains);
      } catch (err) {
        setError(err.message);
      }
    };
    fetchChains();
  }, []);
  const renderChains = chains => <table>
      <thead>
        <tr>
          <th className="text-left"><strong>Chain</strong></th>
          <th className="text-left"><strong>Chain ID</strong></th>
        </tr>
      </thead>
      <tbody>
        {chains.sort((a, b) => a.id - b.id).map(chain => <tr key={chain.id}>
            <td><strong>{chain.name}</strong></td>
            <td><code>{chain.id}</code></td>
          </tr>)}
      </tbody>
    </table>;
  if (error) return <div>Error loading chains: {error}</div>; else if (chains) return renderChains(chains); else return <div>Loading...</div>;
};

export const ComposerProtocols = () => {
  const [protocols, setProtocols] = useState(null);
  const [error, setError] = useState(null);
  useEffect(() => {
    const fetchProtocols = async () => {
      try {
        const response = await fetch('https://composer-wrapper-api.vercel.app/api/protocols');
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        setProtocols(data.protocols);
      } catch (err) {
        setError(err.message);
      }
    };
    fetchProtocols();
  }, []);
  const renderProtocols = protocols => <table>
      <thead>
        <tr>
          <th className="text-left"><strong>Protocol</strong></th>
          <th className="text-left"><strong>Type</strong></th>
          <th className="text-left"><strong>Actions</strong></th>
          <th className="text-left"><strong>Website</strong></th>
        </tr>
      </thead>
      <tbody>
        {protocols.map(protocol => <tr key={protocol.id}>
            <td><strong>{protocol.name}</strong></td>
            <td>{protocol.type}</td>
            <td>{protocol.actions.length === 1 ? `${protocol.actions[0]} only` : protocol.actions.join(', ')}</td>
            <td>
              <a href={protocol.website} target="_blank" rel="noopener noreferrer">
                {protocol.website.replace(/^https?:\/\//, '')}
              </a>
            </td>
          </tr>)}
      </tbody>
    </table>;
  if (error) return <div>Error loading protocols: {error}</div>; else if (protocols) return renderProtocols(protocols); else return <div>Loading...</div>;
};

## Supported Protocols

<ComposerProtocols />

***

## Supported Chains

<ComposerChains />

***

## Related Pages

<CardGroup cols={2}>
  <Card title="API Integration" icon="code" href="/earn/guides/api-integration">
    Full endpoint reference with parameters and response examples
  </Card>

  <Card title="Discover and Deposit" icon="book" href="/earn/recipes/discover-and-deposit">
    End-to-end recipe: find top vaults, then deposit via Composer
  </Card>
</CardGroup>