Thirdweb

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

1. Go to https://thirdweb.com/team
2. Create a project with localhost in allowed domains
3. 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 (
    
      {children}
    
  );
}

Wallet Connection

ConnectButton Component

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

function WalletConnect() {
  return (
    
  );
}

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 (
    
  );
}

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 Loading...;
  return Balance: {data?.toString()};
}

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 (
    
      Transfer
    
  );
}

Account Hooks

Get Active Account

import { useActiveAccount } from "thirdweb/react";

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

  if (!account) return Not connected;
  return Connected: {account.address};
}

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 Loading...;
  return {data?.displayValue} {data?.symbol};
}

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](references/extensions.md) - Available contract extensions

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: celo-org
• Source: celo-org/agent-skills
• License: Apache-2.0

Install and usage instructions live in the source repository linked above.