@txnlab/use-wallet

A framework-agnostic Algorand wallet integration library (v4.x) with reactive adapters for React, Vue, SolidJS, and Svelte. Requires algosdk v3.

Packages

Routing Guide

Read the reference file that matches the developer's task:

Setup & Configuration

• Getting started (any framework): references/getting-started.md — Installation, WalletManager config, supported wallets table, webpack fallbacks

Framework-Specific Integration

• Vanilla JS/TS (no framework): references/vanilla.md — WalletManager direct usage, BaseWallet subscribe, no provider wrapper
• React: references/react.md — WalletProvider, useWallet, useNetwork hooks
• Vue: references/vue.md — WalletManagerPlugin, useWallet/useNetwork composables
• SolidJS: references/solid.md — WalletProvider, useWallet/useNetwork primitives (signals)
• Svelte: references/svelte.md — useWalletContext, useWallet/useNetwork primitives (.current)

Features & Guides

• Signing transactions: references/signing-transactions.md — signTransactions, transactionSigner with ATC, AlgoKit Utils
• Signing data (ARC-60/SIWA): references/signing-data.md — Sign In With Algorand, Lute wallet, verification
• Network switching & custom networks: references/network-configuration.md — NetworkConfigBuilder, custom AVM networks (Voi), runtime node config, useNetwork
• Pre-built UI components: references/wallet-ui.md — @txnlab/use-wallet-ui-react: WalletButton, menus, theming, Tailwind setup
• Testing: references/testing.md — Mnemonic wallet provider for dev/testing/E2E
• Custom wallet provider: references/custom-provider.md — Implementing CustomProvider interface

Reference

• Full API reference: references/api-reference.md — WalletManager, useWallet, useNetwork, enums, types
• Migration from v3: references/migration-v3.md — algosdk v3, network config changes, useNetwork extraction

Quick Reference: Supported Wallets

Wallets that require no extra package use built-in browser APIs or AVM web provider.

Key Patterns

Minimal Setup (React)

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

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

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

Accessing Wallet State

const {
  wallets,
  activeAddress,
  isReady,
  signTransactions,
  transactionSigner,
  algodClient,
} = useWallet()
const {
  activeNetwork,
  setActiveNetwork,
  updateAlgodConfig,
  resetNetworkConfig,
} = useNetwork()

Important Notes

• v4.x requires algosdk v3 — see migration guide if upgrading from v3.x
• In v4.0.0, network features moved from useWallet to a separate useNetwork hook/composable/primitive
• Default networks (MainNet, TestNet, BetaNet, LocalNet) use Nodely's free API
• Some wallet providers require signature requests from direct user interaction (button clicks)
• Only Lute supports ARC-60 data signing (signData)