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>