Building FullStack apps on Ethereum - SpeedRunEthereum3 by Eda Akturk | Devcon SEA

[Music] [Music] okay okay I think now it's on um so hi everyone welcome to the workshop it's going to be um we're going to be building a lot of cool stuff but just for a quick intro my name is Eda and I'm part of build Guild which works on tooling and education in the theorum ecosystem and what I'm going to be showing today is building an gases NFD minting application where we go over smart uh coinbase smart Wallet create like our app from start so uh hopefully we'll be going from like no app to like an app uh in the next one one hour and a half or so and I just want to see even before we start anyone has worked with scaffold eth before okay one two oh awesome okay nice yeah we have quite a few workshops during this Devcon uh but that's cool uh well hopefully this will be a nice intro um it's not necessary to have worked with it before we'll be setting it up from scratch um okay so let's directly jump to it is my so this is the workshop which I'll be following you're welcome to like go to this URL I'll be doing everything from scratch so no need to like go there uh but if you would like to like follow along um e octar 14 Devcon 24 I have the instructions there in case I get stuck I will be defaulting over here okay so hi everyone it's nice to see like a larger crowd especially on a rainy day I don't know if it's still raining but it was raining when I was coming here cool so I actually did download it just to make sure that we have it set before we start the workshop but I want to show everything from scratch once again um in case you know anyone wants to follow along you're welcome to follow along with your laptops um if it fails we'll default to the one which I already downloaded but hopefully the internet is quite fast so we won't be having that issue uh okay so for scaffold e a quick intro you can go over to scaffold E.O and this is like your starter page kind of explaining what the tool is all about U so the key here is that it gives you a a fast way to interact with your smart contracts and to create a front end especially if you want to like work at hackaton and build you know Tools in a short time uh this gives you a starter template for anyone new getting started uh what it is is like it has like an xjs component which is the front end and then it has your smart contract piece uh and you can either choose hard hat or Foundry so when we set up the wizard you can choose like your development environment of choice and um just yeah let's head over to the docs to give like a quick intro yeah hard hat or fanry it uses wagm VM nexs uh rainbow kit and some Daisy UI for out of the box front-end development if you're not like a front end developer you can still like hit the ground running with using scfit um I'm not so it just provides me a lot of benefits directly out of the box and even before getting started I can actually like go to speedrun ethereum Doom uh so once uh once you kind of get the gist of scaffold e and like building with it uh what we always recommend is to go to speedrun ethereum.org and basically it walks you through different applications to build on ethereum starting with an nft application a staking contract token vendor so for any developer who is getting started with ethereum these challenges are a great way to work on your smart contract work on your front end tool and just to kind of get building uh quite fast and uh is there anyone like who's hacking at the hackaton this weekend okay I think this might be useful um perfect cool let's get started so um what I'm going to do is I'm going to use the MPX crate eth and then I'm going to follow the wizard to help my app get started and as I said I just downloaded before but I'll be doing everything from scratch in case um like we have any issues with the internet which I don't think so uh I got the command from scaffold the. I just copy the create latest command I'm going to set up my app from scratch and then I'm going to show what the app offers um my project name let's call this [Music] Bank Devcon uh I'm going to use Foundry but if if your development environment is hard hat you're welcome to choose that uh I generally default a Foundry and it's going to get everything set up for me and I'll I'll be walking through it but the main components are it gives you like an outof the-box burner wallet so you don't need to like connect your metamask or any other wallets uh it just makes your life very easier especially when you're like developing and you don't want to like um connect your metam mask on every transaction uh it also has like a built-in faucet so you can directly get it like it starts your local Devon uh local development environment so because we chose Foundry it will directly like get us like an anvil chain um and then every time like you make changes to your smart contract you can redeploy them like you will just run run a uh command to redeploy your smart contracts and then it will automatically inject the changes to your next JS app so like you will have like a debug uh contracts tab uh on your front end to kind of work with it out of the box just a few more seconds to install everything and to make sure like I said everything about scaff um for any developer interested in ethereum I think it's a great place to get started you can learn more about buildg at build guild at ble.com as well I say build Guild but it's actually ble and you can see like speedrun ethereum scaffold all the stuff that you can kind of use for Education this is all almost done so we're going to get to like the vs code soon and once we have it what we're going to be doing is we'll be adding like new smart contracts we will be building an nft application so I'll be using like an ERC 721 contract uh I'll be working with that and then uh we're going to be showcasing the smart wallet capabilities by having it like uh gas is minting so you don't need to pay for gas this way like um hopefully if everything works out in time and we have enough time for it to work out uh I'll send the link and then everyone can like mint their nfds uh cool okay so we have this set up uh let's go into our let's see what this is and I want to move this here let me first run it actually so to run it I'm going to move a bit fast but all the information is available in the docs I'll still try and go like slower but if anything is missed everything is already available in docs and the link that I shared um so I'm going to do a yarn chain to start my local chain and as you can see it starts my annual local chain over here um it's all on Local Host so no connecting to we'll be deploying to base in the end but right now we're just working on Local Host um I'm going to do a yarn deploy because there's a default smart contract which I want to deploy directly and then I just opened like a new tab and doing like a yarn deploy blah blah blah okay this deployed I'm going to open like a new tab and do a yarn start to start my next JS application on a new uh Tab and you ALS you always need to have like yarn chain running because that's where the contract is deployed and that's where like your front end is looking to okay this will hopefully open up it always takes a moment longer in live workshops than working at home but perfect so this is what we kind of got set up uh to showcase the features we have like here the debug contracts tab which introduces a basic smart contract um you can kind of test with it you can set a new greeting this is a burned wallet so I'm not connected to my metamask it comes directly out of the box it's stored on your local storage so you don't need to worry about connecting to your metamask there's a built-in faucet so I can just click it and I'll get like when ethon on my well I clicked it twice so I got two uh but I can get some eth because when I went to make a change like let's send a new greeting hello Devcon send as you can see I changed the greeting this is basically a variable in my smart contract um and yeah I uh my my balance is lowered because I had to pay gas for the transaction to go through and uh this is what comes out of the box with scaffold the main features especially like now you have like the smart contract tab where you can edit your smart contract uh you have the burner wallets and then you have the faucets which which I think are the most useful and as you can see like I spin up like a full web 3 application in just 10 5 minutes I think it would have been a lot faster if I didn't talk this much um but this gives a lot of flexibility to move fast when you want to build a onchain app okay so what we're going to be doing today is we want to add like a new contract we will be working with an ERC 721 um and for that I'm going to go to open zeppin contract wizard this is a really great site by open Zeppelin where you can kind of craft your smart contracts uh you're welcome to follow along as well um you can use this or if you want to use like soulmate with Foundry you can go to The Foundry docs and like get a s like a smart contract of your choice as well I'll just be using the open Zeppelin smart contracts CU I think they're sufficient and um one other thing is I want my nft to have an image uh for this Workshop I think I'll be using like the image we already have so I'm not going to be like getting a new picture and adding it ipfs but instead I'll be using this buff aorn image which we already have somewhere here um sorry okay let me just add it a bit later but for now I'm going to be calling calling this nft this is just changing my smart contract I'll be copying what the visit says to my application uh let's call this Eda cuz my name is Eda uh I'll be adding a base URI in just a bit I want to make this minable so it automatically like mints like it automatically adds that future uh let's also have autoincrement the ID so then every nft we add like has a new ID which is automatically incremented and then I'm also going to make it in inumerable which directly allows me to um track which uh like which own like who has an uh nft uh you can also use other tools like the graph or Ponder for like offchain doing this uh getting who has which nft offchain uh but for the sake of this workshop I'll be using uh the in in my English is limiting but that smart contract so then we automatically have like the the people we can keep track of the people who have the smart contracts I think this is all we need I'll be adding the base URI once I get like the image as well and I just want to kind of quickly show this I'm going to copy this to clipboard and then let's go to our application which I actually did not show just yet uh so this is the scaffolded application which we just downloaded I called it Bangkok Workshop when we were running the wizard as you guys saw um am I talking too fast I can definitely slow down I feel like sometimes I tend to talk too fast okay it's good um so we have two packages over here we have The Foundry and we have the nextjs uh The Foundry is where we'll be working with our smart contract the next JS is our front end piece so I'm going to first of all work with the smart contract piece I'll be adding a new smart contract and then we'll add that to our front end in aits so I go to The Foundry folder I go under contracts there's this your contract.

I'll zoom in a bit this is the Smart contract which we were just interacting with uh I want to add a new smart contract here and I'm going to add like a new file I'm going to call this nft dool I'm going to copy paste what I got from The Wizard I don't want to make it ownable so that anyone inment um you like I will just like omit extra stuff for the sake of like making it simple uh you can have it ownable and you probably want like some owner uh when you deploy the smart contract to be the owner of that smart contract you deployed but for this Workshop I think it's okay to not have like an initial owner I'm going to remove this from The Constructor oops and then I don't want this ownable and I need to remove the on oner modifier blah blah blah Okay cool so all I did was I went to open Zeppelin wizard got an ERC 721 contract and pulled it here uh now I also need to update my deployment script the way scaffold it works is you have the deployment scripts which deploy the smart contract and they're under I think scripts okay perfect so the deploy your smart contract this is what deploys a smart contract which we just had um what I'm going what I need to do is I need to create like a new deployment script for a new uh contract which I added and I'm going to take the easy route and I'm going to copy paste this and I'm going to call this deploy nft contract I need to remove the copy so we do this we change this to nft deploy helper deploy nft contract scal deploy let's call this nft one one mistake which I generally tend to do is like mismatch with the renamings so like the contract we named was called nft over here as you can see so like sometimes it's called like your nft so be careful with when you do the renamings I feel like that's a common mistake which I tend to do and we remove the constructors or actually I think this is this is fine we don't need the deployer do we okay I think this is good now uh this is not enough because when scaffolded runs it actually runs this code so we need to add like a new line over here saying that also run this script when you run the deployment script because what we did was we created like a new deployment script but we didn't indicate that that should also be run and uh thank you to the developers who actually added it easier like deploy Mar contacts here so all I'm going to do is I'm actually going to deploy my uh I think I think it's called nft contract right that's what we J named it deploy nft contract we probably need to import this as well I'll just import this I think oh it didn't give me my getup co-pilot is it usually gives me the error perfect okay hopefully this will work let's see uh as you can see all I did was I added a new ERC 721 contract this is like the nftd contract which you can make uh you can use directly out of the box um and I added the deployment script so that it actually gets run and we can add it and hopefully this will work let's see if it doesn't work it will give us an error so we'll see what the error is uh I keep my chain I keep my yarn app open this is the yarn start uh I have over here the yarn deploy tab uh as I said before like the yarn chain is always open too so I'll just leave this here so our yarn chain is running and then our yarn start is also running but here we will deploy the contract once again I'm going to do reset just to reset like anything that was saved and deployed cool so execution was successful so let's see what this means okay so as you saw I didn't change anything in the front front end but now I have this nft tab so this directly comes because it's like this is kind of the main uh reason of using scaffolded um now I can directly test the smart contract on my interface over here so you know it has the nftd the symbol the total Supply um and this is a basic NFD contract which we just added and now it's available for us on the front end uh I want I do want to add the the image so I'm just going to go over here I'm going to not here I'm going to close this I'll go back to this okay so this is the image which I'm going to use for my NFD uh and I'm going to go back to my Wizard and where where did we add it we had our visit over here I'm going to add it here it's basically just going to add the base like the base URI so I'm going to copy the this once again uh what I did over here is I want like my nft to also hold like an image you can definitely have it uh on ipfs or like a decentralized server for my case I'm going to just use the address like where it's available and then I'm going to go back here I'm going to change this back I'm going to remove the ownable stuff which we just did not ownable I'll remove the Constructor so our Constructor argument doesn't take anything the modifier here now one other thing which I want to do is I want to limit the number of times this nft is minted so I want like a Max Supply uh there is no Max Supply by default so I'm going to be adding this uint 256 public oh wow it already added it I don't think we need to make it constant I want to make it like this I'll make it like 30 30 is good uh I'm also going to change this to public uh even if it's private you can actually access it but I want to access it from my front end so I'll directly change it to public so then I can get the next token ID in my front end as well I added the max Supply here so I also need to update my minting function so that it doesn't update if it's past the max Supply so uh we need some kind of way to make sure that we are not like if it's a 31st token it does not um like mint it so I'm going to use like oh gets of copile is helping me I'm going to use a require statement so if the next token ID now this is automatically incremented whenever a new token is Minted as you can see over here the token ID Plus+ one so whenever we mint a new nft the token ID is incremented and if the token ID is like less than the max Supply we continue but uh we added a required statement to make sure that the max Supply is not passed cool so whenever you make changes to your contracts you need to redeploy nice okay so we re redeployed our smart contract now we have a Max supply of 30 like let's test this this person like this is the pink green person uh this is a burner wallet so it's not my metamask um and let's see if like this person can deploy where where do we add it mint mint I them into this address I'll send this person already has like some funds in their burner wallets so they won't be getting a gas error hopefully uh okay so we minted an nft and as you can see the token ID increased now the token suppli is now we have one token which is minted and I can continue to Mint and then it will be two and then I can open like an incognito window let's go over here uh a new wallet address is generated because it's a burner wallet and it's in my browser local storage uh I go over here to debug contracts tab I copy this address there's two contracts we already we also have the your uh your contract which we didn't change the nft one down down down copy but it will give me an asked gas error because this person does not have any money to pay for gas yeah gas required no available and again the faucet is very helpful here I just click I get money from the faucet so now I have one e but it's on Foundry so my Local Host save mint okay as you can see the next token ID is increased so um whenever you open a new browser you don't really need like a a wallet already there but you can test with different users which makes it quite easier okay nice so I think we have quite a a few things already um what I do I'm going to have a look at my notes to make sure I'm not missing anything uh but I I think we can slowly move on to the smart contract piece the Buffalo we have this this is our nfts image the Buffalo icon uh this is my no not this one too many tabs so we we create we set our we set up our scap application we tested it out we added a new NFD smart contract we added a Max Supply over there uh we did add it to the contract so this is probably some like you uh this is just an example it's not the smart contract we used so if you do follow this like read me guide beware that the the the code is more like for example so that I don't give the whole answer but I will be pushing everything to get up so like I'll be providing the code in the end we added a new NFD contract we updated our deployment script uh now we can start building our front end awesome so let's let's do that now now to update our front end we were previously in The Foundry folder I'm going to be going to the next's folder to be working on my front end um okay so I have the app over here um what what I need to do is I need to create a new folder called nft and then whenever I go to Local Host ho host dnft it will automatically go to this page I'll also add it to my header so then it's easier access um and shout out to these people who are the Builders of SCA actually so thank you for making the lives easier new folder nft uh I want a basic page. TSX I'm just going to copy this and paste this here um in case I went fast just to kind of reiterate what I did is I went to the nextjs a Dash app dash like created a new f folder called nft and I added the page. TSX over there but we can actually just remove all this and we can just say hello b g and then I don't want to have the stuff we don't use imported because it looks bad I do want to change this to nft okay hopefully this will work we actually also don't need this let's just or let's let's leave this there [Music] um so now when I go to Local Host I can do a dash nft hello b g so we will be working on this app over here we'll of course like be editing it so it will not be this view uh and one other thing I want to go even before editing is I want to add it to my Heather to just make it easier accessed so then you know you don't like when you're testing you can just click the header like home and I think think that's in the the header somewhere here let me just modify the header let me see I can actually search for debug I'm going to add it here so it's my header. TSX I go over here I add like a new nft tab and let's go to nft uh hopefully this will work and now we have like a new tab on our header called nft which we can directly go to instead of just like going to Local Host dnfd and let's see okay perfect as you can see we added this the nft tab uh and now we'll actually be building this because this is not what we want the app this should be um okay so what I want to do is I want like a basic card which shows a button which says mint and I want to provide the details of my nft so like imagine a a website where you go to Mint an nft application that's what we're going to be building and then hopefully we'll also show what nfts the user owns and then we'll make it so that one user can only have one nft and uh that's kind of the goal we'll be working with the front end a bit now and for that let me take this in like this back to have the so then I kind of use the default stuff available or I'm I will be removing this part but I just wanted to divs already to make it a bit easier for me and let's say hello here and now what I want to do is I want to add a card oops it has my automatic settings uh what I'm going to do is I'm going to go to Daisy UI so as I mentioned scaff uses Daisy UI uh which are pre-built Tailwind CSS components so you can click to dayi to kind of see what components you have out of the box and actually this is I directly want to go to components can I click on components here uh so this way you can directly pull in these components into your front end so I want to pull a card component like there there are different components such as the you know the bubble the checkbox the countdown uh divider stuff like that I'll just be using a basic card I think I've used this card so much that I remember the joke and I never thought it was funny anyway um so I'll copy this I added the card all I like I didn't change anything I just went to the Dai website I chose the components I want uh I copied the card components and I edit it here so for now like no modification and then we can close this now nft tab okay we have the da Ur card which is the shoe card which we are going to erase uh I'm going to delete the figure I'm going to delete the joke and then what we have okay Shoes by now uh I actually don't want this I want this to be in the center for now this will be like a mint button no functionality just wanted to like showcase the front end a bit um and then what is this I always feel less creative when I have like when you're on a live Workshop or something uh so I'm going to call this nft app and let's call it speed run on ethereum Okay cool so we kind of have our um ma Gap but you kind of want to show the max Supply or like how many tokens are left right so if you imagine like an NFD like an application where you can mint an nftd you come over here you're like oh I want to Mint but like what am I minting uh you kind of don't want that um so I'll be like adding the details of the smart contract and then obviously this mint button is just a placeholder for now it doesn't really work um but let's let's make this a bit wider let's make this 96 is this too wide okay maybe like Okay cool so uh what I want to do is I want to pull the details of my smart contract onto my front end now for that I'll be using the Scala hooks this just makes it a lot easier uh to kind of work with uh it's using wag me in the back end to use the to create the hooks uh and you can go over here to interacting with your smart contract first will show off the read hook and then we'll also work with the right hook so that you can actually mint your nft uh now the read Hook is over here you can see like we have the default example uh it goes to the contract your contract and it gets the function use greeting counter we'll be changing it so we kind of want the max Supply and the token ID details for ours and then it our our function won't be taking any arguments but you can come over here you can get the read contract hook let's do that come over here just add it here here I'm basically doing copy paste most of the time whenever I program uh import we directly import it uh this is not going to be total counter but this is going to be from contract name I think we named it nft and we called it Max Supply Max Supply and it doesn't take in any arguments so deleting this uh I don't want to call this total counter but I'll call it Max Supply and then what should we do let's add it like a header over here so Supply left Max Supply this is actually not supply left this is total Supply but we'll add the total like Supply left afterwards uh and then let's also show the connected address for now I'll delete that cuz it's already in the app but I want to show off the the like the components available in scaffold like the account component which makes it very easy to have like a like tailored account component which matches like your if you have an ens account link it automatically like makes ens resolution it shows like your avatar if you have one so um I do want to show that as well and let's add like a new header here for our account and first of all before showing that let's see how it looks without like the the sca lead component so all I did was uh connected account this is use account from directly wag me um so very easy to like get the account details I just call use account and then I display it over here and this will not be nice because it will show like a 0x string which will be like outside the card border yes and the total Supply is actually not shown cuz I think we need to make it like number cuz it will resolve like a b big in which will not be displayed okay yes so um but this the the way this looks is not pretty right like you wouldn't want to Mint an nft from this page so I kind of want to make the account a bit more prettier um and what I'll do is instead of like having it like this I want to use the account components we we'll be removing it afterwards but I think it's nice to Showcase over here I come to I think I can search for account component here recipes um oh I keep saying account but it's actually address so I'll be getting the address component here um account address uh now what this does is as you can see you can directly use like the address component and then add it and here I go address I need to import this okay I think this is taking a moment co-pilot is slow today I should get it from scaffold eth directly getting the address components let's leave the connected address just to show the difference okay perfect so as you can see there are two different ways you can display the address and I'm directly using the address component so this looks like way prettier uh this address doesn't have like an ens so it doesn't like resolve uh but if it did you would kind of see that over there there and I'll delete the the ugly one okay cool so we're kind of getting somewhere uh we still have like over an hour so we'll get to like the nft menting part um I'm going to cheat and look at my notes for the next step but basically what we have is we can kind of work towards we we want to do a few more things like when we think about like our NFD application we want to allow gases minting that is one thing which we want to do uh the other thing we want to do is we want to keep track of like um when you log in and let's say you have an nft you want to see that right like you want to see like a your nfts part uh so that is the second thing we want to do and maybe I'm forgetting something but the rest will be in our notes we still have our debug contracts over here and then we will of course like ship this app so we'll do like a yarn resell like YOLO and like host it on vsel so then I'll give like a QR code so everyone here can mint the nft um it'll be on base of allia so no money needed and actually a big gas sponsored so you don't even need to have any money to like any uh base St o Eat to SP like to um to Mint it okay I will go back to my instructions we did this oh we didn't add the minting function okay let's do that first I'm going to go over here I think it's here so uh we added the read hook which allows us to read from the smart contract but we should also add like the right hook which allows us to Mint so I go over here as you as you remember we used like the read contract hook now I'm going to go to the use scaffold WR contract um this this docs really makes my life very easier I can just copy paste it's pretty simple to understand um and as you can see like I'll be using this um I need to add some functionality to my button and I'll directly be getting it from here so you basically need to add the hook to your application let's do it it's quite similar to the way we added like the the read hook we do need to change the contract details so instead of like uh your contract it'll be nft and it's giving us an error because we didn't like import it yet um okay so we directly got the right hook now we can basically add the the functions to like change the state of our smart contract uh I I might be going a bit fast I think that's what happens when I talk live but I will be having Q&A in the end so hopefully we'll answer questions and if there are like any questions feel free to like kind of stop me on the way as well and okay so this is called set greeting which I want to change I'll be calling this mint uh the function is I think safe mint but we'll the it'll give us an error if it's not I think it's underscore saf Min you can check from your smart contract saf Min and it takes in an address okay so um we can pass in our connected wallet address over there you can see the details of the the the function here value um we'll we'll make it free and then I'll just pass the connected address here I think we do this and then this should work oh do I just do connect address Okay cool so I think we have like a button actually ready to Mint I'll be making this a bit wider because I just like it when it looks a bit wider um and let's see if it actually mints so how do we understand if it mints like let's add like nfts left here instead of like just a total Supply and to do that I'm going to get the token ID as well so this will be not Max Supply but I think token ID I might be misspelling it let's double check next token ID so we'll be oops not here here this is going to be our token ID so we get the max Supply but we don't get the token ID so we don't really know how many nfds are left so it doesn't really give us like an good indication and I kind of want to add that over here and then let's also add like a token ID maybe we can do this e here um nfts left and then I just do like a minus number and then I do the token ID I'm not sure if this is correct but we'll see okay this is correct uh let's see if it mints right like we added the minting functionality um but if this person mints the nfds are decreasing so I can continue with the mint and then you know this other person with the other colors on the wallet can also mint well this doesn't have any balance so they won't be able to Mint before grabbing funds but then we can mint and then this basically kind of allows us to um show how many nfds are left okay this is we have more time I feel like we will be finishing before the time finishes as well but let's make sure I'm not missing anything I'm just defaulting to the notes which I shared to you guys so over here so we basically added link to our header we updated our nft we updated the front end um we actually didn't do this yet but we'll we'll do it in just a bit or sorry we we did like I think I did it before in the previous step uh now before adding my Holdings I first want to show the gases transactions or or we'll do that in a bit later because to Showcase gases transactions we need to use base so I want to find kind of finish everything we do on Local Host before moving on to like a development and where we deploy the contract to Bas aolia and work with the smart contracts uh so for that I'm going to be uh first of all like just making sure like we have we can see the nfts the person has minted on their page as well and to do that I'll be going to this nft app which i' which is already here and uh we're going to be using a component from The speedrun ethereum Challenge like the first challenge where you built an nft up and that actually showcases how you can keep track of your nfts so we'll be using the component from there directly and um what I want to do is I want to I will get it from here my holdings. TSX I'm just going to copy this code um and let's let's showcase how you can add like a component I'll be creating a new file here I'm moving this part a bit fast because uh it's not the main part of the workshop but I think it's good to have and as I said like whenever you go through the speed ethereum challenges you'll see it on the first once you get familiar with the challenge over there you'll see that this component is used and you can create new components for yourself as well so I'm creating a new folder components and then I'll create like a new file called my holdings.

TSX okay I got my um the My Holdings code over here let's showcase how this looks like I also want to well I need to bring that component into here let's add it just here oh this doesn't actually take an argument let's see what this looks like oh this actually directly connected my smart contract wallet okay so we directly bought in the component um the other one directly connected my smart wallet on coinbase so that's why you didn't see it but I've been I have too many browsers open but this was the one which where we minted the nfds so as you can see like 0 1 2 3 I can mint more I will see them um next we'll also add like a functionality where only one person can win one nft because we don't want like like one person to Min all the nfts you can but not in our app's case uh but I can continue to Mint this just like shows it nicer uh I want to add a header over here to say that these are your nfts uh so this is my DOT I'll copy this well I'll delete the card title but let's make this I'm not exactly sure the tarp we can use but I'll get it from over here like let's get this page let's use H1 actually like this will be better let's give some styling to that I'm going to directly copy from here I'm just going to add top margin Okay cool so you can see like your nfds you can see like mint more so this kind of displays over here um this is basically um is kind of almost um ready there we still have a lot of time but we will be showcasing how you can mint gas ly so you don't have to pay gas or have any money um so okay let's let's go I think I'm missing something but hopefully that will come out once we once we're working in fit breaks we'll go back and see what's breaking um so I have over here the the function to Mint the nft which I directly got but I want to sponsor the transactions and for that actually went and got my so let let's deploy this app first on base Saia and then add the smart wallet piece or let's see how um I'm going to add a new button over here it's going to be quite similar I'm just going to copy this I'm going to call this gas list Min for now let's remove what it has inside and then we'll add it separately oh okay we removed the formatting which I actually did not want to remove uh I'll just remove the functionality the on click action cool so this when we click this this will be a gas Min so then basically what will happen is you can click it and then you won't be having to pay gas because every time we M an nft as you can see like our balance decreases so you need to have like some e in your account already to be able to Mint the nft itself uh and what I want to do once again um I remember what I forgot is basically I want one person to Mint one nft so then I don't want like a person coming and like minting 20 of the same nfds um because there can be a lot of like AI agents or something like that and I'm going to directly go over to the code which we have over here before um I'm just going to get that part this will be by the mapping so what I need to do is I need to add a mapping to keep track of all the addresses I already have uh well all the address like the addresses who have minted the nft and then a Boolean is like true false meaning it does this person already have an nft and I'm going to go back to my smart contract over here I'll add it here already Meed I want the formatting better so the already minted and we need to update our saf Min contract to see like our saf Min function to see if the contract was already minted and I'll directly get oh this already gave it to me so if already minted is false it's like it's true it's already minted and what we need to do is we actually need to set this so once this person is minted I need to add it like true over here and I think this is good an important thing to do is like not to add this after the save M line because then like someone can like come in and like they can create a re-entrancy attack and then they can always like mint so um this is important to have it before the function is run and I think this is okay now live workshops are always a bit scary um cool let's redeploy every time we change a smart contract we need to redeploy otherwise it will not be reflected uh I'm also redeploying because I want to make sure that only one person can mint the nft uh so then now when we have like a new person we'll test to see that they can actually only Mint one nft okay so we redeployed the contract it's a new contract that's why this person the the pink green person does not have an nft at the moment uh let's see if we can mint okay one uh let's see if we can mint again okay already minted so this person can only Mint one nft uh let's see just to make sure that I'm not only saying this but this blue person let's see if this can mint so a new person can actually mint but the same person cannot mint and instead of already minted like I like to I want to have like a bit more please don't siil attack me okay so if someone tries them in twice they will get that error uh I'm just going to get a bit water cool okay we're actually going a lot faster than I imagined um took a lot longer when working on it so what we can do is um now the important part probably which what everyone is also curious to see is how we can do the gases minting part and um basically what happens when you mint again just to reiterate is that you pay for the gas of the transaction but we want this to be sponsored so we want to use a pay Master which will be our application which will be like okay like no need to pay because this app is paying for you and for that I am going to follow my steps over here we built the front end we updated the NFD contract now uh only one person can mint it one time there is a Max Supply so you cannot pass the max supply of the cont like the the the count and then now we need to add like uh the gases transaction piece now for that we also need to make sure that our app only uses uh coinbase smart wallet so we've been using like local uh Local Host and the burner wallet thus far but I don't want that because I want to be showcasing smart wallets and that's functionality so let's go ahead and update like our wagm connector to use the coinbase smart wallet only and I'm going to go to do that I'm going to copy this code over here and then by default even before showing that I can show you what happens by default I'll disconnect CU I think this is my application oops oh I think because it has a burner wallet it directly connects to my burner wallets I say disconnect but I can kind of choose the different options so you can see like there's like all the different options you can choose from but I only want it so that my app us is coin bases smart wallets and for that I'm going to go somewhere here I'm not exactly sure but to my next JS to the wag me connectors that is under not here the wag me connectors is it this no sorry I think it's here Okay cool so wagm connectors. TSX and then what we want to do is we only want the coinbase wallet as you can see like it Imports all the wallets we don't want that and uh we just want the coinbase one so I'm going to delete all of them besides the coinbase one and I'll I'll just like basically post what I copied so the wallets will only be the coinbase wallet I delete this and then the yeah preference is the wallet's only I think this is fine to leave I don't want to have extra Imports which we're not using I think we can remove this so we we we will no longer have the burner wallets because we want to test with the smart wallets it's going to be a bit like you will actually be testing with the smart wallet so um not as easy um it's still easy but okay so hopefully this will only be the smart wallet I actually think we were just discussing this morning it will show the other options too but that's on rain Mo it okay we need to connect our wallet yeah so it does show the other wallets and I'm not exactly sure why but for now we can continue with the smart wallets I choose coinbase I think I already have a smart wallet set so I approve this perfect I think I need to change the switch to found oh I don't I'm not sure if I can switch foundary but basically like now I want to make it so that my app is only on baseda folio and let's also deploy this smart contract to saol um to Showcase that so A few things I need to do do here I've been running yarn deploy since the beginning of the workshop and that's only deploying on my Local Host so I didn't need to like worry about my account or whatever is going on there um and you can always default to the scaff docs to see how like you can get the Run deployment scripts as well I'll just search for deploy uh so what you need to do is you need to run yarn generate to create an account for you I already did that so what I'll run is yarn account to show the account which I already have so as you can see this is the Account Details uh this creates like a m file which has a details of it and then you can see like my balance I actually have quite a bit of balance on different networks and what I want to do is I want to did I do it wrong you need to oh yes I need to update the re me file it's good to have you guys in the front so I think I used the custom the default hook I need to use the custom one so then it doesn't uh I'm not exactly sure where I think like this okay and The Foundry folder okay so I needed to change my e key store to use the custom one and uh we did that so we can R run it again um so when I do a yarn account it asks for my password I already said it before you said it when you create when you run yarn account the first time so that's why I'm not setting it again um it's stored with the password so that makes it easier but I should have some balance which will allow us to deploy the smart contract uh you can see My Account Details base aolia I just am waiting for base aoia to appear and then we'll run the command Okay cool so we have some balance on base ofo I have not deployed my contract yet so this time we will actually run yarn deploy D- network network base sapoia and hopefully this will deploy the app if everything goes well it's pretty fast and cheap to deploy to base well Bas deoy is already like cheap I mean pricess but I entered my password again cool so our contract is getting deployed nice so one other thing I want to change is uh my scaffold application is pointing to Local Host I want to make sure that it points to like base aolia because as we were working before it gets the contract details from The Local Host which where files are generated but now I wanted to like put point to base and I'll do this by I Local Host I think I'll just check the over here as well it's in my next JS app I think it's in my next config no oh not here I'll just close this Foundry and then I will so the tar the tar networks over here is change. Foundry uh if you had chosen hard hat it would have said hard add but because we chose Foundry it says Foundry and then I'll just delete this and it automatically gives me like well base SE all yeah so this is my scaffold e application configuration which now points to Bas apoia I'll also lower this because base block times are lower so 3,000 should be enough so then our app updates much quicker than waiting for like 30,000 seconds it can update in 3,000 and everything else should be okay nice let's see what we have it doesn't it didn't change much um we'll create this like a con so that it doesn't show na afterwards like We'll add it as a states to our application but for now this should be okay so I'm going to connect wallets okay it asks me for my coinbase wallet approve now my wallet is connecting I think this is doing like ens resolution which maybe need to change but uh I actually don't need the address here I can mint over here but I'm on the switch to Bas all y' this uh this person doesn't have any money so they can't mint but the good thing will be is we don't have like for now it won't be able to Mint because this person doesn't have oh actually base does base already offers uh sponsorship but we're going to do it ourselves so then you can also see how you can do it in Europe app but uh because like Bas already covers the payments like if it's less than a certain amount I don't remember how that what that threshold was but if it's under a certain amount base does cover the network fees so they already have like as you can see supported by base but when we cover it it'll actually be say like like sported by scaffold e app so that's kind of what we want to do um we can say confirm to see like if this actually works cool so this was actually paid by base um but we want ourselves to pay for it but this was pretty cool I actually didn't realize that we could showcase like basis pay Master as well but but I want to showcase how we can pay like add it as well uh now I'll directly copy the code which I have from before now I know I'm going fast a bit as I mentioned but all the instructions are available in the the read me so you can totally like follow along I have some extra links over there so you can kind of check to see where the details are coming from but this this read me over here should be like a nice guide for you to like look for if you have any questions about anything we're going on in the workshop um so hopefully that will be like a nice resource and we might have some quite time for Q&A afterwards too um okay I want to make gases nfts uh I'm basically done with everything I did with my contract side so we can just close The Foundry folder and let it be um I'm going to go to my app I'm going to going to go to my nft I'm going to go to my page. TSX and I'm going to add like a new button here I'm going to copy the code which I had and then I will remove this gas mint nft is left nothing changed here the mint button so I added a new button now what we do what we need to do is we need to get our pay Master URL from coinbase's coinbase developer port um I can showcase that coinbase CDP you need to create an account over here and uh it gives you like different tools to use I think I already have an account so that should be fine hopefully this will log me in uh but the coinbase developer portal offers you like different tools such as like how you can use the onchain tools the pay master and like the faucet Etc so I'll be using the pay Master URL so then I can autom atically like cover the cost it's it's they actually also pay for the first um like I think for the $100 or like $500 so that's pretty cool I go to the pay Master on chain tools I go to the configuration tab it will expose my API key but I will Reed like I will make it like redeploy it afterwards so I go over here I'm on base Saia so I need like a pay Master endpoint to make sure that my uh costs are covered by coinbase right async did I forget something so first things I'm going to do is I need to add this as an environmental variable I can actually add it like as you can see this directly goes from uh the public pay Master URL so let's add this over here we can add it to ourm file we have I'm just going to copy this command copy M I'll create like a and then I'll go get my API key so this should be okay and then we don't need this anymore right contract async uh so I do need the write contract as and let's get that from scaff Le I think we're missing the Imports oh oh from wag me okay I remember so uh you can go to wag me and I will actually show the documentation as well so this is under the experimental tab um and I will import do I can I import it from here and I guess I need to like pull the right contract B6 from here I'll delete the notification just going to copy for my code as well I think I'm missing something but we can quickly cheat from the code I have before so I basically Clos the coinbase developer portal we don't need that anymore and then I go over here to my I'll just go back to G tab I think I close that tab to just make sure that I have the right code over here I think I'm missing something but I'm not exactly sure I'm going to go to my app to my NF my page. TSX and then I have the right contract async oh I didn't get my used deployed contract info okay so basically you do you can use the scaff hook to get the use uh like the deployed contract information which is going to be like nft like your contract address and API information and I need to import this this will give me where to import it from I think we're good I don't think there's a mistake but if so we'll see I go over here to my nft tab wrong Network let's switch to base but which wallet is this let's just disconnect to make sure we have the right one I connect my coinbase wallet okay cool I need to do like a gas of mint hopefully this should work Okay Okay cool so this does work no need to panic um so as you can see what we did was we got our pay Master URL from coin bases and you can uh I forget which um which ERC it's defined it's 57 74 I think but I have it the details over here uh Devcon 24 just to make sure that so 5792 which allows for like batch transactions and gas sponsorship and then the 7677 which shows it on your user interface when you go to the coinbase wallet and it directly says you know sponsored by scal or sponsored by coinbase um so this is pretty cool now everyone who has this app can actually use it and mint and nft and it is sponsored when you click mint it's sponsored by Bass But when you click gases mint it's sponsored by S that's actually just hello like that it's sponsored by us um and I'll remove the gas mint function like let let's actually try that it's actually minted cool so we can basically like mint an nft we can have it here um and you can do it like when you click mint it's actually sponsored by coinbase um which is cool as well oh okay maybe they all oh so we got the message because already minted please don't siil attack me but another like if we open like another Tab and a new wallet it should be able to work um so that's when coinbase is sponsored let's delete this mint Tab and then let's make it only our app is sponsored and then let's actually ship this app to verel so that you guys can access it and mint the Buffalo for free I'm going to delete this we don't need this anymore I don't like to have Imports that I don't use I think this is fine let's delete this I think we're good so just to reiterate like all the stuff we did was we created a new smart contract ERC 721 smart contract and then we deployed it to base we added like some extra functions we Ed the open Zeppelin um wizard to kind of follow along but as I said you don't need to like create the index and the people tracking over there but you can use like the graph or Ponder for um getting that information off chain as well like easier without like having your smart contracts there and then we had like we added like um the coinbase pay master URL to sponsor transactions we had some stressful moments there but it was solved so um I think this is good all we need to do is we need to ship our app to versel so then I can give the the link to access but this is basically completed so far and to do that we actually have just one simple command yarn verel YOLO uh I think this is fine uh I already have my uh versel account linked but if you don't I think it actually asks for you to like link your versal account first I'm going to do no and I want like a new project that's called this um Buffalo or let's let's let's call this like speed run ethereum nft yes I want the default settings uh now one thing is I do actually need to add my uh pay Master URL to my versell account so we will do that in just a bit but besides that it's pretty okay I can actually follow this link uh I'm going to go to my Brave browser where's my Brave uh I'm going to go to my project I think on my so this is building this takes a while well not a while but like a few minutes and I need to add my uhv file details over here somewhere here okay somewhere here sorry environmental variables blah blah blah and we add them here so it's actually pretty cool you can just copy paste from from my code let's go let's go let's copy this we can directly add this we can directly add this here this will save okay nice so this should be added we do need to redeploy your application I think I can go over here and like redeploy oops Speed on ethereum I'm redeploying because I added like a new environmental variable so uh it kind of takes that in otherwise it wasn't going to use my uh because it doesn't push the eme file uh it won't like know which process variable to look at and uh this takes like just a few minutes and then afterwards hopefully you guys will all have access to the link and um you can try it out any questions like maybe we can like answer oh the deployment is successful or yeah if anyone has any questions like happy to answer any questions you guys might have well this is deploying for a moment hopefully it will deploy fast I feel like pauses are awkward and uh just to mention once more time where when you go to the scaffold docks all this information is available over there like how you can do like a versal YOLO a versal deploy um or you know anything all all the things we went through are actually available here um we added our own smart contract but you can also like interact with already existing smart contracts and find the details here it's quite easy to pull it in your app I guess the biggest feature is that you can kind of iterate quite fast you can like PST smart contracts make changes to your app like we built like a whole n gas and ofd minting application in like an hour or so and we the contracts we even like have a live URL in just a moment once this is built and um what else am I forgetting something I think we did talk about a lot of the things I can show speedrun theum one more time so um we the the uh to get the components which shows like who has the nfts already we basically use the simple nft example component there so I know I went through that really fast and I just copy pasted it but when you go to the simple nft example it will show you the details of that component so you can kind of understand how to build your own components such you know such as the the small card which shows like the nft and then you can basically follow through you can create like a decentralized taking app a token vendor dice game um join the build Guild and other challenges as well and then to follow more about what's up in build Guild you can also go to ble.

com to kind of see the stuff we work on um and you'll have over here scaffold e you can start using start building um this kind of gives you all the information you need we have um an extensions feature as well and Hunter the creator of the video is also here um so basically extensions allow you to add new features without modifying the existing code uh it's funny to see yes your face here as well but um basically you can kind of follow along to see how to create extensions um and what I mean by extensions is let's say you want to extend your scaffold app like add a new smart contract right like we added like the ERC 721 contract and then you can kind of be like you know I want to make it easy for anyone to create like a scaffold app with the ERC 721 contract so that's kind of what the extensions allow and this video teaches you how to do that uh very simply so so highly recommended and you can learn more about extensions you can create available extensions so there are like some which are available out of the box such as like the subgraph uh the onchain kit one the oh ERC 712 is also available here um but 721 is not so maybe we can create an extension afterwards not live that would be a bit too stressful but I hope verell has deployed oops verell has not deployed but [Music] um I have like yeah I have like a something error on my page with extra quotes but I'm not sure where I have that error yes because YOLO shouldn't scream for the linting errors right oh okay so I got it um these are like warnings which I should do it again which will redeploy because YOLO is like not checking for like linting errors but now this means we have like an extra minute so but yeah hope the the the reason was I think I have like some wrong quotes or something which was creating like a linting error which blocked me from like deploying to verell um and yes I I think it's okay to have it for now uh that's something you can fix afterwards I would have known the eror true uh just yeah in case it didn't go through like the video but that's a good point like you can do like a uh yarn like yarn versel build or is it y y next build yeah let's look at that since we have a few more moments we can do that but that's a good point thanks for mentioning that I think it's okay I'll just go to my so you can run like a build command directly to make sure that you know it um it doesn't have any errors and then this will directly give you the errors so before you push them you can fix them and it to tells you all the scripts like like when we run like yarn start Etc this is kind of the commands that I run but I didn't do that so I didn't realize I had a error before but that's like a good feature to well best practice to do before uh but now this is actually deploying to a new link right like the disc create like a new application let's see inspect not that one so I might need to actually add our pay Master URL or is this creating the same one okay I think this worked but but we didn't add [Music] the let's see we'll see and try if it I I I think we it created like a new app so we should add like the pay Master URL here as well oh it directly created the same one okay so it directly used our environmental variables already available in that case oops not here let's just follow the or I want to use this thing actually this is better I'm going to connect to coinbase wallets we're going to do gas as Min going to work so not going to work Mak expensive okay as you can see sponsored by scaffold e that's mint and unknown nft you all probably don't want to me unknown stuff okay nice so all of you guys can actually go to the URL here and I think I have like a better share right if I the what the project I'm not sure where I think the URL is but where does it show that one the settings okay so I go to the nft cab so everyone can actually go to this domain and like mint an nft um it's speed an ethereum line uh Dash or line nf. verel DOA nft uh we should have actually removed like the homepage and the debug contracts before we did a deployments but we did do versel YOLO so we didn't really check those stuff um so yeah like this is kind of the gist of the workshop happy to answer any questions you have um before doing the versel deployment it is very important to run like a yarn like a build yarn build I think um so then you can check the errors before you deploy but our error was like a small like linting error so it didn't really matter like it didn't it was a warning um and um yeah this is happy to answer any questions anyone has but we're 25 minutes early I think it's okay to be early [Applause] and you can send questions through here I think right that's the the thing hey um can you go through the my Holdings component how do you fetch the nfts for each user yes can we connect again so what I did there is that's a good point because I moved through it really fast but uh we have over here the app components my Holdings so this should this um this uses like the enumerable right like when we were using the when we were deploying the contract we also make sure that we can have like tracking the IDS of who was the account that was minted it we have like a mapping over here on our NFD smart contract and I can show that as well but uh we added we made it inumerable and then we have like a mapping to kind of keep well the mapping is actually not how we track it but uh that's kind of the functions we get out of the box to allow it okay does that make sense yeah um just wondering if we had like uh let's say 10,000 nfts or 100,000 nfts would you have to go through all of them checking which one is the owner there the for Loop so yes right like that would create so that's why you probably want to use like uh Ponder or like the graph or something like that uh this was an easy way to do it at the workshop um You probably don't want to have those smart contracts it's just extra workload for your smart contracts uh but it does make it easier for like smaller projects or like for workshops but yeah you probably want to use like Ponder or graphql okay thank you actually the the there's an extension for both of them so you can directly use the extensions to create like your app out of the box with those features so you know we mentioned about the extensions and um how you can use them so the available extensions are like you both have the subgraph extension so then that way like it just indexes this uh so with subgraph it uses like onchain indexing with Ponder like it's offchain which kind of makes it really faster uh so you can kind of do that okay cool well if you have any questions we're here and thank you to um to everyone at build Guild especially Shi for like helping out super much with the application I'm more representing us both here so um yeah if you have any questions about scaffold about build Guild happy to answer we do have like most the developers here so um I hope that they can provide any other like Ultra Deep dive technical questions um but yeah I guess this is kind of the end of my if there are no more questions like we are done [Applause]