Интеграция 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',
      }}
    />
  );
}

Или хуки без 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 }),
]);

// Минтинг через хук
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>
  );
}

Token контракт (ERC-20)

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

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

// Хуки чтения
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 + кастомный минт-интерфейс с IPFS-загрузкой — 3–4 дня.