Thirdweb SDK Integration for Website Web3 Functionality

Integrating Thirdweb SDK for Web3 Functionality on a Website

Thirdweb is a platform with ready-made smart contracts (NFT, Token, Marketplace, Staking), hosting, and SDK. Instead of writing contracts from scratch — deploy templates via dashboard, interact via typed SDK. For projects where development speed is more important than full control over the contract.

When to Use Thirdweb

Thirdweb is justified if: you need a standard NFT Drop or Marketplace without custom contract logic; you don't have your own Solidity developer; you need ready infrastructure (IPFS metadata hosting, indexing API).

Not suitable for custom protocols with non-standard logic — the SDK doesn't work with arbitrary contracts as smoothly as wagmi + viem.

Installation and Initialization

npm install thirdweb

// app/providers.tsx
'use client';
import { ThirdwebProvider } from 'thirdweb/react';

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <ThirdwebProvider>
      {children}
    </ThirdwebProvider>
  );
}

// lib/thirdweb.ts
import { createThirdwebClient } from 'thirdweb';

export const client = createThirdwebClient({
  clientId: process.env.NEXT_PUBLIC_THIRDWEB_CLIENT_ID!,
});

Wallet Connection

import { ConnectButton } from 'thirdweb/react';
import { client } from '@/lib/thirdweb';
import { ethereum, polygon } from 'thirdweb/chains';

export function WalletConnect() {
  return (
    <ConnectButton
      client={client}
      chains={[ethereum, polygon]}
      theme="dark"
      connectModal={{
        title: 'Sign In to App',
        titleIcon: '/logo.svg',
      }}
    />
  );
}

Or hooks without UI:

import { useConnect, useActiveAccount, useDisconnect } from 'thirdweb/react';
import { createWallet, injectedProvider } from 'thirdweb/wallets';

const { connect } = useConnect();
const account = useActiveAccount();
const { disconnect } = useDisconnect();

const connectMetaMask = () => connect(async () => {
  const wallet = createWallet('io.metamask');
  await wallet.connect({ client });
  return wallet;
});

NFT Drop Contract

import { getContract } from 'thirdweb';
import { ethereum } from 'thirdweb/chains';
import { claimTo, getClaimConditions, getTotalClaimedSupply, getMaxClaimableSupply } from 'thirdweb/extensions/erc721';

const nftContract = getContract({
  client,
  chain: ethereum,
  address: '0xYourNFTDropContract',
});

// Read state
const [conditions, claimed, maxSupply] = await Promise.all([
  getClaimConditions({ contract: nftContract }),
  getTotalClaimedSupply({ contract: nftContract }),
  getMaxClaimableSupply({ contract: nftContract }),
]);

// Minting via hook
import { useReadContract, useSendTransaction } from 'thirdweb/react';
import { prepareContractCall } from 'thirdweb';

function MintButton({ quantity }: { quantity: number }) {
  const account = useActiveAccount();
  const { mutate: sendTx, isPending } = useSendTransaction();

  const mint = () => {
    if (!account) return;
    const tx = claimTo({
      contract: nftContract,
      to: account.address,
      quantity: BigInt(quantity),
    });
    sendTx(tx);
  };

  return (
    <button onClick={mint} disabled={isPending}>
      {isPending ? 'Minting...' : 'Mint'}
    </button>
  );
}

Token Contract (ERC-20)

import { getContract } from 'thirdweb';
import { balanceOf, transfer, totalSupply } from 'thirdweb/extensions/erc20';

const tokenContract = getContract({ client, chain: ethereum, address: TOKEN_ADDRESS });

// Read hooks
const { data: balance } = useReadContract(balanceOf, {
  contract: tokenContract,
  address: account.address,
});

// Transaction
const transferTx = transfer({
  contract: tokenContract,
  to: recipientAddress,
  amount: '100', // Thirdweb handles decimals automatically
});
sendTx(transferTx);

IPFS Metadata Upload

import { upload } from 'thirdweb/storage';

// Upload NFT metadata JSON
const metadataUri = await upload({
  client,
  files: [
    {
      name: 'My NFT',
      description: 'Description',
      image: imageFile,  // File or URL
      attributes: [
        { trait_type: 'Background', value: 'Blue' },
        { trait_type: 'Eyes', value: 'Laser' },
      ],
    },
  ],
});
// Returns: ipfs://Qm.../0

// Upload file
const imageUri = await upload({ client, files: [imageFile] });

Marketplace

import { getAllListings, buyFromListing, createListing } from 'thirdweb/extensions/marketplace';

const marketplace = getContract({ client, chain: ethereum, address: MARKETPLACE_ADDRESS });

// All active listings
const listings = await getAllListings({ contract: marketplace, start: 0, count: 20n });

// Purchase
const buyTx = buyFromListing({
  contract: marketplace,
  listingId: 0n,
  quantity: 1n,
  recipient: account.address,
});
sendTx(buyTx);

Thirdweb SDK Limitations

The SDK abstracts details, but sometimes too aggressively. When working with contracts outside the Thirdweb ecosystem, you need to use prepareContractCall with manual ABI — losing some benefits. For non-standard contracts, it's better to switch directly to wagmi + viem.

Timeframe: wallet connection integration + interaction with one Thirdweb contract (NFT Drop or Token) — 1–2 days. Marketplace + custom mint interface with IPFS upload — 3–4 days.