Deploying a smart contract using thirdweb

thirdweb is a development framework that allows you to build web3 functionality into your applications.

In this tutorial, we'll give you an overview of using the thirdweb CLI to deploy a contract to the Base Sepolia test network.

---

Objectives

By the end of this lesson, you should be able to:

• Create a project with a smart contract using thirdweb
• Deploy smart contracts using thirdweb
• Interact with deployed smart contracts using thirdweb

---

Prerequisites

The interactive thirdweb command line interface has everything you need to create, build and deploy smart contracts and apps to Base.

We recommend using npx to always get the latest version. Alternatively, you can install the CLI as a global command on your machine:

npm i -g @thirdweb-dev/cli

---

Creating a project

You can use the thirdweb CLI to create a new project that contains a smart contract, alternatively, you can deploy a prebuilt contract for NFTs, Tokens or Marketplace directly from the thirdweb Explore page.

To create a new project using the CLI, run:

npx thirdweb create contract

This will kick off an interactive series of questions to help you get started:

• Give your project a name
• Select Hardhat as the framework
• Select ERC721 as the base contract
• Select None for optional extensions

Exploring the project

The create command generates a new directory with your project name. Open this directory in your text editor.

Inside the contracts folder, you'll find a Contract.sol file; this is our smart contract written in Solidity!

If we take a look at the code, you can see that our contract is inheriting the functionality of ERC721Base, by:

1. Importing the contract
2. Inheriting the contract; by declaring that our contract is ERC721Base
3. Implementing any required methods such as the constructor.

// 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) {}
}

This inheritance pattern lets us use functionality from other contracts inside of ours, modify it, and add custom logic.

For example, our contract currently implements all of the logic inside the ERC721Base.sol contract; which implements the ERC721A standard with several useful extensions.

---

Deploying the contract

You can use the thirdweb CLI to deploy a smart contract to Base.

To deploy your smart contracts, from the root directory of your project, run:

npx thirdweb deploy

Running this command will:

• Compile all the contracts in the current directory.
• Allow you to select which contract(s) you want to deploy.
• Uploads your contract source code (ABI) to IPFS
• Open the deploy flow in the dashboard

From the dashboard, you will need to first enter the values for our contract's constructor:

• _name: The name of our contract
• _symbol: The symbol or "ticker" given to our contracts tokens
• _royaltyRecipient: The wallet address that will receive the royalties from secondary sales
• _royaltyBps: The basis points (bps) that will be given to the royalty recipient for each secondary sale, e.g. 500 = 5%

Finally, select the Base Sepolia test network as the network you want to deploy to, and click Deploy Now.

info

For production / mainnet deployments select Base (mainnet) as the network rather than Base Sepolia.

Once your contract is deployed, you'll be redirected to a dashboard for managing your contract.

---

Interacting with your contract

Thirdweb provides SDKs for various programming languages, including React, React Native, TypeScript, Python, Go, and Unity.

To interact with your smart contract, you can use the thirdweb CLI to create a web application that is pre-configured with the thirdweb React SDK.

To create a web application preconfigured with the thirdweb SDK, run:

npx thirdweb create app –evm

This will kick off an interactive series of questions to help you get started:

• Give your project a name
• Select Create React App as the framework
• Select TypeScript as the language

Exploring the project

The create command generates a new directory with your project name. Open this directory in your text editor.

Inside the index.tsx file, you'll find the ThirdwebProvider wrapping the entire application.

This wrapper allows us to use all of the React SDK's hooks and UI Components throughout the application, as well as configure an activeChain; which declares which chain our smart contracts are deployed to.

Since we deployed our smart contract to the Base network, we'll set the activeChain to BaseSepoliaTestnet:

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

const container = document.getElementById("root");
const root = createRoot(container!);
root.render(
 <React.StrictMode>
   <ThirdwebProvider activeChain={BaseSepoliaTestnet}>
     <App />
   </ThirdwebProvider>
 </React.StrictMode>
);

Interacting with the contract

To connect to your smart contract in the application, provide your smart contract address (which you can get from the dashboard) to the useContract hook like so:

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

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

  // Now you can use the contract in the rest of the component!
}

You can now call any function on your smart contract with useContractRead and useContractWrite hooks.

For example, you can call useContractRead to get the name of the contract:

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

The thirdweb SDK also provides hooks for various interfaces and extensions that make reading and writing data easier. For example, we could use the ERC721 hooks to fetch the metadata for our NFT contract.

For more information on interacting with smart contracts using the thirdweb SDK, visit the thirdweb developer documentation.

Deploying the project

To host your application on IPFS, run the following command:

yarn deploy

This command uses Storage to:

• Create a production build of your application
• Upload the build to IPFS
• Generate a URL where your app is permanently hosted.

That's it! You now have a web application that interacts with smart contracts deployed to Base!

---