Loading page…
Loading page…
Two raised-surface views of the same truth. TransactionRow uses direction, signed amount, and status-colored icon instead of Sent/Received copy or a status badge. TransactionDetail adds fee, txid, and progress only while work remains in flight.
All twelve combinations from the fixture matrix. Direction is icon + amount sign; status is icon color. Converted amounts stay hidden unless showConverted is explicitly enabled.
<TransactionRow kind="send" status="pending" amount="0.21000000" symbol="BTC" … />--ch-fg-muted--ch-surface--ch-borderBroadcast, not yet in a block — warning icon treatment.
<TransactionRow kind="send" status="confirming" amount="0.03500000" symbol="BTC" confirmations={{ n: 2, m: 6 }} … />--ch-info--ch-primary--ch-borderIn a block; compact n/m progress remains secondary.
<TransactionRow kind="send" status="confirmed" amount="2.75000000" symbol="XMR" … />--ch-success--ch-success-muted--ch-borderTarget confirmations reached — settled.
<TransactionRow kind="send" status="failed" amount="125.00000000" symbol="DBL" … />--ch-danger--ch-danger-muted--ch-borderBroadcast rejected: fee below relay minimum. Nothing left your wallet.
<TransactionRow kind="receive" status="pending" amount="0.05000000" symbol="BTC" … />--ch-fg-muted--ch-surface--ch-borderBroadcast, not yet in a block — warning icon treatment.
<TransactionRow kind="receive" status="confirming" amount="42.00000000" symbol="DBL" confirmations={{ n: 3, m: 12 }} … />--ch-info--ch-primary--ch-borderIn a block; compact n/m progress remains secondary.
<TransactionRow kind="receive" status="confirmed" amount="0.65000000" symbol="BTC" … />--ch-success--ch-success-muted--ch-borderTarget confirmations reached — settled.
<TransactionRow kind="receive" status="failed" amount="0.90000000" symbol="XMR" … />--ch-danger--ch-danger-muted--ch-borderIncoming output rejected by daemon: key image already spent.
<TransactionRow kind="swap" status="pending" amount="0.08000000" symbol="BTC" … />--ch-fg-muted--ch-surface--ch-borderBroadcast, not yet in a block — warning icon treatment.
<TransactionRow kind="swap" status="confirming" amount="5.00000000" symbol="XMR" confirmations={{ n: 4, m: 10 }} … />--ch-info--ch-primary--ch-borderIn a block; compact n/m progress remains secondary.
<TransactionRow kind="swap" status="confirmed" amount="0.02500000" symbol="BTC" … />--ch-success--ch-success-muted--ch-borderTarget confirmations reached — settled.
<TransactionRow kind="swap" status="failed" amount="300.00000000" symbol="DBL" … />--ch-danger--ch-danger-muted--ch-borderProvider could not fill the order in time. Funds were returned in full.
Default rows show only the transaction currency. Product settings can opt one row or list into the secondary converted amount without changing direction/status treatment.
<TransactionRow amount="0.65" symbol="BTC" fiat="$66,742.18" status="confirmed" … />
<TransactionRow amount="0.65" symbol="BTC" fiat="$66,742.18" showConverted status="confirmed" … />The privacy prop masks amounts on the row without touching kind, counterparty, or status — activity stays scannable while values stay private.
<TransactionRow kind="receive" status="confirmed" … privacy />--ch-fg-muted--ch-success-mutedSame confirmed receive as above, amounts masked.
Pending and confirming show the three-node timeline above the small-screen breakpoint. Confirmed and failed outcomes omit it entirely; compact screens never show stepper dots.
<TransactionDetail kind="send" status="pending" fee="1,820 sats" txid={txid} … />--ch-fg-muted--ch-border--ch-surfaceBroadcast accepted by the node; waiting on a block.
<TransactionDetail kind="send" status="confirming" confirmations={{ n: 2, m: 6 }} … />--ch-primary--ch-primary-fg--ch-borderTwo confirmations in — the dots fill primary as blocks land.
<TransactionDetail kind="receive" status="confirmed" confirmations={{ n: 6, m: 6 }} … />--ch-accent--ch-accent-fg--ch-shadow-beaconSettled outcome — no completed stepper repeats resolved history.
<TransactionDetail kind="send" status="failed" txid={txid} … />--ch-danger--ch-danger-muted--ch-borderBroadcast rejected: fee below relay minimum. Nothing left your wallet.
The confirmed detail under dark, light, and Harbor Mode — in Harbor Mode the aurum seal rides the beacon accent, so settlement on your own node reads brightest.
<TransactionDetail kind="receive" status="confirmed" confirmations={{ n: 6, m: 6 }} txid={txid} … />--ch-accent--ch-accent-fg--ch-shadow-beacon--ch-success