Component

Transaction Review

Displays a normalized, wallet-agnostic transaction summary with parties, amounts, fees, network context, risk warnings, and controlled confirmation actions.

Preview

Transfer

Review transfer

Devnet

You send

1.25SOL

≈ $182.40

From

Connected wallet

4wBq…Vigw

ux.sol

7xKX…g88R

Development network

Devnet assets have no real-world value.

Network: Devnet
Network fee: 0.000005 SOL
Total wallet debit: 1.250005 SOL

Installation

terminal

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

Usage

transaction-review.tsx

"use client";
 
import { TransactionReview } from "@/components/uxdotsol/components/transaction-review";
 
export default function TransferReview() {
  return (
    <TransactionReview
      intent={{
        kind: "transfer",
        pay: {
          value: "1.25",
          symbol: "SOL",
          fiatValue: "≈ $182.40",
        },
        sender: {
          label: "Connected wallet",
          address: "4wBqpZM9xaSheZzJSMawUKKwhdpChKbZ5eu5ky4Vigw",
        },
        recipient: {
          label: "ux.sol",
          address: "7xKXtg2CW87d97TXJSDpbD5jBkheTqA83TZRuJosg88R",
          verified: true,
        },
        network: { cluster: "mainnet-beta" },
        fees: [{ label: "Network fee", value: "0.000005 SOL" }],
        walletDebit: { value: "1.250005", symbol: "SOL" },
      }}
      onCancel={() => history.back()}
      onConfirm={() => {
        // Continue to simulation or wallet signing.
      }}
    />
  );
}

Props / Arguments

Name	Type	Default	Description
intent	TransactionReviewIntent	required	Normalized transaction kind, parties, amounts, network, fees, details, memo, and warnings displayed by the review.
confirmLabel / cancelLabel	string / string	'Confirm transaction' / 'Cancel'	Labels for the controlled review actions.
isConfirming / disabled	boolean / boolean	false / false	Controls the pending presentation and action availability without owning submission state.
riskAcknowledged	boolean	uncontrolled	Controlled acknowledgement state for warnings marked requiresAcknowledgement.
defaultRiskAcknowledged	boolean	false	Initial acknowledgement state when riskAcknowledged is not controlled.
onRiskAcknowledgedChange	(acknowledged: boolean) => void	undefined	Called when the user changes the risk acknowledgement checkbox.
onConfirm / onCancel	() => void / () => void	undefined / undefined	Controlled actions used by a parent flow to continue or leave the review step.
className	string	''	Optional classes applied to the outer review card.

Types

Name	Type	Default	Description
TransactionReviewIntent	object	-	Provider-neutral transaction review model; precise amounts are represented as strings.
TransactionReviewWarning	{ id; severity; title; description; requiresAcknowledgement? }	-	Informational, warning, or danger disclosure optionally requiring explicit acknowledgement.