Playground

Blockchain API

Performant, reliable and type safe API to read write to any contract on any EVM chain through our RPC Edge endpoints.

Query blockchain data

Read data from any contract or wallet. Type safe functions and hooks without needing full ABIs.

import { getContract } from "thirdweb";
import { ethereum } from "thirdweb/chains";
import {
  MediaRenderer,
  useReadContract,
} from "thirdweb/react";

const onChainCryptoPunks = getContract({
  address: "0x16F5A35647D6F03D5D3da7b35409D65ba03aF3B2",
  chain: ethereum,
  client: THIRDWEB_CLIENT,
});

function App() {
  // Read the image of the tokenId #1
  const { data } = useReadContract({
    contract: onChainCryptoPunks,
    method:
      "function punkImageSvg(uint16 index) view returns (string svg)",
    params: [1],
  });

  return (
    <MediaRenderer client={THIRDWEB_CLIENT} src={data} />
  );
}

Prebuilt read extensions

Extensions let you do more with less code. High level functions with simple API that do pre and post processing for all common standards.

import { getContract } from "thirdweb";
import { ethereum } from "thirdweb/chains";
import {
  MediaRenderer,
  useReadContract,
} from "thirdweb/react";

const nftContract = getContract({
  address: "0xbc4ca0eda7647a8ab7c2061c2e118a18a936f13d",
  chain: ethereum,
  client: THIRDWEB_CLIENT,
});

function App() {
  const { data } = useReadContract(getNFT, {
    contract: nftContract,
    tokenId: 458n,
  });

  return (
    <MediaRenderer
      client={THIRDWEB_CLIENT}
      src={data?.metadata.image}
    />
  );
}

Prebuilt write extensions

Extensions let you do more with less code. High level functions with simple API that do pre and post processing for all common standards.

import { getContract } from "thirdweb";
import { sepolia } from "thirdweb/chains";
import { claimTo } from "thirdweb/extensions/erc20";

const tw_coin = getContract({
  address: "0xACf072b740a23D48ECd302C9052fbeb3813b60a6",
  chain: sepolia,
  client: THIRDWEB_CLIENT,
});

function App() {
  return (
    <TransactionButton
      transaction={() =>
        claimTo({
          contract: twCoinContract,
          to: account.address,
          quantity: "10",
        })
      }
    >
      Claim
    </TransactionButton>
  );
}
Claim free testnet tokens

Write data to blockchain

Send transactions with the connected wallet. Type safe functions and hooks to send contracts call or raw transaction.

import {
  getContract,
  prepareContractCall,
  toUnits,
} from "thirdweb";
import { sepolia } from "thirdweb/chains";

const tw_coin = getContract({
  address: "0xACf072b740a23D48ECd302C9052fbeb3813b60a6",
  chain: sepolia,
  client: THIRDWEB_CLIENT,
});

// Claim some test tokens from the above example!

function App() {
  return (
    <TransactionButton
      transaction={() =>
        prepareContractCall({
          contract: tw_coin,
          method:
            "function transfer(address to, uint256 value) returns (bool)",
          params: ["0x...", toUnits("5", 18)],
        })
      }
    >
      Send
    </TransactionButton>
  );
}
Send ERC20 tokens

Listen to blockchain events

Subscribe to any contract event. Auto polling hooks and functions with type safe event extensions for all common standards.

import { useContractEvents } from "thirdweb/react";
import { getContract } from "thirdweb";
import { base } from "thirdweb/chains";
import { transferEvent } from "thirdweb/extensions/erc20";

const usdcContractOnBase = getContract({
  address: "0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913",
  chain: base,
  client,
});

function App() {
  // Listen to USDC transfers on Base
  const contractEvents = useContractEvents({
    contract: usdcContractOnBase,
    events: [transferEvent()],
    blockRange: 100,
  });

  (contractEvents.data || []).forEach((item) => {
    const { from, to, value } = item.args;
    console.log("{from}...{value} USDC...{to}");
  });
}