Начало работы с API провайдера MetaMask и React

Давайте создадим простое приложение React для интеграции с браузерным расширением MetaMask.

Привет! В этой статье мы создадим простое приложение React, которое подключается к расширению браузера MetaMask. Затем мы отобразим аватар аккаунта и баланс. Все функции MetaMask доступны через внедренное глобальное свойство: window.ethereum

Если вы предпочитаете читать официальную документацию по MetaMask, вы можете найти ее здесь.

Хорошо, давайте копать!

Подключиться к МетаМаску

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

Хотя вы можете получить несколько подключенных кошельков, я собираюсь получить только первый кошелек из массива, возвращаемого из MetaMask ( accounts[0] ), потому что первый элемент будет активным.

Ладно, вернемся к делу… Делается это путем запроса списка аккаунтов у MetaMask:

async function handleConnect() {

  // Check to see if MetaMask extension is installed/enabled or not

  if (!window.ethereum) {
    alert('You need to install MetaMask extension first!')
  }

  try {
    // We made sure MetaMask is enabled
    // So let's request accounts list from MetaMask

    const accounts = await window.ethereum.request({
      method: 'eth_requestAccounts'
    })

    // Suppose we're only interested in the first selected account
    // Save this wallet address or set it to your state
    const account = accounts[0]

  } catch (error) {
    // In case there is an error, alert the user
    alert(error.message);
  }
}

Просто как тот! Это зависит от того, как вы создаете свой компонент для установки состояния или чего-то еще. Вот пример:

function MetaMask() {
  const [account, setAccount] = useState()


  async function handleConnect() {
    if (!window.ethereum) {
      return alert('You need to install MetaMask extension first!')
    }
  
    try {
      const accounts…