Component

Transaction Progress Timeline

Renders provider-neutral transaction milestones with observed timestamps, details, current progress, skipped events, failures, and optional retry.

Preview

Records only milestones observed from a real 1-lamport devnet self-transfer. The wallet pays the network fee.

No transaction history yet

Observed milestones will appear here after a transaction starts.

Installation

terminal

$npx shadcn@latest add https://uxdotsol.xyz/r/transaction-progress-timeline.json

Usage

transaction-progress-timeline.tsx

import {
  TransactionProgressTimeline,
  type TransactionProgressStep,
} from "@/components/uxdotsol/components/transaction-progress-timeline";
 
export function PaymentProgress({
  steps,
}: {
  steps: readonly TransactionProgressStep[];
}) {
  return <TransactionProgressTimeline steps={steps} />;
}

Props / Arguments

Name	Type	Default	Description
steps	readonly TransactionProgressStep[]	[]	Ordered provider-neutral milestones. An empty array renders the honest empty state.
title / description / emptyTitle / emptyDescription	string	timeline guidance	Accessible headings and guidance for populated and empty timelines.
showTimestamps / compact	boolean / boolean	true / false	Controls observed UTC timestamps and vertical spacing.
retryLabel / onRetry	string / () => void	'Recheck transaction' / undefined	Optional action shown only when at least one milestone has failed.
className	string	''	Optional classes applied to the outer timeline card.

Types

Name	Type	Default	Description
TransactionProgressStep	{ id; title; description?; detail?; timestamp?; status }	-	One normalized milestone and its observed evidence.
TransactionProgressStepStatus	'pending' \| 'active' \| 'complete' \| 'failed' \| 'skipped'	-	Provider-neutral milestone state vocabulary.