Інтеграція Thirdweb SDK для Web3-функціональності сайту

Інтеграція Thirdweb SDK для Web3-функціональності веб-сайту

Thirdweb — платформа з готовими смарт-контрактами (NFT, Token, Marketplace, Staking), хостингом та SDK. Замість написання контрактів з нуля — розгортання шаблонів через dashboard, взаємодія через типізований SDK. Для проектів, де швидкість розробки важливіша за повний контроль над контрактом.

Коли використовувати Thirdweb

Thirdweb виправданий якщо: потрібен стандартний NFT Drop або Marketplace без кастомної логіки контракту; немає власного Solidity-розробника; потрібна готова інфраструктура (IPFS-хостинг метаданих, API індексування).

Не підходить для кастомних протоколів з нестандартною логікою — SDK не вміє працювати з довільними контрактами так само гладко, як wagmi + viem.

Установка та інітіалізація

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!,
});

Підключення гаманця

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: 'Увійти до додатку',
        titleIcon: '/logo.svg',
      }}
    />
  );
}

Або hook'и без 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 контракт

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',
});

// Читання стану
const [conditions, claimed, maxSupply] = await Promise.all([
  getClaimConditions({ contract: nftContract }),
  getTotalClaimedSupply({ contract: nftContract }),
  getMaxClaimableSupply({ contract: nftContract }),
]);

// Мінтинг через 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 ? 'Мінтинг...' : 'Мінт'}
    </button>
  );
}

Токен контракт (ERC-20)

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

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

// Hook'и читання
const { data: balance } = useReadContract(balanceOf, {
  contract: tokenContract,
  address: account.address,
});

// Транзакція
const transferTx = transfer({
  contract: tokenContract,
  to: recipientAddress,
  amount: '100', // Thirdweb автоматично враховує decimals
});
sendTx(transferTx);

IPFS-загрузка метаданих

import { upload } from 'thirdweb/storage';

// Загрузити JSON метаданих NFT
const metadataUri = await upload({
  client,
  files: [
    {
      name: 'My NFT',
      description: 'Опис',
      image: imageFile,  // File або URL
      attributes: [
        { trait_type: 'Background', value: 'Blue' },
        { trait_type: 'Eyes', value: 'Laser' },
      ],
    },
  ],
});
// Повертає: ipfs://Qm.../0

// Загрузити файл
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 });

// Всі активні листинги
const listings = await getAllListings({ contract: marketplace, start: 0, count: 20n });

// Покупка
const buyTx = buyFromListing({
  contract: marketplace,
  listingId: 0n,
  quantity: 1n,
  recipient: account.address,
});
sendTx(buyTx);

Обмеження Thirdweb SDK

SDK абстрагує деталі, але іноді занадто агресивно. При роботі з контрактами поза екосистемою Thirdweb потрібно використовувати prepareContractCall з ручним ABI — втрачається частина переваг. Для нестандартних контрактів краще переходити на wagmi + viem напрямки.

Часові рамки: інтеграція підключення гаманця + взаємодія з одним Thirdweb-контрактом (NFT Drop або Token) — 1–2 дні. Marketplace + кастомний mint-інтерфейс з IPFS-загрузкою — 3–4 дні.