useSignAndSendTransaction

Composable to sign and send a Solana transaction using the connected Solana wallet from Web3Auth in Vue.

Import

import { useSignAndSendTransaction } from '@web3auth/modal/vue/solana'

Usage

<script setup lang="ts">
  import { ref } from 'vue'
  import { useSignAndSendTransaction } from '@web3auth/modal/vue/solana'
  import type { TransactionOrVersionedTransaction } from '@web3auth/modal'

  const transaction = ref<TransactionOrVersionedTransaction | null>(null) // Provide your transaction here
  const { signAndSendTransaction, loading, error, data } = useSignAndSendTransaction()

  const handleSignAndSend = async () => {
    if (!transaction.value) return
    try {
      await signAndSendTransaction(transaction.value)
      // Do something with data.value (signature)
    } catch (e) {
      // Handle error
    }
  }
</script>

<template>
  <div>
    <button @click="handleSignAndSend" :disabled="loading">
      {{ loading ? "Signing & Sending..." : "Sign & Send Transaction" }}
    </button>
    <div v-if="error">Error: {{ error.message }}</div>
    <div v-if="data">Signature: {{ data }}</div>
  </div>
</template>

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.vue

<script setup lang="ts">
  import { ref } from 'vue'
  import { useWeb3Auth } from '@web3auth/modal/vue'
  import { useSolanaWallet, useSignAndSendTransaction } from '@web3auth/modal/vue/solana'

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

  const { web3Auth } = useWeb3Auth()
  const { accounts } = useSolanaWallet()
  const {
    data: signature,
    error,
    loading: isPending,
    signAndSendTransaction,
  } = useSignAndSendTransaction()
  const formError = ref<string | null>(null)

  async function submit(event: Event) {
    event.preventDefault()
    formError.value = null

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

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

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

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