Ancient8 Documentation
  • ANCIENT8 CHAIN
    • Overview of Ancient8 Chain
      • What is Ancient8 Chain?
      • What makes Ancient8 Chain unique as a blockchain?
      • Ancient8 Ecosystem
      • Ancient8 Foundation
      • Tokenomics
      • Backers
    • Research
      • OP Stack
      • Celestia
    • Ancient8 Governance
    • Airdrop and Staking
  • Using Ancient8 Chain
    • Network Information
    • Adding network to Metamask
    • Contracts
    • Bridges
    • Block Explorers
    • Faucet
  • Building on Ancient8
    • Deploying Smart Contracts
      • Using Hardhat
      • Using Remix
      • Using thirdweb
    • Deploying DApps
      • Using thirdweb
  • Policies
    • USDC Bridging Compliance Policy
    • Terms of Service
    • Privacy Policy
Powered by GitBook
On this page
  • Objectives​
  • Prerequisites​
  • Creating a project​
  • Deploying the contract​
  • Interacting with your contract​
  1. Building on Ancient8
  2. Deploying Smart Contracts

Using thirdweb

PreviousUsing RemixNextDeploying DApps

Last updated 1 year ago

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

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!

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

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.

  • 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%

INFO

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

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 TypeScript as the language

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

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

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

const { data, isLoading } = useContractRead(contract, 'name');
yarn deploy
  • 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!

Select None for optional

Exploring the project

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

the contract

the contract; by declaring that our contract is ERC721Base

Implementing any such as the .

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

Deploying the contract

You can use the thirdweb to deploy a smart contract to Ancient8.

Uploads your contract source code () to

Finally, select the Ancient8 Testnet as the you want to deploy to, and click Deploy Now.

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

Interacting with your contract

Thirdweb provides SDKs for various programming languages, including , , , , , and .

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

Select as the framework

Exploring the project

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

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

Interacting with the contract

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

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

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

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

Deploying the project

To , run the following command:

This command uses to:

thirdweb
thirdweb CLI
​
​
command line interface
​
CLI
Explore
extensions
​
ERC721Base
Importing
Inheriting
required methods
constructor
ERC721Base.sol
ERC721A
extensions
​
CLI
ABI
IPFS
network
dashboard
​
React
React Native
TypeScript
Python
Go
Unity
CLI
thirdweb React SDK
Create React App
​
index.tsx
ThirdwebProvider
React SDK
UI Components
​
dashboard
useContract
useContractRead
useContractWrite
extensions
ERC721 hooks
thirdweb developer documentation
​
host your application on IPFS
Storage