Providing transaction insights with MetaMask Snaps with Ziad Saab

metamask snacks before we get started okay we were all doing something different before coming here so one thing I really like to do feel free to join me I'm just going to gently close my eyes and take two deep breaths so that we can all come into this room together hi all right great now that we've done that we can we can get started the presentation that you're looking at right now is a business presentation like it makes a a business use case for metamask snaps I didn't even write it it was made by my colleague Christian Montoya I just literally copied it and like slapped my name on it but we don't have a lot of time for this Workshop right we barely have 30 minutes so I'm not going to go through this presentation I want to do a demo of how to build a snap with you guys it's a technical Workshop so I will summarize the like 60 slides of this presentation very quickly in one minute just so you know what we're doing and then we'll get started okay so I'm going to tell you a little story two days ago I was at the Biddle Hub I was sitting down at the metamask table we had like our logo so a lot of people came to see us and I heard like about three times people saying like oh I wish metamask built this feature or I always metamask would have this this chain integrated in the the wallet and all that and they were all valid use cases for for for a wallet but you know we just don't have the time or resources to build all of that stuff and you know you never hear anyone say like oh I wish Apple had built like this uh this virtual reality like makeup app for the iPhone or whatever because any developer can wake up any day they can learn like Swift or something and then they can just build any app for the iPhone and like that's what snaps is you can any developer with snaps can learn JavaScript or already knows JavaScript and you can just write some code that has access to some privileged apis without us Ever Lifting a finger you can Implement a new protocol there's a Bitcoin snap that you can use today and a developer preview of metamask it's called flask and there's a stark net snap there's a lot of plugins that are already created and today I want to show you how you can create your own plugin okay so with these metamask snaps you have access to apis such as being able to derive private keys out of the user's wallet with their permission you have access to see all the transactions that the user is doing and give them some extra information like enhance the transactions you can send notifications directly into the wallet you have access to a lot of apis and this allows you to build some really interesting Integrations around account abstractions or Communications or identity and today we're going to be building a transaction inside snap together that is a snap that is going to add some user interface inside the metamask UI and give some useful information for any transaction that I make inside the metamask and the way that I've set up the workshop good news you don't have to use your laptops or anything I've set up a git repository which is linked at the end of this presentation so you can if you want you can QR code this will link you back to this presentation and at the end you have a lot of of resources our Discord our GitHub discussion forum and even a link to the workshop that I'm going to give so I'm going to give you a minute to do that and stow away your phones when when you're done and the workshop that I'm giving is set up on GitHub so that you can really follow it step by step there's like one branch for every step that I'm going to be doing so you can safely you know like you don't have to like follow or try to do it as the same time as me I I really set it up well and I tested it with uh with a with a bunch of people so I'm going to be demoing how to create a snap from from scratch but before we do that I would like to look together where we're heading by the end of this Workshop like what are we going to have built together I think it's very important to to know where we're going so you'll notice that in my browser here I have metamask and it looks purple this is metamask flask it's the developer preview of metamask and today you can actually use snaps inside the the developer preview so you uh you cannot use it at the same time as the regular meta mask so you have to create a new browser profile and don't use your private keys where you have all your good stuff because this is a developer preview and as much care as we put into it things can sometimes break I'm going to make a transaction here I'm going to send some eth to someone and by the way if you need some girly eat to you're developing something like I can just send you some just contact me on telegram or something I could I have already like sent to a bunch of people so I'm going to make a transaction I'm going to send some if here between two of my accounts whatever and I'm gonna send let's say 0.001 if to an account and when I click next here I'm going to have an extra UI element in the metamask window that you don't have if you have metamask today you will not have this and even if you have metamask flask you will not have this until you install the snap which we're going to go through very very soon and if I click on this tab I'm going to get some insights on the transaction that I'm about to execute it's going to tell me in this case that this transaction if I go through with it I'm going to pay 16 in gas fees you know so I might want to think twice if I want to really make this transaction or not and we have a lot of developers who have built really interesting things inside this UI where they show you the reputation of the smart contracts that you're interacting to and even some people have done like machine learning on the source code of the smart like you can do anything you want because we give you the transaction object you do any custom logic you call any apis you want and then you return a very pretty custom UI Ai and the user can then get a better user experience and even maybe more security out of their wallet if you have any questions at any point feel free to raise your hand it would allow me to like also take a breath while you're doing that and if not I'm just going to keep going through this step by step so this is what we're building up to today um and uh well the first thing I'm going to do is I'm going to remove this snap from my metamask this way we're going to be able to really do it together from scratch and it's going to allow me to show you where you go to see your all your snaps so you go in your regular metamask settings and we have a new section called snaps if you are using the flask developer preview and in the snap section we will see that I have one snap installed this is the one that enhanced the the transaction that I was making earlier I'm simply going to go here and I'm going to remove it from metamask so that I can go through the process together with you step by step so how do you create a snap you have to run two commands from your terminal I'm actually working right now on a tool so that you only have to run one command you're going to be able to do in the very near future you're going to be able to do like a yarn create at metamask slash snap just like you can create a react app or something but today you have to run two commands you have to install globally our CLI like learn Global ad mm snap and while this is running I want to show you by the way uh oh it's not called mm snap it's called at metamask slash snap CLI and while this is running I want to show you by the way what I'm doing in front of you live right now uh is all of it is inside this Workshop that is linked at the end of the presentation so I'm really basically just I just showed you the demo and now I'm like following the steps like really step by step sometimes I'm going to even copy paste code from my own Workshop so that we can go a little bit faster and I still see no hands up so I'm I'm continuing to to move forward with this so now that we've installed the snaps CLI we have an mm snap command that was installed globally again you won't have to do that in a week or two but for now you do and we can use this mm snap command to create a new snap just like you would do a react application so I'm going to call that hello snap and what this is going to do is just going to clone a template from GitHub it's going to install the dependencies with the with yarn and then it's going to run through a build process of the snap just to make sure that everything is is going correctly and once the template is downloaded then we're going to see what we get okay so this is the first step I'm going to do with you I'm going to show you how to run the dev server and how to see the result of what you get where this way we're going to get like a very tight feedback loop on everything that we're that we're doing so the project was successfully initiated and I created it in the hello hello snap Workshop so now I'm going to Simply switch my vs code to the hello snap directory and that's it you've just created a snap that's the end of the workshop you can go home now all right no I know I'm it's not it's not the end of the workshop did you have a question though okay he thought it was really the end of the I mean you can go home if you want but like I suggest that you stay because now it's the fun part but really like what we give you is a full snap project okay you have uh here uh yarn workspaces project so inside of it you have two packages one is a site which is basically a react application like adapt and we give you that so that you know how to call the snap functions how to how to actually get the user to install a snap all of that code is a is in a react app you don't have to build with react but that's what we give you and then the second package is the snap package which has an entry point just like a regular most regular node projects it has a source index.ts where you will be able to implement all the functionality of your snap and we're about to do that very shortly before diving deeper into the code I want to show you the output of what we give you when you get started I'm gonna run from the root of the repository I'm going to run yarn start the dependencies were already installed for me when I initiated the pro initialize the project so when I run yarn start it's going to run two development commands one of them is going to be the dev server for the site for the react Gatsby application and the second one is going to be for the snap so that snap while you're developing you're going to also get a bundler that automatically like rebundles your code just like a hot reload of a react application and in production when you want to ship your snap to real users you're going to be shipping your snaps on npm so they're going to be bundle they're going to be built locally and then you can simply publish them on npm and the process to install them is is the same we're going to be looking at the code for that very shortly the dev server for react is running on localhost 8000 so I'm going to open that right now and what you get is a template that you can use or not use but at least you have the code in it to to do what you need to do I opened it in the wrong browser so I'm just going to open it in the browser where I have metamask flask installed notice that we also give you the the proper react hooks by the way that you can see that here in this browser where I don't have metamask flask it prompts me to install metamask flask so you can reuse that logic in your own in your own app and here I have metamask flask installed so I'm going to get a very familiar connect button your web3 users are already used to having a connect to metamask button and the only difference here is that rather than asking them for their accounts when they click on connect we are going to be asking them for a permission to connect to a snap and you can see here that the snap that is being connected to is has an ID Here Local colon and then some some URL that's because the snap is being developed locally on your machine when you go to production this ID here will look more like npm colon and then the the name of your package so that users are more easily able to identify your snap so I'm going to click connect and here you will see the permissions that the snap is requesting so the basic snap that we give you is not a transaction inside snap it's in a snap that exposes an API and that just pops up a dialogue just so you can have some basic functionality so the snap needs to display dialogue in Windows and metamask and it needs to allow websites to communicate directly with the snack which shows you that a snap can expose its own RPC API so I'm going to approve and install the snap and once I do that the UI refreshes automatically and now I'm going to be able to communicate with the template snap that is given to me by clicking the send message button the send message button is going to defer to the global ethereum object just like you would do with any any web free function but it's going to call a function called invoke snap which is going to wake the snap up call one of its RPC methods and this dialog that you see here is being popped up inside of the metamask sandbox by the code inside the the snap so far so good great so it doesn't matter here if I approve or reject but in the in your code you're able to get a Boolean and you'll know if the user has approved or rejected and then you can run some logic based on that so now that we've seen what the basic snap gives us let's quickly walk through the the code to do that did you have a question yeah you no Oh I thought you were raising your hand all right okay uh cool so first step what happens when we click connect to metamask well there's a button in the in the react code and what this button does I'm going to try to you know try to find it and show you the the API that it calls because for most of the what we're doing here we're going to be working in the snap directory so I just want to show you very quickly what happens when you when you when we clicked the connect button there is a a call that that's made to window.ethereum and it's called wallet request snaps and you pass it to snap ID the snap ID is like that local colon whatever that we saw earlier and that's pretty much all that we're going to look at inside the the site directory for from now on I'm going to be focusing on the snap directory and I'm going to be modifying the snap so that we can get what we want to do which is display transaction insights inside the user's metamask so that's how you install a snap all right now that we've seen that I'm going to switch to the snap directory and I'm going to look at the index.cs which is the entry point of the snap what is this snap doing it's basically doing two things it's importing a bunch of dependencies and it's exporting a method or a function called on RPC requests this is the function that we want you to export if you want to expose an API to your snap okay and very quickly how is this API called by by adapt there is a function called invoke snap that you call that's in the we're calling it in the react code and it's the same thing you do window.

etherium.request invoke snap you pass the ID of the snap you pass the request with a method and some parameters if you like and then when this uh when when this function is called it's going to wake up the on RPC method of your snap where you can have access to that request object and do whatever it is that you need to do and in here well what we're doing right now is we're popping up a snap dialog so what are we going to do with this code where we're going to delete all of it because we're not implementing an RPC API in our snap we're implementing transaction insights so I'm going to delete all that code and I'm going to add some new code to implement the transaction insights before doing that I'm also going to go in the Manifest file for the snap this is a very important file that you should be aware of it's called snap.manifest.json and it contains all the metadata about your snap so the name that will appear in the snap installation window there's a you can you can put a description and so on but a very important part also is the permissions that your snap is requesting the template that we give you is set up with a snap dialog permission so that it can bring up dialogue and it's set up with an endowment RPC so that the snap can expose that on RPC request method and get some requests from dapps so what I'm going to do here I'm going to delete these two because we are not exposing any apis and we're not bringing up any dialogues and I'm going to add the permissions that are going to be necessary for me to do transaction insights there is only one and it's called endowment colon transaction Dash insights okay and now I'm gonna simply save this file and before doing anything else I'm going to go back and get that quick feedback loop I'm going to go back to my dap and I'm going to reconnect the snap okay so every time you make a change to your snap whether it's the source code or the Manifest you go back and you have to reinstall the snap and one difference that we will see is that I didn't put the the permission properly so I'm just going to follow what my workshop is telling me instead of trying to to do it by hand and oh it's transaction insights without an S so I'm going to just remove that s right here and then we're going to go back and reinstall the snap and when I do that you will see that the permission has changed and it now says that this snap wants to fetch and display transaction inside so again a very clear communication to the user about what this plugin is doing I'm going to approve and install and the next step is going to be now that I have the permission for transaction insights I'm going to have to implement the on transaction method which is what the snap will call whenever there's a new transaction in metamask so I'm going to export a a const called on transaction and it's going to be a function that will receive the transaction and it has to return a custom UI which is a set of components that we give you to build this panel with the heading that we saw earlier I'm not going to write the code from scratch I'm just going to copy it from my workshop and then we're going to go through what it's doing step by step so I'm exporting an on transaction function and it receives a transaction object and then what I'm doing is I'm just console logging the object so that we can see what it's made of what Fields it contains and I'm returning an object that has a Content field which is composed of some UI components that we give you so you notice I'm importing these components from metamask snaps UI and then I can compose them as much as I want there's panel there's heading there's text there's one where you can have a copyable field so the user can easily like copy a text that you give them and so on and so what this will do is every time I make a transaction in metamask and I switch to the new tab that will be added in the transaction I will have a console log that will appear in my Dev tools and I will get some a panel that will show this this basic string here and then the last step will be to just change from this basic string to showing the gas percentage fees like we saw in the demo earlier so I'm going to save this and I'm going to get my quick feedback loop again I'm going back to my dap I'm going to reconnect the snap we get the same permissions because we didn't change that but now when I go in my metamask and I make a transaction what's going to happen is I'm gonna get that new tab that will appear in the transaction window and in that tab is going to be the text that I just displayed in my custom UI the only problem is if I open my developer tools I don't see that console log of the of the transaction object does anyone know why like there's a console log and clearly the my code is being called but I don't see it yeah exactly the console log happened inside the extension so if you don't know how to access that it's very simple in my case I have metamask here pinned at the top of my UI so all I have to do is right click and go to manage extension I want to make sure that developer mode is open here in the top right corner I want to make sure that it's on and I'm going to click on The background.html View and it will pop up right here and so what I'm going to do is I'm going to go back to that transaction that I was doing earlier and I'm going to try to make the transaction one more time and as soon as I switch to this tab this is when the on transaction callback is called so the user has to want to see your transaction insights you don't just get automatically access to all transactions but now that I've switched here we see in the developer tools of the extension that the transaction object was printed and you can see all the fields that you have access to in here you have the from the two you don't have the nuns because the transaction is not official yet and you don't have the hash of course because we didn't sign the transaction you get the transaction before it's been approved by the user so you get still a lot of very useful fields and in our case we're going to be able to use these fields like the max fee for gas and all these fields to figure out what the percentage of the gas fees that the user is paying okay so that's pretty much what we're going to be doing from now until the end of the workshop is just building from that example up to having the the final result of showing the user the percentage of gas fees that they're going to be paying if they do their transaction and at any point if you have any questions feel free to raise your hand if not I'm going to keep going yes yeah so the the user has to click on your tab and then your your extension will be woken up and then you're they're going to be able to see the results there's no way to catch their attention more than that with what we're building the way that it's built right now right snaps by the way are still in developer preview so things are still being you know uh changed and we want to be able to add also new features so uh we're looking for feedback also from you guys who are building these kinds of plugins to know what's going on right so Discord my telegram my Twitter anything you know just get our attention and we'd like to know you know if you're building something and you feel like you're missing something we like it doesn't mean that necessarily we will do it but at least we want to know about it so that we can be in a better position because we're doing this for the for you guys yes so maybe it's similar question but basically do you have deep uh linking support so for example can I create a link that will lead to my tab to my my so much Echo like I'm really having a hard time basically support myself so your your snap is an npm package right when you put it in production it's an npm package and something has to call the wallet and tell it to install the snap right so you can you can create a link to adapt and rather you know when we earlier we click the button and it installed the snap you could run that code without anyone clicking the button you know you could run that on page load and then there's going to be a pop-up to install the snap but your snap is not in any directory we don't have like a app store or anything like that for the snaps you know maybe some the community will build something or but but your snap is only published on npm and then it's up to for the moment it's really going to be up to you to build adapt that will connect to the snap to metamask does that answer your question okay I understand that's good feedback you know I don't think it's possible today but uh send me the question again on because I can't write it down right now but suddenly it's connected with me on Telegram and like I said we want like all the feedback of the world you know so just tell it tell tell us what you feel would be important for you and I will make sure to convey that information to my team and keep you in the loop about it was was there more questions all right I don't think I have a lot of time but I might not I have two minutes okay so just want to show you one more thing and we're not going to go through the whole process you guys can do it it's like basic math like get the gas fees multiply by the transaction value and show the percentage but I just want to show you one thing since I only have two minutes and there are no more questions if you want in inside your snap code you can access the ethereum provider just like you do in uh just like you would do in a regular dap you can and you don't have to do window because there's no window in the snap so you can do ethereum.

request and you can you can like get the like for example for for this implementation I would need to get the gas fees like the current gas fees so I would have to request the method like eth gas price and one thing that a lot of our developers have been having trouble with in the past few days is uh that they they try that or they try to make a call to the network like to call an API or something and then uh they it seems to not be working so the last thing I want to mention is that manifest file okay everything you want to do in your snap you need to have permission for it by default your snap is in a sandbox and it can't do anything okay so if I want to do like if I try to do that ethereum.request here it's just not going to work because um because I don't have access to the ethereum provider so it's actually as granular as having to go back to my snap dot manifest and adding a permission an endowment to access the ethereum provider and only if I do that will I be able to uh to access the network there's another one for network access but you know I'm not going to go through everything I only probably have 30 seconds so docs.metamask.io snaps and then our Discord and everything is in the presentation so if you haven't got it yet this is the QR code to the presentation there's a lot of links to all the resources that we have for snaps and feel free to reach out to us let us know what you're building let us know what you need and thank you very much for coming here for your attention for your questions and have a beautiful rest of your conference rolling [Music]