Skip to content

TxnLab/use-wallet-demo

Repository files navigation

UseWallet Next.js Demo - Proof of State Ep. 14

This demo Next.js project was created to supplement a live-streamed interview on the Proof of State show, to demonstrate how to integrate the @txnlab/use-wallet library into a real-world Algorand application.

Promo Image

Stream Recording 🎬

Connect on Twitter

Algorand Developers YouTube Channel

✨ Features

  • Configured to support Defly, Pera, Daffi, Exodus, and WalletConnect providers
  • Demonstrates how @txnlab/use-wallet can be used to:
    • Build a wallet menu with provider/account selection
    • Connect to a wallet
    • Sign transactions
    • Send transactions
  • Shows balance of connected account, polled every 10 seconds
  • NFDomains integration displaying avatar and NFD name of the connected account (if one exists)
  • Uses the following technologies:

🔗 Live Demo

💻 Local Development

Prerequisites

  • Node.js v14.18.0 or higher
  • pnpm

Installation

  1. Clone the repository
git clone https://github.com/TxnLab/use-wallet-demo.git
  1. Change to the project directory
cd use-wallet-demo
  1. Install dependencies
pnpm install
  1. Start the development server
pnpm dev

How to Use

This demo app showcases the versatility and capabilities of the @txnlab/use-wallet library. You can experiment by tweaking various aspects of the configuration:

  1. Wallet Providers: Add or remove wallet providers

  2. Algorand Node Configuration: This demo app connects to Algorand Mainnet. You can change the node configuration to connect to Testnet or Betanet, using AlgoNode's public nodes or your own. Please note that currently only KMD, MyAlgo, and AlgoSigner support Betanet.

  3. WalletConnect Support: To integrate the WalletConnect provider, you'll need a unique project ID. Obtain it by:

    • Registering an account at WalletConnect Cloud
    • Creating a new project within your account. Each app needs its own unique project ID.

Full installation and configuration instructions for @txnlab/use-wallet can be found in the official repository: TxnLab/use-wallet. This will guide you through additional features supported by the library that might not be present in this basic example.

Contact

If you have any questions, suggestions, or would like to collaborate, feel free to get in touch through the following channels:

Your feedback and contributions are always welcome!