website_next: part 5

website_next/explore/block/index.js

@@ -4,19 +4,33 @@ import { createDifficultyPane } from "./difficulty.js";
 import { createRewardsPane } from "./rewards.js";
 import { createTransactionPane } from "./transactions.js";
 import { createFeeChart } from "./fee-chart.js";
+import { createBlockPreviewPane } from "./preview/index.js";
 import { appendPane } from "./pane.js";
 import { createBlockReceipt } from "./receipt.js";
 
+function noop() {}
+
 export function createBlockDetails() {
   const element = document.createElement("section");
   const receipt = createBlockReceipt();
   const header = createBlockHeader([receipt.button]);
   const content = document.createElement("div");
+  let destroyPreview = noop;
 
   element.id = "block-details";
   element.hidden = true;
   element.append(header.element, content);
 
+  function clearContent() {
+    destroyPreview();
+    destroyPreview = noop;
+
+    for (const chart of content.querySelectorAll("[data-fee-chart]")) {
+      chart.dispatchEvent(new Event("chart:destroy"));
+    }
+    content.textContent = "";
+  }
+
   /** @param {import("../../modules/brk-client/index.js").BlockInfoV1} block */
   function update(block) {
     const extras = block.extras;
@@ -25,15 +39,16 @@ export function createBlockDetails() {
     header.update(block);
     receipt.update(block);
 
-    for (const chart of content.querySelectorAll("[data-fee-chart]")) {
-      chart.dispatchEvent(new Event("chart:destroy"));
-    }
-    content.textContent = "";
+    clearContent();
 
+    const preview = createBlockPreviewPane(block);
+
+    destroyPreview = preview.destroy;
     appendPane(content, "mining", [createMinerPane(block)]);
     appendPane(content, "difficulty", [createDifficultyPane(block)]);
     appendPane(content, "rewards", [createRewardsPane(extras)]);
     appendPane(content, "block", [createTransactionPane(block)]);
+    appendPane(content, "preview", [preview.element]);
     appendPane(content, "fees", [
       createFeeChart(extras.feeRange, extras.avgFeeRate),
     ]);