Using Thirdweb

thirdweb is a development framework that allows you to easily build Web3 functionality into your applications. It provides tools to create, deploy, and interact with smart contracts using a unified developer workflow.

In this guide, you will learn how to use the thirdweb CLI to deploy a smart contract to the CelesChain Testnet.

---

Objectives

By the end of this guide, you will be able to:

• Create a project with a smart contract using thirdweb

• Deploy smart contracts to CelesChain using the thirdweb CLI

• Interact with deployed smart contracts using the thirdweb SDK

---

Prerequisites

The interactive thirdweb command line interface has everything needed to create, build, and deploy smart contracts and applications to CelesChain.

Install the CLI globally:

npm i -g @thirdweb-dev/cli

Or use npx to always run the latest version:

npx thirdweb

---

Creating a Project

You can use the thirdweb CLI to create a new project that includes a smart contract. Alternatively, you can deploy prebuilt NFT, Token, or Marketplace contracts directly from the thirdweb Explore page.

To create a new smart contract project:

npx thirdweb create contract

This will trigger an interactive setup:

• Enter a project name

• Select Hardhat

• Select a base contract such as ERC721

• Select None for optional extensions, unless needed

---

Exploring the Project

Open the newly created folder in your editor. Inside the contracts directory, you will find a Contract.sol file.

The contract typically inherits from a thirdweb base contract. Example:

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;

import "@thirdweb-dev/contracts/base/ERC721Base.sol";

contract Contract is ERC721Base {
    constructor(
        string memory _name,
        string memory _symbol,
        address _royaltyRecipient,
        uint128 _royaltyBps
    ) ERC721Base(_name, _symbol, _royaltyRecipient, _royaltyBps) {}
}

The code imports ERC721Base, inherits it, and implements any required methods. This pattern allows you to add custom logic on top of audited base contract implementations.

---

Deploying the Contract

You can deploy your contract to CelesChain Testnet using the CLI.

From your project root, run:

npx thirdweb deploy

This command will:

• Compile your contracts

• Let you select which contract to deploy

• Upload ABI and source code to IPFS

• Open the deployment interface in the dashboard

In the dashboard, enter your constructor parameters:

• _name

• _symbol

• _royaltyRecipient

• _royaltyBps

Then select:

➡️ CelesChain Testnet as your deployment network.

Click Deploy Now.

After deployment, you will be redirected to the thirdweb dashboard for contract management.

---

Interacting With Your Contract

thirdweb provides SDKs for:

• React

• React Native

• TypeScript

• Python

• Go

• Unity

To build a frontend application that interacts with your deployed contract, you can scaffold a Web3-enabled React app.

Create a thirdweb React project:

npx thirdweb create app –evm

Interactive steps:

• Name your project

• Choose Create React App

• Choose TypeScript

---

Project Structure

Open the generated folder. In src/index.tsx, you will see the app wrapped with ThirdwebProvider.

This wrapper configures the active chain, allowing the SDK to connect to contracts deployed on CelesChain.

Since we deployed to CelesChain Testnet, set the active chain to CelesChain Testnet:

import { ThirdwebProvider } from "@thirdweb-dev/react";

const App = () => {
  return (
    <ThirdwebProvider
      activeChain={{
        chainId: 22225,
        rpc: ["https://rpc-testnet.celeschain.xyz"],

        nativeCurrency: {
          decimals: 18,
          name: "Celes",
          symbol: "CLES",
        },

        shortName: "cles-testnet",
        slug: "celeschain-testnet",
        testnet: true,
        chain: "CelesChain Testnet",
        name: "CelesChain Testnet",
      }}
    >
      <YourApp />
    </ThirdwebProvider>
  );
};

---

Interacting With the Contract in the App

Use the contract address from the thirdweb dashboard.

import { useContract } from "@thirdweb-dev/react";

export default function Home() {
  const { contract } = useContract("<CONTRACT_ADDRESS>");
}

To read contract data:

const { data, isLoading } = useContractRead(contract, "name");

To write transactions:

const { mutateAsync, isLoading } = useContractWrite(contract, "mintTo");

thirdweb also provides hooks for ERC20, ERC721, and other supported interfaces.

For more information, see the official thirdweb SDK documentation.

---

Deploying the Web Application

You can deploy your app to IPFS using:

yarn deploy

This will:

• Build your application

• Upload the build to IPFS

• Generate a permanent link hosted on decentralized storage

Your application is now live and fully connected to smart contracts deployed on CelesChain Testnet.