1. Общее описание проекта
Необходимо разработать веб-интерфейс с интеграцией смарт-контракта для выполнения кросс-чейн переводов токенов через функцию send (LayerZero OFT). Интерфейс должен обеспечивать подключение кошелька (MetaMask/WalletConnect), проверку разрешений (approve), и вызов функции отправки токенов в другую сеть.
Стек технологий: JavaScript (vanilla JS или React/Vue по согласованию), Web3.js или Ethers.js, HTML/CSS для UI.
2. Функциональные требования
2.1. Подключение кошелька
Реализовать кнопку "Connect Wallet" для подключения MetaMask/WalletConnect
Отображать подключенный адрес кошелька в интерфейсе
Поддержка переключения сети (BSC, Ethereum, Arbitrum и др.)
2.2. Пользовательский интерфейс (UI)
Интерфейс должен содержать следующие элементы:
Поля ввода:
Адрес контракта токена (input, example: 0xFB93EE8152dd0a0e6F4b49C66c06d800Cf1Db72d)
Адрес получателя (input для recipient address)
Количество токенов (input с проверкой числового значения)
Целевая сеть (dropdown/select с выбором сети назначения)
Кнопки действий:
"Check Allowance" — проверка разрешения (approve)
"Approve Tokens" — выдача разрешения контракту
"Send Tokens" — выполнение кросс-чейн перевода
Информационные блоки:
Статус операции (pending, success, error)
Хеш транзакции (с кликабельной ссылкой на эксплорер)
Баланс токенов пользователя
3. Логика работы (последовательность действий)
Шаг 1: Проверка наличия функции send в контракте
Шаг 2: Проверка Allowance (разрешения)
Функция: allowance(address owner, address spender)
Параметры:
Логика:
Вызвать функцию allowance() на контракте токена
Сравнить возвращенное значение с количеством токенов, введенным пользователем (конвертировать в uint256 с учетом decimals токена)
Если allowance < amount:
Шаг 3: Approve (выдача разрешения)
Функция: approve(address spender, uint256 amount)
Параметры:
spender — адрес контракта токена
amount — большое число (например, 10^30 или 2^256-1 для unlimited approve)
Действия:
Вызвать функцию approve() с указанными параметрами
Дождаться подтверждения транзакции
Показать сообщение "Approval successful"
Разблокировать кнопку "Send Tokens"
Шаг 4: Вызов функции send (кросс-чейн перевод)
Функция: send(LzSendParam calldata _sendParam, MessagingFee calldata _fee, address _refundAddress) payable
Параметры для передачи:
javascript
{
payableAmount: "0.002", // нативная валюта (BNB/ETH), по умолчанию 0.002
_sendParam: {
dstEid: [значение из словаря сетей], // ID целевой сети (LayerZero endpoint ID)
to: [recipient address из input], // адрес получателя
amountLD: [количество токенов в uint256], // с учетом decimals
minAmountLD: "0", // минимальное количество (по умолчанию 0)
extraOptions: "0x0003",
composeMsg: "0x",
oftCmd: "0x"
},
_fee: {
nativeFee: "1265332848942799", // комиссия в нативной валюте
lzTokenFee: "0" // комиссия в LZ токенах (обычно 0)
},
_refundAddress: [подключенный кошелек пользователя]
}
Действия:
Собрать все параметры из UI
Конвертировать amountLD в uint256 с учетом decimals токена
Подставить dstEid из словаря сетей (см. раздел 4)
Вызвать функцию send() с payableAmount как value транзакции
Дождаться подтверждения транзакции
Отобразить хеш транзакции с кликабельной ссылкой на block explorer
4. Словарь сетей (Network Dictionary)
Необходимо создать объект/словарь для маппинга названий сетей и их LayerZero Endpoint ID (dstEid):
javascript
const networkIds = {
"Ethereum": 30101,
"BSC": 30102,
"Arbitrum": 30110,
"Optimism": 30111,
"Polygon": 30109,
"Avalanche": 30106,
"Base": 30184,
// добавить другие по мере необходимости
};
Примечание: Точные ID нужно будет уточнить в документации LayerZero V2 для каждой сети.
5. Обработка ошибок
Необходимо предусмотреть обработку следующих ошибок:
Кошелек не подключен
Недостаточно токенов на балансе
Недостаточно нативной валюты для оплаты gas
Пользователь отклонил транзакцию
Контракт не содержит нужную функцию
Ошибка сети/RPC
Неверный формат адреса
Все ошибки должны отображаться в понятном виде в UI.
6. Требования к коду
Чистый, читаемый код с комментариями на английском или русском
Модульная структура (разделение логики Web3, UI, утилит)
Использование async/await для асинхронных операций
Валидация всех пользовательских вводов
Responsive дизайн (адаптивность под мобильные устройства)
7. Пример контракта для тестирования
Сеть: BSC (Binance Smart Chain)
Адрес контракта: 0xFB93EE8152dd0a0e6F4b49C66c06d800Cf1Db72d
Ссылка: https://bscscan.com/address/0xfb93ee8152dd0a0e6f4b49c66c06d800cf1db72d
Функции для работы:
send() — Write Contract (отправка токенов)
allowance() — Read Contract (проверка разрешения)
approve() — Write Contract (выдача разрешения)
8. Результат работы
Исполнитель должен предоставить:
Исходный код (HTML, CSS, JavaScript)
Инструкция по установке и запуску (если требуется сборка)
Краткая документация по использованию интерфейса
Демо-версия (опционально, можно на GitHub Pages или Vercel)
9. Дополнительные требования
Код с интерфейсом предоставил в zip, возможно надо добавить доп input
