useSignTransaction

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

Import

import { useSignTransaction } from '@web3auth/modal/react/solana'

Usage

import { useSignTransaction } from '@web3auth/modal/react/solana'
import type { Transaction } from '@solana/kit'

function SignTransactionButton({ transaction }: { transaction: Transaction }) {
  const { signTransaction, loading, error, data } = useSignTransaction()

  const handleSign = async () => {
    try {
      const signedTx = await signTransaction(transaction)
      // Do something with signedTx
    } catch (e) {
      // Handle error
    }
  }

  return (
    <div>
      <button onClick={handleSign} disabled={loading}>
        {loading ? 'Signing...' : 'Sign Transaction'}
      </button>
      {error && <div>Error: {error.message}</div>}
      {data && <div>Signed Transaction: {data}</div>}
    </div>
  )
}

Return type

export type IUseSignTransaction = {
  loading: boolean
  error: Web3AuthError | null
  data: string | null
  signTransaction: (transaction: TransactionOrVersionedTransaction) => Promise<string>
}

loading

boolean

Indicates if the transaction signing is in progress.

error

Web3AuthError | null

Error object if signing fails, otherwise null.

data

string | null

The signed transaction as a string, or null if not signed yet.

signTransaction

(transaction: TransactionOrVersionedTransaction) => Promise<string>

Function to sign a Solana transaction. Returns the signed transaction as a string.

Example

signTransaction.tsx

import { FormEvent, useState } from 'react'
import { useWeb3Auth } from '@web3auth/modal/react'
import { useSolanaWallet, useSignTransaction } from '@web3auth/modal/react/solana'

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

export function SignTransaction() {
  const { web3Auth } = useWeb3Auth()
  const { accounts } = useSolanaWallet()
  const {
    data: signedTransaction,
    error,
    loading: isPending,
    signTransaction,
  } = useSignTransaction()
  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 signTransaction(transaction)
    } catch (err) {
      setFormError(err instanceof Error ? err.message : 'Failed to sign transaction.')
    }
  }

  return (
    <div>
      <h2>Sign 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 ? 'Signing...' : 'Sign'}
        </button>
      </form>
      {signedTransaction && <div className="hash">Signed transaction: {signedTransaction}</div>}
      {(formError ?? error?.message) && (
        <div className="error">Error: {formError ?? error?.message}</div>
      )}
    </div>
  )
}

solana/transfer.ts

import type { Transaction } from '@solana/kit'
import {
  address,
  appendTransactionMessageInstruction,
  compileTransaction,
  createNoopSigner,
  createSolanaRpc,
  createTransactionMessage,
  lamports,
  pipe,
  setTransactionMessageFeePayerSigner,
  setTransactionMessageLifetimeUsingBlockhash,
} from '@solana/kit'
import { getTransferSolInstruction } from '@solana-program/system'

export async function buildSolTransferTransaction(
  rpcTarget: string,
  from: string,
  to: string,
  amountSol: number
): Promise<Transaction> {
  const rpc = createSolanaRpc(rpcTarget)
  const { value: latestBlockhash } = await rpc.getLatestBlockhash().send()
  const feePayer = createNoopSigner(address(from))

  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.round(amountSol * 1e9))),
        }),
        m
      )
  )

  return compileTransaction(message)
}