Презентационный сайт DeFi-протокола: live TVL и виджет депозита

Лендинг 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 данных.

Web3 интеграция через wagmi v2 + viem. RainbowKit или ConnectKit для готового wallet connection UI.

Анимации протокола (flow диаграммы, визуализация механики) — Framer Motion. Для сложных схем (liquidity flow, collateral cascade) — SVG анимации, не heavy JavaScript библиотеки. В результате первая загрузка занимает менее 2 секунд.

Инвестиции в качественный лендинг окупаются за счёт роста TVL и привлечения ликвидности. Получите консультацию по вашему протоколу — мы покажем реальные кейсы.

Как мы разрабатываем лендинг DeFi — пошагово

1. Анализ протокола — разбираем смарт-контракты, механику, источники данных (субграф, API). Определяем ключевые метрики: TVL, APY, количество пользователей, объём заблокированных средств.
2. Проектирование архитектуры — выбираем стек, верстаем схему компонентов. Согласуем макеты и user flow.
3. Интеграция контрактов — подключаем wagmi, настраиваем live метрики с интервалом обновления 15 секунд, пишем виджеты депозита.
4. Вёрстка и анимации — адаптивная вёрстка, визуализация механики протокола с помощью SVG-анимаций.
5. Тестирование — проверка на всех кошельках (MetaMask, WalletConnect, Coinbase Wallet), симуляция транзакций, нагрузочное тестирование до 1000 одновременных запросов.
6. Деплой и документация — развёртывание на Vercel или AWS, настройка CI/CD, передача инструкций.

Что входит в работу

• Репозиторий с кодом на Next.js 14.
• Интеграция смарт-контрактов через wagmi/viem.
• Live TVL/APY счётчики и графики исторической доходности.
• Подключение WalletConnect с RainbowKit или ConnectKit.
• Встроенный виджет депозита (опционально).
• Раздел документации с аудит-бейджами и ссылками на контракты.
• Адаптивная вёрстка и кастомные SVG анимации.
• Инструкции по развёртыванию и обновлению контента.
• Гарантия поддержки в течение месяца после запуска.

Ориентиры по срокам

Базовый лендинг с live данными и подключением кошелька — от 3 до 5 дней. С кастомными анимациями, встроенным виджетом и полной документацией — 1-2 недели. Стоимость рассчитывается индивидуально после анализа проекта. Экономия до 40% по сравнению с разработкой с нуля без готовых компонентов.

Если вам нужен лендинг под ключ — пишите для оценки и консультации. Гарантируем прозрачность и соблюдение сроков. Свяжитесь с нами для обсуждения вашего проекта — мы подготовим коммерческое предложение в течение дня.

Разработка DeFi-протоколов

Мы проектируем модульные DeFi-протоколы, в которых математика стейблкоинов, ликвидности и оракулов работает без сбоев. Mango Markets — краш-тест: атакующий манипулировал spot price через один аккаунт, взял кредит под завышенный collateral и вывел $114 млн. Оракул брал цену с единственного источника без TWAP. Не баг в коде — это архитектурное решение, которое стало уязвимостью. Наш опыт показывает: любой DeFi-протокол — это система ставок на то, что все компоненты, от расчётов до экономических стимулов, выстроены правильно одновременно.

Мы не пишем код под «если всё работает, не трогай». Мы моделируем стресс-сценарии: каскадные ликвидации, депег, флеш-кредиты. И только после этого — события, которые не сломают протокол.

Почему оракулы — критический компонент DeFi?

Большинство крупных взломов DeFi начинались с манипуляции оракулом. Разберём три слоя, которые мы используем в каждом проекте.

Spot price как оракул — не вариант. Uniswap v2 spot price можно сдвинуть flash loan за одну транзакцию. Цена в конце блока — единственное, что попадает в state, её и читает оракул. Схема атаки: занять через flash loan → купить актив в пул → цена поднялась → взять кредит под завышенный collateral → продать актив → вернуть flash loan. Одна транзакция.

TWAP как защита. Uniswap v3 observe() усредняет цену за период (30 минут). Манипуляция требует удерживать цену несколько блоков — это стоит дорого. Но TWAP медленно реагирует на легитимные изменения, что открывает окно для arbitrage на liquidation при резких движениях.

Chainlink Price Feeds — агрегация от множества data providers с медианой. Стандарт для lending. Проблема: heartbeat 1–24 часа и deviation threshold 0.5%. Если цена не двигается, фид может не обновляться сутки. В волатильном рынке — lag.

В продакшене мы используем двухуровневую проверку: Chainlink aggregator + Uniswap v3 TWAP как верификатор. Если расхождение больше N% — транзакция отклоняется, система ставится на паузу.

Как защитить DeFi-протокол от flash loan атак?

Flash loan превращает любого пользователя в обладателя неограниченного капитала на одну транзакцию. Поэтому при проектировании контрактов мы предполагаем: доступ к неограниченному капиталу есть у всех. Это меняет threat model полностью.

Легитимные применения flash loan — arbitrage, liquidation, самоликвидация. Но протокол должен проверять, что заём не используется для манипуляции: оракул не должен читать цену из пула, который можно сдвинуть за одну транзакцию. Мы добавляем проверки на block.timestamp и минимальную глубину ликвидности.

Ключевые компоненты DeFi-архитектуры

AMM: от x*y=k до concentrated liquidity

Uniswap v2 использует x * y = k. LP-токены ERC-20 — каждый пул выпускает свой токен пропорционально доле. Проблема: ликвидность размазана по всей кривой, большая часть не используется.

Uniswap v3 и позиции ERC-721: concentrated liquidity — LP предоставляет ликвидность в диапазоне [priceLow, priceHigh]. Capital efficiency до 4000x для стабильных пар. Но ERC-721 ломает vault-стратегии под ERC-20. Управление ranges — отдельная инженерная задача: позиция выходит из диапазона при движении цены, перестаёт зарабатывать fees, становится single-asset. Протоколы типа Arrakis Finance автоматически rebalance. Если строите vault поверх v3, нужен собственный range manager или интеграция с существующим.

Slippage в v3 рассчитывается через sqrtPriceX96 — 96-битная fixed-point математика. Ошибки на фронтенде приводят к расхождению между видимым и фактическим slippage.

Curve для пар с близкими ценами (stablecoin/stablecoin, stETH/ETH) использует инвариант, комбинирующий constant product и constant sum. Меньше slippage в диапазоне peg. Контракты на Vyper, код математически плотный, аудировать сложно.

Lending протоколы: collateral, liquidation, bad debt

LTV определяет максимальный кредит под collateral. Liquidation threshold — уровень ликвидации. Разница — буфер для liquidator. Типичный пример: LTV 75%, liquidation threshold 80%, bonus 5%. Если цена падает на 20%+, позиция открыта к ликвидации.

Каскадные ликвидации: много позиций ликвидируется одновременно → ликвидаторы продают collateral → цена падает → следующая волна. LUNA/UST 2022 — классический каскад.

Если collateral обесценивается быстрее ликвидации, протокол получает bad debt. Aave использует Safety Module (застейканный AAVE), Compound — reserves. Без backstop bad debt социализируется через dilution supply-токена или взаимозачёт.

Проектирование системы ликвидации требует моделирования стресс-сценариев: падение единственного liquidation bot, высокий gas, делистинг collateral.

Yield farming и incentive mechanics

Liquidity mining — раздача governance-токенов LP-провайдерам. Проблема mercenary capital: фармеры приходят, продают токены, уходят. TVL фиктивный.

Устойчивые механики: protocol-owned liquidity (Olympus bonding), veToken (CRV locked → boost + governance), locked staking с penalty. Ve-модель при неправильной реализации создаёт governance concentration. Нужен timelock на изменения gauge weights и лимиты на votingPower.

Что входит в нашу разработку DeFi-протоколов

• Архитектурная документация: диаграммы взаимодействия контрактов, стресс-тесты ликвидаций, расчёты оракулов.
• Реализация на Solidity 0.8.x с OpenZeppelin 5.x (AccessControl, ReentrancyGuard, Pausable, TimelockController) и Solmate для gas-optimised base contracts.
• Foundry fork-тесты на реальном mainnet (Uniswap, Chainlink, Aave) — тесты до деплоя покрывают все сценарии.
• Аудит: минимум два независимых аудитора для TVL от $1M. Code4rena или Sherlock для bug bounty.
• Деплой с Gnosis Safe 3/5 multisig + timelock 48–72 часа.
• Мониторинг через Tenderly (alerts, симуляции), OpenZeppelin Defender (automation), Forta (on-chain threat detection).
• Поддержка после запуска: обновления, патчи, апгрейды через proxy.

Наши компетенции и опыт

Мы разрабатываем DeFi-протоколы с 2020 года — за это время реализовали 30+ проектов с общим TVL более $150 млн. Среди клиентов — протоколы в топ-20 по TVL на Ethereum, Arbitrum и Base. Команда сертифицированных разработчиков Solidity, прошедших аудиторские треки ConsenSys Diligence.

DeFi на Wikipedia — базовые принципы, которые мы применяем на практике.

Сроки

• DEX с AMM (Uniswap v2 fork): 6–10 недель
• Lending protocol (Aave-style, один collateral): 3–5 месяцев
• Yield aggregator с несколькими стратегиями: 2–4 месяца
• Полноценный DeFi-протокол с governance: 5–8 месяцев включая аудит

Стоимость рассчитывается индивидуально — свяжитесь для оценки вашего проекта.

Получите консультацию по архитектуре DeFi-протокола — мы проанализируем риски и предложим оптимальное решение.