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.

Stream Recording 🎬

• Watch on YouTube

Connect on Twitter

• Ryan Fox: @ryanRfox
• Doug Richar: @drichar

Algorand Developers YouTube Channel

• https://www.youtube.com/@algodevs/streams

✨ 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:
  • TypeScript
  • Tailwind CSS
  • Axios
  • Tanstack Query

🔗 Live Demo

• https://use-wallet-demo.vercel.app/

💻 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

2. Change to the project directory

cd use-wallet-demo

3. Install dependencies

pnpm install

4. 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:

• Discord:
  • New to NFD's Discord? Join using this invite link
  • Already a member? Directly jump to the #use-wallet channel
• Twitter: @drichar
• GitHub Discussions: Discussion section of use-wallet repository

Your feedback and contributions are always welcome!