Разработка системы отображения транзакций в понятном виде

Проектируем и разрабатываем блокчейн-решения полного цикла: от архитектуры смарт-контрактов до запуска DeFi-протоколов, NFT-маркетплейсов и криптобирж. Аудит безопасности, токеномика, интеграция с существующей инфраструктурой.
Показано 1 из 1Все 1305 услуг
Разработка системы отображения транзакций в понятном виде
Средний
~3-5 дней
Часто задаваемые вопросы

Направления блокчейн-разработки

Этапы блокчейн-разработки

Последние работы

  • image_website-b2b-advance_0.webp
    Разработка сайта компании B2B ADVANCE
    1351
  • image_web-applications_feedme_466_0.webp
    Разработка веб-приложения для компании FEEDME
    1247
  • image_websites_belfingroup_462_0.webp
    Разработка веб-сайта для компании БЕЛФИНГРУПП
    950
  • image_ecommerce_furnoro_435_0.webp
    Разработка интернет магазина для компании FURNORO
    1186
  • image_logo-advance_0.webp
    Разработка логотипа компании B2B Advance
    642
  • image_crm_enviok_479_0.webp
    Разработка веб-приложения для компании Enviok
    922

MetaMask показывает: «Вы собираетесь вызвать функцию 0x38ed1739 с аргументами [115792089237316195423570985008687907853269984665640564039457584007913129639935, 0x7a250d5630B4cF539739dF2C5dAcb4c659F2488D, ...]». Пользователь видит hex и нажимает «Подтвердить», потому что другого выбора нет. По оценкам, до 30% потерь от фишинга происходит именно из-за непонимания подписываемых данных. Это фундаментальная UX-проблема всего Web3 — и система human-readable транзакций её решает. Например, пользователь хочет обменять 100 USDC на ETH, а подписывает approve на неограниченный лимит — и теряет все средства. Human-readable система покажет: «Вы разрешаете контракту 0x... тратить все ваши USDC». Без такой защиты пользователи вынуждены доверять интерфейсу вслепую. Мы разрабатываем системы human-readable под ключ: от ABI-декодирования до полной семантической интерпретации с симуляцией и анализом рисков. Если вы хотите улучшить UX и безопасность вашего кошелька или dApp, свяжитесь с нами — мы поможем внедрить систему human-readable транзакций.

Первый шаг — ABI-декодирование: из hex-строки извлекается имя функции и её аргументы. Но этого недостаточно для полного понимания. Нужна семантическая интерпретация, которая учитывает логику протокола.

Уровни декодирования

ABI декодирование

Первый уровень: из 0x38ed1739 получить swapExactTokensForTokens(uint256,uint256,address[],address,uint256). Это просто — по первым 4 байтам calldata ищем в ABI или в базе сигнатур (4byte.directory API, openchain.xyz).

import { decodeFunctionData } from 'viem';

function decodeTransaction(to: string, data: `0x${string}`, knownAbis: Record<string, Abi>) {
    const abi = knownAbis[to.toLowerCase()];
    if (!abi) return null;

    const { functionName, args } = decodeFunctionData({ abi, data });
    return { functionName, args };
}

Но знание имени функции и аргументов — ещё не human-readable. Нужен второй уровень.

Почему ABI-декодирования недостаточно?

Пользователь видит swapExactTokensForTokens и четыре числа — это всё ещё неочевидно. Какие токены? Какой курс? Есть ли риск потери средств? Без семантической интерпретации ABI-декодирование лишь заменяет hex на английские слова, но не даёт контекста. Именно поэтому мы используем интерпретаторы протоколов, которые знают, как расшифровать параметры в зависимости от адреса контракта.

Семантическая интерпретация

Правило: swapExactTokensForTokens(amountIn, amountOutMin, path, to, deadline) где path = [USDC, WETH] → «Обмен 100 USDC на минимум 0.032 ETH через Uniswap v2».

interface TransactionDescription {
    protocol: string;
    action: string;
    summary: string;       // "Обмен 100 USDC → ETH"
    details: DetailItem[];
    riskFlags: RiskFlag[];
}

const uniswapV2Interpreter = {
    swapExactTokensForTokens: async (args, context): Promise<TransactionDescription> => {
        const [amountIn, amountOutMin, path, to] = args;
        const inputToken = await resolveToken(path[0], context.chainId);
        const outputToken = await resolveToken(path[path.length - 1], context.chainId);

        return {
            protocol: 'Uniswap V2',
            action: 'Swap',
            summary: `Обмен ${formatAmount(amountIn, inputToken.decimals)} ${inputToken.symbol} → ${outputToken.symbol}`,
            details: [
                { label: 'Минимум получить', value: `${formatAmount(amountOutMin, outputToken.decimals)} ${outputToken.symbol}` },
                { label: 'Получатель', value: to === context.from ? 'Вы' : shortenAddress(to) },
                { label: 'Маршрут', value: path.map(resolveTokenSymbol).join(' → ') },
            ],
            riskFlags: checkSwapRisks(amountIn, amountOutMin, inputToken, outputToken),
        };
    },
};

Какие риски выявляет система?

Human-readable — не только красивый текст. Система должна детектировать потенциально опасные транзакции. Ниже — типовые риски и их влияние на безопасность:

Риск Описание Пример
Высокий slippage amountOutMin / currentPrice < 0.95 «Вы принимаете slippage > 5%»
Unlimited approve approve(spender, 2^256-1) «Вы даёте неограниченные права на ваш USDC адресу 0x...». Показывать имя контракта и аудит-статус спендера.
Подозрительный контракт to-адрес не верифицирован, низкий transaction count Явное предупреждение без блокировки
Drain approval setApprovalForAll(operator, true) для ERC-721/1155 «Вы разрешаете 0x... управлять ВСЕМИ вашими NFT из коллекции XYZ»
Фишинговые паттерны Транзакция выглядит как transfer, но calldata содержит скрытые вызовы Simulate-перед-отправкой — единственный надёжный способ

Сравнение: Human-readable система снижает одобрение фишинговых транзакций на 60% по сравнению со стандартным hex-интерфейсом (данные внутренних тестов).

Подробнее о методологии анализа рисков

Система использует несколько слоев проверки: ABI-анализ, статический анализ кода контракта (если верифицирован), динамическую симуляцию. Это позволяет детектировать не только явные риски, но и скрытые вызовы через fallback-функции. Для неизвестных контрактов риск помечается как "Неизвестный контракт — тщательно проверьте транзакцию".

Transaction simulation

Tenderly и Alchemy предоставляют simulate API: прогнать транзакцию без отправки и получить все state changes.

const simulation = await alchemy.transact.simulateExecution({
    from: userAddress,
    to: contractAddress,
    data: calldata,
    value: '0x0',
});

// simulation.calls — все internal calls
// simulation.logs — все события, которые будут эмитированы
// simulation.changes — изменения балансов (ERC-20, NFT)

Из simulation извлекаются изменения балансов: «-100 USDC, +0.034 ETH» — это самый надёжный human-readable результат, потому что он показывает что фактически произойдёт, а не что мы думаем про функцию.

База знаний протоколов

Для масштабируемой системы нужна база данных протоколов:

interface ProtocolRegistry {
    [contractAddress: string]: {
        name: string;
        logoUrl: string;
        audited: boolean;
        interpreter: TransactionInterpreter;
    }
}

Открытые реестры: Etherscan verified contracts API, DeFi Llama protocols list, Coingecko contract database. Дополнять кастомными записями для специфичных протоколов.

Для неизвестных контрактов — fallback на ABI decoding без семантической интерпретации, с явным указанием «Неизвестный контракт».

Интеграция в UI

Transaction preview modal

До подтверждения транзакции в кошельке — показать preview:

<TransactionPreview
    summary="Обмен 100 USDC → ETH"
    protocol={{ name: 'Uniswap V3', logo: '/logos/uniswap.svg', audited: true }}
    balanceChanges={[
        { token: 'USDC', amount: '-100', type: 'outgoing' },
        { token: 'ETH', amount: '+0.034 (мин.)', type: 'incoming' },
    ]}
    riskFlags={[]}
    gasFee={{ eth: '0.002', usd: '4.50' }}
/>

История транзакций

Для каждой прошлой транзакции — human-readable описание вместо хэша и функции. «3 января: Обмен 500 USDC → 1.2 ETH на Uniswap V3 (+$45 прибыль)». Требует off-chain хранения декодированных данных — постоянно пересчитывать дорого.

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

  • ABI-декодирование с поддержкой основных сигнатур (4byte.directory, openchain.xyz)
  • Интерпретаторы для топ-50 протоколов (Uniswap, Curve, Aave, Compound, 1inch и др.) с возможностью кастомных
  • Transaction simulation через Tenderly или Alchemy
  • Система риск-флагов (slippage, unlimited approve, подозрительные контракты, фишинг)
  • База протоколов с автоматическим обновлением через Etherscan и DeFi Llama
  • Интеграция с кошельком (via wagmi/viem или кастомный RPC)
  • UI-компоненты (preview modal, история)
  • Документация и поддержка при внедрении

Наши инженеры имеют 5+ лет опыта в Web3 и реализовали 15+ интеграций human-readable систем для кошельков и dApp. Мы гарантируем совместимость с основными сетями и высокую точность симуляции. Закажите проект под ключ, и мы предоставим готовое решение с полной поддержкой.

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

Этап Время
Базовая система (ABI-декодирование + топ-10 протоколов + simulate) 3 дня
Полная система (с риск-флагами, расширенной базой протоколов, историей) 4-5 дней
Интеграция в существующий UI 1-2 дня

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

Вступление

Пользователь нажимает «Connect Wallet» — MetaMask открывается, подтверждает — и ничего не происходит. Или хуже: транзакция ушла, но UI завис на «pending» навечно, потому что event listener отвалился при переключении сети. Типичная ситуация: контракт задеплоен на Arbitrum, а кошелёк подключен к Ethereum Mainnet — интерфейс молча показывает нулевые балансы, хотя RPC отвечает. Web3-фронтенд это не React + API вызовы. Это работа с кошельками, нодами, реорганизациями блокчейна и состоянием, которое не принадлежит вашему серверу.

Что входит в полный спектр 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 дней бесплатной поддержки после сдачи

Источник: внутренний регламент на основе best practices wagmi и viem

Современный стек: 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% меньше памяти. Это достигается за счёт нативной поддержки ethers.js ABI encoding/decoding в Wasm и отсутствия прослойки BigNumber. Результат — загрузка страницы с 20 токенами занимает не 2 секунды, а 600 мс. Библиотеки разрабатываются командой wagmi-dev и поддерживают все последние EIP. Подробнее о 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. Нужно:

  1. Детектировать неправильную сеть.
  2. Предложить переключение через wallet_switchEthereumChain.
  3. Если сеть не добавлена — wallet_addEthereumChain.
  4. Дождаться подтверждения переключения перед отправкой транзакции.

Wagmi обрабатывает это через useSwitchChain(), но UX flow нужно проектировать явно — автоматическое переключение без объяснения пугает пользователей.

Как обрабатывать мультичейн-переключения без потери UX?

Мы перехватываем 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%.

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>
  )
}

Сроки и стоимость разработки

Тип проекта Ориентировочный срок
Базовый dApp (чтение + одна транзакция) 2–3 недели
Полноценный DeFi‑интерфейс (swap, stake, dashboard) 6–10 недель
NFT marketplace UI 4–8 недель
Кастомный wallet с мультичейн 8–14 недель

Стоимость рассчитывается индивидуально на основе объёма контрактов, количества сетей и сложности UI. Мы предлагаем фиксированную цену после аудита кода — без скрытых доплат.

Гарантии и поддержка

После сдачи проекта предоставляем 30 дней бесплатной поддержки и приёмку по чек‑листу из 50+ пунктов. Все исходники проходят аудит, используем формальную верификацию контрактов (Slither + Mythril). 10+ лет опыта в разработке смарт-контрактов и Web3‑интерфейсов — прошли путь от Solidity 0.4 до 0.8, от Truffle до Foundry. 50+ успешных dApp в production на Ethereum, Polygon, Arbitrum, Optimism и Base.

Свяжитесь с нами для оценки вашего проекта — подготовим техническое задание и архитектуру за 3 рабочих дня. Закажите разработку под ключ и получите готовый продукт с документацией, тестами и деплой‑скриптами.