Example Projects

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

Vite (React)

git clone https://github.com/TxnLab/use-wallet
cd use-wallet/examples/react-ts
pnpm install
pnpm dev

The React example demonstrates:

  • React-specific hooks and patterns

  • Component composition with TypeScript

  • Integration with React's state management

  • Advanced features like runtime node configuration

Vite (Vue)

git clone https://github.com/TxnLab/use-wallet
cd use-wallet/examples/vue-ts
pnpm install
pnpm dev

The Vue example showcases:

  • Vue composables and plugins

  • Integration with Vue's reactivity system

  • TypeScript support in Vue components

  • Advanced features like runtime node configuration

Vite (SolidJS)

git clone https://github.com/TxnLab/use-wallet
cd use-wallet/examples/solid-ts
pnpm install
pnpm dev

The Solid example illustrates:

  • Solid.js primitives and patterns

  • Fine-grained reactivity integration

  • TypeScript configuration for Solid

  • Advanced features like runtime node configuration

Vite (Vanilla TypeScript)

git clone https://github.com/TxnLab/use-wallet
cd use-wallet/examples/vanilla-ts
pnpm install
pnpm dev

The Vanilla TypeScript example demonstrates:

  • Framework-agnostic usage

  • Direct WalletManager implementation

  • Custom state management

  • TypeScript configuration without a framework

Meta-Framework Examples

Next.js

git clone https://github.com/TxnLab/use-wallet
cd use-wallet/examples/nextjs
pnpm install
pnpm dev

The Next.js example demonstrates:

  • Server-side rendering considerations

  • Next.js-specific configuration

  • Integration with Next.js App Router

  • TypeScript configuration for Next.js

Nuxt

git clone https://github.com/TxnLab/use-wallet
cd use-wallet/examples/nuxt
pnpm install
pnpm dev

The Nuxt example showcases:

  • 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:ts      # Run Vanilla TypeScript example
pnpm example:nextjs  # Run Next.js example
pnpm example:nuxt    # Run Nuxt example

Next Steps

PrevioususeNetwork

Last updated