Implementing Frontend II - Fetching Contract Info

Interacting with Smart Contracts Using Thirdweb

In this video, we’ll begin working on smart contract integration using Thirdweb. We’ll cover how to interact with deployed contracts and fetch contract metadata using Thirdweb’s React hooks.

1. Setting Up the useContract Hook

Thirdweb provides pre-built hooks to streamline blockchain interactions. One of the key hooks is useContract, which we’ll use frequently throughout the project.

• This hook returns:
• A contract instance
• A loading state

During the loading phase, we can display a loading bar or a status indicator. Once the contract is loaded, we can perform various operations, starting with fetching contract metadata.

2. Automating Contract Address Management

To avoid hardcoding contract addresses repeatedly, we’ll create a reusable helper function. Here’s how we approach it:

• Use a getContractAddresses utility that wraps our .env values.
• This method ensures type safety (we’re working in TypeScript) and prevents runtime errors.

We then create a helper function, such as getMarketplaceContract, which:

• Retrieves the marketplace address from the environment
• Uses useContract to return the contract instance and loading state
• Specifies the contract version, since marketplaces can have multiple versions

We do the same for NFTs with a getNFTContract function. These helpers simplify reuse and minimize redundant code.

3. Creating the Info Page: Viewing Contract Metadata

We set up an InfoPage component where users can view the metadata for both:

• The Marketplace contract
• The NFT Collection contract

To do this:

• Call getMarketplaceContract and getNFTContract to get the contract instances
• Use the useContractMetadata hook to fetch metadata for each
• Display loading indicators while the data is being fetched

const { data: marketplaceMetadata, isLoading: marketplaceLoading } = useContractMetadata(marketplaceContract);
const { data: nftMetadata, isLoading: nftLoading } = useContractMetadata(nftContract);

These hooks update in real time, so you don't need to manually manage loading states.

4. Displaying Metadata with Custom UI Components

Using our custom UI components, we render the fetched metadata:

• Contract name
• Description
• Symbol
• Creator
• Creation date

If metadata is available, we render the corresponding section. If it’s still loading, we show a message like “Loading contract info…”.

{marketplaceLoading || nftLoading ? (
  <div>Loading contract info...</div>
) : (
  <>
    {marketplaceMetadata && (
      <ContractMetadata title="NFT Marketplace" metadata={marketplaceMetadata} />
    )}
    {nftMetadata && (
      <ContractMetadata title="NFT Collection Metadata" metadata={nftMetadata} />
    )}
  </>
)}

This ensures users always see a responsive UI based on real-time contract state.

5. Final Thoughts and What’s Next

You’ve now set up reusable contract hooks and built an info page to display metadata for your NFT marketplace and collection contracts.