React

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

const walletManager = new WalletManager({
  wallets: [
    WalletId.DEFLY,
    WalletId.PERA,
    WalletId.EXODUS,
    {
      id: WalletId.WALLETCONNECT,
      options: { projectId: 'YOUR_PROJECT_ID' }
    },
    WalletId.KMD
  ],
  defaultNetwork: NetworkId.TESTNET
})

function App() {
  return (
    <WalletProvider manager={walletManager}>
      {/* Your app components */}
    </WalletProvider>
  )
}

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

function ConnectButton() {
  const { wallets, activeAddress } = useWallet()

  return (
    <div>
      {activeAddress ? (
        <p>Connected: {activeAddress}</p>
      ) : (
        <div>
          {wallets.map((wallet) => (
            <button
              key={wallet.id}
              onClick={() => wallet.connect()}
              disabled={wallet.isConnected}
            >
              Connect {wallet.metadata.name}
            </button>
          ))}
        </div>
      )}
    </div>
  )
}

interface UseWalletReturn {
  // Wallet state
  wallets: Wallet[]
  isReady: boolean
  activeWallet: Wallet | null
  activeWalletAccounts: WalletAccount[] | null
  activeWalletAddresses: string[] | null
  activeAccount: WalletAccount | null
  activeAddress: string | null

  // Algod client
  algodClient: algosdk.Algodv2
  setAlgodClient: (client: algosdk.Algodv2) => void

  // Signing methods
  signTransactions: (txnGroup: Transaction[] | Uint8Array[], indexesToSign?: number[]) => Promise<(Uint8Array | null)[]>
  transactionSigner: (txnGroup: Transaction[], indexesToSign: number[]) => Promise<Uint8Array[]>
  signData: (data: string, metadata: SignMetadata) => Promise<SignDataResponse>
  withPrivateKey: <T>(callback: (secretKey: Uint8Array) => Promise<T>) => Promise<T>
}

interface Wallet {
  id: WalletId
  walletKey: WalletKey
  metadata: WalletMetadata
  accounts: WalletAccount[]
  activeAccount: WalletAccount | null
  isConnected: boolean
  isActive: boolean
  canSignData: boolean
  canUsePrivateKey: boolean
  connect: (args?: Record<string, any>) => Promise<WalletAccount[]>
  disconnect: () => Promise<void>
  setActive: () => void
  setActiveAccount: (address: string) => void
}

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

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

  const sendTransaction = async () => {
    if (!activeAddress) {
      throw new Error('No active account')
    }

    const atc = new algosdk.AtomicTransactionComposer()
    const suggestedParams = await algodClient.getTransactionParams().do()

    const transaction = algosdk.makePaymentTxnWithSuggestedParamsFromObject({
      sender: activeAddress,
      receiver: activeAddress,
      amount: 0,
      suggestedParams
    })

    atc.addTransaction({ txn: transaction, signer: transactionSigner })

    const result = await atc.execute(algodClient, 4)
    console.log('Transaction sent:', result.txIDs)
  }

  return (
    <button onClick={sendTransaction} disabled={!activeAddress}>
      Send Transaction
    </button>
  )
}

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

function NetworkSelector() {
  const { activeNetwork, setActiveNetwork } = useNetwork()

  return (
    <div>
      <p>Current network: {activeNetwork}</p>
      <button onClick={() => setActiveNetwork('mainnet')}>
        Switch to MainNet
      </button>
      <button onClick={() => setActiveNetwork('testnet')}>
        Switch to TestNet
      </button>
    </div>
  )
}

interface UseNetworkReturn {
  activeNetwork: string
  networkConfig: Record<string, NetworkConfig>
  activeNetworkConfig: NetworkConfig
  setActiveNetwork: (networkId: NetworkId | string) => Promise<void>
  updateAlgodConfig: (networkId: string, config: Partial<AlgodConfig>) => void
  resetNetworkConfig: (networkId: string) => void
}

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

function AccountSelector() {
  const { activeWallet } = useWallet()

  if (!activeWallet || !activeWallet.isConnected) {
    return null
  }

  return (
    <select
      value={activeWallet.activeAccount?.address || ''}
      onChange={(e) => activeWallet.setActiveAccount(e.target.value)}
    >
      {activeWallet.accounts.map((account) => (
        <option key={account.address} value={account.address}>
          {account.address}
        </option>
      ))}
    </select>
  )
}

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

function AuthButton() {
  const { activeAddress, signData, activeWallet } = useWallet()

  const authenticate = async () => {
    if (!activeAddress || !activeWallet?.canSignData) {
      throw new Error('Wallet does not support data signing')
    }

    const message = { domain: window.location.host, timestamp: Date.now() }
    const data = btoa(JSON.stringify(message))
    const metadata = { scope: ScopeType.AUTH, encoding: 'base64' }

    const response = await signData(data, metadata)
    console.log('Signature:', response)
  }

  return (
    <button
      onClick={authenticate}
      disabled={!activeWallet?.canSignData}
    >
      Authenticate
    </button>
  )
}

import type {
  Wallet,
  WalletAccount,
  WalletMetadata,
  SignMetadata,
  SignDataResponse
} from '@txnlab/use-wallet-react'