Crypto Exchange Rates — Confluence Cloud Macro

#set($currency = $StringUtils.lowerCase($parameters["baseCurrency"]))

<div id="crypto-rates-wrapper">

<table class="aui aui-table-interactive aui-table-rowhover" style="table-layout: fixed; width: 50%;">
    <thead>
        <tr>
            <th style="width:50%;">Cryptocurrency</th>
            <th style="width:50%;">Rate ($StringUtils.upperCase($currency))</th>
        </tr>
    </thead>
    <tbody id="crypto-rates-body">
        <tr>
            <td colspan="2">Loading...</td>
        </tr>
    </tbody>
</table>

</div>

<script>
(async () => {

  const currency = "$currency";
  const cryptoIDs = "bitcoin,ethereum,tether,ripple,cardano,solana,polkadot,dogecoin,tron,toncoin";

  const apiUrl =
    "https://api.coingecko.com/api/v3/coins/markets?vs_currency="
    + currency
    + "&ids="
    + cryptoIDs
    + "&order=market_cap_desc";

  const tbody = document.getElementById("crypto-rates-body");

  try {
    const response = await fetch(apiUrl);
    const data = await response.json();

    if (!Array.isArray(data) || data.length === 0) {
      tbody.innerHTML =
        "<tr><td colspan='2'>Unable to retrieve cryptocurrency rates</td></tr>";
      return;
    }

    let html = "";

    data.forEach(c => {
      html += "<tr>";
      html += "<td>";
      html += "<span style='margin-right:7px;vertical-align:sub;'>";
      html += "<img src='" + c.image + "' alt='" + c.name + " logo' style='width:20px;height:20px;'>";
      html += "</span>";
      html += c.name;
      html += "</td>";
      html += "<td>" + c.current_price + "</td>";
      html += "</tr>";
    });

    tbody.innerHTML = html;

  } catch (err) {
    tbody.innerHTML =
      "<tr><td colspan='2'>Unable to retrieve cryptocurrency rates</td></tr>";
    console.error("Crypto macro error:", err);
  }

})();
</script>