Предпросмотр транзакции в MetaMask Snap

​

Обзор проекта

​

Предварительные требования

• Установленное расширение браузера MetaMask Flask
• Node.js (версии 16 или новее)
• Yarn (версии 3)

​

Шаг 1. Настройка проекта MetaMask Snap

yarn create @metamask/snap project-name

OR

npm create @metamask/snap project-name

yarn

yarn start

​

Установка правильных разрешений

{
  // ...
  "initialPermissions": {
    "snap_dialog": {},
    "endowment:rpc": {
      "dapps": true,
      "snaps": false
    },
    "endowment:transaction-insight": {
      "allowTransactionOrigin": true
    },
    "endowment:network-access": {},
    "snap_manageState": {},
    "endowment:ethereum-provider": {
      "dapps": true,
      "snaps": true
    }
  }
}

​

Шаг 2. Генерация токенов доступа Tenderly API

1. Войдите в Tenderly или создайте бесплатный аккаунт здесь.
2. Перейдите на страницу Authorization и нажмите кнопку Generate Access Token.

​

Шаг 3. Написание логики для Snap

• Credentials Access (credentials-access.ts): управляет аутентификацией и доступом к Tenderly API.
• Simulation (simulation.ts): основная логика взаимодействия с Tenderly API для симуляции транзакций и получения результатов симуляции.
• Formatter (formatter.ts): логика для парсинга результатов симуляции и форматирования их в удобном виде в UI MetaMask.

​

Credentials Access

• fetchCredentials(): эта функция получает учётные данные проекта Tenderly. Если учётные данные не сохранены, она запускает handleUpdateTenderlyCredentials для запроса новых.
• handleUpdateTenderlyCredentials(): эта функция обрабатывает процесс обновления учётных данных проекта Tenderly. Она получает новые учётные данные, вызывая requestNewTenderlyCredentials, а затем сохраняет их с помощью метода snap_manageState с операцией 'update'.
• requestNewTenderlyCredentials(): эта функция запрашивает новые учётные данные Tenderly. Она вызывает requestCredentials, чтобы получить сырые данные учётных записей и проверить их правильность перед возвратом объекта с accountId, projectId и accessToken.

​

Simulation

• simulate(): это основная функция, которая обрабатывает симуляцию транзакции. Она получает учётные данные доступа к API, отправляет данные транзакции в Tenderly Simulation API и обрабатывает любые ошибки, возвращаемые API.

export async function simulate(
  transaction: { [key: string]: Json },
  transactionOrigin: string,
): Promise<Panel> {
  const credentials = await fetchCredentials(transactionOrigin);

  if (!credentials) {
    return panel([text('🚨 Tenderly access token updated. Please try again.')]);
  }

  const simulationResponse = await submitSimulation(transaction, credentials);
  const err = catchError(simulationResponse, credentials);

  return err || formatResponse(simulationResponse, credentials);
}

• submitSimulation(): эта функция отправляет запрос в API вместе с данными транзакции для симуляции.

async function submitSimulation(
  transaction: { [key: string]: Json },
  credentials: TenderlyCredentials,
) {
  const chainId = await ethereum.request({ method: 'eth_chainId' });
  const response = await fetch(
    `https://api.tenderly.co/api/v1/account/${credentials.accountId}/project/${credentials.projectId}/simulate`,
    {
      method: 'POST',
      body: JSON.stringify({
        from: transaction.from,
        to: transaction.to,
        input: transaction.data,
        gas: hex2int(transaction.gas),
        value: hex2int(transaction.value),
        network_id: hex2int(chainId as string),
        save: true,
        save_if_fails: true,
        simulation_type: 'full',
        generate_access_list: false,
        source: 'tenderly-metamask-snap',
      }),
      headers: {
        'Content-Type': 'application/json',
        'X-Access-Key': credentials.accessToken,
      },
    },
  );

  const parsedResponse = await response.json();

  // Make the simulation publicly accessible
  if (parsedResponse?.simulation?.id) {
    await fetch(
      `https://api.tenderly.co/api/v1/account/${credentials.accountId}/project/${credentials.projectId}/simulations/${parsedResponse.simulation.id}/share`,
      {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-Access-Key': credentials.accessToken,
        },
      },
    );
  }

  return parsedResponse;
}

​

Formatter

• formatResponse(): эта функция получает сырые данные и учётные данные симуляции проекта Tenderly, вызывает индивидуальные функции форматирования для каждого релевантного раздела (например, изменения балансов, выходное значение, изменения активов и т. д.) и возвращает панель со всеми отформатированными выводами.
• formatBalanceDiff(): эта функция генерирует панель, показывающую изменения балансов для каждого аккаунта, участвующего в транзакции.
• formatOutputValue(): эта функция создаёт панель, представляющую выходные значения транзакции, если таковые имеются. Также она декодирует вывод, если это возможно.
• formatAssetChanges(): эта функция форматирует панель для отображения любых изменений активов, различая изменения ERC20, ERC721 и другие.
• formatStorageChanges(): эта функция создаёт панель, в которой перечислены любые изменения хранилища, произошедшие во время транзакции. Она уникально форматирует адреса и вложенные структуры данных для наглядности.
• formatEventLogs(): эта функция представляет логи событий, если они существуют, для каждой транзакции. Логи отформатированы для удобства чтения и включают входные значения.
• formatCallTrace(): эта функция создаёт отформатированную визуальную иерархию трейсов вызовов, рекурсивно показывая вложенные вызовы.
• formatSimulationUrl(): эта функция возвращает ссылку на полные детали симуляции в Tenderly Dashboard и отдельную ссылку для расшаривания.

​

Шаг 4. Отображение данных симуляции в UI MetaMask

• Симуляция успешной транзакции с предопределённым payload (успешный трансфер ERC-20 и трансфер NFT)
• Симуляция неудачной транзакции с предопределённым payload
• Симуляция пользовательской транзакции с любым payload

​

Успешная симуляция с предопределённым payload

// packages/site/src/utils/snap.ts

export const sendTransaction = async (data: any): Promise<any> => {
  try {
    const [from] = (await window.ethereum.request({
      method: 'eth_requestAccounts',
    })) as string[];

    if (!from) {
      return Promise.reject(Error('Failed to get an account'));
    }

    // https://ethereum.org/en/developers/docs/apis/json-rpc/#eth_sendtransaction
    return window.ethereum.request({
      method: 'eth_sendTransaction',
      params: [
        {
          ...data,
          from,
        },
      ],
    });
  } catch (e) {
    console.error(e);
    return e;
  }
};

// packages/snap/src/index.ts

export const onTransaction: OnTransactionHandler = async ({ transaction, transactionOrigin }) => {
  if (!isObject(transaction) || !hasProperty(transaction, 'to')) {
    return {
      content: {
        value: 'Unknown transaction type',
        type: NodeType.Text,
      },
    };
  }

  const simulationResponse = await simulate(transaction, transactionOrigin || '');

  return {
    content: {
      children: simulationResponse.children,
      type: NodeType.Panel,
    },
  };
};

export function formatSimulationUrl(data: any, credentials: TenderlyCredentials): Component[] {
  const simulationUrl = `https://dashboard.tenderly.co/${credentials.accountId}/${credentials.projectId}/simulator/${data.simulation?.id}`;
  const sharedSimulationUrl = `https://tdly.co/shared/simulation/${data.simulation?.id}`;

  return [
    heading('Tenderly Dashboard:'),
    text('See full simulation details in Tenderly.'),
    text(`**Status:** ${data.transaction?.status ? 'Success ✅' : 'Failed ❌'}`),
    copyable(`${simulationUrl}`),
    text('Share simulation details with others! 🤗'),
    copyable(`${sharedSimulationUrl}`),
  ];
}

​

Неудачная транзакция с предопределённым payload

​

Симуляция с пользовательским payload

• from: DATA, 20 байт — адрес, с которого отправляется транзакция.
• to: DATA, 20 байт — (опционально при создании нового контракта) адрес, на который направляется транзакция.
• gas: QUANTITY — (опционально, по умолчанию: 90000) целое число газа, предоставленного для выполнения транзакции. Неиспользованный газ будет возвращён.
• gasPrice: QUANTITY — (опционально, по умолчанию: To-Be-Determined) целое число gasPrice, используемого для каждого оплаченного газа.
• value: QUANTITY — (опционально) целое число значения, отправляемого с этой транзакцией.
• data: DATA — скомпилированный код контракта ИЛИ хэш вызываемой сигнатуры метода и закодированные параметры.
• nonce: QUANTITY — (опционально) целое число nonce. Это позволяет перезаписывать ваши собственные ожидающие транзакции, использующие тот же nonce.

​

Следующие шаги