useSignAndSendTransaction
Hook to sign and send a Solana transaction using the connected Solana wallet from Web3Auth.
Import
import { useSignAndSendTransaction } from '@web3auth/modal/react/solana'
Usage
import { useSignAndSendTransaction } from '@web3auth/modal/react/solana'
import { TransactionOrVersionedTransaction } from '@web3auth/modal'
function SignAndSendTransactionButton({
transaction,
}: {
transaction: TransactionOrVersionedTransaction
}) {
const { signAndSendTransaction, loading, error, data } = useSignAndSendTransaction()
const handleSignAndSend = async () => {
try {
const signature = await signAndSendTransaction(transaction)
// Do something with signature
} catch (e) {
// Handle error
}
}
return (
<div>
<button onClick={handleSignAndSend} disabled={loading}>
{loading ? 'Signing & Sending...' : 'Sign & Send Transaction'}
</button>
{error && <div>Error: {error.message}</div>}
{data && <div>Signature: {data}</div>}
</div>
)
}
Return Type
export type IUseSignAndSendTransaction = {
loading: boolean
error: Web3AuthError | null
data: string | null
signAndSendTransaction: (transaction: TransactionOrVersionedTransaction) => Promise<string>
}
loading
boolean
Indicates if the transaction signing and sending is in progress.
error
Web3AuthError | null
Error object if signing or sending fails, otherwise null.
data
string | null
The transaction signature as a string, or null if not signed yet.
signAndSendTransaction
(transaction: TransactionOrVersionedTransaction) => Promise<string>
Function to sign and send a transaction. Returns the transaction signature as a string.
Example
sendVersionedTransaction.tsx
import { FormEvent } from 'react'
import { useSolanaWallet, useSignAndSendTransaction } from '@web3auth/modal/react/solana'
import {
LAMPORTS_PER_SOL,
PublicKey,
SystemProgram,
TransactionMessage,
VersionedTransaction,
} from '@solana/web3.js'
export function SendVersionedTransaction() {
const {
data: hash,
error,
loading: isPending,
signAndSendTransaction,
} = useSignAndSendTransaction()
const { accounts, connection } = useSolanaWallet()
async function submit(e: FormEvent<HTMLFormElement>) {
e.preventDefault()
const formData = new FormData(e.target as HTMLFormElement)
const to = formData.get('address') as string
const value = formData.get('value') as string
const block = await connection!.getLatestBlockhash()
const TransactionInstruction = SystemProgram.transfer({
fromPubkey: new PublicKey(accounts![0]),
toPubkey: new PublicKey(to),
lamports: Number(value) * LAMPORTS_PER_SOL,
})
const transactionMessage = new TransactionMessage({
recentBlockhash: block.blockhash,
instructions: [TransactionInstruction],
payerKey: new PublicKey(accounts![0]),
})
const transaction = new VersionedTransaction(transactionMessage.compileToV0Message())
signAndSendTransaction(transaction)
}
return (
<div>
<h2>Send Versioned Transaction</h2>
<form onSubmit={submit}>
<input name="address" placeholder="Address" required />
<input name="value" placeholder="Amount (SOL)" type="number" step="0.01" required />
<button disabled={isPending} type="submit">
{isPending ? 'Confirming...' : 'Send'}
</button>
</form>
{hash && <div>Transaction Hash: {hash}</div>}
{error && <div>Error: {error.message}</div>}
</div>
)
}