Francesco : Building a Universal Web3 Interface14th Oct 2023 | Sunway University | ETHKL 2023

all right uh let's welcome Franchesco from uh metamask to share with us the experience of building a universal uh V inter face all right Applause good awesome awesome thanks guys how are you oh cool we have the slides on the on the right on the left cool so how many of um how many developers are here in the room let's raise let's see some rise some heads how many develop on flask so cool so I know a little bit like how tuning like the The Talk um yeah so how many of you heard about snaps first so because we launched snaps on prod like a couple of weeks ago and uh yeah it's super exciting but I mean like yeah if you build a snap before that like you were actually like using flask and uh yeah so we're super exciting so this is um this is a general talk so I actually recorded also the demos because I know demos break on on live presentations so uh uh it will not be possible but uh we just want to talk a a bit more high level why you know why snaps is not just about snaps is more like the the full vision about you know wallet development and un leashing like permissionless Innovation and giving like the power to anybody out there third party developers companies to actually build open source uh H uh feature extension on top on top of like layers right and uh it happens to be that you know uh we are covering the wallet ecosystem but I think this the same methodology like will be um kind of can be applied for any uh INF structure uh level so yeah I'm uh yeah I'm Francisco I'm part of the deine community team and for the past I think eight years I'm been into developer communities and uh yeah I'm giving a bunch of like uh workshops but mostly important like uh um yeah trying to connect developers with like cool tooling and uh being fully let's say uh unleash their kind of power for in hackaton and uh and more also like how to stay involved in the in the ecosystem right with grants and uh uh and just F the develop their their product from like zero kind of uh to Euro cool let's start so and feel free to jump uh in if you guys have any questions or remarks or note or like if you have any you know any problems with anything I'm saying I'm super happy to like debate that and uh and see what uh what it's actually going on I don't know if the clicker is working but so first principle user own account right so those are kind of the five things that I think like it matters for like wallet um wallet development wallet security but most important like how use Care on those principle and that's where metamask but just not metamask um consensus in general so metamask is consensus is the parent company so under under consensus you have like uh you know tooling from like infura um Linea like uh fully like zkm and uh and obviously like metamask is one of them so user own account is one one of the big principle when you want to build uh something it's it's all about like you know users will own their identity they want to have a fully ownership and be uh kind of like um able to understand what actually transaction they're doing and how they're interacting with essential I don't know if many of you guys actually revoked access with a Google Chrome extension I don't know raise your hand if you actually like know how to do that because a lot of time I even didn't do it before you know like we have a lot of like Google Chrome extension that are actually like uh uh uh yeah transacting while while you're browsing and actually no one is really uh caring about that that's why like I think like users should be owning much more not just their accounts but their information and transaction so user own accounts is one of the uh big principle second accessible interface you want to have obviously like a customizable and comprehensible interface I don't know about you guys but I don't think you know like uh we will see the same wallet interface for any uh any users in the future right you will have a um you know nft heav users you have def defi a users you have security focused users so I think like in the future we will have much more customizable um uh wallets but also customizable Journey right so explicit requests you want to also make sure that um the users is always like in control of how they're behaving H in terms of like what they're doing with the extension and with with the DAP directly and I think like it's also need to be super transparent and uh and how many of you guys revoke access datas directly not just locking uh locking their wallet cool okay some some people are doing great that this is also like a good practice revoking permission that's basically what we talk about but also like we want to be able all the time to understand how we are transacting with uh with with apps but also most important how we are um how we can revoke access or not just deny access to adap and uh I think this also one one big part and I think one of my biggest principle here that I'm always trying to adoc Advocate is that whatever we build we want to make sure that we are sharing with the community with the company like full uh on a progression level right so you want to be able to extend the functionality of what what you're building so build on top is one of the most important uh part because today especially like in web 2 you have you have basically company building products and the only things that you can do as a community is giving feedback or open like issues and and PRS right but I think you know is much better way to uh to be part of the Innovation and actually like uh build progressively uh the tech stack offer by by by the company cool so what the wallets look like so I don't know how to answer this question I will tell you what the wallets will not look like in the future so I I think like uh P PVP we will not have you know like more players versus players and uh I think that's one uh big part we will not have one uh sides fits all so to today we're building not just wallet but uh I think like different Tech stack are being built in a similar manner we are building different ecosystem different silos and yes we have different interoperability um um uh like Technologies right but right now like a lot of like those ecosystem are being buil on top of things and they're not really speaking with each other I don't know how many of you guys I don't know develop on on Rust but for example my journey was I started a lot with with solidity then you know I went testing around different ecosystem and then came back to solidity but not because of the product because solidity is not the best uh programming language but because like the the ecosystem support the initiatives the like literally like every everybody's so um kind of like you know accessible in terms of like things about uh you can do I don't know how many of you guys develop on Cairo I mean 2.0 is great but you know I had a lot of like issues at the beginning also with with with KIRO um onboarding cool part one entity knows best I I don't think like you know we will we will get on a level that you know a single company know what features need to be developed I think Community will drive features Innovation I think that's also what what what is super exciting I'm just jumping back always on my laptop because I need to click but uh but basically like uh um I want to just resume those five principle around what uh we need to care about you know not just wallet development but any Tech stack so we want to put always like a user Centric Innovation we want to understand you know like users need to not just uh have full control of their access but also like in a full transparency way they need to understand how they are behaving with the uh dap and I think that's uh that's also like uh why consent is is kind is kind of King in uh in those uh in those part so everything is about trust obviously like you want to uh you want to have fully trust but the trust is coming from the dap and the interaction with the DAP being fully transparent so also like in in your in your experience you need to see exactly how uh the the extension or the DAP is behaving with uh with uh with your wallet and uh that's how you're empowering much more like users and user decision decisions and uh and yeah and uh basically like here like it's all about the concept of uh permissionless Innovation right like you don't want to build like another uh aggregator of like like you know extensions like what you want to do is a fully decentralized way audited way to actually like have Innovation be owed by by uh Community Builders yeah that's basically what what I mentioned so uh Community First so user Centric and Community First feature development and uh yeah so this is where we're resuming this kind of rless innovation concept and uh yeah I don't know if you guys agree with me but I think the only way that we are actually like reaching a better like you know web three uh uh vision is having a much stronger um uh how would you say like uh feature development driven by uh community members right this could be like you know third party individual developers but who also like range from uh um from from startup to companies cool no one is sleeping until now so it's it's great so I have this so this is like a kind of like a sales video I just wanted to show you and put some music on so that everybody's waking up uh but we launch uh we launch all this kind of like snaps directory uh at permissionless a couple of weeks ago and this is the video that we show literally to uh the public and this snaps directly is nothing else as 36 uh whitelisted snap built by third party developers I will talk about what Snaps are long story sure they are basically addson or extension on uh on metamask those are not owned by us they're all uh third party builders in the community let's see if it's working this is sound is working no it doesn't you can hear cool so do we have a round of applause or not very good very good very good so let me let me switch slides sorry I figure out the uh the video sorry the sound the last part but uh so what are snaps so as you see here like in the video we have three main categories we will go through a little bit but uh as as we mentioned Snaps are nothing else as like extra features there are extending the functionality of what they wallet today today you cannot extend UI specific uh behavior and we are working on that and I think that's also super exciting but today you can do things like uh you know uh do transaction on uh on a BTC do getting notification if you're a game uh users uh do use the cosmos to interact with directly with with atom or like deploy stuff on I don't know and use Stark net you know like so those are in the interpr snap you have notification snap even we will show I mean I will show you like the chatto chat snap that is actually super cool um and uh we will also see uh the other categories is called transaction Insight category that you literally have like a a feature where you show you like uh if you're behaving um if you're interacting with a malicious contract and I think this this is also super cool because today even like myself like privately like a lot of time you have no idea what you what address you're interacting with and before even doing this decision about approving your transaction you want to have more data points cool so I think we understood uh this is all about uh uh having addons uh add-ons and uh and fully customize like your your experience on that so those are like the there are three main categories here show it in the I mean there are six in total but three are the one like on the directory and uh those are inability transaction insights and notification I don't know like um if you're building I don't know like a defi protocol or a full um I don't know like trading boats like or even like if you're playing with uh some DBS uh I don't know many you guys uh uh did some gaming web three gaming but sometimes it's quite painful because you cannot do bad transaction I think for game developer here you should try a metamask SDK or like just using like Unity assembly uh that SDK also is there but you know a lot of time even for users like approving a b transaction uh it's it's a pain you never get notification uh you did like different uh things like for example automatic approvals uh it's something that doesn't really exist on on more like on a wallet level this is something like with the notification snaps is getting uh uh is getting super excited uh there are like so many like in in NE Denver so I presented like the same slide with all the category that I thought about and there were something like 25 different categories right you know accru identity privacy those are think like uh very interested next topics but there are so many other uh type of uh of snaps that you can think about so anything that is ranging from from scalability security uh uh privacy uh even like social graphs like there there people now building lens snaps they're actually super super cool they are uh B basically like uh yeah doing specific transaction within all the lens ecosystem but without actually going to and install food like uh uh depths on on that cool what about security so this is like all about those principle before right uh so snaps is kind of like uh enabling like a new um uh a new like extension right snaps can interact with any uh API stack out there not like the extension because so today metamask has the playground API you can check all of the reference API lists but the cool thing is that snaps can interact with any product stack so you can build even if you have any product that you want to use you can basically build a snap uh going uh and transacting with this product and the snap will uh will basically like be fully uh compatible with the extension so that's also like quite good uh this is something that we will we will see in the demo but the long story short is that when the users is installing the snap you you literally see every uh ask from the snap to the extension and you can even see like you know sharing uh getting access to the Wi-Fi it's it's super cool because without and and I wish this will be the same standardization around around you know Google Chrome extension for example but uh but uh that's basically like how you installing St from from allowing the website to communicate to like access the internet and uh and uh we will see the wallet guard snap that's a transaction inside snap and for U uh for developer year like uh the snap is nothing else as a manifest Json file and uh and uh it's it's bunch of pure like npm code that you can just use and install at the end I also have a Qs code if you want to build build asnap with like a monor repo that you can use and some like a transaction inside example that you can Fork it and and build build on top of that cool so security comp first we mentioned that so let's let's see some demos I don't know I want to also take some questions uh but uh so the idea I thought about like having some uh uh uh different demos from the three categories so this is the directory how we look like there is no sound so sure not scared um and uh we have interated notification transaction insights so I want to show you like first one the transaction inside one so Ward is a is a is a is a cool startup but basically this is how it looks like so you're installing your Wards now you're connecting you you need to approve the uh the transaction uh sorry the uh how like what what what is happening so we are approving my wifei at the hotel this morning was a bit slow so you will see like a slower process um and uh so now what happens with literally two clicks we install the snap directly on on our uh production uh metamask so that's my test uh metamask so uh uh and basically like we are doing a t transaction so this is a I mean I don't want to spoil but this is like a malicious account that was happening for a fishing attack a couple of months ago um uh and uh what we're seeing here is basically like we're doing the transaction right we're clicking next we are selecting you know how how much uh money do want to send and the cool things right now is before even confirming you will see like a like a popup is basically a tab here like basically you have three providers right now block fence as a wallet C because I install already the three transaction insights uh snap uh and you will basically like uh be prompt here on what the transaction will look like so you will have a block fence analysis how is detected how is detected ref gobra so basically like you have a full uh full uh um uh let's say third party data points on the security uh on the account that you're um dealing with and uh yeah so that's uh that's actually super super interesting because uh so block fence is detecting it now we're going through the uh the other like wallet guard and basically is loading the transaction inside on the wallet guard uh side boom like warning this is a malicious address so you're sending this the risk factor and uh I think this is super cool because I don't know how you guys uh but uh I don't know like I'm using it every day now uh because it's just giving more insights on what what is happening so this is an example of the transaction inside snap and uh yeah I think it's uh it's super interesting so now let's see the uh second example that I prepped here so all the transaction that we're doing when we're sending transaction they are basically encrypted right so the these cool guys I think from last year uh hackaton they basically build a wallet to wallet chat because literally like why not sending like actually amount of data they already encrypted and uh this demo is with the wallet chat snap and we will see first how we are sending a a message like through metamask from account to account so here I don't know if if you're realizing what this is not like you know a fully centralized way this is a from an account to account and then what we will do we will see notification I installed the notification snap afterwards cool so uh I'm basically like putting uh uh from which account is uh is is going Monto is by is my colleague by the way so we are sending a GM obviously it's not morning but uh uh and basically What's Happening Here is that on the left side you see the other account that's why like we put the the the second interface on the right side is the other account so boom GM we send the uh we send a message now you're asking yourself okay where is the notification so I will show you in the other uh demo so now I installed the notifications snap so you will see basically a popup and this is happening on the extension but you can also set it up that is set is coming directly to your um uh iOS for example so it will be popping up hes on your right side and think about this this now we're just doing wallet to wallet chat but it could also be like a game a game where we get notific ification or you're like a board that is executing a special uh events and triggering a special notification so here in notifications naap you will see okay one and R message from w. fun um and uh yeah we will see what's that and it's probably like the GM that we sent uh before cool so there there we are I think that's uh that's it and basically when you're approving it you will see it here on the right cool so so this is the one I think we have a we're almost at time but uh I want to show you like this uh the one interoperability snap so right now we have different snap we have the file snap you can actually store information on on ipfs you have Cosmos snap you can do interaction we have star snap this is the first layer Layer Two snap that is actually super cool and this is the BTC snap so I want to show you the BTC snap so how we are doing a test transaction on the test net BTC not mainnet because I'm not I spend all my money to come to and flying here I'm joking but this is basically zon is a third party um third party developers that build uh this uh uh snap and what you're doing here is we are installing the snap and right now uh right now as as you saw Snaps are um being uh being prompt from uh uh independent apps and what you were doing here is we're sending testet BTC uh directly through uh through metamask so that's actually quite uh quite powerful because today if you need to have a specific Transaction what you can do you can I mean you just need to go on on other on other chain so this is how to show like the first big iteration on how uh Snaps are working today and uh yeah the past like 18 months there were a lot of SN being build on on flask on and uh and now we're super excited just to extend more and more in functionality cool um I think that's enough about that so yeah what I mentioned right now here this is a marathon not a Sprint so we want to doing things right we want to enable and uh really give users the power to install what they see to have transparency in the installation process and to have also like power in terms of revoking access to the extension so it's fully so it's fully transparent and uh really owned by by users this is like what I mentioned before is the snaps developer resources uh here you have a QR code we can we can see it I don't know if we have we have time but if you're checking out this uh snap uh discussion build build by a colleague of mine uh you will see you have different reference snaps you have both uh demos and repos my suggestion if you're in this hakon you want to build a snap or in in general if you want to submit a snap to the uh directory what you can do is going uh in the monor repo uh and uh literally like to one of uh snap here uh or you just use the uh template um uh template snap I think that's uh so that's it so this is regarding the um uh start uh start a guide getting stter guide then here are some other cool example this is also like a transaction inside from another company this is a starkness snap you can check it out and we're pushing bunch of infos also on metam dev so I think that's it so um yeah I think if you if you guys I'm super excited because like this is much unleashing much more Innovation around the future development of uh of wallets you know I I believe in the future we will have much more from standardization and uh and uh yeah and uh today by the way like if you want to build snap we have all metamask grants now is a 2.6 million a quarter grants that you can submit to and uh yeah feel free to ask any question around snap privacy or or user user uh um ownership of snaps thanks guys