Installation

This guide walks you through installing the library and its dependencies.

Core library

The core library (@txnlab/use-wallet) is framework-agnostic and can be used in any TypeScript/JavaScript project.

npm install @txnlab/use-wallet algosdk

The algosdk package is a peer dependency and must be installed separately.

Framework adapters

If you’re using a reactive framework, install the corresponding adapter package instead of (or in addition to) the core library.

React
Vue
SolidJS
Svelte

npm install @txnlab/use-wallet-react algosdk

The React adapter re-exports all types and classes from the core library, so you typically only need to install @txnlab/use-wallet-react.Peer dependencies:

React 17, 18, or 19
algosdk ^3.0.0

npm install @txnlab/use-wallet-vue algosdk vue

Peer dependencies:

Vue 3.x
algosdk ^3.0.0

npm install @txnlab/use-wallet-solid algosdk solid-js

Peer dependencies:

solid-js (compatible version)
algosdk ^3.0.0

npm install @txnlab/use-wallet-svelte algosdk svelte

Peer dependencies:

Svelte 5.x
algosdk ^3.0.0

Wallet provider packages

Wallet provider SDKs are optional peer dependencies. Install only the packages for wallets you want to support in your application.

Pera Wallet

npm install @perawallet/connect

Version: ^1.4.1

Defly Wallet

npm install @blockshake/defly-connect

Version: ^1.2.1

WalletConnect

npm install @walletconnect/modal @walletconnect/sign-client

Versions:

@walletconnect/modal ^2.7.0
@walletconnect/sign-client ^2.23.4

You’ll need a WalletConnect project ID. Get one free at cloud.walletconnect.com.

Lute Wallet

npm install lute-connect

Version: ^1.6.3

Magic (Email authentication)

npm install magic-sdk @magic-ext/algorand

Versions:

magic-sdk ^29.4.2
@magic-ext/algorand ^24.4.2

Magic requires an API key. Sign up at magic.link.

Web3Auth

npm install @web3auth/modal @web3auth/base @web3auth/base-provider

Version: ^9.0.0 (all packages)

Web3Auth requires a client ID. Register at dashboard.web3auth.io.

Wallet-specific requirements

Exodus

No additional packages required. Exodus uses the AVM Web Provider API.

Kibisis

No additional packages required. Kibisis uses the AVM Web Provider API.

KMD (Local development)

No additional packages required. KMD connects to a local Algorand node running the Key Management Daemon.

KMD is only for local development. Never use it in production.

Defly Web

No additional packages required. This is the browser extension version of Defly that uses the AVM Web Provider API.

Mnemonic

No additional packages required. Allows direct connection via 25-word mnemonic phrase.

Handle mnemonics with extreme care. Never log or persist them. Only use for development/testing.

TypeScript configuration

If you’re using TypeScript, ensure your tsconfig.json includes:

tsconfig.json

{
  "compilerOptions": {
    "moduleResolution": "bundler", // or "node16", "nodenext"
    "esModuleInterop": true,
    "skipLibCheck": true,
    "strict": true
  }
}

Bundle considerations

Tree shaking

The library is built with ESM support and tree shaking in mind. Only the wallet providers you configure will be included in your bundle.

Polyfills

Some wallet SDKs require Node.js polyfills in browser environments. If you encounter build errors related to Node.js modules:

Vite
Next.js
Webpack

Install polyfill plugins:

npm install vite-plugin-node-polyfills

Update vite.config.ts:

vite.config.ts

import { defineConfig } from 'vite'
import { nodePolyfills } from 'vite-plugin-node-polyfills'

export default defineConfig({
  plugins: [
    nodePolyfills({
      include: ['buffer', 'crypto', 'stream']
    })
  ]
})

Next.js 13+ should handle this automatically. If you encounter issues, you may need webpack configuration:

next.config.js

module.exports = {
  webpack: (config) => {
    config.resolve.fallback = {
      ...config.resolve.fallback,
      crypto: require.resolve('crypto-browserify'),
      stream: require.resolve('stream-browserify'),
      buffer: require.resolve('buffer')
    }
    return config
  }
}

webpack.config.js

module.exports = {
  resolve: {
    fallback: {
      crypto: require.resolve('crypto-browserify'),
      stream: require.resolve('stream-browserify'),
      buffer: require.resolve('buffer')
    }
  }
}

Next steps

Quick start guide

Learn how to set up wallet connections in your application

Getting Started

Core Concepts

Framework Adapters

Guides

Resources

Installation

Installation

Core library

Framework adapters

Wallet provider packages

Pera Wallet

Defly Wallet

WalletConnect

Lute Wallet

Magic (Email authentication)

Web3Auth

Wallet-specific requirements

Exodus

Kibisis

KMD (Local development)

Defly Web

Mnemonic

TypeScript configuration

Bundle considerations

Tree shaking

Polyfills

Next steps

Quick start guide

Build docs developers (and LLMs) love

Getting Started

Core Concepts

Framework Adapters

Guides

Resources

​Installation

​Core library

​Framework adapters

​Wallet provider packages

​Pera Wallet

​Defly Wallet

​WalletConnect

​Lute Wallet

​Magic (Email authentication)

​Web3Auth

​Wallet-specific requirements

​Exodus

​Kibisis

​KMD (Local development)

​Defly Web

​Mnemonic

​TypeScript configuration

​Bundle considerations

​Tree shaking

​Polyfills

​Next steps

Quick start guide

Build docs developers (and LLMs) love

Installation

Core library

Framework adapters

Wallet provider packages

Pera Wallet

Defly Wallet

WalletConnect

Lute Wallet

Magic (Email authentication)

Web3Auth

Wallet-specific requirements

Exodus

Kibisis

KMD (Local development)

Defly Web

Mnemonic

TypeScript configuration

Bundle considerations

Tree shaking

Polyfills

Next steps