Skip to main content

useSignTransaction

Composable to sign a Solana transaction using the connected wallet from Web3Auth.

Import​

import { useSignTransaction } from "@web3auth/modal/vue/solana";

Usage​

<script setup lang="ts">
  import { ref } from "vue";
  import { useSignTransaction } from "@web3auth/modal/vue/solana";
  import { Transaction } from "@solana/web3.js";

  const transaction = ref<Transaction | null>(null); // Your transaction object
  const { signTransaction, loading, error, data } = useSignTransaction();

  const handleSign = async () => {
    if (!transaction.value) return;
    try {
      await signTransaction(transaction.value);
      // Do something with data.value (signed transaction)
    } catch (e) {
      // Handle error
    }
  };
</script>

<template>
  <div>
    <button @click="handleSign" :disabled="loading">
      {{ loading ? "Signing..." : "Sign Transaction" }}
    </button>
    <div v-if="error">Error: {{ error.message }}</div>
    <div v-if="data">Signed Transaction: {{ data }}</div>
  </div>
</template>

Return Type​

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

loading​

Ref<boolean>

Indicates if the transaction signing is in progress.

error​

Ref<Web3AuthError | null>

Error object if signing fails, otherwise null.

data​

Ref<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​

<script setup lang="ts">
  import { LAMPORTS_PER_SOL, PublicKey, SystemProgram, Transaction } from "@solana/web3.js";
  import { useSolanaWallet, useSignTransaction } from "@web3auth/modal/vue/solana";

  const {
    data: signedTransaction,
    error,
    loading: isPending,
    signTransaction,
  } = useSignTransaction();
  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;

    if (!connection.value || !accounts.value || accounts.value.length === 0) return;

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

    const transaction = new Transaction({
      blockhash: block.blockhash,
      lastValidBlockHeight: block.lastValidBlockHeight,
      feePayer: new PublicKey(accounts.value[0]),
    }).add(TransactionInstruction);

    signTransaction(transaction);
  }
</script>

<template>
  <div class="container">
    <div class="stack">
      <h2>Sign Transaction</h2>
      <form class="set" @submit.prevent="submit">
        <input name="address" placeholder="Address" required />
        <input name="value" placeholder="Amount (SOL)" type="number" step="0.01" required />
        <button type="submit" :disabled="isPending">{{ isPending ? "Signing..." : "Sign" }}</button>
      </form>
      <div v-if="signedTransaction">Signed Transaction: {{ signedTransaction }}</div>
      <div v-if="error">Error: {{ error.message }}</div>
    </div>
  </div>
</template>