thirdweb

// src/app/providers.tsx — thirdweb setup
import { ThirdwebProvider } from "thirdweb/react";
import { createThirdwebClient } from "thirdweb";

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

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

// src/components/ConnectWallet.tsx
import { ConnectButton } from "thirdweb/react";
import { createWallet, inAppWallet } from "thirdweb/wallets";

const wallets = [
  inAppWallet({                           // Email/social login (no extension)
    auth: { options: ["email", "google", "apple"] },
  }),
  createWallet("io.metamask"),
  createWallet("com.coinbase.wallet"),
  createWallet("io.rabby"),
];

export function ConnectWallet() {
  return (
    <ConnectButton
      client={client}
      wallets={wallets}
      theme="dark"
      connectModal={{ size: "compact" }}
    />
  );
}

// src/components/NFTMint.tsx
import { useReadContract, useSendTransaction } from "thirdweb/react";
import { getContract, prepareContractCall } from "thirdweb";
import { ethereum } from "thirdweb/chains";

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

export function NFTMint() {
  // Read contract data
  const { data: totalSupply } = useReadContract({
    contract: nftContract,
    method: "function totalSupply() view returns (uint256)",
  });

  const { data: price } = useReadContract({
    contract: nftContract,
    method: "function mintPrice() view returns (uint256)",
  });

  // Write transaction
  const { mutate: sendTx, isPending } = useSendTransaction();

  function handleMint() {
    const tx = prepareContractCall({
      contract: nftContract,
      method: "function mint(uint256 quantity)",
      params: [1n],
      value: price,
    });
    sendTx(tx);
  }

  return (
    <div>
      <p>Minted: {totalSupply?.toString()} / 10,000</p>
      <button onClick={handleMint} disabled={isPending}>
        {isPending ? "Minting..." : `Mint (${formatEther(price || 0n)} ETH)`}
      </button>
    </div>
  );
}

// scripts/deploy.ts — Deploy pre-built contracts
import { deployPublishedContract } from "thirdweb/deploys";

// Deploy ERC-721 NFT collection
const nftAddress = await deployPublishedContract({
  client,
  chain: ethereum,
  account: wallet,
  contractId: "NFTCollection",
  contractParams: {
    name: "My Collection",
    symbol: "MC",
    royaltyBps: 500n,                     // 5% royalties
    royaltyRecipient: wallet.address,
  },
});

// Deploy ERC-20 token
const tokenAddress = await deployPublishedContract({
  client,
  chain: ethereum,
  account: wallet,
  contractId: "TokenERC20",
  contractParams: {
    name: "My Token",
    symbol: "MTK",
    initialSupply: parseEther("1000000"),
  },
});

// Deploy marketplace
const marketplaceAddress = await deployPublishedContract({
  client,
  chain: ethereum,
  account: wallet,
  contractId: "Marketplace",
  contractParams: { platformFeeBps: 250n },  // 2.5% fee
});

// thirdweb Engine — managed backend for web3
// Self-hosted or cloud: handles wallets, transactions, webhooks

// Mint NFT via REST API (no frontend wallet needed)
const response = await fetch(`${ENGINE_URL}/contract/${chain}/${address}/erc721/mint-to`, {
  method: "POST",
  headers: {
    Authorization: `Bearer ${ENGINE_ACCESS_TOKEN}`,
    "Content-Type": "application/json",
    "x-backend-wallet-address": BACKEND_WALLET,
  },
  body: JSON.stringify({
    receiver: userAddress,
    metadata: { name: "NFT #1", image: "ipfs://...", attributes: [] },
  }),
});

npx thirdweb create app                   # Scaffold new app
npm install thirdweb                      # Add to existing project
npx thirdweb deploy                       # Deploy custom contracts
npx thirdweb publish                      # Publish to thirdweb registry