Integrating Wallet Connection

The AlgoKit template includes built-in support for @txnlab/use-wallet, a flexible and framework-agnostic wallet management library designed specifically for Algorand dApps. This library abstracts away the complexity of wallet integrations, letting developers focus on application logic rather than low-level connection handling.

• Install UseWallet
• npm install @txnlab/use-wallet
• Wrap your app with UseWalletProvider: This enables wallet connections throughout your app.
• Use the useWallet hook: This hook provides methods like signTransactions and transactionSigner for signing transactions.

use-wallet works seamlessly across modern front-end frameworks, with official adapters for React, Vue, SolidJS, and Svelte.

Supported Wallets

The library supports several production-ready Algorand wallets:

• Pera Wallet
• Defly Wallet
• Exodus Wallet

You can find more detailed information here. These are just some of the supported wallets; many more are available.

Use AlgoKit DApp Frontend React Template

If you’re starting a new project, the AlgoKit DApp Frontend React Template comes pre-integrated with UseWallet and provides a modern React setup with wallet connectivity, transaction examples, and more. You can initialize it with:

algokit init -t react

or select the dApp Frontend template interactively.

This template supports wallet integration, transaction signing, and even localnet testing for development convenience. See the official template documentation for more info.

Default Networks and Switching

Use-wallet supports multiple Algorand networks out of the box:

• Mainnet
• Testnet
• Localnet

You can configure the default network on startup using the WalletManager:

import { WalletManager, NetworkId } from '@txnlab/use-wallet'

const manager = new WalletManager({
 defaultNetwork: NetworkId.TESTNET
})

Reliable Blockchain Access with AlgoKit Utils

When building on Algorand, reliable communication with the blockchain is essential. AlgoKit Utils clients provide developer-friendly interfaces that simplify sending transactions, interacting with smart contracts, and accessing blockchain data.

Connecting to Networks with AlgorandClient

AlgorandClient serves as the primary entry point for Algorand operations. It provides factory methods to connect easily to different networks:

AlgorandClient.fromEnvironment()
AlgorandClient.defaultLocalNet()
AlgorandClient.testNet()
AlgorandClient.mainNet()

These methods simplify network configuration and connection. You can find more detailed information in the Algorand Documentation.