> ## Documentation Index
> Fetch the complete documentation index at: https://garden-e60e7dd0-chore-update-preview.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 CHAIN_EXPLORERS = {
  botanix: "https://botanixscan.io/",
  hyperliquid: "https://purrsec.com/",
  corn: "https://cornscan.io/",
  ethereum: "https://etherscan.io/",
  bera: "https://berascan.com/",
  starknet: "https://starkscan.co/",
  solana: "https://explorer.solana.com/",
  base: "https://basescan.org/",
  unichain: "https://uniscan.xyz/",
  arbitrum: "https://arbiscan.io/",
  bitcoin: "https://mempool.space/",
  bnbchain: "https://bscscan.com/",
  starknet_sepolia: "https://sepolia.starkscan.co/",
  ethereum_sepolia: "https://sepolia.etherscan.io/",
  solana_testnet: "https://explorer.solana.com/",
  citrea_testnet: "https://explorer.testnet.citrea.xyz/",
  base_sepolia: "https://sepolia.basescan.org/",
  monad_testnet: "https://explorer.monad-devnet.devnet101.com",
  arbitrum_sepolia: "https://sepolia.arbiscan.io/",
  bitcoin_testnet: "https://mempool.space/testnet4/",
  bnbchain_testnet: "https://testnet.bscscan.com/"
};

export const getExplorerUrl = (chain, address) => {
  if (chain.includes("bitcoin")) {
    return "/contracts/bitcoin";
  } else if (chain.includes("starknet")) {
    return CHAIN_EXPLORERS[chain] + "contract/" + address + "#overview";
  } else if (chain.includes("solana")) {
    return CHAIN_EXPLORERS[chain] + "address/" + "2bag6xpshpvPe7SJ9nSDLHpxqhEAoHPGpEkjNSv7gxoF" + (chain.includes("testnet") ? "?cluster=devnet" : "");
  } else {
    return CHAIN_EXPLORERS[chain] + "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)} 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
  }} 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>