MetaMask 🛠 Snaps Workshop

foreign [Music] today we're here to talk about metamask snaps we have a bunch of bouncies for you so this is very exciting we also launched snaps about one week ago I'm gonna tell you a little bit more about that but first about myself my name is Ziad I am the developer advocate for metamask snaps you can find me on Twitter Instagram all the social media Ziad MTL and before we get started this is a QR code for this presentation and if you're hacking on one of our bounties for metamask snaps you're going to want to get this presentation because it has all the resources that you're going to need in order to get started hacking with us very briefly let's talk about metamask metamask is the most popular self-custodial wallet 30 million plus users I'm very proud to work for metamask I have a beautiful colleagues and we're doing some great stuff for web3 it was released as a browser extension and it lets browsers connect to ethereum compatible blockchains but not just ethereum as of September 12th metamask is now able to do a lot more things thanks to snaps Snaps are add-ons for metamask they enable the addition of new features to metamask and you can develop those features anyone by using our apis and we're going to see how to do that in this Workshop you build snaps with typescript or JavaScript source code ideally type Scripts and your snap your JavaScript codes runs in a secure sandboxed environment so that you can only do the things that we allow you to do and that the user of metamask allows you to do once you're done developing your snap you publish it as an npm package anyone can install it and they can do a lot of things with it like what well yeah we launched on September 12th so what can you do with snaps first you can add non-evm chains to metamask that means you can own Bitcoin inside metamask or Dogecoin or any other coin that you want you can increase the security of the wallet by providing the user with transaction insights telling them that a transaction is maybe not safe based on some algorithms that you have or some proprietary information that you have you can add distributed identity features to the wallet you can add communication features to the wallet and there's a whole bunch of other support apis such as networking Secure Storage custom UI that you can use as a support to build all those features that you're building and there's a lot more on the way if you looked at our bounties which I'm going to present in a moment you will see that we're already starting to develop more features just as we have launched so what are some of the things that people are building with snaps well if you go to snaps.metamask.io today you are going to be able to download and install in your metamask browse the new metamask extension 35 different snaps the biggest category is interoperability we have a cosmo snap we have a Bitcoin snap we have a leap snap you have all the all the snaps that you see here and all those can be can allow you to manage all these accounts securely from inside metamask the same way that you manage your ethereum we have transaction Insight snaps which allow you as a developer to add some data inside the metamask UI to give more information to the user about a transaction that they're about to make and we also have notification snaps that allow communication features so let's talk a little bit about our bounties before we start looking at a demo for the Youth Global New York hackathon we have two bounces the first one is prompting you to build a transaction inside snap with a V2 that is so new that it's not yet in our documentation so this presentation contains a link to a beta documentation that you're going to be able to use in order to hack on our bounties we also have a bounty for a domain resolution snap this is a feature that's not even live you're going to have to use a special developer preview of metamask in order to be able to build on that bounty and you're going to get all the information during this presentation this is the link to it you can scan it if you want or if you scan the QR code earlier you will have access to it and we also created a developer guide for you especially for this hackathon so that you can get started easily all right so now you're all excited you've seen all the beautiful features that we can build with snaps so how do you get started well it's very easy all you have to do is run one command on your command line we're going to run it in a minute and it's going to provide you with a full repository that contains everything and a fully functioning snap that you can start editing right away so you don't have to start with a blank page and there's one more thing you're going to get need to get set up with a special version of metamask called flask it's a it's a developer preview of metamask it looks exactly like metamask it has a different icon so that you can know that it's a different one and also don't put any live private keys in there that you care about it's uh it's really meant to be used as a separate extension ideally in a new browser profile or in a completely different profile and you can get it on metamask.io flask all right and the rest of this presentation contains a bunch of links for you that will also give you some inspiration that will give you some more documentation about everything that you can do with snaps and that being said now I would like to walk you through what happens when you run that command that we looked at earlier and what kind of code you get and we're going to see how you can use that code how you can debug a snap and we're going to get started right away so the command was yarn create you can also use npm if you like at metamask slash snap and then the name of your snap and I was expecting the network to be a little bit slow here so I've already set up a new snap from scratch that we're going to be using for this presentation here it is and I want to double check how the font size is looking on the screen that you're seeing it's a little bit small so I'm going to make it a little bit larger all right so once you run that command you get a full yarn repository that has two packages in it and a bunch of setup files so very quickly you get a site package you don't need to use it it's a DOT that allows a user to install the snap you can add some buttons to it that will allow you to interact with your snap as you're building and the most important package is the snap package it contains some typescript code as well as some commands that you can use as a developer in order to quickly get started building with snaps and how do you get started building very easy you go on your command line and you run yarn what yarn what what do you think start yeah simple easy just yarn start and what is this command gonna do it's going to run two processes in parallel the first one is a development server that is going to be constantly looking at your snap code and rebuilding it on the fly as you're changing your code and the second one is going to run the site package which is a simple dap that has a few buttons that allow you to install the snap interact with it and and get started it's building using it's built using react and it's very easy to get started with we're not really going to be looking at it today it's basically a react site with some buttons that are interacting with the snap and once the development server has executed you can just go in your browser you go to localhost 8000 and you get presented with a very simple app that allows you to connect with the snap now because I've already connected with a snap before with this snap before the button says reconnect here and this is very important as a developer as you're making changes to your snap the snap gets recompiled immediately your typescript code gets recompiled immediately but if you want to see those changes you have to click this reconnect button so that the snap will get reinstalled with all those latest changes so this is what happens when you do that to ask you for your password I hope I remember my password all right and then you get a dialog that asks you to install a snap this is exactly what your users will see once they install your uh your snap once they interact with your snap and we can see here that in addition to giving you some information about the source of the snap the name of it there's also a very important section here which lists all the different permissions that a snap is requesting a few moments ago I mentioned that a snap runs in a sandboxed environment so even though you're writing typescript JavaScript and it's seemingly running in a browser your snapcode doesn't have access to anything cannot fetch data from the network it it can't do anything and through these permit through this permission system which you set up through a manifest file you can ask the user to do things for example in this case the snap that you get as a template when you get started is asking for two permissions it's asking to be able to communicate with websites which means that your snap is going to be able to provide an API an RPC API that websites and other snaps will be able to use and it's asking to display dialog Windows using this custom UI feature that we're going to look at in a minute so if I say install the snap is going to be installed and then where am I going to see this in my metamask if I go in my settings menu there's an option that you might not have seen before it's now live in the main extension it used to be only in this metamask flask version called snaps right here and under here you will see all the snaps that you've installed and if you go in there you will see all the dapps all the websites that are connected with your snaps all the permissions and the ability to remove the snap if you want to in addition to this the DAP contains a send message button this is a button that is going to be calling a function from your browser from your from this web page using the ethereum provider and this is going to call the snaps RPC API in the example that we give you and it's just going to show a demo of the custom UI features that we have in metamask snaps so when I clicked on this button the DAP securely communicated with the snap through its RPC API and inside the snap code we're using the custom UI feature in order to bring up this dialog and whether I click approve or reject is not going to have any effect in this dap but the snap will be able to have access to the response from this dialog it will see whether the user has rejected or approved so if you're building a Bitcoin snap for example and the user is about to make a transaction you're going to want to show them a confirmation you're going to say for example hey you're about to spend one BTC and you're going to send it to this address and then they will have the ability to approve or reject it and based on that you can continue the logic and the asynchronous logic inside your code and decide what you want to do with that so right now it doesn't matter whether I click approve or reject okay we don't have a lot of time so I want to show a little bit the code that's driving what we just looked at so inside the snap package The Source directory contains only one code file index.cs and this is the only file that you need if you start building a more complex map you're going to have modules you're going to have all sorts of files in there but this index.

cs is going to export some functions that are going to allow metamask to interact with your snap the one that we're using here is called on RPC requests this function is detected by metamask and is called every time that a DOT makes an RPC request to your snap very simple and how does adapt make an RPC request to your snap well it has to have the permission for it rsnap asks for a permission to be communicated with by websites and these permissions are located in the snap.manifest.json file which is at the root of the snap directory as you see it's not in SRC it's right at the root here and it contains a bunch of metadata about your snap and the permissions are inside this field called initial permissions so this snap that you're getting provided with asks for two permissions displaying dialogues and the ability to expose an RPC API that only dapps can communicate with in this case Snaps are not allowed to communicate with this snap because this is set to false thank you and so what's in there well in this case it's very simple it's a function that receives the origin of the RPC request as well as the request object itself the Json RPC request and in this case we're doing a very simple switch statement if the method that comes back is hello we are then using the snap Global variable to request a dialogue to be to be printed on the screen this is the the dialogue that we saw earlier it's a confirmation dialog you can set up the content using these panels these text elements we have a copyable field and a lot more coming on the way and this is how you set up your snap and uh in this case we're only returning that value to the DAP that has called us so this is not very useful in this case but with the few minutes that I have left I want to show you something very important that you're going to need as you're starting to develop and debug with your snap what's the what's the most common feature that we use for debugging as Developers console log yeah console log it's everywhere I even have a t-shirt with it so you would think that if you were using a console log inside your snap that the the log would appear in your developer tools right here but it doesn't and so with the few minutes that we have left I just want to show you how to how to debug your snap so that you can more easily get started as you're working on our bounties so I'm just going to change this code a little bit I'm going to assign the result of this dialog request to a variable and yeah the function is only sync and then I'm just going to Castle log that right here and as I do this if I switch back to my terminal you will see that those changes are being recompiled immediately using the snaps bundler and if I go back to the DAP this is where I have to reconnect to the snap those changes that were just built are not going to be detected by metamask right away so I'm going to reconnect the permissions haven't changed because I haven't touched the Manifest file and once the installation is complete now I have the new snap available to me so how do I debug it I just go to manage extension by right clicking on the metamask flask icon in my extensions and you want to make sure that developer I don't know if I can zoom in on this yeah you want to make sure that developer mode is on if developer mode is not on you're not going to see the debugging option so make sure developer mode is on and then you're going to get an inspect views field here with background.html thank you and if you click there it's going to open another developer tools and this one is for the metamask extension so there's going to be a whole bunch of things popping up in there about metamask itself and as you interact with the snap for example if I click approve here then I'm going to get an error that says method not found well let's debug that I don't know what happened but I did get my console log here by the way that says dialogue result true and I think the reason why it says method not found is because I haven't returned anything here so I'm gonna just say return true then I recompile the snap and that's going to take us towards the end of this presentation so this time you get the dialog I click reject everything works and then I get my console log here that says dialogue result false this is about all the time we have so I wish I could have done a full Workshop but what I'm going to do instead is if you connect to me on social networks on Twitter specifically I'm going to be announcing in about a week I'm going to be coding that live on on Twitch we're going to do a full session of coding a snap from start to finish I know it's not going to help you with this current uh hackathon but we have a metamask booth if you go all the way to the end and all the way to the corner you can't miss it it's right in the corner it's a big white booth and I'm going to be there most of the time to answer all your snaps questions to help you with your snap whether it's validating your use case or debugging it with you and I think I'm out of time so I want to thank you very much for joining us today I hope you're gonna be successful developing your snaps and I'll see you at the conference