Component

Transaction Receipt

Renders immutable confirmed, finalized, or failed transaction evidence with parties, amount, fee, network, timestamp, slot, signature, and explorer access.

Preview

Creates a real 1-lamport devnet self-transfer, then builds the receipt from parsed RPC transaction data.

Transaction progress

Status updates come from your wallet and Solana RPC.

Ready

Wallet approval
Review and approve the request in your wallet.
Submitted
The signed transaction has a network signature.
Processing
The cluster has observed the transaction.
Confirmation
The requested commitment has been reached.

Ready

No wallet request or transaction signature yet.

Installation

terminal

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

Usage

transaction-receipt.tsx

import {
  TransactionReceipt,
  type TransactionReceiptData,
} from "@/components/uxdotsol/components/transaction-receipt";
 
export function PaymentReceipt({
  receipt,
}: {
  receipt: TransactionReceiptData | null;
}) {
  return (
    <TransactionReceipt
      receipt={receipt}
      onDone={() => history.back()}
    />
  );
}

Props / Arguments

Name	Type	Default	Description
receipt	TransactionReceiptData \| null	undefined	Normalized authoritative transaction evidence. Null renders the honest empty state.
title / emptyTitle / emptyDescription	string	receipt status copy	Accessible confirmed, failed, and pre-receipt headings and guidance.
explorer / explorerUrl	'solscan' \| 'explorer' \| 'xray' / string	'solscan' / undefined	Explorer provider or custom transaction URL prefix.
showExplorerLink / showCopySignature	boolean / boolean	true / true	Controls signature verification actions without changing receipt evidence.
doneLabel / onDone	string / () => void	'Done' / undefined	Optional parent-flow completion action.
className	string	''	Optional classes applied to the outer receipt card.

Types

Name	Type	Default	Description
TransactionReceiptData	{ signature; status; network; amount?; fee?; sender?; recipient?; timestamp?; slot?; memo?; details? }	-	Provider-neutral immutable receipt model populated from an authoritative result.
TransactionReceiptStatus	'confirmed' \| 'finalized' \| 'failed'	-	Terminal transaction states supported by the receipt.