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

# Chain & Endpoint Availability

> Check which endpoints are available for specific chains and which chains are supported by each endpoint.

export const EndpointsInput = () => {
  const [selectedEndpoints, setSelectedEndpoints] = useState([]);
  const [allData, setAllData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [filteredData, setFilteredData] = useState(null);
  const [endpoints, setEndpoints] = useState([]);
  const [endpointLabelMapping, setEndpointLabelMapping] = useState({});
  const handleComboboxChange = e => {
    const options = Array.from(e.target.selectedOptions).map(option => option.value);
    setSelectedEndpoints(options);
  };
  const getEndpointLabelMapping = responseData => {
    const endpointObj = {};
    responseData.forEach(chain => {
      Object.entries(chain.endpoints).forEach(([endpoint, data]) => {
        if (data && data.label && !endpointObj[endpoint]) {
          endpointObj[endpoint] = data.label;
        }
      });
    });
    return endpointObj;
  };
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch("https://api.allium.so/api/v1/supported-chains/realtime-apis", {
          method: "GET"
        });
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const responseData = await response.json();
        const endpointLabelMappingResult = getEndpointLabelMapping(responseData);
        setEndpoints(Object.keys(endpointLabelMappingResult).sort());
        setEndpointLabelMapping(endpointLabelMappingResult);
        setAllData(responseData);
        setIsLoading(false);
      } catch (error) {
        setIsLoading(false);
      }
    };
    fetchData();
  }, []);
  useEffect(() => {
    const filteredData = allData && selectedEndpoints.length > 0 ? allData.filter(chain => selectedEndpoints.some(endpoint => chain.endpoints[endpoint])) : [];
    setFilteredData(filteredData);
  }, [selectedEndpoints, allData]);
  return <div>
            <div className="mb-4">
                <label className="block text-sm font-medium mb-2" htmlFor="endpoint-combobox">
                    Select Endpoints
                </label>
                <select id="endpoint-combobox" multiple value={selectedEndpoints} onChange={handleComboboxChange} className="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none h-40">
                    {endpoints.map(endpoint => <option key={endpoint} value={endpoint}>
                            {endpointLabelMapping[endpoint] || endpoint}
                        </option>)}
                </select>
                <div className="text-xs text-gray-500 mt-1">Hold Ctrl (Windows) or Cmd (Mac) to select multiple endpoints.</div>
            </div>
            {selectedEndpoints.length === 0 ? <div className="mt-4">Select at least one endpoint to view supported chains.</div> : isLoading ? <div>Loading chain information...</div> : !allData ? <div>No data available</div> : <div>
                    <div className="mb-2 flex gap-4 justify-start">
                        <span>✅ Supported</span>
                        <span>🌱 Beta</span>
                        <span>❌ Not supported</span>
                    </div>
                    <div className="overflow-x-auto">
                        <table className="min-w-full divide-y">
                            <thead>
                                <tr>
                                    <th className="px-6 py-3 text-left text-xs font-medium tracking-wider">Chain</th>
                                    {selectedEndpoints.map(product => <th key={product} className="px-6 py-3 text-left text-xs font-medium tracking-wider">
                                            {endpointLabelMapping[product] || product}
                                        </th>)}
                                </tr>
                            </thead>
                            <tbody className="divide-y">
                                {filteredData && filteredData.map(chain => <tr key={chain.label}>
                                        <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">{chain.label}</td>
                                        {selectedEndpoints.map(product => {
    const endpoint = chain.endpoints[product];
    let status = "❌";
    if (endpoint) {
      status = endpoint.availability === "beta" ? "🌱" : "✅";
    }
    return <td key={`${chain.label}-${product}`} className="px-6 py-4 whitespace-nowrap text-sm">
                                                    {status}
                                                </td>;
  })}
                                    </tr>)}
                            </tbody>
                        </table>
                    </div>
                </div>}
        </div>;
};

export const ChainsInput = props => {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [selectedChain, setSelectedChain] = useState(null);
  const [endpoints, setEndpoints] = useState(props.endpoints || []);
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch("https://api.allium.so/api/v1/supported-chains/realtime-apis", {
          method: "GET"
        });
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const responseData = await response.json();
        setData(responseData);
        setIsLoading(false);
        if (!props.endpoints) {
          const endpointSet = new Set();
          responseData.forEach(chain => {
            Object.keys(chain.endpoints || ({})).forEach(ep => endpointSet.add(ep));
          });
          setEndpoints(Array.from(endpointSet));
        }
      } catch (error) {
        setIsLoading(false);
      }
    };
    fetchData();
  }, []);
  if (isLoading) {
    return <div>Loading chain information...</div>;
  }
  if (!data) {
    return <div>No data available</div>;
  }
  const selectedChainObj = data.find(chain => chain.label === selectedChain);
  return <div>
            <div className="mb-4">
                <label htmlFor="chain-select" className="block text-sm font-medium mb-2">
                    Select a chain to see which endpoints are available for it.
                </label>
                <select id="chain-select" value={selectedChain || "Select a chain"} onChange={e => setSelectedChain(e.target.value)} className="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
                    {data.map(chain => <option key={chain.label} value={chain.label}>
                            {chain.label}
                        </option>)}
                </select>
            </div>

            {selectedChainObj && <div className="overflow-x-auto">
                    <table className="min-w-full divide-y">
                        <thead>
                            <tr>
                                <th className="px-6 py-3 text-left text-xs font-medium tracking-wider">Endpoint</th>
                                <th className="px-6 py-3 text-left text-xs font-medium tracking-wider">Status</th>
                                <th className="px-6 py-3 text-left text-xs font-medium tracking-wider">Tables</th>
                            </tr>
                        </thead>
                        <tbody className="divide-y">
                            {endpoints.map(endpoint => {
    const endpointObj = selectedChainObj.endpoints[endpoint];
    return <tr key={endpoint}>
                                        <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                            {endpoint.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}
                                        </td>
                                        <td className="px-6 py-4 whitespace-nowrap text-sm">
                                            {endpointObj ? endpointObj.availability === "beta" ? "🌱 Beta" : "✅ Supported" : "❌ Not Supported"}
                                        </td>
                                        <td className="px-6 py-4 whitespace-nowrap text-sm">
                                            {endpoint === "custom_sql" && endpointObj && endpointObj.tables ? endpointObj.tables.map(t => t.name).join(", ") : endpoint === "custom_sql" ? "-" : null}
                                        </td>
                                    </tr>;
  })}
                        </tbody>
                    </table>
                </div>}
        </div>;
};

Use the tools below to quickly check chain and endpoint compatibility for Allium's Developer APIs.

<Info>
  Need support for a chain or endpoint that isn't listed? Contact us at [hello@allium.so](mailto:hello@allium.so) and we'll respond as soon as possible.
</Info>

## Check by Chain

Find out which endpoints are available for a specific blockchain:

<ChainsInput />

## Check by Endpoint

Find out which blockchains support a specific endpoint:

<EndpointsInput />
