Using thirdweb

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

In this guide, we'll give you an overview of using the thirdweb CLI to deploy a contract to the Ancient8 Testnet.

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 Ancient8 Testnet.

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 Ancient8.

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 Ancient8 Testnet as the network you want to deploy to, and click Deploy Now.

INFO

For production / mainnet deployments select Ancient8 Mainnet as the network rather than Ancient8 Testnet.

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 Ancient8 Testnet, we'll set the activeChain to Ancient8 Testnet:

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

const App = () => {
  return (
    <ThirdwebSDKProvider
      activeChain={{
        // === Required information for connecting to the network === \\
        chainId: 2863311531, // Chain ID of the network
        // Array of RPC URLs to use
        rpc: ["https://rpc-testnet.ancient8.gg"],

        // === Information for adding the network to your wallet (how it will appear for first time users) === \\
        // Information about the chain's native currency (i.e. the currency that is used to pay for gas)
        nativeCurrency: {
          decimals: 18,
          name: "Sepolia ETH",
          symbol: "ETH",
        },
        shortName: "czkevm", // Display value shown in the wallet UI
        slug: "a8testnet", // Display value shown in the wallet UI
        testnet: true, // Boolean indicating whether the chain is a testnet or mainnet
        chain: "Ancient8 Testnet", // Name of the network
        name: "Ancient8 Testnet", // Name of the network
      }}
    >
      <YourApp />
    </ThirdwebSDKProvider>
  );
};

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 Ancient8 Testnet!