Соединение вашего DAPP с блокчейном с WalletConnect и GetBlock
web3 web3-development dapp-development connect-dapp-to-blockchain blockchain-integration-guide blockchain-for-newbies dapps-for-newbies getblock-for-newbies walletconnect

Соединение вашего DAPP с блокчейном с WalletConnect и GetBlock

27 июня 2025 г.

Вы хотите подключить свое децентрализованное приложение (DAPP) к блокчейну и позволить пользователям взаимодействовать с ним, используя свои кошельки браузера? Этот урок поможет вам интегрироватьWalletConnectсGetBlock.io- Мощная комбинация для бесшовных и надежных взаимодействий блокчейна.

Мы сосредоточимся на настройке на основе браузера, что делает ее идеальным для веб-приложений, где пользователи обычно используют расширения браузера, такие какМетамаскаПолем

Что вам понадобится

Прежде чем погрузиться в код, убедитесь, что у вас есть следующее:

  • Учетная запись GetBlock:GetBlock предоставляет доступ к различным узлам блокчейна. Вам понадобится ключ API для подключения. Если у вас его нет, зарегистрируйтесь вhttps://getblock.io/Полем
  • Кошелек на основе браузера:Мы будем использовать общий кошелек для удлинения браузераМетамаскаДля этого урока. Убедитесь, что он установлен в вашем браузере и подключен к Testnet (например, Sepolia) для безопасных экспериментов.
  • Базовые знания JavaScript:Этот урок включает в себя какой -то код JavaScript.
  • Простой веб -проект:Основной HTML -файл с тегом сценария - это все, что вам нужно для начала.

Шаг 1: Настройка токена доступа к GetBlock

  1. Войдите, чтобы GetBlock:После входа в систему получите свободную конечную точку для Sepolia.
  2. Получите новую конечную точку (при необходимости):Вы найдете кнопку получить кнопку на панели приборной панели.
  3. Скопируйте свой токен доступа:Найдите и скопируйте токен доступа. Мы будем использовать это для подключения к узлам блокчейна. Для этого урока мы предположим, что вы подключитесь к Ethereum Testnet.

Шаг 2: Создайте свою структуру HTML

Давайте создадим простой HTML -файл (index.html) В нем будут размещены нашу дапп и логику JavaScript.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WalletConnect GetBlock Tutorial</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        button { padding: 10px 20px; margin-top: 10px; cursor: pointer; }
        #status { margin-top: 20px; font-weight: bold; }
        #account { margin-top: 10px; }
    </style>
</head>
<body>
    <h1>Connect Your Wallet</h1>
    <button id="connectButton">Connect Wallet</button>
    <button id="disconnectButton">Disconnect Wallet</button>
    <div id="status">Status: Disconnected</div>
    <div id="account">Account: N/A</div>

    <script src="./app.js"></script>
</body>
</html>

Шаг 3: Реализация логики WalletConnect (app.js)

Теперь давайте создадим нашеapp.jsФайл и добавьте код JavaScript для обработки WalletConnect.

Во -первых, вам нужно установитьWalletConnect web3modalбиблиотека иWalletConnectProviderПолем Для простого примера браузера вы можете использовать CDN. Для более надежного проекта вы обычно используетеnpmПолем

Добавьте эти теги сценария в свойindex.htmlдотвойapp.jsтег скрипта:

<script src="https://unpkg.com/web3@latest/dist/web3.min.js"></script>

<script src="https://unpkg.com/@walletconnect/web3-provider@1.8.0/dist/umd/index.min.js"></script>

<script src="https://unpkg.com/web3modal@1.9.12/dist/index.js"></script>

Теперь создайте свойapp.jsфайл:

// Replace with your actual GetBlock Access Token
const GETBLOCK_ACCESS_TOKEN = 'YOUR_GETBLOCK_ACCESS_TOKEN';
const GETBLOCK_NODE_URL = `https://go.getblock.io/${GETBLOCK_ACCESS_TOKEN}/`;

let web3Modal;
let provider;
let web3;
let selectedAccount;

const connectButton = document.getElementById('connectButton');
const statusDiv = document.getElementById('status');
const accountDiv = document.getElementById('account');

const init = async () => {
    // Configure Web3Modal
    const providerOptions = {
        // You can add more providers here, but for this tutorial, WalletConnect is the focus.
        walletconnect: {
            package: window.WalletConnectProvider.default, // required
            options: {
                rpc: {
                    // You can specify multiple chains and their GetBlock.io endpoints
                    11155111: GETBLOCK_NODE_URL // Sepolia Chain ID
                },
                infuraId: undefined, // Not needed if using GetBlock for RPC
                chainId: 11155111, // Default chain to connect to (Sepolia)
            }
        }
    };

    web3Modal = new Web3Modal.default({
        cacheProvider: true, // Optional: enables caching of provider for quicker reconnections
        providerOptions, // required
        disableInjectedProvider: false, // Optional: if you want to allow direct MetaMask connections too
    });

    console.log("Web3Modal initialized.", web3Modal);

    // If a provider is already cached, connect automatically
    if (web3Modal.cachedProvider) {
        await connectWallet();
    }
};

// Function to connect the wallet using WalletConnect
const connectWallet = async () => {
    try {
        statusDiv.textContent = 'Status: Connecting...';
        provider = await web3Modal.connect(); // This opens the WalletConnect modal

        // We plug the web3 provider into Web3.js
        web3 = new Web3(provider);

        // Get the connected accounts
        const accounts = await web3.eth.getAccounts();
        selectedAccount = accounts[0];

        statusDiv.textContent = 'Status: Connected!';
        accountDiv.textContent = `Account: ${selectedAccount}`;

        // Listen for accounts changed and disconnect events
        provider.on("accountsChanged", (accounts) => {
            console.log("Accounts changed:", accounts);
            selectedAccount = accounts[0];
            accountDiv.textContent = `Account: ${selectedAccount}`;
        });

        provider.on("chainChanged", (chainId) => {
            console.log("Chain changed:", chainId);
            // You might want to reload the page or update the UI based on the new chain
            statusDiv.textContent = `Status: Connected to Chain ID ${chainId}`;
        });

        provider.on("disconnect", (code, reason) => {
            console.log("Provider disconnected:", code, reason);
            resetApp();
        });

    } catch (e) {
        console.error("Could not connect wallet:", e);
        statusDiv.textContent = 'Status: Connection Failed';
        accountDiv.textContent = 'Account: N/A';
        selectedAccount = null;
    }
};

// This function will disconnect the wallet and reset the app state
async function disconnectWallet() {
    if (window.provider && window.provider.close) {
        await window.provider.close();
    }
    await web3Modal.clearCachedProvider();
    window.location.reload(); // Opcional: recarrega a página
}

const resetApp = () => {
    selectedAccount = null;
    statusDiv.textContent = 'Status: Disconnected';
    accountDiv.textContent = 'Account: N/A';
    web3Modal.clearCachedProvider();
    provider = null;
    web3 = null;
};

// Event listener for the connect button
connectButton.addEventListener('click', connectWallet);

// Event listener for the disconnect button
disconnectButton.addEventListener('click', disconnectWallet);

// Initialize the DApp when the DOM is loaded
window.addEventListener('load', init);

Важные примечания:

  • ЗаменятьYOUR_GETBLOCK_ACCESS_TOKEN: Обязательно замените этого заполнителя вашим фактическим токеном доступа к GetBlock.io.
  • Идентификатор цепи:АchainId(11155111 для Sepolia) имеет решающее значение для WalletConnect, чтобы идентифицировать правильную сеть.
  • rpcОбъект:rpcобъект внутриproviderOptions.walletconnect.optionsЭто где вы отображаете идентификаторы цепочки на свои URL -адреса узла getBlock.io. Это сообщает WalletConnect, какую конечную точку RPC использовать для конкретной сети.
  • WalletConnectProvider: В типичном проекте, использующем бундлер (например, WebPack или Parcel),WalletConnectProviderбудет импортирован из@walletconnect/web3-providerПолем Для этого простого примера браузера с использованием CDN он предполагается, что он будет доступен по всему миру послеweb3modal.min.jsсценарий.
  • Обработка ошибок:Аtry...catchБлоки важны для обработки потенциальных ошибок соединения.
  • Слушатели событий:Мы добавили основных слушателей событий дляaccountsChangedВchainChanged, иdisconnectЧтобы обновить пользовательский интерфейс и обработать изменения в кошельке пользователя.

Шаг 4: Запустите приложение

  1. Сохраните ваши файлы:Убедитесь, что обаindex.htmlиapp.jsнаходятся в том же каталоге.

  2. Открытьindex.htmlв вашем браузере. Используйте локальный сервер.

    Если вы откроете index.html непосредственно в браузере (файл: //), некоторые браузеры будут блокировать запросы поперечного происхождения: вы должны увидеть кнопку «Подключить кошелек».

  3. Нажмите «Подключить кошелек»:АWalletConnectМодал появится.

  4. Выберите «WalletConnect»:QR -код появится.

  5. Сканируйте с помощью мобильного кошелька (или используйте настольный кошелек, совместимый с кошельком, совместимый с кошельком):Если вы используете расширение рабочего стола Metamask, он должен открыть подключение. Для мобильных кошельков сканируйте QR-код, используя встроенный сканер вашего кошелька.

  6. Утвердить соединение:Подтвердите запрос на соединение в вашем кошельке.

После подключения ваш DAPP отобразит «Статус: подключен!» и ваш подключенный адрес учетной записи.

Следующие шаги

Теперь, когда у вас установлено базовое соединение, вы можете расширить свой DAPP:

  • Прочитайте данные контракта:Используйтеweb3экземпляр для взаимодействия с интеллектуальными контрактами (например, вызовviewфункции).
  • Отправить транзакции:Разрешить пользователям отправлять транзакции (например, вызоватьnonpayableФункции на интеллектуальных контрактах, отправить ETH).
  • Сообщения знаком:Позвольте пользователям подписывать произвольные сообщения.
  • Реализовать отключить:Добавьте кнопку или механизм для пользователей, чтобы явно отключить свой кошелек.

Этот урок предоставляет прочную основу для подключения вашего DAPP к блокчейну с помощьюWalletConnectиПолучитьПолем Используя эти инструменты, вы можете создать бесшовный и удобный опыт для ваших децентрализованных приложений!

Оригинал

Recent Post

Categories

PREVIOUS ARTICLE
NEXT ARTICLE