txnlab / use-wallet-demo

UseWallet demo app created for Proof of State Ep. 14 (9 Aug 2023) https://www.youtube.com/live/QH5mFD8RQ68

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!

use-wallet-demo's Issues

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• fix(deps): update dependency @blockshake/defly-connect to v1.1.6
• fix(deps): update dependency @headlessui/react to v1.7.19
• fix(deps): update dependency @perawallet/connect to v1.3.4
• fix(deps): update dependency @tailwindcss/forms to v0.5.7
• fix(deps): update dependency @walletconnect/modal-sign-html to v2.6.2
• fix(deps): update dependency autoprefixer to v10.4.19
• fix(deps): update dependency postcss to v8.4.38
• chore(deps): update dependency eslint-config-prettier to v9.1.0
• chore(deps): update dependency prettier to v3.2.5
• chore(deps): update jest monorepo to v29.7.0 (jest, jest-environment-jsdom)
• chore(deps): update tanstack-query monorepo (@tanstack/eslint-plugin-query, @tanstack/react-query)
• chore(deps): update testing-library monorepo (@testing-library/react, @testing-library/user-event)
• fix(deps): update dependency @heroicons/react to v2.1.3
• fix(deps): update dependency @txnlab/use-wallet to v2.8.2
• fix(deps): update dependency algosdk to v2.7.0
• fix(deps): update dependency eslint to v8.57.0
• chore(deps): update dependency @types/testing-library__jest-dom to v6
• chore(deps): update testing-library monorepo (major) (@testing-library/jest-dom, @testing-library/react)
• fix(deps): update dependency @headlessui/react to v2
• fix(deps): update dependency eslint to v9
• fix(deps): update dependency eslint-config-next to v14
• 🔐 Create all rate-limited PRs at once 🔐

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• fix(deps): update dependency axios to v1.6.0 [security]
• fix(deps): update dependency next to v14 [security]
• chore(deps): update dependency @types/big.js to v6.2.2
• fix(deps): update dependency @types/node to v20.12.12
• fix(deps): update dependency eslint-config-next to v13.5.6
• fix(deps): update dependency tailwindcss to v3.4.3
• fix(deps): update dependency typescript to v5.4.5
• fix(deps): update react monorepo (@types/react, @types/react-dom, react, react-dom)
• chore(deps): update actions/checkout action to v4
• chore(deps): update actions/setup-node action to v4
• chore(deps): update tanstack-query monorepo to v5 (major) (@tanstack/eslint-plugin-query, @tanstack/react-query)
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

github-actions

.github/workflows/ci.yml

• actions/checkout v3
• pnpm/action-setup v2
• actions/setup-node v3

npm

package.json

• @blockshake/defly-connect ^1.1.5
• @daffiwallet/connect ^1.0.3
• @headlessui/react ^1.7.16
• @heroicons/react ^2.0.18
• @perawallet/connect ^1.3.1
• @tailwindcss/forms ^0.5.4
• @tanstack/react-query ^4.32.6
• @txnlab/use-wallet ^2.1.0
• @types/node 20.4.8
• @types/react 18.2.18
• @types/react-dom 18.2.7
• @walletconnect/modal-sign-html ^2.6.1
• algosdk ^2.4.0
• autoprefixer 10.4.16
• axios ^1.4.0
• big.js ^6.2.1
• canvas ^2.11.2
• eslint 8.46.0
• eslint-config-next 13.4.13
• next 13.4.13
• postcss 8.4.31
• react 18.2.0
• react-confetti ^6.1.0
• react-dom 18.2.0
• tailwindcss 3.3.3
• typescript 5.1.6
• @tanstack/eslint-plugin-query ^4.32.5
• @testing-library/jest-dom ^5.17.0
• @testing-library/react ^14.0.0
• @testing-library/user-event ^14.4.3
• @types/big.js ^6.2.0
• @types/testing-library__jest-dom ^5.14.9
• eslint-config-prettier ^9.0.0
• jest ^29.6.2
• jest-environment-jsdom ^29.6.2
• prettier 3.0.3

---

• Check this box to trigger a request for Renovate to run again on this repository