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

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

MetaMask показывает: «Вы собираетесь вызвать функцию 0x38ed1739 с аргументами [115792089237316195423570985008687907853269984665640564039457584007913129639935, 0x7a250d5630B4cF539739dF2C5dAcb4c659F2488D, ...]». Пользователь видит hex и нажимает «Подтвердить», потому что другого выбора нет. Это фундаментальная UX-проблема всего Web3 — и система human-readable транзакций её решает.

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

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. Нужен второй уровень.

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

Правило: 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),
        };
    },
};

Risk flags и предупреждения

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

Высокий slippage: если amountOutMin / currentPrice < 0.95 — предупреждение «Вы принимаете slippage > 5%».

Unlimited approve: approve(spender, 2^256-1) — «Вы даёте неограниченные права на ваш USDC адресу 0x...». Показывать имя контракта и аудит-статус спендера.

Подозрительный контракт: to-адрес не верифицирован на Etherscan, deployed недавно, низкий transaction count. Не блокировать, но показывать явное предупреждение.

Drain approval: setApprovalForAll(operator, true) для ERC-721/1155 — «Вы разрешаете 0x... управлять ВСЕМИ вашими NFT из коллекции XYZ».

Phishing patterns: транзакция выглядит как transfer, но calldata содержит что-то ещё. Simulate-перед-отправкой — единственный надёжный способ.

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 декодирование + топ-10 протоколов + simulate): 3 дня. Полная система с риск-флагами, базой протоколов, историей транзакций: 4-5 дней.