Реалізація блокчейн-експлорера на сайті

Реалізація блокчейн-експлорера на веб-сайті

Блокчейн-експлорер — веб-додаток для перегляду транзакцій, блоків, адрес і смарт-контрактів у блокчейні. Повнофункціональний експлорер потребує ноди з архівним режимом, індексатора та швидкого пошукового бекенду.

Компоненти системи

Блокчейн-нода (archive)
    │
    ├── RPC/WebSocket (eth_getBlock, eth_getTransaction...)
    │
Індексатор (власний або The Graph)
    │   Читає блоки → парсить транзакції → зберігає
    │
PostgreSQL + Redis (кеш)
    │
REST API / GraphQL
    │
Frontend (Next.js)
    ├── Пошук (tx hash, address, block)
    ├── Список блоків
    ├── Деталі транзакції
    ├── Профіль адреси (баланс + історія)
    └── Декодування викликів смарт-контрактів

Індексатор: читання блоків

import { createPublicClient, webSocket } from 'viem';
import { mainnet } from 'viem/chains';

const client = createPublicClient({
  chain: mainnet,
  transport: webSocket(process.env.ETH_WS_URL)
});

class BlockIndexer {
  async indexBlock(blockNumber: bigint): Promise<void> {
    const block = await client.getBlock({
      blockNumber,
      includeTransactions: true
    });

    await db.transaction(async (trx) => {
      // Зберегти блок
      await trx('blocks').insert({
        number: Number(block.number),
        hash: block.hash,
        parent_hash: block.parentHash,
        timestamp: new Date(Number(block.timestamp) * 1000),
        miner: block.miner,
        gas_used: block.gasUsed.toString(),
        gas_limit: block.gasLimit.toString(),
        transaction_count: block.transactions.length,
        base_fee_per_gas: block.baseFeePerGas?.toString() ?? null
      });

      // Зберегти транзакції
      for (const tx of block.transactions) {
        await trx('transactions').insert({
          hash: tx.hash,
          block_number: Number(tx.blockNumber),
          from_address: tx.from.toLowerCase(),
          to_address: tx.to?.toLowerCase() ?? null,
          value: tx.value.toString(),
          gas: tx.gas.toString(),
          gas_price: tx.gasPrice?.toString() ?? null,
          max_fee_per_gas: tx.maxFeePerGas?.toString() ?? null,
          input: tx.input,
          nonce: tx.nonce,
          transaction_index: tx.transactionIndex
        });

        // Оновити статистику адрес
        await this.updateAddressStats(trx, tx.from.toLowerCase());
        if (tx.to) await this.updateAddressStats(trx, tx.to.toLowerCase());
      }
    });
  }

  // Відстеження нових блоків у реальному часі
  async watchNewBlocks(): Promise<void> {
    const unwatch = client.watchBlocks({
      onBlock: async (block) => {
        await this.indexBlock(block.number);
      },
      onError: (error) => {
        logger.error('Block watch error', error);
      }
    });

    // Backfill пропущених блоків
    const latestIndexed = await this.getLatestIndexedBlock();
    const currentBlock = await client.getBlockNumber();

    for (let i = latestIndexed + 1n; i <= currentBlock; i++) {
      await this.indexBlock(i);
    }
  }
}

API: пошук

app.get('/api/search', async (req, res) => {
  const query = req.query.q as string;

  if (!query) return res.status(400).json({ error: 'Query required' });

  // Визначити тип пошукового запиту
  if (/^0x[0-9a-f]{64}$/i.test(query)) {
    // Хеш транзакції або блоку
    const tx = await db('transactions').where('hash', query.toLowerCase()).first();
    if (tx) return res.json({ type: 'transaction', data: tx });

    const block = await db('blocks').where('hash', query.toLowerCase()).first();
    if (block) return res.json({ type: 'block', data: block });

  } else if (/^0x[0-9a-f]{40}$/i.test(query)) {
    // Ethereum адреса
    return res.json({ type: 'address', address: query.toLowerCase() });

  } else if (/^\d+$/.test(query)) {
    // Номер блоку
    const block = await db('blocks').where('number', parseInt(query)).first();
    if (block) return res.json({ type: 'block', data: block });
  }

  res.json({ type: 'not_found' });
});

Frontend: декодування input data

import { decodeFunctionData } from 'viem';

async function decodeTransactionInput(
  input: string,
  contractAddress: string
): Promise<DecodedInput | null> {
  if (input === '0x') return null;

  // Завантажити ABI з перевірених контрактів (Etherscan API або власна БД)
  const abi = await getContractAbi(contractAddress);
  if (!abi) return { raw: input };

  try {
    const decoded = decodeFunctionData({ abi, data: input as `0x${string}` });
    return {
      functionName: decoded.functionName,
      args: decoded.args,
      raw: input
    };
  } catch {
    return { raw: input };
  }
}

Готові індексатори

Замість розроблення з нуля:

• The Graph — GraphQL-індексатор, безплатна self-hosted версія
• Ponder — TypeScript-фреймворк для індексаторів
• Moralis — керована API з індексуванням
• Alchemy / QuickNode — RPC з трансформаціями та webhooks

Строки виконання

• MVP-експлорер (транзакції, блоки, адреси) без індексатора (через RPC) — 2–3 тижні
• Повний індексатор з PostgreSQL + API + Frontend — 6–10 тижнів
• Експлорер для користувацької EVM-мережі — 2–3 місяці