Quizás hasta ahora no te hayas dado cuenta pero, durante todos estos artículos, en el ejemplo de los fichajes, siempre hemos utilizado la primera cuenta que nos devolvía nuestra red de pruebas. Obviamente, necesitamos que esta selección sea algo más dinámica, como ocurre por ejemplo en Remix, donde podíamos seleccionar en un combo la cuenta con la que queríamos interactuar. La otra opción sería que el usuario tenga que pasar la dirección en hexadecimal de su cuenta en cada transacción, lo cual no es nada amigable. En este artículo vamos a ver cómo la extensión Metamask nos puede ayudar en esta tarea.
¿Qué es Metamask?
Metamask es una extensión para los navegadores Chrome, Firefox y Brave, la cual gestiona carteras virtuales de Ethereum. En ella podemos almacenar distintas cuentas para distintas redes.
Instalar Metamask
Para instalar esta extensión debes ir a su página web y hacer clic sobre el enlace correspondiente a tu navegador.
Una vez instalada, haz clic en Get Started y selecciona la opción Create a Wallet, que lo único que pedirá será una contraseña.
En este momento, Metamask generará una frase llamada mnemonic, compuesta por quince palabras. Estas lo que nos va a dar son direcciones de cuentas, cada una con su clave pública y su clave privada, las cuales siempre serán las mismas para esas palabras en ese orden. Como dice la página, es muy importante que guardes bien esta frase ya que si la pierdes nunca más podrás recuperar las cuentas generadas a partir de esta.
De hecho, la propia extensión, para asegurarse de que has hecho caso en este punto, te pide que le indiques palabra por palabra en el orden correcto la frase que te acaba de dar, y así comprobar que la has guardado 🙂
Una vez hayas confirmado tu mnemonic, ya podrás usar Metamask. De hecho, en la página resultante verás que puedes conectarte a varias redes de Ethereum y que por defecto estás en la principal con una cuenta con 0 ETH.
A partir de ahora, en este navegador tendrás Web3 inyectado, con el fin de que nuestras aplicaciones puedan hacer uso de esta cartera.
Configurando Metamask con Ganache
Para ver cómo se integra Metamask con nuestro ejemplo, primero vamos a conectar Metamask a Ganache. Abre la aplicación, haz clic en Quickstart y copia la URL llamada RPC Server.
Ahora, en el navegador, haz clic en el icono de la extensión de Metamask y elige en el combo de las redes la que pone Custom RPC. Aparecerá un formulario donde sólo debes rellenar el nombre de la nueva red y la URL que acabas de copiar.
Si todo ha ido bien, la red de Ganache ahora aparecerá en el combo.
El último paso es importar las cuentas de nuestra red de pruebas a Metamask. En el apartado de Accounts verás que cada cuenta tiene una llave, la cual nos muestra la clave privada de cada una.
Haz clic sobre la llave de una de las cuentas y copia la clave. Ahora vuelve a hacer clic sobre el icono de Metamask y, teniendo seleccionada tu nueva red «Ganache», pulsa sobre el icono de la cuenta para seleccionar la opción Import Account.
Una vez ahí te pedirá que pegues la clave privada de la cuenta que quieres importar. Si es correcta, tendrás una nueva cuenta bajo la red de Ganache, pero en este caso con la misma cantidad de ethers que tiene dentro de tu red de pruebas.
Probando Metamask en tu aplicación
Ahora que ya tienes una cuenta válida importada en Metamask, vamos a probar esta integración en nuestra aplicación con Drizzle. Primero, asegúrate de que tu smart contract está desplegado en Ganache. Después, ejecuta npm start dentro de la carpeta client para lanzar la aplicación web.
Lo primero que ocurrirá es que Metamask nos pedirá permiso para que esta web pueda acceder a nuestra cartera de cuentas.
Una vez aceptes, verás que Drizzle carga correctamente, recuperando la cuenta que tienes seleccionada en Metamask, que debería de ser una de las que tienes en tu red de Ganache.
Si haces clic en el botón Register comprobarás que Metamask ahora te pide confirmación de la transacción que estás a punto de realizar, viendo cuál es el gasto que le supone a la cuenta que tienes seleccionada.
Si aceptas, podrás ver que tienes un nuevo fichaje y que el ether de tu cuenta de Ganache irá bajando con cada transacción que realices. Del mismo modo, en el histórico de tu cuenta en Metamask verás todas las transacciones realizadas.
¡Saludos!