| name | use-wallet |
| description | Integrate Algorand/AVM wallet connections using @txnlab/use-wallet v4.x. Use when building dApps that need wallet connectivity (Pera, Defly, Lute, Kibisis, Exodus, WalletConnect, etc.), transaction signing, data signing (ARC-60/SIWA), network switching, or wallet state management in vanilla JS/TS, React, Vue, SolidJS, or Svelte applications. Also covers the companion UI component library @txnlab/use-wallet-ui-react for drop-in wallet buttons and menus. |
@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
| Package | Purpose |
|---|
@txnlab/use-wallet | Core library (framework-agnostic) |
@txnlab/use-wallet-react | React adapter (hooks + WalletProvider) |
@txnlab/use-wallet-vue | Vue adapter (composables + plugin) |
@txnlab/use-wallet-solid | SolidJS adapter (primitives + WalletProvider) |
@txnlab/use-wallet-svelte | Svelte adapter (primitives + context) |
@txnlab/use-wallet-ui-react | React UI components (WalletButton, menus) |
Routing Guide
Read the reference file that matches the developer's task:
Setup & Configuration
Framework-Specific Integration
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
Quick Reference: Supported Wallets
| Wallet | WalletId | Required Package |
|---|
| Pera | PERA | @perawallet/connect |
| Defly | DEFLY | @blockshake/defly-connect |
| Defly Web (beta) | DEFLY_WEB | @agoralabs-sh/avm-web-provider |
| Exodus | EXODUS | — |
| Kibisis | KIBISIS | @agoralabs-sh/avm-web-provider |
| Lute | LUTE | lute-connect |
| WalletConnect | WALLETCONNECT | @walletconnect/sign-client, @walletconnect/modal |
| Magic | MAGIC | magic-sdk, @magic-ext/algorand |
| Web3Auth | WEB3AUTH | @web3auth/modal, @web3auth/base, @web3auth/base-provider |
| W3 Wallet | W3_WALLET | — |
| KMD | KMD | — (dev only) |
| Mnemonic | MNEMONIC | — (test only, never MainNet) |
| Custom | CUSTOM | — (implement CustomProvider) |
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)
