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 { 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>