Installation

Requirements

• algosdk v3

• Environment with support for dynamic imports (e.g., modern build tools like Vite, Next.js, or Webpack 5+)

Install Package

Use-wallet is available as a core library and as framework-specific adapters for React, Vue, SolidJS, and Svelte. Choose the appropriate package for your project's framework.

React

npm

npm install @txnlab/use-wallet-react

yarn

pnpm

bun

Vue

npm

npm install @txnlab/use-wallet-vue

yarn

pnpm

bun

SolidJS

npm

npm install @txnlab/use-wallet-solid

yarn

pnpm

bun

Svelte

npm

npm install @txnlab/use-wallet-svelte

yarn

pnpm

bun

Core Library

npm

npm install @txnlab/use-wallet

yarn

pnpm

bun

Install Dependencies

Some supported wallet providers require additional packages to be installed. You only need to install the packages for wallets that you plan to support in your application.

Pera Wallet

npm

npm install @perawallet/connect

yarn

pnpm

bun

Defly Wallet

npm

npm install @blockshake/defly-connect

yarn

pnpm

bun

Defly Wallet (Web)

The Defly Web Wallet is currently in beta.

npm

npm install @agoralabs-sh/avm-web-provider

yarn

pnpm

bun

WalletConnect

npm

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

yarn

pnpm

bun

Lute Wallet

npm

npm install lute-connect

yarn

pnpm

bun

Kibisis

npm

npm install @agoralabs-sh/avm-web-provider

yarn

pnpm

bun

Magic Auth

npm

npm install magic-sdk @magic-ext/algorand

yarn

pnpm

bun

Web3Auth

npm

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

yarn

pnpm

bun

Webpack Configuration

When using this library in a project that uses Webpack as its build tool, you may encounter "module not found" errors for optional dependencies of wallets you choose not to support. To resolve this, you can use the webpackFallback export.

Here's how to configure Webpack to handle these optional dependencies:

// webpack.config.js
import { webpackFallback } from '@txnlab/use-wallet' // exported by all packages

export default {
  // ... other webpack configuration
  resolve: {
    fallback: {
      ...webpackFallback
    }
  }
}

For Next.js specifically, add this to your next.config.js:

import { webpackFallback } from '@txnlab/use-wallet-react'

const nextConfig = {
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.resolve.fallback = {
        ...config.resolve.fallback,
        ...webpackFallback
      }
    }
    return config
  }
}

export default nextConfig

This configuration allows your application to build and run without these packages installed, enabling you to include only the wallet packages you need. The webpackFallback object is maintained within the @txnlab/use-wallet library and will be automatically updated when new optional dependencies are added.