Base 🛠️ Simply UX with Account Abstraction and Base Paymaster

[Music] hey guys thanks for coming I'll give you one second so hey my name is Carl fluke I work on the base team as devell uh thank you all for coming um so the agenda today is this is going to be kind of a speedrun because I have two different demos to show um so first I want to give you the quick thesis of B base and why coinbase wanted to make a L2 um just show a hands who here has done a account abstraction before 4337 we got one okay cool so then I'll do a super quick overview there is it's a little bit complicated um but I do have two quick starts to get you kind of going so one with the front end so kind of like how does this make your end user have a better user experience and then also as a developer like you can actually use Smart contract wallets to deploy your contracts and there's some benefits to that um so first you know kind of the I'll run through this quickly because I want to get into the code um of why did we make base so um coinbase has like 120 130 million um retail users and it's like less than 5% of them are truly on chain so we wanted to be able to truly bring those users on chain and show them that they have a can have a good user experience so we've seen um onchain users continue to grow the more users we have uh the more developers can build things for those users and have that user base um and then as we get more developers and users then we have all these uh like actual verticals that happen so friend. te is a super popular social app um if you're ever in New York download Blackbird they have a bunch of restaurant Loyalty Rewards um gaming so definitely um like if you've heard of the mud framework it works on um uh base so you can launch a fully onchain game um base paint is actually super fun if you haven't seen it base paint dxyz it's like a collaborative pixel art once a day once a day you they vote on what they're going to make um and then lastly our stand with crypto um so us regulation is always fun uh so we do purposefully have like a regulation arm that focuses on doing that advocacy okay so the big thesis is that you see the blue line it's been pretty straight ethereum's been at capacity for a while now um l2s are coming um they're here now they're continuing to grow and more of more of those transactions are going to move to the L2 that's that red line it's at 5x of L1 right now and we see that continuing to grow um so the crazy part of this is is there's only 10 million people on chain across the world today um so we all have a lot to build uh to actually hit uh the full population um so some of the key blockers of normal retail people using it is uh cheap block space um so that is going to be drastically improved with the Denon ethereum update um hopefully in February is what we're aiming for um the base team and the optimism team have been getting the op stack ready for it um for the past two or three months um another big part is wallet technology so I know that as a developer I've done wallets so I'm already super used to it um but for a normal user they get confused by it they don't understand that assets can to be on different chains um it's confusing for them um and then lastly is identity um coinbase launched like cbid a year and a half ago or so um that was a starting point but we can go a lot farther um we started to bring onchain attestations to where you can um on chain specifically on base be able to say hey I am a kyc coinbase user and yes I do live in this jurisdiction and we're going to start doing more things like that to where we can have um more identity directly on chain so you can actually like uh verify things in your smart contract um yeah we've been live since August there's a a ton of apps um just out of curiosity who has like used Bas as a consumer we got a few has anybody deployed on Bas yet okay well that's going to change here we go all right um so lastly what's new um we're a core contributor with optimism so um the last uh Canyon update which we actually just launched on Tuesday on testnet um coinbase made half of it brings it up to Shanghai and capella so you can use like the newest solidity um features on base now which is great we launched the polia test net um gorle is going away in January so moving to that and then relevant to this uh talk is that we launched a pay master um in testnet so that it's just easier like um we kind of want to move away from this world before you need a faucet instead control things through a combination of pay master and attestations okay cool um that's the that's the quick base part um and then let's get into actual account abstraction so this is 44 uh 4337 based account abstraction uh stackup has like a fantastic quick start to this so I'm using some of their diagrams but I just want to cover some of these high level items so that you have an understanding for the demo so first um the user does user operations instead of transactions um so just know that's important essentially this is um the gas fees are done a little bit differently and you want to encode the function data I have code examples to show this but just know it's a little different than doing transactions it's more or less the same you still use the AP um next you have a bundler so there's a bunch of these out there um stackup has one Alchemy has rler um there's like five or six of them um for my code example I did use alchemies um but I know there's uh other providers out here and on the base ecosystem there's like five or six um next you have the entry point that's probably the thing that you will do the least unless you're making your own smart contract wallet um so honestly we can skip skip right past that um next is your smart contract wallet so that is kind of like if anybody's here for the safe presentation they were talking about how you can have your smart contract wallet and have modules and plugins um so base is kind of um uh we don't make our own we have the ecosystem Partners make that um in my example I used alchemy's um light account wallet uh so you can choose to either directly build your own or the other big popular one is called zero Dev um and then lastly is the pay master so the pay Master makes it so you can take your user operations and you can estimate the gas and you can make the pay Master pay this um so for user experience that means I can actually get a user to have a smart contract wallet and do transactions without actually having to truly like fund a wallet or know what a wallet is so like that's kind of the goal is that we want to make the onboarding and user experience very much more friendly um and bring users on chain um so here's kind of the general flow is that user operations uh go into this m poool the m poool bundles those operations into a transaction um it takes those transactions and it goes through each smart contract wall it's entry point the entry point is doing a validation Loop so it's making sure that like this user operation is actually doable um once it's valid um then you can do the execution Loop so that's telling the smart contract wallet hey from this wallet please go call my smart contract so that could be mint and F it could be whatever smart contract call you want um and that's kind of the loop the part that is left out here is the pay master so the bundler or the US user operation can call the pay master and get a signature and that'll make it so the pay Master pays the gas for the user um the big things that this helps is I said ux but multi call is the other big part so if you want to do like four user operations in the same transaction you can do that um so like if you're doing defi stuff and you need to approve token a approve token B then swap it and then stake it do that and allinone go like that's what the user wants they don't want to hit uh go approve go approve and lastly uh gas okay so code time so here I made just a super uh let's make that better made a super simple app because I didn't want to spend much time on styling so I'm using rainbow kit and that is too big um so it's just using the embedded wallet so I'm using an EA just for this example as the owner just because I did not want to show like um I didn't want to pick a preference but specifically with Alchemy you have the choice of all these providers um and then they'll have like sign in with Google sign in with apple all that kind of stuff um but I wasn't sure I didn't want to pick favorites so I'm just doing uh eoa so connecting my coinbase wallet here I was already connected um so by default uh since uh smart contract wallets are deployed with create 2 I know that address already um so technically I can send funds to this address before I actually like deploy that smart contract wallet so that's one benefit the next benefit is once the first um let me go to a wallet that actually doesn't exist um just to show that like this address doesn't exist uh so here's that address when I hit connect it's now a new address so this is my actual wallet that is that new smart contract wallet and when I go so there's there's nothing on on the blockchain that is has nothing deployed there it treats it as an EA so once I mint this in Ft um if you're using a social provider you don't need to sign anything so this should not exist if you use like sign in with Google oh okay so I am minting that nft in the the background and here's my transaction hash and then if I refresh this this is now a smart contract and it has an nft in it so the user didn't pay gas they connected and uh they're good to go sorry um so that's kind of the user experience that we want is that I went to this I have a smart contract wallet I into an nft I didn't pay guess like I am onboarded uh with an nft and I didn't have to do anything I did cheat a little bit with the OA just cuz I didn't want to uh set up like sign with Google or Apple and I don't know which providers uh here are the favorite um all right so I ran through that super quick uh part two or I can run through the code um how's my size bigger a little too big okay um so this was made with rainbow kit and Alchemy and wagy so essentially I just specify what chains I want to configure so I have Bas Gorly I'm using Alchemy provider just so I have a reliable RPC node I'm saying I only want to support uh injected wallets this would be where you switch it to any of those signing providers um privy has been really popular on bass um there's a few others uh I set up wagm um so that's just saying hey these are the wallets I want to connect to and here's the public client um I do my providers for rainbow kit and wagm and then I have one custom one here for smart contract so that's kind of what does the actual smart contract setup for you and so what this does is it's essentially using the Alchemy um smart contract s um we also have examples are um bomy zero Dev there's a they're on the base ecosystem but what this does is when it um ESS has a wallet connected it goes through and it sets up my Alchemy provider and it creates that smart contract so that smart contract doesn't actually get deployed here it's just doing the create to address and then the first time any transaction is sent through this it'll check to see if that is actually deployed if not deploys it and then it does whatever user operation you specify uh and then I just have middleware here um I'm going to I'll show this one the middleware is essentially to use the base pay master so in the Alchemy SDK I can say hey go talk to this specific URL to get my pay Master signature um so that's eth pay master and data for user operation you pass what the bundler said was the um gas amounts so this should look kind of like a EIP 1559 except they add this prever verification gas and verification gas limit um I call that pay Master it gives me a signature and I just appin that to my user operation and now my um user operation should be paid for um so I tie that middleware to it uh and then I'm just saving this into context so that I can use the address the signer and the public client anywhere in my code um next is good old the mint the nft button um this should look very similar to like what you do for um normal front end is I'm am just saying hey smart contract address send a transaction from my address to that nft contract um here's my nft ABI I want to do a safe mint and I want to Mint to this address so that's really like from a front end perspective the only difference is you have to en call call encode function data um so it should be fairly straightforward so that's a count abstraction on like the front end um so you get the benefits of easier onboarding uh you get gas payments um and it's not that different from what you're used to so the second demo I want to show is that we also can use this to deploy smart contracts um so who here has deployed something using hard hat we got a few okay cool um that's a little too big there we go um so essentially uh this should feel very similar I did use VM here I've been starting to switch to VM on the hard hat side um as well they finally made a plugin like a month ago so you set up hey what networks do I want to connect to what is my RPC URL do you want to use private key or pneumonics so that's just very typical setup then a traditional way to do uh deployment of a smart contract is you just say hey deploy this smart contract I didn't want to focus on the smart contract so I just took like the default storage one um to get you started right uh nothing crazy uh not the point of this um so I this is without 4337 so I specify I want to deploy that contract and then I can do things like I can um write to it and I can read to it um so that's uh without account abstraction so account abstraction does have a little bit more so here I'm pulling in those same um smart contract libraries um I also pulled out the pay Master into a separate file just make it a little easier to read because it's the same we saw on the front end um the difference here is that I pull that local account assigner um just from my um environment variable the pneumonic I have saved so my environment variables here I have my RPC endpoints I have a uh my private key 12 word pneumonic uh and I have a deploy proxy address um that was part of the canyon upgrade um I do have one deployed on mainnet if anybody needs to use it um it just helps with the create to so exact same as the front end is I essentially set up that signer and that smart contract wallet um I add in that pay Master middle middleware I encode the function data which in this case is deploy data um I am using Create 2 here so purposefully I am uh using the nons as part of the salt so that I can know the smart contract address um I can explain that in further detail um but I'm going to run out of time uh so let me run through this first um and then essentially it's the same as the send transaction it's just the data is essentially the salt and that um construction data so I can actually deploy a smart contract through this wallet and then similarly I can write to it and I can read from it so um here is an example of of updating what value I'm storing into it to two three and then I am retrieving what is that new storage value so if I uh deploy a base Gorly if that's it's kind of small okay so that is showing kind of like what's actually going on when you run this um uh so essenti you do a dummy pay master so that you can do a kind of like a a bundler gas estimate and this is just me reformatting it and then I call the pay Master again to get the real um signature for the pay Master which is one more down uh way down or I may have just did it when it wasn't defined but either way so this is the new smart contract that was deployed and then it stored that new value Val so if I go back to Gorly um this is that transaction oh and it sent it to the um so this is why I use that create to is because it will show the transaction sent to the entry point I am more interested in what the bundler transaction was um so if I look at go to the screen uh where was that that's the oh um I was purposely this to show up jippy scan so jippy scan is made for 4337 and it kind of Loops together that whole entry point transaction with also the bundler transaction so you're not like having to like combine them together this does it for you um and the main things I wanted to highlight here is that you can have multiple user Ops in this um so I only have one but if I had multiple they would show there it can also show me what the gas fee was and that it verifies that my pay Master actually paid the gas for me um and then I can see kind of like what it actually called um and it has like a deeper Trace um so the main benefit of that is that like in the future coinbase um we want to use a combination of our at testation of retail users to be able to like subsidize some gason main net and that would be both as a developer and as a retail user um so s think of something is like um uh coinbase could make it so that uh for 20,000 people we could make their first three transactions on a have no guess um so that's kind of the plan that we're going for um and these are kind of some of the tools that we have to put together to get to it okay um so those are those two code repos if you want to use them as reference um they are just using the account uh Alchemy account abstraction um as I said we support other uh layers of that right like you saw the safe smart contract wallet earlier there's bomy there's stackup there's zero dep there's a bunch of them um but these are just some examples uh and that's it that is uh my social stuff if you have any questions otherwise thanks for your time cool