useSolanaWallet

Composable to retrieve Solana accounts, RPC client, and wallet from Embedded Wallets in Vue.

Import

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

Usage

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

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

<template>
  <div>
    <div>Accounts: {{ accounts?.length ? accounts.join(', ') : 'No accounts' }}</div>
    <div>Solana wallet: {{ solanaWallet ? 'Available' : 'Not available' }}</div>
    <div>RPC: {{ rpc ? 'Available' : 'Not available' }}</div>
  </div>
</template>

Return type

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

accounts

Ref<string[] | null>

Base58 Solana account addresses, or null if not available.

solanaWallet

Ref<Wallet | null>

The wallet-standard Solana wallet instance, or null if not available.

rpc

Ref<Rpc<SolanaRpcApi> | null>

The @solana/kit RPC client for making Solana RPC calls, or null if not available.

Example: Fetching SOL balance

getBalance.vue

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

  const { web3Auth } = useWeb3Auth()
  const { accounts } = useSolanaWallet()

  const balance = ref<string | null>(null)
  const loading = ref(false)
  const error = ref<string | null>(null)

  async function fetchBalance() {
    const rpcTarget = web3Auth.value?.currentChain?.rpcTarget
    if (!rpcTarget || !accounts.value?.length) return

    loading.value = true
    error.value = null
    try {
      const rpc = createSolanaRpc(rpcTarget)
      const { value } = await rpc.getBalance(address(accounts.value[0])).send()
      balance.value = `${Number(value) / 1e9} SOL`
    } catch (e) {
      error.value = e instanceof Error ? e.message : 'Failed to fetch balance.'
    } finally {
      loading.value = false
    }
  }
</script>

<template>
  <div>
    <h2>Balance</h2>
    <div v-if="balance">{{ balance }}</div>
    <button type="button" class="card" :disabled="loading" @click="fetchBalance">
      {{ loading ? 'Fetching...' : 'Fetch Balance' }}
    </button>
    <div v-if="error" class="error">Error: {{ error }}</div>
  </div>
</template>