Web3 definitivamente llegó para quedarse. Redes como Bitcoin, Ethereum, Solana y muchas otras están creciendo rápidamente, junto con todas las aplicaciones que se crean sobre ellas.

Si eres un desarrollador de JavaScript y quieres sumergirte en Web3, el primer paso es instalar Metamask. Desde allí, puede utilizar uno de los métodos API disponibles en el objeto window.ethereum que Metamask inyecta en el navegador.

Cualquier proyecto Web3 normalmente comienza conectando una billetera. En Web3, una billetera es como una cuenta de usuario, pero a diferencia de las cuentas de servicios centralizados como Gmail, Instagram o TikTok, una billetera es una parte central de la propia red descentralizada. Metamask actúa como un proxy, lo que facilita la interacción con la red y cosas como crear una billetera. Si bien existen otras formas de crear una billetera, Metamask es, con diferencia, la más común.

Con eso en mente, creemos una aplicación web que permita a los usuarios conectar su billetera.

Requisitos previos

Deberás instalar la extensión Metamask en tu navegador, o puedes descargar su aplicación en tu dispositivo móvil; ambas opciones funcionan.

Diagrama

Echemos un vistazo al siguiente diagrama, que describe el flujo de la aplicación web:

Lógica

La lógica es sencilla y se divide en los siguientes pasos:

• Si Metamask no está instalado: Mostrar un enlace para descargar Metamask.

Esto es simple: cuando se instala Metamask, inyecta el objeto window.ethereum. Si este objeto no está presente, podemos asumir que Metamask no se ha instalado o habilitado.

• Si la billetera no está conectada: Muestra un botón para conectar la billetera.

Si window.ethereum está disponible, podemos mostrar un botón "Conectar" para que el usuario vincule su billetera.

• Si la billetera está conectada: Muestra la dirección de la billetera.

Uno de los métodos clave proporcionados por window.ethereum es la solicitud, que se puede utilizar para solicitar cuentas como esta:

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

   setAddress(accounts[0]);

Esto solicita al usuario acceso a la billetera. Si conceden permiso, el método devuelve una serie de cuentas. Para simplificar las cosas, tomaremos la primera cuenta y mostraremos su dirección.

Manifestación

Si abres la demostración sin Metamask instalado, deberías ver algo como esto:

Una vez que hayas instalado Metamask, deberías ver el botón "Conectar". Al hacer clic, Metamask le pedirá que seleccione qué cuenta conectarse. Consulte el siguiente GIF para ver un ejemplo visual:

Observe cómo el estado final muestra la dirección de la billetera. Aunque esta demostración es bastante simple, cada aplicación Web3 requiere una billetera conectada. Existen algunas bibliotecas excelentes como RainbowKit y WAGMI que simplifican la integración Web3. Sin embargo, en esta demostración, estoy usando métodos simples de la API de Metamask para lograr el mismo resultado. Por supuesto, hay muchos casos extremos que aún no manejo, como lo que sucede si el usuario niega el acceso o tiene varias cuentas; solo un par de ejemplos de los distintos escenarios que podrían surgir.

Código

Puedes encontrar el código completo en 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 (
    

      
    
  );
}

Conclusión

Esta fue una demostración muy básica y la mayor parte del código es solo React estándar. De hecho, la única línea específicamente relacionada con Web3 es:

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

Existen alternativas a Metamask, y estas billeteras también inyectan un objeto similar a window.ethereum para interactuar con sus API.

Siempre puedes elegir una biblioteca, como las mencionadas anteriormente, que maneja la mayor parte del texto estándar necesario para la integración Web3 y te permite concentrarte en tu negocio y la lógica de la interfaz de usuario.

Web3 no irá a ninguna parte y es probable que eventualmente tengas que incluirlo en uno de tus proyectos. Quién sabe, ¡quizás incluso te conviertas en un entusiasta de las criptomonedas! Si ese es el caso, así es como comenzarás tu viaje.

Campo de golf

• Manifestación
• Base de código