¿Cómo conectar ReactJS con MetaMask?

Blockchain es la columna vertebral de las criptomonedas y la web 3.0. El mundo está aceptando la tecnología blockchain y también acepta aplicaciones de descentralización debido a la transparencia en diferentes transacciones. NFT está de moda y, en su mayoría, NFT DAPP se ejecuta en la string de bloques de Ethereum. En este artículo, veremos cómo se puede conectar su aplicación React js a la billetera Meta mask, que es la herramienta de navegador más utilizada para enviar y recibir transacciones firmadas.

MetaMaks: MetaMask es una billetera criptográfica y una puerta de entrada a la string de bloques DAPP. Se utiliza para conectar nuestra aplicación a web3. Es solo una extensión de Chrome que se utiliza para acceder e interactuar con la string de bloques de Ethereum. Sus características admiten tokens y activos digitales en el ecosistema Ethereum. También se usa como billetera principal para almacenar el saldo en Ethereum.

Para la conexión, estamos usando ethers.js , para conectarnos a la billetera Ethereum.

Creando la aplicación React:

Paso 1: crear un proyecto de reacción con CLI

npx create-react-app eth_app
or
yarn create react-app eth_app

Estructura del proyecto: Tendrá el siguiente aspecto. 

Paso 2: Conexión de Metamask a la aplicación de reacción. Para lograr la dirección de la billetera meta mask, necesitamos conectar MetaMaks a nuestra aplicación de reacción. Para verificar si la meta máscara está conectada.

if(window.ethereum){
      // Do something 
    }else{
      alert("install metamask extension!!")
    }

Ahora, si la meta máscara está instalada, debemos solicitar la cuenta.

window.ethereum.request({method:'eth_requestAccounts'})
.then(res=>{
        // Return the address of the wallet
        console.log(res) 
})

Para obtener el saldo necesitamos solicitar el método de saldo

window.ethereum.request({
    method:'eth_getBalance', 
    params: [address, 'latest']
}).then(balance => {
    // Return string value to convert it into int balance
    console.log(balance) 
      
    // Yarn add ethers for using ethers utils or
    // npm install ethers
    console.log(ethers.utils.formatEther(balance))
    // Format the string into main latest balance
})

Paso 3: Obtenga la información para reaccionar. Para obtener la información en la página de reacción, usaremos useState para establecer el valor del método javascript y usarlo en jsx

  const [data, setdata] = useState({
    address:'',    // Stores address
    Balance: null  // Stores balance
  })

// Importing modules
import React, { useState } from "react";
import { ethers } from "ethers";
import "./App.css";
import { Button, Card } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
  
function App() {
  
  // usetstate for storing and retrieving wallet details
  const [data, setdata] = useState({
    address: "",
    Balance: null,
  });
  
  // Button handler button for handling a
  // request event for metamask
  const btnhandler = () => {
  
    // Asking if metamask is already present or not
    if (window.ethereum) {
  
      // res[0] for fetching a first wallet
      window.ethereum
        .request({ method: "eth_requestAccounts" })
        .then((res) => accountChangeHandler(res[0]));
    } else {
      alert("install metamask extension!!");
    }
  };
  
  // getbalance function for getting a balance in
  // a right format with help of ethers
  const getbalance = (address) => {
  
    // Requesting balance method
    window.ethereum
      .request({ 
        method: "eth_getBalance", 
        params: [address, "latest"] 
      })
      .then((balance) => {
        // Setting balance
        setdata({
          Balance: ethers.utils.formatEther(balance),
        });
      });
  };
  
  // Function for getting handling all events
  const accountChangeHandler = (account) => {
    // Setting an address data
    setdata({
      address: account,
    });
  
    // Setting a balance
    getbalance(account);
  };
  
  return (
    <div className="App">
      {/* Calling all values which we 
       have stored in usestate */}
  
      <Card className="text-center">
        <Card.Header>
          <strong>Address: </strong>
          {data.address}
        </Card.Header>
        <Card.Body>
          <Card.Text>
            <strong>Balance: </strong>
            {data.Balance}
          </Card.Text>
          <Button onClick={btnhandler} variant="primary">
            Connect to wallet
          </Button>
        </Card.Body>
      </Card>
    </div>
  );
}
  
export default App;

Producción: