Introduction to Metamask Snaps – Erik Marks

good morning so I am Eric Marx I'm a developer at Metta mask working primarily on our plugins system and I am here to give an intro to that for all of the hackers in the room for those of you that have seen our talk at Def Con in October or if you used snaps to hack at East Waterloo perhaps this will be probably familiar material for you but nevertheless we have some announcements at the end as well for bounty bounties and so on but in any way to start off meta mask snaps is our plugin system which allows at the etherium community to build plug-ins for meta masks and execute them in and create scripts that execute in securely inside the meta mask background process using secure echo script in plain English you can extend the functionality of meta masks without involving us or making a PR yeah and so to start off I just want to show a couple of things so we have a community a telegram channel and I'll show this again at the end if you want to all right there we go yeah so we have a community telegram channel and we have our two repositories the meta mask snaps beta and okay we're gonna we're gonna give this a shot yeah so I will show this again at the end but in any event we have a telegram channel that you can join to waste no more time I just want to get in dig into real quick how you get started building a snap using the command-line utility we created for that purpose so I'm just going to do a quick run-through of that to give you an overview of how it works and the flow for creating a snap will be familiar to most of you and we have this command-line utility mmm snap and alright that better okay and so the flow will be familiar to many of you a snap is effectively like an has the same format as a node package and so we call this a knit command and it will just walk you through sort of the normal NPM init flow creating an index top JSF Achatz JSON and so on then we have an extra flow at the end where we add as sort of the information that snaps and that metamath needs in order to identify this as a snap and so we are going to use the default values but I'll just show you anyway we have a local port for where we're going to host it when we develop an output directory and initial permissions and we'll get to what that means in just a second so and we got the we see that it succeeded and so I'm going to start up a couple of other commands as we go along here I'm gonna watch for changes and it will rebuild the plugin source code and I'm going to serve it locally as well right so now going over to Chrome if i refresh we have this very beautiful front-end visible for all of you and I have the snaps beta version of meta mask loaded here I'm sorry that that's kind of small but it's basically it's the same at meta mask you all know except we expose a couple of buttons for the convenience while developing as snaps in this version and so the first thing we're going to do is we're going to hit connect here and we're going to get this prompt that first asks for permission for the dap to install and communicate with snap identified by the URL where we're hosting its package.json file and so we're gonna approve that and then we get a second prompt where and this is the snap asking for permission ad to show alerts over the current page and we're gonna go ahead and click as OK for that as well now this is the hello world snap so it has a single method and we can call send hello and it says here too small to read probably but hello local host and so what's the big deal with that but the big deal with that is if we go back here and open the you can open the index.html file and we'll see it has like the buttons and all that stuff that you'd expect but here we construct the URL where the package.json file is hosted and we and when we click connect it requests the the DAP requests permission to speak to the snap and then meta mask fetches it and installs it and here we have the method that calls the snaps method which is this wallet invoke plug-in method which in turn takes a parameter which is the snap that you're trying to talk to and then like a normal RPC request object and if we look at and if we look at that inside the source file for the plug-in we see that it's only ten lines long about we register wallet is basically madam as aetherium provider API that you know from it like that's with some extra functionality including this register RPC message handler that will written so this we call this once inside the snap source code and then you define how to handle the various method that your snap has so basically what this allows you to do is it allows you to extend the functionality arbitrarily extend the functionality of the meta mask in-page provider and with snaps you have obviously you have memory state you have a persistent state and you can extend our in-page provider with any RPC method you want and people have used this for a variety of things including to start where have a plugin where they run their cryptography inside of meta Mask using snaps we had people who created at East Waterloo at Deadman switch account using snaps and so here we see that this hello method that was called from inside and it says hello origin string and since we can't really see the result on the screen unfortunately I'm not going to change this but that's like how the what the method looks like and that's basically the gist of it and what you need in order to start building and I'll go back real quick to this preview here and reiterate that the community Telegram group is will be the best way to like find us and communicate will be on site the entire weekend we have a helpdesk shift at the consensus table at tomorrow from 12:00 to 1:30 p.m.

we'll be there and we'll be happy to help you with any mandamus related questions that you bring to us at that time and you can always try to ping us through telegram the reason we're using telegram if you're not a fan of that you can complain to Pat from our died who created that channel and four and one last thing for those of you who are interested in making custom account so trying to add contract accounts to meta masks or some extra functionality related to accounts there are I encourage you to look at the custom accounts branches of the snaps beta and snaps CLI repositories where we have added api's to meta masks that expose that allow you that allows snaps to add accounts and manage them and finally I just want to just like at East Waterloo there is there is a snaps bounty and at East Waterloo have one of the grand prize winners took home that as snaps bounty as well so I highly encourage you to take a look at that on the bounties page and that is basically it for me if you have any questions I'll be over by the green room on the side of the stage and you can feel free to reach out now or any time over the weekend thank you so much [Music] you