Зауважте: коли ви запускаєте dApp на Ethereum mainnet, перше, з чим стикаєтесь — нестабільний RPC: запити падають, ноди пропускають блоки, а синхронізація нової ноди займає дні. Підтримка власної інфраструктури вимагає серйозних вкладень та DevOps-моніторингу. Ми вирішили цю проблему для 30+ проєктів, впровадивши Alchemy API. Це не просто RPC-провайдер: Enhanced API економлять години розробки — alchemy_getAssetTransfers замінює ручний парсинг Transfer-подій. Інтеграція скорочує time-to-market dApp на 60% та виключає головний біль з інфраструктурою. Середня економія для наших клієнтів суттєва. Зв'яжіться з нами для аудиту вашої поточної інфраструктури.
Як Alchemy прискорює розробку dApp?
Утримання власної ноди потребує серверів, синхронізації з genesis, моніторингу uptime та захисту від DDoS. Alchemy бере це на себе: 99.9% uptime SLA та автоматичний failover. Ми провели порівняння: час розгортання скорочується з 1-3 днів до 1 години, а щомісячні витрати на інфраструктуру — у кілька разів.
| Параметр |
Власна нода |
Alchemy API |
| Час розгортання |
1-3 дні |
1 година |
| uptime |
~99.5% (без SLA) |
99.9% (SLA) |
| Enhanced API |
немає |
NFT, Token, Transfers |
| Вартість підтримки |
висока |
низька (плани Growth та вище) |
Які Enhanced API реально потрібні?
Alchemy надає три ключові Enhanced API, які замінюють індексацію та парсинг подій. Розберемо кожен з прикладом коду.
NFT API
Без Alchemy отримати всі NFT адреси — парсинг Transfer-подій або залежність від маркетплейс API. З Alchemy:
// Всі NFT гаманця
const nfts = await alchemy.nft.getNftsForOwner("0xAddress", {
contractAddresses: ["0xOptionalFilter"],
omitMetadata: false
})
// Власник конкретного токена
const owners = await alchemy.nft.getOwnersForNft(contractAddress, tokenId)
// Всі токени колекції з metadata
const collection = await alchemy.nft.getNftsForContract(contractAddress, {
pageSize: 100
})
Token API та історія транзакцій
// Всі ERC-20 баланси адреси
const balances = await alchemy.core.getTokenBalances("0xAddress")
// Metadata токена
const metadata = await alchemy.core.getTokenMetadata("0xTokenAddress")
// { name, symbol, decimals, logo }
// Історія всіх транзакцій адреси
const history = await alchemy.core.getAssetTransfers({
fromAddress: "0xAddress",
category: ["external", "erc20", "erc721", "erc1155"],
withMetadata: true,
maxCount: 100
})
Результат включає decoded transfers з сумами, символами токенів та адресами — готово для UI. Enhanced API скорочують час індексації в 10 разів порівняно з самописним парсингом подій.
Порівняння Enhanced API
| API |
Що дає |
Економія часу |
| NFT API |
Всі NFT адреси, власники, метадані |
3-5 днів на індексацію |
| Token API |
Баланси та metadata токенів |
2-3 дні на парсинг |
| Asset Transfers |
Історія переказів з фільтрацією |
1-2 дні на індексацію |
Налаштування Webhook для ончейн-моніторингу
Polling — поганий спосіб. Alchemy Notify надсилає POST на ваш endpoint при події. Реалізуємо створення та верифікацію:
- Створюємо webhook через SDK або Alchemy Dashboard.
- Реалізуємо endpoint, що приймає POST-запити.
- Верифікуємо підпис через
isValidWebhookSignature.
- Обробляємо подію та повертаємо 200 OK.
import { isValidWebhookSignature } from "alchemy-sdk"
// Створення webhook
const webhook = await alchemy.notify.createWebhook(
"https://your-api.com/webhooks/alchemy",
WebhookType.ADDRESS_ACTIVITY,
{ addresses: ["0xWatchedAddress"], network: Network.ETH_MAINNET }
)
// Верифікація підпису (Express.js)
app.post("/webhooks/alchemy", express.raw({type:"application/json"}), (req, res) => {
const isValid = isValidWebhookSignature({
body: req.body.toString(),
signature: req.headers["x-alchemy-signature"] as string,
signingKey: process.env.ALCHEMY_WEBHOOK_SIGNING_KEY!
})
if (!isValid) return res.status(401).send("Unauthorized")
const event = JSON.parse(req.body.toString())
handleAlchemyEvent(event)
res.sendStatus(200)
})
Детальніше про типи вебхуків
Типи: ADDRESS_ACTIVITY, NFT_ACTIVITY, MINED_TRANSACTION, DROPPED_TRANSACTION. Кожен потребує своєї обробки.
Alchemy Notify Documentation
Чому WebSocket кращий за polling для realtime-даних?
Окрім webhooks, Alchemy надає WebSocket-підписки: alchemy_subscribe, newHead, newPendingTransactions. Налаштовуємо підписки для моніторингу mempool або нових блоків. Це критично для MEV-стратегій та high-frequency trading. Приклад підписки:
const ws = new WebSocket("wss://eth-mainnet.g.alchemy.com/v2/API_KEY")
ws.on("open", () => {
ws.send(JSON.stringify({ jsonrpc: "2.0", id: 1, method: "eth_subscribe", params: ["newHeads"] }))
})
ws.on("message", (data) => {
console.log(JSON.parse(data.toString()))
})
Що входить у роботу при інтеграції Alchemy API?
Ми надаємо повний цикл інтеграції з чіткими результатами на кожному етапі:
- Аудит поточної інфраструктури та вибір оптимального плану Alchemy.
- Налаштування SDK для mainnet та testnet з підтримкою кількох чейнів.
- Інтеграція NFT API, Token API, Asset Transfers з готовими прикладами коду.
- Створення webhook-сповіщень з верифікацією та обробкою подій.
- Налаштування WebSocket підписок для realtime-даних.
- Оптимізація rate limits та впровадження батчингу запитів.
- Документація з інтеграції, навчання команди замовника.
- Моніторинг стабільності та продуктивності після запуску.
Завдяки цьому ваш dApp отримує надійний доступ до блокчейн-даних без необхідності утримувати власну інфраструктуру. Замовте інтеграцію — ми проведемо аудит та запропонуємо оптимальну конфігурацію для вашого проєкту.
Типові помилки при інтеграції
- Неправильний signing key для вебхуків — призводить до 401 помилок. Перевіряйте, що ключ підпису збігається з Alchemy Dashboard.
- Перевищення rate limit без батчингу — збільшує latency. Використовуйте
alchemy.core.sendBatch() для об'єднання запитів.
- Неправильне налаштування Network параметрів для L2 — основа для реорганізації. Переконайтеся в коректному
Network.ARB_MAINNET для Arbitrum.
- Ігнорування fallback-провайдера — в рідкісних випадках Alchemy може бути недоступний, потрібен резервний RPC, наприклад Infura.
- Відсутність обробки помилок для
429 Too Many Requests — впровадьте retry-логіку з експоненціальною затримкою.
Отримайте консультацію інженера, який вже реалізував 30+ рішень для DeFi та NFT. Ми гарантуємо стабільність та продуктивність будь-якого масштабу.
Вступ
Ми постійно стикаємося з типовою проблемою: користувач натискає «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-інтерфейсу.