Децентрализованные приложения (DApps) предоставляют пользователям возможность взаимодействовать с блокчейном через интуитивно понятный интерфейс. Основными компонентами DApp являются:
- Фронтенд-приложение для взаимодействия с пользователем.
- Связь с блокчейном через библиотеки (например, Web3.js или Ethers.js).
- Смарт-контракты для выполнения логики на блокчейне.
В этом материале вы научитесь создавать фронтенд для DApp, подключать его к блокчейну с использованием Web3.js/Ethers.js, взаимодействовать со смарт-контрактами и обеспечивать удобный пользовательский опыт (UX).
Создание фронтенда для DApp
Фронтенд DApp — это веб-приложение, которое подключается к блокчейну для выполнения операций с помощью смарт-контрактов. Мы будем использовать HTML и JavaScript для создания простого интерфейса.
Установите Node.js и npm:
- Загрузите Node.js с официального сайта.
- Проверьте установку:
node -v npm -v
Создайте проект:
mkdir dapp-frontend cd dapp-frontend npm init -y
Установите библиотеку для взаимодействия с блокчейном:
npm install web3 ethers
Создайте файл index.html с базовым интерфейсом:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>DApp Example</title> <script src="https://cdn.jsdelivr.net/npm/web3/dist/web3.min.js"></script> </head> <body> <h1>Simple DApp</h1> <button id="connectButton">Connect Wallet</button> <div id="userAddress"></div> <div id="balance"></div> <div id="contractData"></div> <input type="number" id="setValue" placeholder="Set new value"> <button id="setButton">Set Value</button> <script src="app.js"></script> </body> </html>
Взаимодействие с блокчейном через Web3.js/Ethers.js
Подключение кошелька и взаимодействие с блокчейном
Создайте файл app.js для подключения к блокчейну через MetaMask и выполнения операций.
С использованием Web3.js
if (typeof window.ethereum !== 'undefined') {
const web3 = new Web3(window.ethereum);
const connectWallet = async () => {
try {
// Подключение MetaMask
const accounts = await ethereum.request({ method: 'eth_requestAccounts' });
const userAddress = accounts[0];
document.getElementById('userAddress').innerText = `Connected Wallet: ${userAddress}`;
// Получение баланса
const balance = await web3.eth.getBalance(userAddress);
document.getElementById('balance').innerText = `Balance: ${web3.utils.fromWei(balance, 'ether')} ETH`;
} catch (error) {
console.error('Error connecting to wallet:', error);
}
};
document.getElementById('connectButton').addEventListener('click', connectWallet);
}
С использованием Ethers.js:
const provider = new ethers.providers.Web3Provider(window.ethereum);
const signer = provider.getSigner();
const connectWallet = async () => {
try {
await provider.send('eth_requestAccounts', []);
const userAddress = await signer.getAddress();
document.getElementById('userAddress').innerText = `Connected Wallet: ${userAddress}`;
const balance = await provider.getBalance(userAddress);
document.getElementById('balance').innerText = `Balance: ${ethers.utils.formatEther(balance)} ETH`;
} catch (error) {
console.error('Error connecting to wallet:', error);
}
};
document.getElementById('connectButton').addEventListener('click', connectWallet);
Взаимодействие со смарт-контрактом
Подключение контракта
Для взаимодействия с контрактом вам нужны:
- Адрес контракта.
- ABI (интерфейс контракта).
Пример подключения:
const contractABI = [
// Вставьте ABI вашего контракта
];
const contractAddress = '0xYourContractAddress';
const contract = new ethers.Contract(contractAddress, contractABI, signer);
// Вызов функций контракта
const getContractData = async () => {
try {
const value = await contract.getNumber();
document.getElementById('contractData').innerText = `Contract Value: ${value.toString()}`;
} catch (error) {
console.error('Error fetching contract data:', error);
}
};
const setContractData = async () => {
try {
const newValue = document.getElementById('setValue').value;
const tx = await contract.setNumber(newValue);
await tx.wait();
alert('Value updated successfully!');
getContractData();
} catch (error) {
console.error('Error setting contract data:', error);
}
};
document.getElementById('setButton').addEventListener('click', setContractData);
Работа с тестовыми сетями блокчейнов
Тестовые сети блокчейнов — это ключевой инструмент для безопасной разработки и тестирования децентрализованных приложений (DApps). Они позволяют работать с реальными контрактами и транзакциями без использования реальных средств. В данном блоке мы разберем, как работать с тестовыми сетями различных блокчейнов, поддерживаемых в MetaMask, и какую информацию должен знать фронтенд-разработчик для эффективного взаимодействия.
Какие блокчейны поддерживает MetaMask?
MetaMask поддерживает EVM-совместимые блокчейны (Ethereum Virtual Machine), которые используют схожую архитектуру с Ethereum. Это позволяет работать с такими сетями, как:
- Ethereum (основная сеть и тестовые сети Goerli, Sepolia).
- Binance Smart Chain (BSC): Testnet и Mainnet.
- Polygon: Mumbai Testnet и Mainnet.
- Avalanche: Fuji Testnet и Mainnet.
- Fantom: Testnet и Mainnet.
- Arbitrum: Testnet и Mainnet.
- Optimism: Testnet и Mainnet.
Все эти сети можно настроить в MetaMask, и они поддерживают взаимодействие через RPC (Remote Procedure Call).
Настройка тестовых сетей в MetaMask
Для добавления тестовой сети в MetaMask разработчику нужно знать RPC URL, Chain ID, и другие параметры. Вот примеры для популярных тестовых сетей:
Ethereum (Goerli Testnet)
- RPC URL: https://rpc.goerli.mudit.blog/ или https://goerli.infura.io/v3/YOUR-PROJECT-ID
- Chain ID: 5
- Symbol: ETH
- Block Explorer: https://goerli.etherscan.io
Binance Smart Chain (Testnet)
- RPC URL: https://data-seed-prebsc-1-s1.binance.org:8545/
- Chain ID: 97
- Symbol: BNB
- Block Explorer: https://testnet.bscscan.com
Polygon (Mumbai Testnet)
- RPC URL: https://rpc-mumbai.maticvigil.com/
- Chain ID: 80001
- Symbol: MATIC
- Block Explorer: https://mumbai.polygonscan.com
Avalanche (Fuji Testnet)
- RPC URL: https://api.avax-test.network/ext/bc/C/rpc
- Chain ID: 43113
- Symbol: AVAX
- Block Explorer: https://testnet.snowtrace.io
Fantom (Testnet)
- RPC URL: https://rpc.testnet.fantom.network/
- Chain ID: 4002
- Symbol: FTM
- Block Explorer: https://testnet.ftmscan.com
Получение тестовых токенов
Для работы в тестовых сетях требуются токены (например, ETH, BNB, MATIC) для оплаты транзакций (газа). Эти токены можно получить бесплатно через Faucet. Или разработчик вашего контракта может зачислить на ваш кошелек тестовые токены.
Информация, необходимая фронтенд-разработчику
Фронтенд-разработчику, взаимодействующему с тестовыми сетями, необходимо учитывать следующие аспекты:
Подключение к RPC
Для взаимодействия с тестовой сетью DApp должен использовать RPC-сервер. Вот пример подключения с помощью Ethers.js:
const provider = new ethers.providers.JsonRpcProvider( 'https://rpc-mumbai.maticvigil.com/' );
Смена сети в MetaMask
Чтобы приложение работало в нужной сети, убедитесь, что пользователь подключён к правильной сети. Для автоматического переключения сети можно использовать метод wallet_addEthereumChain:
const addNetwork = async () => {
try {
await window.ethereum.request({
method: 'wallet_addEthereumChain',
params: [
{
chainId: '0x13881', // Chain ID в формате Hex (Polygon Mumbai)
chainName: 'Mumbai Testnet',
rpcUrls: ['https://rpc-mumbai.maticvigil.com/'],
nativeCurrency: {
name: 'MATIC',
symbol: 'MATIC',
decimals: 18,
},
blockExplorerUrls: ['https://mumbai.polygonscan.com'],
},
],
});
} catch (error) {
console.error('Failed to add network:', error);
}
};
Обработка ошибок
Фронтенд должен обрабатывать типичные ошибки:
- Пользователь отклонил запрос (код ошибки 4001).
- Пользователь подключён к неверной сети.
- Ошибки взаимодействия с контрактами.
- Зависания при ожидании ответа от блокчейна.
Пример обработки ошибок:
try {
const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
console.log('Connected:', accounts[0]);
} catch (error) {
if (error.code === 4001) {
alert('User rejected the connection.');
} else {
console.error('Error:', error.message);
}
}
Отображение данных пользователя
Фронтенд должен показывать:
- Баланс пользователя в тестовой сети.
- Подключённую сеть.
- Информацию о транзакциях (например, через блокчейн-эксплорер).
Пример получения баланса:
const getBalance = async (address) => {
const balance = await provider.getBalance(address);
console.log('Balance:', ethers.utils.formatEther(balance), 'ETH');
};
Проверка подключения MetaMask
Приложение должно проверять, установлен ли MetaMask, и предлагать пользователю установить его, если он отсутствует.
if (typeof window.ethereum === 'undefined') {
alert('MetaMask is not installed. Please install it to use this DApp.');
}
Заключение
В этом материале мы узнали , как создать простой интерфейс для DApp, подключиться к блокчейну через Web3.js/Ethers.js, взаимодействовать со смарт-контрактами и подключаться к тестовым сетям.
Добавить комментарий