Vue composables for Solana

Embedded Wallets provides a set of Vue composables for basic Solana wallet operations. These composables are designed to simplify common Solana interactions in your Vue app.

info

For building transactions, use @solana/kit and @solana-program/system with the composables provided.

Install @solana/kit and @solana-program/system to build and sign Solana transactions with the Embedded Wallets Vue SDK.

info

Web3Auth provides Vue composables for common Solana wallet operations. Import them from @web3auth/modal/vue/solana.

npm

npm install @solana/kit @solana-program/system

Yarn

yarn add @solana/kit @solana-program/system

pnpm

pnpm add @solana/kit @solana-program/system

Bun

bun add @solana/kit @solana-program/system

Solana composables

Composable Name	Description
useSignAndSendTransaction	Sign and send a Solana transaction.
useSignMessage	Sign a message with the Solana wallet.
useSignTransaction	Sign a Solana transaction (without sending).
useSolanaWallet	Access Solana accounts, RPC client, and wallet.

Composable usage examples

Get Solana wallet

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

  const { accounts, rpc } = useSolanaWallet()
</script>

<template>
  <div>
    <h2>Solana wallet</h2>
    <p v-if="accounts?.[0]">Address: {{ accounts[0] }}</p>
    <p>RPC ready: {{ rpc ? 'Yes' : 'No' }}</p>
  </div>
</template>

Fetch balance

getBalance.vue

<script setup lang="ts">
  import { ref, watch, onMounted } from 'vue'
  import { address } from '@solana/kit'
  import { useSolanaWallet } from '@web3auth/modal/vue/solana'

  const { accounts, rpc } = useSolanaWallet()
  const balance = ref<number | null>(null)

  const fetchBalance = async () => {
    if (!rpc.value || !accounts.value?.length) return
    const { value: lamports } = await rpc.value.getBalance(address(accounts.value[0])).send()
    balance.value = Number(lamports) / 1e9
  }

  watch([rpc, accounts], fetchBalance)
  onMounted(fetchBalance)
</script>

<template>
  <div>
    <p v-if="balance !== null">{{ balance }} SOL</p>
    <button type="button" @click="fetchBalance">Fetch balance</button>
  </div>
</template>

Sign message

SignMessage.vue

<script setup lang="ts">
  import { useSignMessage } from '@web3auth/modal/vue/solana'

  const { signMessage, loading, error, data } = useSignMessage()

  function submit(event: Event) {
    event.preventDefault()
    const formData = new FormData(event.target as HTMLFormElement)
    const message = formData.get('message')
    signMessage(message!.toString())
  }
</script>

<template>
  <form @submit.prevent="submit">
    <input name="message" placeholder="Message" required />
    <button :disabled="loading" type="submit">
      {{ loading ? 'Signing...' : 'Sign message' }}
    </button>
    <p v-if="data">Message hash: {{ data }}</p>
    <p v-if="error">Error: {{ error.message }}</p>
  </form>
</template>

Sign transaction

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>

Sign and send transaction

SignAndSendTransaction.vue

<script setup lang="ts">
  import { useSolanaWallet, useSignAndSendTransaction } 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 { signAndSendTransaction, loading, error, data } = useSignAndSendTransaction()
  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
        )
    )

    signAndSendTransaction(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 ? 'Sending...' : 'Sign and send' }}
    </button>
    <p v-if="data">Transaction hash: {{ data }}</p>
    <p v-if="error">Error: {{ error.message }}</p>
  </form>
</template>