Blockstream · Randy808 · Jul 29, 2026 · Aug 10, 2026
diff --git a/client/src/app.js b/client/src/app.js
@@ -72,6 +72,23 @@ const trackNewEntries = (items$, getId, getNewIds=defaultNewIds) => {
     .scan((current, mod) => mod(current), {})
 }
 
+const trackPendingBlockTemplateUpdate = (previous, template) => {
+  if (!template || !Array.isArray(template.transactions)) {
+    return { template: null, key: null, transactionCount: null, delta: null }
+  }
+
+  const key = template.previousblockhash != null
+      ? template.previousblockhash
+      : template.height
+      , transactionCount = template.transactions.length + 1
+      , isSamePendingBlock = previous.key != null && key != null && previous.key == key
+      , delta = isSamePendingBlock && previous.transactionCount != null
+          ? transactionCount - previous.transactionCount
+          : null
+
+  return { template, key, transactionCount, delta: delta || null }
+}
+
 export default function main({ DOM, HTTP, route, storage, scanner: scan$, search: searchResult$, blinding: unblinded$ }) {
   const
 
@@ -137,6 +154,7 @@ export default function main({ DOM, HTTP, route, storage, scanner: scan$, search
 
   , togTx$    = click('[data-toggle-tx]').map(d => d.toggleTx).merge(page$.mapTo(null), expandTx$)
   , togBlock$ = click('[data-toggle-block]').map(d => d.toggleBlock).merge(page$.mapTo(null), expandBl$)
+  , togPendingBlockDetails$ = click('[data-toggle-pending-block-details]')
 
   , copy$     = click('[data-clipboard-copy]').map(d => d.clipboardCopy)
   , pushtx$   = (process.browser
@@ -237,6 +255,11 @@ export default function main({ DOM, HTTP, route, storage, scanner: scan$, search
   // Currently collapsed tx/block ("details")
   , openTx$ = togTx$.startWith(null).scan((prev, txid) => prev == txid ? null : txid)
   , openBlock$ = togBlock$.startWith(null).scan((prev, blockhash) => prev == blockhash ? null : blockhash)
+  , pendingBlockDetailsOpen$ = togPendingBlockDetails$
+      .mapTo(open => !open)
+      .merge(page$.mapTo(_ => false))
+      .startWith(false)
+      .scan((open, mod) => mod(open))
 
   // Spending txs map (reset on every page nav)
   , spends$ = O.merge(
@@ -251,6 +274,15 @@ export default function main({ DOM, HTTP, route, storage, scanner: scan$, search
   , mempool$ = reply('mempool').startWith(null)
   , mempoolRecent$ = reply('recent')
   , newTxEntries$ = trackNewEntries(mempoolRecent$, tx => tx.txid)
+  , blockTemplateState$ = (isBitcoinNetwork
+      ? reply('block-template').startWith(null)
+      : O.of(null))
+      .scan(trackPendingBlockTemplateUpdate, {
+        template: null,
+        key: null,
+        transactionCount: null,
+        delta: null,
+      })
 
   // dashboard
   , dashboardPegAsset$ = !showPegData
@@ -373,6 +405,7 @@ export default function main({ DOM, HTTP, route, storage, scanner: scan$, search
   // App state
   , state$ = combine({ t$, error$, tipHeight$, spends$
                      , goBlocks$, blocks$, nextBlocks$, prevBlocks$, dashboardState$
+                     , pendingBlockDetailsOpen$, blockTemplateState$
                      , dashboardEpochStartBlock$, dashboardPreviousDifficultyBlock$
                      , newBlockEntries$, newTxEntries$
                      , goBlock$, block$, blockStatus$, blockTxs$, nextBlockTxs$, prevBlockTxs$, openBlock$
@@ -489,6 +522,18 @@ export default function main({ DOM, HTTP, route, storage, scanner: scan$, search
                               , { category: 'dashboard-peg-chain-txs', method: 'GET', path: `/asset/${nativeAssetId}/txs/chain`, bg: true }
                               , { category: 'dashboard-peg-mempool-txs', method: 'GET', path: `/asset/${nativeAssetId}/txs/mempool`, bg: true }]))
 
+    // refresh the pending block template while the Bitcoin dashboard remains open
+    , isBitcoinNetwork
+      ? O.merge(
+          O.merge(goHome$, tickWhileViewing(30000, 'dashBoard', view$))
+            .throttleTime(1000)
+        , latestBlock$.skip(1)
+            .withLatestFrom(view$)
+            .filter(([ _, view ]) => view == 'dashBoard')
+        )
+          .mapTo({ category: 'block-template', method: 'GET', path: '/block-template', bg: true })
+      : O.empty()
+
     , goHome$.flatMap(_ =>  [{ category: 'blocks',    method: 'GET', path: '/blocks' }
                               , { category: 'recent',    method: 'GET', path: '/mempool/recent' }
                               , { category: 'fee-est',    method: 'GET', path: '/fee-estimates' }

diff --git a/client/src/components/block-details-card.js b/client/src/components/block-details-card.js
@@ -1,22 +1,171 @@
 import { BlockGrid } from "./block-grid";
+import { InfoCard } from "./info-card";
 import { InfoStat } from "./info-stat";
+import { MinusIcon, PlusIcon } from "./icons";
 import { StatusBadge } from "./status-badge";
 import { ElapsedTime } from "./elapsed-time";
 import { Tooltip } from "./tooltip";
+import { maxBlockWeight } from "../const";
 import {
+  formatHex,
   formatTime,
   formatVMB,
   getBlockPercentageUsed,
 } from "../views/util";
 
+// Require behind env conditional so it gets removed by `envify` on non-elements builds
+const BlockSignatures =
+  process.env.IS_ELEMENTS &&
+  require("./block-signatures").default;
+
 const staticRoot = process.env.STATIC_ROOT || "";
 
 const formatInteger = (value) =>
   Number.isFinite(value) ? value.toLocaleString() : "N/A";
 
+const formatScaledValue = (value, divisor, suffix) => {
+  if (!Number.isFinite(value)) return "N/A";
+
+  return `${(value / divisor).toFixed(2).replace(/\.00$/, "")} ${suffix}`;
+};
+
+const formatVirtualSize = (weight) => {
+  if (!Number.isFinite(weight)) return "N/A";
+
+  const virtualSize = Math.ceil(weight / 4);
+  if (virtualSize < 1_000) return `${virtualSize.toLocaleString()} vB`;
+  if (virtualSize < 1_000_000) {
+    return formatScaledValue(virtualSize, 1_000, "vKB");
+  }
+
+  return formatScaledValue(virtualSize, 1_000_000, "vMB");
+};
+
+const clampPercentage = (value) =>
+  Number.isFinite(value) ? Math.min(Math.max(value, 0), 100) : 0;
+
+const detailTooltip = (text) => ({
+  iconSrc: `${staticRoot}img/icons/tooltip.svg`,
+  text,
+});
+
+const detailBar = ({ title, headerValue, fillPercentage, fillClass }) => (
+  <div className="bar-container">
+    <div className="bar-header">
+      <div className="bar-title">{title}</div>
+      <div className="bar-header-value">{headerValue}</div>
+    </div>
+    <div className="bar-outline">
+      <div
+        className={`bar-fill ${fillClass}`}
+        style={{ width: `${clampPercentage(fillPercentage)}%` }}
+      ></div>
+    </div>
+  </div>
+);
+
+const ExpandedBlockDetails = ({ block }) => {
+  const weightPercentage = getBlockPercentageUsed(block.weight);
+  const sizePercentage = (block.size / maxBlockWeight) * 100;
+
+  return (
+    <div id="expanded-block-details" className="expanded-block-details">
+      <InfoCard
+        className="block-detail-time-panel"
+        title="Time Since Last Block"
+        tooltip={detailTooltip("Time elapsed since this block was mined.")}
+        value={<ElapsedTime timestamp={block.timestamp} compact />}
+        footer={`Block #${block.height.toLocaleString()}`}
+      />
+      <InfoCard
+        className="block-detail-transactions-panel"
+        title="Transactions"
+        tooltip={detailTooltip(
+          "Number of transactions included in this block.",
+        )}
+        value={formatInteger(block.tx_count)}
+        footer="In block"
+      />
+      <InfoCard
+        className="block-detail-panel-full block-detail-weight-panel"
+        title="Block Weight"
+        tooltip={detailTooltip(
+          "Block weight and serialized size compared with their limits.",
+        )}
+        body={
+          <div className="block-detail-bars">
+            {detailBar({
+              title: "Weight",
+              headerValue: `${formatScaledValue(
+                block.weight,
+                1_000_000,
+                "MWU",
+              )} / ${formatScaledValue(
+                maxBlockWeight,
+                1_000_000,
+                "MWU",
+              )}`,
+              fillPercentage: weightPercentage,
+              fillClass: "block-weight-weight-bar",
+            })}
+            {detailBar({
+              title: "Size",
+              headerValue: `${formatScaledValue(
+                block.size,
+                1_000_000,
+                "MB",
+              )} / ${formatScaledValue(
+                maxBlockWeight,
+                1_000_000,
+                "MB",
+              )}`,
+              fillPercentage: sizePercentage,
+              fillClass: "block-weight-size-bar",
+            })}
+          </div>
+        }
+      />
+      <InfoCard
+        title="Virtual Size"
+        tooltip={detailTooltip("Block weight divided by four.")}
+        value={formatVirtualSize(block.weight)}
+      />
+      <InfoCard
+        title="Version"
+        tooltip={detailTooltip("Version bits recorded in the block header.")}
+        value={Number.isFinite(block.version) ? formatHex(block.version) : "N/A"}
+      />
+      {process.env.IS_ELEMENTS ? (
+        <InfoCard
+          className="block-detail-panel-full block-detail-signatures-panel"
+          title="Block Signatures"
+          tooltip={detailTooltip("Signatures authorizing this Elements block.")}
+          body={<BlockSignatures block={block} />}
+        />
+      ) : (
+        <InfoCard
+          className="block-detail-panel-full"
+          title="Nonce"
+          tooltip={detailTooltip("Nonce recorded in the block header.")}
+          value={Number.isFinite(block.nonce) ? formatHex(block.nonce) : "N/A"}
+        />
+      )}
+      <InfoCard
+        className="block-detail-panel-full"
+        title="Merkle Root"
+        tooltip={detailTooltip(
+          "Commitment to all transactions included in the block.",
+        )}
+        value={block.merkle_root || "N/A"}
+      />
+    </div>
+  );
+};
+
 const BlockDetailsCard = ({
   className,
   block,
+  detailsOpen = false,
   statusText,
   statusVariant = "success",
   t,
@@ -26,7 +175,13 @@ const BlockDetailsCard = ({
     : 0;
 
   return (
-    <div className={className}>
+    <div
+      className={
+        className
+          ? `block-details-card-body ${className}`
+          : "block-details-card-body"
+      }
+    >
       <div className="block-details-card-summary">
         <BlockGrid blockWeight={block && block.weight} />
 
@@ -56,25 +211,38 @@ const BlockDetailsCard = ({
             {statusText ? (
               <StatusBadge variant={statusVariant}>{statusText}</StatusBadge>
             ) : null}
+
+            <button
+              aria-controls="expanded-block-details"
+              aria-expanded={detailsOpen ? "true" : "false"}
+              className="block-details-card-details-button"
+              type="button"
+              data-toggleBlock={block ? block.id : ""}
+            >
+              {detailsOpen ? <MinusIcon /> : <PlusIcon />}
+              Details
+            </button>
           </div>
 
           <div className="block-details-card-stats">
             <InfoStat
-              title={t ? t`Transactions` : "TRANSACTIONS"}
+              title="TIME SINCE LAST BLOCK"
+              value={
+                block ? (
+                  <ElapsedTime timestamp={block.timestamp} compact />
+                ) : (
+                  "N/A"
+                )
+              }
+            />
+            <InfoStat
+              title="TRANSACTIONS"
               value={block ? formatInteger(block.tx_count) : "N/A"}
             />
             <InfoStat
               title={t ? t`Size` : "SIZE"}
               value={block ? formatVMB(block.size, "MB") : "N/A"}
             />
-            <InfoStat
-              title={t ? t`Virtual size` : "VIRTUAL SIZE"}
-              value={
-                block && Number.isFinite(block.weight)
-                  ? `${Math.ceil(block.weight / 4 / 1000)} vKB`
-                  : "N/A"
-              }
-            />
           </div>
 
           <div className="block-details-card-progress">
@@ -105,6 +273,8 @@ const BlockDetailsCard = ({
           </div>
         </div>
       </div>
+
+      {detailsOpen && block ? <ExpandedBlockDetails block={block} /> : null}
     </div>
   );
 };

diff --git a/client/src/components/block-grid.js b/client/src/components/block-grid.js
@@ -1,6 +1,7 @@
-import { maxBlockWeight } from "../const";
+import { blockGridLoadingDelayMs, maxBlockWeight } from "../const";
 
 const GRID_LENGTH = 15;
+const LOADING_GRID_LENGTH = 5;
 
 const drawBlockGrid = (canvas, blockWeight) => {
   if (
@@ -59,7 +60,35 @@ const drawGrid = (vnode, blockWeight) => {
   draw();
 };
 
-export const BlockGrid = ({ blockWeight } = {}) => {
+const BlockGridLoading = ({ loadingDelayMs }) => (
+  <div
+    className="block-details-card-grid-loading"
+    role="status"
+    aria-label="Loading block utilization"
+    style={{ animationDelay: `${loadingDelayMs}ms` }}
+  >
+    <div className="pending-block-grid-loading-wave" aria-hidden="true">
+      {Array.from({
+        length: LOADING_GRID_LENGTH * LOADING_GRID_LENGTH,
+      }).map((_, index) => {
+        const row = Math.floor(index / LOADING_GRID_LENGTH);
+        const column = index % LOADING_GRID_LENGTH;
+
+        return (
+          <span
+            key={index}
+            style={{ animationDelay: `${(row + column) * 70}ms` }}
+          ></span>
+        );
+      })}
+    </div>
+  </div>
+);
+
+export const BlockGrid = ({
+  blockWeight,
+  loadingDelayMs = blockGridLoadingDelayMs,
+} = {}) => {
   const hasBlockWeight = Number.isFinite(blockWeight);
   const percentage = hasBlockWeight
     ? Math.min(
@@ -83,6 +112,9 @@ export const BlockGrid = ({ blockWeight } = {}) => {
         hook-insert={(vnode) => drawGrid(vnode, blockWeight)}
         hook-postpatch={(_, vnode) => drawGrid(vnode, blockWeight)}
       ></canvas>
+      {!hasBlockWeight ? (
+        <BlockGridLoading loadingDelayMs={loadingDelayMs} />
+      ) : null}
     </div>
   );
 };
diff --git a/client/src/components/icons.js b/client/src/components/icons.js