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, приклад: 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
