Skip to main content

useSolanaWallet

Composable to retrieve and manage Solana wallet, accounts, and connection from Web3Auth in Vue.

Import

import { useSolanaWallet } from '@web3auth/modal/vue'

Usage

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

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

<template>
<div>
<div>Accounts: {{ accounts?.length ? accounts.join(", ") : "No accounts" }}</div>
<div>SolanaWallet: {{ solanaWallet ? "Available" : "Not available" }}</div>
<div>Connection: {{ connection ? "Connected" : "Not connected" }}</div>
</div>
</template>

Return Type

import type { IUseSolanaWallet } from '@web3auth/modal/vue'

accounts

string[] | null

The list of Solana account addresses, or null if not available.

solanaWallet

SolanaWallet | null

The SolanaWallet instance for interacting with the Solana blockchain, or null if not available.

connection

Connection | null

The Solana Connection instance for making RPC calls, or null if not available.

Example: Fetching SOL Balance

getBalance.vue
<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import { useSolanaWallet } from '@web3auth/modal/vue/solana'
import { useWeb3Auth } from '@web3auth/modal/vue'
import { LAMPORTS_PER_SOL, PublicKey } from '@solana/web3.js'

const { web3Auth } = useWeb3Auth()
const { accounts, connection } = useSolanaWallet()
const balance = ref<number | null>(null)
const isLoading = ref(false)
const error = ref<string | null>(null)

const fetchBalance = async () => {
if (!web3Auth.value?.connected) {
error.value = 'Please connect your wallet first'
return
}
try {
isLoading.value = true
error.value = null
// Check if accounts exist and have values before creating PublicKey
if (!accounts.value || accounts.value.length === 0) {
console.error('No accounts found. Please connect your wallet.', accounts.value)
throw new Error('No accounts found. Please connect your wallet.')
}
const publicKey = new PublicKey(accounts.value[0])
const balanceResult = await connection.value!.getBalance(publicKey)
balance.value = balanceResult
} catch (err) {
console.error('Error fetching balance:', err)
error.value = err instanceof Error ? err.message : 'Unknown error'
balance.value = null
} finally {
isLoading.value = false
}
}

// Fetch balance when connection or accounts change
watch([connection, accounts], () => {
if (web3Auth.value?.connected) {
fetchBalance()
}
})

// Initial fetch on component mount
onMounted(() => {
if (web3Auth.value?.connected) {
fetchBalance()
}
})
</script>

<template>
<div>
<h2>Balance</h2>
<div v-if="balance !== null">
<span>{{ balance / LAMPORTS_PER_SOL }} SOL</span>
</div>
<div v-if="isLoading" class="loading">Loading...</div>
<div v-if="error" class="error">Error: {{ error }}</div>
<button @click="fetchBalance" type="button" class="card" :disabled="isLoading">
Fetch Balance
</button>
</div>
</template>