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.

Figura 5: Libro dedicado a "Bitcoin: La tecnología Blockchain y su investigación"
de Yaiza Rubio y Félix Brezo

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.

Figura 8: Contactar con el equipo de Ideas Locas en MyPublicInbox

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.

Figura 9: Bit2Me Academy: Una plataforma online para aprender

 de Web3, BitCoin, Tokenomics o Ethereum con cursos gratuitos

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

• Blockchain & SmartContracts: Una serie para aprender
• BlockChain & SmartContrats: Primer SmartContract con Solidity
• Blockchain & SmartContracts: Cómo probar y desplegar un SmartContract en Ethereum
• WWW, Web 1.0, Web 2.0, Web 3.0, Web3 y ¿Web 4.0?
• Metaverso, multiverso y las tierras digitales en que vivimos en forma de avatar
• Los Fan Tokens vs. las Criptomonedas y los NFTs: Level 101
• Tokenomics: Las criptomonedas y las "Proof-of-work": Level 101
• Los NFTs y el registro mundial de los dueños de activos digitales en el Metaverso
• BitCoin: Blockchain y su investigación
• BlockChain & SmartContrats: El Internet descentralizado y el almacenamiento off-chain en IPFS
• Reentrancy Attack: Cómo te roban criptomonedas por un bug en tu SmartContract
• BlockChain & SmartContract: Bugs que pueden dejar tu SmartContrat "fuera de juego"
• Blockchain & SmartContracts: Patrones y buenas prácticas de seguridad
• Blockchain & SmartContracts: Herramientas de Auditoría de Seguridad de SmartContracts
• BlockChain & SmartContracts: Ataque de phishing a tx.origin y robo de criptomonedas
• BlockChain & SmartContracts: Ataques de Ice Phishing
• Blockchain & SmartContracts: Herramientas de análisis dinámico
• ZIION: Una distribución Linux para auditar SmartContracts (& BlockChain)
• Dominios Web3 en Etherenum Name Service y la trazabilizad de las transacciones Blockchain
• BlockChain & SmartContracts: Actualizar SmartContracts como los grandes protocolos
• Jumping level up (from) web2 (to) web3: Vulnerabilities & SCAMs - SmartContracts
• 20 millones (Euros) en Tokens de Optimism perdidos por no saber cómo funcionan los Wallets Multifirma
• BlockChain & SmartContracts: Cómo crear una DApp de la Web3 con Python (y Flask)
• Pentesting SmartContracts: From Web2.0 to Web3
• Tokenomics 101: Una explicación con gráficos
• Read-Only Reentrancy Attack: $220k robados y otros +$100M en riesgo
• Como utilizar ChatGPT para encontrar bugs en SmartContracts
• BlockChain & SmartContracts: Nuevas áreas profesionales relacionadas con la Web3
• Las voces de Satoshi: Un canal para estar al día en Web3, Blockchain, Criptos & IA
• BlockChain & SmartContracts: Nuevas áreas profesionales relacionadas con la Web3
• Bit2Me Academy: Una plataforma online para aprender de Web3, BitCoin, Tokenomics o Ethereum con cursos gratuitos
• Level_Up!: Una plataforma para aprender a hacer pentesting en Web3 (SmartContracts & BlockChain ) a través de retos hacking
• Level_Up!: Web3 Security WarGames para los amantes del Challenge Based Learning
• Level_up!: WriteUp del Reto Questions para comenzar el pentesting en la Web3
• Level_Up! Deny_to_me Challenge activado en la plataforma Level_up! de retos hacking Web3
• Level_Up!: WriteUp del Ownership Challenge para hacer pentesting en Web3
• Nuevo reto Hacking Web3 de Level_UP! -> Forensic Ouch! 
• Level_Up!: WriteUp del reto "Safeguarding" para hacer pentesting en Web3
• Reto Web3 en Level_Up! "Replay_me": La importancia de una correcta validación de firmas
• Level_Up! Configuración paso a paso de la plataforma de pentesting en Web3
• Level_Up! Consigue tus NFTs mientras cuando supera retos Web3
• Telefónica validará nodos de la cadena BlockChain de Celo
• Latch Web3: Un pestillo de seguridad para SmartContract
• Level_Up!: El WriteUp del reto "Origin" y un nuevo reto "Guess my number"
• CrazyToolBox: Una herramienta multifunción de utilidades Web3
• Level_Up!: El WriteUp del reto "ReLottery" y un nuevo reto de agosto llamado “Pay Me!”
• WriteUp: Reto Overworld y nuevo reto DEX Knowledge disponible en Level_Up!
• WriteUp del Reto Hacking Web3 Blockchain Tour & Nuevo Reto Gas Knowledge en Level_Up!

Autor: Luis García Adán (Intership en el equipo de IdeasLocas)

Contactar con Luis García Adán