1. General Project Description
It is necessary to develop a web interface with smart contract integration for performing cross-chain token transfers through the send function (LayerZero OFT). The interface should provide wallet connection (MetaMask/WalletConnect), permission verification (approve), and the invocation of the token sending function to another network.
Technology Stack: JavaScript (vanilla JS or React/Vue by agreement), Web3.js or Ethers.js, HTML/CSS for UI.
2. Functional Requirements
2.1. Wallet Connection
Implement a "Connect Wallet" button to connect MetaMask/WalletConnect
Display the connected wallet address in the interface
Support for network switching (BSC, Ethereum, Arbitrum, etc.)
2.2. User Interface (UI)
The interface should contain the following elements:
Input Fields:
Token Contract Address (input, example: 0xFB93EE8152dd0a0e6F4b49C66c06d800Cf1Db72d)
Recipient Address (input for recipient address)
Amount of Tokens (input with numeric value validation)
Target Network (dropdown/select for selecting the destination network)
Action Buttons:
"Check Allowance" — check permission (approve)
"Approve Tokens" — grant permission to the contract
"Send Tokens" — perform cross-chain transfer
Information Blocks:
Operation Status (pending, success, error)
Transaction Hash (with a clickable link to the explorer)
User's Token Balance
3. Logic of Operation (Sequence of Actions)
Step 1: Check for the send Function in the Contract
When entering the token contract address, automatically check for the presence of the send function via the contract's ABI
If the function is not present — display the error "Contract does not support cross-chain transfers"
Step 2: Check Allowance
Function: allowance(address owner, address spender)
Parameters:
Logic:
Call the allowance() function on the token contract
Compare the returned value with the amount of tokens entered by the user (convert to uint256 considering the token's decimals)
If allowance < amount:
Step 3: Approve
Function: approve(address spender, uint256 amount)
Parameters:
spender — address of the token contract
amount — large number (e.g., 10^30 or 2^256-1 for unlimited approve)
Actions:
Call the approve() function with the specified parameters
Wait for transaction confirmation
Show the message "Approval successful"
Unlock the "Send Tokens" button
Step 4: Call the send Function (Cross-Chain Transfer)
Function: send(LzSendParam calldata _sendParam, MessagingFee calldata _fee, address _refundAddress) payable
Parameters to Pass:
javascript
{
payableAmount: "0.002", // native currency (BNB/ETH), default 0.002
_sendParam: {
dstEid: [value from the network dictionary], // ID of the target network (LayerZero endpoint ID)
to: [recipient address from input], // recipient address
amountLD: [amount of tokens in uint256], // considering decimals
minAmountLD: "0", // minimum amount (default 0)
extraOptions: "0x0003",
composeMsg: "0x",
oftCmd: "0x"
},
_fee: {
nativeFee: "1265332848942799", // fee in native currency
lzTokenFee: "0" // fee in LZ tokens (usually 0)
},
_refundAddress: [connected user's wallet]
}
Actions:
Gather all parameters from the UI
Convert amountLD to uint256 considering the token's decimals
Substitute dstEid from the network dictionary (see section 4)
Call the send() function with payableAmount as the value of the transaction
Wait for transaction confirmation
Display the transaction hash with a clickable link to the block explorer
4. Network Dictionary
It is necessary to create an object/dictionary for mapping network names and their LayerZero Endpoint ID (dstEid):
javascript
const networkIds = {
"Ethereum": 30101,
"BSC": 30102,
"Arbitrum": 30110,
"Optimism": 30111,
"Polygon": 30109,
"Avalanche": 30106,
"Base": 30184,
// add others as needed
};
Note: Exact IDs will need to be clarified in the LayerZero V2 documentation for each network.
5. Error Handling
It is necessary to provide for the handling of the following errors:
Wallet not connected
Insufficient tokens in balance
Insufficient native currency to pay gas
User rejected the transaction
Contract does not contain the required function
Network/RPC error
Invalid address format
All errors should be displayed in a clear manner in the UI.
6. Code Requirements
Clean, readable code with comments in English or Russian
Modular structure (separation of Web3 logic, UI, utilities)
Use of async/await for asynchronous operations
Validation of all user inputs
Responsive design (adaptability for mobile devices)
7. Example Contract for Testing
Network: BSC (Binance Smart Chain)
Contract Address: 0xFB93EE8152dd0a0e6F4b49C66c06d800Cf1Db72d
Link: https://bscscan.com/address/0xfb93ee8152dd0a0e6f4b49c66c06d800cf1db72d
Functions for Operation:
send() — Write Contract (sending tokens)
allowance() — Read Contract (checking allowance)
approve() — Write Contract (granting allowance)
8. Work Result
The contractor must provide:
Source Code (HTML, CSS, JavaScript)
Installation and Running Instructions (if build is required)
Brief Documentation on using the interface
Demo Version (optional, can be on GitHub Pages or Vercel)
9. Additional Requirements
The code with the interface was provided in a zip, additional input may need to be added
