Skip to main content
AlgoKit is the official toolkit for building applications on Algorand. The use-wallet library integrates seamlessly with AlgoKit templates and workflows, providing a robust foundation for wallet connectivity in your Algorand dApps.

​
What is AlgoKit?

AlgoKit is a comprehensive development toolkit that streamlines building on Algorand. It provides:
  • Project templates with best practices
  • CLI tools for development workflow
  • Testing and debugging utilities
  • Deployment and configuration management

​
Using use-wallet with AlgoKit

While AlgoKit doesn’t currently provide official templates that include use-wallet out of the box, the library is designed to integrate seamlessly with AlgoKit-generated projects.

​
Integration with AlgoKit Utils

use-wallet works perfectly alongside AlgoKit Utils, providing wallet connectivity while AlgoKit Utils handles transaction composition and smart contract interactions. 
import { AlgorandClient } from '@algorandfoundation/algokit-utils'
import { useWallet } from '@txnlab/use-wallet-react'

function MyComponent() {
  const { activeAddress, transactionSigner, algodClient } = useWallet()

  const algorand = AlgorandClient.fromClients({
    algod: algodClient,
    indexer: indexerClient
  })

  // Set the signer from use-wallet
  algorand.setDefaultSigner(transactionSigner)

  // Now you can use AlgorandClient with wallet signing
  const result = await algorand.send.payment({
    sender: activeAddress,
    receiver: receiverAddress,
    amount: (1000).microAlgo()
  })
}

​
KMD wallet for local development

use-wallet includes support for the KMD (Key Management Daemon) wallet, which is essential when working with AlgoKit’s local development environment. 
import { NetworkId, WalletId, WalletManager } from '@txnlab/use-wallet'

const walletManager = new WalletManager({
  wallets: [
    WalletId.KMD, // For AlgoKit LocalNet development
    WalletId.PERA,
    WalletId.DEFLY,
    // ... other wallets
  ],
  defaultNetwork: NetworkId.LOCALNET
})
The KMD wallet connects to the key management daemon that runs as part of AlgoKit’s LocalNet, allowing you to access pre-funded development accounts. For more information, see the KMD wallet documentation.

​
AlgorandClient integration

The transactionSigner provided by use-wallet is fully compatible with AlgoKit Utils’ AlgorandClient and typed application clients. 
import { AlgorandClient } from '@algorandfoundation/algokit-utils'
import { useWallet } from '@txnlab/use-wallet-react'
import algosdk from 'algosdk'

function SendTransaction() {
  const { activeAddress, transactionSigner, algodClient } = useWallet()

  const sendPayment = async () => {
    const algorand = AlgorandClient.fromClients({ algod: algodClient })
    algorand.setDefaultSigner(transactionSigner)

    const result = await algorand.send.payment({
      sender: activeAddress!,
      receiver: 'RECEIVER_ADDRESS',
      amount: algosdk.algosToMicroalgos(1)
    })

    console.log('Transaction ID:', result.txIds[0])
  }

  return (
    <button onClick={sendPayment}>
      Send Payment
    </button>
  )
}

import { useWallet } from '@txnlab/use-wallet-react'
import { MyContractClient } from './contracts/MyContract'

function CallContract() {
  const { activeAddress, transactionSigner, algodClient } = useWallet()

  const callMethod = async () => {
    const client = new MyContractClient(
      {
        sender: { addr: activeAddress!, signer: transactionSigner },
        resolveBy: 'id',
        id: APP_ID
      },
      algodClient
    )

    const result = await client.myMethod({
      args: { /* method arguments */ }
    })

    console.log('Result:', result.return)
  }

  return (
    <button onClick={callMethod}>
      Call Contract
    </button>
  )
}

​
Testing with AlgoKit

When testing AlgoKit projects, use-wallet’s mnemonic wallet provider is invaluable for automated testing. 
import { NetworkId, WalletId, WalletManager } from '@txnlab/use-wallet'

// In your test setup
const walletManager = new WalletManager({
  wallets: [WalletId.MNEMONIC],
  defaultNetwork: NetworkId.LOCALNET
})

const mnemonicWallet = walletManager.wallets?.find(
  (w) => w.id === WalletId.MNEMONIC
)

await mnemonicWallet?.connect({
  mnemonic: 'your test account mnemonic'
})
For more details, see the Testing with mnemonic wallet guide.

​
Network configuration

use-wallet supports all Algorand networks that AlgoKit works with:
  • LocalNet: AlgoKit’s local development network
  • TestNet: Algorand’s public test network
  • MainNet: Algorand’s main production network
import { NetworkId } from '@txnlab/use-wallet'

// Configure for LocalNet (AlgoKit default)
const walletManager = new WalletManager({
  wallets: [/* ... */],
  defaultNetwork: NetworkId.LOCALNET,
  networks: {
    [NetworkId.LOCALNET]: {
      algod: {
        baseUrl: 'http://localhost',
        port: 4001,
        token: 'a'.repeat(64)
      },
      indexer: {
        baseUrl: 'http://localhost',
        port: 8980,
        token: 'a'.repeat(64)
      }
    }
  }
})

​
Resources

AlgoKit documentation

Official AlgoKit documentation

AlgoKit Utils

AlgoKit Utils TypeScript library

Signing transactions

Learn how to sign transactions with use-wallet

Runtime node configuration

Configure network settings at runtime

​
Next steps

Build docs developers (and LLMs) love

Get started for freeTalk to us