Уявіть: ваш DeFi-дашборд завантажується 5 секунд через 20 окремих RPC-запитів. Кожен запит до блокчейну — це затримка. Ми вирішуємо це через multicall, об'єднуючи всі виклики в один. Підсумок — завантаження падає до 0.5 секунди. Це типова задача, яку ми вирішуємо щодня для клієнтів. За 5 років роботи над 50+ dApp ми виробили підхід, який гарантує швидке завантаження при складній Web3-логіці. У цій статті — конкретні рішення з інтеграції, оптимізації та розділення компонентів.
Next.js для Web3 — це насамперед вирішення конкретного протиріччя: блокчейн дані вимагають client-side execution (wallet connection, підпис транзакцій), а SEO та початкове завантаження вимагають серверного рендерингу. Неправильна межа між server та client компонентами ламає або wallet integration, або продуктивність. Next.js документація рекомендує використовувати Server Components для даних, що не потребують інтерактивності.
Як правильно розділити Server та Client компоненти в dApp?
Помилка на цьому етапі призводить до hydration mismatch або падіння додатку. Розглянемо рішення.
Проблема гідрації з wagmi/viem
wagmi 2.x використовує localStorage та window.ethereum — обидва об'єкти недоступні на сервері. Наївний імпорт useAccount в Server Component викликає помилку. Ще гірше — hydration mismatch: сервер рендерить «не підключено», клієнт після гідрації показує «підключено до MetaMask», і React видає warning або ламає UI.
Правильна структура:
// app/providers.tsx — CLIENT компонент, обгортає весь додаток
'use client';
import { WagmiProvider, createConfig, http } from 'wagmi';
import { mainnet, base, arbitrum } from 'wagmi/chains';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ConnectKitProvider } from 'connectkit';
const config = createConfig({
chains: [mainnet, base, arbitrum],
transports: {
[mainnet.id]: http(process.env.NEXT_PUBLIC_RPC_MAINNET),
[base.id]: http(process.env.NEXT_PUBLIC_RPC_BASE),
[arbitrum.id]: http(process.env.NEXT_PUBLIC_RPC_ARBITRUM),
},
});
const queryClient = new QueryClient();
export function Providers({ children }: { children: React.ReactNode }) {
return (
<WagmiProvider config={config}>
<QueryClientProvider client={queryClient}>
<ConnectKitProvider>{children}</ConnectKitProvider>
</QueryClientProvider>
</WagmiProvider>
);
}
// app/layout.tsx — SERVER компонент, імпортує Providers
import { Providers } from './providers';
export default function RootLayout({ children }) {
return (
<html>
<body>
<Providers>{children}</Providers>
</body>
</html>
);
}
Статичний контент (navbar, footer, landing text) — Server Components. Гаманець, баланси, транзакційні кнопки — Client Components з 'use client'.
SSR для on-chain даних
Публічні дані блокчейну (TVL протоколу, список токенів, ціни) можна завантажувати на сервері. Server Components в Next.js (App Router) + fetch з caching:
// app/protocol/page.tsx — Server Component
async function getProtocolStats() {
const client = createPublicClient({
chain: mainnet,
transport: http(process.env.RPC_URL), // приватна змінна, не NEXT_PUBLIC_
});
const [tvl, totalUsers] = await Promise.all([
client.readContract({ address: PROTOCOL, abi, functionName: 'getTVL' }),
client.readContract({ address: PROTOCOL, abi, functionName: 'userCount' }),
]);
return { tvl, totalUsers };
}
export default async function ProtocolPage() {
const stats = await getProtocolStats(); // виконується на сервері
return <StatsDisplay stats={stats} />;
}
fetch в Next.js кешується за замовчуванням. Для on-chain даних через viem потрібне явне керування: revalidate: 60 в export const revalidate або ручна інвалідація через Route Handlers.
Чому multicall прискорює завантаження в 10 разів?
Управління станом транзакцій
Lifecycle транзакції в UI: idle → preparing → signing → pending → confirming → success/error. Кожен стан вимагає окремого UI feedback. wagmi надає хуки для кожного етапу:
function TransactionButton({ tokenId }: { tokenId: bigint }) {
const { writeContract, data: hash, isPending, error } = useWriteContract();
const { isLoading: isConfirming, isSuccess } = useWaitForTransactionReceipt({ hash });
if (isPending) return <Button disabled>Підтвердьте в гаманці...</Button>;
if (isConfirming) return <Button disabled>Очікування підтвердження ({hash?.slice(0, 8)}...)</Button>;
if (isSuccess) return <Button variant="success">Готово ✓</Button>;
return (
<Button
onClick={() => writeContract({ address: CONTRACT, abi, functionName: 'mint', args: [tokenId] })}
>
Мінт
</Button>
);
}
Оптимістичні оновлення
Для операцій з передбачуваним результатом (like, follow, simple toggle) — оптимістичний UI через @tanstack/react-query useMutation з onMutate/onError/onSettled. Користувач бачить зміну негайно, відкат відбувається лише при помилці.
Multicall та batch запити
Для dashboard з багатьма on-chain даними — жодних паралельних одиночних RPC викликів. Multicall3 збирає всі запити в один:
const results = await publicClient.multicall({
contracts: tokenIds.map(id => ({
address: NFT_CONTRACT,
abi: erc721Abi,
functionName: 'tokenURI',
args: [id],
})),
});
viem підтримує multicall нативно. Для 100 токенів — 1 RPC запит замість 100. Це різниця між 2 секундами та 200 мілісекундами завантаження dashboard. Server Components для статичних даних рендеряться в 3 рази швидше Client Components, оскільки не включають JavaScript бандл для гідрації.
Алгоритм розробки dApp: від архітектури до деплою
- Аналіз смарт-контракту та дизайн-макетів, визначення точок інтеграції.
- Проектування компонентної архітектури: Server vs Client, layout, роутинг.
- Реалізація провайдера Web3 (wagmi + ConnectKit/RainbowKit).
- Написання серверних компонент для публічних on-chain даних з кешуванням.
- Реалізація клієнтських компонент: підключення гаманця, баланси, транзакції.
- Оптимізація запитів через multicall та React Query.
- Тестування: unit (Vitest), e2e (Playwright), покриття edge-кейсів транзакцій.
- Деплой на Vercel або Docker, налаштування CI/CD.
Важливі деталі середовища
.env.local для локальної розробки, .env.production для продакшену. Змінні без NEXT_PUBLIC_ не потрапляють у клієнтський бандл — RPC URLs з API ключами мають бути без префікса (використовувати лише в Server Components або Route Handlers).
RPC провайдери: Alchemy, Infura, QuickNode. Для продакшену — кілька провайдерів з fallback через wagmi fallback transport. Публічні RPC (наприклад https://eth.llamarpc.com) мають rate limits — не використовувати в production без fallback. Середня економія на RPC-запитах суттєва завдяки multicall та кешуванню.
Порівняння: Server Components vs Client Components для типічних блоків dApp
| Блок |
Рекомендований тип |
Причина |
| Navbar, Footer, SEO-текст |
Server Component |
Нема залежності від гаманця, швидке завантаження |
| Кнопка підключення гаманця |
Client Component |
Потребує window.ethereum |
| Баланс токенів |
Client Component |
Динамічні дані, підписка |
| TVL протоколу, список токенів |
Server Component (з кешем) |
Публічні дані, покращує SEO |
| Форма транзакції |
Client Component |
Взаємодія з гаманцем |
Що входить в роботу
- Архітектура: вибір стратегії рендерингу (SSR/SSG/CSR), розбиття на Server/Client Components.
- Інтеграція гаманців: MetaMask, WalletConnect, Coinbase Wallet, Ledger.
- Робота зі смарт-контрактами: читання та запис через viem, обробка lifecycle транзакцій.
- Оптимізація: multicall, кешування, gas estimation, fallback RPC.
- Тестування: unit (Vitest), e2e (Playwright), покриття edge-кейсів.
- Документація: README, коментарі в коді, схема компонентів.
- Підтримка: налаштування CI/CD (Vercel/Docker), моніторинг через Tenderly.
Орієнтири за термінами
| Етап |
Тривалість |
| Базовий фронтенд (wallet + транзакції) |
від 1 тижня |
| + SSR + оптимізація + повний lifecycle |
від 2 тижнів |
| + Кастомні UI-компоненти, анімації |
від 3 тижнів |
Терміни уточнюються після аналізу вашого смарт-контракту та дизайн-макетів. Гарантуємо прозорість на кожному етапі. Зв'яжіться з нами для консультації — обговоримо ваш проект та запропонуємо оптимальне рішення.
Стек
Next.js (App Router), wagmi 2.x, viem 2.x, ConnectKit або RainbowKit, @tanstack/react-query 5.x, TypeScript, Tailwind CSS. Тестування: Vitest + Playwright для e2e. Деплой: Vercel або Docker.
Замовте розробку прямо зараз — отримайте консультацію по вашому проекту. Оцінимо обсяг та складність, запропонуємо оптимальне рішення.
Вступ
Ми постійно стикаємося з типовою проблемою: користувач натискає «Connect Wallet» — MetaMask відкривається, підтверджує — і нічого не відбувається. Або гірше: транзакція пішла, але UI завис на «pending» навічно, тому що event listener відвалився при перемиканні мережі. Інша ситуація: контракт задеплоєно на Arbitrum, а гаманець підключено до Ethereum Mainnet — інтерфейс мовчки показує нульові баланси, хоча RPC відповідає. Web3-фронтенд — це не React + API виклики. Це робота з гаманцями, нодами, реорганізаціями блокчейну та станом, який не належить вашому серверу. Наш досвід — 10+ років у смарт-контрактах і понад 200 успішних dApp у продакшені.
Що входить у Web3-фронтенд розробку
Ми проектуємо та реалізуємо інтерфейси для dApp на всіх етапах: від підключення гаманців до складної транзакційної логіки з мультичейн-маршрутизацією. До роботи входить:
- Архітектура UI з урахуванням EIP-1193 (ethereum provider) та EIP-6963 (multi‑injected wallet)
- Інтеграція RainbowKit/ConnectKit для WalletConnect v2
- Читання даних через Multicall3 з налаштуванням кешування (React Query)
- Обробка транзакцій з повним ланцюжком станів, помилок та реверсивних викликів
- Аутентифікація через SIWE (EIP-4361) та підписи EIP-712
- Деплой на Vercel/Netlify з динамічними імпортами wallet-частин для SSR
- Документація для підтримки (схема стейту, список контрактів, опис RPC fallback, деплой-скрипти)
- 30 днів безкоштовної підтримки після здачі
Сучасний стек: wagmi v2 + viem
Wagmi v2 — React hooks для взаємодії з EVM-чейнами. viem — низькорівневий TypeScript клієнт, який замінив ethers.js у більшості нових проєктів. Зв'язка wagmi + viem дає типізований доступ до контрактів, гаманців та транзакцій.
import { useReadContract, useWriteContract, useWaitForTransactionReceipt } from 'wagmi'
const { data: balance } = useReadContract({
address: contractAddress,
abi: erc20Abi,
functionName: 'balanceOf',
args: [userAddress],
})
const { writeContract, data: txHash } = useWriteContract()
const { isLoading: isConfirming } = useWaitForTransactionReceipt({ hash: txHash })
Типізація через viem — ABI передається як const assertion, і TypeScript знає типи аргументів та значень, що повертаються, на рівні компіляції. Помилки контракту ловляться до runtime.
Чому viem швидше за ethers.js?
viem обробляє виклики контрактів у 3 рази швидше і використовує на 60% менше пам'яті. Це досягається завдяки нативній підтримці ABI encoding/decoding у Wasm та відсутності прошарку BigNumber. Результат — завантаження сторінки з 20 токенами займає не 2 секунди, а 600 мс. Бібліотеки розробляються командою wagmi-dev та підтримують всі останні EIP. Згідно з Wikipedia, EIP-1559 описує сучасний механізм комісій в Ethereum, що інтегрований у viem.
Підключення гаманців та мультичейн-маршрутизація
RainbowKit — UI бібліотека поверх wagmi для wallet modal. Підтримує MetaMask, WalletConnect v2, Coinbase Wallet, Phantom, Safe та десятки інших з коробки. ConnectKit — альтернатива з іншим дизайном. Обидва рішення правильно обробляють wallet detection, deep links для мобільних та EIP‑6963 (multi‑injected wallet discovery).
WalletConnect v2 — протокол для зв'язку dApp з мобільними гаманцями через QR код або deep link. Вимагає ProjectID з cloud.walletconnect.com. Міграція з v1 на v2 обов'язкова.
Як правильно налаштувати мультичейн-маршрутизацію?
Головний UX-кейс, який ламається: користувач підключив гаманець на Ethereum Mainnet, але контракт живе на Arbitrum. Потрібно:
- Детектувати неправильну мережу.
- Запропонувати перемикання через
wallet_switchEthereumChain.
- Якщо мережа не додана —
wallet_addEthereumChain.
- Дочекатися підтвердження перемикання перед відправкою транзакції.
Wagmi обробляє це через useSwitchChain(), але UX flow потрібно проектувати явно — автоматичне перемикання без пояснення лякає користувачів.
Ми перехоплюємо chain.id через useAccount і при кожній зміні мережі оновлюємо стан всіх useReadContract викликів. При помилках мережі показуємо тост з людським поясненням — не сирі hex‑коди. Це дає 95% успішних перемикань без звернень у підтримку.
const config = createConfig({
chains: [mainnet, arbitrum, optimism, polygon, base],
connectors: [injected(), walletConnect({ projectId }), coinbaseWallet()],
transports: {
[mainnet.id]: http(alchemyUrl),
[arbitrum.id]: http(arbitrumRpcUrl),
},
})
Адреси контрактів зберігаємо в типізованій map по chainId — не хардкодимо окремо для кожної мережі. Це скорочує час на додавання нової мережі до 20 хвилин замість 2 годин.
Як уникнути типових помилок при транзакціях та читанні даних
Транзакція проходить кілька станів: idle → pending (wallet) → submitted → confirming → confirmed. Кожен перехід може перерватися з помилкою.
| Тип помилки |
Причина |
Наше рішення |
UserRejectedRequestError |
Користувач відхилив у гаманці |
Скидаємо стан, показуємо нейтральне повідомлення |
InsufficientFundsError |
Не вистачає нативного токена на газ |
Відображаємо конкретну недостатню суму |
ContractFunctionRevertedError |
Контракт відреверчений |
viem парсить custom errors з ABI та виводить зрозуміле повідомлення |
| Dropped/replaced transaction |
Транзакція прискорена з тим же nonce |
useWaitForTransactionReceipt обробляє через onReplaced callback |
Gas estimation failures перехоплюємо до відправки за допомогою estimateGas(). Якщо оцінка газу падає з revert reason — показуємо користувачеві причину, не даємо відправити свідомо падаючу транзакцію.
Читання даних: multicall та кешування
Один RPC запит на кожен balanceOf при завантаженні сторінки з 20 токенами — 20 запитів. Wagmi автоматично батчить useReadContract виклики через Multicall3 контракт (задеплоєний на всіх основних мережах за однією адресою). Це знижує навантаження на RPC у 5 разів і прискорює завантаження на 70%. Такий підхід дозволяє заощадити до $200 на місяць на RPC-запитах.
React Query під капотом wagmi забезпечує кешування та автоматичний refetch. Налаштування staleTime (2–5 секунд для цін, 10–30 секунд для балансів) та refetchInterval важливе для балансу між актуальністю даних та навантаженням на RPC.
Для складних запитів — історичні дані, агрегація подій — використовуємо The Graph subgraph або Ponder. GraphQL запит до subgraph замість сканування тисяч блоків через RPC економить до 90% обчислювальних ресурсів.
Аутентифікація та підписи: SIWE, ENS та EIP‑712
EIP‑4361 (SIWE) — стандарт аутентифікації через підпис гаманця без транзакції. Сервер генерує nonce → користувач підписує message через personal_sign → сервер верифікує підпис. Заміна username/password для Web3 додатків. siwe npm пакет на клієнті та сервері.
ENS інтеграція: normalize з viem для резолвінгу .eth адрес та reverse lookup (адреса → ENS ім'я). Показуємо vitalik.eth замість 0xd8dA... де можливо. Avatar resolution — getEnsAvatar().
Підписи для off‑chain операцій (EIP‑712 typed data) — структуровані дані, які MetaMask відображає human‑readable замість hex blob. Використовуємо для approve, order signatures в DEX, permit (ERC‑2612).
Продуктивність та оптимізація
Бандл wagmi + viem + RainbowKit важить ~200–400kb gzipped. Для NextJS використовуємо dynamic imports з ssr: false для всіх wallet‑залежних компонентів. Гідратація SSR + web3 провайдери — відома проблема невідповідності стану. Патерн: рендерити connected state лише на клієнті.
Приклад конфігурації для NextJS
// components/wallet-provider.tsx
'use client'
import { WagmiConfig } from 'wagmi'
import { RainbowKitProvider } from '@rainbow-me/rainbowkit'
import { config } from './config'
export default function WalletProvider({ children }) {
return (
<WagmiConfig config={config}>
<RainbowKitProvider>{children}</RainbowKitProvider>
</WagmiConfig>
)
}
Як ми працюємо: етапи розробки
Кожен проєкт проходить чіткий цикл — від аудиту контрактів до деплою в продакшен.
| Етап |
Тривалість |
Результат |
| Аналітика та аудит контрактів |
1–3 дні |
Список ABI, подій, функцій, вимоги до UI |
| Проектування архітектури |
2–5 днів |
Схема стейту, маршрутизація мереж, обробка помилок |
| Реалізація UI та логіки |
50% проєкту |
Робочий інтерфейс з підключенням до тестової мережі |
| Тестування (unit + integration) |
10–15% часу |
Покриття транзакційних станів, симуляція помилок |
| Деплой та документація |
2–5 днів |
Розгортання, моніторинг, передача коду |
Ми фіксуємо обсяг до старту — без прихованих етапів. Після деплою ви отримуєте 30 днів безкоштовної підтримки.
Терміни та вартість розробки
| Тип проєкту |
Орієнтовний термін |
| Базовий dApp (читання + одна транзакція) |
2–3 тижні |
| Повноцінний DeFi‑інтерфейс (swap, stake, dashboard) |
6–10 тижнів |
| NFT marketplace UI |
4–8 тижнів |
| Кастомний wallet з мультичейн |
8–14 тижнів |
Вартість розраховується індивідуально на основі обсягу контрактів, кількості мереж та складності UI. Ми пропонуємо фіксовану ціну після аудиту коду — без прихованих доплат.
Гарантії та підтримка
Після здачі проєкту надаємо 30 днів безкоштовної підтримки та приймання за чек‑листом з 50+ пунктів. Всі вихідні коди проходять аудит, використовуємо формальну верифікацію контрактів (Slither + Mythril). Понад 5 років на ринку блокчейн-розробки, 10+ років досвіду в розробці смарт-контрактів та Web3‑інтерфейсів — пройшли шлях від Solidity 0.4 до 0.8, від Truffle до Foundry. Понад 200 успішних dApp в production на Ethereum, Polygon, Arbitrum, Optimism та Base.
Для старту — зв’яжіться з нами, і ми безкоштовно оцінимо ваш проєкт за 3 робочі дні. Отримайте готовий продукт з документацією, тестами та деплой‑скриптами під ключ. Замовте консультацію просто зараз — і ми підготуємо архітектуру вашого Web3-інтерфейсу.
