Sub Accounts: Base Account with no pop-ups

Hi everyone and welcome to this new episode of the series base accounts for vibe coders and experienced devs where we explore base account features and show you how to implement them if you are a vibe coder so with AI agents but also if you're an experienced devs if you want to implement the feature manually uh we kind of go through that uh in these episodes. And so today we will be looking at sub accounts. And so what are sub accounts? Very very quickly, sub accounts are appsp specific accounts that allow you to keep the transaction confirmations, right? It gives your user a better experience.

And so without diving too much into the technical details about of of how that works, I can show you exactly how that looks for your user. And this is so this is a demo that Stephan has put together. It's great demo to showcase how sub accounts work today. So classic sign in with base, right? But here you can see there's a line that says create an app account.

Um and so we go we sign in. I've already signed in. I've already I don't need to use my pass key again. But if it was the first time you signed in, you would need to use your pass key again. So as you can see, I have some USC to play with.

But there's one thing that I want to show you before I go through this demo is actually if you go to account.base base.appconnected apps, you will see all the connected apps that you have and one of them is sub accounts is this sub accounts demo. And so it's a very cool, very neat. So you get to your user gets to have their universal account, but they also get to access these sub accounts even outside um of your platform.

So that's actually what's pretty cool also about sub accounts is that it is related to the universal account as opposed to like having multiple wallets that are scattered in between multiple apps. Um, and so as you can see here, if I click tip, it will prompt me to tip, right? But what it will do is that it will ask me if I want to skip further approvals, right? So this is a a platform that takes forecaster posts to tip them. You know, it's asking me if next time I don't want to wait for the transaction popups, but I can just consider that my action is approved if I click on the button.

And so that's what it does. And and this is this is being done specifically with the help of spend permissions. So the user gets a certain amount of sorry the app gets a certain amount of spin permission per day or per a different period from the user right and so the app gets to spend that if the user chooses to do so and so I'll say yes right I'll say yes so I'll I'll I will include this transaction so that is done it's included um and now what we will see is that if I want to tip other users there are no pop-ups. So that's the magic of sub accounts. And so how is this implemented?

It really is not hard. And so if you look at the guide here, you will see that there's ample detail on how to do this. You can go to docs.base.org/base account/improveux/sub accounts.

But basically, if you go to base account docs, you will find use sub accounts here that you can follow this guide. And so yeah, let's go ahead and try to implement it and see how it works. So, I put together this cursor project and I wrote this prompt here. As you can see, it says, I want you to implement a very simple Nex.js app that shows base account creation using the quick start in the guide.

I'll show you in a bit. And then a button to test send in a simple transaction. It could be I said it could be to send USDC to a specific address on Bolia. Just very simple. a syn transaction to make sure that we're accessing the auto sub account flow.

And in the guide, if you take a look, so here in the quick start, you will see that it's simply creating a new instance of the SDK with sub accounts as part of the config. And if you go to auto spend permissions section, you will see that if you want to turn off spend permissions, you can say sub accounts funding manual. So this would turn off the auto spin permissions asking which makes it allow you to use sub accounts but without the autofunding mechanism. Right? If you have a spin permission going on, then that's great.

If you don't have a spin permission going on, then the sub account feature is simply not going to work. And so, yeah, so you get max flexibility while actually in the quick start, you have the config that would be very much enough for what you need. So, let's copy the guide and paste it here. You will see that I can just copy paste and I will let it run with this prompt and I'll be back to show you the result. Okay, it seems like the agent is done building and so we can try to run it and see how it goes.

Beam install. So it's given us this error that says that the version of baseorg account is not right. So I fixed it to latest. Let's run it again. Okay, it seems to have run.

Let's do npm rundev and see how this looks. Okay, it's not too bad. Connect wallet. I don't think this is the language we want to use here, but let's see if this actually works. So, I already have a sub account.

Perhaps that's why I was not prompted again. And if I click send USDC, it asks you to use the primary account. And so if I do that, then I get this auto spin permission um that I can confirm to give access to. This actually seems to be working, which is absolutely great. So after that I can just be send in USDC with the spin permission that I have here.

So be send in more USC and then we have a transaction ID here for the transaction that have been sent. So this seems to work. This seems to be fine. Yeah, let's take a look at uh what is in the code that made it so that we got connected here without seeing the sign in with base window. I think one thing that it took from the guide is ETH request account.

So perhaps here we could use wallet connect. I think this might fix it at least in a very simple manner. Let's see. So if I do this now I get the wallet connect. So I think that's the difference here is that you can actually as soon as you initialize the SDK with sub account being the used config there you get to use all the RPC methods that you want with that sub account.

And so that's very cool like you can use wallet connect which allows you to you know sign in with base. So you can have a sign in with base with your sub account directly and you end up you end up with it with your sub account. So very very very interesting. So actually I just realized that that does not work. Um and so I looked here and what I did is that I added a uh a step where I call wallet connect to use sign in with base and then I call ETH requests accounts.

Let's see if that work if that's going to work here. So we get the sign with base and we get the sub accounts and we can send with a sub account. So that's the trick is that you would need to call sign in with base by using wallet connect and then after that you can call ether request account. So I'll try to push this code to a repo so that I can share it in the comments. Yeah, very happy to have gotten this far in this video and actually um kind of surprised that we got this good with with the AI agent for the experience devs.

If you want to take a look, we can take a look very very quickly at the GitHub repo of the demo which I haven't seen before. So I will be discovering right with you in this video. So shout out to Stefan who created this demo. As we can see here there are a few components. I think one interesting components is the providers.

He is using WagMe. In this case we will be taking a look as well at the WagMe config here. So in the connector he is defining uh these um he's defining the config in the connector with WagMe. So this is a very interesting approach. For this approach to work you need to override the version of the SDK.

So make sure to do that if you are going to be using what he's using here with WagMe. Um yeah very very cool approach as well. very interesting way of doing it and would definitely recommend you go and check out the the repo that I will put in the comments below. So yeah, thank you for following this video and see you again in the next episode.