Component

Quick Send Flow

Drop-in SOL send flow with recipient validation, transfer review, wallet approval states, retry handling, and an explorer receipt.

Preview

Quick send

Devnet

Installation

terminal

$npx shadcn@latest add https://uxdotsol.xyz/r/quick-send-flow.json

Usage

quick-send-flow.tsx

import { QuickSendFlow } from "@/components/quick-send-flow";
 
export default function App() {
  return (
    <QuickSendFlow
      sender={wallet.publicKey?.toBase58()}
      senderName="Connected wallet"
      recipientName="ux.sol"
      recipient="7xKXtg2CW87d97TXJSDpbD5jBkheTqA83TZRuJosg88R"
      cluster="devnet"
      onSend={async (amount) => {
        // Build, sign, and send a SOL transfer for amount.
        return "transaction_signature";
      }}
      onConfirm={async (signature) => {
        // Optional: wait for your RPC or wallet confirmation path.
      }}
    />
  );
}

Props / Arguments

Name	Type	Default	Description
senderName / sender	string	connected wallet demo	Optional connected-wallet label and address shown in the transfer route.
recipientName / recipient	string	demo recipient	Human-readable recipient label and destination wallet address.
tokenSymbol / presets	string / number[]	'SOL' / [0.1, 0.5, 1, 5]	Token label and quick amount buttons.
networkFee	string	'0.000005 SOL'	Network fee label shown in the receipt summary.
onSend	(amount: number) => Promise<string>	demo signer	Real wallet signing and send function. Return the transaction signature.
onConfirm	(signature: string, amount: number) => Promise<unknown>	demo delay	Optional confirmation hook for waiting on RPC or wallet confirmation.
connection / cluster	Connection \| null / string	null	Optional Solana RPC and cluster used for live transaction status and explorer links.
onSuccess	(signature: string, amount: number) => void	undefined	Called when the send flow confirms successfully.
onError	(error: Error) => void	undefined	Called when send or confirmation fails.