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

# Supported Assets

> A complete list of all chains, apps, stablecoins, and equities supported by Artemis, pulled live from the Artemis API.

export const SupportedAssetsWidget = () => {
  const [categories, setCategories] = React.useState(null);
  const [loading, setLoading] = React.useState(true);
  const [search, setSearch] = React.useState("");
  React.useEffect(() => {
    fetch("https://data-svc.artemisxyz.com/asset/").then(r => r.json()).then(data => {
      const assets = data.assets || data;
      const chains = [], apps = [], stablecoins = [], equities = [];
      for (const asset of assets) {
        if (!asset.title || asset.visibility === 0) continue;
        const types = asset.metadata?.about?.asset_types || [];
        const typeValues = types.map(t => t.value);
        const groupValues = (asset.tags?.groups || []).map(g => g.value);
        const isDAT = groupValues.includes("digital_asset_treasuries");
        if (isDAT || typeValues.includes("Equity")) {
          equities.push(asset.title);
        } else if (typeValues.includes("Chain")) {
          chains.push(asset.title);
        } else if (typeValues.includes("Stablecoin")) {
          stablecoins.push(asset.title);
        } else if (typeValues.includes("App")) {
          apps.push(asset.title);
        }
      }
      setCategories({
        chains: chains.sort((a, b) => a.localeCompare(b)),
        apps: apps.sort((a, b) => a.localeCompare(b)),
        stablecoins: stablecoins.sort((a, b) => a.localeCompare(b)),
        equities: equities.sort((a, b) => a.localeCompare(b))
      });
      setLoading(false);
    }).catch(() => setLoading(false));
  }, []);
  const filter = list => search.trim() ? list.filter(name => name.toLowerCase().includes(search.toLowerCase())) : list;
  if (loading) return <p style={{
    color: "#6b7280"
  }}>Loading supported assets...</p>;
  if (!categories) return <p style={{
    color: "#ef4444"
  }}>Failed to load asset data.</p>;
  const sections = [{
    key: "chains",
    label: "Chains",
    color: "#6366f1",
    list: filter(categories.chains),
    total: categories.chains.length
  }, {
    key: "apps",
    label: "Apps",
    color: "#10b981",
    list: filter(categories.apps),
    total: categories.apps.length
  }, {
    key: "stablecoins",
    label: "Stablecoins",
    color: "#f59e0b",
    list: filter(categories.stablecoins),
    total: categories.stablecoins.length
  }, {
    key: "equities",
    label: "Equities",
    color: "#3b82f6",
    list: filter(categories.equities),
    total: categories.equities.length
  }];
  return <div>
      <input type="text" placeholder="Search assets..." value={search} onChange={e => setSearch(e.target.value)} style={{
    width: "100%",
    padding: "8px 12px",
    borderRadius: "8px",
    border: "1px solid #d1d5db",
    fontSize: "14px",
    marginBottom: "24px",
    boxSizing: "border-box"
  }} />
      {sections.map(({key, label, color, list, total}) => <div key={key} style={{
    border: "1px solid #e5e7eb",
    borderRadius: "12px",
    padding: "24px",
    marginBottom: "24px"
  }}>
          <div style={{
    display: "flex",
    alignItems: "center",
    gap: "10px",
    marginBottom: "16px"
  }}>
            <span style={{
    display: "inline-block",
    padding: "2px 10px",
    borderRadius: "9999px",
    fontSize: "12px",
    fontWeight: 600,
    background: color,
    color: "#fff"
  }}>
              {label}
            </span>
            <span style={{
    fontSize: "13px",
    color: "#6b7280"
  }}>
              {search ? `${list.length} of ${total}` : total} assets
            </span>
          </div>
          {list.length === 0 ? <p style={{
    color: "#9ca3af",
    fontSize: "14px"
  }}>No results for "{search}"</p> : <ul style={{
    display: "grid",
    gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))",
    gap: "4px 16px",
    margin: 0,
    padding: 0,
    listStyle: "none"
  }}>
              {list.map(name => <li key={name} style={{
    fontSize: "14px",
    padding: "4px 0",
    borderBottom: "1px solid #f3f4f6"
  }}>
                  {name}
                </li>)}
            </ul>}
        </div>)}
    </div>;
};

<Info>
  Asset data is fetched live from the [Artemis Asset Symbols API](https://data-svc.artemisxyz.com/asset/symbols/) and categorized into four groups: **Chains**, **Apps**, **Stablecoins**, and **Equities**.
</Info>

<SupportedAssetsWidget />