Thirdweb for Celo

Thirdweb is a full-stack Web3 development platform with SDK support for Celo.

Source: https://docs.celo.org/tooling/libraries-sdks/thirdweb-sdk/index.md

When to Use

Building dApps with pre-built UI components
Deploying contracts without writing deployment scripts
Integrating 500+ wallet options
Building cross-chain applications

Installation

npm install thirdweb

Or create a new project:

npx thirdweb create app

Client Setup

Get Client ID

Go to https://thirdweb.com/team
Create a project with localhost in allowed domains
Copy the client ID

Initialize Client

import { createThirdwebClient } from "thirdweb";

export const client = createThirdwebClient({
  clientId: process.env.NEXT_PUBLIC_THIRDWEB_CLIENT_ID!,
});

For server-side usage:

const client = createThirdwebClient({
  secretKey: process.env.THIRDWEB_SECRET_KEY!,
});

Source: https://portal.thirdweb.com/typescript/v5/getting-started

Chain Configuration

Using Predefined Chains

import { celo } from "thirdweb/chains";

// Use directly
const chain = celo;

Custom Chain Definition

import { defineChain } from "thirdweb";

const celoChain = defineChain(42220);

// Or with custom RPC
const celoCustom = defineChain({
  id: 42220,
  rpc: "https://forno.celo.org",
});

Source: https://portal.thirdweb.com/typescript/v5/chain

React Provider Setup

import { ThirdwebProvider } from "thirdweb/react";

function App({ children }: { children: React.ReactNode }) {
  return (
    <ThirdwebProvider>
      {children}
    </ThirdwebProvider>
  );
}

Wallet Connection

ConnectButton Component

import { ConnectButton } from "thirdweb/react";
import { celo } from "thirdweb/chains";
import { client } from "./client";

function WalletConnect() {
  return (
    <ConnectButton
      client={client}
      chain={celo}
    />
  );
}

With Specific Wallets

import { ConnectButton } from "thirdweb/react";
import { createWallet } from "thirdweb/wallets";

const wallets = [
  createWallet("io.metamask"),
  createWallet("com.coinbase.wallet"),
  createWallet("app.valora"),
];

function WalletConnect() {
  return (
    <ConnectButton
      client={client}
      wallets={wallets}
    />
  );
}

Contract Interaction

Get Contract Reference

import { getContract } from "thirdweb";
import { celo } from "thirdweb/chains";

const contract = getContract({
  client,
  chain: celo,
  address: "0x...",
});

Read Contract Data

import { useReadContract } from "thirdweb/react";
import { balanceOf } from "thirdweb/extensions/erc20";

function TokenBalance({ address }: { address: string }) {
  const { data, isLoading } = useReadContract(
    balanceOf,
    {
      contract,
      address,
    }
  );

  if (isLoading) return <div>Loading...</div>;
  return <div>Balance: {data?.toString()}</div>;
}

Write to Contract

import { useSendTransaction } from "thirdweb/react";
import { transfer } from "thirdweb/extensions/erc20";

function TransferTokens() {
  const { mutate: sendTransaction, isPending } = useSendTransaction();

  async function handleTransfer() {
    const transaction = transfer({
      contract,
      to: "0x...",
      amount: "10",
    });

    sendTransaction(transaction);
  }

  return (
    <button onClick={handleTransfer} disabled={isPending}>
      Transfer
    </button>
  );
}

Account Hooks

Get Active Account

import { useActiveAccount } from "thirdweb/react";

function Account() {
  const account = useActiveAccount();

  if (!account) return <div>Not connected</div>;
  return <div>Connected: {account.address}</div>;
}

Get Wallet Balance

import { useWalletBalance } from "thirdweb/react";
import { celo } from "thirdweb/chains";

function Balance() {
  const account = useActiveAccount();
  const { data, isLoading } = useWalletBalance({
    client,
    chain: celo,
    address: account?.address,
  });

  if (isLoading) return <div>Loading...</div>;
  return <div>{data?.displayValue} {data?.symbol}</div>;
}

Server-Side Usage

import { createThirdwebClient } from "thirdweb";
import { getContract } from "thirdweb";
import { celo } from "thirdweb/chains";
import { getNFTs } from "thirdweb/extensions/erc1155";

const client = createThirdwebClient({
  secretKey: process.env.THIRDWEB_SECRET_KEY!,
});

const contract = getContract({
  client,
  chain: celo,
  address: "0x...",
});

const nfts = await getNFTs({ contract });

Pre-built Extensions

Thirdweb provides type-safe extensions for common contracts:

Extension	Import Path
ERC20	`thirdweb/extensions/erc20`
ERC721	`thirdweb/extensions/erc721`
ERC1155	`thirdweb/extensions/erc1155`

Deployment

Deploy to decentralized storage:

npx thirdweb deploy --app

Environment Variables

# .env
NEXT_PUBLIC_THIRDWEB_CLIENT_ID=your_client_id
THIRDWEB_SECRET_KEY=your_secret_key  # Server-side only

Dependencies

{
  "dependencies": {
    "thirdweb": "^5.0.0"
  }
}

Additional Resources

extensions.md - Available contract extensions

thirdweb