How to Revolutionize Web3 Development in 20 Minutes - Erik Marks

i'm eric marks i'm the snaps platform team lead and uh my corner of the metamask of the growing metamask organization is responsible for building out at snaps and so for some of you have followed the development of this uh may be familiar but for those of you that have not snaps is uh what we view as the most important feature um for the future of metamask and for the future of web3 application development uh generally and what it allows you to do is uh it provides you with the means to extend the functionality of metamask at runtime at without asking us for permission without asking anyone for permission except for the user and so at the moment we are in a we have a canary release a canary distribution uh of the metamask extension all of the development of the snap system is happening on the um it's simply behind a build flag on our main development branch and here uh if you go uh at metamask dot io slash flask is where you as a developer who's interested in these tools uh will go uh and download it uh but uh without further ado uh i'm going to basically be heavier on the uh demonstrating uh and lower on the talking uh in this talk to go over some of the capabilities uh of snaps uh and uh so to start us off we have uh been working with protocol labs and our good friends at chainsafe and have partnered with them for some time and they have developed the first key management snap for our platform and so a snap is simply a javascript program running in a sandboxed environment inside of metamask and it does not get any capabilities by default and so when i hit connect here uh we are first going to we're going to get a permission request uh from uh this dap that chainsaw ave has built to go along with the snap and we see here that it is identified by this url-like id which is telling us that the snap is a package that lives on npm and when we hit connect we will get a second confirmation and this is from the snap itself and so at this point metamask has fetched the snap from npm unpacked it and has read its manifest in order to display this confirmation uh and if we click here for example we can go to the package listing and confirm that oh this thing it is a thing that really exists on npm and so when we and that's visible good uh and so uh we see here the list of permissions uh a complete list of the sensitive permissions that this snap wants access to so it wants to access the internet uh display a confirmation in metamask store and manage its data on your device but also manage our file coin and test network keys and so what this permissions what these permissions allow uh well we'll ignore the test networks because that's a kind of an implementation detail and but focusing on the file coin accounts this permission will give the snap the entropy that it needs the private key that it needs in order to generate accounts uh for the filecoin protocol from the user secret recovery phrase inside of metamask and so you're basically adding the capability to metamask to manage file coin keys and this works with any um slip 44 compatible protocol that uses bip 32 and bip 44 and so on to generate its keys and when we hit improve and install here we make sure that the user understands that like you're giving key access to this snap but only to the keys that you see in this list or for the protocols that you see in this list and then once that approval goes through in this dap we can see that um i i am rather impoverished on maynet but have some file going to work with on the test network and so all of this this address is a valid file coin address and so is this public key and all of these were generated at with a file protocol labs crypto implementations running inside of metamask uh and i have uh uh know what and i had to do and i have no idea how they work frankly other than that like they are other than that i can't send transactions with them and sign messages and so if i do [Music] this and sign this will sign the message hello east denver at with my private key inside run in the snap running inside of metamask uh in order to end so i can hit approve and then i get a response back and so and that works equally well for transactions uh which i won't demo right now uh but uh take my weird file coin balance as evidence that we have been we have done so in the past uh and more recently we have some uh we have been working with some hackers at east denver uh pursuing some of our uh some of our bounties for snaps and a a capability that we will be shipping shortly uh that we added to the uh east denver branch of the metamask extension is a webassembly and so uh in this particular example which we'll delve into a little bit further we will [Music] like hit install here as well and again we get the permission from the website to let us know that the website wants to uh have the permission to communicate with and install this snap um if it's available uh and here we see that the id is prefixed with local to indicate that uh it is hosted locally on localhost it's not published to npm and also we have added some tweaks to shorten the the developer feedback cycle uh when you're iterating on your snap to make it easy to reinstall and so forth and so when we hit connect here we see that this one also wants to access the internet and the wasm permission is so new that we haven't added a locale message for it yet but this basically this permission effectively provides the webassembly global javascript global api to the snap and when we hit approve and install here we can let's actually take a look at the source code of this thing yes and [Music] so uh this is uh so in this particular example what i've done is i've i pre-compiled a very simple wasm program uh with a single function main that returns the number 42. uh but i know one of right yeah yeah but we know but we have already we have already tested this with uh complete uh rust crypto libraries like with the full like uh javascript bindings and that also works but don't use stdlib because that doesn't work in wasm and so uh in this particular snap so we have the pre-compiled wasa module here uh and when we and so uh in this environment that the snap is executing in uh you'll find a few platform apis so like you don't have a dom uh you don't have like no js api so you need to bring those yourself with some minor exceptions and so we expose this wallet object in the snap global environment which is analogous to our ethereum object inside that you get an adap and you can register an rpc message handler with this function otherwise you'll find the api of that object very familiar and what this function does is it registers a function that allows you to implement a json rpc api that can be called by any dap that has the capability of talking to your snap so the so you can effectively arbitrarily extend the metamask rpc api at using snaps and so in this case we have this initialized wasm which does some you know uh some conv converting the string to a buffer and then calling webassembly.instantiate in order to actually initialize the module and then we have the wasm object available to us and can call the methods that are exposed via its interface uh and we have simply this one for this one function here call wasm uh and which calls the main function uh and if we return uh to our lovely dap here and hit call we see that we indeed get the string 42 and this is in a pr on github you can verify that i'm not merely console logging this and uh and so to see what this looks like inside of metamask itself and so you can see that i'm in metamask flask because of the fancy purple fox and so if we go into if we go into [Music] uh settings here and go to snaps uh oh sneak preview whoa alpha leak uh and uh so we can see we have like both the file coin snap and the wasm snap uh inside of metamask and we can go and we can drill down and see like what permissions they have which sites they're connected to and we can also remove them from this page we can also see that they can be enabled and disabled which prevents sites at any site from starting the snap and communicating with it and we can also see their status here which is in this case the file coin snap is running because the web page is talking to it but the wasm snap is is stopped because we want snaps to have a um aws lambda or service worker like life like life cycle where they spin up to do their job and spin back down uh so they need to be able to stop and start gracefully and in order to be able to uh have a the persistence model for snaps is that they get a there is that permission that the file coin snap has which allows which basically gives it a port a key in our state and a json store where it can put whatever data it wants and um and let's see how how much time do i have yeah ish and so uh in essence uh we are and so we have been working on snaps uh for some time now and and are really excited to have it in production and in front of more developers uh metamask is hiring the snaps team is hiring and we as i said have uh bounties here at east denver and we view this as fundamental to the future of how metamask will grow and encompass more protocols more layer twos more assets and more features for the future and i thank you all for your time and i'm happy to answer any questions