Skip to main content

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>
  );
}