> For the complete documentation index, see [llms.txt](/llms.txt).

# useSignTransaction

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

### Import[​](#import "Direct link to Import")

```
import { useSignTransaction } from '@web3auth/modal/vue/solana'

```

### Usage[​](#usage "Direct link to Usage")

```
<script setup lang="ts">
  import { ref } from 'vue'
  import { useSignTransaction } from '@web3auth/modal/vue/solana'
  import type { Transaction } from '@solana/kit'

  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[​](#return-type "Direct link to Return type")

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

```

#### `loading`[​](#loading "Direct link to loading")

`Ref<boolean>`

Indicates if the transaction signing is in progress.

#### `error`[​](#error "Direct link to error")

`Ref<Web3AuthError | null>`

Error object if signing fails, otherwise null.

#### `data`[​](#data "Direct link to data")

`Ref<string | null>`

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

#### `signTransaction`[​](#signtransaction "Direct link to signtransaction")

`(transaction: TransactionOrVersionedTransaction) => Promise<string>`

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

## Example[​](#example "Direct link to Example")

SignTransaction.vue

```
<script setup lang="ts">
  import { useSolanaWallet, useSignTransaction } from '@web3auth/modal/vue/solana'
  import {
    address,
    appendTransactionMessageInstruction,
    compileTransaction,
    createNoopSigner,
    createTransactionMessage,
    lamports,
    pipe,
    setTransactionMessageFeePayerSigner,
    setTransactionMessageLifetimeUsingBlockhash,
  } from '@solana/kit'
  import { getTransferSolInstruction } from '@solana-program/system'

  const { signTransaction, loading, error, data } = useSignTransaction()
  const { accounts, rpc } = 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 (!rpc.value || !accounts.value?.length) return

    const { value: latestBlockhash } = await rpc.value.getLatestBlockhash().send()
    const feePayer = createNoopSigner(address(accounts.value![0]))
    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.floor(Number(value) * 1e9))),
          }),
          m
        )
    )

    signTransaction(compileTransaction(message))
  }
</script>

<template>
  <form @submit.prevent="submit">
    <input name="address" placeholder="Address" required />
    <input name="value" placeholder="Amount (SOL)" type="number" step="0.01" required />
    <button :disabled="loading" type="submit">
      {{ loading ? 'Signing...' : 'Sign transaction' }}
    </button>
    <p v-if="data">Signed transaction: {{ data }}</p>
    <p v-if="error">Error: {{ error.message }}</p>
  </form>
</template>

```