Transaction Status

A transaction from submitted to final. Confirmations are progress toward a threshold, not a tick at one block — chains reorganise, and "done" at one confirmation teaches a habit that eventually costs money.

src/components/ui/transaction-status.tsx

About

From the component's own source, where it was written.

A transaction's progress from submitted to final.

Confirmations are shown as progress toward a threshold, not as a tick the moment the transaction is mined. One confirmation is not settlement — chains reorganise — and an interface that says "done" at one block is teaching a habit that eventually costs someone money.

A reverted transaction is a distinct state from a failed submission: it was mined, it consumed gas, and it is on-chain. Collapsing the two hides the fact that the user paid for it.

Install

npx astralyx-ui add transaction-status

Usage

import { TransactionStatus } from '@/components/ui/transaction-status'

<TransactionStatus hash={hash} state="mined" confirmations={4} required={12} href={explorer} />

Composer

Change the props and the source below follows.

Mined

Swap 0.5 ETH for 1,638.40 USDC

Confirmations4 / 12

0x9f2c1b7e…a7d4submitted 3 minutes ago

Props

state

confirmations

tsx

<TransactionStatus
  hash={hash}
  state="mined"
  confirmations={4}
  required={12}
/>

Examples

Lifecycle

tsx

<TransactionStatus hash={hash} state="mined" confirmations={4} />

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`TransactionStatus`

A transaction's progress from submitted to final.

Extends Omit<ComponentProps<'div'>, 'children'>.

Prop	Type	Default	Description
hash	string	required	—
state	TxState	required	Reverted is distinct from a failed submission: it was mined and consumed gas, and collapsing the two hides that the user paid.
confirmations	number	0	Rendered as progress toward settlement.
required	number	12	Rendered as progress toward settlement.
href	string	—	Block explorer link for the hash.
summary	ReactNode	—	—
submittedAt	Date	—	—
now	Date	—	—
gasUsed	ReactNode	—	—
error	ReactNode	—	—
explorerLabel	string	'View transaction on block explorer'	Accessible name for the explorer link.

Types

Type	Definition	Description
`TxState`	'pending' \| 'mined' \| 'confirmed' \| 'reverted' \| 'dropped'	—