Getting Started with MetaMask Snaps

foreign [Music] I'm Eric marks I am the lead engineer of metamask snaps at this Workshop is called getting started with metamask snaps I realize we have some Wi-Fi ishma since 2018 uh snaps was first announced as a concept uh three years ago at Devcon in Osaka so I know we have we have some returning guests with us today in the room and uh you know since then lots of things happened covet happened 2020 happened but since uh 2021 we've been working on snaps full-time uh at metamask and since the beginning of this year we have been in a developer release via our Canary version of the metamask extension called metamask flask uh and um this Workshop is basically like the sort of snaps 101 how do you get started like developing a snap at using one of the newer apis that we developed um if you read the instructions there's a custom build of metamask to download because we haven't shipped this API in production yet it's coming in the next few weeks um but uh before continuing uh we need to talk a little bit about what is metamask Maps uh and we're gonna and we're gonna start from the very ground level and build up from there and so metamask uh as uh all of you probably know uh is a non-custodial cryptocurrency wallet for ethereum uh you enter your secret recovery phrase into metamask you can derive your at your keys and your externally owned accounts and uh it will manage those keys for you encrypt them with a password uh metamask allows you to interact with ethereum via an RPC uh endpoint by default we use our friends at inferior but you can add whichever ones that you want and that allows you to do stuff like you know send transactions from account one to account two uh the really powerful thing about metamask is that it enables you to interact with ethereum dapps and so that is through our window.ethereum uh provider object that we inject into the web page and that is what all the apps use in order to submit Json RPC requests that are either handled directly by metamask or art contract accounts um what about uh you know zero knowledge applications and non-etherium cryptography so like things that use curves other than SEC p256k1 uh and that's just like a a sample of the things that's being built in ethereum that we don't support out of the box and that you know doesn't even get into Cosmos polka dots Avalanche Solana whatever um in addition to uh to those things and so uh it is uh uh we believe basically impossible and I think you know practically uh like empiric like I observe this I don't predict it it is impossible for any single organization to uh add support to develop the domain expertise to understand all of these different protocols and Primitives and then also to develop the code and maintain the you know unimaginably large code base that it would take to actually create user experience for all of the things that are being built in web 3. and metamask snaps is our answer to this problem and snaps are simply sandbox programs that are run by metamask and their purpose is to create new user experiences in the wallet and that is to say that the purpose is for them to modify the wallet in some useful way and uh the user adds snaps to the wallet at runtime and they have access to special permissions that are not available to dapps including things like key management and that makes them uniquely powerful building blocks for web 3 Developers and so using this simple model just in the past week over the course of eth Bogota and some and a hacker house that uh we co-sponsored uh with uh bit Dao in game seven hackers have developed a CK nullifier snap uh transaction Securities map an account account activity notifications and a smart contract account wallet uh or a smart contract Account Support uh all in metamask all using snaps and uh and snaps currently in developer releases include uh starknet filecoin at Bitcoin R weave and many more and so and here I'll just briefly stop to say that like we're all uh like this isn't a developer release so the reason we keep it in the channel is because we don't it's not quite ready to be pushed for it to be pushed to uh you know the tens of millions of people that use metamask on a daily basis uh but that is our goal in the upcoming year and we'll get to that in a bit uh and so uh we and so we believe that this illustrates that snaps is the gateway to all of web 3. by turning the wallet itself into an application platform only then can we invite the entire community in in order to bring their domain expertise and their passion for uh the specific features and functionality that they're interested in in order to add that functionality to the wallet and make it available to all of their users and uh with that uh we're gonna get started uh so so again uh there's the hack MD link uh for those of you who are able to access that and we're going to start here and we're actually going to I was I was too busy trying to get my Wi-Fi to work uh to clear out all of this stuff but we'll get started here in a second and so uh so as I mentioned the first thing that we need to do is add a custom build of uh metamask flask to the browser and uh my visibility is is the size of like the editor and the text and everything good so far okay yeah please please holler at me if not and um uh the way you add a custom build uh to Chrome uh is you simply uh get your build from wherever uh from wherever that lives and you just drag and drop it in uh your browser needs to be in developer mode uh in order for uh that to work uh so and be advised that developer mode like exposes your extensions to certain kinds of malware so you know don't put your uh don't put Main in developer mode and we're just going to go through onboarding here super quickly foreign for that and Wi-Fi permitting we should be good to go okay yes all right so now I've set up a version of flask and so the only thing uh you'll notice that's like immediately different with flask is that the onboarding is slightly different and we have a purple Fox to distinguish it from the uh regular Orange Box and uh the next thing we're gonna do is I've already done this but uh the next step is to create a new GitHub repository using the template snap mono repo so this uh monorepo is as a template that contains two things a uh two or two sub-repositories or packages a website and the actual snap itself and things are yeah they're kind of loading um but um once you've pulled that down uh and run yarn install we can see here that should still be good that we have in our packages we have the website and the snap and I'm just going to make sure that we've installed and everything with that is good and then we're gonna kick things off by running yarn start which should hopefully not need too much network access great thank you and so this is the uh template snap interface and so you see we have it we have everything hosted on localhost and the first thing we need to do is uh connect to our snap and so first uh when you install a snap you get a permission request uh from the website that that made the request and it's basically saying hey I have the website at this URL wants to talk to at this particular snap and during local development Snaps are just identified by the localhost URL where they're hosted uh just out of uh convenience and once we've accepted that permission request then metamask will go and fetch the snap source code and it's manifest and then ask for its permissions and so here we see that this snap again identified by its localhost URL that wants to display confirmations inside of metamask and we're going to say okay to that and to try out this functionality oops excellent that's it that's it folks a snap a snap everyone get a look get a look it's showing a confirmation oh goodness yes yes yes okay it's real yeah yeah so so what happened here uh is I was gonna do a little I was going to mess around with this notification a little bit but uh or confirmation rather but we're not gonna do that so this is just a dummy notification for display purposes and we're gonna skip right to the source code and look at like what is going on and what is the anatomy of these things and we're going to reject that and that's totally fine uh uh and so if we go in back here uh and if we look at uh see we have packages snap we have you see we have like in the snap package uh there's like some regular like npm stuff going JavaScript stuff going on uh but you also see that we have a snap config and a snap manifest and then a source file and then the source file is just index.ts and so looking at the Manifest here uh you're gonna see that there's a version which you may have noticed matched what we saw in the application and then we have some information about the source so a sha sum of the bundle uh and uh some other like metadata if we were to publish uh the snap to npm which is our currently supported uh like distribution mechanism and we have plans for others and then finally you have the permissions here and snap confirm is the actual RPC method uh that gets called by the snap in order to display a confirmation inside of metamask and if we actually look at the snap source code you see here that it exports a this on RPC request uh Handler function uh and uh basically the way that looks the way that looks from inside of the website so this is a file from inside of the website uh you will call this it's an RPC method inside of an RPC method uh so you have a wallet invoke snap and then you pass it the ID of the snap and then the request that you want to pass to it and you see that the method is hello if we go back to the snap that is the only method that we support and that just causes this uh confirmation to be displayed now if things uh like continue working a little bit better than they were doing some minutes ago uh we're going to take this uh snap and turn it into a transaction Insight snap and if we briefly return here so we've basically we've demonstrated like we've gotten a snap running and now it's time to like replace its confirmation permission with this uh transaction Insight permission and all that this permission does is it tells metamask uh that like oh this snap wants to provide uh transaction insights uh and in order to uh do so we're just gonna nuke the contents of this file and then we're going to go ahead and import some other stuff namely on transaction Handler we are going to uh add a package called uh utils and we're going to import some stuff from that and then we have this Handler that we need to specify on transaction and that is going to be foreign that looks something like this and right now it's a sad function because it's not returning at what it needs to return to satisfy its type and we're just going to return some like dummy uh a dummy Trend a um a dummy insight for now and I think we also need it to be async yes okay and we're also just going to add a little bit of validation to make sure that the transaction is of a type that we can understand because like you know we're writing a specific Insight snap that that uses our particular domain knowledge and so we need the transaction to look at a particular way uh so if it's not an object or if it doesn't have the property data or if the data is not a string then we're going to say oh actually we're going to do this first oh wait no foreign and then we're gonna say we're going to import this we're going to import this a little warning for sanity in case I make any typos here foreign [Music] and we're gonna hide that and then we need to make some modifications on the front end as well uh and on the front end as the front end is just a react application written in typescript nothing fancy going on there uh although it certainly looks fancy um and I'm going to snag a little snippet here with some useful constants that we are going to use because right now our problem is that uh let's see where do we have send flow when we click on the um on this button here uh it is going to call this Handler which is going to call Santa hello which calls this hello method and we don't even have an RPC Handler anymore so that's not going to work so we need to delete that delete this and then at rather than doing that we're first going to grab some accounts because we need access to the user's accounts in order to send a transaction I do need an await thank you sir foreign we're just going to throw an error thing fail to get accounts actually that should even request if it rejects but you know never hurts to be defensive uh and then once we have done that we are going to then we have an account and then we're going to just send a transaction uh and we're gonna do again method East send transaction we're going to have some params that should be recognizable to many of the fine folks in this room so we have a from address the to address is going to be uh the address of a contract that is in fact deployed to mainnet but that will reject any transaction that we accidentally sent to it I just happen to know this to be the case uh we're not sending it anything in terms of value and then the data that we're going to send it to start with is just going to be some dummy uh like 0x1 and that is basically all right and now we're going to have now I'm gonna have a little fight with prettier for some reason the eslint prettier plugin does not work as advertised We're not gonna let that stop us ha ha excellent okay now I'm going to try to reconnect and it's not going to fail to install and so we can see that like the permissions that we're requesting have changed uh because we're now fetching and displaying transaction insights that's the purpose of the snap now and we're going to improve and install and I'm going to anxiously look at the background console I think it worked yes it did uh so now it's asking for accounts uh that should be familiar and here where metamask is trying to estimate some stuff and look Fubar okay we're using the API correctly we're slowly inching towards our goal uh you're too kind you're too kind um all right and so we rejected that and there's an error here that's totally fine that's expected we love our expected errors um okay uh so the next thing so the front end now for like this uh demonstration is basically uh is basically done uh and we're gonna go back and look at our um uh snap because the next thing is okay so we managed to like interact with the API we've demonstrated that we can do transaction insights but now let's actually go get some like useful information uh and see if we can um like decode uh more of this transaction than we're currently doing uh and in order to do that we're going to add a second at permission because we are going to call the four byte registry API and snaps do not get uh network access by default uh so they cannot just like call out to the network unless they are granted the permission to do so explicitly and that permission is simply called endowment network access and uh we are going to call as I said the four byte API and we have some and we have some useful Snippets here uh in order to do that and so here the this API endpoint that's simply just like the um uh the four byte API endpoint that we're going to call it has a single query parameter which is the hexadecimal like four byte signature of the uh of the contract call the call data and then we have just a useful type that we will use when we parse the results once once we get them uh this network permitting uh and so uh actually before I forget to do this I'm going to swap out this dummy value into something real uh let's see transaction constants Dot update withdrawal account so these are just some these are just like some encoded contract calls um that uh we to save time we encoded before this Workshop and so next we want to fetch data from four bytes and that is going to start with a fetch call uh await fetch all right are we done no we're not done because we need to uh parse the transaction data first and we are going to do uh let's see function signature is going to be equal to all right first we're going to do transaction data actually equals remove 0x so we're gonna it's zero X prefixed and we're going to strip that excellent and then the function signature is going to be at the first eight bytes of the transaction data or sorry the first four bytes uh which will uh let's see transaction data dot slice there we go uh and now we have the function signature as well and in order to uh fetch uh from four byte we need to do the API endpoints followed by the function signature with a 0x prefix and then we have some parameters to give this which is going to be uh get and we have just some basic headers I would already knew what I was going to do boom sweet and then uh if we failed to do that we are going to throw and we're going to say failed to fetch from four bite registry but otherwise uh we should be good to start working with this data and uh the result is going to look something like this where we get the Json uh oops and that's going to be a four byte signature an array of four byte signature results and uh then once we have that result so the thing there's one thing we have to deal with we're going to extract the actual text signature of the uh of the function call uh and uh because four bytes is not a very big space there are a lot of collisions so it might return multiple results anyone who's dealt with this with four byte in practice uh is probably familiar with this problem and we're just going to pick the oldest one uh because we need to pick something and so we're gonna see function text signature is going to be uh let's see result uh and then we're going to sort create an ad Locale compare B dot created and then we're just gonna map that to value dot pick signature and so and if there is no function tick signature then uh there is no signature for this uh and so we're going to say um no function signature or uh no function no results in registry for function signature and then we're going to do an early return but in the happy case we are going to have our insights Dot type and we are going to give that uh a try next and we're actually gonna link as well just to ensure we have no problems with that okay so going back we're going to need to reconnect because we modified the snap the live reload unfortunately doesn't go all the way into the extension uh someday we're going to be able to do that but now we see that the permissions are different we have access to the internet as one of the uh permissions now and we're going to go ahead and approve and install so far so good and then let's see what happens now [Music] um this may be a lot to ask uh of the of the network at the moment yeah the console does get very the console there is we probably have a bug where there is too much looping happening in the background but we if we were actually if I reject this I might get a useful aha okay yeah so I messed it up uh and let's see what I messed up um yeah no the thing that was result is the thing that was undefined uh and that hasn't happened before I shouldn't no all right I'm gonna cheat let's see oh ah thank you thank you eagle-eyed stranger yeah if I were um if I if I had if I'd done my types better this wouldn't have been a problem would that be a lesson to everyone okay now we're gonna try that again hey there it is there it is the function signature the function signature uh and uh for for our final trick we're going to get a little bit fancier we're also going to decode the actual parameters that are encoded in the call data as well just because we can um and in order to do that we are going to add a another package called Abi utils uh to our snap [Music] spooky Workshop and that's too much yeah yeah well will it someone someone will no doubt figure out the right level uh and we have another snippet uh hey if we increase the frequency there a little bit like we can really create Magic in here uh and so this uh and so uh this uh this ABI utils package has an encode and a decode function which allows you to decode and encode uh call data and it has uh it returns values that are not Json serializable and that doesn't work because the transaction insights need to be Json serializable so this is just a function that handles that uh and we're not going to worry about what it does in detail at the code parameters and so we are going to import encode from metamask API utils stupendous and for this one we need to now we need to do some slicing because first we need to extract the actual parameter types from the function text signature and we're going to do that by some good old-fashioned uh a string parsing and so we are going to do function tick signature and it's going to be a slice and it's going to be an index of the first parenthesis plus one uh my ID is leaking that I've already done this earlier today and then we are going to split uh right because if you uh you'll recall that this looks something like a function name type one comma type so we're just going to extract this substring split on the commas and then we're going to have the parameter types and the reason we need that is because that is an input to the um decode function so then we are going to decode [Music] uh the let's see parameter types let's see const decoded equals and let's see the next thing I want is yes now I want the transaction data without uh the function signature and why wouldn't that work no foreign okay and so that's going to give us the decoded stuff and the we're going to decode the parameter types out of the transaction uh call data and just to make sure I'm going to cheat again really quickly uh normally I would have my notes off to the side uh so you wouldn't know that I'm cheating uh but but life is not fair sometimes and then we're gonna sit insights.

params to decoded we're going to map that with our value normalizer and then we should be now we should be in good shape foreign I just want decode all right now we're going to reconnect again so that metamask alerts our changes we're going to send a message we're going to open this up hey parameters uh address and Boolean just as we would expect from the function type and so now and so this is so obviously like we're not going super deep and like just seeing the parameters here is not super useful but the but the point that that uh we're illustrating here is that like you know this snap is pretty much aside from hitting four byte like it's a it's self-contained it uses like very basic like Utilities in order to like tell useful information and obviously we could dig deeper into the call data it's like yeah like if we wanted to or like fetch you know the compiled contract code and try to like say something about that and so I mentioned one of the uh one of the snaps that got built at the hackathon recently and we've had a couple of these built so far is by the community which is just like snaps that do they know something about contract security or have like a list of accounts or addresses that are unsafe uh and will display some information to the user when they're like hey like this isn't going to work and you could just as easily uh imagine like you could even run ganache inside of a snap in order to simulate the transaction or like hit a tenderly endpoint or whatever like service that you imagine in order to add like useful data that you know about and that metamask does not know about uh for any given contract interaction and that is a wrap for the workshop and I am happy to take uh questions for the remaining time that we have [Applause] [Music] and you were you were fast so I really like it and I can definitely see a lot of use cases where I would use it my only concern is that I often have to support other wallets so for instance if one base wallet which to be honest I don't like as much because it's not open source um so would it be possible or do you see other while it's implementing anything like this or do you see any support from like other tooling you know the community uses like ethers or wasps support this or maybe in a way that if I'm in metamask I have a snap but in other places it's not broken right right and so the uh so we are trying to create uh specifications for like the Manifest and the apis that we ship and so on uh we have a lot of work that I won't have time in progress that I won't have time to talk about um but like using something like wallet connect V2 to like um you know are just like the the dapple just ask for the network that it wants and then metamask will go and find the snap that supports it and add it as part of like the connection flow uh so you don't have to like call a specific snap in order to interact with it and so we're trying to create specifications for those things and I can't talk like really about concrete plans at this point but uh personally like my I would love to see snaps become like an open standard and like for there to be like an open source like wallet kernel uh or something that like others can build on uh in the future yeah sure and I think I saw you next time [Music] yes yes correct uh so uh there is so there is no Marketplace as yet if anyone wants to build their Marketplace we would love to see that being built because we don't want to be we don't want to have an app store we want it to be like a full and open open permissionless ecosystem uh and so at when right now uh the way it works is like when a snap is published to npm like if you have metamask flask you can install and run that snap and any website that like knows how to talk to it it can just can talk to it uh and so and once we get to stable uh they're like they're you know we're gonna we're gonna have like a essentially like a block list if like there are known malicious snaps and things of that nature but really in order for this to scale there is going to need to be like a Yelp for snaps essentially uh in order for people to like be able to establish trust uh in them uh because uh we do not want to be in the business of running an app store because it's antithetical to the values of web3 and also it sucks as a job um uh does that answer your question Splendid and I I think you were next also [Music] yes so uh so that's like uh so recently if you uh follow uh like news about app stores and stuff uh there was an instance where uh like there are essentially two philosophy philosophies that you can use to approach it like the sort of wild garden App Store approach that exists right now and what we want to do which is a permissionless web of trust model and and so in the App Store model it basically relies on like executive oversight and like review of the tenders of the wild garden like for scams to not be presented but like just the other uh week I think Facebook reported to Google a list of like hundreds of malicious Android apps whose only purpose was to steal Facebook credentials uh and so even like with executive and oversight like it's it's impossible to uh to fully prevent scams and I think the best way that even in an app store model that you actually establish trust in something as you look who recommends this how many reviews does it have how many how long has it existed and so uh we so that's like why we want and need a market place to exist in order for it to scale to users without them getting scammed and until we get to that point our first release is probably going to have like a finite set of snaps that like at least uh you know we can uh we're confident you know our uh you know we're implemented rigorously if they're managing keys they they were perhaps audited and like we know they're not like outright trying to steal your stuff uh but like but preventing scams in a like permissionless application ecosystem is not a fully solvable problem uh but we think by building but I but but by investing in the community and then like a Marketplace uh we can get there foreign next question uh so uh mobile uh so we've mobile is a TBD it's it's going we're uh we're working on it at no timelines to announce as of yet no they so so they are uh like the execution environment is the same the goal is for a snap to be unable to tell if it's executing in the browser uh in the server on a mobile device on an abacus uh like shouldn't matter yeah that's the that's the guarantee yes yeah so so they are publicly released right now on a developer channel so like you can uh download metamask flask and just like get started with the ones that exist in terms of release to stable we're targeting early next year uh yes that is a a great question kind stranger uh and so we have like in the uh in the hack MD um there are some links at the top that lead you probably yeah no yeah it's locked whatever no it's on the hack MD which is on the slides which are accessible through the schedule like on on Devcon but uh that metamask has a repository called snaps monorepo that snaps Dash mono repo uh and the discussions in there are a great place to get started uh we also have a landing page on our website uh called um metamask.io snaps that will also get you to a lot of the resources but the GitHub discussions is a great place to get started uh yes congratulations [Music] yes we are uh we are in touch with Google and are working with them to ensure that uh everybody is happy and we and we don't get banned from the Chrome Store um how how much all right I I'm being asked to stop so I'm gonna stop but thank you thank you everyone so much for attending [Applause]