thirdweb SDK

​

Install thirdweb

npx thirdweb install

​

Create Application

1. In your CLI run the following command:
   Copy

   npx thirdweb create --app
   

2. Input your preferences for the command line prompts:
   1. Give your project a name
   2. Choose your network: We will choose EVM for Moonbeam
   3. Choose your preferred framework: Next.js, CRA, Vite, React Native, Node.js, or Express
   4. Choose your preferred language: JavaScript or TypeScript
   5. We are choosing Vite and TypeScript for this particular example.
3. Use the React or TypeScript SDK to interact with your application’s functions. See the section on “interact with your contract”

​

Get a Thirdweb Client ID

1. Open the Thirdweb Dashboard and click Add New in the Projects section.
2. Select Project from the dropdown menu.
3. Enter a project name and add localhost:5173 under Allowed Domains. Click Create.
4. A Client ID and Secret ID will be generated. Copy both to a secure location—we’ll only need the Client ID.

​

Create an .env file

1. Create an .env file on your root folder.
2. Add the following:

VITE_TEMPLATE_CLIENT_ID=YOUR_THIRDWEB_CLIENT_ID
VITE_TEMPLATE_CONTRACT_ID=YOUR_CONTRACT_ID

​

Interact With a Contract

​

Initialize SDK On Celo

import React from "react";
import { createRoot } from "react-dom/client";
import { App } from "./App";
import { ThirdwebProvider } from "thirdweb/react";

createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <ThirdwebProvider>
      <App />
    </ThirdwebProvider>
  </React.StrictMode>
);

​

Get Contract

import { client } from "./client";
import { getContract, createThirdwebClient } from 'thirdweb';
import { celo } from "thirdweb/chains";

export function App() {
  
  const contract = getContract({
    client,
    address: import.meta.env.VITE_CONTRACT_ADDRESS,
    chain: celo,
  });
	
  return (
	<div>
	  <h2>{contract.contract}</h2>
	</div>
  );
}

​

Calling Contract Functions

• For extension-based functions, use the built-in supported hooks. The following is an example using the NFTs extension to access a list of NFTs owned by an address- useOwnedNFTs
  Copy

  import React, { useState } from 'react';
  import { client } from "./client";
  import { getContract, createThirdwebClient } from 'thirdweb';
  import { celo } from "thirdweb/chains";
  import { getOwnedNFTs } from "thirdweb/extensions/erc721";
  
  export function App() {
    const [nftData, setNftData] = useState(null);
  
    const contract = getContract({
      client,
      address: import.meta.env.VITE_CONTRACT_ADDRESS,
      chain: celo,
    });
  
    const loadNFTs = async (contractId) => {
      try {
        const nft = await getOwnedNFTs({
          contract,
          start: 0,
          count: 10,
          address: contractId,
        });
        setNftData(nft);
      } catch (error) {
        console.error('Error loading NFT:', error);
      }
    };
  	
    React.useEffect(() => {
      loadNFTs(import.meta.env.VITE_CONTRACT_ADDRESS);
    }, []);  	
  	
      return (
       <div>
    	  <h2>{nftData[0].metadata.name}</h2>
       </div>
      );
  }
  

  Full reference: https://portal.thirdweb.com/references/typescript/v5/erc721/getOwnedNFTs
• Use the useReadContract hook to call any read functions on your contract by passing in the name of the function you want to use.
  Copy

  import React, { useState } from 'react';
  import { client } from "./client";
  import { getContract, createThirdwebClient } from 'thirdweb';
  import { celo } from "thirdweb/chains";
  import { getOwnedNFTs } from "thirdweb/extensions/erc721";
  import { useReadContract } from "thirdweb/react";
  
  export function App() {
    const [nftData, setNftData] = useState(null);
  
    const contract = getContract({
      client,
      address: import.meta.env.VITE_CONTRACT_ADDRESS,
      chain: celo,
    });
  
  const { data, isPending } = useReadContract({
    contract,
    method: "function name() view returns (string)",
    params: [],
  }); 
    	  	
  return (
    <div>
       <h2>{data}</h2>
     </div>
  );
  }
  

  Full reference: https://portal.thirdweb.com/references/typescript/v5/useReadContract
• Use the updatemetadata function to update the metadata on your contract by passing in the information you want to update.
  Copy

  import React, { useState } from 'react';
  import { getContract, createThirdwebClient } from 'thirdweb';
  import { celo } from "thirdweb/chains";
  import { updateMetadata } from "thirdweb/extensions/erc721";
  
  export function App() {
    const [newName, setNewName] = useState('');
    const [isUpdating, setIsUpdating] = useState(false);
  
    const client = createThirdwebClient({ 
      clientId: import.meta.env.VITE_TEMPLATE_CLIENT_ID
    });
  
    const contract = getContract({
      client,
      address: import.meta.env.VITE_CONTRACT_ADDRESS,
      chain: celo,
    });
  
    const updateContractName = async () => {
      if (!newName) {
        alert("Please enter a new name");
        return;
      }
  
      setIsUpdating(true);
  
      try {
        console.log("Updating contract metadata name to:", newName);
  
        const transaction = await updateMetadata({
          contract,
          metadata: {
            name: newName,
          },
        });
  
        console.log("Transaction sent:", transaction);
        console.log("Contract metadata updated successfully!");
  
        alert("Contract metadata updated successfully!");
      } catch (error) {
        console.error('Error updating contract metadata:', error);
        alert("Failed to update contract metadata. Check the console for details.");
      } finally {
        setIsUpdating(false);
      }
    };
  
    return (
      <div>
        <h2>Update Contract Metadata Name</h2>
        <input
          type="text"
          placeholder="Enter new name"
          value={newName}
          onChange={(e) => setNewName(e.target.value)}
        />
        <button onClick={updateContractName} disabled={isUpdating}>
          {isUpdating ? "Updating..." : "Update Name"}
        </button>
      </div>
  );
  

  Full reference: https://portal.thirdweb.com/references/typescript/v5/erc721/updateMetadata

​

Connect Wallet

import React, { useState } from 'react';
import { client } from "./client";
import { ConnectButton } from "thirdweb/react";
import { createWallet, inAppWallet } from "thirdweb/wallets";

const wallets = [
  inAppWallet(),
  createWallet("io.metamask"),
  createWallet("com.coinbase.wallet"),
  createWallet("me.rainbow"),
];

export function App() {
 
  return (
    <div>
      <ConnectButton client={client} wallets={wallets} />    
    </div>
  );
}

​

Deploy Application

npx thirdweb deploy --app