MetaMask 🛠 Transaction Insights - Hassan Malik

foreign [Applause] [Music] so this Workshop is on transaction insights uh to give you a little background on what transaction insights is it's a it's a feature that we've exposed uh to the metamasknaps platform that allows snaps to render certain insights on transaction data so uh we make it available we make unsigned transaction payloads available to uh snaps that have uh this transaction Insight endowment to be able to make these insights so I just wanted to show you guys some links that I have available uh that you guys can read into to learn more about the API so we have uh something called sips which are snaps Improvement proposals and so this transaction insights feature was specked out in si P3 if you guys want to just take a moment to you know jot down the link or whatever you can do so and these sips are open to discussion so if you guys feel like the API can be improved upon or you'd like to see new things inside of it you can join the discussion um and another link that I'm providing here is uh for a cape too so we use this standard to um uh basically identify uh different chains with uh so there's this whole concept of namespaces and chain IDs uh that we're using under uh uh Casa which is stands for chain agnostic uh uh software Alliance um and uh so we're using this standard uh for our chain IDs now to get started on the actual uh Workshop itself so I would like for you to clone down this repo first this is the template typescript snap so the first thing we're going to do is just get the link here um and we're just going to clone this down up thank you there's a bit of a delay here that's good cool all right so uh um if you look on uh GitHub it should be template typescript snap is a repository um if you guys just want to take a minute or two just to clone that down foreign and then there's also a a certain build of metamask flask which I'll ask you guys to install into into your Chrome extension if you guys aren't familiar with flask flask is our basically our Canary build of of the metamask extension in which we've released a snaps platform so I'll get you guys the link to that in a second cool so uh if you go to this link here uh you'll see this metamask bullet guide um and it'll walk you through how to install flask um so the build that you want to use is on this link here um uh if you just follow the steps uh if you want to take a couple minutes to do so please do that what's that oh it's on Discord okay uh does everyone have this build installed already well okay so just take a couple minutes to do that thank you different from the regular what's that yeah we have the transaction inside API available in this build uh we haven't cut a new release yet so we're using this custom build I'll give it another minute or two um so people can catch up um so once you have a flask installed please open up uh the the repo that you just uh pulled down um so this is uh just a template uh basic template uh typescript template for for a snap and this is what we're gonna work off of uh to create this uh transaction Insight snap so what you first want to do is just uh run yarn install to install the dependencies cool um so you'll notice that we're importing on our PC request Handler we have different Handler types with the addition of this on transaction Handler so we're going to be pulling in that instead and so the type of this will pull in a transaction and a chain ID if you remember what I mentioned about K2 this chain ID is a cape to chain ID um for demonstration purposes we're not going to um like parse this chain ID or do anything special with it but I just wanted to let you guys know that this is the type of chain ID that you should be expecting uh when when uh you know writing uh transaction inside snaps uh so we wanna uh be able to export on transaction um so the call and then so we're just going to delete all this out of here um and so the the return object is expected to be uh having an insights key um and inside of this insights object you can add in whatever sort of uh key value pairs you'd like uh so for demonstration purposes we're just going to spit back uh the transaction chain ID um so you basically need to just save this uh and then we need to add in uh the permission for um transaction insights which I just need to double check what it is exactly cool so now you just save this um and I think we should be pretty much there you don't need to touch this index I HTML file it's already good to go so it picks up on this snap ID since this is a locally hosted snap we're not deploying it it's going to use this local prefix so everything is set up for you already you don't have to worry about touching this now the next thing we need to do is basically just build and serve this snap and we'll do that here so we need to do yarn build and yarn serve cool uh so this is um starting the server on localhost 8080. you can choose to change where the server is hosted in snap.config.js so you would just change the port if you if you wanted to um so now we'll navigate to localhost 8080. cool so you'll see this prompt here um we're only concerned with the connect button uh because uh there is no like UI interaction within the DAP itself so transaction insights uh they're displayed in the confirmation screen of of metamask uh when interacting uh you know with contracts or even EOS so we'll first install the transaction Insight snap here and you can see that it's uh requesting certain permissions to be able to display a confirmation and then Fetch and display transaction insights uh so we're just going to approve and install it and now it's good to go um now we're going to test out this uh snap and see if it works on uni swap cool so you just connect your wallet and we'll do a simple uh eth to wrap teeth swap cool um now if you notice there's a extra tab here that you wouldn't see otherwise it has the name of the the transaction inside snap uh now this this snap only shows up because it has this endowment and uh you know it was able to do this because we gave permission to do so um now if you click on it uh you'll see the transaction payload and the chain ID that was sent to the snap and it basically just spit it back um and this is pretty much it um that this demo will say illustrate you know how this works um you can do a lot more interesting things with uh transaction Insight snaps you can use services like tenderly to run like a transaction simulation and and get more insights that way um you know you can write transaction inside snaps to maybe detect phishing on on on different dapps um the world is your oyster with transaction insights um yeah this is pretty much it um if you guys have any questions uh let me know um and I will open this document back up um I have my telegram here I have my Discord here and these links are here for you to follow if you need yeah this is it [Applause]