Skip to main content

​
Introduction to use-wallet

@txnlab/use-wallet is a powerful, framework-agnostic TypeScript library that simplifies Algorand wallet integration for decentralized applications. With reactive framework adapters and full TypeScript support, it provides a seamless developer experience across multiple platforms.

​
Key features

Modular wallet support

Easily add or remove wallet providers with just a few lines of code. Configure each wallet as needed for your application.

Framework adapters

Built-in reactive adapters for React, Vue, SolidJS, and Svelte. Use the core library standalone or with your favorite framework.

Session persistence

Automatically restore wallet sessions for returning users with built-in state persistence.

Full TypeScript support

Complete type safety with TypeScript definitions for all APIs, ensuring a robust development experience.

​
Supported wallets

The library supports a wide range of Algorand wallet providers:
  • Pera Wallet - Mobile and web wallet with deep linking support
  • Defly Wallet - Native mobile and web browser extension
  • Exodus - Multi-chain wallet with Algorand support
  • WalletConnect - Protocol for connecting dApps to mobile wallets
  • Kibisis - Browser extension wallet
  • Lute - Web-based wallet solution
  • Magic - Email-based wallet with passwordless authentication
  • Web3Auth - Social login wallet integration
  • KMD - Algorand Key Management Daemon for local development
  • Mnemonic - Direct mnemonic phrase connection
  • Biatec - WalletConnect-based wallet
  • Custom - Build your own wallet integration
Wallet provider packages are peer dependencies, so you only install what you need. This keeps your bundle size minimal.

​
How it works

The library is built on a clean architecture:
  1. Core library (@txnlab/use-wallet) - Framework-agnostic wallet management using @tanstack/store
  2. Framework adapters - Reactive hooks/composables that subscribe to state changes
  3. Wallet implementations - Each wallet provider extends a common BaseWallet class
  4. State persistence - Automatic localStorage synchronization for session restoration

​
Core capabilities

​
Wallet management

  • Connect and disconnect wallet providers
  • Switch between active wallets and accounts
  • Resume sessions automatically on page load
  • Access wallet metadata and account information

​
Transaction signing

import { WalletManager } from '@txnlab/use-wallet'
import algosdk from 'algosdk'

// Sign transactions with active wallet
const signedTxns = await walletManager.signTransactions([txn1, txn2])

// Or use the TransactionSigner for AlgoSDK's AtomicTransactionComposer
const atc = new algosdk.AtomicTransactionComposer()
atc.addTransaction({ txn, signer: walletManager.transactionSigner })

​
Network configuration

import { WalletManager, NetworkId } from '@txnlab/use-wallet'

const walletManager = new WalletManager({
  wallets: [WalletId.PERA, WalletId.DEFLY],
  defaultNetwork: NetworkId.TESTNET
})

// Switch networks dynamically
await walletManager.setActiveNetwork(NetworkId.MAINNET)

​
Get started

Installation

Install the library and optional wallet provider packages

Quick start

Get up and running with a working wallet connection in minutes

​
Framework-specific guides

React

Use the @txnlab/use-wallet-react adapter with hooks

Vue

Use the @txnlab/use-wallet-vue adapter with composables

SolidJS

Use the @txnlab/use-wallet-solid adapter with signals

Svelte

Use the @txnlab/use-wallet-svelte adapter with stores

​
Community and support

This library is maintained by TxnLab and open source contributors. We welcome issues, pull requests, and feedback!

Build docs developers (and LLMs) love

Get started for freeTalk to us