Розробка системи відображення транзакцій у зрозумілому вигляді

Розробка системи відображення транзакцій у зрозумілому вигляді

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

Рівні декодування

ABI декодування

Перший рівень: з 0x38ed1739 отримати swapExactTokensForTokens(uint256,uint256,address[],address,uint256). Просто — шукаємо в ABI або базі сигнатур перші 4 байти calldata (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...». Показуйте імя контракту та аудит-статус spender.

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

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 — всі внутрішні виклики
// simulation.logs — всі события, які будуть емітовані
// simulation.changes — зміни балансів (ERC-20, NFT)

Витяг зміни балансу з симуляції: «-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 декодування без семантичної інтерпретації, з явним зазначенням «Unknown contract».

Інтеграція в 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 дні. Повна система з risk flags, базою протоколів, історією транзакцій: 4-5 днів.