From c8e789ef84aa7e17c2b576e549393392076ac62e Mon Sep 17 00:00:00 2001
From: Randall Naar <rnd.naar@gmail.com>
Date: Mon, 14 Sep 2026 11:37:17 -0400
Subject: [PATCH] Added confirmation polling to transaction page.

---
 README.md                             |   8 +
 client/src/app.js                     |  18 +-
 client/src/components/status-badge.js |   4 +-
 client/src/views/tx.js                |  19 +-
 test/app.test.js                      | 279 ++++++++++++++++++++++++++
 5 files changed, 318 insertions(+), 10 deletions(-)

diff --git a/README.md b/README.md
index 8ad9790f..b37def33 100644
--- a/README.md
+++ b/README.md
@@ -80,6 +80,14 @@ transactions also refresh on new blocks rather than on a timer. A newly observed
 tip resets pending block template polling and delays the next request by 15
 seconds so the electrs cache can refresh.
 
+While an unconfirmed transaction page is focused, mempool summary and fee
+estimates refresh on the standard cadence to keep its ETA, mempool depth, and
+fee analysis current. The transaction confirmation status does not use another
+fixed-rate poll: each newly observed tip requests `/tx/:txid/status`. Once the
+transaction is confirmed, those unconfirmed-transaction refreshes stop and the
+containing block metadata is loaded for the block details shown below the
+transaction.
+
 The dashboard requests both `/mempool/recent` and `/mempool` because they serve
 different UI contracts. `/mempool/recent` supplies the recent transaction list;
 `/mempool` supplies aggregate backlog fields such as transaction count, virtual
diff --git a/client/src/app.js b/client/src/app.js
index a5ff5f08..647c5f9c 100644
--- a/client/src/app.js
+++ b/client/src/app.js
@@ -395,7 +395,16 @@ export default function main(
     ).startWith(null).scan((S, mod) => mod(S))
 
   // Single TX
-  , tx$ = reply('tx').merge(goTx$.mapTo(null)).startWith(null)
+  , tx$ = O.merge(
+      reply('tx').map(tx => _ => tx),
+      reply('tx-status', true).map(r => tx =>
+        tx && tx.txid == r.request.txid && !tx.status.confirmed && r.body.confirmed
+          ? { ...tx, status: r.body }
+          : tx),
+      page$.mapTo(_ => null)
+    ).startWith(_ => null)
+      .scan((tx, update) => update(tx), null)
+      .distinctUntilChanged()
   , txBlock$ = reply('tx-block').merge(goTx$.mapTo(null)).startWith(null)
 
   // Predecessor metadata for confirmed block interval calculations
@@ -633,6 +642,13 @@ export default function main(
     // fetch single tx (including confirmation status)
     , goTx$.map(txid        => ({ category: 'tx',         method: 'GET', path: `/tx/${txid}` }))
 
+    // Refresh unconfirmed transactions on observed tip-height changes,
+    // reusing the existing tip poll.
+    , !pollingEnabled ? O.empty() : subsequentTipHeight$
+        .withLatestFrom(view$, tx$, (_, view, tx) => ({ view, tx }))
+        .filter(({ view, tx }) => view == 'tx' && tx && tx.status && !tx.status.confirmed && hasFocus())
+        .map(({ tx })         => ({ category: 'tx-status', method: 'GET', path: `/tx/${tx.txid}/status`, txid: tx.txid, bg: true }))
+
     // fetch the block containing a confirmed tx
     , tx$.filter(tx         => tx && tx.status && tx.status.confirmed && tx.status.block_hash)
         .map(tx             => ({ category: 'tx-block',   method: 'GET', path: `/block/${tx.status.block_hash}` }))
diff --git a/client/src/components/status-badge.js b/client/src/components/status-badge.js
index f9918a3d..dd37509d 100644
--- a/client/src/components/status-badge.js
+++ b/client/src/components/status-badge.js
@@ -11,8 +11,8 @@ export const StatusBadge = (
   </span>
 );
 
-export const StatusDot = () => (
-  <span className="confirmation-status-dot" aria-hidden="true">
+export const StatusDot = ({ key } = {}) => (
+  <span key={key} className="confirmation-status-dot" aria-hidden="true">
     <span className="confirmation-status-dot-back"></span>
     <span className="confirmation-status-dot-middle"></span>
     <span className="confirmation-status-dot-front"></span>
diff --git a/client/src/views/tx.js b/client/src/views/tx.js
index 8823e742..5d727d16 100644
--- a/client/src/views/tx.js
+++ b/client/src/views/tx.js
@@ -67,7 +67,7 @@ export default ({
   return layout(
     [
       <div className="tx-page">
-        {txHeader(tx, { t, tipHeight, ...S })}
+        {txHeader(tx, { ...S, block, t, tipHeight })}
         {unblinded && unblinded.error && (
           <div className="transaction-warning text-danger mt-3">
             {t`Warning:`} {unblinded.error.toString()}
@@ -231,6 +231,7 @@ const btnDetailsContent = (isOpen, t) => (
 const txHeader = (
   tx,
   {
+    block,
     tipHeight,
     feeEst,
     t,
@@ -251,10 +252,12 @@ const txHeader = (
     : confEstimate == -1
       ? t`Unknown`
       : `~${Math.ceil(confEstimate * targetBlockIntervalSeconds / 60)} min`;
-  const confirmationTime =
-    isConfirmed && Number.isFinite(tx.status.block_time)
-      ? formatTime(tx.status.block_time)
-      : "N/A";
+  const blockTime = isConfirmed && Number.isFinite(tx.status.block_time)
+    ? tx.status.block_time
+    : block && block.timestamp;
+  const confirmationTime = Number.isFinite(blockTime)
+    ? formatTime(blockTime)
+    : "N/A";
   const segwitSavings = segwitGainsView(segwitGains, t);
 
   return (
@@ -279,9 +282,11 @@ const txHeader = (
             </button>
             <StatusBadge variant={isConfirmed ? "success" : "warning"}>
               {!isConfirmed ? (
-                <StatusDot />
+                <StatusDot key="transaction-confirmation-dot" />
               ) : null}
-              <span>{confirmationText(tx.status, tipHeight, t)}</span>
+              <span key="transaction-confirmation-label">
+                {confirmationText(tx.status, tipHeight, t)}
+              </span>
             </StatusBadge>
           </div>
           <div className="info-stats-row">
diff --git a/test/app.test.js b/test/app.test.js
index 96a55449..e6a4391e 100644
--- a/test/app.test.js
+++ b/test/app.test.js
@@ -1,5 +1,6 @@
 const test = require("node:test");
 const assert = require("node:assert/strict");
+const render = require("snabbdom-to-html");
 const { Subject } = require("../client/node_modules/rxjs/Subject");
 const {
   TestScheduler,
@@ -22,6 +23,8 @@ const {
   schedulePollsWhileActive,
   tickWhileFocused,
 } = require("../client/src/util");
+const { formatTime } = require("../client/src/views/util");
+const makeRouteDriver = require("../client/src/driver/route");
 const {
   default: main,
   dashboardNewBlocks,
@@ -68,6 +71,24 @@ const makeBlockRoute = (hash) => {
   return route;
 };
 
+const makeTxRoute = (txid) => {
+  const location = {
+    hash: "",
+    key: "tx",
+    params: { txid },
+    pathname: `/tx/${txid}`,
+    query: {},
+  };
+  const location$ = O.of(location);
+  const route = (pattern) =>
+    pattern === undefined || pattern === "/tx/:txid"
+      ? location$
+      : empty$;
+
+  route.all$ = location$;
+  return route;
+};
+
 const makeApiRoute = () => {
   const location = {
     hash: "",
@@ -128,6 +149,41 @@ const requestFrames = (requests, category) => requests
   .filter((request) => request.category === category)
   .map((request) => request.frame);
 
+const findVNode = (vnode, predicate) => {
+  if (!vnode) return null;
+  if (predicate(vnode)) return vnode;
+
+  for (const child of vnode.children || []) {
+    const match = findVNode(child, predicate);
+    if (match) return match;
+  }
+
+  return null;
+};
+
+const transactionStatusBadge = (vnode) => findVNode(
+  vnode,
+  (child) => child.data && child.data.class && child.data.class["status-badge"],
+);
+
+const makeTx = (txid, status = { confirmed: false }) => ({
+  txid,
+  version: 2,
+  locktime: 0,
+  size: 100,
+  weight: 400,
+  fee: 100,
+  vin: [{ is_coinbase: true, sequence: 0xffffffff }],
+  vout: [{
+    asset: "asset-id",
+    scriptpubkey: "",
+    scriptpubkey_asm: "",
+    scriptpubkey_type: "fee",
+    value: 100,
+  }],
+  status,
+});
+
 const highValueAssetRequestCount = (requests, frame) => requests.filter(
   (request) =>
     request.frame === frame &&
@@ -437,6 +493,229 @@ test("refreshes the dashboard block list when the tip height changes", () => {
   );
 });
 
+test("refreshes an unconfirmed transaction on new tips and loads its confirming block", () => {
+  const scheduler = new TestScheduler((actual, expected) =>
+    assert.deepEqual(actual, expected));
+  const txid = "a".repeat(64);
+  const blockHash = "b".repeat(64);
+  const previousBlockHash = "c".repeat(64);
+  const txResponses = new Subject();
+  const txStatusResponses = new Subject();
+  const txBlockResponses = new Subject();
+  const tipHeightResponses = new Subject();
+  const requests = [];
+  const vnodes = [];
+  let focused = false;
+  const sources = makeSources({
+    responseStreams: {
+      tx: txResponses,
+      "tx-status": txStatusResponses,
+      "tx-block": txBlockResponses,
+      "tip-height": tipHeightResponses,
+    },
+    route: makeTxRoute(txid),
+  });
+  const sinks = main(sources, {
+    ...pollingOptions(scheduler),
+    hasFocus: () => focused,
+  });
+
+  sinks.HTTP.subscribe((request) => requests.push(request));
+  sinks.DOM.subscribe((vnode) => vnodes.push(vnode));
+  txResponses.next(O.of({ body: makeTx(txid) }));
+
+  const unconfirmedVNode = vnodes[vnodes.length - 1];
+  assert.match(render(unconfirmedVNode), /Unconfirmed/);
+  assert.doesNotMatch(render(unconfirmedVNode), /Transaction Block/);
+  assert.deepEqual(
+    transactionStatusBadge(unconfirmedVNode).children
+      .filter(Boolean)
+      .map((child) => child.key),
+    ["transaction-confirmation-dot", "transaction-confirmation-label"],
+  );
+
+  tipHeightResponses.next(O.of({ text: "100" }));
+  tipHeightResponses.next(O.of({ text: "100" }));
+  tipHeightResponses.next(O.of({ text: "101" }));
+  assert.equal(requestFrames(requests, "tx-status").length, 0);
+
+  focused = true;
+  tipHeightResponses.next(O.of({ text: "102" }));
+  const statusRequest = requests.find((request) => request.category === "tx-status");
+  assert.deepEqual(statusRequest, {
+    bg: true,
+    category: "tx-status",
+    method: "GET",
+    txid,
+    url: `/api/tx/${txid}/status`,
+  });
+
+  scheduler.maxFrames = pollIntervalsMs.standard;
+  scheduler.flush();
+  assert.equal(requestFrames(requests, "mempool").length, 2);
+  assert.equal(requestFrames(requests, "fee-est").length, 2);
+
+  txStatusResponses.next(O.of({
+    body: {
+      confirmed: true,
+      block_hash: blockHash,
+      block_height: 101,
+    },
+    request: statusRequest,
+  }));
+
+  assert.ok(requests.some((request) =>
+    request.category === "tx-block" &&
+    request.url === `/api/block/${blockHash}`
+  ));
+  assert.match(render(vnodes[vnodes.length - 1]), /Transaction Block/);
+  assert.match(render(vnodes[vnodes.length - 1]), /Loading block/);
+  assert.deepEqual(
+    transactionStatusBadge(vnodes[vnodes.length - 1]).children
+      .filter(Boolean)
+      .map((child) => child.key),
+    ["transaction-confirmation-label"],
+  );
+
+  txBlockResponses.next(O.of({
+    body: {
+      id: blockHash,
+      height: 101,
+      previousblockhash: previousBlockHash,
+      timestamp: 1_700_000_000,
+      tx_count: 1,
+      size: 1_000,
+      weight: 4_000,
+      version: 1,
+      nonce: 2,
+      merkle_root: "d".repeat(64),
+    },
+  }));
+
+  const confirmedHtml = render(vnodes[vnodes.length - 1]);
+  assert.match(confirmedHtml, /Confirmed/);
+  assert.match(confirmedHtml, /Transaction Block/);
+  assert.match(confirmedHtml, /#101/);
+  assert.ok(confirmedHtml.split(formatTime(1_700_000_000)).length > 2);
+  assert.ok(
+    confirmedHtml.indexOf("Transaction Block") >
+      confirmedHtml.indexOf('id="transaction-box"'),
+  );
+
+  tipHeightResponses.next(O.of({ text: "103" }));
+  scheduler.maxFrames = 3 * pollIntervalsMs.standard;
+  scheduler.flush();
+  assert.equal(requestFrames(requests, "tx-status").length, 1);
+  assert.equal(requestFrames(requests, "mempool").length, 2);
+  assert.equal(requestFrames(requests, "fee-est").length, 2);
+  assert.equal(requestFrames(requests, "tx-block").length, 1);
+  assert.deepEqual(
+    requests.filter((request) => request.category === "previous-block")
+      .map((request) => request.url),
+    [`/api/block/${previousBlockHash}`],
+  );
+});
+
+test("ignores an in-flight transaction status response after leaving its page", () => {
+  const txid = "a".repeat(64);
+  const page$ = new Subject();
+  const txResponses = new Subject();
+  const txStatusResponses = new Subject();
+  const pendingStatus = new Subject();
+  const tipHeightResponses = new Subject();
+  const requests = [];
+  let state;
+  const sinks = main(makeSources({
+    route: makeRouteDriver(() => page$)(empty$),
+    responseStreams: {
+      tx: txResponses,
+      "tx-status": txStatusResponses,
+      "tip-height": tipHeightResponses,
+    },
+  }), pollingOptions(new TestScheduler(() => {})));
+
+  sinks.HTTP.subscribe((request) => requests.push(request));
+  sinks.state.subscribe((next) => { state = next; });
+  page$.next({ pathname: `/tx/${txid}`, hash: "" });
+  txResponses.next(O.of({ body: makeTx(txid) }));
+  tipHeightResponses.next(O.of({ text: "100" }));
+  tipHeightResponses.next(O.of({ text: "101" }));
+  const request = requests.find((request) => request.category === "tx-status");
+  assert.ok(request);
+  txStatusResponses.next(pendingStatus);
+
+  page$.next({ pathname: "/explorer-api", hash: "" });
+  assert.equal(state.view, "apiLanding");
+  const requestCount = requests.length;
+  pendingStatus.next({
+    request,
+    body: { confirmed: true, block_height: 101, block_hash: "b".repeat(64) },
+  });
+
+  assert.equal(state.view, "apiLanding");
+  assert.equal(requests.length, requestCount);
+  tipHeightResponses.next(O.of({ text: "102" }));
+  assert.equal(requests.length, requestCount);
+});
+
+test("ignores a previous transaction's status without reloading the current block", () => {
+  const txid = "a".repeat(64);
+  const nextTxid = "b".repeat(64);
+  const page$ = new Subject();
+  const txResponses = new Subject();
+  const txStatusResponses = new Subject();
+  const pendingStatus = new Subject();
+  const requests = [];
+  let state;
+  const sinks = main(makeSources({
+    route: makeRouteDriver(() => page$)(empty$),
+    responseStreams: { tx: txResponses, "tx-status": txStatusResponses },
+  }));
+
+  sinks.HTTP.subscribe((request) => requests.push(request));
+  sinks.state.subscribe((next) => { state = next; });
+  page$.next({ pathname: `/tx/${txid}`, hash: "" });
+  txResponses.next(O.of({ body: makeTx(txid) }));
+  txStatusResponses.next(pendingStatus);
+
+  page$.next({ pathname: `/tx/${nextTxid}`, hash: "" });
+  const nextTx = makeTx(nextTxid, {
+    confirmed: true, block_height: 101, block_hash: "c".repeat(64),
+  });
+  txResponses.next(O.of({ body: nextTx }));
+  const requestCount = requests.length;
+  const previousState = state;
+  pendingStatus.next({
+    request: { txid },
+    body: { confirmed: true, block_height: 101, block_hash: "c".repeat(64) },
+  });
+
+  assert.equal(requests.length, requestCount);
+  assert.equal(state, previousState);
+  assert.equal(state.tx, nextTx);
+});
+
+test("does not update transaction state for unchanged unconfirmed status", () => {
+  const txid = "a".repeat(64);
+  const txResponses = new Subject();
+  const txStatusResponses = new Subject();
+  let state;
+  const sinks = main(makeSources({
+    route: makeTxRoute(txid),
+    responseStreams: { tx: txResponses, "tx-status": txStatusResponses },
+  }));
+
+  sinks.state.subscribe((next) => { state = next; });
+  txResponses.next(O.of({ body: makeTx(txid) }));
+  const previousState = state;
+  txStatusResponses.next(O.of({
+    request: { txid },
+    body: { confirmed: false },
+  }));
+
+  assert.equal(state, previousState);
+});
+
 test("treats the first block response of each dashboard visit as a baseline", () => {
   const page$ = new Subject();
   const latestBlock$ = new Subject();