Component

Transaction Lifecycle

Shows wallet approval, submission, processing, confirmation, failure, and timeout states backed by an actual transaction signature and Solana RPC.

Preview

Sends a real 1-lamport devnet self-transfer. The wallet pays only the network fee.

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-lifecycle.json

Usage

transaction-lifecycle.tsx

"use client";
 
import { useState } from "react";
import { useConnection, useWallet } from "@solana/wallet-adapter-react";
import { SystemProgram, Transaction } from "@solana/web3.js";
import { TransactionLifecycle } from "@/components/uxdotsol/components/transaction-lifecycle";
 
export function SelfTransferProgress() {
  const { connection } = useConnection();
  const { publicKey, sendTransaction } = useWallet();
  const [signature, setSignature] = useState<string | null>(null);
  const [submissionState, setSubmissionState] = useState<
    "idle" | "awaiting-wallet" | "failed"
  >("idle");
  const [error, setError] = useState<Error | null>(null);
 
  async function submit() {
    if (!publicKey) return;
    setSubmissionState("awaiting-wallet");
    setError(null);
 
    try {
      const transaction = new Transaction().add(
        SystemProgram.transfer({
          fromPubkey: publicKey,
          toPubkey: publicKey,
          lamports: 1,
        }),
      );
      setSignature(await sendTransaction(transaction, connection));
      setSubmissionState("idle");
    } catch (cause) {
      setError(cause instanceof Error ? cause : new Error(String(cause)));
      setSubmissionState("failed");
    }
  }
 
  return (
    <TransactionLifecycle
      client={connection}
      signature={signature}
      submissionState={submissionState}
      submissionError={error}
      cluster="devnet"
      onRetry={() => void submit()}
    />
  );
}

Props / Arguments

Name	Type	Default	Description
signature / client	string \| null / TransactionStatusClient \| null	undefined / undefined	Real transaction signature and Solana RPC client used after submission.
submissionState / submissionError	TransactionSubmissionState / Error \| string \| null	'idle' / undefined	Parent-controlled wallet and broadcast state before a signature exists.
commitment / pollIntervalMs / timeoutMs / subscribe	Commitment / number / number / boolean	'confirmed' / 2000 / 90000 / true	RPC tracking policy forwarded to useTransactionStatus.
cluster / explorer / explorerUrl	string	'mainnet-beta' / 'solscan' / undefined	Cluster and explorer link configuration.
onRetry / onReset	() => void / () => void	undefined / undefined	Retries pre-signature submission or resets the parent flow. Signature retries only recheck RPC status.
onStatusChange	(value: TransactionLifecycleValue) => void	undefined	Reports meaningful lifecycle transitions to parent orchestration or analytics.
title / description / retryLabel / resetLabel	string	transaction guidance	Customizable accessible labels and lifecycle guidance.
showReset / className	boolean / string	true / ''	Controls the terminal reset action and outer classes.

Types

Name	Type	Default	Description
TransactionLifecycleState	submission and RPC status union	-	Complete state vocabulary from wallet approval through finalization or failure.
TransactionLifecycleValue	TransactionStatusValue with lifecycle status	-	Normalized callback payload including signature, confirmation, error, and terminal flags.