algorand-devrel/algorand-frontend

Algorand Frontends

Build frontend applications that connect to Algorand wallets and interact with smart contracts using typed clients. Works with React, Vue, SolidJS, Svelte, and vanilla JS/TS.

Prerequisites

1. Smart contract is deployed with a known App ID
2. ARC-56/ARC-32 app spec exists (e.g., MyContract.arc56.json)
3. Frontend project is set up (Vite, Next.js, Nuxt, SvelteKit, or any bundler)

Core Pattern: Signer Handoff

Wallet (use-wallet) → transactionSigner
                              ↓
                    AlgorandClient.setSigner()
                              ↓
                    Typed App Client (defaultSender)
                              ↓
                    Contract Method Calls (auto-signed)

Quick Start

# Generate typed client
algokit generate client path/to/MyContract.arc56.json --output src/contracts/MyContractClient.ts

# Install core + framework adapter (pick one)
npm install @algorandfoundation/algokit-utils algosdk @txnlab/use-wallet-react   # React
npm install @algorandfoundation/algokit-utils algosdk @txnlab/use-wallet-vue     # Vue
npm install @algorandfoundation/algokit-utils algosdk @txnlab/use-wallet-solid   # SolidJS
npm install @algorandfoundation/algokit-utils algosdk @txnlab/use-wallet-svelte  # Svelte
npm install @algorandfoundation/algokit-utils algosdk @txnlab/use-wallet         # Vanilla JS/TS

# Install wallet peer dependencies (only for wallets you use)
npm install @perawallet/connect @blockshake/defly-connect

Minimal Integration (React)

import { useWallet } from '@txnlab/use-wallet-react'
import { AlgorandClient } from '@algorandfoundation/algokit-utils'
import { MyContractClient } from './contracts/MyContractClient'

function ContractInteraction() {
  const { transactionSigner, activeAddress } = useWallet()

  const callContract = async () => {
    if (!activeAddress || !transactionSigner) return

    const algorand = AlgorandClient.testNet()
    algorand.setSigner(activeAddress, transactionSigner)

    const appClient = algorand.client.getTypedAppClientById(MyContractClient, {
      appId: 12345n,
      defaultSender: activeAddress,
    })

    const result = await appClient.send.myMethod({ args: { value: 42n } })
    console.log('Result:', result.return)
  }

  return <button onClick={callContract}>Call Contract</button>
}

Important Rules

1. Always call setSigner() before creating clients — signer must be registered first
2. Check for null activeAddress and transactionSigner — null when no wallet connected
3. Match networks — AlgorandClient network must match WalletManager network
4. Use getTypedAppClientById() for frontends with known App IDs
5. Check isReady before rendering wallet state — prevents SSR hydration mismatches in Next.js, Nuxt, and SvelteKit
6. Trigger signing from direct user interaction — button clicks, not timers or effects. Some wallets (especially mobile) block or silently fail signing from useEffect/onMount/setTimeout
7. Never use hook-returned clients as effect/callback dependencies — client and algorand from custom hooks are new references on every wallet state change. Use refs for data fetching in effects (see Example 11 in frontend-examples.md)

Reference Guide

• wallet-integration.md — Framework adapters, wallet providers, network config, useNetwork(), pre-built UI, gotchas
• frontend-examples.md — Complete code examples for common patterns

Canonical Example Repos

Search these repositories for real-world code examples:

• algorandfoundation/algokit-fullstack-template — Fullstack project template (React + contracts)
• algorandfoundation/algokit-react-frontend-template — React frontend template
• TxnLab/use-wallet — UseWallet library source and framework adapters
• TxnLab/next-use-wallet — Next.js + UseWallet example app

Cross-References

• New to Algorand? Read algorand-core skill first for AVM mental model
• Smart contracts: See algorand-typescript or algorand-python skills
• Project scaffolding and CLI: See algorand-project-setup skill