Comment on page
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.
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
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
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!If we take a look at the code, you can see that our contract is inheriting the functionality of
ERC721Base
, by:- 1.
- 2.
- 3.
// 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.To deploy your smart contracts, from the root directory of your project, run:
npx thirdweb deploy
Running this command will:
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.
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
TypeScript
as the language
The create command generates a new directory with your project name. Open this directory in your text editor.
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>
);
};
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.
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!
Last modified 3mo ago