> ## Documentation Index
> Fetch the complete documentation index at: https://garden-e60e7dd0-fix-analytics.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Supported Chains and Assets

export const getChainName = chain => {
  return CHAIN_NAMES[chain] || chain;
};

export const CHAIN_NAMES = {
  bnbchain: "BNB Chain",
  bnbchain_testnet: "BNB Chain Testnet"
};

export const titilize = chain => {
  const chainSplit = chain.split("_");
  const firstWord = chainSplit[0].charAt(0).toUpperCase() + chainSplit[0].slice(1);
  const secondWord = chainSplit.length > 1 ? chainSplit[1].charAt(0).toUpperCase() + chainSplit[1].slice(1) : "";
  return firstWord + " " + secondWord;
};

export const getExplorerUrl = (chain, address, explorer_url) => {
  if (chain.includes("bitcoin")) {
    return "/contracts/bitcoin";
  } else if (chain.includes("starknet")) {
    return explorer_url + "contract/" + address + "#overview";
  } else if (chain.includes("solana")) {
    return explorer_url + "/address/" + "2bag6xpshpvPe7SJ9nSDLHpxqhEAoHPGpEkjNSv7gxoF" + (chain.includes("testnet") ? "?cluster=devnet" : "");
  } else if (chain.includes("sui")) {
    return explorer_url + "/object/" + address;
  } else {
    return explorer_url + "/address/" + address + "#code";
  }
};

export const trimAssetName = id => {
  return id.split(":")[1].toUpperCase();
};

export const getAssets = async (url = MAINNET_ASSETS_URL) => {
  try {
    const response = await fetch(url);
    const data = await response.json();
    if (data.status.includes("OK")) {
      return [];
    }
    const sortedResult = data.result.sort((a, b) => {
      return a.chain.localeCompare(b.chain);
    });
    console.log(sortedResult[0].assets[0].htlc.address);
    return sortedResult;
  } catch (error) {
    console.log("Error fetching assets", error);
    return [];
  }
};

export const TESTNET_ASSETS_URL = "https://testnet.api.garden.finance/v2/chains";

export const MAINNET_ASSETS_URL = "https://api.garden.finance/v2/chains";

export const AssetRow = ({chain, assets}) => {
  return <tr>
      <td className="flex items-center gap-2 w-full whitespace-nowrap border-r-[1px] border-[#e5e1e2] dark:border-[#454143]/50" colSpan={4}>
        <Frame className="pointer-events-none w-[20px]">
          <img width="20" src={chain.icon} alt={chain.chain} />
        </Frame>
        <strong>{titilize(getChainName(chain.chain))}</strong>
      </td>
      <td colSpan={4}>
        <div className="flex gap-4 flex-wrap mx-2">
          {assets.map((asset, i) => <a key={i} href={getExplorerUrl(chain.chain, asset.htlc?.address, chain.explorer_url)} className="border-none flex items-center gap-2">
              <Frame className="pointer-events-none w-[20px]">
                <img width="20" src={asset.icon} alt={asset.id} />
              </Frame>
              <span>{trimAssetName(asset.id)}</span>
            </a>)}
        </div>
      </td>
    </tr>;
};

export const SupportedAssets = ({url}) => {
  const [supportedAssetsConfig, setSupportedAssetsConfig] = useState([]);
  useEffect(() => {
    const fetchAssets = async () => {
      try {
        const assetsConfig = await getAssets(url);
        setSupportedAssetsConfig(assetsConfig);
      } catch (error) {
        console.error("Failed to fetch assets:", error);
      }
    };
    fetchAssets();
  }, []);
  return <table className="w-full table-auto border-collapse">
      <thead>
        <tr>
          <th>Chain</th>
          <th colSpan="4">Asset HTLCs</th>
        </tr>
      </thead>
      <tbody>
        {supportedAssetsConfig.map((chainConfig, i) => <AssetRow key={i} chain={{
    chain: chainConfig.chain,
    icon: chainConfig.icon,
    explorer_url: chainConfig.explorer_url
  }} assets={chainConfig.assets} />)}
      </tbody>
    </table>;
};

Garden uses the following contracts to perform swaps on respective chains:

<Tabs>
  <Tab title="Mainnet">
    <SupportedAssets key={MAINNET_ASSETS_URL} url={MAINNET_ASSETS_URL} />
  </Tab>

  <Tab title="Testnet">
    <SupportedAssets key={TESTNET_ASSETS_URL} url={TESTNET_ASSETS_URL} />
  </Tab>
</Tabs>

<Tip>
  If you would like to see a chain or asset that isn't listed here, reach out to
  us in the [Townhall](https://discord.gg/dZwSjh9922).
</Tip>