Розробка лендингу NFT-мінта
Лендинг мінта — це точка максимального напруження в житті NFT-проекту. 10 хвилин між відкриттям мінта та soldout: тисячи одночасних транзакцій, MetaMask у половини користувачів не відповідає, галерея не загрузилась, таймер показує нулі — а кнопки немає. Такі лендинги спалюють довіру та гроші одночасно.
Технічно хороший лендинг мінта — це не красивий дизайн. Це правильна обробка станів гаманця, коректна gas оцінка, обробка черги транзакцій та graceful degradation при RPC перевантаженні.
Критичні технічні компоненти
Таймер та синхронізація з блокчейном
Таймер повинен відраховувати час до конкретного блоку або unix timestamp з контракту, а не hardcoded дати. Інакше: маркетинг оголошує мінт «в 18:00», розробник деплоює контракт з startTime на 5 хвилин пізніше через затримку деплою — кнопка мінта неактивна ще 5 хвилин після «старту».
Коректна реалізація: читаємо mintStartTime() з контракту через wagmi useReadContract, обчислюємо різницю з Date.now(). Таймер на клієнті, контракт — джерело правди.
Обробка станів мінта
Скінченний автомат станів кнопки: disconnected → wrong-network → not-started → allowlist-only (якщо в WL) → ready → pending → success → sold-out. Кожен стан — окремий UI. Кнопка «Mint» без обробки pending стану приводить до подвійних транзакцій: користувач думає що натиснув даремно, жме ще раз, обидві проходять.
Allowlist перевірка: якщо контракт має публічний та WL-етап, клієнт повинен перевірити Merkle proof до показу кнопки. Локально — генерувати proof для підключеного адреса з tree, викликати isWhitelisted(address, proof) або MerkleProof.verify() view-функцію контракту. Off-chain, газа не стоїть.
Gas оцінка та динамічний maxFeePerGas
Фіксований gasLimit у транзакції — помилка. Якщо контракт додав логіку між тестом та деплоєм — газ змінився. Використовуємо estimateGas через viem перед відправленням + буфер 20%.
Для EIP-1559 транзакцій: maxFeePerGas повинен враховувати поточний baseFee. При високому навантаженню в момент мінта baseFee може вирасти в 5x. Кнопка «Mint» з maxFeePerGas з моменту загрузки сторінки, але відправлена через 30 секунд, може ревертитись з max fee per gas less than block base fee. Рішення: пересчитувати maxFeePerGas безпосередньо перед відправленням транзакції.
RPC fallback при перевантаженні
В момент хайпового мінта публічні Alchemy/Infura endpoint розглядаються. Транзакції не відправляються, eth_call не відповідає. Критично важливо мати кілька RPC endpoint з fallback через wagmi fallbackTransport:
const transport = fallback([
http(process.env.ALCHEMY_RPC),
http(process.env.INFURA_RPC),
http('https://eth.llamarpc.com'),
])
При failure одного — автоматично переключується на наступний.
Галерея колекції
Lazy loading з intersection observer: завантажуємо тільки видимі зображення. Для 10k колекції — віртуалізація списку через @tanstack/react-virtual. IPFS зображення через Pinata dedicated gateway (в 10x швидше публічних gateway). Fallback при недоступності IPFS — заглушка-плейсхолдер, не розбитий img tag.
Stack
Next.js 14 (App Router) + wagmi v2 + viem + RainbowKit для wallet connect UI. Tailwind CSS для стилів. Анімації через Framer Motion — reveal колекції, countdown таймер, success confetti після мінта.
Процес та орієнтири за часом
Дизайн (1 день). Figma макет з компонентами, мобільна версія.
Розробка (2–3 дні). Галерея, таймер, mint-компонент зі всіма станами, wallet інтеграція.
Інтеграція контракту (0.5 дня). Підключення ABI, тестування на testnet.
QA (0.5 дня). Тест на різних гаманцях (MetaMask, Coinbase, Rainbow), мобільні браузери, всі стани мінта.
Всього: 3–5 днів. Вартість розраховується індивідуально.