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>
}