index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Chainlog - MakerDAO</title>
        <meta charset="UTF-8">
        <meta name="referrer" content="origin">
        <link rel="icon" href="data:;base64,iVBORw0KGgo=">
    </head>
    <body>
        <script src="https://cdn.ethers.io/lib/ethers-5.4.umd.min.js"
        type="application/javascript"></script>
        <script>


/* IPFS BLOCK */

const CID = "bafybeid6dreur7nlcuqrdz7irtyffwvt3pvyzvac3cfdxmznw6kmoxmj3a";
let addressesList = []

const ipfsDiv = document.createElement("div");
ipfsDiv.innerHTML = "IPFS CID: ";
const ipfsCID = document.createElement("a");
ipfsCID.innerHTML = CID;
ipfsCID.setAttribute("href", "https://ipfs.io/ipfs/" + CID);
ipfsDiv.append(ipfsCID);
const ipfsCopy = document.createElement("button");
ipfsCopy.style.marginLeft = "10px";
ipfsCopy.innerHTML = "copy";
ipfsCopy.setAttribute("class", "copy");
ipfsCopy.setAttribute("name", "copy");
ipfsCopy.addEventListener("click", () => {
  navigator.clipboard.writeText(CID);
  uncopy();
  ipfsCopy.innerHTML = "copied";
});
ipfsDiv.append(ipfsCopy);
document.body.append(ipfsDiv);

/* END IPFS BLOCK */


const chainNames = {
  "0x1": "Ethereum mainnet",
  "0x3": "Ropsten",
  "0x4": "Rinkeby",
  "0x5": "Görli",
  "0x2a": "Kovan"
}

const chainPrefixes = {
  "0x1": "",
  "0x3": "ropsten.",
  "0x4": "rinkeby.",
  "0x5": "goerli.",
  "0x2a": "kovan."
}

const chainApiPrefixes = {
  "0x1": "",
  "0x3": "-ropsten",
  "0x4": "-rinkeby",
  "0x5": "-goerli",
  "0x2a": "-kovan"
}

const infuraPrefixes = {
  "0x1": "mainnet",
  "0x3": "ropsten",
  "0x4": "rinkeby",
  "0x5": "goerli",
  "0x2a": "kovan"
}

const setUp = () => {
  canvas.innerHTML = "loading…";
  providerValue.innerHTML = provider;
  chainOption.innerHTML = chain;
  chainNotice.innerHTML = notice;
  call({
    to:   mip21registry,
    data: "0x0f560cd7" // list()
  }, draw);
}

let provider, chain, chainPrefix, chainApiPrefix, infuraPrefix, notice;
window.addEventListener("load", () => {
  if (typeof window.ethereum !== "undefined") {
    setTimeout(() => {
      if (!window.ethereum.isConnected()) {
        console.log("Metamask connection timed out. Falling back to Infura mainnet");
        setInfura();
      }
    }, 1000);
    window.ethereum.on("connect", conn => {
      provider = "Metamask";
      chain = chainNames[conn.chainId];
      if (!chain) chain = "Unknown";
      chainPrefix = chainPrefixes[conn.chainId];
      chainApiPrefix = chainApiPrefixes[conn.chainId];
      infuraPrefix = infuraPrefixes[conn.chainId];
      endpoint = "https://" + infuraPrefix + ".infura.io/v3/633f64adbe364bb88127348d4fcc21ef";
      notice = "change this in your Metamask plugin (you don’t need to unlock Metamask)";
      const ethersProvider = new ethers.providers.Web3Provider(window.ethereum)
      setUp();
    });
    window.ethereum.on("chainChanged", chainId => {
      chain = chainNames[chainId];
      if (!chain) chain = "Unknown";
      chainPrefix = chainPrefixes[chainId];
      chainApiPrefix = chainApiPrefixes[chainId];
      infuraPrefix = infuraPrefixes[chainId];
      endpoint = "https://" + infuraPrefix + ".infura.io/v3/633f64adbe364bb88127348d4fcc21ef";
      notice = "";
      const ethersProvider = new ethers.providers.InfuraProvider(chainId)
      setUp();
    });
  } else {
    setInfura();
  }
});

const setInfura = () => {
  provider = "Infura";
  chain = "Ethereum mainnet";
  chainPrefix = "";
  chainApiPrefix = "";
  infuraPrefix = "mainnet";
  notice = "";
  chainSelect.removeAttribute("disabled");
  chainSelect.append(chainGoerli);
  const ethersProvider = new ethers.providers.Web3Provider(window.ethereum)
  setUp();
}

const title = document.createElement("h1");
title.innerHTML = "MakerDAO Deployment Registry";
document.body.append(title);

const linksDiv = document.createElement("div");
const sourceLink = document.createElement("a");
sourceLink.innerHTML = "source code";
sourceLink.setAttribute("href", "https://github.com/makerdao/chainlog-ui");
sourceLink.setAttribute("target", "_blank");
linksDiv.append(sourceLink);
const separator = document.createElement("span");
separator.innerHTML = " · ";
linksDiv.append(separator);
const apiLink = document.createElement("a");
apiLink.innerHTML = "historical API";
apiLink.setAttribute("href", "https://chainlog.makerdao.com/api.html");
apiLink.setAttribute("target", "_blank");
linksDiv.append(apiLink);
document.body.append(linksDiv);

const connTable = document.createElement("table");
connTable.style.marginTop = "10px";
connTable.style.backgroundColor = "lightgrey";
connTable.style.marginBottom = "10px";
const providerRow = document.createElement("tr");
const providerName = document.createElement("td");
providerName.innerHTML = "provider:";
providerRow.append(providerName);
const providerValue = document.createElement("td");
providerValue.innerHTML = "loading…";
providerRow.append(providerValue);
connTable.append(providerRow);
const chainRow = document.createElement("tr");
const chainName = document.createElement("td");
chainName.innerHTML = "chain:";
chainRow.append(chainName);
const chainValue = document.createElement("td");
const chainSelect = document.createElement("select");
chainSelect.setAttribute("disabled", true);
chainSelect.style.color = "black";
const chainOption = document.createElement("option");
chainOption.innerHTML = "loading…";
chainOption.setAttribute("value", "mainnet");
chainSelect.append(chainOption);
const chainGoerli = document.createElement("option");
chainGoerli.innerHTML = "Görli";
chainGoerli.setAttribute("value", "goerli");
chainSelect.addEventListener("change", () => {
  infuraPrefix = chainSelect.value;
  chainPrefix = infuraPrefix === "mainnet" ? "" : "goerli.";
  chainApiPrefix = infuraPrefix === "mainnet" ? "" : "-goerli";
  endpoint = "https://" + infuraPrefix + ".infura.io/v3/633f64adbe364bb88127348d4fcc21ef";
  setUp();
});
chainValue.append(chainSelect);
chainRow.append(chainValue);
chainNotice = document.createElement("td");
chainRow.append(chainNotice);
connTable.append(chainRow);
document.body.append(connTable);

const canvas = document.createElement("div");
canvas.innerHTML = "loading…";
document.body.append(canvas);

let endpoint = "https://mainnet.infura.io/v3/633f64adbe364bb88127348d4fcc21ef";
const chainlog = "0xdA0Ab1e0017DEbCd72Be8599041a2aa3bA7e740F";
const mip21registry = "0xfa86d902f193b08ecd29ce90f040e8b6d167a4ed";

const hex2a = hexx => { // adapted from https://stackoverflow.com/a/3745677/15857007
  const hex = hexx.toString();
  let str = '';
  for (let i = 0; i < hex.length; i += 2) {
    const ch = hex.substr(i, 2);
    if (ch === '00') continue;
    str += String.fromCharCode(parseInt(ch, 16));
  }
  return str;
}

const infuraCall = (params, callback) => {
  const options = {
    method: "POST",
    body: '{"jsonrpc": "2.0", "method": "eth_call", "params": [' + JSON.stringify(params) + ', "latest"], "id": 0}'
  };
  fetch(endpoint, options).then(response => {
    if (response.ok) {
      response.json().then(content => callback(content.result))
    } else {
      response.json().then(content => {
        console.error("Infura: " + content.error.message);
        canvas.innerHTML = "error";
      });
    }
  });
}

const call = (params, callback) => {
  if (provider === "Metamask" && window.ethereum.isConnected()) {
    window.ethereum.request({
      method: "eth_call",
      params: [ params, "latest" ]
    }).then(response => callback(response))
    .catch(error => {
      console.log("falling back to Infura " + infuraPrefix);
      infuraCall(params, callback)
    });
  } else {
    infuraCall(params, callback);
  }
}


const getAddress = (keyHex, callback) => {
  call({
    to: chainlog,
    data: "0x21f8a721" + keyHex // getAddress(bytes32)
  }, addressHex => {
    try {
      const address = "0x" + addressHex.substring(26);
      callback(address);
    } catch (error) {
      console.error(error)
    }
  });
}


const listComponentsOf = (keyHex, response) => {
  call({
    to: mip21registry,
    data: "0x61bc161a" + keyHex // listComponents(bytes32 ilk)
  }, results => {

/*     const abi = ["listComponentsOf(bytes32 ilk) external view returns (bytes32[] memory names,address[] memory addrs,uint8[] memory variants) "];
    const ethersProvider = ethers.getDefaultProvider(infuraPrefix);
    const rwaRegistryContract = new ethers.Contract(chainlog, abi, ethersProvider);
    const results = rwaRegistryContract.listComponentsOf("a815ac4e" + keyHex); */
    const data = ethers.utils.defaultAbiCoder.decode(["bytes32[] names", "address[] addresses", "uint8[] variants"], results);
    console.log(data);
    response(data);
  });
}

const getChecksum = (address, callback) => {
  fetch(`https://chainlog.makerdao.com/checksum/${address}`).then(response => {
    if (response.ok) {
      response.text().then(checksum => {
        if (checksum.toLowerCase() === address) {
          callback(checksum);
        } else {
          callback(address);
        }
      }).catch(e => {
        callback(address);
      });
    } else {
      callback(address);
    }
  }).catch(e => {
    callback(address);
  });
}

const draw = data => {
  canvas.innerHTML = "";
  if (data === "0x") {
    const chainTitle = document.createElement("h3");
    chainTitle.innerHTML = "Wrong chain";
    canvas.append(chainTitle);
    const chainText = document.createElement("div");
    chainText.innerHTML = "The chainlog was not deployed to this chain at address " + mip21registry;
    canvas.append(chainText);
    const chainAdvice = document.createElement("h4");
    chainAdvice.innerHTML = "Select another chain on your Metamask plugin";
    canvas.append(chainAdvice);
    return;
  }
  const divAddress= document.createElement("div");
  divAddress.style.margin = "20px";
  canvas.append(divAddress);
  divAddress.innerHTML = "RWA Registry " + mip21registry
  data = data.substring(2 + 64 * 2);
  const formatsDiv = document.createElement("div");
  const formatsTitle = document.createElement("span");
  formatsTitle.setAttribute("id", "formatsTitle");
  formatsTitle.innerHTML = "copy entire RWA Registry as ";
  formatsTitle.setAttribute("entire", "copy entire RWA Registry as ");
  formatsTitle.setAttribute("filtered", "copy filtered addresses as ");
  formatsDiv.append(formatsTitle);
  const json = document.createElement("button");
  json.setAttribute("id", "json");
  json.setAttribute("class", "copy");
  json.setAttribute("name", "JSON");
  json.innerHTML = "JSON";
  json.addEventListener("click", () => {
    json.innerHTML = "load…";
    json.setAttribute("disabled", true);
    const objectJson = {};
    for (let i = 0; i < addressesList.length; i ++) {

      const path = "/html/body/div[3]/table/tr["+Number(3+i)+"]/td[1]";
      const level = document.evaluate(
          path, 
          document, 
          null, 
          XPathResult.FIRST_ORDERED_NODE_TYPE, 
          null).singleNodeValue.getAttribute("level")
          if(level == 0){
            const keyHex = document.evaluate(
              path, 
              document, 
              null, 
              XPathResult.FIRST_ORDERED_NODE_TYPE, 
              null).singleNodeValue.getAttribute("id");
              const key = hex2a(keyHex);
              const queryLower = filter.value.toLowerCase().replace(" ", "_");
              const queryAllLower = filterAll.value.toLowerCase();
              const keyLower = key.toLowerCase();
              if (keyLower.includes(queryLower) && addressesList[i].includes(queryAllLower)) {
                objectJson[key] = addressesList[i];
              }
          } else {
            const key = document.evaluate(
              path, 
              document, 
              null, 
              XPathResult.FIRST_ORDERED_NODE_TYPE, 
              null).singleNodeValue.textContent;
            const queryLower = filter.value.toLowerCase().replace(" ", "_");
            const queryAllLower = filterAll.value.toLowerCase();
            const keyLower = key.toLowerCase();
            if (keyLower.includes(queryLower) && addressesList[i].includes(queryAllLower)) {
              objectJson[key] = addressesList[i]
            }
          }
          if (i === addressesList.length-1) {
              const text = JSON.stringify(objectJson, null, 2);
              navigator.clipboard.writeText(text);
              uncopy();
              json.innerHTML = "copied";
              json.removeAttribute("disabled");
            }
    }
  });
  formatsDiv.append(json);
  const bash = document.createElement("button");
  bash.setAttribute("id", "bash");
  bash.setAttribute("class", "copy");
  bash.setAttribute("name", "BASH");
  bash.innerHTML = "BASH";
  bash.style.marginLeft = "5px";
  bash.addEventListener("click", () => {
    bash.innerHTML = "load…";
    bash.setAttribute("disabled", true);
    let text = "";
    for (let i = 0; i < addressesList.length; i ++) {

      const path = "/html/body/div[3]/table/tr["+Number(3+i)+"]/td[1]";
      const level = document.evaluate(
          path, 
          document, 
          null, 
          XPathResult.FIRST_ORDERED_NODE_TYPE, 
          null).singleNodeValue.getAttribute("level")
          if(level == 0){
            const keyHex = document.evaluate(
              path, 
              document, 
              null, 
              XPathResult.FIRST_ORDERED_NODE_TYPE, 
              null).singleNodeValue.getAttribute("id");
              const key = hex2a(keyHex);
              const queryLower = filter.value.toLowerCase().replace(" ", "_");
              const queryAllLower = filterAll.value.toLowerCase();
              const keyLower = key.toLowerCase();
              if (keyLower.includes(queryLower) && addressesList[i].includes(queryAllLower)) {
                const statement = `export ${key}=${addressesList[i]}\n`;
                text += statement;
              }
          } else {
          const key = document.evaluate(
            path, 
            document, 
            null, 
            XPathResult.FIRST_ORDERED_NODE_TYPE, 
            null).singleNodeValue.textContent;
          const queryLower = filter.value.toLowerCase().replace(" ", "_");
          const queryAllLower = filterAll.value.toLowerCase();
          const keyLower = key.toLowerCase();
          if (keyLower.includes(queryLower) && addressesList[i].includes(queryAllLower)) {
            const statement = `export ${key}=${addressesList[i]}\n`;
            text += statement;
          }
        }
        if (i === addressesList.length-1) {
          navigator.clipboard.writeText(text);
          uncopy();
          bash.innerHTML = "copied";
          bash.removeAttribute("disabled");
        }
    }
  });
  formatsDiv.append(bash);
  canvas.append(formatsDiv);
  const table = document.createElement("table");
  const header = document.createElement("tr");
  header.style.backgroundColor = "lightgrey";
  const tdContract = document.createElement("td");
  tdContract.innerHTML = "contract";
  header.append(tdContract);
  const tdAddress = document.createElement("td");
  tdAddress.innerHTML = "address";
  tdAddress.setAttribute("colspan", 3);
  header.append(tdAddress);
  const tdAbi = document.createElement("td");
  tdAbi.innerHTML = "ABI";
  tdAbi.setAttribute("colspan", 2);
  header.append(tdAbi);
  table.append(header);
  const tools = document.createElement("tr");

  const tdKey = document.createElement("td");
  const filter = document.createElement("input");
  filter.setAttribute("id", "filter");
  filter.setAttribute("placeholder", "filter");
  const trs = document.getElementsByClassName("tr");
  filter.addEventListener("focus", () => filter.select());
  filter.addEventListener("keyup", () => {
    toggleAll("filter");
    const filterAll = document.getElementById("filterAll");
    let filtered = false;
    for (let i = 0; i < trs.length; i++) {
      const tr = trs[i];
      const key = tr.children[0].innerHTML;
      const address = tr.children[1].innerHTML.toLowerCase();
      const notShowing = address.startsWith("<button");
      const queryLower = filter.value.toLowerCase().replace(" ", "_");
      const queryAllLower = filterAll.value.toLowerCase();
      const keyLower = key.toLowerCase();
      if (keyLower.includes(queryLower) && (
        notShowing || address.includes(queryAllLower))
      ) {
        tr.style.display = "table-row";
        tr.setAttribute("name", "tr-visible");
        if (tr.children[1].innerHTML.includes("<button")) {
          toggleAll("button");
        }
      } else {
        tr.style.display = "none";
        tr.setAttribute("name", "tr-hidden");
        filtered = true;
      }
    }
    const formatsTitle = document.getElementById("formatsTitle");
    if (filtered) {
      formatsTitle.innerHTML = formatsTitle.getAttribute("filtered");
    } else {
      formatsTitle.innerHTML = formatsTitle.getAttribute("entire");
    }
    const json = document.getElementById("json");
    json.innerHTML = json.name;
    const bash = document.getElementById("bash");
    bash.innerHTML = bash.name;
  });
  tdKey.append(filter);
  tools.append(tdKey);

  const tdView = document.createElement("td");
  const viewAll = document.createElement("button");
  viewAll.setAttribute("id", "viewAll");
  viewAll.innerHTML = "show all";
  viewAll.addEventListener("click", () => {
    viewAll.innerHTML = "loading…";
    viewAll.setAttribute("disabled", true);
    const trs = document.getElementsByName("tr-visible");
    for (let i = 0; i < trs.length; i++) {
      const tr = trs[i];
      const tds = tr.children;
      const tdKey = tds[0];
      const tdView = tds[1];
      tdView.innerHTML = "loading…";
      tdView.innerHTML = addressesList[tdKey.getAttribute("pos")];
      if (i === trs.length - 1) {
          toggleAll("filter");
          viewAll.innerHTML = "show all";
          viewAll.removeAttribute("disabled");
      }
    }
  });
  tdView.append(viewAll);
  const filterAll = document.createElement("input");
  filterAll.setAttribute("id", "filterAll");
  filterAll.setAttribute("placeholder", "filter");
  filterAll.style.width = "100%";
  filterAll.style.display = "none";
  filterAll.addEventListener("focus", () => filterAll.select());
  filterAll.addEventListener("keyup", () => {
    const filter = document.getElementById("filter");
    let filtered = false;
    for (let i = 0; i < trs.length; i++) {
      const tr = trs[i];
      const key = tr.children[0].innerHTML;
      const address = tr.children[1].innerHTML.toLowerCase();
      const notShowing = address.startsWith("<button");
      const queryLower = filter.value.toLowerCase().replace(" ", "_");
      const queryAllLower = filterAll.value.toLowerCase();
      const keyLower = key.toLowerCase();
      if (keyLower.includes(queryLower) && (
        notShowing || address.includes(queryAllLower))
      ) {
        tr.style.display = "table-row";
        tr.setAttribute("name", "tr-visible");
        if (tr.children[1].innerHTML.includes("<button")) {
          toggleAll("button");
        }
      } else {
        tr.style.display = "none";
        tr.setAttribute("name", "tr-hidden");
        filtered = true;
      }
    }
    const formatsTitle = document.getElementById("formatsTitle");
    if (filtered) {
      formatsTitle.innerHTML = formatsTitle.getAttribute("filtered");
    } else {
      formatsTitle.innerHTML = formatsTitle.getAttribute("entire");
    }
    const json = document.getElementById("json");
    json.innerHTML = json.name;
    const bash = document.getElementById("bash");
    bash.innerHTML = bash.name;
  });
  tdView.append(filterAll);
  tools.append(tdView);

  table.append(tools);
  let pos = 0;
  function populateTable(_ilk, _data, _addresses, _variants, level){
    ilk = _ilk
    data = _data
    addresses = _addresses
    variants = _variants

    let increment
    if (level === 0){
      increment = 64
    } else {
      increment = 1
    }
    for (let i = 0; i < data.length; i += increment) {
      const tr = document.createElement("tr");
      tr.setAttribute("class", "tr");
      tr.setAttribute("name", "tr-visible");
      tr.addEventListener("mouseover", () => {
        tr.style.backgroundColor = "lightgrey";
      });
      tr.addEventListener("mouseout", () => {
        tr.style.backgroundColor = "initial";
      });

      const tdKey = document.createElement("td");
      if(level === 0){
        const keyHex = data.substring(i, i + 64);
        const key = hex2a(keyHex);
        tdKey.innerHTML = key;
        tdKey.setAttribute("id", keyHex);
        tdKey.setAttribute("pos", pos);
        tdKey.setAttribute("level", level);
        tr.append(tdKey);

        getAddress(keyHex, address => {

            getChecksum(address, checksum =>{
              addressesList.unshift(checksum)
            });

        });

      } else {
        const key = hex2a(data[i]);
        tdKey.innerHTML = ilk + "-" + key + "-" + variants[i];
        tdKey.setAttribute("id", data[i]);
        tdKey.setAttribute("pos", pos);
        tdKey.setAttribute("level", level);
        tr.append(tdKey);

      }


      const tdView = document.createElement("td");
      const view = document.createElement("button");
      view.innerHTML = "show";
      view.setAttribute("level", level);
      view.setAttribute("pos", pos);
      view.addEventListener("click", () => {
        tdView.innerHTML = "loading…";
        if(view.getAttribute("level") === "0"){
          const path = "/html/body/div[3]/table/tr["+Number(3+Number(view.getAttribute("pos")))+"]/td[1]";
          getAddress(document.evaluate(
          path, 
          document, 
          null, 
          XPathResult.FIRST_ORDERED_NODE_TYPE, 
          null).singleNodeValue.getAttribute("id"), address => {
            getChecksum(address, checksum => {
              tdView.innerHTML = checksum;
            });
          });
        } else {
          getChecksum(addressesList[view.getAttribute("pos")], checksum => {
              tdView.innerHTML = checksum;
          });
        }
        if (showingAll()) {
          toggleAll("filter");
        }
      });
      tdView.append(view);
      tr.append(tdView);

      const tdCopy = document.createElement("td");
      const copy = document.createElement("button");
      copy.setAttribute("class", "copy");
      copy.setAttribute("name", "copy");
      copy.innerHTML = "copy";
      view.setAttribute("pos", pos);
      copy.addEventListener("click", () => {
        copy.innerHTML = "load…";
        copy.setAttribute("disabled", true);
        if(view.getAttribute("level") === "0"){
          const path = "/html/body/div[3]/table/tr["+Number(3+Number(view.getAttribute("pos")))+"]/td[1]";
          getAddress(document.evaluate(
          path,
          document, 
          null, 
          XPathResult.FIRST_ORDERED_NODE_TYPE, 
          null).singleNodeValue.getAttribute("id"), address => {
            getChecksum(address, checksum => {
              tdView.innerHTML = checksum;
              navigator.clipboard.writeText(checksum);
              uncopy();
              copy.innerHTML = "copied";
              copy.removeAttribute("disabled");
              if (showingAll()) {
                toggleAll("filter");
              }
            });
          });
        } else{
          getChecksum(addressesList[view.getAttribute("pos")], checksum => {
              tdView.innerHTML = checksum;
              navigator.clipboard.writeText(checksum);
              uncopy();
              copy.innerHTML = "copied";
              copy.removeAttribute("disabled");
              if (showingAll()) {
                toggleAll("filter");
              }
            });
        }
      });
      tdCopy.append(copy);
      tr.append(tdCopy);

      const tdEscan = document.createElement("td");
      const escan = document.createElement("button");
      escan.innerHTML = "Etherscan";
      view.setAttribute("pos", pos);
      escan.addEventListener("click", () => {
        escan.innerHTML = "loading…";
        escan.setAttribute("disabled", true);
        if(view.getAttribute("level") === "0"){
          const path = "/html/body/div[3]/table/tr["+Number(3+Number(view.getAttribute("pos")))+"]/td[1]";
          getAddress(document.evaluate(
          path, 
          document, 
          null, 
          XPathResult.FIRST_ORDERED_NODE_TYPE, 
          null).singleNodeValue.getAttribute("id"), address => {
            tdView.innerHTML = address;
            window.open("https://" + chainPrefix + "etherscan.io/address/" + address);
            escan.innerHTML = "Etherscan";
            escan.removeAttribute("disabled");
            if (showingAll()) {
              toggleAll("filter");
            }
          });
        } else {
            tdView.innerHTML = addressesList[view.getAttribute("pos")];
            window.open("https://" + chainPrefix + "etherscan.io/address/" + addressesList[view.getAttribute("pos")]);
            escan.innerHTML = "Etherscan";
            escan.removeAttribute("disabled");
            if (showingAll()) {
              toggleAll("filter");
            }
        }
      });
      tdEscan.append(escan);
      tr.append(tdEscan);

      const tdAbiCopy = document.createElement("td");
      const abiCopy = document.createElement("button");
      abiCopy.setAttribute("class", "copy");
      abiCopy.setAttribute("name", "copy ABI");
      abiCopy.innerHTML = "copy ABI";
      view.setAttribute("pos", pos);
      abiCopy.addEventListener("click", () => {
        abiCopy.innerHTML = "loading…";
        abiCopy.setAttribute("disabled", true);
        if(view.getAttribute("level") === "0"){
          const path = "/html/body/div[3]/table/tr["+Number(3+Number(view.getAttribute("pos")))+"]/td[1]";
          getAddress(document.evaluate(
          path, 
          document, 
          null, 
          XPathResult.FIRST_ORDERED_NODE_TYPE, 
          null).singleNodeValue.getAttribute("id"), address => {
            fetch("https://api" + chainApiPrefix + ".etherscan.io/api?apikey=1PX598KB4P6N6JI12SC9JVS1N3QM5QZIFB&module=contract&action=getabi"
            + "&address=" + address)
            .then(response => response.json()
            .then(data => {
              if (data.status === "1") {
                navigator.clipboard.writeText(data.result);
                uncopy();
                abiCopy.innerHTML = "copied";
              } else {
                console.error(data.result);
                abiCopy.innerHTML = "error";
              }
              abiCopy.removeAttribute("disabled");
            }));

          });

        }else{
            fetch("https://api" + chainApiPrefix + ".etherscan.io/api?apikey=1PX598KB4P6N6JI12SC9JVS1N3QM5QZIFB&module=contract&action=getabi"
            + "&address=" + addressesList[view.getAttribute("pos")])
            .then(response => response.json()
            .then(data => {
              if (data.status === "1") {
                navigator.clipboard.writeText(data.result);
                uncopy();
                abiCopy.innerHTML = "copied";
              } else {
                console.error(data.result);
                abiCopy.innerHTML = "error";
              }
              abiCopy.removeAttribute("disabled");
            }));
      }
      });
      tdAbiCopy.append(abiCopy);
      tr.append(tdAbiCopy);

      table.append(tr);
      
      if(level === 0){
        let component = data.substring(i, i + 64);
        listComponentsOf(component, response => {
          console.log(response.names)
          console.log(response.addresses)
          console.log(response.variants)
          addressesList = addressesList.concat(response.addresses)
          const level1Populated = populateTable(hex2a(component),response.names, response.addresses, response.variants, 1);
          canvas.append(level1Populated);
          level=1;
        });
      }
      pos++;
    }
    return table;
  } 
  const populated = populateTable(null, data, null, null, 0); 
    addressesList.reverse(); // level 0 is populated backwards, so here reverse the list so it is displayed correctly before concat() the components.
    canvas.append(populated);
    filter.focus();
}

const showingAll = () => {
  const trs = document.getElementsByName("tr-visible");
  for (let i = 0; i < trs.length; i++) {
    const tr = trs[i];
    const view = tr.children[1];
    if (view.innerHTML.includes("<")) {
      return false;
    }
  }
  return true;
}

const toggleAll = what => {
  const viewAll = document.getElementById("viewAll");
  const filterAll = document.getElementById("filterAll");
  if (what === "button") {
    viewAll.style.display = "block";
    filterAll.style.display = "none";
  } else if (what === "filter") {
    filterAll.style.display = "block";
    viewAll.style.display = "none";
    if (filterAll.value !== "") {
      filterAll.dispatchEvent(new Event("keyup"));
    }
  }
}

const uncopy = () => {
  const copies = document.getElementsByClassName("copy");
  for (let i = 0; i < copies.length; i++) {
    const copy = copies[i];
    copy.innerHTML = copy.name;
  }
}

        </script>
    </body>
</html>