useWallet

The useWallet adapter provides reactive access to wallet state and methods from the WalletManager. It's available for React, Vue, and SolidJS, offering a consistent API across frameworks while respecting each framework's patterns and conventions.

import { useWallet } from '@txnlab/use-wallet-react'

function WalletStatus() {
  const { activeAccount, activeNetwork } = useWallet()

  if (!activeAccount) {
    return <div>No wallet connected</div>
  }

  return (
    <div>
      <div>Account: {activeAccount.name}</div>
      <div>Network: {activeNetwork}</div>
    </div>
  )
}

Core Functionality

All framework adapters provide access to the same core wallet state and methods, with framework-specific reactive wrappers.

State Properties

interface WalletState {
  activeAccount: WalletAccount | null
  activeAddress: string | null
  activeWallet: Wallet | null
  activeWalletAccounts: WalletAccount[] | null
  activeWalletAddresses: string[] | null
  algodClient: algosdk.Algodv2
  isReady: boolean
  wallets: Wallet[]
}

Methods

interface WalletMethods {
  signTransactions<T extends algosdk.Transaction[] | Uint8Array[]>(
    txnGroup: T | T[],
    indexesToSign?: number[]
  ): Promise<(Uint8Array | null)[]>
  transactionSigner: algosdk.TransactionSigner
}

Framework-Specific Usage

Each framework adapter provides the same functionality with patterns optimized for that framework's ecosystem.

Setup

// App.tsx
import { WalletProvider, WalletManager } from '@txnlab/use-wallet-react'

const manager = new WalletManager({
  // ... WalletManager config
})

function App() {
  return (
    <WalletProvider manager={manager}>
      <YourComponents />
    </WalletProvider>
  )
}

See the framework-specific guides for detailed setup instructions.

State Access

React provides state directly as properties from the hook:

import { useWallet } from '@txnlab/use-wallet-react'

function Component() {
  const { activeAccount } = useWallet()

  return (
    <div>
      {activeAccount && (
        <p>Connected to {activeAccount.name}</p>
      )}
    </div>
  )
}

Complete Example

Here's a complete example showing wallet connection, transaction signing, and error handling in each framework:

import { useWallet, WalletId } from '@txnlab/use-wallet-react'

function WalletComponent() {
  const {
    activeAccount,
    activeNetwork,
    wallets,
    signTransactions
  } = useWallet()

  const handleConnect = async () => {
    const pera = wallets.find((w) => w.id === WalletId.PERA)
    if (!pera) return

    try {
      await pera.connect()
    } catch (error) {
      console.error('Connection failed:', error)
    }
  }

  const handleDisconnect = async () => {
    const pera = wallets.find((w) => w.id === WalletId.PERA)
    if (!pera) return

    try {
      await pera.disconnect()
    } catch (error) {
      console.error('Disconnect failed:', error)
    }
  }

  const handleSign = async () => {
    try {
      // Example: Sign a transaction
      // See the Signing Transactions guide for complete examples
      const signedTxns = await signTransactions([/* transactions */])
      console.log('Transaction signed!')
    } catch (error) {
      console.error('Signing failed:', error)
    }
  }

  if (!activeAccount) {
    return <button onClick={handleConnect}>Connect Wallet</button>
  }

  return (
    <div>
      <p>Connected to {activeAccount.name}</p>
      <p>Network: {activeNetwork}</p>
      <button onClick={handleDisconnect}>Disconnect</button>
      <button onClick={handleSign}>Sign Transaction</button>
    </div>
  )
}

Framework-Specific Considerations

React

  • Uses React's Context API for state management

  • Compatible with React 16.8+ (requires Hooks)

Vue

  • Integrated with Vue's reactivity system using ref and computed

  • Can be used in Options API via inject

  • State properties are automatically unwrapped in templates

  • Compatible with Vue 3.x

SolidJS

  • Uses Solid's fine-grained reactivity system

  • State values are accessed via getter functions for reactivity

  • Compatible with Solid 1.x

Error Handling

By design, wallet operations propagate errors to the consuming application. This allows applications to handle user feedback in a way that best fits their UI/UX patterns, such as displaying toasts, modals, or in-line error messages.

Always wrap async operations in try/catch blocks:

try {
  await wallet.connect()
} catch (error) {
  // Handle connection error (e.g., show toast notification)
  console.error('Connection failed:', error)
}

try {
  const signedTxns = await signTransactions([/* transactions */])
} catch (error) {
  // Handle signing error (e.g., show modal with error details)
  console.error('Signing failed:', error)
}

See the Connect Wallet Menu and Signing Transactions guide for more detailed error handling examples.

TypeScript Support

All framework adapters are written in TypeScript and provide full type definitions. State and method types are consistent across frameworks, with framework-specific wrappers where needed (e.g., Vue refs, Solid signals).

See Also

PreviousWalletManagerNextuseNetwork

Last updated