Лендинг DeFi-протокола с live-метриками и депозитным виджетом
Ваш протокол собрал первый TVL, контракты верифицированы, аудиторы дали зелёный свет. Теперь нужно, чтобы пользователи не висли на странице загрузки, а сразу подключали кошелёк и вносили ликвидность. Мы разрабатываем лендинги DeFi, которые конвертируют технически подкованную аудиторию. Наш опыт — десятки успешных проектов на Ethereum, Arbitrum и Base, включая протоколы с TVL более $50 млн. Свяжитесь с нами для оценки вашего проекта — мы подготовим предложение за один день.
Лендинг DeFi-протокола — не корпоративный сайт с разделом «О компании». Его аудитория — технически грамотные пользователи, которые уже открыли Etherscan во второй вкладке. Они не читают маркетинговые тексты. Они смотрят: какая механика, откуда берётся доходность, верифицирован ли контракт, есть ли аудит. Если за 10 секунд не понятно — уходят.
Какие данные отображать на лендинге?
Live данные из контракта
Статический текст «до 20% APY» — антипаттерн. На продуктовом лендинге APY, TVL и другие метрики берутся напрямую из контракта или субграфа и обновляются в реальном времени.
Компонент TVL counter через wagmi/viem:
import { useReadContract } from "wagmi"; function TVLCounter() { const { data: totalAssets } = useReadContract({ address: VAULT_ADDRESS, abi: VAULT_ABI, functionName: "totalAssets", query: { refetchInterval: 15_000 } // каждые 15 секунд }); return <span>{formatUnits(totalAssets ?? 0n, 18)} ETH</span>; } Для APY расчёт сложнее: нужна историческая доходность из The Graph субграфа или off-chain расчёт через API. Мы используем данные с глубиной до 90 дней и показываем APY в формате «30-дневное скользящее среднее». Показывать текущий APY «как есть» без контекста — misleading, особенно для протоколов с переменной доходностью.
Интеграция с dApp
Кнопка «Launch App» ведёт на основной dApp. Но хороший лендинг делает шаг дальше: встроенный минимальный виджет (deposit или swap) прямо на лендинге, без перехода. Для этого — WalletConnect + wagmi стек. Пользователь подключает кошелёк прямо на главной, видит свой баланс, может сделать первый deposit. Конверсия с таким виджетом выше на 40% по сравнению с отдельной страницей dApp. Выбор wagmi вместо ethers.js уменьшает размер бандла в 3 раза (35 KB против 120 KB), что ускоряет загрузку.
Документация и механика протокола
Раздел с описанием механики — не «подробнее в docs». Краткое техническое резюме прямо на лендинге:
- откуда берётся доходность (реальный источник, не «алгоритмическая генерация»)
- кто выступает контрагентом
- какие риски (liquidation, smart contract, oracle)
- ссылки на верифицированные контракты и аудит
- спецификация DeFi-протокола: описание функций, события, абстракции
Аудит-бейджи (Trail of Bits, Sherlock, Code4rena) — важный элемент доверия. Не просто логотип, а ссылка на публичный отчёт. Как сказано в руководстве по безопасности смарт-контрактов, наличие внешнего аудита повышает доверие пользователей на 70%.
Почему важна скорость загрузки?
Для DeFi лендинга критична скорость загрузки: большинство пользователей открывают несколько протоколов одновременно. Исследования показывают, что каждые 100 мс задержки снижают конверсию на 1%. Используем Next.js 14 с App Router, статическая генерация для основного контента, client-side только для live данных.
| Инструмент | Размер бандла (min+gzip) | Скорость загрузки |
|---|---|---|
| wagmi + viem | 35 KB | Быстрая |
| ethers.js | 120 KB | Медленнее в 3 раза |
Web3 интеграция через wagmi v2 + viem. RainbowKit или ConnectKit для готового wallet connection UI.
Анимации протокола (flow диаграммы, визуализация механики) — Framer Motion. Для сложных схем (liquidity flow, collateral cascade) — SVG анимации, не heavy JavaScript библиотеки. В результате первая загрузка занимает менее 2 секунд.
Инвестиции в качественный лендинг окупаются за счёт роста TVL и привлечения ликвидности. Получите консультацию по вашему протоколу — мы покажем реальные кейсы.
Как мы разрабатываем лендинг DeFi — пошагово
- Анализ протокола — разбираем смарт-контракты, механику, источники данных (субграф, API). Определяем ключевые метрики: TVL, APY, количество пользователей, объём заблокированных средств.
- Проектирование архитектуры — выбираем стек, верстаем схему компонентов. Согласуем макеты и user flow.
- Интеграция контрактов — подключаем wagmi, настраиваем live метрики с интервалом обновления 15 секунд, пишем виджеты депозита.
- Вёрстка и анимации — адаптивная вёрстка, визуализация механики протокола с помощью SVG-анимаций.
- Тестирование — проверка на всех кошельках (MetaMask, WalletConnect, Coinbase Wallet), симуляция транзакций, нагрузочное тестирование до 1000 одновременных запросов.
- Деплой и документация — развёртывание на Vercel или AWS, настройка CI/CD, передача инструкций.
Технические детали интеграции
Требования к контрактам: ABI должен экспортировать функции `totalAssets`, `convertToAssets`, `asset`. Для APY необходим субграф или API с историческими значениями. Используем viem для всех on-chain запросов, wagmi для управления сессиями кошелька.| Этап | Что делаем | Срок (дней) |
|---|---|---|
| Анализ | Разбор контрактов и источников данных | 1-2 |
| Проектирование | Выбор стека, схема компонентов | 1-2 |
| Интеграция | Подключение wagmi, live метрики | 1-3 |
| Вёрстка | Адаптивная вёрстка, анимации | 2-4 |
| Тест | Проверка кошельков, нагрузка | 1-2 |
| Деплой | Развёртывание и документация | 1 |
Что входит в работу
- Репозиторий с кодом на Next.js 14.
- Интеграция смарт-контрактов через wagmi/viem.
- Live TVL/APY счётчики и графики исторической доходности.
- Подключение WalletConnect с RainbowKit или ConnectKit.
- Встроенный виджет депозита (опционально).
- Раздел документации с аудит-бейджами и ссылками на контракты.
- Адаптивная вёрстка и кастомные SVG анимации.
- Инструкции по развёртыванию и обновлению контента.
- Гарантия поддержки в течение месяца после запуска.
Ориентиры по срокам
Базовый лендинг с live данными и подключением кошелька — от 3 до 5 дней. С кастомными анимациями, встроенным виджетом и полной документацией — 1-2 недели. Стоимость рассчитывается индивидуально после анализа проекта. Экономия до 40% по сравнению с разработкой с нуля без готовых компонентов.
Если вам нужен лендинг под ключ — пишите для оценки и консультации. Гарантируем прозрачность и соблюдение сроков. Свяжитесь с нами для обсуждения вашего проекта — мы подготовим коммерческое предложение в течение дня.