async function RaribleInfo() {
  var tbody = document
    .getElementById("infoTable")
    .getElementsByTagName("tbody")[0];
  // Clear the table body
  while (tbody.firstChild) {
    tbody.removeChild(tbody.firstChild);
  }
  const selectedRpc = document.getElementById("rpcSelector").value;
  const address = document.getElementById("hexInput").value;
  let raribleApiKey = document.getElementById("raribleApiKey").value;
  if (raribleApiKey === "") {
    raribleApiKey = "11111111-1111-1111-1111-111111111111";
  }
  console.log("key", raribleApiKey);
  const headers = {
    "X-Api-Key": `${raribleApiKey}`,
    "Content-Type": "application/json",
    Referer: "https://docs.rarible.org"
  };

  const url = `${selectedRpc}&owner=ETHEREUM%3A${address}`;
  console.log("url: ", url);
  console.log("header: ", headers);
  fetch(url, {
    method: "GET",
    headers: headers
  })
    .then((response) => {
      if (!response.ok) {
        // if HTTP status is not ok
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      return response.json();
    })
    .then((data) => {
      console.log("data: ", data);
      const tableBody = document.querySelector("#infoTable tbody");
      data.items.forEach((item) => {
        const row = document.createElement("tr");
        row.innerHTML = `
            <td>${item.collection.split(":")[1]}</td>
            <td>${item.tokenId}</td>
            <td>${item.supply}</td>
            <td>${item.itemCollection.name}</td>
          `;
        tableBody.appendChild(row);
      });
    })
    .catch((error) => {
      console.error("Error message:", error.message);
      console.error("Stack trace:", error.stack);

      const errorMessageElement = document.getElementById("error-message");
      errorMessageElement.textContent = `Error: ${error.message || ""}`;
      errorMessageElement.style.display = "block";
    });
}