Web3 определенно никуда не денется. Такие сети, как Биткойн, Эфириум, Солана и множество других, быстро растут, а на их основе создаются все приложения.

Если вы разработчик JavaScript и хотите окунуться в Web3, первым шагом является установка Metamask. Оттуда вы можете использовать один из методов API, доступных в объекте window.ethereum, который Metamask внедряет в браузер.

Любой проект Web3 обычно начинается с подключения кошелька. В Web3 кошелек похож на учетную запись пользователя, но в отличие от учетных записей централизованных сервисов, таких как Gmail, Instagram или TikTok, кошелек является основной частью самой децентрализованной сети. Metamask действует как прокси, упрощая взаимодействие с сетью и такие действия, как создание кошелька. Хотя существуют и другие способы создания кошелька, Metamask, безусловно, является наиболее распространенным.

Имея это в виду, давайте создадим веб-приложение, которое позволит пользователям подключать свой кошелек.

Предварительные условия

Вам необходимо установить расширение Metamask в свой браузер или загрузить его приложение на свое мобильное устройство — оба варианта работают.

Диаграмма

Давайте посмотрим на следующую диаграмму, описывающую работу веб-приложения:

Логика

Логика проста и разделена на следующие этапы:

• Если Metamask не установлена: Показать ссылку для скачивания Metamask.

Это просто: когда Metamask установлен, он внедряет объект window.ethereum. Если этот объект отсутствует, можно предположить, что Метамаска не установлена ​​и не включена.

• Если кошелек не подключен: Показать кнопку для подключения кошелька.

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

• Если кошелек подключен: Отображение адреса кошелька.

Одним из ключевых методов, предоставляемых window.ethereum, является запрос, который можно использовать для запроса учетных записей следующим образом:

   const accounts = await window.ethereum?.request({
     method: "eth_requestAccounts",
     params: [],
   });

   setAddress(accounts[0]);

При этом пользователю будет предложено получить доступ к кошельку. Если они предоставляют разрешение, метод возвращает массив учетных записей. Для простоты мы возьмем первую учетную запись и отобразим ее адрес.

Демо

Если вы откроете демо-версию без установленной Metamask, вы увидите что-то вроде этого:

После установки Metamask вы должны увидеть кнопку «Подключиться». При нажатии Metamask предложит вам выбрать учетную запись для подключения. Для наглядного примера посмотрите следующий GIF:

Обратите внимание, как в конечном состоянии отображается адрес кошелька. Хотя эта демонстрация довольно проста, для каждого приложения Web3 требуется подключенный кошелек. Есть несколько замечательных библиотек, таких как RainbowKit и WAGMI, которые упрощают интеграцию с Web3. Однако в этой демонстрации я использую простые методы API Metamask для достижения того же результата. Конечно, есть много крайних случаев, которые я пока не рассматриваю, например, что происходит, если пользователь отказывает в доступе или имеет несколько учетных записей — всего лишь пара примеров различных сценариев, которые могут возникнуть.

Код

Полный код можно найти на GitHub.

"use client";

import { MetaMaskInpageProvider } from "@metamask/providers";

import { useState, useEffect } from "react";

declare global {
  interface Window {
    ethereum?: MetaMaskInpageProvider;
  }
}

function Button(props: { connectWalletHandler: () => void; address: string }) {
  const styles = {
    display: "inline-block",
    padding: "20px 40px",
    border: "5px solid black",
    fontSize: 24,
    cursor: "pointer",
  };

  if (props.address) {
    const shortAddress = `${props.address.slice(0, 7)}...${props.address.slice(
      -5
    )}`;
    return 
Wallet: {shortAddress}
;
  }

  if (window.ethereum) {
    return (
      

        Connect wallet
      
    );
  }

  return (
    
      Install Metamask
    
  );
}

export default function Page() {
  const [clientSide, setClientSide] = useState(false);
  const [address, setAddress] = useState("");

  const connectWalletHandler = async () => {
    const accounts = await window.ethereum?.request({
      method: "eth_requestAccounts",
      params: [],
    });

    if (!Array.isArray(accounts) || !accounts.length) {
      return;
    }

    setAddress(accounts[0]);
  };

  useEffect(() => {
    setClientSide(true);
  }, []);

  if (!clientSide) {
    return >;
  }

  return (
    

      
    
  );
}

Заключение

Это была очень простая демонстрация, и большая часть кода представляет собой стандартный React. Фактически, единственная строка, конкретно относящаяся к Web3, это:

await window.ethereum?.request({
  method: "eth_requestAccounts",
  params: [],
});

Существуют альтернативы Metamask, и эти кошельки также внедряют объект, похожий на window.ethereum, для взаимодействия с их API.

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

Web3 никуда не денется, и, скорее всего, в конечном итоге вам придется включить его в один из своих проектов. Кто знает, возможно, вы даже станете криптоэнтузиастом! Если это когда-нибудь произойдет, то именно так вы начнете свое путешествие.

Ссылки

• Демо
• Кодовая база