Skip to main content

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 {
LAMPORTS_PER_SOL,
PublicKey,
SystemProgram,
TransactionMessage,
VersionedTransaction,
} from '@solana/web3.js'
import { useSolanaWallet, useSignAndSendTransaction } from '@web3auth/modal/vue/solana'

const {
data: hash,
error,
loading: isPending,
signAndSendTransaction,
} = useSignAndSendTransaction()
const { accounts, connection } = useSolanaWallet()

async function submit(event: Event) {
event.preventDefault()
const formData = new FormData(event.target as HTMLFormElement)
const to = formData.get('address') as string
const value = formData.get('value') as string

const connectionValue = connection.value
const accountsValue = accounts.value

if (!connectionValue || !accountsValue || accountsValue.length === 0) {
console.error('Connection or accounts not available')
return
}

const block = await connectionValue.getLatestBlockhash()
const TransactionInstruction = SystemProgram.transfer({
fromPubkey: new PublicKey(accountsValue[0]),
toPubkey: new PublicKey(to),
lamports: Number(value) * LAMPORTS_PER_SOL,
})

const transactionMessage = new TransactionMessage({
recentBlockhash: block.blockhash,
instructions: [TransactionInstruction],
payerKey: new PublicKey(accountsValue[0]),
})

const transaction = new VersionedTransaction(transactionMessage.compileToV0Message())
signAndSendTransaction(transaction)
}
</script>

<template>
<div>
<h2>Send Versioned Transaction</h2>
<form @submit.prevent="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>
<div v-if="hash">Transaction Hash: {{ hash }}</div>
<div v-if="error">Error: {{ error.message }}</div>
</div>
</template>