Jesse Builds an App on Base, Live

today we are going to be building an app with cursor and B and on Shan kit I haven't coded in a while so we're going kind of from Z to one I got cursor downloaded I got like a high level repo setup but I haven't done anything inside the repo but I'm just going to create a rem me right now a little at by Jesse okay so I want to just talk you guys through what my goal is right now basic idea is we're building an app that displays a feed of mint ERC 11 55s and then lets you mint them our basic plan is one get single NF rendering two then we're going to get items in the 1155 rendering in a feed then we'll get minting working then upgrade minting to use session keys and the really cool thing about session Keys uh this is a new thing that the smart wallet team has been working on you can just one time authenticate a smart wallet to basically do whatever you want in the app then you can have the the app kind of just click do additional transaction prompts or signing it all should just work if we can do all this in the next 2 hours that's going to be pretty crazy and impressive but uh we'll see got a coffee I have I also have a Seltzer and we are going to try and cook so first thing is I just want to get this this running and I literally just clone this into the web folder this just basically now has a template here we created the end we installed the packages now we run the app this is a pretty sick template you can see that it has these like really simple a login button which is like wallet login sign up pop pops up the smart wallet um you can see I'm on Local Host I can just approve it when I do that um it collects my wallet and then this also has some nice things built in here uh it has a profile that takes me to my base name so you can see that uh I can go to a wallet dashboard which will actually take me to a whole wallet interface and then there's also like a fund wallet button in here so this has I can buy crypto I can receive crypto and I can link a coinbase account to um pay directly with magic spending that's pretty sick I'm just going to me an nft um on Bas po uh the gas is sponsored so that's nice boom I just minted that's cool successful and this is all just like in this template that they gave me so that's pretty neat okay so I created a collection on testet look you can see we have three items in here so goal is we want to get all of the items so like all three of these rendering in a feed and then we'll get minting working and then we are going to upgrade it to support session keys so we'll see if we can do all that so I imported in here I have zor docs so yeah zor protocol looks like it's in here so I can ask nice questions like how do you use get tokens of contract so it looks like that's all working so I'm going to open up composer create a new project let's see this is just mint feed create project okay we're going to create a new component called Zora 1135 feed should live in app web should be a vertical feed with just the images and titles to start okay that's nicer good boy cursor it's loading and it doesn't display why aren't you displaying anything here error fetching token ah okay bro what are you doing here you're so close but you create the collection client but then you don't actually use it can you please use the collector to access these tokens hey that's it's close but it's not correct you're you know at least you're smart like you did something in there so that was good cursor oh look at that we got three that's crazy we at least have the tokens we're cooking we're cooking um but this is definitely not right okay we are making new progress we need to use an ipfs Gateway of some kind can you pull in a library or something that didn't work I think we might just be able to use the cloud flare Gateway can you try that let's see ah okay bam no but it's say it's blocked by a Coors policy what anyone know how to do this feel like I can use cloud FL for this okay so Cloud flare they just shut it down two weeks ago okay so this isn't working but we're we're getting there actually Cloud flare doesn't work we're not getting errors right now just pending that's as they say not a good sign by default toggle compos view is not set in the key bindings thank you whoever said that can you add a toggle composer nope that didn't work why oh wait what just happened okay well I I just did something I don't quite know what I did but look at that we are we are rocking and rolling everybody okay so we're now rendering this is this is pretty killer we have a nice little feed here but let's make this feed a little bit nicer can we also add a mint button that uses the transaction wrapper oh that's that's good that's good that's looking really good except for we want these to be so that the images maintain their aspect ratio hey look at that we got a nice little let's see what happens if I shrink it because I like building mobile first let me actually just put this bad boy in in Mobile mode we can still works everything still works we can log in sign into to view and Min that's nice I'm going to sign it with my swart wallet boom look at that you guys we have a Min feed we are I don't even know how long it's been okay next up we're going to use this transaction wrapper to make it so we can actually mint all of these things um we need to refactor the wrapper to accept a contract shape pass that into the wrapper let see they let's see what you got here really that's what you did you just completely like wipe all of my great progress I should have committed that that was a little crazy bro don't rewrite the page. TSX we're happy here okay let's try refactor again first let's reactor transaction wrapper to uh take a contracts so it can be generalized loading loading loading would you look at that bam that's pretty sick honestly we're cooking right now I'm pretty pretty excited about this bam we've got a mid feed let's go let's go hey hey Conor hello everyone what's up the thing that I'm trying to figure out Conor I want to do session qy stuff but first I just want to get a regular mint working and right now when I click this with the smart wallet it just says this yeah that's definitely pretty funky I would probably mix it up with calling through the Minter contract that's what I did so actually if you go to normal Zora app and you try minting one of your nfts through there we can just look at a sample transaction go to the testet zor and like mint one of whatever this collection is from let's do mid love on chain and then pull up the transaction to pya scan when you're done P.B scan.org so notice how when zor uses their own app they actually mint through a different contract it's that 7777 I guess it's s7s and they call this thing yeah and then that itself is going to call your actual nft so we can take a look at that contract if you click on it and we can see okay that's cool yeah and so if you go to write contract as proxy right as proxy yeah there's a mint function there that takes in typical parameters but notice there's also a collection address parameter ah okay okay okay okay okay so let me just change this a little bit so we have to do address then quantity then the token contract that's correct then token ID and then this is going to be M referrals but you know it's a blank address just Z X is that fine you should put in the zero address so if you type zero address VM should just autocomplete that import for you ah so this should also be a string we're not going to do with comment for now so that should be fine okay oh this is like the most frustrating useless error message ever yeah a lot of onchain is like that unfortunately why don't we just jump let's just implement this with session Keys all right we'll just go all the way we're just going to jump we're just going to J if you don't know session keys are a new feature that the smart wallet's rolling out for developers that let you do a onetime authorization with a scoped kind of scope like a parameter of like here's what this authorization can call and then like a spending limit so like you can spend x per day and then within that scop call and that spending limit you can just act on behalf of the user while still maintaining the full kind of non-custodial uh structure of it yeah so actually maybe before we dive into these docs we can start by first like making the mint work normally yeah right we're not actually just like broken broken um okay okay so let's let's do that can we please refactor transaction wrapper to not use onchain kit and instead use send calls Hook from wag me to um write the contract let's see what happens let's see oh let's go wait wait I want to see it I want to see it do it do it I got to believe it it has to land on we're signing yeah look at that we minted we got a working mint feed let's [Music] go this is sick look okay okay okay everybody so check out that look at this okay I can wi all three let me just mint this one now anyone in the chat have anything that they want want to want me to just like create a little new one in here so I can show you something mint Jessie onchain I will say like yellow is my color so I'm keeping less uh yellow okay now I'm going to the test net Zora I'm going to take this mint Jessie one we're going to just drop it in there let's add it to my mint feed creating this now when I refresh this oh so it's just hooked up and now I can go in here and I can mint it so that's honestly like incredibly sick now whenever I add a new token to this 1155 contract it will add to my mint feed which is all the things I want people to Mint on chain you know I just signed in boom now the mint feed's here I can I can disconnect no mint feed um I could log in with another wallet if I had another wallet oh why are you not happy I feel like something just changed is there a pushing updates as we're doing this I don't know but it's like has a different it's calling it The Grain field now what yeah yeah yeah it's literally like saying that it's now a token called the grainfield what's happening here so my the chat had a good call out as well could you go to where you define the onchain kit provider uh yes who's an onchain providers and [Music] then Mike you're too good thank you Mike we love Mike okay so now I got this thing we got little floating button it's nice and styled unfortunately we broke the button how do we break it again you know I'm not quite sure honestly let's see um um right why are you not happy uh yeah yeah we were right there we had it we had it um um do you know what it is I bet that it is this it's the support there's like something broken that's basically that's overriding it and we're good okay back to S Keys yeah yeah we're set up pretty nicely to do this integration now so the first thing we should do is like installs probably so Lucas has ridden some wagney and VM overrides where we have packages that actually support these new experimental hooks for granting permissions okay cool cool cool cool do I need papm yeah let's also install the webn and so the webn library is something that was origin meant for pass keys but we've extended it to support something called crypto Keys which allow us to do the same ecdsa on SEC p256 R1 but it uses a key that doesn't have a popup for your biometric skan wow it's kind of crazy that we have 60 people here watching it's been like two hours everyone this is uh what the base team evidently spends our holidays on writing code but I'm pretty I'm pretty pleased we have a working M feed and now we're going to make it not have transaction prompts why vacation Wi on Labor Day when you can build world class onchain apps and do it live so that other people can see that it's not that hard it's also not that easy as we've come to we're trying to make it easier um let me go back to these docs session keys so the first thing we're want to do is add means to Grant permissions so the app is going to ask for permission to do something on behalf of the user in our case it'll be minting nfts so if you scroll down we've actually on the session key docs we've been able to bypass like the login part because we already had an app wag me providers we've also had that set up so this is where we actually start our our work now with the grant permissions wallet wrapper to use permissions as is defined in this doc okay it looks like it did some stuff I don't know if it's good stuff or bad stuff yeah that looks good yeah so it's just gonna add a little drop down option so this is design for it ooh it's starting to smell good in my house someone is cooking something my wife was like how long are you going to do this for I was like maybe an hour it's been like 3 hours okay but look now we can click this and we can grant permissions enabling app to send request to sign on behalf you don't need sign off at every action requests may include spend limit cool so this stuff also is the onetime enablement so we actually have a smart contract that's an owner of your account when you sign this is the one that's actually granting it permission to be used damn cool all right that looks good okay oh my gosh wow so now actually if you console log permissions context I think it may be somewhere already loged log it's almost like it heard you Connor that' be a bit too scary yeah okay now it's got a permissions context all right we're halfway there we're halfway there but now that we have this permissions context we want to place it in our send calls that we had before that'll help tell the wallet that oh I want I don't want to show the popup I have this permission and I want to use it and so what we need to refactor though is that this state right now is declared in the wallet wrapper we to ra up a bit can we move the permissions contacts that we can then use in the transactions okay so now in the wallet wrapper we get the permissions conts we set some Global State we love to set Global State that's good [Music] programming and now okay but let let's see let's see what happens now we can use it do you think it's going to work Conor okay I think you set up a contract purposely for this right yeah so one of the security requirements we have for session Keys is that it can't call any function on any contract um because it's too easy for an app to ask to do something that could be high severity like controlling your multisig or like ACC accessing your nfts or something like that so we force all calls to go through a new function selector that doesn't yet exist um or we're forcing it to exist now and so what it forces is developers to basically deploy new contracts or upgrade their existing contracts to be session key compatible and so for this example um the Zora nfts they don't care who's doing the minting Because you can provide the mint to recipient as part of the function call and so we basically put like a a middleware I call it like a Sandbox contract in between the wallet and the nfts we're going to be minting and so like this is effectively is going to call the things that we actually wanted to call on behalf of us using session Keys it's basically a little proxy that will let me call permission call with the like right args for the zor call and then it'll proxy it to the zor call and it'll make that happen yeah there's a little bit extra setup we have to do for it let's go to the contract on ether scan so the sandbox call function lets us provide an address Target so that will be the zor contract and then the bites that we're going to send to it is the same call data that we already prepared what we want to do is basically like rewrap the call data of the zor call into this new STP yeah there we go I guess so yeah I think that's right right is this about to work Connor okay now I'm gonna Grant my permissions allow this app to spend on my behalf approve let's go wait I don't believe it I don't believe it show me the show me the wait a second I gotta I gotta get the I gotta get my address I think this is working which is kind of insane I'm just going to Mint another one and let's see it just showed let's see internal transactions n seconds that I'm gonna this one boom successful mint this one boom successful boom successful dude that's so cool and are they all showing up look they all show up let's go this is awesome hell yeah in three hours we just built a feed we got minting working but minting is a pain in the butt with uh transaction signing every time and now we can mint this feed with no additional signatures with a onetime authorization you just click the button it mins and anyone who's who's watching now you can just like literally you can clone this whole repo and set it up for yourself and try this out um right there using the the universal you know uh proxy contract that Connor deployed um which is pretty powerful stuff uh and you can go zero to one with a mid feed that doesn't you know do it does literally does a onetime authentication and then users can just click through it and Min it's insane so this is that world-class minting experience that we're talking about Connor anything else to share I think I think that's probably the end of this feed yeah I think I think this is great I'm so glad we made it to a functioning end to-end experience yeah I mean really incredible and cursor is so powerful I mean this is wild thanks everybody for tuning in who is on the stream I know a lot of people were here on the stream for a while um I hope you learn something uh if you're interested I would encourage you like to try streaming yourself people will tune in and leave crack jokes and ask questions and it's a great way to build in the open and unloading is great platform for doing it it was super easy to do this I just used streamyard um which you know made this really simple and then un lonely I plugged in and streamed to Twitter and to unlonely and um yeah I hope everyone has a great rest of their Labor Day and uh has a great week and keep building and stay based everyone