Skip to main content

Deploying a smart contract using thirdweb

Thirdweb is a powerful development framework that enables you to integrate web3 functionality into your applications. This tutorial will guide you through using the thirdweb CLI to deploy a smart contract on the FunkiSepolia.

Objectives​

By the end of this lesson, you'll 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 (CLI) provides all the tools necessary to create, build, and deploy smart contracts and apps to Funki.

For the most up-to-date version, we recommend using npx. However, you can also install the CLI globally on your machine:

npm i -g @thirdweb-dev/cli

Creating a project​

The thirdweb CLI enables you to create a new project with a smart contract. You can also deploy pre-built contracts for NFTs, Tokens, or Marketplaces directly from the thirdweb Explore page.

To create a new project using the CLI, run this command:

npx thirdweb create contract

This will initiate an interactive series of prompts to guide you through the setup process:

  • Name your project
  • Choose Hardhat as the framework
  • Select ERC721 for the base contract
  • Opt for "None" when asked about 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 your smart contract written in Solidity!

Examining the code, you'll see that our contract inherits the functionality of ERC721Base by:

  1. Importing the contract
  2. Inheriting the contract (declaring that our contract is ERC721Base)
  3. Implementing 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 Funki.

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

npx thirdweb deploy

Running this command will:

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

From the dashboard, you'll need to enter the values for your contract's constructor:

  • _name: Your contract's name
  • _symbol: The "ticker" symbol for your contract's tokens
  • _royaltyRecipient: The wallet address receiving royalties from secondary sales
  • _royaltyBps: The basis points (bps) for royalties on each secondary sale (e.g., 500 = 5%)

Lastly, choose the FunkiSepolia as your deployment network, then click Deploy Now.

info

For production / mainnet deployments select FunkiMainet as the network rather than FunkiSepolia.

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.

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

This wrapper enables the use of all React SDK hooks and UI Components throughout the application. It also allows you to configure an activeChain, which specifies the blockchain network for your smart contracts.

Since we deployed our smart contract to the Funki network, we'll set the activeChain to FunkiSepolia:

...
import { FunkiSepolia } 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={FunkiSepolia}>
     <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 offers hooks for various interfaces and extensions, simplifying data reading and writing. For instance, we can use ERC721 hooks to retrieve metadata for our NFT contract.

To learn more about interacting with smart contracts using the thirdweb SDK, check out 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 Funki!