Transaction lifecycle UI components.
Pattern-match on Tx.Status to render appropriate UI without missing any state.
-- Status badge with modifier class:
Web3.Ui.Transaction.statusBadge [] tx.status
-- Action button disabled while in-flight:
Web3.Ui.Transaction.actionButton []
{ label = "Buy", pendingLabel = "Buying…", onPress = SubmitBuy }
tx.status
-- Clickable tx hash link:
Web3.Ui.Transaction.txHashLink []
{ explorerUrl = "https://etherscan.io/tx/" }
hash
-- Hash link extracted from status (Nothing when no hash available):
-- Pass Nothing for explorerUrl in local dev — renders a plain span instead of a dead link.
Web3.Ui.Transaction.statusHashLink []
{ explorerUrl = Just "https://etherscan.io/tx/" }
tx.status
-- Confirmed receipt display:
Web3.Ui.Transaction.receiptView []
{ explorerUrl = "https://etherscan.io/tx/" }
receiptAn action button that is active in Idle and terminal states, and disabled
while in-flight (AwaitingSignature, Submitted, Confirming).
Shows pendingLabel while the transaction is in-flight.
CSS classes: web3-action-btn, web3-action-btn--pending (added when disabled)
A truncated tx-hash display, linked to a block explorer when one is configured.
When explorerUrl is Just url, the url is prepended to the full hash to
build the href. When Nothing (e.g. local Anvil dev), renders a plain
<span class="web3-tx-hash"> instead of a dead link — the same convention
as statusHashLink and Web3.Ui.Address.
Example: { explorerUrl = Just "https://etherscan.io/tx/" }
CSS classes: web3-tx-link (linked), web3-tx-hash (plain)
Extract a hash display from a Tx.Status. Returns Nothing when there is
no hash (Idle, AwaitingSignature, Failed, Rejected).
When explorerUrl is Just url, renders a clickable <a> link.
When explorerUrl is Nothing (e.g. local Anvil dev), renders a plain
<span class="web3-tx-hash"> with the truncated hash instead of a dead link.
Display a confirmed transaction receipt.
Root element: <div class="web3-receipt web3-receipt--success|failed">
Each field is wrapped in <div class="web3-receipt-field">.
CSS classes: web3-receipt, web3-receipt--success, web3-receipt--failed, web3-receipt-field
Confirmation progress as a row of dots — one per required confirmation,
filled as they land. Renders only in Confirming; every other status is
Html.text "" so it composes inline without layout cost.
The count comes straight from the Confirming _ n state, which the
Web3.Transaction machine guarantees is strictly increasing (see
MonotonicConfirmations in elm-web3's proofs/tla/TransactionSpec.tla) —
these dots can never un-fill.
CSS classes: web3-confirmations, web3-confirmations__dot,
web3-confirmations__dot--filled, web3-confirmations__count.
A status badge for the current transaction state.
Labels: "Idle" / "Awaiting Signature" / "Pending" / "Confirming" / "Confirmed" / "Failed" / "Rejected"
CSS classes:
web3-tx-badgeplus one of:web3-tx-badge--idle,web3-tx-badge--pending,web3-tx-badge--confirmed,web3-tx-badge--failed,web3-tx-badge--rejected