useSignAndSendTransaction

Hook to sign and send a Solana transaction using the connected Solana wallet from Embedded Wallets.

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, useState } from 'react'
import { useWeb3Auth } from '@web3auth/modal/react'
import { useSolanaWallet, useSignAndSendTransaction } from '@web3auth/modal/react/solana'

import { buildSolTransferTransaction } from '../solana/transfer'

export function SendVersionedTransaction() {
  const { web3Auth } = useWeb3Auth()
  const { accounts } = useSolanaWallet()
  const {
    data: signature,
    error,
    loading: isPending,
    signAndSendTransaction,
  } = useSignAndSendTransaction()
  const [formError, setFormError] = useState<string | null>(null)

  async function submit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault()
    setFormError(null)

    const rpcTarget = web3Auth?.currentChain?.rpcTarget
    if (!rpcTarget || !accounts?.length) return

    const form = new FormData(e.currentTarget)
    const to = form.get('address')?.toString().trim() ?? ''
    const amountSol = Number(form.get('value'))
    if (!to || !Number.isFinite(amountSol) || amountSol <= 0) {
      setFormError('Enter a valid recipient address and a positive amount.')
      return
    }

    try {
      const transaction = await buildSolTransferTransaction(rpcTarget, accounts[0], to, amountSol)
      await signAndSendTransaction(transaction)
    } catch (err) {
      setFormError(err instanceof Error ? err.message : 'Failed to send transaction.')
    }
  }

  return (
    <div>
      <h2>Send Transaction</h2>
      <form onSubmit={submit}>
        <input name="address" placeholder="Recipient address" required />
        <input name="value" placeholder="Amount (SOL)" type="number" step="0.01" min="0" required />
        <button disabled={isPending} type="submit">
          {isPending ? 'Sending...' : 'Send'}
        </button>
      </form>
      {signature && <div className="hash">Transaction signature: {signature}</div>}
      {(formError ?? error?.message) && (
        <div className="error">Error: {formError ?? error?.message}</div>
      )}
    </div>
  )
}