viernes, noviembre 10, 2023

MetaMask Snaps: Cómo Crear Superpoderes para tu Wallet Web3

En artículos anteriores, hemos abordado la importancia de la seguridad en el mundo Web3 - y nuestro querido Latch Web3 -, además de cómo prepararnos para este novedoso entorno. Sin embargo, la evolución en el mundo de las criptomonedas y las Dapps no se detiene. Ahora nos encontramos con una herramienta que promete revolucionar la forma en que interactuamos con nuestra Wallet Web3, y de ella os voy a hablar hoy: MetaMask Snaps, que hemos estado probándola en el equipo de  IdeasLocas.

Figura 1: MetaMask Snaps: Cómo Crear Superpoderes para tu Wallet Web3

MetaMask, la wallet Web3 más popular entre los usuarios, ha introducido una característica llamada "Snaps". Se trata de plugins que permiten a los desarrolladores extender las funcionalidades de MetaMask añadiendo capacidades personalizadas a la Wallet sin comprometer la seguridad del usuario.


Figura 2: Presentación de MetaMask Snaps Beta

¿Te imaginas haber desarrollado alguna de las primeras aplicaciones para la App Store de Apple o Google Play? Por desgracia, no podemos volver atrás en el tiempo, pero si te puedes subir a esta nueva ola para crear Snaps en la versión beta de MetaMask, abierta para todos: Metamask Flask. Este es el nombre que se ha asignado a la versión para desarrolladores (canary) de MetaMask y no debe confundirse con el framework web de Python.

¿Por dónde empezar?

La extensiones están desarrolladas en lenguajes adaptados a la Web como TypeScript y React por lo que no se necesita conocimiento de ningún lenguaje específico de web3 (como Solidity). Se requiere de un editor de texto (o IDE similar a Visual Studio Code) y npm o yarn versión 3. El primer paso consiste en instalar la extensión de MetaMask Flask en el navegador. Esto se puede hacer desde el propio sitio web de MetaMask: https://metamask.io/flask/.

Figura 3: Landing page de Metamask Flask

Continuaremos con los pasos intuitivos de su instalación hasta tener una wallet creada correctamente. En caso de que tengamos la extensión de MetaMask habilitada, tendremos que desactivarla para que no haya fallos de incompatibilidad con MetaMask Flask que es la versión de desarrollo. El botón de “Gestionar extensiones” se encontrará en la esquina superior derecha de tu navegador. Llegados a este punto, abriremos nuestro editor de código y la terminal de este y en el directorio donde queramos crear nuestro proyecto escribiremos el siguiente comando: 

yarn create @metamask/snap your-snap-name

Después de su creación, accedemos al proyecto e instalamos las dependencias:

cd your-snap-name 
 
yarn install

Y ahora, ya podemos comenzar a desarrollar. Vamos a ello. Para probar nuestra extensión ejecutamos el comando:

yarn start

Esto abrirá un frontend en el puerto 8000 que permitirá interactuar con nuestra extensión en un entorno de pruebas.

Figura 4: Template de desarrollo levantado en un entorno local

Haz clic en el botón Connect y procede a instalar el Snap. Una vez instalado podrás interactuar con el botón Send message. Este botón imita la funcionalidad de cualquier Web enviando un mensaje a MetaMask mediante RPC y nosotros, a partir de ese mensaje, podremos crear la funcionalidad que deseemos.

En este caso, vamos a crear un simple “hello world!”. Para ello cargamos el proyecto en nuestro editor favorito. Observando en el contenido del proyecto, nos centraremos en el archivo index.ts dentro de la ruta packages/snap/src que contiene la lógica de nuestro plugin. Dentro del fragmento "content : panel ([ ])" realizamos nuestra programación, en el ejemplo reemplazamos el texto por el que prefiramos.

Figura 6: Cambiando la lógica del plugin en VSCode

Sin tocar nuestra terminal, nos vamos de nuevo a localhost:8000 y para apreciar los cambios tendremos que refrescar la página y hacer clic en el botón Reconnect -> Install. La siguiente vez que pulsemos Send message nuestros cambios se habrán ejecutado y veremos lo siguiente en pantalla.

Figura 7: Popup tras Send message

A partir de aquí las posibilidades son infinitas, desde aplicaciones de ciberseguridad que te dan más datos sobre las transacciones que vas a realizar hasta usos de mensajería, pasando por mejoras en la interoperabilidad con otras cadena de Blockchain y más.

Conclusiones

El mundo Web3 es como una fiesta en constante evolución, y ahora MetaMask Snaps acaba de subir el volumen de la música. Estos "Snaps" son como los accesorios de moda para tu Wallet Web3, permitiendo que los desarrolladores le den un toque personal y funcional. Y lo mejor de todo, es que no necesitas ser un experto en seguridad para jugar con ello. Nosotros hemos estado jugando en el equipo de IdeasLocas, y se nos han ocurrido algunas ideas "locas", que ya os contaremos más adelante.
Si eres desarrollador, es como recibir una invitación VIP para innovar en una plataforma en auge. Y si eres usuario, prepara las palomitas porque lo que viene promete ser entretenido y útil. En resumen, con MetaMask Snaps, el futuro de las criptomonedas y Dapps se ve aún más emocionante y accesible. Veamos hasta dónde nos lleva esta aventura.


Recuerda que si quieres aprender de estas tecnologías, tienes Bit2Me Academy, que es una plataforma online para aprender de Web3, BitCoin, Tokenomics o Ethereum con cursos gratuitos además del libro dedicado a "Bitcoin: La tecnología Blockchain y su investigación" de Yaiza Rubio y Félix Brezo que seguro que te ayudan a ponerte las pilas.

Más artículos de Web3, Blockchain & SmartContracts
Autor: Luis García Adán (Intership en el equipo de IdeasLocas)

Contactar con Luis García Adán

a las

No hay comentarios:

Publicar un comentario