Quickstart

npm i thirdweb

Log in to the thirdweb dashboard. Navigate to the Settings page and create an API key to get your Client ID.

• Pass your clientId to createThirdwebClient
• Wrap your application with a ThirdwebProvider
• Add a ConnectButton to your application

import { createThirdwebClient } from "thirdweb";
import { ThirdwebProvider, ConnectButton } from "thirdweb/react";
 
export const client = createThirdwebClient({ clientId: <your_client_id> });
 
export default function App() {
  return (
    <ThirdwebProvider>
      <ConnectButton client={client} />
    </ThirdwebProvider>
  );
}

Once your user has logged in by clicking the ConnectButton, you can interact with their wallet.

Here's how to:

• Get the wallet address using useActiveAccount
• Read the wallet balance using useWalletBalance

import { useActiveAccount, useWalletBalance } from "thirdweb/react";
 
export default function MyComponent() {
  // 1. get wallet address
  const account = useActiveAccount();
  console.log("wallet address", account?.address);
 
  // 2. get wallet balance
  const { data: balance, isLoading } = useWalletBalance({
    client,
    chain,
    address: account?.address,
  });
  console.log(
    "wallet balance",
    balance?.displayValue,
    balance?.symbol,
  );
}

Extensions are the easiest way to prepare transactions.

• Import the Extension you want to use
• Define your contract with getContract on your target chains
• Call the useSendTransaction mutation hook
• Execute the transaction using the mutate function

import { getContract } from "thirdweb";
import { sepolia } from "thirdweb/chains";
import { useSendTransaction } from "thirdweb/react";
// 1. import the extension you want to use
import { transfer } from "thirdweb/extensions/erc20";
 
// 2. define the target contract
const USDC = getContract({
  client,
  address: USDC_ADDRESS,
  chain: sepolia,
});
 
export default function MyComponent() {
  // 3. call the useSendTransaction hook
  const { mutate: sendTransaction, isPending } = useSendTransaction();
 
  const onClick = () => {
    // 4. execute the transaction (send 15 USDC to the target address)
    const transaction = transfer({
      contract: USDC,
      amount: 15,
      to: "0x...",
    });
    sendTransaction(transaction);
  };
}

Congratulations, you've connected a wallet and sent a transaction from your application! You can now explore all the other accessible features in the full React documentation.