Updated transaction details to latest design.

[Randy808]

To run locally, npm install and use the following snippets:

# Bitcoin
export API_URL=https://blockstream.info/api
export PORT=4999
source flavors/blockstream/config.env
source flavors/bitcoin-mainnet/config.env
npm run dev-server

# Liquid
export API_URL=https://blockstream.info/liquid/api
export PORT=5000
source flavors/blockstream/config.env
source flavors/liquid-mainnet/config.env
npm run dev-server

---

Bitcoin:

Liquid:

[Randy808]

• Make page responsive for mobile

[Randy808]

Addressing comments from @EddieHouston :

[P1] Shared transaction cards lose their transaction ID and navigation. txBox() is also used on block, address, and asset pages. It now renders only the Details toggle before inputs/outputs, removing the linked txid, confirmation status,
and total amount. In the browser, Details only expands the card, leaving no route to the transaction page. tx.js#L87-L112 (

esplora/client/src/views/tx.js

Lines 87 to 112 in 4167428

	<div className="transaction-box" id="transaction-box">
	<div className="transaction-box-header">
	{btnDetails(tx.txid, vopt.isOpen, query, t)}
	</div>
	<div className="ins-and-outs">
	<div className="vins">
	{tx.vin.map((vin, index) => vinView(vin, { ...vopt, index }))}
	</div>
	<div className="ins-and-outs_spacer">
	<div className="direction-arrow-container">
	<div className="direction-arrow"></div>
	</div>
	</div>
	<div className="vouts">
	{tx.vout.map((out, index) =>
	voutView(out, {
	...vopt,
	index,
	spend: findSpend(spends, tx.txid, index),
	}),
	)}
	</div>
	</div>
	</div>

)

Added the missed txid link on the input/output blocks when displayed outside the tx.js page as per the designs

[P1] Confirmed transactions no longer link to their containing block. The redesign replaces block hash, height, and timestamp with confirmation time alone. Losing the block link is a major explorer navigation regression. tx.js#L243-L251 (

esplora/client/src/views/tx.js

Lines 243 to 251 in 4167428

	{isConfirmed || feerate != null ? (
	<div className="transaction-details-row">
	{isConfirmed ? (
	<div className="tx-overview-panel">
	<p className="tx-overview-panel-label">CONFIRMATION TIME</p>
	<div className="tx-overview-panel-details">
	<p>{confirmationTime}</p>
	</div>
	</div>

)

This was also in the designs but wasn't initially included because the component was going to be added in the block page redesign. Ended up finishing the component and adding it back in

[P2] Liquid discount size and weight disappear. discount_vsize and discount_weight were conditionally shown for Elements transactions but are absent from the new stats. Since the PR explicitly supports Liquid, these fields should remain
when provided. tx.js#L204-L240 (

esplora/client/src/views/tx.js

Lines 204 to 240 in 4167428

	<div className="info-stats-row">
	<div className="block-stat">
	<div className="block-stat-title">SIZE</div>
	<div className="block-stat-value">
	{`${formatNumber(tx.size)} B`}
	</div>
	</div>
	<div className="block-stat">
	<div className="block-stat-title">VIRTUAL SIZE</div>
	<div className="block-stat-value">
	{`${formatNumber(Math.ceil(tx.weight / 4))} vB`}
	</div>
	</div>
	<div className="block-stat">
	<div className="block-stat-title">WEIGHT UNITS</div>
	<div className="block-stat-value">
	{`${formatNumber(tx.weight)} WU`}
	</div>
	</div>
	<div className="block-stat">
	<div className="block-stat-title">VERSION</div>
	<div className="block-stat-value">{tx.version}</div>
	</div>
	<div className="block-stat">
	<div className="block-stat-title">LOCK TIME</div>
	<div className="block-stat-value">{tx.locktime}</div>
	</div>
	{isRbf(tx) ? (
	<div className="block-stat">
	<div className="block-stat-title">REPLACE BY FEE</div>
	<div className="block-stat-value">{t`Opted in`}</div>
	</div>
	) : null}

)

This one was intentionally omitted as per the designs.

[P2] The redesigned page bypasses localization. Most new labels—including "Transaction Details," "Confirmation Time," "Transaction Fees," and stat names—are literal English strings rather than passed through t, regressing translated
deployments. tx.js#L178-L220 (

esplora/client/src/views/tx.js

Lines 178 to 220 in 4167428

	</div>
	<div className="transaction-table-body">
	<div className="tx-details-txid">
	<p className="tx-details-txid-text">{tx.txid}</p>
	<div
	className="table-copy-button code-button-btn"
	role="button"
	tabindex="0"
	data-clipboardCopy={tx.txid}
	aria-label={`Copy transaction id ${tx.txid}`}
	>
	<CopyIcon />
	</div>
	<div
	className={`confirmation-status-badge ${isConfirmed ? "success" : "warning"}`}
	>
	{!isConfirmed ? (
	<div className="confirmation-status-dot" aria-hidden="true">
	<div className="confirmation-status-dot-back"></div>
	<div className="confirmation-status-dot-middle"></div>
	<div className="confirmation-status-dot-front"></div>
	</div>
	) : null}
	<p>{confirmationText(tx.status, tipHeight, t)}</p>
	</div>
	</div>
	<div className="info-stats-row">
	<div className="block-stat">
	<div className="block-stat-title">SIZE</div>
	<div className="block-stat-value">
	{`${formatNumber(tx.size)} B`}
	</div>
	</div>
	<div className="block-stat">
	<div className="block-stat-title">VIRTUAL SIZE</div>
	<div className="block-stat-value">
	{`${formatNumber(Math.ceil(tx.weight / 4))} vB`}
	</div>
	</div>
	<div className="block-stat">
	<div className="block-stat-title">WEIGHT UNITS</div>
	<div className="block-stat-value">

)

Since these strings require new translations, it should be handled in a separate task

[Randy808]

Addressed regressions identified by @EddieHouston. Txs on the block page now show their confirmation status and total output amount in the footer: