@txnlab/use-wallet-vue

use-wallet

A framework-agnostic Algorand wallet integration library with reactive adapters for React, Vue, SolidJS, and Svelte.

Features

• Modular wallet adapters — install only the wallets you need; each wallet SDK is bundled in its own package
• Factory function configuration with full TypeScript support
• Switch between accounts, wallets, and networks reactively
• Sign and send transactions, ARC-60 data signing, session restore
• availableWallets list filtered by each wallet's declared network capabilities
• Typed event emitter for observing wallet lifecycle events
• ESM-only, tree-shakeable packages

Quick Start

Install the framework adapter (or the core package for vanilla JS/TS) plus the wallet adapters you want to support:

npm install @txnlab/use-wallet-react @perawallet/use-wallet-pera @txnlab/use-wallet-defly algosdk

import { pera } from '@perawallet/use-wallet-pera'
import { WalletManager, WalletProvider, useWallet } from '@txnlab/use-wallet-react'
import { defly } from '@txnlab/use-wallet-defly'

const manager = new WalletManager({
  wallets: [pera(), defly()],
  defaultNetwork: 'testnet'
})

function App() {
  return (
    <WalletProvider manager={manager}>
      <YourApp />
    </WalletProvider>
  )
}

Packages

Wallet adapters: Pera · Defly · Exodus · Kibisis · KMD · Lute · Mnemonic · W3 Wallet · WalletConnect · Web3Auth

A custom provider (built into core) supports integrating any other wallet, and third-party adapter packages work without changes to this repository — see the supported wallets docs.

Migrating from v4?

See the v4 to v5 migration guide. v4 documentation remains available at txnlab.gitbook.io/use-wallet/v4.

Visit txnlab.gitbook.io/use-wallet for docs, guides, and examples!

Become a sponsor!