Alchemy 🛠 Build-a-Berachain: Zero-friction onboarding with Account Kit

hey and welcome to this Alchemy account kit Workshop my goal is to make this the most fun Workshop that you've ever watched and uh that's pretty easy because we just released a new version of account kit version 4.0 you can see it in the top right corner here and uh this is going to make web 3 development super fun and easy uh and you're going to see that in just a moment so if you want to follow along with what I'm going to be doing up here go to account kit. alchemy.com jump into the quick start CU this is really where I'm going to be kicking things off so hopefully even if you're watching this when there's a future version out there the steps should be the same go into the quick start clone it and do everything that I'm doing here all right awesome so let's go ahead and do that I'm going to go to the quick start I you could use jarn or npm to go ahead and kick this off uh might as well use npm since I'm on it so let me go ahead and bring this into my terminal and if you want to name it something else you can change the name right here let's call this uh account kit fun cuz I probably already have an account Kit app in there so let's give it a minute to install all right hopefully my video editor sped that up for you uh just kidding I don't have a video editor it's me so thank you future Dan for speeding that up all right so now we are in here let's go ahead and jump into that account kit fun repository and I'm going to open this up into my editor I'm using cursor AI it's basically a VSS code Fork that uh has a bunch of AI baked into it so you're going to see some AI tools inside of here really kind of useful uh for me and uh I think a lot of people are finding it really useful today so you're going to see some of that baked in here but mostly it's vs code so let's just jump on in here and check this out cool so what we have here is a starter repository it's a nextjs application uh that looks ugly but I think it's okay all right so this is a nextjs application and it's going to have everything we need to get started with the account kit right off the bat uh it's just got a few components in here it's got the page it's got the layout it's got the providers which is going to be some setup that you don't need to worry yourself about too much the main thing that if you're going to do any configuration you're going to need to know about is this top level config.txt with account kit as a 40 uh so you can have your users log in with a familiar experience like a Google ooth or a Facebook ooth which is super nice because they don't have to worry about onboarding with a wallet right away they can just jump right into your application say hey is this something fun and then uh you know figure out whether they want to uh bake in more security as they start to uh accumulate value in your application whatever it is and they say oh I use this application all the time I want to now secure it a little bit more right and you you can go through those steps in that user education Journey later on but at first just tell them log in with Google we got you and we'll hook you up with a smart account all right sweet so that is that if you want to configure this I don't necessarily recommend just like doing this although you can where you can just sort of get rid of Facebook there if you don't want to use Facebook or whatever we're going to be using Google in this case so that's fine uh if you actually want to edit this stuff there's an even better way of doing this which is if you come back out here to the um the account kit you can actually see there's a demo and if you click this it's going to bring you to demo.

alchemy.com and you get this like nice little wizard for like uh configuring your um your UI here do do people still say wizard am I dating Myself by saying wizard you can you have a UI for configuring your UI uh so you could see here you could toggle off social if you don't want social what this is going to do is when we've uh toggle this code preview over here we can like click these buttons and you can see it's getting rid of these things you can also theme it so if you have a theme you have a logo you have a color that you want to sort of put on here you could do all of that in here see what it looks like put it into your application by just copying it over the config there and then you're good to go so that's how I'd recommend doing this uh for now I'm just going to go back over to the account kit uh quick start in case we need any more of these instructions to kind of jump in here I think I should be okay though uh this should be relatively straightforward what we really need is the Alchemy API key and this little note here is going to tell you where to go so I'm going to click on that so I guess I don't need this tab anymore and I'll keep my tabs to a minimum this is going to bring me out to my dashboard it's actually bringing me down to account kit over here but first I'm actually going to go and create a new app so you can see I have one app what we're going to use for uh this particular application here today is beer chain because we're going to have a lot of fun with this application so we're going to be building it on be chain so let's create a new app so you can see what that experience is like going to go in here to to create new app I'm going to call it Bara fun and we're going to have some Bara fun uh and if barah is the asset on bar chain does that make it a Bara asset I feel like it's all good for uh puns all right gaming there we go now let's go in here and we're going to click on bar chain there it is sweet so by default you can enable all evm if you'd like I'm just going to do bear chain because that's what we're going to be doing here so that's going to hook that up you can see what services we have available at Alchemy for Bearer chain here so I'm going to click on all three so we get these enabled we're going to want account kit we're also going to want our gas manager API because we don't want our users paying gas we're going to abtract that all away from them make that super easy so let's go ahead create this application we have Bara fun all right this is where we're going to be doing all of our fun Bara stuff so my API key is up here in the top right corner going to copy that over bring it in here just paste it now now what I want to do next is configure my account kit setup where I can set up that I want to use my different social applications and also set up my gas manager policy so you're going to see what that looks like let's go over here down to account kit in account kit you can see I have a bunch of configurations I'm going to create a new one we're going to call it Bara fun and we are going to attach it to Barun and I'm not going to do email I'm going to take away email here uh cuz then you can configure like your email put in a logo put in all that stuff I'm not going to be doing Eagle email in this case I'm just going to be logging in with Google because that's what I really wanted to show off here and I'm not going to set up any other uh credentials for now but you can definitely do that for uh better security we do have to set a whit listed origin uh in this case I'm going to be using my Local Host 3000 so that's what I'm going to set here but if you were going to deploy this to production you'd want to set whatever domain you were going to be deploying this to okay great so let's go ahead and create create that config we created the config awesome the other thing that I want to do so you could also grab your API key that would right there that would have been helpful the other thing that I'm going to want to do is I'm going to want to go configure my gas manager so that's the next step that's what I'm going to do now so let's go over here to gas manager create a new policy and let's call this bar fund policy all right and we will do it for Bara fund um bar chain bardio that's the test net there cool so we'll click next we are going to not set any limits no limits no limits everyone use all the gas use the gas if you want if you want to put this in production you might want to set some spending rules and access controls I am just going to click all right and we have our policy there it is you know what I'm realizing just now I should have named it I should have named it baruda there's there's another pun for you you know that song that you going to burn to the wick Barracuda all right all right here we go I won't put Barracuda we're going to take the gas policy and we're going to put it over here we're going to do uh policy ID so that's also going to be here on the config you can toss that in and what this is going to do by default no other configuration necessary in your application it's going to make it so that all of our uh transactions really their user operations but you can think of them as transactions are going to be sponsored gas sponsored that means our user won't have to pay for the gas so by default that's going to be hooked up which is just super cool uh to the policy that we just created with all those rules in there so this is going to be super nice and easy and frictionless for our user all right awesome so now that we have this in here uh let's just check that we can log in right if we can log in then we have everything hooked up properly and we could see ourselves with an account once we log in it's going to take us into this page. TSX and it's going to tell us our email address really I would love to see not just the email address but maybe the account um and for the account what we need to do is we need to decide what kind of smart account we want so this is actually going to use another hook so these use hooks by the way you can find them documented in the account kit use user use signer status all this stuff you can find them in the account kit so you come back over here and you just sort of search them in the search bar and then you can search for things like use user and then you could click in here and you could see what it is going to return what you're going to get out of this how you could use it uh all that stuff so the one hook that I want to use here that's going to give us the ability to um get our account is going to be and there's a couple different ones that I think you could use to get an account but the one that I'm going to use is use Smart account client so this is going to give us a client um if you're familiar with the concept of a client from VM it's basically the thing that we use to interface with uh a chain or whatever Services you know RPC and in this case the bundler uh so it's a concept that comes from VM if you're not familiar with VM I do have a 60-minute video on VM check that one out uh to get you up todate and uh knowledgeable about this Library so you smart account client is going to be a client that's configured to talk to uh the Alchemy bundler as well as the RPC all using the configuration that we set up there so we're going to go ahead and use this smart account client and what this is going to do is it's going to allow us to specify what kind of account we could use uh you could use here either a light account or a modular account and then you have further parameters to configure it beyond that I'm just going to use a light account here that's going to be the cheapest thing to deploy modular account is going to give you a whole bunch of other stuff because you have an whole ecosystem of plugins that you can install in the account in case you need other things like Keys stuff like that but here I'm just going to use light account so let's go ahead and pull that in uh so let's get our light account I don't need these parameters I am just going to import use Smart account client that's going to grab that from account kit react we're going to use a light account and what I'm going to get back from here is I'm going to want that client in a sec so I'm going to keep that there but what I really want right now is the address so logged in as the address let's do that and then that's going to tell us what our address is that we control uh with our with our uh Google account right we're going to log in with Google and then we're going to get a smart account that we can control on chain right it's going to be a really nice user experience you know for a lot of use cases you might not even have to show the user the account that they control right like most users don't want to see hex aimal in their application it's like what is that you know thing there uh so in this case uh we we'll show the address just so we know it's working we know we have a smart account that we control uh out there oh one other thing that I did not do is I am going to want to change is is I do want to change this chain over to Bar chain uh we're going to use bar chain Bia which is the test net there and that is going to go ahead and set us up uh so that we can do all this stuff on bear chain all right sweet so I'll save that and we'll pop on back over here into the application oh I didn't start it so let's start it we're going to you could use either yarn or you could use uh npm in this case CU we have a package Json lock and we also have a yarn lock so I'm just going to go ahead and do yarn first I'm going to need to install it so magic Dan speed it up oh here we go all right cool so now we can do yarn Dev and we can go ahead and pop that open Local Host 3000 okay great so let's do the one thing that we can do on this page which is log in all right sweet and we have our Au components for us again you can style these in demo at demo. alchemy.com you can change whatever you want to do here I am just going to click Google uh to go ahead and sign in with that and there is my Gmail account and we will log in and there is my account D9 that's pretty cool actually because I'm Dan and my favorite number is nine so D9 I like that account so this account is going to be an account that I can control on be chain this is commonly referred to as a counterfactual address that's a big word it basically just means it's an address that I control with code that has not been deployed yet once I deploy code I know that I can do it to this address this is a deterministic address that I can then control to um do stuff just like a regular externally owned account right so for all intents and purposes I control this account with smart contract code that's the tldr and uh to point this out if I wanted to get this account back again it's tied to my Gmail account right as a user so I just log out log back in go to Google click my name and I'm logged in sweet there we go all right cool so let's do the fun stuff where we deploy a smart contract on be chain bardio and we um you know interact with it so let's deploy like an nft and then we'll drop one of those nfts we'll Mint one to this address D9 uh cool so what I'm going to do is I'm going to pop up remix over here and then we're going to do some nft magic in this corner here so let's I don't need this dashboard anymore I don't think I am going to use this tab to just go out to open Zeppelin let's grab erc721 and if you've done this many times before you know like me that it's going to bring you from Google to the 2.

x version watch out for that it brings you to 2. X that's just uh how it's been indexed but you want to go to 5.x which is the latest version of their docs and then you can go out here to erc721 and grab yourself a smart contract from a pretty recent version of solidity I'm just going to pull this over here and by the magic of remix oh hey it's going to tell me hey you just pasted something in be careful we're good it opens up and audited here we go okay press okay and then um by the magic of remix it's going to go ahead and pull in the dependencies already for me so you can see it already pulled that in which is super super cool uh we do got a red squiggly here which I think that's just due to the import um we should also be importing erc721 cool so if that documentation is open source over there and open Zeppelin somebody go put in that pull request yeah we got to put the import erc721 right there that's a good piece of Open Source contribution that you could do all right cool so uh now we have ourselves a game item uh maybe this will be our Barracuda right there is our baruda it's a game item and uh that's definitely not how you spell barracuda but I think on bar chain that's how you spell it Barracuda cool all right and we're going to award this item that's pretty cool I guess we could just call it mint right and we're going to pass in a token U you know what I'm not going to do a token U so I'm just going to make that an empty string whatever I don't want to change too much code here um we don't even really need to set a token U I'm going to take that out even though this is an ERC 721 URI storage not the point we just want to drop an nft into this and then we want to interact with it for this demo keep it pretty simple so what we want to do is we want to Mint and then let's do another function where we're changing State I want to read state in this application then I want to change state to show you how to do both with the account kit and then we'll cover all of our bases and you'll be off to the races all right cool so let's go ahead and say function uh battle because I like to think about all of this in terms of games we're going to make this external and when you battle with one of your nfts you always win uh that's pretty lame but in this case let's just make it so that you always win uh we're going to say take in the token ID because when we mint it we're going to Mint a specific token ID to the player to my D9 account so I'm going to take that token ID and I am going to uh manage some state for it so we're going to create a mapping that is going to be a mapping of a u token ID to a u number of wins for the wins so every time that you battle you win now you can imagine that maybe you could battle a different token ID you could say take my token ID and battle somebody else's and maybe there's attributes on chain and maybe there's some onchain Randomness where you could actually have a battle here that would be kind of cool but uh for now you you battle you win it's like a proof of work just keep battling keep winning that's going to be uh fun enough for our demo so we're going to do token ID uh plus equals 1 I think we had Plus+ right does that compile we used to not have Plus+ and I just always forget where we're at in solidity all right cool so we got Plus+ uh and oh yeah it's right here right in front of me okay so let's go ahead and uh also do one more thing which may trip me up but it's going to keep me on let's make sure whoever um is the person who has this token ID is the one who can actually call battle right so it should be require and I believe there's like an owner of method that comes in uh from erc721 and if we pass in the token ID is going to respond with an address that's not telling me but I believe it's going to give me an address as a return and uh we'll make sure that's going to be the message sender and it looks like a compil so it looks it's happy so require that the person who this was minted to is the one who's battling you can't battle with my nft and start winning with my nft although you know if if it was just about winning and you know then maybe you should just let everyone win and battle with your nft but here we go anyway so let's go ahead and compile and um great so let's deploy this contract I think we are good to go with it so we're going to go ahead and deploy this to Bar chain over here it's going to be in my injected provider hopefully metamask is already set up to look at that barah I believe we are on bar chain bardio awesome all right cool so we are going to go ahead and if you ever need the um the chain information you can go out to chain list just search that in Google and then you'll get the evm chain list you could add it to your metamask whatever uh and then you'll have that good to go I have some test net in there testnet Bara so I can go ahead and um deploy this contract so let's do that we will deploy it and it's going to cost me a little bit of Bara and okay it took a second so I probably sped that up and here we go we have ourselves a contract and let's go ahead and use this one so what we're going to do is we're going to Mint ourselves some Barracuda here we go so uh let's go back over here to get my D9 account this is my lucky account uh I got to always stay on Local Host 3000 with my Gmail account and I will always have access to the smart account here so let's go ahead and transact with that we're going to award it to my account and that should go through boom all right cool so we got ourselves our account so what that should mean is whatever that first token ID is um which could be one or zero let's go ahead and check that out so if I go over here here to owner of the token ID and I pass in zero let's see if I'm the owner D9 all right so that's me there we go cool so I am the owner of that which means technically over here uh from my Gmail account attached to this application I can control that nft right but we need to add some buttons in here in order to give me access to that nft maybe we just want to First log out instead of success how many wins we have so we can see when that wind increments right every time that we call it we can battle and then we can increment it uh that sort of thing right so let's go ahead and do that in our application we'll do two things we'll try to log out the winds I maybe we'll do that first and then we'll uh add a battle action where we can then go and uh move the nft forward and then you'll see how to do both read and write to uh the blockchain all right great so let's go back over here close out of this for now uh Reading Writing to the blockchain the first thing that I'm going to do is I'm going to need that contract address so the contract address is not going to be the zero address but nice guess and we're going to go over here to this one that's my game item my Barracuda and uh in order to interact with my contract I'm going to want to do both reading and writing my reading is going to be a um is going to be wins right we're going to look up wins and then right is going going to be uh uh mint right so we're we're going to do the mint function so my ABI is going to look yeah kind of like that I want you know this is kind of helpful that it leaves it like this but I don't really know how to do the Json quite R right because then I got to do like the arguments in here and I don't want to guess this there's a handy thing where you can do like human readable functions and then parse that to ABI and VM has one of these functions it's called parse AB I uh and ethers has it too a bunch of libraries will have this sort of thing so what you can do is you could do something like this and then oh hey AI kind of helped me a little bit that's not quite right uh mint is going to take a address right it's going to take an address player uh which sure we can call it two it doesn't matter what you name it um it really just matters the name of the function and then the parameter types that's how you got the function hash that you're going to Target and then wins is going to take yeah it is going to return a un 256 this doesn't actually return a bull uh wins is going to take in a token ID right and it's going to return how many wins I have un 256 yeah that's pretty good that looks like my contract ABI so that's going to work for me and what we're going to want to do now is we're going to want to that's interesting that would be if we have this used contract read method uh but we don't have that that's a wag me hook but we want to use the smart contract client that we have right here so instead what we're going to do is we're going to create our own hook where we're going to read this that's going to uh be triggered once this client is defined so let's go ahead and do a use effect where I'm going to pass in the client here and I know one thing that's going to come up here which is I'm going to want to use a weight in here because I'm going to want to read the contract so I'm just going to do an sync iy right off the bat so I can use a weight and uh inside of here what I'm going to do yeah that's that's probably smart we're guard to make sure that the client is defined if it is defined then what we're going to want to do is uh no what we're going to want to do is we're going to want to say uh const wins is going to be await client. read contract yep Rec contract is going to be the method that we can call on our client and then we could pass in some stuff that looks a about right the only thing that's wrong here is that this number should be uh a big in so we're going to pass in big int there so we're targeting the function wins using our contract ABI from up here uh which is like there and then we have our contract address cool so AI is really helping me out there hopefully it's not distracting watching it in a video and just having the AI guess still debating whether that's helpful in videos or not it does speed it up my thought process a little bit but sometimes I think maybe it's easier just to see me think through all these things uh although sometimes I have to refer back to documentation so this is a trade-off all right so the AI helped me write that Rec contract wins we're going to get those wins back we're going to log it out let's just do that see if we can log it out we get we should get zero back here uh so we should see like zero n for like the big int if that's working properly and I see an error from nextjs so that's not great uh it's saying the contract function wins reverted okay let's see if that happens if I refresh in case there was something that I didn't do nope WIS reverted on my contract address oh you know what shoot that's what it was maybe you caught this I did not make the mapping public dang okay so the wins is the method that I'm going to use to read and I forgot to make that public so classic mistake there we will go ahead and redeploy this and then I'll go and remint as well we'll do that super quick so okay speed up magic minted to my player D9 and so we have that over there now we should be able to get our wins because it is a public method which explains why it was reverting there uh boy all right so let's go ahead and we don't have to change anything over here oh we do we have to actually change the um the we have to change the contract address but that looks like the same one b7b B70 oh my goodness so we got the first two hexadecimals the same I thought it was the same address oh man okay that is the chances of that are very rare do you want to calculate that for yourself 1 and6 * 1 and 16 the chances of that happening that the first two hexadecimal characters are the same is 1 and 256 um so dang okay and that happened to me up here and that was uh confusing okay so it is a different contra address I thought for some reason I was looking at the same one over here but we're good all right cool so then what we can do is we can go ahead and save that contract address we can mint ourselves the token it's already minted and we should see that I think I already saw it in the log there it is our zero n Okay cool so that zero n right here is the number of wins that we have let's go ahead and show that uh and so that we can get some wins here right I'm looking for a win I need a win all right so let's do wins is going to be wins and we'll go ahead and log that out I don't actually have that available right here because I need to do a use state so yeah AI seeing exactly what I need we'll go ahead and set that and set wins is going to come down here instead of logging it out and then this is going to complain because it's a big in all right that's fine so we could use a big let's just parse it or number is that how I have to parse it from a big in to a uh regular int all right cool so that'll do that trick one other thing that we might want to do is we might want to set this to null initially and then we'll do number or null that way we know when the value is actually loaded and you might want to do a better loading than that right so there we go uh so wind says zero which means that it loaded right because when we actually go to refresh give it a second to log in winds is undefined and then winds is zero sweet so it's actually loading it so now what we want to do is we want to actually battle and when we battle our wind should go up and up and up and up all right cool so let's go ahead and do that so what we're going to do next is we're going to go ahead and create another button that's going to be called maybe we'll do it above log out that's going to be called uh battle and we're going to say battle we'll make it the same color that's fine and we're going to go ahead and just create a function called battle and what battle is going to do is we're going to send a user operation uh that is going to be gas sponsored by default so to send user operations there's a hook called use user operations so if you want to find the documentation on that you can go to account kit and you could say use user operation uh or use send user operation there it is and this will show us how to do it you get these uh functions that come back send user operation I'm going to use the send user operation async which returns a promise and then we're going to use that uh and send over user operation where we could send it just like a transaction but it's going to be a gas sponsored operation a um and if you are unfamiliar with user operations that terms unfamiliar check out our count abstraction uh videos uh you can find them on the Alchemy YouTube we talk all about account abstraction what user operations are but you can really just think of them as transactions but for count account abstraction okay great so let's go ahead and pull this on over and our battle is going to I'm not going to do all this on success on error stuff I don't need that here I'm just going to use user operation and I'm going to say send user operation async is one of these things that returns and inside here I'm going to call send user operation async and this is going to take a uo and it has all this stuff in here right the target the data we're not going to send any value that would be the native value the Bara I'm not going to be sending any value in this I'm just going to be targeting our contract address here and trying to call with battle um not mint mint mint is not what I wanted to write battle is what I wanted to write right because mint is what we have already done we want to actually battle with it so you went 256 and then we will go ahead and battle so we'll pass in this address down here that's our contract address now for this part for the data uh for call data you know check out Alchemy University if you want to learn any of this stuff or how to uh encode call data via an API but there's a function from VM called encode function data that you could basically take what function you want to Target and then you could pass in everything that you need in order to uh Target that with the the proper data here so this is going to take in first off the contract ABI and then the battle and the arcs the big end yeah so that's what we want to do is we want to call battle with our token ID which in this case we're just hardcoding to zero and we're going to call battle and we're going to actually try to get a win on that particular token ID this is what we're going to do every time we call battle and maybe just to keep things simple we'll do like an async uh a we here and when we get our response let's just go ahead and like console log the response and like yeah we'll just do that and we'll know what we got back there and whether or not the wind should have incremented and then we could refresh to see the wind's incrementing so let's make sure that that's working we'll call battle and then we'll see how that works and I'll leave it up to you as the viewer to make a better UI cool so here's a battle we'll click it there's our transaction hash it came back so let's do maybe one more whoops that looks like maybe it tried to send the same one again let's battle again okay cool so we sent two transaction hashes there let's go ahead and refresh and let's just see how many wins we got two awesome so let's send another one and let's make sure it's working for three I just like getting more wins there's our transaction hash refresh and we got ourselves some wins awesome so I hope you enjoyed this demo of the account C 4 .0 I'm going to be uh taking this repository as is and making it available for you uh I'll put it in the description down below so you can go ahead and clone this use it for your hackathon uh if you're at the eth global eth SF hackathon uh look forward to seeing what you guys build this Workshop was built specifically for you if you're a viewer uh from the future Way Beyond the EF hackathon also look forward to seeing what you build uh hopefully it is something fun and uh yeah hope you enjoyed this Workshop take care