Skip to main content
This page provides an overview of the example projects available in the use-wallet repository. Each example demonstrates key features and best practices for integrating use-wallet into different frameworks and environments. All examples are built with Vite or their respective meta-frameworks and include:
  • Complete wallet integration with all supported providers
  • Transaction signing demonstration
  • End-to-end tests with Playwright
  • TypeScript configuration
  • Runtime node configuration UI (Vite examples only)

​
Framework examples

Vanilla TypeScript

Framework-agnostic usage with direct WalletManager implementation

React

React hooks and patterns with TypeScript

Vue

Vue composables and integration with Vue’s reactivity system

SolidJS

Solid.js primitives with fine-grained reactivity

Svelte

Svelte primitives and reactivity patterns

​
Meta-framework examples

Next.js

Server-side rendering with Next.js App Router

Nuxt

SSR with Vue and Nuxt module integration

​
Vanilla TypeScript

The Vanilla TypeScript example demonstrates framework-agnostic usage of the core library. 
git clone https://github.com/TxnLab/use-wallet
cd use-wallet/examples/vanilla-ts
pnpm install
pnpm dev
Key features:
  • Framework-agnostic usage
  • Direct WalletManager implementation
  • Custom state management
  • TypeScript configuration without a framework
import { NetworkId, WalletId, WalletManager, type SupportedWallet } from '@txnlab/use-wallet'

const wallets: SupportedWallet[] = [
  WalletId.DEFLY,
  WalletId.PERA,
  {
    id: WalletId.WALLETCONNECT,
    options: { projectId: 'fcfde0713d43baa0d23be0773c80a72b' }
  },
  WalletId.KMD,
  WalletId.MNEMONIC
]

const walletManager = new WalletManager({
  wallets,
  defaultNetwork: NetworkId.TESTNET
})

​
React

The React example demonstrates React-specific hooks and patterns. 
git clone https://github.com/TxnLab/use-wallet
cd use-wallet/examples/react-ts
pnpm install
pnpm dev
Key features:
  • React-specific hooks and patterns
  • Component composition with TypeScript
  • Integration with React’s state management
  • Advanced features like runtime node configuration
import {
  NetworkId,
  WalletId,
  WalletManager,
  WalletProvider,
  type SupportedWallet
} from '@txnlab/use-wallet-react'

const wallets: SupportedWallet[] = [
  WalletId.DEFLY,
  WalletId.PERA,
  {
    id: WalletId.WALLETCONNECT,
    options: { projectId: 'fcfde0713d43baa0d23be0773c80a72b' }
  },
  WalletId.KMD,
  WalletId.MNEMONIC
]

const walletManager = new WalletManager({
  wallets,
  defaultNetwork: NetworkId.TESTNET
})

function App() {
  return (
    <WalletProvider manager={walletManager}>
      {/* Your app components */}
    </WalletProvider>
  )
}

// In a child component
import { useWallet } from '@txnlab/use-wallet-react'

function Connect() {
  const { algodClient, activeAddress, transactionSigner, wallets } = useWallet()

  const handleConnect = async (wallet: Wallet) => {
    await wallet.connect()
  }

  // ... transaction logic
}

​
Vue

The Vue example showcases Vue composables and plugins. 
git clone https://github.com/TxnLab/use-wallet
cd use-wallet/examples/vue-ts
pnpm install
pnpm dev
Key features:
  • Vue composables and plugins
  • Integration with Vue’s reactivity system
  • TypeScript support in Vue components
  • Advanced features like runtime node configuration

​
SolidJS

The Solid example illustrates Solid.js primitives and patterns. 
git clone https://github.com/TxnLab/use-wallet
cd use-wallet/examples/solid-ts
pnpm install
pnpm dev
Key features:
  • Solid.js primitives and patterns
  • Fine-grained reactivity integration
  • TypeScript configuration for Solid
  • Advanced features like runtime node configuration

​
Svelte

The Svelte example showcases Svelte primitives and patterns. 
git clone https://github.com/TxnLab/use-wallet
cd use-wallet/examples/svelte-ts
pnpm install
pnpm dev
Key features:
  • Svelte primitives and patterns
  • Integration with Svelte’s reactivity system
  • TypeScript support in Svelte components
  • Advanced features like runtime node configuration

​
Next.js

The Next.js example demonstrates server-side rendering considerations. 
git clone https://github.com/TxnLab/use-wallet
cd use-wallet/examples/nextjs
pnpm install
pnpm dev
Key features:
  • Server-side rendering considerations
  • Next.js-specific configuration
  • Integration with Next.js App Router
  • TypeScript configuration for Next.js

​
Nuxt

The Nuxt example showcases server-side rendering with Vue. 
git clone https://github.com/TxnLab/use-wallet
cd use-wallet/examples/nuxt
pnpm install
pnpm dev
Key features:
  • Server-side rendering with Vue
  • Nuxt module integration
  • Auto-imports configuration
  • TypeScript configuration for Nuxt

​
Key features

​
Wallet integration

All examples include a complete wallet connection interface demonstrating:
  • Connecting/disconnecting wallets
  • Switching active accounts
  • Transaction signing
  • Network management

​
Runtime node configuration

The Vite examples include a UI for configuring Algorand node settings at runtime:
  • Custom node URL/port/headers
  • Network switching
  • Configuration persistence
For more information about this feature, see the Runtime node configuration guide.

​
Testing

All examples include end-to-end tests using Playwright, demonstrating:
  • Mocked Algorand node responses
  • Wallet connection testing
  • Transaction signing tests
  • Network switching tests
For more information about testing, see the Testing with mnemonic wallet guide.

​
Getting started

  1. Clone the repository:
git clone https://github.com/TxnLab/use-wallet
  1. Install dependencies:
cd use-wallet
pnpm install
  1. Build the packages:
pnpm build
  1. Run an example using the provided scripts:
pnpm example:react   # Run React example
pnpm example:vue     # Run Vue example
pnpm example:solid   # Run Solid example
pnpm example:svelte  # Run Svelte example
pnpm example:ts      # Run Vanilla TypeScript example
pnpm example:nextjs  # Run Next.js example
pnpm example:nuxt    # Run Nuxt example

​
Next steps

Framework integration

Read the framework-specific integration guides

Connect wallet menu

Learn core wallet integration concepts

Runtime node configuration

Configure Algorand nodes at runtime

Testing

Set up testing with mnemonic wallet

Build docs developers (and LLMs) love

Get started for freeTalk to us