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 } from 'react'
import {
  address,
  appendTransactionMessageInstruction,
  compileTransaction,
  createNoopSigner,
  createTransactionMessage,
  lamports,
  pipe,
  setTransactionMessageFeePayerSigner,
  setTransactionMessageLifetimeUsingBlockhash,
} from '@solana/kit'
import { getTransferSolInstruction } from '@solana-program/system'
import { useSolanaWallet, useSignAndSendTransaction } from '@web3auth/modal/react/solana'

export function SignAndSendTransaction() {
  const { signAndSendTransaction, loading, error, data } = useSignAndSendTransaction()
  const { accounts, rpc } = 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

    if (!rpc || !accounts?.length) return

    const { value: latestBlockhash } = await rpc.getLatestBlockhash().send()
    const feePayer = createNoopSigner(address(accounts[0]))
    const message = pipe(
      createTransactionMessage({ version: 0 }),
      m => setTransactionMessageFeePayerSigner(feePayer, m),
      m => setTransactionMessageLifetimeUsingBlockhash(latestBlockhash, m),
      m =>
        appendTransactionMessageInstruction(
          getTransferSolInstruction({
            source: feePayer,
            destination: address(to),
            amount: lamports(BigInt(Math.floor(Number(value) * 1e9))),
          }),
          m
        )
    )

    signAndSendTransaction(compileTransaction(message))
  }

  return (
    <form onSubmit={submit}>
      <input name="address" placeholder="Address" required />
      <input name="value" placeholder="Amount (SOL)" type="number" step="0.01" required />
      <button disabled={loading} type="submit">
        {loading ? 'Sending...' : 'Sign and send'}
      </button>
      {data && <p>Transaction hash: {data}</p>}
      {error && <p>Error: {error.message}</p>}
    </form>
  )
}