Разработка лендинга DeFi-протокола
Лендинг DeFi-протокола — не корпоративный сайт с разделом «О компании». Его аудитория — технически грамотные пользователи, которые уже открыли Etherscan во второй вкладке. Они не читают маркетинговые тексты. Они смотрят: какая механика, откуда берётся доходность, верифицирован ли контракт, есть ли аудит. Если за 10 секунд не понятно — уходят.
Что должно быть на лендинге DeFi-протокола
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. Показывать текущий APY «как есть» без контекста — misleading, особенно для протоколов с переменной доходностью.
Интеграция с dApp
Кнопка «Launch App» ведёт на основной dApp. Но хороший лендинг делает шаг дальше: встроенный минимальный виджет (deposit или swap) прямо на лендинге, без перехода.
Для этого — WalletConnect + wagmi стек. Пользователь подключает кошелёк прямо на главной, видит свой баланс, может сделать первый deposit. Конверсия выше, чем при переходе на отдельное приложение.
Документация и механика протокола
Раздел с описанием механики — не «подробнее в docs». Краткое техническое резюме прямо на лендинге:
- откуда берётся доходность (реальный источник, не «алгоритмическая генерация»)
- кто выступает контрагентом
- какие риски (liquidation, smart contract, oracle)
- ссылки на верифицированные контракты и аудит
Аудит-бейджи (Trail of Bits, Sherlock, Code4rena) — важный элемент доверия. Не просто логотип, а ссылка на публичный отчёт.
Технический стек и производительность
Для DeFi лендинга критична скорость загрузки: большинство пользователей открывают несколько протоколов одновременно. Next.js 14+ с App Router, статическая генерация для основного контента, client-side только для live данных.
Web3 интеграция через wagmi v2 + viem. Не ethers.js — он тяжелее, и для лендинга без сложной логики избыточен. RainbowKit или ConnectKit для готового wallet connection UI.
Анимации протокола (flow диаграммы, визуализация механики) — Framer Motion. Для сложных схем (liquidity flow, collateral cascade) — SVG анимации, не heavy JavaScript библиотеки.
Ориентиры по срокам
Лендинг с live данными, wallet connect и базовой документацией — 3-5 дней. С кастомными анимациями механики, embedded dApp виджетом и полной документацией — 1-2 недели. Стоимость рассчитывается индивидуально.