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 BaseGoerli:
... import { BaseGoerli } from "@thirdweb-dev/chains"; import { ThirdwebProvider } from "@thirdweb-dev/react";
const container = document.getElementById("root"); const root = createRoot(container!); root.render( <React.StrictMode> </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!