MetaMask 🛠 Extend MetaMask with Snaps

[Music] welcome to the metamask snaps Workshop everyone thank you for being here with me today my name is zad Sab I'm the developer advocate for metamask snaps so my role is to help the developers to get started working with snaps to get started hacking whether it's on our bounties or whether you're going to make a production project and I prepared a little workshop today for you you don't have to use your laptop or anything you just have to listen to me and uh and breathe and uh I see there's there's a lot more people who just came so uh for for the new people who have arrived we doing a metamask snaps Workshop welcome thank you for being here and just before you arrived we were doing a little stretch so if you want to stretch don't hesitate it's going to make you feel more focused it's always nice all right and uh all right let's get started before we do I have a few QR codes for you okay this QR codee is for our developer chat not just for metamask snaps but for all the consensus products okay that's metamask snaps SDK Linea all our products so this will give you to our uh to our telegram chat scan this QR code I will give you uh 30 seconds to do that see there's a lot more people coming hello welcome make yourself at home this is a QR code for our for our developer chat and one two three I'm going to change the slide very soon and this is another QR code this one is for this presentation okay this is a QR code of the presentation that you're watching I'm giving this to you because there's some resources at the end you can click on there's a lot of links for documentation and also that you have my my face my my my beautiful photo here so so this is QR code for this presentation that we're watching right now also take a few seconds to scan it and if for some reason you can't scan it you can come see me later and I will uh I will give you uh any information you want all right good all right let's do this so we're talking about snaps here and I'm going to talk to you about our bounties later but first I'd like to let you know a little bit for those who don't know what is metamask snaps okay some people will tell you you know plugins extensions this is how I like to talk about metamask snaps it's Community built feature for metamask okay who's the community you guys everyone okay and why are we doing this so that you can extend the wallet add new features to it in a permissionless way anyone can start working on snaps today and we have a lot of bounties I will show you later and now I'm going to tell you a little bit about what are some of the things that you can do with snaps okay so we're going to talk about some of the features that you can that you have available to you in order to develop with snaps the first one this is the biggest one it's very important is you can derive private keys for any protocol okay so that means today you can have manage Bitcoin you can manage salana you can manage all kind of Assets in metamask it's not anymore just ethereum wallet okay we have all these Snaps are available today live in our uh in our store snaps. metamask doio you can go you can install uh you can install these snaps and you can start playing with them and uh and managing other types of assets I have a video here I don't know if it's going to work because the network is uh is a little bit slow we're going to try it and uh this video is showing me using the the Bitcoin snap that we have uh that we have on our store so you you can make Bitcoin transactions you have a confirmation window all of that is using uh the secure Enclave of metamask snaps to manage the the signing of the the transaction and then you have a Dap that is showing you the wallet for uh for for for Bitcoin and it's very exciting as I said snaps. metam mask. you can you can go there and you can uh you can install all these snaps today live in your extension next feature very also very important I can't say that every feature is the most important otherwise you're going to think like what is this guy talking about but this we have a lot of snaps that are that are being built today to add security into the wallet okay metamask is already very secure but sometimes you know you're very excited you get a Twitter link or something it says like I don't know like mint this token or whatever you don't know what's going on you want to do it very quickly and you click confirm and then suddenly all your assets are drained right we can have the most secure wallet possible but that's not going to prevent some user errors okay so what is uh this feature it's called we call it transaction insights okay so you can create a snap just basic JavaScript code basically that will receive the transaction before the user clicks confirm okay so you have access to the transaction object and you can do whatever you want you can call some private apis you can run some simulations and you can present to the user uh an interface and you can tell them maybe like oh you should not execute this transaction this this will drain your wallet or this address you're about to send funds to is known to be a malicious address and this is an example it seems that we have a pretty good connection here so uh let's let's look at this video uh we have we have a test dap where I'm trying to make a malicious eth transfer and in the transaction window you have block fence which is one of the snaps that we have available in our store today that is showing me uh that it's a bad transaction and it's very simple to create a transaction Insight snap you create a piece of JavaScript code that has an on transaction export and you get access to the transaction object and you can do any kind of operation you want on it like I said you call your apis you do some simulations and and then you request the permission to uh to run those insights and uh you can do a lot of things with that if you want to look at some examples again snaps. metam mask.

you can get some inspiration of all the snaps that are available today and we really hope that you build on top of these features we have some really great uh bounties for you today you have a question okay is it Poss no for you mean for uh erc20 transfers when you need to approve a transaction can you run insights there yes this is what those insights are for no we still don't have insights for erc20 transfers we have insights for regular transactions and we just launch a new feature where we have signature insights so when you have a popup for signing just for signing a message we have insights for that now and we are working to add insights for uh for allowances for erc20 but we don't have it yet but it's coming there's a lot of features that are coming and there's a link that I'm going to give you also at the end that is another telegram chat where we put all the announcements every time there's a new snaps feature we will put it there so you know that uh that that it's available and there's a lot of very exciting apis that are coming super super exciting for account abstraction MPC see a lot of uh a lot of very exciting things on the way thank you for your question please feel free to ask questions at any time you don't need to wait until the end cool all right let's keep moving so uh apart from these two other these two apis that I just mentioned right we have a lot of supporting apis things that you're going to need to build your snap right so we have encrypted storage you can you can add some uh some data inside your snap and it's really cool because it will be available across all the websites right so you can you can do some really interesting things with that confirmation dialogues cron jobs so a lot of people ask us do you have websockets in Snaps websockets are not available but you can run uh JavaScript code on Chron job on the clock every minute or whenever you want you can pull some data and give the user some insight about their nfts about their anything that they want to monitor you can do a lot of things with that and another really cool feature that we launched very recently which is localization so you can make make your snap available in the language that the user chose in their metamask extension and it's very easy to do super easy you can localize everything you want in uh in the metamask UI and there's a lot more to come so now you know what you can do with snaps you want to know how to get started it takes 5 Seconds to get started to create a snap okay first you install flask what is flask flask is metamask but for developers so it's the same extension that you already know except it has a purple Fox icon instead of a orange Fox icon and you can use snaps in it without needing to be on our allow list right currently snaps is working on an allow list model so before your snap can be installed by users in the main extension it needs to be audited and we need to approve it but you're you're at the hackathon now you want to start hacking on snaps you don't have time to do an audit and for us to approve you so you install metamask flask and you install it in a new browser profile you cannot install it in the same extension as as metamask and this will allow you to develop snaps right you're going to use a new set of private Keys you don't want to use your uh your uh your your precious private keys with flask but uh this is the first step so you install the developer preview of metamask step two you go to your command line you run yarn create at metamask snap the name of your snap okay don't need don't start taking notes the presentation will be available to you later and I will be avail available to you as well okay so this is very easy it's like a create react app right you just run this command line it's going to clone our template and then you can immediately get started and we have a development server available for you so that's the third and last step you just go into the directory that you just created you run yarn start and what happens when you run yarn start you're going to get this I'm going to make the font size a little bit larger don't worry about it I'm I'm coming for you all right here you go so you're going to get development server that will run and it's going to run two servers at the same time one server will be running on Local Host 8000 the other one will be running on Local Host 8080 okay so what happens with that so you're developing right so you don't want to have to recompile manually every time same same thing as a react app right your snap is basically just a bunch of static JavaScript code so in production you host your snap on npm but while you're developing we have a server available for you Local Host 8080 and every time you make change to the snap code it's going to automatically recompile that code and the the other server running on Local Host 8000 that's a Dap it's a just a regular regular app that we built using react and that makes it easy for you to test your snap okay you don't have to use this app this DAP in production but it's already wired up to do everything for installing the snap for reloading the snap when you make changes to it and it has some example code for how to communicate between a Dap and a snap right so how does it work it's very simple when you when you load the Local Host 8000 you're going to be presented with a interface that's very familiar I'm going to keep making the font size bigger until we can actually see something here you're going to be presented with something that's very familiar anyone who used metamask is already used to having the connect metamask button except in this case when a user will press the connect to metamask button it will ask for I hope I remember my password it's not my real password all right and so what it will do is it will ask for a connection request to install the the snap I'm going to try to make this also a little bit larger so you can see what's going on here so basically it's saying this website this dap wants to connect to a snap hosted this time on Local Host 880 in production it's going to say the npm package of the snap and then you say connect and what do you see next you're going to see the the permissions that the snap is requesting okay so this is very important we're going to stop here for a second and look at this Snaps are not allowed to do anything by default they can't communicate to the network they cannot bring up dialogue Windows they cannot do any anything that the snap will want to do deriving private Keys asking for transaction insights the snap needs to ask for permission in order to be able to do that and this is what this dialogue is showing here it's showing that this dap wants to install a snap called typescript example and the snap is asking for some permissions to display dialogue windows and to allow websites to communicate with the snap right so snaps can expose an API and for example we saw the bitco we saw me interacting with the Bitcoin snap earlier right so the Bitcoin snap expose an API that allows me to send transactions to sign transactions to check my balance to do all of these things and it has to request permission for all these things right so before we move on how do you request these permissions well it's very simple in the code of your snap we're going to we're going to look at a little bit of code later but in the code of your snap you have a file it's a manifest file if you've ever developed extensions for Chrome or for any any other kind of plugins there's a manifest file that contains all the all the information all the data of uh of your extension of your plugin and snaps is no different and as part of this manifest file we list all the permissions that the the snap wants to use right like if my snap needed to make a network request if it needed to connect to the network I would add a new permission here it's called endowment uh network access so you would you would add this permission here and then the the fetch function that you're all familiar with if you develop with JavaScript will suddenly be available to your snap if you don't have this permission you can try to use fetch it's not going to work it's going to tell you that it's blocked and this way your users will know that your snap is trying to uh is is needing to connect to the internet just like permissions on on your the apps on your phone anything and uh anything that you do uh anything that you do in your snap you need to request a permission so when I click install the the snap is going to be fetched it's going to be installed in my extension and now uh the the code that we give you for this demo dap is automatically going to detect that this snap is installed and is going to change the interface and I can just show you an example if I click this send message button what's going to happen is the DAP is going to communicate with the snap through its RPC API and it's going to pop up a dialogue window here this dialogue window that you see here is coming from the snap right you can see that it says typescript example at the top which is the name of this snap and it's just a regular confirmation Di you can use it before signing a transaction on behalf of your users you can use it for doing anything you want and this is just some sample code right so if I click approve or reject you know nothing is going to happen right now but this is the sample code that we that we give you uh that that we make available to you all right so we still have quite a bit of time I'd like to show you since you're going to start developing with snaps I'd like to show you how you can debug your snaps right in inevitably you're going to run into some problems when you when you're developing your snaps you're going to get an error and you're going to be like okay well what's what's going on I don't see any output and the first thing we do as developers what do we do we open the developer tools which are also super small all right we open the developer tools and if you open your developer tools and you go in the console here you're not going to see any errors that are coming from from the snap code why because the snap is running inside of the metamask extension okay so how do you debug the metamask extension very simple you the way I do it is I will right click on the icon of the extension I will go under manage extension I will make sure that I am in developer mode here uh which I have to enable and once you enable developer mode you can inspect the background. HTML view it's going to open another developer tools here and in this console is where you're going to see the output of the the errors or the console logs that you make inside your snap I'm going to make one very quickly just to show you how when you make changes to your snap because you're going to be doing that how you can reload those uh those changes and make sure that you have the latest code available all right so this is going to also allow me to show you where the a little bit where all the code is right so this is the the code that gets created when you uh when you run our um our yarn create command I is is it is it somewhat clear like it looks very small from yeah it looks it looks a a little bit small but I can't make it any larger otherwise we're just not going to see anything all right so this is set up as a yarn repository with workspaces and you have two packages you have a site package which is like I said it's a regular react dap it's built using Gatsby you don't need to use any part of it but you can just look at it to see what are all the snaps functions that you can use in order to install a snap in order to call its RPC API and all that we're not really going to go through it and then you have the snap package which is all your snap snap source code and in the we already looked at the Manifest file which contains the permissions the name of your snap and whatnot and then you have your regular Source directory and really the only file that you need is an index.ts right now if you start developing a big snap I'm not going to tell you but you know you're going to modularize your code you're going to have a lot of files with a lot of modules but uh really the the only important thing is that your code if you need to expose an RPC API is going to your index.ts file is going to export a function called on RPC request this is how we know that you want to expose an RPC API and this is the when when I clicked on send message earlier and it popped up this dialogue window this is the code that pops the dialogue window right it's a it's we have a global snap object with a request function and we have a DI snap dialogue function and there's many types of dialogue there's confirmation there's a prompt dialogue all sorts of types of dialogues everything is very well documented in our documentation which is linked at the end of this presentation and uh all right so let's just make a little change here okay so uh I'm going to I'm going to assign this to a variable I'm going to say result equals a wait and then I have to make the function a Sync here and then um I'm going to just console log the result and then I'm going to return it okay so we can see what's the result of the of of doing a dialogue and I'm going to say result and then I'm just going to return true here and and uh I don't know why it's bothering me uh okay well whatever it doesn't matter I I like to do lexical declaration in case blocks I don't care uh I will just disable the rule later but this is not going to prevent anything from happening so so we're changing the snaps codes first thing you can see is that the snap code was rebundle automatically in the in the terminal output you can see that it was rebundle automatically but I still have the old version of The Snap installed in my in my browser right so I have to reinstall the the snap how do I do that very easy we have a reconnect button that we made available to you all it does is it just reinstalls the snap so it's the same thing again maybe there's some new permissions you know so we still need to show you this dialogue and then I click install and I have the new version of The Snap with the console log that has that was just installed now okay so we still have this uh this other developer tools that is running here and now if I click Send message and we still get this dialogue confirmation dialogue window so let's say I click reject for example and then we should we'll see here a console log coming from the snap and it says result false so this is the result of uh bringing up a confirmation dialogue and clicking on the reject option and you can imagine that if I click on the approve option instead then I'm going to get somewhere result true right here so this is how you debug a snap right you just put console logs anywhere you want and then you open the background. HT ml developer tools window and you can see any errors you can see stack traces or anything you want so far so good no questions amazing I love that all right let's keep going so we know how to create a snap we know what are all the supporting features of snaps what do we do next well now you can start haing on snaps so let's talk about our bounties we have $10,000 of snaps bounties available in total in consensus we have $20,000 of bounties I'll talk about all of them later but for SNAP specifically we created two bounties for you one of them is you build any snap okay we don't even want to limit you just build anything you want make sure it's in Innovative make sure that it's functional that it works that we can test it once you're going to submit it to us and present it but you can do anything you want add a new blockchain add three new blockchains if you want I don't care the more the more you do the better increase safety by adding some transaction insights we have some really good apis for that decentralized identity communication we have a snap called wallet chat that does wallet to wallet communication it's really really cool and it has notifications built in so impress us the sky is the limit really we really want you to build something cool yes [Music] okay the question is can you create an account abstract account abstracted account inside metamask and use it as any regular metamask account okay soon very soon I cannot wait I cannot wait to come to a conference and to be able to tell you yes we have this available okay uh we have the accounts team at at metamask that is working on an API called the accounts API for snaps today it's available but only to create like MPC accounts or other kinds of like custom evm accounts that are fully plugged into metamask and like you said you can connect them to Unis swap you can do it they're fully fully integrated in metamask soon this same feature will allow you to create 4337 accounts that can return a user operation and we will submit it to a bundler and everything will be magic and it will work perfectly and I cannot wait for this feature to be live but we know we we need to put Security First and these things take a lot of time but today you can still create account abstraction snaps but they will be a little bit less integrated thank you [Music] Colin is is it is it worth it to build an account abstraction snap right now since it's not going to be fully integrated into metamask because likeing I understand I would say that it's still worth it because a lot of the logic that you're going to use is still going to be reusable once we Implement that feature directly into metamask another reason why I would say that it's worth it is because you're going to be one of the first to be doing this right so once we do have account abstraction available inside the accounts API you know a lot of eyes are going to be on you because you're going to be at the Forefront you're going to be developing something that nobody has developed before for so I would say it's worth it you know and if you're doing it especially for the hackathon that's going to impress the judges so three things that would tell me that it's worth it question is this this bouny is for the eth istambul eth global istambul hackathon at every hackathon we have different kinds of bounties but this one is for this one is for this hackathon all right and the second Bounty I have five minutes the second Bounty is not about building a snap we have a lot of snaps already available like I mentioned on snaps.

metam mask. and a lot of them are interoperable they're composable right you can create a Dap that uses an existing snap like we have a Masa snap for creating decentralized identities we have a the Stark net snap salana snap and you can build a Dap that is using one of these snaps all your dap needs to do is install the snap just like you have in example dap and then you can start building a Dap that's doing I don't know nfts defi that's using uh Solana or whatever and you can use one of those snaps to do that and you can Win $5,000 if you are able to impress us with shutter Bounty I have a list of all the snaps here that are that are um that are useful to build upon and there's a lot of them and they're also listed in the official bouncy text on uh on the eth eth global Istanbul website question yeah last time I Che add that's correct so the question is or is a snap a snap I showed earlier is able to derive private Keys you can derive Bitcoin keys from the seed phrase of the user and all that but we do not allow derivation of ethereum keys right ethereum is coin type number 60 in the in the slip 44 uh specification and we don't allow that because that would be deriving the same Keys as metamask and for the moment we deem that to be a security issue so unfortunately you're not allowed to derive the keys for coin type 60 pardon what's the yeah yeah pretty much that's that's exactly what you would do you would create a new address and show them that this is your your your public key they can export their private key if they want to and I don't have a lot of time left I will I will be available later if you have more questions but uh there's a bunch of resources I'm not going to go through them there's videos there's links uh I will put the QR code again if you want to see it so you can uh so you can go to them at zad MTL is my Telegram and I showed you earlier the telegram chat for uh for us yes the this QR code and uh what else okay so we have a bunch of other bounties right consensus is a big company we have a lot of products available one of them is the metamask SDK which allows you as a developer to put up a QR code for the user so that they can connect their metamask mobile to your adap very easily and with a very very fast connection it's actually a little bit better than using wallet connect and we have a $5,000 Bounty where all you have to do is use the metamask SDK inside of your dap and the last one is a linear Bounty right Linea is a evm compatible Layer Two for ethereum and uh you have $5,000 Bounty all you need to do is deploy your D on Linea okay you can deploy it on any other L2 I don't care but if you deploy it on Linea you can be part of our Bounty right the fact that it's an easy Bounty means means that you're going to have to impress us with the quality of your project obviously and all of our team is going to be available to help you with that we have Colin our director who's wearing the blue hat in the back that's Colin and uh Eric is not here we have Lauren who's sitting right here that there's me also my name is zad and our booth okay is like the easiest to notice because it's the biggest and brightest and shiniest Booth it has a big TV and it's all the way in the corner in the back of the of the hacking area so you come to see us if you want to chat if you want to talk about bounties about l2s about anything you want related to web 3 or not web 3 and we'll be happy to uh to give you some swag and and to talk to you and I want to thank you very much for being here with us today happy hacking and have a good [Applause] time