MetaMask Delegation Toolkit Workshop by Eric Bishard

Transcript

Hey everybody. So my name is Eric Bashard. I'm one of the uh hosts of ETH Dubai. Been here for four, five ETH Dubis now. So well, four ETH Dubis and one of the uh Web 3 Dubai that we had in 2023. So, um, yeah, just love coming here and talking to everyone. And, uh, today I'm going to talk to you guys about MetaMask delegation toolkit. So, again, my name is Eric Pashard. You can find me at HTTP Junkie on, uh, Twitter, X, Warpcast, uh, and pretty much any other social

medias. So, I've been a Devril at MetaMask since 2022 and uh more recently moved back over to engineering. So, I work on the uh the transactions team at MetaMask. So, anything kind of transactions um confirmations related. And I'm not really part of the Met MetaMask delegation toolkit team. Um, but I've been very interested in what they're doing um since they've started it. But it's been in a uh kind of like a gated beta or sorry, gated alpha for quite a long time and there are some really good resources that I'm

going to share on here that I think you should check out. Um, I'm new to the delegation toolkit and kind of learning about it. So, you're going to be learning with me a little bit, but what I've tried to do is try to consume as much information about the delegation toolkit as possible and present that to you guys. And at the end, uh, I'm going to show you guys a demo that you can easily pull down with NPX, uh, that will get you started off with the MetaMask delegation toolkit and, you know, account abstraction, smart wallets, everything kind of, uh, related to it.

And so, yeah, let's go ahead and get started. So, Delegator um is an ERC 4337 smart contract account. So, it enables uh smart contract wallets to function like uh EOAS without modifying Ethereum's protocol, which is really cool. Um it can remove private key management on behalf of users. I say can because you know that's one of the things that account abstraction was sold on is kind of removing that private key management on behalf of users. But there's other things you can do with it as well. Um, it allows for custom transaction logics like uh multi- signature approvals and automated payments and introduces user operations which bundle transactions

offchain before submitting them to the network. Um, it uses bund bundlers like Pimlo to replace traditional miners processing transactions. And I probably should have went I should have clicked through these guys as I was going through them. So again, uh enabling smart contract wallets to function like EOAS, removes private key management, allows for custom transaction logic like multi- signature approvals, user operations, uh and uses bundlers like PIMLO.

So uh oh. Yeah, but it wasn't advancing here. Hold on. One second. I don't know what that is. Let's just find that screen again. So, just be Yeah, but it wasn't there. It worked that time. So,

the met the MetaMask delegation toolkit, what is it? It's a bunch of stuff. Actually, it's two things. So, you have the delegation framework, which are the solidity contracts uh that do all the cool delegation stuff. Onchain extensible permission system that lets you do counterfactual delegation. What does that mean, counterfactual delegation? So, when I started kind of messing around with it, didn't even know what that meant. Um so basically it'll create the delegation uh for you kind of uh in the background and then um it'll you know put that on chain kind of when you're ready. Um and then you also have these VM based libraries.

So in essence uh this is in essence the MetaMask delegation SDK. So you can create a delegation, you can use a delegation, you can create caveat enforcers. Um the MetaMask delegation framework is just a set of smart contracts used for building embedding wallet experiences that eliminate confirmations uh maximize user safety. You can allow for gas-free invite capable onboarding and a lot of other stuff. I mean if you know about uh account abstraction then you kind of know a little bit about this. But when it comes to the delegation uh that you know with MetaMask delegation there's the delegation framework and then

there's the kind of the SDK um which is the delegation toolkit and again it is uh now in public beta as of about two weeks ago. So I'm the kind of person that like I don't like trying out technology for the first time. I don't like getting the first Mac M1. I wouldn't buy a brand new Tesla and I'm not going to install software that just came out. So, um even though I'm a devril over at MetaMask, uh I haven't really been playing around with MetaMask delegation toolkit because it's been in uh an alpha and even when we used to go out to hackathons, it was really hard to kind of get people to kind of hack on delegation toolkit because it was behind that uh that that gated alpha. but it's

now in a public uh beta. And the easiest way to play around with it, and if you have a computer right now, you can even do this because I'm going to pull up this demo later. This npx create gator app. So, what that's going to do if you run that is there's a few different options. The one I'm going to do is the Nex.js version uh with like PNPM, but you can choose from Nex.js or kind of like regular VJS React. Uh you can use P uh PNPM, npm or yarn. So, it's it's a nice little uh CLI that will walk you through kind of setting up MetaMask delegation toolkit demo, which um it's kind of basic, but I think that's what you need uh to get started with something like this is you need to see

kind of how the basic stuff works. And even though it's basic, it's still uh it still includes quite a bit. It allows you to create a delegation uh and yeah, so I'll go over that in a few minutes. So, uh, also this QR code here, it's going to take you to a list of resources that's going to have even more resources than I'm showing on the screens and showing in the slides today. But uh yeah basically docs.g.metamas.io. It's fairly upto-date. Um, I've been everything that I've been doing, I've been doing a kind of like a crash course on delegation toolkit over the last really few days because when I'm working at MetaMask and before traveling here to Dubai, I'm

working in my role as a software engineer, not even playing around with it. Um, I don't do Devril anymore. So, um, yeah, but the thing that's helped me the most is probably the quick start on the docs uh.gator.mask.io and that npx create gator app because I'm the type of person who I really learn by pulling something down and putting my hands on it, seeing the code in practice. Uh so yeah, I really suggest checking those two out. You can get to them from this uh awesome QR code that I designed with a free QR code designer. Um, you can npm install if you know if you don't want to create uh the Gator app and demo and if you're you

know hardcore just install it into an existing project and and get to work. Pull up the docs and you're on your way. Optionally um if you'd like to override uh kind of install and override the MetaMask developer framework contracts, I messed up there. um then you can use npm install at metamaskdelegation-toolkit. So the last thing I want to mention is being in devril kind of being kind of super involved with hackathons and kind of being part of the hacker community in web 3. The real reason why I wanted to do this talk here at ETH Dubai and I chose to do Metamas delegation toolkit

is because there's a uh there's a hackathon going on right now over at hackquest.io IO where you can um you can choose from a few different paths but it involves using the MetaMask delegation toolkit potentially Gaia Net to create you know kind of like pair it up with uh an AI agent or something but uh I just have a feeling like I know how these hackathons go and I know how good some of the hackers are that I've met here in Dubai. So I figured I'd mention it and take a look at it. It's going on for like another 15 days. So that's plenty of time to enter and kind of build something. So you know, check it out. All right. So delegations, um, a delegate, if you don't know what a

delegation is or if you've not kind of, uh, played around with account abstraction or smart contract wallets or kind of any of this stuff, we'll go over a little bit of that. And that's what these slides are going to be. The slides are going to be kind of an intro to uh, to all of this and all the terminology and kind of what it means. So a delegation is a permission that allows a delegate to act on behalf of a delegator. And don't get those two mixed up. Uh you know one is a delegator and one is a a delegate. So a a delegation allows a delegate to act on behalf of the delegator. So a delegate addresses uh is the address of who is receiving the authority and the the that's the delegate and the delegator is the

address is the address of who is granting the authority and the authority is just a hash of delegation uh kind of previous in the chain or kind of like the root authority. Uh caveats are we'll we'll get to a few other slides where I explain these a little bit more in detail but uh in my notes it says that caveats is a list of caveats obviously uh caveats are kind of like the fine the fine print if you will the kind of the contract or uh the kind of the thing that helps you to restrict a delegates's ability to use something that the delegator is granting them right um so All of these things uh you know are are these are the kind of

the terms that you're going to be seeing in the code and that you're going have to deal with. Assault uh that's going to be used to create multiple or uh similar delegations. Uh in short, it changes the delegation hash. Um for instance, if I were to pull down my demo right now and run it, uh there is a a salt right now like in the demo of 0x. And if I were to then run it again and I want to go through the entire process again and generate a new delegation and all that, I'd need to change that hash to like 0x1 or just something different so that that hash is different. Uh a signature. Um this is just the signature of the delegator or uh the delegate. Uh we all know what signatures are.

Good thing they were listed on the other side because I always forget to click through. Um, delegations. So, users off uh user offers are enforced by their own account by signing delegations. These are off-chain and they have no gas cost and they are instant. Caveats. Uh, delegations have simple structures. uh as you can see here very simple structure called caveats and to see how to create caveats and restrictions I suggest going to uh create if you go to the MetaMask docs and go to create delegation and restricted delegation you can see those

but you know just in short you could set a time limit so you could say that um you know I'm giving Bob access to x amount of funds for one day or five days or one month or whatever ever. Um, I like one of the things that I'm kind of building offline. I'm really into kind of doing something other than the the basic user onboarding kind of uh demo or um or kind of application of account abstraction and delegation. So, one of the things I was thinking about was you know you have like software engineering teams and this kind of comes from a kind of a more personal uh situation that I have. So at MetaMask when we test um the

different features that we're creating, we can't always test them on testn net. Some of the things that we build and create, we have to test directly on mainnet because mainnet acts differently than some of the test nets. Uh a good example is smart transactions in MetaMask. In order to fully test that out, I need to be on mainet. I need to actually send my transaction off to an auction and I need that process to happen in order to fully test out that feature. So, I'm, you know, every quarter or so, I get a nice little chunk of ETH, uh, that I usually kind of convert into USDC and or and and play around with to use to test things on mainet, but, you know, how does my boss know that I'm using that ETH the right

way? How does he know that I'm not skimming it off and sending a little bit, you know, off to another wallet every now and then? Um, I hope he doesn't watch this. Um but you know and then also if he wanted to try to figure out am I using the ETH that they that he gives to me um you know properly and and not using it for something else like buying NFTts or something. Um how would he figure that out? Would he have to go in he'd have to go check my wallet and go through a bunch of block explorers and you know like it just it doesn't make any sense. So with delegation, I could potentially have like a funding account and as the manager of a team, I could be, you know, the the delegator

and my engineers could be delegates. And this so this is outside of the basic user onboarding scenario. Um, I can everyone on my team has a wallet and I have a funding account and I can say, you know, uh, the backend guy maybe doesn't need as much as the front-end guy to be able to test and and, uh, you know, test on mainet. So, I might give one person more than the other and I can kind of decide those caveats and those restrictions based on the needs of my team. So, it's just an example. I'm not saying it's a good example. I'm just saying that's a that's an example of delegator delegate and caveats and restrictions and stuff and an idea which I'm going to get to a couple ideas later

of like good applications for delegation besides the basic user onboarding stuff which still is is is great. Um, so web 3 UX today, uh, you know, you connect to a wallet. Uh, you don't have a wallet, you got to install a wallet, you back up your keys, connect a wallet, choose from a list. This is all stuff that's kind of hard. Uh, confirmations for every interaction. We're going to see in a little video, which is kind of funny. Um, no ether, got to get some first. You want to go interact on another chain, got to bridge it over. All this kind of stuff is hard for new users. So uh you know the these are some of the things that account abstraction and delegation

um are solving. Um and let's see if I can run this. I have to make sure the volume isn't too loud. Oh yeah. [Music] So obviously like I think that's kind of an exaggeration. Uh I don't know Motion by Nick. Um I'm pretty sure that that is just a video of a game and they like

overlaid MetaMask on it to kind of make a joke out of it. But think about it like web 3 games uh without kind of account abstraction and delegation and if you're able to earn money in a game or whatever um and you have to set up a wallet to do all that stuff to be able to engage then that can be very offputting to new users. So again let's get off this. There we go. So we want to solve all that UX pain. Um so MetaMask and delegation toolkit teams are working hard to protect users but also to try and solve some of the UX pain through created uh through creating better tool sets. I truly believe that

web 3 right now um literally right now is in a period that we can relate to kind of the jQuery and moo tools era of web 2 and within a few years we're probably going to be see a big advance in tooling some of it's already started but some of it's very far behind and I know I'm dating myself by saying jQuery and moo tools but if you remember back in the if there's anyone here that's over 30 you might remember the browser war days or using DHTML, um, action scripting, Flash, uh, having to code a website for a, you know, 10 different browsers and making sure it works on all of them. I I just feel like

web 3 is kind of in that same space and I lived through that web 3 uh, period and it was hard. Uh, but we learned a lot and it's interesting that like none of that information matters anymore. And I think that kind of web 3 is in the same space and we're going to see a lot of good tooling come out to kind of help uh you know the everyday developer to use all these um paradigms and all of these uh you know all of the patterns that we have in web 3 are some of them are very hard to use right now. And if you don't have something like the meta mass delegation toolkit, then it can very be very hard to implement account abstraction and delegation and all of these kind of

things. Um yeah, so I feel like I missed a slide here. Anyways, uh what I was going to say kind of after this is that you know we have like these we have these mascots at kind of uh MetaMask. We have the the fox and the gator and the gator and the fox are kind of unlikely friends. You would never see these two friends in the wild. Um, but the the gator really there is there to help the fox and uh MetaMask delegation toolkit is a great addition

to kind of the MetaMask kind of suite of products and I believe is going to be uh one of the things that really helps developers interact with not only MetaMask but other wallets too, right? Just because you use Metadas delegation toolkit does not mean that your users are locked into MetaMask. It's not how it works. So, these are some of the kind of ideas that I kind of came up with, especially if you wanted to join into one of these hackathons. But if you want to build something and maybe maybe you might not uh see these as great ideas or maybe maybe you might see them and think of something else that's a really good kind of use case for account abstraction and for delegations. So, a couple of the ideas I have, one is like developer

testing, environment management. I kind of already talked about this. use it for mainet testing, spending, simplifying security and accounting by avoiding ETH distribution across multiple wallets. Instead, you could uh maintain a single funded smart uh smart contract wallet uh the delegator uh have each dev wallet act as a delegate with specific permissions. You can set spending limits, uh targeted contract interactions, timebased restrictions, and track and audit all testing expenditures through a single source. So, I think that's a really cool idea.

It's actually one of the things I'm trying to build on the side uh to kind of get me familiar with the MetaMask developer toolkit. Even though I'm an engineering, I still do a lot of Devril stuff. So, I need to know all the different MetaMask products. And uh that's kind of one of the ideas that I'm going to be working on to kind of test it out. Um, but you're not you you're not um forced to just do the kind of onboarding thing or to or kind of uh have all the money be in the smart contract wallet so the user can take it off later or doesn't have to create a wallet, right? That's one way of doing things. You can also have um you know the the delegates be other wallets uh other EOA wallets that use that uh those funds from that smart contract wallet.

um you know you just have to set it all up correctly. Hierarchal permissions and redelegation. So you can set up hierarchal delegations uh with redelegation. So redelegation is already a thing in the MetaMask developer toolkit. Uh and this could give organ organizations granular onchain control over actions. So you could implement team lead wallets that redelegate portions of an authority uh de uh department specific smart contract wallets with permission structures and role-based access control for onchain operations. Right? This is less of a kind of an idea of something you could build and kind of more of like a concept. This could be applied to so many different things. Simplifying existing wallet

operations, right? Even users with established wallets benefit from delegation patterns. So gas the gas sponsorship model. Um users sign messages with existing wallets. No gas needed. Uh delegated smart accounts execute and pay gas costs. Someone still has their credit card hooked up to Pimlo or whatever. But you know, you know, uh you can set it up to where that smart account pays the gas costs so that some other user doesn't have to uh you know have have those costs. You can enable batch transactions for low funded wallets uh or maybe seamless UX for users regardless of their ETH balance.

So real world business applications. The delegation toolkit provides infrastructure for complex business processes on chain. Uh treasury management multi- signature control of a main treasury delegated department budgets with automatic limits. Scheduling recurring payments without constant approvals. Audit friendly transaction tracking temporary access scenarios. Contractor wallets with uh expiring permissions. event specific delegation for conferences or launches. Um I believe that tools like the MetaMask delegation toolkit and things like account abstraction um and delegation are some of the things that will help us to build like those new I don't know I guess you would say like

line of business or enterprise level web 3 applications of the future. uh without tools like this, I think it's really hard for the average developer to kind of build out those systems. This is the the the slide that was supposed to be before all the other ones. Uh like I said, they might seem like an unlikely friendship, but I think the gator is here to help the fox. Um a widely debated kind of theory in web 3 is that account abstraction will make EOA wallets obsolete. So this tension between innovation and established patterns uh reflects the broader evolution of block tech uh blockchain technology. So let's kind of examine both of those because I don't

believe it's true. Account abstraction will replace EOAs. So these points are often referenced as why account abstraction might topple the EOA pattern. So are traditional wallets becoming obsolete? uh you know they point at enhanced security. So these are all kind of uh reasons why a kind of abstraction might uh topple EOAS enhanced security multi-IG social recovery and programmable security rules. Superior superior UX no seed phrases sponsored gas batch transactions programmable logic time locks spending limits conditional execution we've talked about this already futurep proofing uh basically upgradeable as

technology evolves. Uh again, these are the things that other people say. I've been hearing these things for what, two years already. Enterprise ready compliance features and access controls built into your systems, network effects, growing ecosystem of tools and services built for account abstraction. Well, account abstraction and uh works with EOA. So, why I think EOAs will coexist with smart accounts, the reality is more nuance. Both will thrive for different purposes but they'll work together. So root of trust EOAs provide the foundational security layer for the entire system. Uh simplicity as security um minimal attack service with deterministic behavior

protocol recognition native support at the consensus layer. Hardware integration uh it's they have it has a mature security model with hardware wallet support already. uh infrastructure inertia I didn't write that one but like uh extensive existing integrations across the ecosystem complimentary roles users will use both for different purposes that's going to continue to happen uh truly trustless EOAs remain the most censorship resistant account type that there is so uh and then yeah cost cost efficiency lower gas costs for basic operations Um,

so I'm not ready to take a look at the demo. Yeah, we're going to take a look at the demo, but we're going to take a look at it kind of in slides first. So the idea behind the the demo, uh, that's that you can kind of pull down with npx, what was it? Npx my gator app. Uh, we'll see it here in a few minutes. So the delegator uh let's say that I want to let someone else use my wallet to mint an NFT. Um I can create and sign that delegation and then the delegate the person who I'm kind of giving this access to can create and execute uh create an execution and redeem that delegation. So when they redeem that

delegation, they're potentially uh like if I set up for a one-time use, they can, you know, instead of the NFT, maybe it's redeem like one ETH. That means that they can when they redeem that thing, it's done after that. The one-time use is done. They've they've they've they've gotten the ETH or maybe they've they've uh kicked off this uh execution and it maybe it sends money out to a contractor who's completed a job or something, right? So there's a uh you can see the kind of scenarios where um what this demo kind of will show off will make it very easy to do very basic stuff like that. Um VM account abstraction.

So VM is used within uh the MetaMask developer toolkit. VM simplifies working with account abstraction. It has a modular approach for composing and swapping components uh very easily. It provides account abstraction implementation and handles complexity of bundling transaction and interfacing with the pay master. Uh so you have the bundler client. So this is responsible for submitting the user operations to the network. Uh the pay master client handles your gas sponsoring and payment options. Uh the smart account um it's an abstracted kind of wallet implementation and then gas calculations. So it has methods for determining like transaction fees and such. These are uh the same kind of

components that we're going to that we'll see in the demo application and if you uh run that npx command that you'd be able to pull down and take a look at. Uh yeah, and if you want to know more about VM or if you're not kind of up to date with it, I mean if you're in frontend in web 3, you probably know all about it, but it's at VM.sh. So store the so we're going to talk a little bit about some of you know uh now I can't I can't be sure that all the code that you're going to be on see that you're going to see on the screen is exactly how it works today because this just came out of alpha and is now in beta and even from beta to production things could change slightly but this is still

a pretty good uh representation of kind of how these things work. So our delegations are initially stored offchain and only sent onchain when needed. Uh a storage service pattern enables delegations to be created once and reused. And the code demonstrates two key operations here. Storing a delegation after it's created and signed and then retrieving a delegation uh when it needs to be recalled for some other context. Um you know delegations are fully valid after being signed by the delegator. storage enables an async workflow where the delegation can be created and used later. So it's kind of enabling cases where a delegator needs to not be present when the delegation is

executed. Delegation chaining uh basically equals hierarchal delegations permissions flowing through multiple parties. You can do all of that in our demo. Uh I think we use local storage but that's because it's a demo. But in production systems you would need you know more robust storage solutions. Uh yeah so details to kind of highlight here. Uh delegation hash this serves as ai a unique identifier for looking up those delegations. Uh the delegation storage client that's an abstracted abstraction that can connect to back-end storage systems many different backend storage systems. And then you got get delegation chain. This method supports

uh retrieving not just a single delegation but potentially an entire chain of delegated permissions, right? Because delegations can be set up in a hierarchal fashion. Caveat enforcers um not a huge slide but like a lot to go over here. So caveats to put it very simply are the restrictions placed on delegations. Like I said earlier, it's the fine print limiting what a delegate can do. Uh enforcer contracts are what actually implement and check these restrictions. The system uses a two-phase verification approach uh with before and after hooks. So pretty easy

to use. The before hook function runs before the delegated action is executed. It checks if the proposed action compiles with the delegation's terms. uh and it can prevent execution if conditions aren't met and that could be all sorts of things. Uh it takes the delegation hash delegator redeemer addresses as parameters and then the after hook function basically runs obviously after the delegated action has been executed. Um kind of reminds me of like uh like the react life cycle hooks and stuff. verifies uh the after hook function verifies that the outcomes of the execution satisfies any conditions

and it can handle complex logic uh complex uh complex conditional logic based on transaction results and has access to the same delegation context as the before hook right so uh these are both used in conject in in uh connection with a single delegation potentially so some real world examples to share uh timebased restriction this delegation is only valid on weekdays. You could do that. Um, which actually might be might be an interesting kind of thing to implement for, you know, um, maybe the the delegation is for something kind of workrelated and people shouldn't be using it outside of work hours or something. I don't know. Value limits cannot spend more than 0.5 ETH

per, you know, single transaction. Uh, that would keep someone from doing something crazy like, uh, I don't know, buying a board ape or something. I know no one buys board apes anymore. Uh contract specific permissions. Uh you so maybe you can only interact with like a specific DeFi protocol or a specific contract, right? You can build that into it. Counters um I only want this delegation to be able to be used or to be be able to redeemed three times or one time. One time's often used. It's usually kind of like one time or kind of many times, but uh I see one time being used a lot in a lot of situations

because sometimes you just want to delegate something for someone to redeem it once. um the the red balloon game that we had at ECC last year. Um I forget exactly how the whole game went, but basically people went around the conference collecting these red balloons and one person kind of had to end up with all the balloons and at the end could kind of redeem that to get the prize, right? So that's a I think that's probably a situation where you have u you know can only be redeemed once. So ad advanced concepts circular dependencies the after hook uh enables complex permission structures where action A depends on the outcome of action B but action B depends

on having permissions for action A. Uh example so payment is allowed if a ticket is issued but ticket issuance requires some type of payment confirmation. Uh this circular logic is resolved by checking conditions after the execution. uh connection to the demo. So in our demo, we're using a simple limited calls caveat that restricts the delegate to a single execution. Uh and I think what what I do is I first load the demo and we show uh how to like redeem and basically no money is being sent anywhere. But then I update the demo to show uh how when redeeming it, we can

send money from the smart contract wallet off to another EOA wallet. Um, this is implemented through a caveat enforcer that counts how many times a delegation has been used. It's super simple. Um, the enforcers provide the security guarantees that make delegation trustworthy. These hooks make delegation like really truly programmable. They're not just static permissions, but dynamic rule systems that can adapt to the context of any execution. Um, at this point we're going to watch me um pull down the demo and run it.

Probably fumble on some things, but uh if you want to see the demo, stick around for that. But before we do that, I just want to make sure that this screen was left up for a minute. Um, the delegation framework is a public good. It's open source. You can come build with us at gator.met.io. the team there is super available on Twitter. Um, also you can get a hold of myself on Twitter if you want to reach out to someone on the team if you need something, if you need help with anything. Uh, also if anyone happens to know anyone from the MetaMask team, I also have my colleague Francesco. Um, he's a good person to reach out to and we can put you in touch with the right people uh, from either

the Devril team or the engineering team to get you help with anything that you might need. if you want to contribute, we can also uh facilitate that as well. So, I'll I'll leave this up while I take my last drink of water here. And then that's me on the right in Brussels last year. Really good time. So, I'm going to put this down for a minute. I'm going to try to uh fix the screen here so I can do the demo. So, just bear with me for a minute.

I was clicking the wrong button. I just want pull up some notes here. So, what we're going to do is we're going to run this npx gator app. Let's see here. So, yeah. So if you run npxcreate dash gator dash app I'm in the right folder here. Check. Check. There we go. So what we'll this will do is pull up a CLI. By the way, we also have a CLI at consensus which is like the parent

company of MetaMask. Um, you can look up like consensus CLI and uh we have another CLI that just gets you started with like the MetaMask SDK and kind of sets up a whole DAP and everything with either Nex.js or Vit. So like we've got some really cool CLI. So I was I just wanted to mention that and uh you know if if you like this CLI that one's even better and I think that the other CLI that we were have we're going to make this a template like in the other CLI but it's not right now. So, all right, we'll choose the Nex.js version because like why not? Uh, I'm going to choose the basic delegator app with Nex.js.

Um, there's also another experimental one here that I haven't played around with yet. It's uh it allows you to kind of try out the ERC 7715 permissions. I don't know a ton about that yet, so I'm not going to kind of uh go over it, but you know, there's some options here. Then I will use PNPM because I'm a gangster. Uh, yes. I didn't know that an app already existed in this folder, but yeah, sure.

Let's overwrite it. Yep. Don't worry about that big error right there. That means nothing. So hopefully the demo gods are good today. And uh I don't know if any of you guys speak in front of people or go and do like live demos, but the thing that trips most people up is like usually usually it's something stupid.

It's usually something like you for like like overwriting that existing project like what if like some environment variable was stuck around or something. I don't know. uh or I I forgot to like run npm yarn and when you're on stage you're like oh what do I do and then everything fails and then you get off stage and and you go to your computer and you're like oh I forgot to do like this small thing. All right. So, what we're going to do now is we're going to CD into uh my Gator app and then we'll open this with a cursor.

So, I I do have some notes on kind of like how all this works, but you have to remember like I I literally started kind of playing around with all this uh on Thursday and I've and I've kind of I went through it, made sure I kind of understand how all of it works, but um if you have questions, you might want to ask me later and we can sit down and kind of go through it. But, uh yeah, so this is what it gives you. You got this source directory here. You've got an app. You've got this page.tsx. You have a you have a few uh providers here which is you have the app provider, the gator provider and then the step provider. So the step provider what this application does is not really super real world. However, it has these

steps where it walks you through you know uh connecting to MetaMask, creating the delegate uh and uh you know assigning like like all the different steps of creating the delegation process and executing it and redeeming it. So that's what that step provider is there. You've got some hooks that kind of uh apply to each of these different kind of uh steps that we go through. So the delegate the delegate smart account, the delegator smart account. If you look at each of these, uh, we'll see some of that stuff that we talked about earlier, like the deploy salt, like both of them have like this same, uh, deploy salt. Uh, if I were to run this application a second time, we might have to change that deploy salt.

Uh, and then here are your different uh, contexts. Uh, you have this Pimlo service. So, if you use Pimlo in conjunction with something like this, uh, this is already a cool little uh, hook that you might want to take a look at. And then the rest of this is just the various like uh buttons that we're going to kind of use when going through the the various steps. So let's go ahead and run this application and kind of walk through it. I want to make sure I have a few things done real quick. So I have uh Brave browser open because Yeah. And then Google Chrome. Perfect. So let's go ahead and run this. We're going to run uh PNPM rundev and hopefully everything launches

up without any problems. So, we'll click on the local host 3000 here. Make sure that I'm not connected to anything yet or already. It takes a minute because I didn't pay for like the the dope internet here at the hotel. I went with the free stuff. So everything takes like a minute to load. Um, yeah. So I feel like I'm already connected. Let me disconnect from this real quick. Obviously, I played around with it a few times before I came here. All right. So, uh, the first step would to be connect your MetaMask wallet, right?

You can customize the WagMe config in this project to connect to any chain that you want and use the connector of your choice. Another thing that you might want to do is you might want to detect the chain automatically so that you're not potentially building something that has a hard-coded chain in it like I did and then you try to run it on Sapolia and it's on another one and nothing works. So let's go ahead and connect with MetaMask real quick and uh so we're going to connect and now uh the MetaMask smart contract account that receives uh the delegation. We're going to create that.

Initially, this will be the counterfactual, not deployed on chain until it's deployed by submitting a user operation. So, that's what we're doing right now. And if we actually uh you know, let's go ahead and make those changes now to the code so that we can see this because when you walk through it the first time, it sends nothing to nobody, right? So, like what how cool is that? It's not cool at all. Uh so, what we're going to do is first I need to get my PMLO key. So, I'll I'll pop that in there. Um, that's not a real key. I promise it doesn't work. Everyone close their eyes. I'm gonna disable it afterwards.

Anyways, um, okay. So, I'm actually going to stop the program real quick. Um, because I want to do this all kind of now. So, what I'm going to do right here is I'm going to I'm going to change a few things so that we can actually I'm going to set up the delegation. I'm going to fund the smart contract wallet with some ETH from my own wallet. And then that way when we redeem it, I have another wallet set up on Brave that we can go and check to make sure that that wallet receives the monies that it's supposed to. So if we go to the steps.tsx here and I think go to line like 37 or something right about here.

So, what we're doing is we're putting a little console log statement in that will uh as soon as that smart contract wallet is created, which is ex as soon as you've connected your MetaMask wallet, it's going to print it into the console and we're going to go grab that address. We're going to go stick it in a MetaMask. We're going to send some ETH to it uh so that we can fund that wallet up ahead. Now, you could do that programmatically, too, but again, this is a demo, so we're going to keep it all like kind of manual. Um the the next thing that we need to do is we need to go into the delegation utils file real quick and we need to create this execution. So before we were doing nothing we were doing like zero address and like nothing. So like nothing happens. Like how compelling of

a demo is that? Not much. Um if I had more time I would have created like a way better demo also just just saying that. But the guys who actually created this are are very awesome. Um, but I I would have liked to show something a little bit more real world. However, this again is a good way of just getting started. So, delegation, where's that one at? Utils. Delegation utils. And we need to go down here and find this guy. We're just going to replace this entire function. And you're going to see uh it's going to go from these defaults. Wait, is that the right one?

Yeah. Prepare. redeem. Yeah. All right. So, uh, now it has an actual address that we want to send. This is the amount in way. And basically, I I was trying to create an amount that was like exactly $10, but it didn't work like because ETH keeps changing. That's what ETH does, I guess. All right. So, let's go ahead and run the application now. Um uh do we need to change the account hat deploy salt? I'm going to do it because I already already connected just to show you where that is. So in the use in these two hooks right here, let's just go ahead and change this uh salt so that it'll create a new uh smart smart contract wallet for

us. That's not the same as the last one that we just ran. All right. So this is very close to being the end of this demo. So we run pnpm rundev. Oh, we forgot to go and uh we forgot to go and put money in that wallet. So, let's go do that real quick. So, we're going to open up we need to actually run the application and we will uh when we connect here, which will probably already be connected. I'm just going to go into the console and see what that uh address is. Here it is. So, I'm going to go in there. I'm just going to go to my wallet real quick and send it some money.

Uh what we say 0.005 uh 54 or something like that. 54. Yeah, that's right. All right. So, let's send that money over that fake ETH. Confirm. And this will take a second. Um, I'm gonna let that finish before I go on. Take another drink of water. That always kills time. We're coming up on time anyways.

So, and lunch is after this, I think, at 12:30. I could be wrong, but very close. Uh, and they have they always have amazing food at East Dubai. I think we can just go ahead and connect. So let's go ahead and create the delegate wallet while that's happening. All right. So the delegator creates and signs a delegation granting specific authority to the delegate account. In this case, the delegation can be used to perform any transaction on the delegator's behalf. We set up to where it can do one transaction. So when they redeem it, it just sends the money to another wallet. Let's assume that that might have been some contractor who did some work for us and they and and um and we validated that they completed the work. So to restrict the delegate account to only perform specific

specific actions, the dele the delegator can specify any caveats array in the delegation. We saw all that already. So let's create the delegation. We're going to have to sign for that. And um let's make sure that the the monies went over to the accounts. It did. Uh one thing that we could also do real quick is just go and check uh let's grab that again. So, let's pull up Sapoleia uh block explorer. So, let's just take a look at that smart contract wallet right now and see what is

there. This may take a few seconds. They're verifying if I'm a human. All right. So, I changed the salt hash. It really should have created a new one, but it's using the same one. Whatever. We can see uh the transactions here. Um uh so we see that money just went in a minute ago, and it was 0.00554. It doesn't matter that we're using the same contract wallet that I ran previously uh when doing the demo because I've already sent that money out that was in there previously. So, at this point, uh, we should be able to do redeem delegation. It'll do redeeming. And what we should see, if we go over to this other browser over here,

is that there's negligible amount of ETH in it right now. And when this finishes, we should see that update. So, that's the uh the delegation being uh kind of redeemed. We can view it on Ether Scan. Got a nice little button there. And then in a second, this will update. So, it says value zero ETH. It's working. There we go. The money is over in my wallet. So, a user of a DAP, a user of a DAP who signed in with a certain wallet was able to redeem a uh basically redeem a a delegation and make

something happen on chain without having to deal with any of the, you know, other than kind of connecting to MetaMask, uh, and be able to do something onchain without paying any ETH or you know some what if this was some type of a admin application or something and someone that was using it is just not super web web3 savvy. Um that's why I think kind of account abstraction and delegation and all this is a little bit of the future or we could say that you know years ago that that this was the we've been saying that for a long time and Dan Finley has been a big uh kind of advocate over at MetaMask. He kind of kicked off the whole idea around delegation. He was I know that a lot of

people from MetaMask helped to kind of work on delegation and 4337 and these various kind of ERC's. So it's very cool that within the last few weeks that we're seeing a product like this come out of MetaMask with a tool set that can help you to kind of create this stuff very easily. And I'm going to wrap things up here, but like you know uh this is not the most complicated application. You can already kind of tell that like all of the complicated stuff is in this util and some of these hooks, but I guarantee you that if you're uh you know, even the average developer, you can kind of walk through this and even if you don't get it like chat GBT it and figure it out. Um so yeah, so that's my demo so far. That's

my workshop. It's more of like a thought shop or a kind of hack shop. Um unless someone happened to follow along, but um yeah, that's it. If you have any questions, you can catch me at lunch. Uh, and that's what I'm going to go do is get some lunch. Thank you guys very much.