Разработка простого сайта на Web3

Разработка простого сайта на Web3 предполагает интеграцию с блокчейном, чаще всего Ethereum, для взаимодействия с умными контрактами, кошельками пользователей и другими децентрализованными функциями. В этом примере мы создадим простой сайт, который подключается к Ethereum через MetaMask, отображает баланс кошелька пользователя и позволяет отправлять транзакции.

Шаги для создания сайта на Web3

Установите необходимые инструменты:

Node.js и npm для управления зависимостями.
Web3.js — библиотека для взаимодействия с Ethereum.
MetaMask — браузерное расширение для работы с Ethereum.

Создайте структуру проекта:

Инициализируйте проект с помощью npm init.
Установите Web3.js:
bash npm install web3

Напишите HTML, CSS и JavaScript:

Создайте простой интерфейс для подключения кошелька, отображения баланса и отправки транзакций.

Пример простого сайта на Web3

1. Структура проекта

web3-site/
├── index.html
├── styles.css
├── app.js
└── package.json

2. `index.html`

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Web3 Site</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <h1>Простой Web3 Сайт</h1>
    <button id="connectButton">Подключить MetaMask</button>
    <p id="walletInfo" class="hidden">
      Адрес кошелька: <span id="walletAddress"></span><br>
      Баланс: <span id="walletBalance"></span> ETH
    </p>
    <div id="sendEthForm" class="hidden">
      <h2>Отправить ETH</h2>
      <input type="text" id="recipientAddress" placeholder="Адрес получателя">
      <input type="number" id="amount" placeholder="Количество ETH">
      <button id="sendButton">Отправить</button>
      <p id="transactionStatus"></p>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
  <script src="app.js"></script>
</body>
</html>

3. `styles.css`

body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f9;
  color: #333;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.container {
  text-align: center;
  background: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

button {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  border: none;
  border-radius: 5px;
  background-color: #007bff;
  color: white;
  margin: 10px;
}

button:hover {
  background-color: #0056b3;
}

.hidden {
  display: none;
}

input {
  padding: 10px;
  margin: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  width: 80%;
}

4. `app.js`

// Проверяем, установлен ли MetaMask
if (typeof window.ethereum === 'undefined') {
  alert('Пожалуйста, установите MetaMask для использования этого сайта.');
}

// Инициализация Web3
const web3 = new Web3(window.ethereum);

// Элементы DOM
const connectButton = document.getElementById('connectButton');
const walletInfo = document.getElementById('walletInfo');
const walletAddress = document.getElementById('walletAddress');
const walletBalance = document.getElementById('walletBalance');
const sendEthForm = document.getElementById('sendEthForm');
const recipientAddress = document.getElementById('recipientAddress');
const amount = document.getElementById('amount');
const sendButton = document.getElementById('sendButton');
const transactionStatus = document.getElementById('transactionStatus');

// Подключение кошелька
connectButton.addEventListener('click', async () => {
  try {
    // Запрашиваем доступ к аккаунту
    const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
    const account = accounts[0];

    // Отображаем адрес кошелька
    walletAddress.textContent = account;
    walletInfo.classList.remove('hidden');

    // Получаем баланс кошелька
    const balance = await web3.eth.getBalance(account);
    walletBalance.textContent = web3.utils.fromWei(balance, 'ether');

    // Показываем форму для отправки ETH
    sendEthForm.classList.remove('hidden');
  } catch (error) {
    console.error('Ошибка при подключении кошелька:', error);
  }
});

// Отправка ETH
sendButton.addEventListener('click', async () => {
  const recipient = recipientAddress.value;
  const ethAmount = amount.value;

  if (!recipient || !ethAmount) {
    alert('Пожалуйста, заполните все поля.');
    return;
  }

  try {
    const accounts = await web3.eth.getAccounts();
    const sender = accounts[0];

    // Конвертируем ETH в Wei
    const amountInWei = web3.utils.toWei(ethAmount, 'ether');

    // Создаем транзакцию
    const transaction = {
      from: sender,
      to: recipient,
      value: amountInWei,
    };

    // Отправляем транзакцию
    const receipt = await web3.eth.sendTransaction(transaction);
    transactionStatus.textContent = `Транзакция успешна: ${receipt.transactionHash}`;
  } catch (error) {
    console.error('Ошибка при отправке транзакции:', error);
    transactionStatus.textContent = 'Ошибка при отправке транзакции.';
  }
});

Как это работает:

Подключение MetaMask:

Пользователь нажимает кнопку «Подключить MetaMask», и сайт запрашивает доступ к его кошельку.

Отображение баланса:

После подключения сайт отображает адрес кошелька и баланс в ETH.

Отправка ETH:

Пользователь вводит адрес получателя и количество ETH, затем нажимает «Отправить».
Сайт создает и отправляет транзакцию через MetaMask.

Запуск сайта:

Убедитесь, что у вас установлен MetaMask и есть тестовая сеть (например, Rinkeby или Goerli).
Откройте index.html в браузере.
Подключите MetaMask и используйте сайт.

Дополнительные улучшения:

Поддержка других сетей:

Добавьте возможность выбора сети (Ethereum Mainnet, Ropsten, Rinkeby и т.д.).

Интеграция с умными контрактами:

Взаимодействуйте с умными контрактами для выполнения сложных операций.

Улучшение UI/UX:

Добавьте индикаторы загрузки и улучшите дизайн.

Безопасность:

Проверяйте адреса и суммы перед отправкой транзакций.

Этот пример демонстрирует базовые возможности Web3 и может быть расширен для создания более сложных децентрализованных приложений (dApps).