// import { randomFromArray } from "../utils/array.js";
// import { explorerElement } from "../utils/elements.js";

// export function init() {
//   const chain = window.document.createElement("div");
//   chain.id = "chain";
//   explorerElement.append(chain);

//   // vecsResources.getOrCreate(/** @satisfies {Height}*/ (5), "height");
//   //
//   const miners = [
//     { name: "Foundry USA", color: "orange" },
//     { name: "Via BTC", color: "teal" },
//     { name: "Ant Pool", color: "emerald" },
//     { name: "F2Pool", color: "indigo" },
//     { name: "Spider Pool", color: "yellow" },
//     { name: "Mara Pool", color: "amber" },
//     { name: "SEC Pool", color: "violet" },
//     { name: "Luxor", color: "orange" },
//     { name: "Brains Pool", color: "cyan" },
//   ];

//   for (let i = 0; i <= 10; i++) {
//     const { name, color: _color } = randomFromArray(miners);
//     const { cubeElement, leftFaceElement, rightFaceElement, topFaceElement } =
//       createCube();

//     // cubeElement.style.setProperty("--color", `var(--${color})`);

//     const heightElement = window.document.createElement("p");
//     const height = (1_000_002 - i).toString();
//     const prefixLength = 7 - height.length;
//     const spanPrefix = window.document.createElement("span");
//     spanPrefix.style.opacity = "0.5";
//     spanPrefix.style.userSelect = "none";
//     heightElement.append(spanPrefix);
//     spanPrefix.innerHTML = "#" + "0".repeat(prefixLength);
//     const spanHeight = window.document.createElement("span");
//     heightElement.append(spanHeight);
//     spanHeight.innerHTML = height;
//     rightFaceElement.append(heightElement);

//     const feesElement = window.document.createElement("div");
//     feesElement.classList.add("fees");
//     leftFaceElement.append(feesElement);
//     const averageFeeElement = window.document.createElement("p");
//     feesElement.append(averageFeeElement);
//     averageFeeElement.innerHTML = `~1.41`;
//     const feeRangeElement = window.document.createElement("p");
//     feesElement.append(feeRangeElement);
//     const minFeeElement = window.document.createElement("span");
//     minFeeElement.innerHTML = `0.11`;
//     feeRangeElement.append(minFeeElement);
//     const dashElement = window.document.createElement("span");
//     dashElement.style.opacity = "0.5";
//     dashElement.innerHTML = `-`;
//     feeRangeElement.append(dashElement);
//     const maxFeeElement = window.document.createElement("span");
//     maxFeeElement.innerHTML = `12.1`;
//     feeRangeElement.append(maxFeeElement);
//     const feeUnitElement = window.document.createElement("p");
//     feesElement.append(feeUnitElement);
//     feeUnitElement.style.opacity = "0.5";
//     feeUnitElement.innerHTML = `sat/vB`;

//     const spanMiner = window.document.createElement("span");
//     spanMiner.innerHTML = name;
//     topFaceElement.append(spanMiner);

//     chain.prepend(cubeElement);
//   }
// }

// function createCube() {
//   const cubeElement = window.document.createElement("div");
//   cubeElement.classList.add("cube");

//   const rightFaceElement = window.document.createElement("div");
//   rightFaceElement.classList.add("face");
//   rightFaceElement.classList.add("right");
//   cubeElement.append(rightFaceElement);

//   const leftFaceElement = window.document.createElement("div");
//   leftFaceElement.classList.add("face");
//   leftFaceElement.classList.add("left");
//   cubeElement.append(leftFaceElement);

//   const topFaceElement = window.document.createElement("div");
//   topFaceElement.classList.add("face");
//   topFaceElement.classList.add("top");
//   cubeElement.append(topFaceElement);

//   return {
//     cubeElement,
//     leftFaceElement,
//     rightFaceElement,
//     topFaceElement,
//   };
// }