Llevamos unas semanas llenas de noticias de metaverso, NFTs, smart contracts, criptomonedas, wallets… Muchos conceptos que a veces se confunden y que deberíamos tener claros, puesto que van a ser algo determinante en el mundo de la tecnología y, por supuesto, en el front.
Hay mucha literatura al respecto, si quieres informarte, no te será difícil. Aquí, haremos un sencillo ejemplo de cómo conectar nuestro wallet con el front de una aplicación.
Usaremos web3.js para hacerlo, y lo haremos en React. Para este ejemplo, usaremos el framework Next.js: https://nextjs.org/
Os dejo un repositorio de github donde encontraréis el ejemplo, por si no os apetece poneros a instalar cosas. Para probar el monedero, podéis instalar la extensión de Chrome (supongo que, como buenos programadores, utilizáis este navegador): https://metamask.io/
(Cuidado con todo el tema de instalaciones y demás, referentes a todo lo que implique criptomonedas: aseguraos de que os bajáis las cosas de los sitios oficiales.)
Vamos a destacar los pasos clave que podéis ver en el código:
- En pages/index.js, hacemos los dos importaciones necesarias para nuestra tarea:
import { useWeb3React } from "@web3-react/core";
import { connector } from "../config/web3";- En el ejemplo, usamos dos botones para activar/desactivar el wallet apoyándonos en el localStorage (te animo a que mejores el código usando un solo botón). En el caso de conectar, el botón llamará a esta función:
const connect = useCallback(() => {
activate(connector);
localStorage.setItem("previouslyConnected", true);
}, [activate]);- Como veis, usamos el método activate (que lo sacamos de desestruturar la importación que hicimos anteriormente), pasándole el connector, también importado (la línea del localStorage es para establecer que ya se conectó). Aquí está la desestructuración que utilizamos para todo lo que necesitaremos:
const { activate, active, deactivate, account, error, chainId } =
useWeb3React();¡Y ya está! El resto de código vale para mostrar el botón adecuado, desconectar, mostrar los datos del wallet conectado… Pero la conexión con tu wallet está hecha, así de sencillo.
Veréis que a la hora de conectar, la extensión de MetaMask os pedirá permiso y os avisará para qué se solicita ese permiso. No olvidéis leer bien qué permisos dais al interactuar en ciertas aplicaciones, no deis más de los que queráis otorgar.
Otro día de estos veremos un ejemplo de smart contract, usando Solidity (muy similar a javascript). Y si tienes interés, profundizaremos un poco más en todo este ecosistema que tarde o temprano estará al orden del día. Como ya te dije al principio, investiga un poco y verás la relación entre todos los conceptos (pero si tienes dudas, aquí me tienes).
¡Hasta la semana que viene!