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, and SolidJS. Choose the appropriate package for your project's framework.

React

npm install @txnlab/use-wallet-react

Vue

npm install @txnlab/use-wallet-vue

SolidJS

npm install @txnlab/use-wallet-solid

Core Library

npm install @txnlab/use-wallet

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 install @perawallet/connect

Defly Wallet

npm install @blockshake/defly-connect

Defly Wallet (Web)

The Defly Web Wallet is currently in beta.

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

WalletConnect

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

Lute Wallet

npm install lute-connect

Kibisis

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

Magic Auth

npm install magic-sdk @magic-ext/algorand

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.

PreviousOverviewNextConfiguration

Last updated