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>