🔴 Let's build a CRYPTO LOTTERY with NEXT.JS! (React.js, Solidity, TypeScript, TailwindCSS, Thirdweb)

yo what's going on Papa Farm welcome back to another stream oh it is good to be back guys I have some exciting stuff for all of you I can see so many people getting hyped up already in the comments this is what I like to see it's what a puppy fam energy is about what is going on guys let me know where you're tuning in from right now in the comments if you're watching live right now live chat afterwards drop a comment wherever you're watching right now welcome to the public bomb crypto draw web3lottery dot are you ready to build your first ever Lorry dab guys say hello to what we're going to be building today welcome to the Papa fam draw look at this guys this is gonna be what we're gonna be building today an incredibly powerful web3 dot duplication decentralized app whatever we want to call it is is the place to be right now so I'm going to show you how this app works right now we're using it on the polygon network but I'm gonna show you how you can use it on the ethereum blockchain or the polygon blockchain or a range of others and we're going to be supported by this from the amazing and beautiful guys over at third web so let's jump into a demo right now I'm gonna buy some tickets right now and this is going to be some real lottery tickets guys so you can see is this coming out my account right now I'm gonna go ahead and click confirm also notice you can now donate to the Channel with ethereum let's go USA in the building what is up Jim no tone is Zimbabwe in the house Giancarlo from UK that's what I'm talking about Tunisia in Canada oh this is sick so we get the energy up with some new new Vibes new music look at this guys the tickets are now in we have eight tickets in this draw I've gone a bit further than this we can actually go ahead and we've got some admin controls as I've even implemented an admin admin functionality admin functionality so you even got admin functionality you can go ahead and do a bunch of things like draw a winner withdraw commission but what if I want to change account okay I'm going to show you how we can do that as well so I'm going to log out of this account and you can see we've got a beautiful splash screen everything is done with next.js a bunch of cool stuff as well so I'm going to go ahead and switch my account right now I'm going to show you how to do all of this do not worry so I'm going into a second account right now I'm going to go ahead and log in and as you can see this user is not an admin so we no longer have those admin controls but the beautiful thing is we can switch between the two different users by literally switching inside of our metamask you can see I can actually switch between them so let's go ahead and buy let's just say five tickets for this user as well so I'm gonna go ahead and buy a bunch of tickets right now you can see the total prize full gets accumulated based on the amount of tickets that each person Buys in so imagine you have a hundred people buying in different tickets now the price was massive and then you're gonna go ahead and have one winner from that prize ball and the best part is if you're an admin and you've set this up you will go ahead and make a little Commission on every single person who buys a ticket so it's a win-win for everyone guys this is the actual winning lottery system you can see I just bought five tickets now you can see there's 87 tickets remaining in this draw I've got about 24 minutes left in this role but I'm gonna speed it along and show you how we determine a winner so I'm gonna go ahead and show you now if we're inside of this one let me know right now by the way guys if this is a damn cool app because we've actually gone ahead and done something totally different on the channel I challenge myself I thought let's do something huge on this channel and we're doing it thanks to the guys over at third web so I'm going to be showing you their brand new deploy and release feature set which is damn incredible it's the reason why you're gonna learn how to deploy your first smart contract with solidity in today's video so it's gonna be a hell of a lot of fun man honestly this is so cool I can see everyone going crazy in the chat Mr Beast live oh this is dope me if that's actually Mr Beast I will lose my my mind that is so cool yeah I swear to God I hope it has something to do with that but okay this is sick let me know what you're watching from guys I see so many people jumping in I'm trying to keep up with the chat it's going nuts right now subscribe like if you haven't already we're gonna keep doing this I've got so much content coming you have no idea we're literally on fire right now so we're gonna go ahead and draw a winner from this prize ball so let's go ahead and draw a winner so we go ahead pick a lucky winner we have to accept this as this is happening on the blockchain this is all through a smart contract which I'm gonna show you how to deploy I'm gonna give you all the code for the smart contract in today's video as well so we're going to confirm this right now picking a lucky winner right guys who do you think is going to be is it going to be the admin or is going to be the other user who he signed in as let's see the interesting Moment of Truth oh if it's this guy you're gonna see something pretty cool if it's not this guy oh it was not this guy so this guy didn't win the admin didn't win let's go ahead and check in our second account you can see a next draw started can we see a winner whoa we know in a chicken dinner guys you can see this person has actually won the prize pool of 0.117 Matic and you can go ahead and withdraw or you can enter the next lottery so let's go ahead and withdraw Our Winning so right now you can see in this account I've got about 0.1086 Matic which is polygon basically we're gonna go ahead and withdraw our winnings and you can actually go ahead and accumulate so if you if you win three in a row it's gonna go ahead and accumulate it let's withdraw our winnings and you'll see that this number should go up a certain amount so we're going to look at something like 0.2 in a second so as this is happening I'm gonna go ahead and explain what you're going to be learning in today's build you're gonna learn how to deploy your first solidity smart contract using our amazing guys over at third webs deploy feature look at that guys bam we just got our winnings this is I mean come on I mean that's pretty damn cool right Mr Frank dropped in with a 10 donation he goes let's go cash prizes that's what I'm talking about man let's go ahead and read the chat as well I want to see what you guys are tuning in from we've got Lebanon yo I've Got Friends in Lebanon we've got Bangladesh Pakistan we've got Kenya USA Houston Texas Nigeria Brazil France South Africa Ethiopia what the hell is happening right now this is nuts somebody goes Martin after almost two years of watching your videos I got a job as an 18 year old student that is what I'm talking about another one oh thank you for the donations hey we got Strasbourg front Germany Morocco India South Korea Portugal I can't make this up it's so fast Ghana whoa okay that is why I'm back I'm definitely back with this this is crazy I'm actually sweating this is nuts all right so we're gonna go ahead and show you a breakdown of this build right now so as I showed you before we can even get this nice little Marquee spinner that's pretty cool you've never seen that in a build before so I'm gonna go ahead and show you guys how and break down what we're doing in this world so all you guys always ask all the time what am I using to draw on the screen well I use an app called screen brush and I'm going to go ahead and use it right now to go ahead and do the following so in this build you are going to learn how to deploy your first solidity smart contract okay so I'm going to show you how to go ahead and deploy your smart contract we're going to be building this app with next.js plus Tailwind CSS and yes this is using react as of course as that is the library that we all love that's why my name is Papa react okay then we're gonna go ahead and actually I'm going to show you how to deploy this onto the polygon or ethereum blockchain okay so it really doesn't matter which one you can do whatever you want the guys that made it so easy over at third web to do this we're going to be using 101 CSS to make a fully responsive build so if I go ahead and show you right now look how clean this is guys like what the hell look at that like that is just so clean as a build right and if I was to go ahead and actually show you right now I'm going to go ahead and switch account so let's go ahead and switch to my other account right here and even if on this one look at that what so clean and you're gonna do all of this in today's video for free what the hell right it's so much good value subscribe all right so we got loads of stuff going on right now I'm going to show you how to write robust code with typescript yes I said it I've been listening to you guys you guys want more typescript you want to know how to write code with less errors less bugs I've got you covered so lots of stuff happening in today's video this is so cool guys Jimmy says so nice to see they're getting so hard by the love you get from the chat dude I can't help it honestly look you can see the sweat right now I'm actually so hard right now from you guys I took pre-workout as well I always do it before I live stream okay let's go ahead and jump into this build this build is powered by our amazing friends over a third web I want to give them a special shout out because honestly what they have done here is so damn cool and usually when we have a sponsor it's awesome but I actually have a thing with these guys these guys actually are building something incredible right now and it's the reason why I stand behind them and I'm using them right now to build this and many cool applications to come so we're going to be going through the deploy feature today and in particular the third web release functionality which allows us to deploy smart contracts but in a released versioned format so we can actually go ahead roll back different versions keep track of different versions have essentially like a git versioning system for our smart contrast which was incredible right usually that'll take you months to learn I'm going to show you how to do it in literally a matter of minutes today these guys are killing it and it's going to be something that you're going to want to know how to do now if you haven't already checked out guys we have a course over at zero to full stack hero I'm gonna plug it because it's the damn best course on the planet it's the papa Farm's course we have over 800 members right now crushing it strong if you want to join us don't hesitate Papa react.com forward slash course link is in the description join us over there it's the best it's ever been right now we keep adding new content I added in a bunch of beginner content very recently so absolutely incredible whoa Mr Frank says just used the Donate QR code to send some ethereum to me dude what the hell thank you so much man that is incredible that is awesome what we're gonna jump into today's video so the first thing that I want to do is go ahead and show you a picture right you're probably wondering what the hell was he one shot's picture well this picture actually resembles what we're going to be doing in today's build okay so I want to go ahead and break this down for you so this is actually an awesome way of describing what we're going to be doing with a smart contract so if you've never done or used smart contract in the world of web3 essentially all it is is a piece of code okay so this piece of code is honestly just going to be living on the blockchain and it can do a bunch of different things for us so basically we're going to write a bunch of functions which are going to manage the lottery State all that kind of cool stuff and then we have to put it somewhere to live now this is where third web deploy comes in so typically if we had a smart contract written in City you're gonna have to use something like remix IDE and they're not honestly you're going to get lost all right it's pretty weird you're gonna you're gonna be circling the internet trying to figure out how to do this thing but I'm going to show you how to make it so easy with DOT web deploy so this is honestly the best thing ever because it automatically detects whatever's included inside of your contract gives you the UI for it so you can manage everything really really easily it's got multi-wallet Team Management so you can have several members in your team to actually manage things it's got loads of activity reports analytics that you can go ahead and dive into and they've got some pre-built smart contracts that you can jump into in fact we're going to be using a custom one today which is available in the second link in the description so check it out they've got loads of sdks we're going to be using the JavaScript one today and that they've got some awesome code Snippets in fact just oh just under 15 hours ago I think it was 15 hours ago they released a awesome UI component and I'm gutted because I really wanted to include it in this video and that is actually this one right here so if you haven't already gone ahead and checked it out as a challenge afterwards go ahead and check out third web's new web3 button component I bloody love it I messed around with it a little bit before this live stream it's amazing and I'm going to be using my next mode be sure of that but without further Ado guys smash the Thumbs Up Button we're about to go ahead and jump into today's video and I'm gonna give a special shout out to a bunch of our amazing viewers right now you guys have been incredible so proud of popular thank you so much everyone's hugely motivated today and somebody says how do you I'm 27. what's up um Joseph says we missed you sonny welcome back thank you guys so much we're gonna go ahead and hop into the build right now so get excited let's get dialed in let's get focused let's have a quick water break that's what we're gonna do right now we've upgraded the water wow this is crazy wow this is crazy let's go ahead dive into today's build first thing I want you to do is we're going to go ahead and set up next.js with Tailwind CSS so I'm going to go ahead and do the following type in next year's returns I like to show you this because in case you ever forget I want you to mentally be able to do this without me doing all my shortcuts all the time and they're kind of you know just you're going to get left behind if you do if you don't do it this way so there's actually a very nice one I can't remember which one is I think it's this one yeah this one so you want to go ahead and use this right here MPX create next app with Dash e with template with telling CSS my project so I'm going to go ahead and open up the terminal right now and we're going to kick start the coding Journey okay so get ready guys big brain guy is back with the dope tutorial thank you dude I I think that's a nice way of playing it but cool and also Guys Without You guys that in the back would not be possible right now so this right here is a symbol to how strong the proper thumb is because of how fast we've grown I love and appreciate all of you guys absolutely incredible stuff we're going to go ahead and jump into the today's build so I'm going to go ahead and do my document into my build folder that's why I like to keep my builds to keep everything nice and neat and then I'm going to go ahead and do the following I'm going to paste in that command that we saw earlier now I'm going to go ahead and rename this one so we're going to call this one Lottery YouTube dap okay name it whatever the hell you want honestly I really don't care name it anything at this point go ahead and hit enter this is going to go ahead and set up our first ever next.js app I've never heard an xgs before joke of course I have and this is going to actually prepare it with a typescript out of the box so we're going to get typescript out of the box with this one it will use yarn if you have yarn installed it'll use npm if you have npm installed really doesn't matter at this point what's up papicha I see you in the chat this is awesome Ahmed says I'm tuning in from Egypt this is so cool guys what is up okay so once that's done you need to CD into your directory so I'm going to go into my directory right now so Lottery YouTube dap boom just like that and I'm going to go ahead and hit code Dot and that's actually a shortcut to go ahead and open up my code repo inside of the uh copenhup vs code inside of my um code editor so inside that photo sorry again lost for words right now I'm going to close that gonna pop this open and you know how we like to do it guys we like to keep a neat and organized workflow so I'm going to make this a little bit bigger for you guys so that way you guys can actually see what the hell is going on right so you don't get so lost in this and what we're going to do instead now is we're going to go ahead and give you a brief introduction as to how the hell you can navigate any of this stuff so at this point to start your wrap-up we're going to go into the pages we're going to look at index.tsx this is the boilerplate code command B to hide the sidebar this is how we go ahead and get our starting point for the app so everything inside of main is basically going to be deleted and the footer but we're going to run our app tub to get started off with so what I'm going to do is I'm actually going to shut off the the old app right now I'm gonna go ahead and say in this case um you've got yarn because I've got a yarn lock five if you've got package lock you're using npm okay so if using npm simply run npm run Dev but I'm using yarn so in this case I'm going to do yarn run Dev this will go ahead and spin up our next JS app for us on localhost 3000 okay so I'm going to go ahead and do the following let's go ahead and everything looks good so far okay so we're gonna go ahead and put it on the side right now so I'm just gonna pop open a localhost 3000 like so and as you can see we get a welcome to next.js pop up on the screen so this is actually going to be our starting point now please give me some feedback as we kind of go through this if you like the pace if you like what I'm doing I'm gonna always be trying to improve for you guys to improve the pace improve the way I'm teaching so thank you so much for giving me your feedback as we go through every single time right so we're going to go ahead and get started off with this so everything in the main we're going to go ahead and delete so I'm going to show you as I do it so from Main I'm going to delete it and I'm going to go ahead and type in H1 let's build let's build oops let's build an awesome lottery app let's say web3 yeah there we go boom let's go to awesome web3. awesome stuff good stuff now we're going to go ahead and get rid of this footer bam done and at the top here you can see create next app okay so at this point I just want to rename this to something a bit more meaningful a bit more nicer in this case it's going to be the papa Farm Lottery okay or the papa fam draw is what we're going to call it now I do want to mention guys before we carry on any further I am not endorsing any form of gambling anything you do with any kind of money involved on the Internet is at your own risk I'm not liable for anything this video is only a tutorial and it's it's literally for educational purposes only anything you do is at your own risk be sensible with your money okay I have to say that as a disclaimer a lot okay Link in the description go check it out but basically remember this is all educational it's the point of this tutorial is not so you can go ahead and you know be Reckless be smart with your money it's just to teach you how we can use web3 Tech okay I have to be that be that guy okay so at this point we've got some Tailwind CSS involved up here now before we get started any further I want you to go into your extensions and make sure you've got the following installed Tailwind CSS I want you to go ahead and grab this right now if you haven't already done it Tailwind CSS intellisense and after you've done that I want you to get the following as well I want you to get the es7 re where is it es7 react Redux Snippets okay so these are the two extensions I want you to get right now and uh yeah updater MC says actually I appreciate that you're using typescript two times number on your straws that's really helpful thank you so much and wow we've got Madagascar in the house this is cool this is amazing okay I'm gonna go ahead and get rid of the image so far and I'm going to pop this on the side again okay so we're going to go ahead and get rid of this as well so you can see it's literally at the top right now so don't get freaked out it's not hidden okay so the first thing I want to do right now is I want to go ahead and explain how we're going to build today's app so yes we have the front end which you can see right here we've got the second I'm going to open up in the second uh side the actual app itself so you can see this is what we're actually going to be building we're going to get to this entire build in today's video so we're going to go from this all the way to this but that's not all guys in the second link in the description what you're gonna see is actually the code for a solidity contract okay so this is a bunch of solidity programming do not worry I'm not going to go into the in-depth nitty-gritty of each line of code in this video but I'm going to go ahead and give you this validity contract so that way you can go ahead and get started with this project alongside me without having to learn everything overall Andre Smith says hey it's only first time watching live one to thank you for your free work that you do for us it's very helpful I've learned so much awesome stuff thank you for tuning in dude I appreciate you let's check this out all right and let's see their second Ronnie Coleman I love that okay so at this point I want you to go into the YouTube description and grab that second link Jay can you send me the second link on the chat please and I can go ahead and grab it as well I don't have move all my stuff around okay so at this point I'm going to show you how we can do I think I actually have it over here um let me go ahead and pull it up over here so I can beat J to it there we go all right so in the second link right now we can go ahead and see this you're going to see a public repo and I want you to do the following okay so we have our next JS app over here just sideline that for a second right we're going to go ahead and put this on the side for a sec don't forget about it um so there we go thank you Jay so I'm going to go ahead and put this on the side for a second and we're going to go ahead and we need to clone this in okay it's gonna be a separate repo so I want you to go ahead and do the following copy this over here and go ahead and open up a terminal again okay so we're gonna put up a second terminal now and what I want you to do is go ahead and do the same thing so I like to put everything inside of the builds folder and then we're going to go ahead and do git clone and I'm going to paste this so what I'm doing here is I'm paste basically copying in my repo into this now I do want to mention if you use when you use third web in this build please use the first link in the description it helps support the channel and it helps everything grow so it helps us it helps third web know that you guys love their stuff so make sure you use that when you're building this up we're going to go ahead and clone this right now okay the next thing I want you to do is jump into it so I'm going to type in CD Lottery smart contract okay so I've got loads of lotteries so I'm going to go into that one and do code dot so we're going to have two bits of code open so this right here you have access to I've given you this bit right the other one you're gonna have to work for or the code is available in the papa GitHub repo link to the repo is in the description yes it's paid by either work for it or buy it it's up to you but I don't want everyone to just simply have stuff for free because then it ain't gonna work for it so hate me or don't it's cool work for it all right at this point it's not it's not going to benefit you if you just cheat that's my point okay so at this point we're gonna go into this and you can see lottery.so now this is essentially all the code which is the Smart contract logic which is a it's going to support and allow us to go ahead and have a lottery on the blockchain okay so this is an awesome piece of code right now and live by it's basically an extension from somebody else I've actually quoted them over here so you can actually see the original repo with this awesome dude over here I've actually extended it added a bunch of code myself so yes I code in solidity now pretty cool and then you can go ahead and see for yourself but the main gist of it I'm gonna go ahead and just show you the certain functions that we tap into as we use them okay but mainly it's about getting the tickets getting the winner assigning a winner all that kind of stuff but the there's basically the the way you can think of this game is we have 30 minute Lottery rounds that can go ahead and people can buy up to 100 tickets in our version of the lottery you can go ahead and change it I've made all this modifiable and you can go ahead and uh yeah you can have a chance of winning a lottery from a prize pool where everyone buys the tickets ever if everyone buys 100 tickets the price will be filled up one lucky winner is going to get all of those when uh all of that money so awesome stuff right um so yeah fox says will this video be available or is it only live no it's gonna every video of mine is always available afterwards okay so at this point we're going to go ahead and put this on the side for a second so we're going to go back over to our app okay so the first thing I want to do is go ahead and start building some cool stuff out okay so let's actually start building some UI so we see something on the screen okay I'm gonna go ahead and build this header component at the top right here let's go ahead and do that that way we get some kind of feedback you guys can get your hands on some code earlier on okay so first thing I want to do is I'm going to build a header okay so this header comes opponent is a self-closing component now as you can see it's freaking out it doesn't know what where the header component is so go into our photo structure go into the package Json level and add a new folder I'm going to call this one components okay inside of here we're going to create a new file and we're going to call this header.tsx header dot TSX and TSX resembles typescript with some jsx okay bam it's open now remember those extensions I told you about earlier we're going to use them now so rfce gives us our nice react functional component Mr Frank's Hardware pays off a sunny is dropping gold thank you so much dude I appreciate you from day one but Frank's been our absolute support incredible dude right so you can see the header right here say I am a header boom hit save and we're going to go back here Ctrl spacebar boom you can import like that and now you can see we have our component jump in so we can get rid of this ugly H1 and we're going to go ahead and make this look like this okay so what I'm going to do now is I'm actually going to pop pop this over here so that way we can go ahead and have some reference so I'm going to be building out this top bit right here now you're going to learn about Flex if you haven't used Flex before so get ready for some serious learning guys okay so first thing I want you to do is inside of this div we're going to have another div yeah and this is going to resemble the left side so in this case you can see over here I've got a left div okay so on this left side we've got a div with an image and then we've got a div with a H1 and P tag so when I when I kind of code this stuff up right I really want you to understand that it's really all about boxes right this entire thing is a div then you've got another div here then you've got another smaller div here and then you've got two elements here so you've got the first element second element and then you've got your image element right so it's all about boxes when you're coding right that's really how it kind of works out when you're doing UI presentational stuff and then you use flexbox or grid to go ahead and kind of get everything in Punit says sunny can you do it at purchases for react native video boom I've got you boy it's literally in the pipeline there's one coming out in less than a month so yes we're using Revenue cap those guys are awesome right so at this point I'm going to go ahead and pop in an image yes you can and you should be using the nexjs image tag we're going to go ahead and refactor it after to include it so yeah we're going to jump in afterwards but for now I'm just going to pop in an image okay so don't freak out okay we've got an image of the papa Farm logo I'm going to go ahead and put in a class name and here we're using tell ncss so rounded full gives us a nice rounded look we're setting a height of 20 and a width of 20. now if you've never used Tailwind CSS and you're wondering whoa whoa whoa what did Sonny just do right there right what this is is essentially utility class names so we head into Tailwind CSS they're really cool utility class names which basically allow us to speed up the CSS development process and by doing this this allows us to build really awesome reactive websites with a bunch of different things at our disposal so in this case you've got different colors from a shade of 50 all the way up to your 900 in loads of different tones you can do responsive designs you can get any kind of look and feel so this is why I love Talent CSS and it's just bloody incredible at making your app fast it's responsive it's awesome right so if you go ahead and see this we we can go ahead and get really really nice effects like this so if you see my app right here look it's going to honestly be it's so beautiful right and it's all done easily with tail and CSS so it's worth learning trust me okay so at this point um somebody says am I the only one hearing nothing Jay I think we're good for sound quality let me know let's go ahead and hop in so I've got a div underneath here and inside now I'm gonna go ahead and pop in a div with a H1 tag there we go and in this one I'm going to say the papa Farm draw okay bam Andre Smith says I love Tailwind it's changed my life I love that dude it's changed my life too it made me fall in love with CSS again I hated it before that I'll be honest with you and here we're going to say the user who is logged in and we're going to add that logic in afterwards so as you can see right now depending on who's logged in you can go ahead and do the following so if I switch my account so in this case I'm going for metamask user this to the other user let's go ahead and connect it there you go now you can see I've changed my user okay now I also want to recommend guys that you need to go ahead and actually set up a metamask wallet in today's video now when you set up your metamask wallet it's going to ask you to save a bunch of phrases now never ever give these phrases away it's literally the single passcode for your wallet if you give them away someone's in your wallet they take everything don't do that it happened to too many people so you want to go ahead download metamask and then start setting up your wallets right and it's going to be very simple you download it follow the instructions it's fairly straightforward to go ahead and get this done okay so I've already set this up and you can go ahead and I've got two accounts now so that way I can test I've got one account two account I highly recommend you do the same and keep your keep your seed phrases somewhere safe please okay so we're gonna go ahead and hit save and as you can see it's looking pretty ugly at the moment but we're gonna make it look beautiful okay so I'm gonna go ahead get rid of these two I don't need that it's just a div next to the image and now I'm going to start styling things out in fact I messed that up I'm going to keep that in I'm going to actually pop that underneath like so now on this surrounding parent if I want it to be a flexbox that way whenever we have flexbox it kind of Chucks everything in to a role by default already 200 likes that's what I'm talking about guys smash that Thumbs Up Button let's get this video to 1000 likes let's do this guys great tutorial something you are boom you're breaking the Norm's YouTube tutorials I love that smart effects I'm trying to disrupt it I love that you find it useful thank you so much items Center actually pops it in the center okay so I'm gonna go ahead and zoom in right here you can see that's actually going to have done that then to space out the two children components these two containers I'm going to say SpaceX of two bam just like that it goes apart if I put 10 bam it goes further we only want two we don't want to go crazy so it's looking pretty good right now okay now for these right here I'm gonna go ahead and change this up so I want this text to be extra small make it look really nice and then we're going to go ahead and say text emerald and I want a shade of 500 so now we've got a nice green and I'm going to truncate it if it ever got too long okay so that way if ever went over the limit going to dot dot by default and it won't go ahead and spread for the H1 I'm going to go ahead and change it up so I'm going to say text should be large the text should be white and the font should be bold now this is going to disappear of course makes sense because we haven't got a background color so let's head over back to our index.tsx I'm going to set this up so we have a nice background color and you guys are actually going to see here how I can use a Dynamic Color to style it however I want so in this case I'm going to say background is going to be this square bracket hex color that's how you do a custom color so as you can see that's giving it the nice green that we can come to see in this it's kind of like a a casino e Lottery Vibe it looks pretty cool right and then we're going to say the minimum height is going to be the screen and this forces it to use up the minimum height of the full screen so that way the whole screen gets that beautiful color and then we're going to go ahead and say Flex Flex column so that way every child under it is a retaining to flexbox and it's going to be stacked up in a column fashion right so looking pretty good right now okay doing very well so far guys and also I want to to mention I just dropped another free skillshare course right so the HTML Basics 101 is absolutely free and it's over on skillshare Jay you can drop that link in the chat right now or it's in the description down below somewhere but basically type in Sunny Sango on skillshare you'll see me for free Okay so we've got more tutorials everywhere it's pretty cool right so now for the header we're going to go ahead and continue on for the middle bit I'm gonna buy tickets log out and then this nice little square box okay so let's go ahead and build that out so for this middle box I'm gonna go into the next div so let's go ahead and jump into that next step this is kind of like a Silicon Valley kind of a song If you if you know what I'm talking about it feels like that kind of vibe right and then we're gonna have two buttons here so I'm going to say two buttons so I'm gonna have a button here and I'm gonna have another button here as well and these are going to be on navigation buttons that resemble these okay there we go and let's go ahead and say and for everyone says why don't you do this why don't you do that guys feel free to do it however the hell you want right there's a million ways of writing HTML CSS no wrong answers here just do it as you feel happy okay now for these buttons we're gonna have a surrounding uh class name this is going to be a background color and it's going to be this lighter shade as you can see here okay now right now we can't see it that's fine we're going to go ahead and show it in a sec but what I'm going to do here is I'm going to create a component called nav button that way we don't have too much kind of going on right in one bit of code so we're going to say nav button dot TSX boom rfce gets us going and then this is going to be our nav button okay so now I'm going to go ahead and replace these button Snippets with nav button like so okay self-closing components just like this boom and we want two of them nice right there you go and now you can see nav button is stacked under there looks good okay so at this point we're gonna go ahead and actually create these two buttons so they look the way that we expect okay so for nav button I want to go ahead and make it look a lot nicer than that now Jay just dropped this skillshare link for that free course um that is on right now so you can go ahead and check out the HTML Basics 101 you guys are thousands of you love the react Basics 101 so we made another one there you go boom right so let's check this out um this thing is the right way to Houston it's not gonna lie thank you dude I appreciate you right so let's go ahead and create this button so firstly I don't want to dive here there's no need I'm going to create a button instead and I'm going to make it customizable so in this case we're going to accept a prop so the props come through here on components in react and in this case I'm going to go ahead and destructure and get the title out of it now you can see here we're using typescript so typescript says whoa what the hell are you doing that is a type any which means you haven't specified what that should be so here we're going to actually use some typescript okay so in typescript you have to Define what the props are so what data types are your props so here we could even say type props or we can do interface but it really doesn't matter it depends on your preference but I'm going to go ahead and say here interface and then we're going to say title is a string now you're probably wondering well it doesn't work because you haven't assigned your type yet so now we say the type props go here you can see now he's not complaining and it knows that this is a string okay so the beautiful thing about typescript is that I've said this is a mandatory it's a required prop if I did this you can see our header is no longer complaining if I do this it's freaking out and this is because we're saying whoa you forgot a header you haven't given me a title here what am I supposed to do with that right so in this case we're going to have a title here which is going to say buy tickets okay and the second one is going to say log out okay log out boom okay just like that right now you can see we've got buy tickets and log out over here and the buttons are clickable looks pretty decent all right do I have a Discord yes we do link is in the description go ahead and check it out Simon Says Tailwind is Awesome by the same time let's forget the pure fundamentals appearances that's yeah you want honestly you want you want you can learn it feel free to take courses on it do that kind of stuff but when it comes down to it I use down with CSS for everything and if you really want to check the what it kind of sort of transcribes to hover over it you can see what it changes to okay I'll be honest we've done loads of production gigs now it really doesn't make me want to ever go back to them yes it's important to know the fundamentals that's why we teach the back of the fundamentals first and then that kind of stuff okay let's do this let's jump into it so nav button I'm gonna answer questions a little bit up later I want to kind of keep this pace going we're doing awesome right now okay so I'm going to go ahead and set the background color here to a a very nice shade of green and this shade of green I have no idea what it is so I'm going to just grab the hex color boom and that's what it is right there okay looks nice and I want to go ahead and say that the text should be white here um so everyone's asking what is the auto complete that I'm that is happening on my uh vs code right now well that's actually GitHub copilot so I'm actually using GitHub copilot I like to use it in the background uh that's why I'm getting suggestions here for example if I was to go ahead and just put in uh like a line here or something it usually comes up with suggestions let's get up code by that yeah okay so this point uh we've done a padding y of two a padding X of four I want and I want to say it's rounded button okay so looking pretty decent so far when I hover over it I want it to change a little bit okay so what I want to do here guys is I actually want to have the background to be like non-existent and only if it's active should we go ahead and highlight okay so I'm going to change this up I'm going to say is active and we're going to have is active and this is actually going to be an optional and it's going to be a Boolean okay and in this case if is active so in this case if you want to have some JavaScript here you have to change this to a JavaScript template and then you have to go ahead and say the following you're going to put your little curly brackets here just like so I'm gonna cut this arm and I want to go ahead and say the following and say if is active then I'll add in the background color class okay so in that case now you can see it's no longer there okay and then if I hover over it I want it to be of this color so now if I hover over it so let's go ahead and put I don't hide the what the heck is that minimap let me see Minnie Mouse get rid of that yeah so let's say hover background color so in that case now if I hover over it it's like this but for the header I'm going to keep it as active now you can see the this one's always on but the log out is off okay looks pretty nice [Music] um it's not free no uh Gap copilot is not free anymore but for students it is so if you're a student go check it out if you're a maintainer of an open source Library you'll also get it for free right so smash the thumbs up button do it incredible right now nearly 300 likes let's go this is sick all right so we've got this going pretty well right now that pre-workout kicked all right so we've got the nav buttons looking pretty nice and I'm gonna go ahead and say that the padding of four would be good and then I actually want to say a space between them of two all right so that's pretty good right there so as you can see I've got this kind of forming it's just not in the correct container layout okay so we're doing all right we're doing all right we're gonna get there and then the final thing at the end is going to be this right here and notice how on a small screen it changes the middle one is going to disappear and it's going to change to a log out button over here okay so we're gonna do that as well so the final one is the thing on the right now we are using something called hero icons right so you guys might remember hero icons they're damn awesome and I'll show you where we're actually using them later on as well if I go into my account boom you can see my admin controls we've got all these beautiful icons right so how do you get those hero icons honey well in fact all you need to do is go over to Hero icons over here hierarchons.com and the amazing thing about hero icons is they're actually built by the guys of return on TSS so it works our box with it right um I'm not using Gap in a flex lab because it doesn't work in certain browsers now you know right so I'm going to do documentation over here I'm going to install this so npm install here are icons wrapped I'm actually using yarn so I'm going to do yarn add instead you just remember it's all preference don't worry no right or wrong here okay so come on J to pull this up now the way I like to do it is split my terminal keep my running terminal on the left and on the right I'll do yarn add and I want to just pop in my hero icons react okay this will install the dependency into my project okay boom there we go there we go looking pretty good so far remember if you're enjoying this kind of content just imagine what it will be like every single week with more of this with more kind of one-on-one kind of skills more mentorship that kind of stuff join us at search for stack hero that's exactly what we do if the link is in the description to join that's my Flagship course in community me and Jay have a life into that thing so join us if you're enjoying this and there'll be plenty more to come right so at this point I'm going to go ahead and actually pop in our first ever hero icon right so in this case let's go into hero icons and you can see here I can just touch through so imagine if I need a home I can go ahead and see I get all these different icons so this is how I'm searching for them but in this case I've actually done the hard work for you guys I've actually found all the icons that I need so you can just go ahead and copy the ones I'm going to be using so the first one I want to use is something called bar three bottom right so bar three bottom right icon and it's from here icons react 24 solid okay and there's different variants right there's actually a solid variant a outline variant and now in the newest 2.0 a mini variant okay so you get all these different variants and that's exactly what they mean when you see variant okay so if you want it you just change the ending well it's pretty thing what is up dude amazing stuff okay I love the chat that's popping off right now this is awesome I'm reading it as I'm coding so we can do this and I can go ahead and pop in the bars icon now as you can see this icon came in so looking pretty nice right now and all I have to do here guys is go ahead and style it up with the regular tail and CSS stuff so I can say a height of eight a width of eight and a margin X of Auto because we're going to be doing some cool layout stuff with that in a bit text is going to be white and I wanted to have a cursor pointer when I hover over it bam now I got a cursor pointer when I hover over it and it's looking pretty neat okay great stuff okay so the next thing is let's fix this layout we need it to look like that not the way it's looking right now okay so let's do this ourselves in the beginning so let's go up to the header and what I want to do here is go up to this and in fact I can actually change the syntax of this outer div 2A header which is going to be more syntactically correct or better for SEO purposes and we're actually going to be using something called a grid layout here so the reason why I've chosen a grid layout is because I want that middle one to retain the middle position for as long as possible then we can kind of change layout if we want so I'm going to show you how we do it right but first if we say grid Now by default it stays exactly stacked up on each other this is because everything in a grid by default is a one column so it's going to be one one yeah one column so it's going to be first row second row third row well what if I said I want to have three columns or I want to have five columns right well in this case we can go ahead and do the following now it's important to know that when we use telman CSS it's mobile now first which means any rule I write applies to all the mobile viewports now if I want to change it as the screen gets bigger I can use something called responsive breakpoint so I can say on the medium screens apply this on the large screen apply this on the 3XL screen apply this blah blah blah right so that's how we basically go ahead and do it so at this point I can go and say on every small screen I want it to be grid columns 2 okay so as you can see now it's two columns one two and the third one comes into this one so as you can see here small screens have two right but on a large screen we have this might look like three but I'm actually using something like five here and I'm spanning three for the middle one so in this case I'm saying the middle one should have grid columns five okay and now you can see as this screen is actually going to grow see how the middle one so we've got one two three and actually What's Happening Here guys um is actually we've got one column two column three column four and five are like you can't see them but they're there they're four and five that's why it's kind of like semi the third is like in the middle okay so at this point the way we kind of correct this all is I'm gonna go firstly add a few things I'm going to say justify between space wise and I'm gonna go and say items should remain in the center padding of five to kind of get everything spaced out okay um but that middle one okay for that middle one I want to say on a medium screen and above okay because remember it's hidden otherwise so I'm gonna say the column should span three now look what happens guys on a bigger screen it's one column two three four five okay I mean it says it's pre-recorded no it's not pre-recorded dude I am live right now it's chanters you're a legend man big win with the stream thank you dude I appreciate you um so you can see this look at that look so it's taking up the middle three okay so looking pretty good so far now we're gonna go ahead and style up that middle one a bit more so it looks a bit nicer well firstly on a small screen I want to hide the middle one so in this case it should be hidden okay I only on the middle screen should it come into view now on the middle screen I want to make it a flex box as well Okay the reason I want to make it a flexbox is um okay well you can't see it right now let's do this to a half and half I'm gonna make a FX box on the middle screen because we're going to go ahead and start up in a way we're going to say items it should be in the center and I want to go ahead and say justify in the center as well and around the corners just like so okay so that way it will perfectly set itself in the middle it's only the reason I wouldn't work with react to tell and fluently thank you dude that's awesome look at that guys crisp grid layout gets rid of the last one at the end okay so looking good so far but we're not there yet all right we're not finished yet calm down right we got this I said at this point we got the uh class name we got Flex I'm gonna say the next last one should be Flex column and I want to do margin left Auto because you see right now it looks like there's loads of space here so what we do is we put a margin left Auto which will push this all the way over here so bam it pushes it on the left and then I must say the text should be right aligned so text should be right aligned okay nice looks pretty good so far right so in this case look as it gets smaller you can see that stays on the right and the middle one disappears okay looking good now I also want to have a span or another element now this one I want to have a nav button so the logout button I'm actually going to put here as well but I'm actually going to do something pretty cool here right I'm actually gonna say on a medium screen it should be hidden so what you see on the medium screen is hidden and then it comes into play now the reason why it's not coming in here is because I've forgotten to put it in the right place so you should put this inside the div my bad all right so at this point now on a small screen you see the logout moves there and as we get bigger bam and as you can see here we have the same logic being applied okay so we have a log out looks really nice everything looks the way we want it right so we'll do the same thing here that's really clean all right I like that okay so this is looking pretty good so far um I actually want to bold that text up because I think it doesn't look that nice right now so I'm going to go ahead and say font should be Bode and that looks a bit cleaner yeah font should be bold there we go there we go that looks nice though right we've got fun both fun okay looking clean all right smash Thumbs Up Button this is cool so far Miss Frank says flexbox froggy Amen to that is it possible to take courses in installments hell yeah dude that's why we offer installment plans if you want to but otherwise if it's you know if everyone says I can't do that I don't want to do that then feel free to go ahead and watch these videos for free quick little wall break we're doing very well for Pace I used crate next app okay let's go okay so this is looking pretty good now buttons are done the header is done we're now going to move on to the center bit right the Marquee that kind of stuff is kind of extra fancy stuff in fact what we're actually going to do now is we've done the headers we've got some UI to look at I'm actually going to go ahead and move over to the smart contract because I want you to start deploying your smart contracts right so the first thing I want you to do guys is go over to your lottery solidity file okay so you can see right here um ignore this don't worry about it file import callback no sport that's fine um it's just there's a fixed fret I can't remember live right now point is this is fine okay so we actually installed a dependency right now so I've given you all this stuff inside of the second link in the description so you have this code now what you need to do everyone's saying hard out or Truffle in the back end guys it's even easier because we're just deploying it straight up with third web so I'm going to show you how this works so what I want you to do guys is go over to deploy third web so the second the first link in the description will take you to this page now this is honestly Game Changer I swear to God it is so easy to deploy your contracts so the first thing that I love about this is that it is owned by you no other platform owns it you own it with your address that you have signed up with it's that easy click get started and we can jump into it now you can use MPX deploy or what I'm actually going to show you how we can use a release right so third web deploy we'll just deploy it once but what if you want to deploy your contract and then you want to cut sometimes like for example when I was developing this I deployed my contract and then I had to keep making changes right so I had version one version 1.01 version 1.02 and so forth so I'm going to show you instead how to do that so if you want to deploy once you use a third web deploy and instead or you can use third web release to create a release cycle which allows you to carry on deploying as well right so release Cycles are basically allow you to have like version one version two version three and then you've just got a button where you just click deploy and it works okay so I'm going to do MPX third web release now there was a little bug at the time this morning only that I found so if you do run into this bug simply head over to this right here so github.com like so um I'm gonna pop it up on the screen right now so you guys can see that okay head over to the third web CLI and if you basically if you run into an error just simply run this command but with release instead okay so I'm going to copy this right now and you can use the latest um the latest version of it okay so I'm going to close this up go over to our smart contract and I'm going to go ahead and do command J and we're going to deploy this bad boy all right so I'm going to go ahead and say MPX third web at latest release okay now notice I'm not done anything else besides this right now okay so I'm just doing this MPX third web latest release hit enter at this point it's going to ask me do you want to use the release or gonna install the release so hopefully it does that uh it takes longer whenever I'm on live hopefully okay there we go and you get this pop-up if it says do you want to install just a yes and at this point do you want to continue and compile this project with so C instead hit the Y so for y for yes on your keyboard so I hit Y and it says true now compilation failed uh this is because okay so what I need to do here is I do actually need to do an npm install so I forgot right I actually pulled this in you see npm install to install the required dependencies and now I will say added one package and we should no longer see this if we jump into our lottery so far okay so that was the issue my bad right now we do MPX third web latest release and we should be able to go ahead and get a nice release okay so I'm going to compile this by hitting Y and you can see compilation successful processing the contract and what this is literally doing right now is it's uploading that contract choose third web and that's where we can go ahead and actually release this onto the blockchain right so as you can see guys I am logged in to with my metamask wallet so at this point at the top you will have a button which says connect wallet all you need to do guys is go ahead and connect your wallet Okay click on the the drop down over here make sure it says Mumbai okay so you've got loads of different things I'm going to give you a quick explanation as to what a mainnet versus Tesla is when you are developing any kind of crypto app okay make sure you're doing it on a test net test Nets basically do the same thing but you can basically fund yourself with free money right so free ethereum free uh polygon Matic and that kind of stuff if you do it on a mainnet you actually have to use real money so the point is you develop on the test net and then when it's ready to go out into the real world and get used by real people then you basically switch it over to a mainnet that's where the actual ethereum carries value okay so we're going to be doing everything in the test net but it's extremely easy to go ahead and shift over to the main in that once you're done so at this point we're in Mumbai okay Mumbai thematic now as you can see here we've got lottery app by Papa react and as you can see this is my 10th deployment so you're gonna see this but for you guys it will be your first deployment so you can go ahead and change it however you want and then we're going to click on create release now you can see if you are not on the correct version on your wallet right so when you have a metamask wallet you can have several different networks that you can kind of be connected to so don't stress out if you can't connect to the network it should pop up saying add the network right so in this case if you click on at this point it'll say add um the Mumbai Network so you click it for me it's going to switch to the network I'm just going to click switch network but if you'll just add the network for you if that doesn't work simply Google how to add Mumbai Network to a mask is easy it'll come up it'll be a simple button you click okay now after that's done we're going to go ahead and create a release now a release is completely free okay okay now we are going to be deploying our smart contract to the polygon Network okay so at this point we are releasing our polygon contract so as you can see our contract registry lives on chain polygon releasing is free Okay so this point all we need to do is sign to prove that we are who we are so we're going to sign it and as you can see under this account right now I have gone ahead and I'm actually going to head and I'm registering oh this contract registry will now live on the polygon chain okay so as you can see now it's on the polygon chain and this is actually there it's not deployed it's not deployed yet okay so at this point it's it's that now what I need to do is you can see I've got all the functions that I showed you earlier Okay so we've got buy tickets draw winner ticket refund all and so forth so we've got all these drop downs here and this is the versioning I was talking about right so as you kind of keep releasing you can have different versions and you can go ahead and go back and forth 300 likes let's go this is amazing thank you so much Andre Smith oh my God I'm so excited to do this one sunny and thank you so much dude this is credible keep smashing that Thumbs Up Button guys we're nearly at 400 likes let's go so 1.01 10 is the other version almost I'm going to deploy now now this is the bit where you've got to be careful when we click deploy it's going to ask you which network or chain you want to deploy the contract to okay so in this case remember I said it's already on the polygon Network okay but at this point do I want to put it on a main net or do I want to put it on a test net at this point I'm going to give you a second you should have answered it by now screaming at the screen saying somebody don't do on the main net because you're developing um okay it's a test now right we're gonna test that um somebody says it's only a full-time YouTuber or do you actually work for a company I'm a full-time YouTuber I have a software company now we do a bunch of our stuff yes that's what we're doing right now full time this is my gig all right I'm very grateful for that thank you Bob fan so Mumbai Matic okay and I want to change the game on coding in the YouTube space that's what we're doing right so we're going to switch to Mumbai and then we're gonna go ahead and deploy and as you can see I am on the polygon network but I need to be on the Mumbai Network which is also a polygon Network it's just the test snap so I'm going to go ahead and click switch wallet to Mumbai so you can see they literally make it easy for you right so we're just we deploy we put our contract on the polygon Network the first step then we're deploying the contract to the test map okay so I go ahead and click deploy now it will ask me to go ahead and do a deployment now at this point you can see there's gas fees now you're probably wondering sunny I have zero Matic my thing just broke okay don't freak out at this point you can see that's an error because I canceled the transaction but I'm going to show you you're going to need some you're gonna need a form of ethereum if you're deploying to ethereum or you're going to need a form of Matic the polygon currency if you're deploying to polygon so when we're using a test net we can use something called a Matic Force set right so we can say polygon Matic Force set Bounce It full set false it I don't know right what is it let me know and what you can do here is you want to Simply go into here click copy you want to go into your wallet address paste it and click submit make sure on the Mumbai Network and what this will do is you click confirm and now this will go ahead and transfer now sometimes it doesn't work that's fine you can go ahead and find another one there's loads of them guys you can do one by fullset.com sometimes they work sometimes they don't the point is is that what this will do is it will send you a bunch of Matic okay so there you go that one's done this will send me a bunch of Matic in just a second so we're at 2.11 now we're checking back in a second okay so let's go ahead and head back so now you should have some Matic in your wallet okay so in this point yeah there you go see I got 0.5 so you can get free Matic right because we're on a test net if you're on the main nap you have to actually buy that cryptocurrency so hence why you see this difference right the Tesla is just for testing developer stuff the main net is where you actually have to buy that currency and it has value right so two point uh so 2.6 we've got enough so they're going to click deploy Bombay and I'm going to click deploy so at this point guys this is the crucial step okay so I'm gonna go ahead and click confirm now no joke this is all it takes is to get your smart contract up at this point third web is doing all this Wizardry behind the scenes and it's hosting your or not hosting it's kind of literally putting your smart contract onto the polygon Network the chain right so let's go ahead and hit uh confirm and as you can see we're now going ahead and we're going to deploy our contract remember the amazing thing about this is third web facilities everything but you own the smart contract that is live so it's really really awesome how they've done this I really do believe in these guys and they are incredible at what they're doing so as you can see now we are at the thirdweb.com forward slash Mumbai Network address and what you want to do here is this is the Smart contract address so basically that address resembles a piece of pro basically that address resembles a program that is living and breathing on the polygon Network right or the blockchain right in this case the test net right so the Matic test net and as you can see guys this is incredible because we can actually start using it so this is real function so if I want to click on get the tickets let's see how many tickets have been bought so zero so if I want to buy some tickets right now a ticket in our use case costs 0.01 so I'm actually going to show you where I've done this so you can see the ticket costs 0.01 ether now you're probably wondering something but you've done Matic so why does it say ether don't worry guys luckily the polygon devs got lazy they didn't want to change the keyword so if whether they are not using ethereum or Matic for polygon you still use the keyword ether when you're coding it okay so it's fine it's just funny all right so at this point I want to buy five tickets so 0.05 execute okay so at this point I'm gonna buy five tickets and we're gonna have five tickets so let's go ahead and do this right now and as you can see I'm gonna go ahead and confirm that purchase and let's see what happens guys okay so this is the awesome thing I'll show you how the lottery Works everyone's saying how do you generate the random numbers I'll show you how this works one second all right well Mr Frank let's go five dollar donation damn third web deploy saves a ton of time when you deploy a ethereum contract is through remix and the silly API Jason to hook onto a phone dude this is what I'm talking about it's honestly oh there we go this is coming guys that's what I'm talking about when you deploy normally it's a headache the third web deploy makes it easy right so I've gone ahead and bought five tickets now the way that this Lottery Works guys is we are going ahead and so in this case there is always a winner in our Lottery right so every time we do a draw somebody will win right so there's no carrying over somebody always wins and the way we do this guys is we simply go ahead and actually have a array of tickets so now if we go ahead and view the tickets you can see there are five tickets right so you can see my address is there five times okay now the way it works is very simple now if we go ahead and click on remaining tickets so where is it going um get remaining tickets where is it why am I blind for a second remaining tickets you should be up to see 95 tickets remain so think about it this way everyone buys a bunch of tickets that means you get your address posted several times in that array which which really increases your likelihood to win so at that point you can go ahead and put in some stuff and what I've done here is I'm actually limited to 10 people 10 tickets per person on the UI yes you could keep buying 10 so we could we could solve that acidity this is a tutorial so don't freak out okay but the point is is that you can go ahead and actually do that so at this point once it's done you're gonna have a list of users and they're all gonna have a bunch of tickets and when we come to draw it it's essentially gonna pick one of these at random and that is your winner okay so at that point you probably want to yeah but you could put in more on blah blah so that's why we limited it to 10 tickets okay on the front end but still the point is that this is purely a tutorial I don't want it to be a case of you know everyone crazy you can feel free to extend it very easily okay all right let's go ahead and do this now so you can see how easy this is right we've got all of our writing functions our reading functions and so forth okay so at this point I think we should start coding the front end okay so what we're now going to do is we're gonna go ahead and actually connect it up so think about it this way right so for this is the actual live one so again this is connected to a different smart contract not the same one remember every single time you deploy it's a different smart contract address which means if you deployed once and it was version one for you that has a different smart contract address if you deploy again you get a second uh contract address for your version two you deploy again you get a third contract address you have to make sure you use the most recent up-to-date um address okay so awesome stuff so at this point you can see okay that's actually actual one so let's go ahead and continue on building so first thing I want to do now is I want to go ahead and Implement third web into our application right so I can start actually using the um the smart contract that we have here so the amazing thing I love about this guys is they actually give you the code Snippets right so if you click on code you can see in a bunch of different sdks even the go programming language oh sorry guys I actually hit it so you can go ahead and see code you can see react JavaScript Python and go so here you can actually see the events that get fired off the code saying sources a bunch of other stuff so the first thing I want you to do is install the dependencies okay so grab the dependencies use npm install if you're using it I'm using uh the appropriate other thing so we're going to go ahead and pop this in command J I'm going to yarn add bam and we're going to start installing our dependencies into our project this is going to allow us to use third web's awesome SDK dependencies to inside of our application guys you guys are incredible the retention is insane today thank you so much for tuning in we're still going very strong smash that Thumbs Up Button your boy is coming with so much content it is nuts I'm not joking I am not joking they're gonna see me come live more than I have ever come live before I hope that's excited exciting I know what I just said but it's cool subscribe uh 400 likes coming soon carrying on um so at this point what we're gonna do is you can go ahead and uh look at the SDK docs if you really want to so you could type in third web um react SDK for example let's just type in that word react there you go bam and they've got an awesome website you can see we've got everything here starter templates a bunch of stuff the first thing we actually need to do is wrap our app inside of the third web provider so we're going to copy this line right here and it's very simple to get working with next.js so come on Jay the starting point of any next year's app is actually going to be inside of pages underscore app.tsx so this is essentially where everything renders from okay so at this point what I want you guys to do is where we have a return put parentheses around it drop it down a line and I'm going to go ahead and import the top like so Roman that is a great idea I will definitely consider doing it just have to get around to it so we're going to surround our entire wrap in the this third web provider okay so I'm going to go ahead and pop this open like so I'm going to hit save now you can see third web screaming us because we haven't added in the correct thing we have to tell it what chain are you looking at remember I deployed to a test net but you have to tell your app are we looking at the test now are we looking at the you know which one are we looking at so this is where the chain ID comes in so what we can actually go ahead and do is go ahead and add in the desired chain ID and here I put in chain ID oops chain ID Dot and here we can go ahead and do this uh okay Mom buy there we go so remember if you deployed live you would want to change this to you know um let's go ahead and say uh let's imagine that the polygon that's live if I did Mumbai that's going to be the test net for the polygon right so amazing stuff so you can change this you can make that an environment variable literally do whatever the hell you want but you can even have it as like if production do this if development environment do that I'm not going to go too far into it but that's how we go ahead and wrap our app okay so now inside of our app we can go ahead and do the following okay um Jay I think we're doing well yeah for the audio thank you I see you active Okay so this is looking great right now and uh yes we've got a wrap going on um we've got third web providers so inside of our app now we can start using all the cool third web Hooks and stuff because we've used that higher order component which Powers up our app to allow us to do that okay so the first thing I want to do is have some kind of authentication system so if we log out you can see I need to be logged in in order to reach the front page right and in this case we're logged out okay so I want to show you how to do that so the first thing I want to do is I need to get the user if they're logged in or not now the way we do this guys is we go ahead and we're going to go ahead and add in the following we're going to say const address and this is how we're going to basically determine if the user is logged in or if they're logged out so I'm going to say use address which is a nice little react hook and I'm going to go ahead and do the following now userdress is not popping up weirdly on my uh demand these I'm gonna actually go ahead and do the following I'm going to go ahead and pop this in um I've actually imported a bunch of things because we're going to use them later on so I'm going to leave these in there but yeah there's a bunch of stuff here the one that I'm interested is use address okay so user dress is essentially going to try to get the address for us right so remember when you're logged in in web3 world you actually go you've got an address okay so if I was to go ahead now and console log my address so let's say console log okay some reason my Snippets aren't working the way I want them to console log my address now if I go ahead and inspect we can see that my address has been popped out which means I am logged in okay you guys can see this there is an address there okay so that is my um address feel free to donate if you want it's on the screen right now to scan to donate the ethereum as well um so at this point we are logged in okay so what we can do here is I can actually go ahead and actually use this in the header right so remember I've done it over here so I actually want to show firstly the logic for if I'm logged in and then we'll handle the other case afterwards if we're locked up so let's do this so first thing I want to do is actually go to my component over here and I'm going to import my user address here as well so into the header.tsx let's do this um Andre I will answer that in a shortly I will just focus that moment boom okay so when you use uh when you disconnect by the way it did disconnect it just wasn't disconnected from the site you actually logged out okay so there we go use address use dress it's just your signature happened once so that way the site is actually connected um okay so at this point we've got the address so here I want to have it so you only show some of the First characters and then only show some of the last characters okay so here I'm going to go ahead and do the following little neat trick I'm gonna say that the address which may be you know it may be uh not there in the beginning because it's asynchronously loading that address I'm going to say substring it okay so give me the first character up until the fifth character cool and then give me a dot dot dot this is what you tend to see on a lot of crypto sites and then we'll say address where the question mark is called optional chaining I'm gonna do a substring and I'm gonna go from the last character backwards to five okay so I'm gonna say give me the last character which is address dot length and then I'm going to go ahead and say address dot length minus five there we go I feel like I have this song in my my hairdresser it's so weird okay let's go ahead and hit save and as you can see now what this will do is it will give me the first five characters so here you can see the first five characters dot dot the last five characters okay so very nice little trick and they can show you who's logged in that was a kind of nice way of showing you who is logged in at this point in time right so there you go now if we could log out I want to disconnect the user okay so I'm going to go ahead and firstly you set this up over here boom let's go ahead and do this use connect disconnect right here now what I can do here guys is I can go ahead and actually have an iTunes I will put that on in a second all right there we go um so at this point we're going to go over to the nav button now what I'm actually going to do here is I'm going to pass in an on click prop the reason why I'm going to do this is because we're actually going to be able to extend this with some more functionality so what we're going to do is basically have a prop type here which is going to be on click and it's going to be an a function right it's not going to return anything hence why it's a function which returns nothing okay and then we're going to go ahead and pass this through here so we're going to say on click on click and it's optional which means it's not required so it doesn't have to be there but we're going to say on click is going to get the on click prop there we go now what we can do head over back over to this and we can actually pass in for the log out buttons so I've done a little neat trick here so if you want to go get double curses you click this then you click option and you click over there as well bam okay now I'm going to go ahead and say on click and I'm going to pass in the on click function right I'm sorry I'm going to pass in the disconnect function why am I clicking where am I I'm wearing right now uh disconnect sorry disconnect there you go boom hit save and then now what we can see is if I log out boom you see how the user disappeared there's no user anymore right so it only has this little dot dot so at this point we have logged out the user okay so the UI and the front end should really be screaming at us right now saying whoa this should not be loading all right it'll take me somewhere else so what I'm gonna now do is on the index.tsx I'm actually going to have it a little bit of logic where I'm simply going to say if there is no address then I'm going to show you a login screen okay simple as if there is no address then return a login screen a login screen okay and this login screen we need to create so I'm going to go over here components login.tsx and I'm going to say rfce which is a nice little snippet and say whoa oops whoa you can log in you need to log in yeah Andre Smith the user is logged up but if you check your map Master wallet it's still connected to the website yes that's fine remember you don't need to keep signing the same website right you can disconnect connect to it but you don't need to keep doing that hence why you still connect your metamask is still connected right but that's you're still signed out of the uh the thing there probably is a way dude to disconnect completely uh I'm not going to check it out though uh well you need to log in Okay cool so at this point if we go over here and I hit save and I pull this in component now you see whoa you need to log in okay awesome stuff guys looking very very good right now all right so at this point um what we're now going to do is basically build that login screen so I'm gonna make it look really nice we're gonna do that right now bam and remember I am going to be using image components just for the sake of time but you should be using next.js image tags right or image uh yeah components so there's a video I dropped on the channel it'll be floating around the screen if you're watching a replay but there you go Jay that's that's a cue to add it afterwards all right so we're going to go ahead and add in the div boom and here I've got a div I've got an image tag inside of it now what I'm actually doing here guys I'm building this okay so this image right here is going to be the papa fam image so I'm going to pop that in right here so boom there you go okay looking good I'm gonna go ahead and style this up so I'm gonna say rounded four height of 56 width of 56 and a margin bottom of 10. bam all right and underneath this I'm gonna have H1 which is the papa fam drawer the popper Farm draw I'm gonna have an H2 underneath it which says get started by logging in oops by logging in with your metamask and guys I do want to stress third web dropped a sick web3 button right check out their Twitter but they dropped an amazing web 3 button and I hope they see this because I really do like the fact that they dropped that it was 15 hours ago I didn't have time to add it in this build I'm gonna add in my next one though so stay tuned for that we've got loads of stuff happening with these guys it's awesome Okay so we've got H1 over here I'm gonna actually throw on some new Tunes I've added into the playlist Remember You can get the playlist for free link is in the description to you just have to sign up to the newsletter we'll send it to you for absolutely free we've got some new cool jams inside of this place I love this right last name is to text 6xl let me know if you guys are typed in right now I can see everyone Focus mode right it's probably coding along so 6xl text is gonna go white and I'm gonna say the font should be bold it's going to disappear right now that's fine let's go to the surrounding div change the class name to a background like so there we go awesome stuff Min height of the screen that looks better we're gonna say it should be flex and I'm gonna do Flex column I'm going to put all the items in the center and I'm going to justify in the center as well now those you know kind of um checks for the spelling for high oh thank you dude hi a width of 56 there you go nice thank you dude um height of 56 with the 56 right see that's how I know you're watching awesome stuff Andre Smith welcome to the popular photo shoot here amazing stuff dude thank you for supporting the papa Farm nice okay so at this point looking pretty nice um what I want to do as well is justify Center item Center awesome stuff um I'm gonna go ahead and say the following so this surrounding div is also going to go ahead and have this um Flex I love that thank you so much Andre said this content should not be free honestly it's just about giving back dude that's all it is man you just want to get many developers out there as possible it's incredible all right there we go that's looking pretty good so far I'm actually quite happy with that then let's actually make it centered as well because that oh there you go that does a trick all right so right now you see it's not centered on a mobile view so I actually want to do that I've completely forgotten about that on my other one so it's a tech center bam there you go proper thumb draw there you go okay it looks good now let's change the H2 to be a class white so let's do text white like so bam awesome stuff and uh underneath this HD I'm gonna have a button and this button is gonna say login with metamask bam save okay now that button is styling up let's make it look a lot better than it is so right now we want to have this button and obviously feel free to you know go crazy with this stuff change it however you want I want to see you guys doing it you're doing your thing and by the way if you're watching right now pull out your phone tag me on Instagram and show me some love I love to see you guys who are watching my tag is at the bottom of the screen under me right now it's ssss right it's literally under my name we can see that it's also in the description ex of eight py of a five margin top of ten bam rounded rounded large screen and Shadow large and the font should be bold bam just like that okay that didn't work py of there you go nice um so looking pretty nice so what I'm gonna do now is connect the connect with much mask function so it's a nice little uh login function essentially oh this is nice song yeah I remember adding this in we added this into our Vlog and it was pretty cool all right if you guys watching the Vlogs let me know I'll connect with me I'm asking I've got two new Vlogs coming up and we've got a massive one coming up as well so hit save on that and we can see use metamask over here and now Jeff Powell um we're not generating a random number right now we're doing a is a winner always and we're literally selecting a random index from an array and all those array containers basically addresses of each individual again it's literally it's literally a winner only every time there's a winner kind of vibe right but yeah you can feel free man add your own if you want right um everyone can take it so far and everything right do do whatever you want to add to it all right so we're gonna log in with metamask now um I'll connect with metamask there we go I need to do an on click and I'm going to go ahead and do connect with metamask and boom see how I'm logged in nice all right Matt Tire says I have you in the background by the way awesome stuff dude so you can see login logout nice guys hit refresh awesome I love this and you see this initial loading phase right where it's loading I also want to go ahead and fix that as well so I'm gonna have a little loader instead so this is what I want loading the pop foam drawer and then you can do it right now yes you can serve aside render as well the one thing I do want to mention while we're here guys as I want to get rid of this whole stigma behind like being the best developer in the world right we need to stop this as a developer Community there's no need for everyone to Bow about being the best I hate that attitude because everyone deserves to be a developer right everyone is good enough to be a developer and change your life with software so don't come on guys share some positivity right and there's just something I was on my mind recently and I want everyone to start this is why I want to kind of show you guys it's not about always doing the best best perfect perfect optimal way you're always going to find a way to improve it so just do your damn best and just enjoy the process that is it okay please like that I I promise you do that and you will have a better life okay so this point thank you sndf good job Papa I appreciate you dude amazing stuff okay with this set we're gonna go ahead and uh uh Andre says I agree I have actually been feeling that way uh lately telling you thank you dude thank you guys honestly 100 because this this has to change right everyone deserves to be a developer that is it and I just felt like I had to say that right let's do this let's Carry On We're Going Strong guys I love this right now I've completely messed up my other screen there we go all right Jim Turner is a 24 done wizard full stack here nice dude that is awesome yeah you hear that that's cool man okay let's go to our index let's add in a loader now this is cursive J he found this library and it's actually an awesome Library uh we're going to be using it today okay so what we're gonna Now do is I'm going to basically determine if the app is loading based on the loading state for a contract okay so remember we deployed our smart contract this one in particular right so as you can see here if we want to load in our contract you can see we can go ahead and pull in our contract like so now you're probably wondering what the hell do you mean pulling my contract well to execute any of these functions for the lottery it's all attached to this contract so what we're now going to do guys is we're going to go ahead and add in the following I'm going to go ahead and add in a environment file so dot m dot local and in here what I want you to do is add in the following thing okay so I'm going to go ahead and add in the following environment variable so I want you to go ahead and grab this value right so I'm going to go ahead and paste it and I'm going to hide it because I don't want everyone to spam this build okay so I've got that um that address right there and I've pasted it in I've hit save and I've closed that file okay so what this is done now is it's loaded up an environment variable into my build so what I now need to do is I need to cut my uh my server and yarn run Dev it actually said loaded environment variable interesting or maybe it doesn't now automatically but there you go so that way we've got the fresh environment variables and we can start using it okay so at this point what I want you to do is go over and we're going to go ahead and say the following I'm gonna actually use something um Jeff Powell no no I completely love your question it made it actually brought out a point so no offense taken um you're Minnie Mouse no no don't worry dude honestly I appreciate you speaking the truth that's what I want I want everyone to feel speak the way that they feel that's awesome to have you here man um I just felt like I had to express that because I felt that resistance when I was becoming a developer hence why I feel it's going to be important for newcomers to also understand that we're always learning that's it yeah but love and appreciate you dude right so at this point we've got a we're gonna have two things that we pull out of the use contract hook this is going to be the contract and the is loading um basically objects and we're going to use the use contract hook now this takes a contract address now as you can see I can go ahead and put in a contract address or what I can actually do is I can go ahead and say something like this I can go ahead and say process.m dot and I've actually got the environment variable here bam there you go next public Lottery contract address okay um so check this out right so at this point I really do love the positivity right I really want to shout that one out we're nearly a 400 likes as well smash that like button right so this point you can see that this is the way you want to do it right and that way if you and by the way if you remember if you redeploy another version or you release something else again like you change up your contract all you need to do is MPX third web release that will release it so you go on to the browser you kind of do that release not quite sure you earlier that will give you a new address so you would have to change that address in your environment variable just something to know okay so at this point we've got our contract okay so this is loading well I want to show you right now is we're going to basically determine if it's loading i instead want to show something like this right we're going to have some kind of uh some loading ticker or something right so some kind of cool loading animation where the hell did I put mine um I'm just trying to find it there you go okay so if loading I'm gonna return some jsx and we're going to put it in you can always make it neater if you want I'm just going to do it simply here for a sec um inside of here I'm gonna have a div I'm gonna have an image and this is going to have a cool sort of proper fam drawer and I'm gonna have a H1 thing loading oops loading the popper Farm draw okay now hit refresh now you see it should say loading the proper fan drawer bam there we go okay now obviously I know it's loading the the contract instead of the actual screen and what you could really do here is you can actually put uh if there is no address show that first but I kind of like the loader right I know logically you should have that right if you're not logged in and right so I have that first maybe and then okay let's do that let's do that way it makes more sense right uh this yeah so if you refresh if you're logged in then it loads up if I'm draw then it shows it fair enough right it's whatever you want okay but at this point I'm gonna have it like this and then we're going to style this up so it looks pretty cool right and if you can see this is the end goal I want to have something like this loading the popular drawer with this nice little spinner thing right so let's start this up I'm going to say a background here should be of this and you can't see it right now you're going to trust me that this is the case I have screen I'm going to give a bunch of signing properties this is basically the trick to Center an element so same as what we did earlier class name here I'm going to say Flex the items should remain in the center space between them of Two and a margin on the bottom of 10. for that image I'm going to go ahead and give it a rounded look so rounded four gives it a square circle sorry height and width of 20. for the text I'm going to go ahead and say class name should be text large text oh God text large text should be why oh thank you Dev oh sorry I think that was the same as before I I'm sure if I saw it text white and we're gonna do font board Telly says there's fire here man thank you so much dude I appreciate you boom Sunny for the win thank you dude right so at this point you can see we're looking pretty nice if I was to refresh let's log in loading the pop fam draw okay it looks a lot better already now I want to have that nice little loader that you saw right so what we're actually going to do here is use something called react Spinners so I'm going to show you that right now react Spinners is an awesome Library we're actually going to use it right here they have an awesome demo page as well you can feel free to go ahead and check it out in fact you can play around with a bunch of different ones there's loads of different looks you can get I'm actually just going to use it and show you how it works so come on Jay pull this up Jay probably turns his head every time I say that um bam yarn add react spinners and then I'm gonna go ahead and import the first spinner that we're going to use well the only spinner we're going to use bam propagate loader okay I see Jay Ryan chat propagate loader I love the fact you guys get to know the team as well so pop thumb's about it's family right it's important you guys get to know Jay you guys get to know me that kind of stuff right propagate load up boom let me know do you guys want to see more Vlogs because I'm loving the Vlogs as well size of 13 now with that said let's go ahead and refresh loading the pop function oh look at that as it loads the contract pump this is clean right it's all about these little UI tricks awesome now the reason why oh yeah that's why the reason why those the address there before is because see there's that little flicker so I kind of wanted it to get past that so that's why I did it the other way last time okay noise I'm gonna add it back there I knew that was a reason you could do I know you could do oars and all that kind of stuff but it's fine we're definitely now quick little War break smash the like button if you're enjoying this right now it's amazing Pace nearly at 400 likes okay let's go oh all right so um next step is we're going to start building out the UI so I'm going to log in and you see we've got although we've got a lot to do guys all right so we're going to build out this uh right now okay so first thing I want to do is let's just save ourselves a bit of hustle here and actually refactor a bit so this code right here is going to be I haven't done this in the actual push build to the GitHub repo but instead it's fine let's just say loading dot TSX it's okay I know my name's aren't the best it's fine I'm gonna go ahead and pop this in propagate loader um I'm gonna pull out of here there's a quick refactoring example guys boom loading the replay will be on YouTube yes dude Charlie Sheen boom um Charlie again it's not uh we're not using a random number here we're just picking from a there's there's some crypto thing that we used in it you can feel free to check out Vision whoa come on Sonny win with the w oh thank you man 10 pounds I'm gonna get some some nice food after all right so we're gonna go ahead and refactor this so I'm getting rid of that and this entire block now becomes a much cleaner return loading bomb that's how we want to do it thank you so much for that donation by the way I really appreciate it man right there we go loading good stuff now test your code out make sure ain't broken enough in there we go bam still nice a lot cleaner right so there we go we've got some nice little logic there and we can start doing stuff now we've got our contract here so we can go ahead and do some stuff uh anion Wu says you're such an amazing guy I always follow your bills and new stuff just as you showed the reactions library now thank you so much dude I appreciate you amazing dude all right so we've got the next step in so basically now what we're gonna do guys is we're gonna go ahead and pull in the different um we're actually going to go ahead and pull in the different let's call that a different statistics of the the actual draw right so in this case the tickets remaining the total prize pool the expiration of the draw the price per ticket and we're gonna build out this UI then we're going to do the admin controls okay so at this point what I want to do is I'm going to switch the UI so you don't get confused we're going to have a non-admin look first then we're going to go ahead and add in the um the uh the the admin controls okay so Vision says learn a lot from your brother looking forward to you I thank you so much man I appreciate you your next year's series helped me a lot thank you so much Ronald Patrick you guys are incredible man thank you this isn't this is awesome all right and then we're gonna build this out as well so lots of stuff to do let's get on with it right so um first thing first right let's just pick out a thing to do uh let's build out this next draw firstly so the first thing I wanted to pay attention to is that this right here is actually gonna be a flexbox situation right so we've got um let's go ahead and show okay let's go ahead and show yeah okay so the first box this one here Dev Okay so so this is gonna be a flexbox situation okay so underneath the header I'm gonna do a div and here we're gonna have another div and the first one so I'm going to show you this one is going to basically see the next draw the next draw box so basically we're drawing this one the next drawer box underneath that we're gonna have the price per ticket box okay so let's do this the price um per ticket box um there we go price per ticket box that's gonna be a div underneath whoa Andre Smith thank you dude you guys not much but thank you dude it's massive thank you man but thank you for what you do I really love your attitude passion enthusiasm you've helped so many of us dude I appreciate that so much man thank you SMS that's incredible honestly it doesn't matter about mountain that is to me that's a million pound right it's incredible to see you guys watching you just impressed how I focused you are thank you dude I love this dick Jay capture these screenshots Man Randy says hey Sonny I'm from random Rwanda I think your skills I love the skills that you share I'm working with German company as a friend developer as you contribute a lot thank you incredible man screenshot AJ sick all right let's go ahead and carry oh man this is getting me so hyped up today right so this first div I'm gonna go ahead and add in a H1 it's gonna say the next draw boom and as you can see we're going to start seeing things in there oh this is a Beat all right this is sick right this guy we got beer so the H1 and then I'm gonna have a div we're gonna get flow stated up guys another div inside there H2 saying total pull and um we're gonna go ahead can we donate other crypto or just eat gaskets are too high oh Jeff no feel free dude that's the address honestly just thank you man if you want to that's completely thank you so much you actually got a point you know that's it's a fair point I've got loads of stuff on that address so feel free Matic whatever man I appreciate you um this is cool uh so we've got tickets remaining okay total pool underneath that we're gonna have the current winning reward as well so underneath this we're gonna have like imagine it's gonna say like 0.1 East winning let's just say with your number one East okay there we go uh let's start dropping some color here as well because that way you guys can see what the hell's going on um okay let's do the H1 first let's do a text 5xl uh text White on semi bold hack the current says good to see you back on trap what is up dude um text should be centered as you can see we are building this container right here okay so now in the div this is where you have to get focused dude it's actually tricky right now reading this uh H2 we're going to go and say this should be text small this div right here is gonna have the uh a container style called stats and this is going to be a custom one that we're gonna add afterwards so I'll show you that in just a sec now the total winnings is going to be a text Excel oops now to show you the text or the winnings is going to be like this right so total pool tickets remaining that kind of thing this will be Matic actually go to pool and then it's gonna be Excel okay cool now the div outside of this stats is gonna have a flex justify between situation finding of two space between them of two there we go okay now obviously the style here is not nice we're gonna fix it up and the stats container so right now this entire situation is inside of this div so I'm going to go ahead and just uh um this div right here extend that underneath that div there we go like that that's how you want to do it okay now this surrounding div here is going to be stacks container and I'll show you why we're gonna do this right because I'm going to repeat the same styling for two containers okay so we're gonna do this right now so sure your apparently say something's back with the tourist one man Buzz fire thank you making this even exist thank you so much I feel like we are working out while coding it's so cool honestly um okay let's go ahead and um go to our globals so this is the one where basically we can add in our custom owned utility classes like we have hotel and CSS but it's gonna be our own I'm going to Define okay so how do we do this well what I'm going to show you is we're going to add in two of our own now the way you create your own is we're going to say at layer and basically going to inject my own Stars into the components layer now the ones I'm going to inject are going to be stats and stats container so I'm going to add in two of my own stats and stats container and here the first thing you all you need to do is to start writing it you say apply and then you put in whatever the hell you want so at this point I can say BG and I've got a style here so I'm going to go ahead and pop in our own little style here so bam BG and then we've got to have text white and as you can see if I hit save here it's starting to style it up so we see it's actually working okay looking good Alexander just a bit like 15 got you bro awesome p of four there we go and then we're gonna say Flex one so he's using up the majority of its space right and that way when we surrounded in a container it will use up what it needs to use up and then the final one is I'm going to give it a border value of two pixels so border two with a custom border color and as you can see looks pretty nice right that looks pretty good and the container itself I'm going to go ahead and say apply and this one is going to go ahead and say BG and it's going to the same background color in fact I'm gonna have a padding of five as well and around the corners around large and I'm gonna do a custom border collar and I'm only doing a pack saw a pixel value of one okay there you go nice so the stats container has got its own styling and there you go looks pretty damn to good okay so at this point Tailwind is the best sign I 100 agree with you dude okay so at this point where we've got the stats okay we're gonna have another div and this div is going to have stats I'm going to show you how to do that with Emmett right so you say div dot stats and Bam just like that you have it okay and then we'll say H2 and this one's gonna say tickets remaining and this one's going to be a class name of text a small bam and we've got a whole look at that guys come on look how clean that just popped in right like what all right this one's gonna say like 100 tickets and then we're gonna obviously grab that number as we oh sorry it's gonna be a P tag it's gonna be like 100 tickets remaining so forth then we're gonna basically grab that number as we need to text Excel cool um XO nice uh guys we need 400 likes let's do this smash that like button this is so cool I see the real OG sticking it out that was amazing um okay so underneath that we're going to have a countdown timer which I'm going to do in just a second afterwards so underneath this we're going to have a countdown timer so we're going to implement this afterwards so did it uh boom 400 likes that's what I'm talking about let's keep going guys if you're watching the replay of this oh just know that this was at one point where we apologize we're like yes let's go all right there's some amazing stuff guys I love you guys and appreciate you so much Okay so we've got this looking pretty damn good so far okay uh we do need to set our Max width constraint around that so we're going to do that right now as well okay so where we have the stats container and the surrounding div we're going to go ahead and do the following we're going to say space y of uh five so this is when they're basically stacked up on each other uh when they're in a mobile view on the middle screen so and above we're going to say space y of zero so this is basically applicable when it goes to this so space wire 5 between the children component and so forth and the middle screen I'm going to get rid of it margin of 5 around it there we go it pushes it away from The Edge on the middle screens and above flexbox on the middle screens and above it should be a flex row what's up and items should be at the start and what this means is so rather than sort of centering them they're at the start line together so the two children are starting at the same line right the Baseline let's get to 500 likes guys let's do it so items start justify Center let's go bam and then on the middle screens and above it should be space X of five so SpaceX are five bam there we go okay so now we've got our first container here let's add in our second container underneath it okay so a div this is gonna have a stats container so remember that little Emma trick we say Dev dot stats container bam and this is gonna have a space on the y-axis of two as well okay now the first thing I want to do here guys is I want to go ahead I'm gonna have it in a container as well actually for this one I'm actually gonna have another in a container so I'm gonna have a div dot stats container and in this one I'm actually going to have a again another div with a H2 inside of it and a P tag next to that okay and the first H2 I'm gonna have a price per ticket and the second P tag I'm gonna have a uh price basically so it's gonna imagine it's gonna have a fixed number uh for now I'll add this in we're gonna actually put in our own number afterwards okay but now you can see it Stacks up and then from the rules we gave earlier it's going to go ahead and do the following so looking good so far okay nice now for the H2 surrounding ticket I'm going to say it should be a flexbox it should justify between awesome stuff items should be in the center uh space uh no text should be white sorry text White and the padding on the bottom of two nice now the price per ticket at this point should be foreign surprised I think it looks good we need to do this ticket box now so where I have my div um where I have my P tag my div outside of this I'm gonna have a div with a P tag repeatag and I'm gonna go and do the following reliable special says wow that's crazy dude thank you so much man we're literally flying right now we're doing awesome all right so we're actually gonna have a custom input field here so this is going to be an input and this is going to be of type number okay and that gives us these nice little tickers so up and down ticker and yes you can customize this one if you really wanted to I'm going to say this should be Flex text should be white so we're going to start doing this items should be in the center Space X of two between them so there you go we can start spacing them out background should have a color in this case I'm going to go ahead and give it a color and a border with a custom color as well so I'm just going to chop these all in right in here straight away okay and I want to give a padding of force to let it breathe a bit okay so as you can see we're starting to get this look and feel now we need to override the styles of our class so we're going to go and say Flex this should actually be the width should be four so I want to use up the most the background should be transparent the text should be towards the right right and we're going to say outline none oh God that's horrible an outline none that basically gets rid of that little blue box so you see this blue box outline none destroys it so outline none gets rid of it so there you go okay I have a value and as you can see we've got a number there so four right um so that looks pretty damn good so far and uh what time do you sleep it really depends honestly SpaceX says too there's a type of thank you I love this that's how I I'd love to say it was on purpose but it really wasn't but you guys are I know you I know you're watching we're doing amazing good time we're doing amazing this call okay boom tickets four looking great so far okay now underneath the tickets what we're eventually gonna do is also set up a few constraints we'll say Min here it's just one Max of ten yes there are so many things you could do to improve the back end security that kind of stuff but I'm not gonna get into it right now for this I'm going to set a value here right now the value initially we're going to set it to a quantity we don't have this quantity so I'm going to create it at the top okay so I'm going to say const Quantity set quantity so this is a basic reactor if you do find this confusing make sure you actually go ahead and check out the uh react Basics 101 J will drop a link right now in the chat use State and there's also a link in the description right you use it now this is going to be a number okay so I'm going to cost a number type to it and by basically force it to be a number and the phone number is going to be a one right so now heading back over to this every time I click the number I I needed to change the value okay so what I now want to do is basically say on change of that number I will need to basically attach something to that event so on change we're going to attach so every time I type it oh I change it you see how it does is that quantity that's awesome right it's a set quantity but I'm actually going to type this one out I'm going to explain something to you guys rather than pass int I'm actually going to say number cast it to e.target.value nice way of doing it okay so now if I go ahead and increment the number you see how I can go up in numbers and Hits 10 stops I can go down in numbers there you go it goes down to one awesome stuff okay thank you Jay for sharing the link well nice all right so there you go we're limiting soft limiting 10 I know you can keep buying that it doesn't matter okay it's fine um at this point it uh it's educational so it's fine all right so now we're gonna have total cost of tickets service fees and network fees as well right so total cost of tickets let's go ahead and pull that in so underneath this um input we've got the next div so underneath this div I've got another div with a div inside of it so Dev div Inception boom and inside of here we've got two P tags so P2 oops Got p times Y2 bam total cost of tickets I get paranoid about the small things and uh this will have a ticket inside like a number of times I'm going to make it drastic right now 999 so we know to change it okay and then we're also going to have a same thing again so we're gonna have a div underneath there so div and this one's going to have two P tags it's gonna say service fees service fees and this is going to have a number as well so 0.001 and this will say that Matic for example okay and then we're gonna have div and we're gonna say Plus network fees and this one I'm actually not going to like calculate it for you I'm just gonna say TV confirmed because the network fee is always there for oh sorry that should actually be P times Y2 bam and there we go save and underneath it should be TBC there we go okay cool now let's start these up let's make them look good all right so at this point yes you could probably do something easier than what I'm about to do but it's fine feel free to do whatever the hell you want it um so underneath on these two devs I'm going to go ahead and attach class names here so class names bam and I'm going to go ahead and do this so we've got Flex item Center Justified between Tex Emerald 300 text extra small and italic for the bottom two there you go you see it oh this is sick Daniel says I landed a new job and started watching a channel you helped me gain self-confidence according and you're crushing it keep this up and go that is awesome dude thank you so much for sharing that that is amazing man um extreme that wouldn't be better to add a global style you could do that way again there's a hundred ways you could do this right so there we go live from Dubai that's it then I am in Dubai right now right so here we're going to go ahead and pop this in as well and I'm gonna go into the font should be extra bold as well for this final one extra boat and also I don't want this to be extra small here I'm going to make this one small okay uh so there you go um and that's looking pretty nice and then for the surrounding div now to space out a bit of space between the Y components of two so that spaces out all your children margin top of five to give it a bit of breathing room and look at that guys looking clean looking very very clean all right now obviously that's not looking great right we need to fix why the hell is not using up its space but we get there we'll get there okay so um the next thing is we're gonna have a buy button right so buy tickets blah blah blah okay so let's do that first then we'll fix out the uh spacing issue that we just saw okay so underneath that div I'm gonna have a button and this button will say buy tickets buy tickets basically and we'll style it up afterwards we'll add like the logic for afterwards but this is essentially quite a big one so imagine top five um I'm gonna use a gradient here so I'm going to use background gradient and what I love here is you can actually say two bottom rights it's a gradient from the bottom right and in this case you can see I'm going to do it from Orange from Orange 500 oops Orange 500 to a color of emerald 600 okay and then what this does is it gives us a nice little gradient already so it's very nice padding X of tan panning y of five around the corners out around an MD there you go and then we're going to say text White okay uh Shadow uh Excel bomb there we go looks good and then we're gonna say when it's disabled so again I'm actually going to disable this button in certain situations I want to change the from color to a gray 600 and when it's disabled I'm going to change it to a gray of 100 so I'm changing the gradient colors when it's disabled and I'm also going to add a special cursor saying cursor not allowed because I'm not allowed okay there you go now if I disable this button you'll see here disabled you see how it changes right my cursor gets put into effect it does not let me do it okay so we're gonna have some logic in the future afterwards when it's basically when it's done it's done right okay looks kind of nice cool cool cool now at this point I'm gonna go ahead and make sure that I've actually just done that correctly as well um two Gray from Gray 600 bam those change the shadow okay nothing changed disabled okay so in fact I actually changed my two color disabled text Gray oh I change the text great that's it that's why too Gray from Gray 600 okay so why did actually sorry guys I said to gray disabled should be 600 and then I also changed the text color so I was wondering it didn't look white it looked ugly I was like I didn't design that all right there we go let's do that now disabled that looks better that looks more disabled like that looks more like it's not working okay okay uh Mr Frank it's only moving to Dubai with Jay and Dublin down on web3 is big moves amen dude that is exactly what we're doing sorry I I like desperately need a drink break there for a sec so close to 500 likes guys smash that like this keep going okay so the buy ticket is done all right now I need to make this like grow because it's just like looking nasty small right now okay so let's find well I've actually added in that Flex rule okay where have I done that I have done it and the surrounding div I believe Okay so we've got mdflex well it starts container let's have a look this is break it down so right now these aren't growing the way that they need to grow and that's what's causing an issue so let's find out where my Styles have gone wrong Flex one um no okay so that looks perfect is when we hit the medium screens so my medium logic's kind of screwed up um stats container Flex one okay let's have a look over here next roll box okay so it's actually to do with extra mdflex next draw mine [Music] okay um space that's just kind of digest and go through it so there's two next drawer box let's start there an extra box is going to be SpaceX five margin y from 195 from MD effects okay Flex row done I am start just for some MD space five okay that's fine stats container is good and then the next draw is all good so this is actually looking fine so far I'm quite sure where I've not done it right um oh no I know where where's the ticket okay so in fact what the hell have I done this I've sort of spaced out at one point and I'm trying to find out where I have um oh okay I see it I see it my bad my bad all right so where we have the header right here we go so where I've done Flex column the entire app here so I'm actually going to put main or you could just definitely that's fine all right I'm actually gonna put the rest of this app in all the way from here into the top bit so into a surrounding div okay guys oops into this I'm going to say class name Flex one there you go it will take up its majority of its room have I done that correct oh God damn it uh Flex column Min height screen Flex Flex column there we go okay let's refresh at ET at sunnybro you are awesome man thank you so much I appreciate all of you all right I'm trying to debug right now that's why I'm kind of going a bit weird talking to myself um I like to show you guys this I don't know where the hell I've messed this starting up so I needed to go full screen um not full screen I need to use up the majority of this room why have I done this um okay my header is good okay and then this div right here goes all the way to the bottom outside okay looking good and then we've got my header nice and then we've got okay I mean I'll find it at some point um I had some set width somewhere and I can't find my width whoever done that margin 5.5 basically guys you see this yeah this size is what I want um so I've actually set a a width constrain here somewhere and I'm trying to find it um okay interesting admin button that's fine we'll come back to it it's cool yeah but we'll get to this point eventually right I just can't be asked to keep debugging this right now um we'll find it so frustrating it's somewhere I know it's somewhere God damn it um but I think you guys like when I do this right um because I I'm showing you is that I'm trying to find it so we'll see okay anyway at this point uh we'll come back to that because it is here somewhere where the hell is that margin 5 is bugging me so much um it's putting is it padding no no actually I'm solving this has container okay I'll come to me it's in the medium medium flex row let's try and start Just Right Center okay so it's definitely to do with this um just for a second because if I didn't do justify Center bam it goes to the side and then if we do Flex one it should be using up his width no that's already doing that um stats container Flex one okay so I see what was happening here so what we could do is um I actually want to check something I want to do uh I'm gonna do a Max width I've got an idea Max width of 5xl maybe I think I've done it on the surrounding um no I didn't okay I'm so confused right now anyway I actually had 6xl and let's do stats container should have a next one Okay cool so that's actually looking kind of cool still is a bit big but next draw can take up majority of the room that's fine it's just that's just come to some point right where it makes sense let's do Max width 4XL Maybe okay yeah let's do that no oh screw it it's gonna bug me so much I will find it afterwards and I'll fix it all right okay oh damn it all right it's fine it's fine I'll find it I get so fussy with this kind of stuff because it bothers me I like to I like it to be perfect but anyway the next draw can actually be I mean if I want to make this look perfect the way I want to do it right now what I would do is I would go over to my next drawer and I would actually go ahead and give it a uh Flex of one so I'd give it some sort of size here so Flex One X one it's really hard when you're actually live doing it you know um max with okay no I see I see where I'm at I see all right 70 space five oh nice we've got another new puppet found special team member what's up dude as to um [Music] Flex one so use up as much space as you can in fact it's using Flex there so okay screw it you know what I'll come back because it's somewhere there and it's bothering me but it's going to God damn it it's somewhere there all right I'll find it I'll find it it's there basically something is causing this to look perfect and it's really freaking me out where the hell is that all right I'll come back to this we'll get that at the end we'll do it as like a little bonus thing at the end but for now we'll do it in mobile view because it's going to help us anyway okay oh that's sick okay so now what we're gonna do guys is actually start implementing this functionality okay so the first thing is is this timer right here so what I'm actually going to do is start pulling in some things from our contract so that way we have the information that we need to proceed so first thing I'm going to do is not the timer actually I'm going to go ahead and pull in some of these statistics okay so the total pool and the tickets remaining okay so the way we do this is we go over to our code over here on our smart contract and as you can see if it's a reading function I can pick from the reading functions and get the information so in this case remaining tickets if I click this it gives me the code and you can see we're actually using the contract earlier as an argument here and we can go ahead and pull in data and we've got the same for writing data as well so this is how I found my code Snippets so we can go ahead and continue on from that so remaining tickets let's go ahead and add this one in right now so remaining tickets like so here I've got a function use contract data we've already pulled in and that is the function name from the solidity smart contract now what I've done here is it said that the object that we're destructuring is called Data I've renamed it to an alias called remaining tickets so I can actually use that now inside of my code okay so what I can do now is heading down over to where we have tickets remaining it was here instead now I can actually say remaining tickets is optional because it could be loading and we're going to say change it to a number now you'll see 95 tickets there we go it works thank you dude for becoming a awesome a public fan member that is amazing Andre Smith have a great day sunny I'll be picking this up tomorrow morning can't wait I got to a meeting I keep crushing it pop fam that's it dude appreciate you thank you so much for tuning in right so we've got tickets remaining 95. I'm going to do the same thing now for the rest of it so the total prize for this change this so let's go ahead and get the total prize for so total prize pool I'm gonna go ahead and get at the top let's find it where the hell is that um current winning reward I think it is yeah okay so there's this one right here so I'm gonna pop this in this one's called the current winning reward function so we're reading that value now this one's interesting guys so what I'm actually gonna do here is I'm gonna use something from the ethers Library which we installed earlier so what I'm actually going to do is get the ethers now whenever we actually read the current winnings or any of that kind of stuff what actually tends to happen is it gives it back in a format known as way orgway which is actually like a sub currency for ethereum or Matic right so if I was to go ahead and show you the winning amount right now get current winning reward you'll see it's like 9 billion or something wow 5 billion that's actually gray it's the smallest currency uh for representing ethereum or Matic so we have to convert that into a number that we're understanding right which is uh basically ethereum or Matic right so in this case I get this I go down to the total pool I'm actually going to write the following function and you're going to see me use this a lot as it goes on okay so I'm now going to go ahead and say um current winning reward let's go pop this in so total ball let's go ahead and Chuck in a code bit over here so I'm gonna say if we have the current winning reward only then should we then show up um ethers dot utils dot format ether it's called and inside there we pass in our ethereum our automatic value okay so in this case I'll say current winning reward dot to string okay I'm already checking if it exists so we don't have the optional chain it here okay then what we're going to do is it will be our other currency so in this case Matic so now you should see 0.05 Matic okay now what I want you guys to do now is actually understand that this Matic we're going to be using it could be ethereum it could be Matic so what I'm going to do is I'm actually going to create a constant file here called constants dot TS and inside of our constants.ts I'm going to add in a variable which we're going to Import and Export known as it's a string value and it's going to be the currency somatic and the reason why I'm going to do this because you could deploy to different currencies and you might want to go ahead and just make it easier for yourself so now we just say currency and it's always going to pull in Matic and if we change it to ethereum we change it in one place it gets updated everywhere okay so now you can see total price formatic there you go okay now what you could do here as well guys is you could actually actually have it in like this you can actually put in the bracket so it's only going to show the entire block if you really wanted to do that you could do that in this case I'm not too fast so I'm just going to have it there but you can see that's dynamically being pulled in now now the price per ticket let's continue on price per ticket let's do the same thing for this so price per ticket we're going to go ahead and get the ticket price in the following function so this is going to come from the following functions so same principle right here we've got ticket price a read function and then we're going to go to price per ticket and we're going to go ahead and code this up awesome stuff so at this point what we're now going to do is we're going to do the same logic and I'm going to have the exact same snippet but for ticket price and the reason why you're wondering Cindy why don't you just optional chain that here and and don't have it here well this will fail because it will try to run the format function so that's why we're doing it this way so now if I refresh you should see it will load in that Matic amount so there you go it loaded it in so I'm doing that to show you as well that it's actually getting my value so this is all dependent on the contract values so in this case the uh ticket price is there okay awesome stuff now same thing for Ticket commission we could do that I actually haven't done it for my ticket Commission on this one I've actually done it as a hard value but that's fine um service fees let's do it for that as well so service fees so this is the ticket commission number so what am I actually going to do here is I'm going to paste that in but ticket price we're going to change it to ticket commission so ticket commission and we're going to get this value okay so ticket commission let's go ahead and do that right now and that one is actually going to be for [Music] let's go ahead and get that function do get operator touch commission where is it going ticket commission boom this one here okay so we're gonna oh sorry not that it's that's the function we're going to do the reading ticket Commission there you go and we're gonna go up to the top and we're gonna pop that in and yes you can refactor even this to make it even neater and you see we're getting rid of the is loading and we're just taking the ticket Commission to get Commission and just like that we have ticket commission as well 0.0 not one there we go toast total total cost of tickets all right so total cost tickets we're gonna work out afterwards that's gonna be a different value afterwards um let's actually go ahead and do price per ticket I think I did I expect okay we did so total cost of tickets now we can actually do because we have the quantity being summed up as well so let's find the total cost of tickets where is it gone okay so at this point we can do a little function here so the ticket price we have right uh ticket price we have here so at this point if we go down to total cost tickets we're going to basically do a little maths and we're gonna say apps Quick Maps I'm gonna basically pop this in I'm always saying if where's the ticket price then we're going to go ahead and convert our formatted value okay so we don't need to cast it here our formatted values so now that 0. not one eighth or whatever times it by the quantity and then put it next to the currency so now you can see it will say total cost of ticket is 0.01 and as I increase the quantity 10 will cost me 10 times the amount and a87 will cost me seven times demand so forth that looks pretty damn good guys nice okay so looking good so far a quick little water break very good guys we are smashing it today I said geez this won't be a very long build but I telling you I think it actually will be a full build okay because we've got a lot to do uh and I'm moving fast so at this point we've got the expiration so the expiration is actually in the form of a time stamp and what we're actually going to do here is I'm actually going to go ahead and pass in is it live yes it is um I'm actually going to go ahead and we need that expiration in this I'm also going to use it in a countdown function so I'm actually going to go ahead and get the expiration over here no reason in particular what I've checked it there um but what I'm actually going to do is I'm going to disable this button if so if a few different things are met okay so the first thing is I'm going to disable it if the expiration two string which is basically a Unix string value so this is a time stamp if this is less than a date dot now oops date dot now two string oops no no no two string or so that basically means if the if the expression's in the past so it's already expired in which case it will be right now so in this case if I did this it will actually be expired I believe um there you go so it is expired so um that makes sense because we did it less than half we did it longer than half an hour ago and we're also going to do remaining tickets so if the remaining tickets two number is less or equal to zero sorry I'm also gonna basically destroy them okay so there you go so at this point that is actually correct because um there is there are tickets remaining but the countdown is actually zero and I'm going to show you that now so we're actually going to implement the countdown timer so this beautiful thing right here so what we're actually going to go ahead and do now is I'm actually going to go ahead and get a countdown timer so countdown timer is an awesome uh separate component that we're going to build so I'm going to go ahead and create a new component called oops inside the components folder that'll be nice countdown countdown timer dot TSX nice rfce bam now the countdown timer in here say I am a countdown timer that's fine um I'm gonna go ahead and put this inside of our code and the way I'm going to put this is where we have tickets remaining so where's the tickets remaining there we go so when we have this bit of code I'm going to go ahead and Chuck it actually underneath this entire thing so underneath that div um outside that div here where we have this let's see comments always come in handy I'm gonna have a div here and this div is actually going to have a class name margin top of five margin bottom of three and I'm actually gonna render out the countdown timer just like so here okay there you go this is where the countdown time is going to exist oh whoa no no no don't do that almost started collab session all right so at this point we're doing pretty damn good guys so the countdown timer we're gonna go ahead and do the following so this is going to be a smart component so we're actually going to use the contract we're actually going to pass in the expiration date as well so at this point what am I gonna what I'm gonna do is pull in a few things over here so I don't need the contract call I just need these two use contract use contract data yes you can pass minutes props I'm going to be doing it this way though uh but you could do that uh suddenly they Implement a fee to buy a tick if not is it possible to have a fee paying function yes I did Implement a service fee so the organizer by the way if you deploy the smart contract You Are by default the admin so I hope that makes sense and yes whenever a winner is drawn the admin gets a fee from the tickets right so you're basically making money off this if you're an admin and you run the lottery so it's kind of win-win for the winner and for the admin good question dude um so nice and then we're going to have the expiration which we did a second ago as well bam okay so this is the same thing that we did previously now inside of here what I'm actually going to do is I'm going to use something called a react countdown a external Library that's a pretty cool Library I'm going to show you exactly how to use it so let's go ahead and install it I'm going to show you on Google react countdown npm and the way you want to do this is you want to go ahead pull up command J and we're going to install this as so yarn act react countdown you want to add react countdown so he's going in come on Jay hide that while it does it I'm sure that should go without a doubt yeah there you go and then we're going to import it into our code um like this okay now we're going to get our countdown timer and our countdown timer all it essentially does is it needs to basically have a date right so the date in this case is going to be sometime right so in this case it's actually going to be a new date that is constructed from okay the expiration times 100 and this is because I think it's in milliseconds and we're trying to bring it to seconds something like that I forgot where it was and we need to give it a renderer right now the renderer is basically a component that we're going to create this is how it shows on the screen now the way we do this is we basically go ahead and say cons renderer and this gives us render props in this renderer okay so this actually gives us back hours uh days no sorry it's not days it's hours minutes seconds and the final one is completed so this one is completed okay and then we basically have a few things that we can basically show on the screen so I can basically this is rendered if it's completed otherwise it will show the actual timer so you can go ahead and customize as you want right so at this point it's complaining because it doesn't have the prop types okay so saying it's implicitly at any time so what we can do here guys is we can go ahead and actually add in some prop types at the top so we've got hours and they're all numbers except from completed go ahead assign this to prop types like so and now underneath I can say if completed so if we're in a completed state so if the time already passed what I want to do is I'm going to say a div with a H2 inside and this one is going to say ticket sales have now closed now closed for this draw okay so at this point um if I show you and we save renderer is actually freaking out right now because we haven't assigned it the correct value which it makes sense because we've not returned sorry return this uh there we go okay return um and now you can see ticket sales have now closed for this draw all right so something you make a complex thing simple and easy to learn you are a mentor thank you thank you so much I actually really appreciate that comment really really nice and agile it is live thank you for tuning in okay so take yourselves now done and otherwise so if else we showed basically a timer right now I'm gonna try and keep this one kind of brief because I don't want to kind of spend too long on what I'm doing here but the basically what we're doing is I'm gonna add in a um a H3 and the H3 will say time remaining okay and this one is going to go ahead and have the following is going to say text should be white it should be text it should be small it should say margin bottom of two and italic boom okay so this looks already uh oh you can't see it right now because of this um if first I'm just going to force this right now so you can see what I'm doing if true okay there we go uh time remaining um actually you know what uh okay that's my return foreign get rid of this bam okay cool I'm gonna force it into that state until we're ready okay so time remaining that way I can debit so boom uh div now here what I want to do is I want to have a div with a div inside of it right so we have div and we have two divs inside of it right now the first one is gonna have hours and the second one is gonna have oops hours okay now I'm gonna repeat and rinse this cycle so ours hours I think I say minutes minutes so minutes minutes uh Jared Martin Sonny whenever you watch whenever I watch you code I always learn something new that's exactly what I'm trying to do thank you so much for tuning in dude second is the next one bam good awesome stuff now you can see we've got the timings over here okay so this is great right now uh what I want to do is also have each one be a flex one so it's going to evenly distribute itself the surrounding parent container is going to be a flexbox a space mount with a value of six now they're inside of their appropriate rows now for each one I'm going to go ahead and make our lives a bit easier I'm gonna say that these are going to have the countdown timer which is going to be our own custom class and these ones right here so remember option click option click option click uh class name is going to be countdown a label countdown a label bam now we go into our globals and we're going to style up some two Customs so we're gonna have the countdown and we're gonna have the countdown label um okay so how do we make this look the way we want so for the countdown let's go ahead and start styling it up so oh this is getting me this is a good jump all right so this one is a pounding of eight I'm gonna keep hitting save as I do it so you guys can see text five extra large nice text should be centered text should be white okay rounded should be large and then I want to go ahead and say only on the large screen it's gonna have a Min width this is what I think it was on the lock screen should have Min width and on the background color should have a background color like so so ever gone there you go there we go boom so here you see on the larger screen it will have a minimum width oh there you go that's why that's why yes okay toko's tickets I mean that one still doesn't explain but yeah there you go all right so there you go so that's looking already nice okay and then for hours we're gonna do some countdown labels we're gonna say out apply and this one I'm basically just gonna Chuck this in so you guys can see it speed up the process text y uppercase there you go look at that why used um Min width minimum width because I wanted it to be on a large screen a minimum width do you see how like on the smaller screen it gets a bit smaller so it's easier to see and then on the larger screen it got to a point where it minimized like a minimum width of these buttons should be a bit bigger that's what I want it so that's fine for when we do this um but when we are on the completed state which we are on right now what should I do so ticket sales and now close for this draw now you can actually do whatever the hell you want here right so you can actually have it as just that and not show a timer I'm gonna just give you a quick kind of little Showcase of what I did um I had the exact same thing so you could you know refactor it do it as you want um but I basically went ahead and added in a few funky things of my own I said to be text extra large text should be oops Tech should be Center um I didn't put too much time into this really to be fair animate bounce oh because I was not close to this draw um okay and if you really want you can go ahead and add in something extra like this right so I'm basically copying and pasting in the old one that we had this exact same code except here guys I've actually just gone ahead and put a countdown or animate posts okay I'm not quite sure why that's freaking out okay there you go and now it's just posting they're saying ticket sales are not closed and you run out of time basically okay all right awesome it's still bugging me it's still bugging me oh God I'll find it I'll find it it's fine I will find it okay remember the code for the purple guy repo is available so you can go ahead and do that as well oh okay so doing well we have a quick water break as well doing very well for time guys almost at 500 likes destroy that um leg button it's a joke goes with the one dollar donation thank you so much dude okay so at this point we are done with that so now what I'm going to do is implement the um I'm going to restart the draw to show you that it actually works okay so I'm gonna go over to the actual contract and I'm going to restart the draw well we've actually got people in play right now so if I go to get tickets if you're in play you can't restart the draw you can only restart the draw or refund everyone once it's done so in this case what I'm actually going to do is I'm going to withdraw a draw a winner ticket okay so what this will do is this will go ahead draw a winner ticket reset all the tickets and then it will restart the timer as well feel free to dive into City contract if you want to know more about the details but right now you can see that's actually executing our function if you really wanted to check out you can go ahead and oh I've done the wrong bloody thing um I need to actually log into this one then I need to execute it that's not gonna work um that actually that didn't do it that didn't do it so the two get tickets oh we did do it okay fair enough it's because I switched it all right so at this point if I go back here now and I there you go tickets remaining and we can buy tickets now as well okay so so you can see this um look at this so we've got a total Magna so let's do the buy function for the ticket right so let's go ahead and get this working the way that we want it to it's bugging me so much what that what that thing is I mean we'll find it we'll find it ah anyone watching a replay is probably like what the hell man it's just that and then I'll figure it out so frustrating is what it is okay so at this point what I'm gonna do is I'm gonna do the buy ticket functionality so let's find the price per ticket box what the hell get rid of that I need that um oh maybe oh it's not okay I'm gonna say on click and what I want to do here is have a click Handler right so when you click a buy ticket you should be able to do something so in this case I'm gonna go ahead and say that we're gonna handle click I'm gonna have a function at the top so I'm gonna say handle click okay what happened there handle click so let's create a function at the top to help us out and we're going to say const handle click whoa Quan Quan drops in the myr currency of 15. I don't know what that is currency but I appreciate it thank you so much because thank you for providing this awesome contents and sounding love from Malaysia and okay Malaysian rupees I think it's Ruby but thank you so much dude I appreciate you hello from France super what's up man so we're going to do handle click as an asynchronous function and I'm going to go ahead and do the following okay so in this one first thing I'm gonna say if the ticket price hasn't loaded you're not allowed to buy right so I'm just gonna do some defensive programming right now so ticket price return just don't unpaste okay then what we're going to do is I'm going to implement some toaster notifications so notice how I remember when I did a Buy on these ones it was actually going ahead and even if I did a restart toaster notifications were present so at this point guys what I want to do I'm going to reject that one second let's reject that one reject okay so let's go over here and we're going to add in something called react hot toast right so react hot toast notifications there we go the best react notifications in town we're gonna go ahead and add it into our app with yarn so come on J pop it into our app with yarn at react hot toast come on J to hide it again and the way you get this working guys is you firstly need to add in at the highest level okay so what you want to do is you need to go ahead and add in the toaster component at the highest level so in this case or at any level you want to show I like just throw it in here bam like that okay now at this point it cannot find the module reactor toast I didn't install it into oh what have I done no I have done it here right trust um oh did I cancel it I think I canceled it okay interesting there you go and now that will go away nice now what I can do is I can actually pull this up whenever I need it so I can use start using these hot toast notifications in a really cool way so the way we do it is we simply import the hot toast notification at the top bam and then what we do is inside of our buy function I'm going to go ahead and do the following okay so I want to have a like a loading notification in the beginning I'm going to say okay you're buying your tickets all right so it's gonna so as soon as you click it it's gonna say buying tickets then I'm gonna have a try catch block okay so we're gonna have a try catch block and if there's an error we're gonna throw that error and we're going to go ahead and throw a toast notification um and we're going to also going to console log the error so as you can see we're going to use the same toaster right so the way I do it is it'll pop up saying buying your tickets we give it an IDM notification that way I can close it with whoops something went wrong or I can show a successful one over here when we do it now I'm going to actually execute the buy ticket function at the top as well okay so what we're going to do here guys is we're going to use something with a new hook called the use contract call now this is a right function so if we go over here now what I'm actually doing is I'm doing the buy ticket functionality okay so you can buy tickets and you can pass an argument now remember how buy tickets requires us to add in a certain unit right so if we want to buy like three tickets then we technically have to give three times the ticket price and we can buy three tickets okay so in this case I'm gonna go over here remember we've done quantity and stuff already so it should be pretty fairly straightforward so now what we can do is we can say const data equals a weight by oops a weight buy tickets okay and here I'm gonna pass in an object now what you can do here guys is exactly basically with that really so you're passing the value we are going to formats we're going to say ethers dot utils dot pass ether so pass ether not format ether and then inside of here guys I'm gonna pass in the following so just to make it very clear I'm going to pass in a number I'm going to say ethers dot utils dot format ether because we have to form an ethereum so we're going to remember I'm talking about Matic as well it doesn't matter right so it's the same thing times quantity and we're going to do two string exactly that okay so this is what we're trying to do right now and then I'm gonna have a uh closing bracket no where was it um value it's not something okay so I messed up somewhere um past ether where's my closing bracket there you go that's why no what the hell um okay so ether numbers dot quantity dot quantity for my ether uh ticket price quantity to string okay interesting um [Music] okay let me see where I've messed this one up ticket price for my ether let's do a little debugging so I'm just gonna go ahead and Chuck this in okay so interesting so it's actually not incorrect I don't know why this is freaking out buy tickets right now is freaking out so let's see what's going on here so uh where I have my buy ticket [Music] all right so where we have our buy ticket functionality views contract call buy tickets so interesting I mean that's actually correct I don't know why I was complaining okay um don't worry about that for now it well it does work okay so we can try this out um and then what we're gonna do is it's freaking out fine um ticket price if not ticket price ticket price times quantity is it because quantity is maybe optional no what is giving the value okay anyway we'll get past this it's fine um so at this point we're gonna say if you made it past that I'm gonna go ahead and do toast success right so toast success and contract call success okay so let's try this out let's try and buy a ticket refresh loading the pop round draw and you can see there you go get some loading going on and let's go ahead and do uh four tickets buy tickets buying your tickets popped up did they ask me for the prompt yes buy tickets and how much is it for 0.45 buy tickets now this is interesting so no point how many tickets am I buying here is it five so if I do cancel you see how it says whoops something went wrong okay so 0.5 tickets 0.5 there we go okay let's confirm the buy and now let's see because we're using their hooks what should happen is this buy shirt order should go through we should see the tickets deduct by five so 95 and then we will have tickets to hold wait for it guys wait for it wait for it wait for it you know it's coming it's coming wait for it oh God can we do it is it coming okay is it gonna load change no no interesting okay let's see what the hell happened let's refresh [Music] um localhost 3000 so at that point I should have actually inspected so we've got an error there we go uh another number for Jordan attribute okay okay it's fine so let's do two I just need to inspect to see what the hell is going on okay so okay so here we go we're not actually doing the correct cool here this is the issue so that's not actually the correct core and I know that because I've seen it so many times so if I was to go ahead and restart this draw on the production one that's working so we've got lots of debug in here so this is good all right so I'm going to restart this previous draw the commit the actual working one and we're going to go ahead and see if this one's up and running cool cool cool right so you see a lot more technical than we first thought Okay so let's keep going so restarting this draw um while that's doing that I can actually have a look at the code see what's going on all right so I'm going to give this a double check so I'll wait to buy tickets mutate a sync buy tickets is over here almost at 500 likes by the way guys keep smashing that like button debugging time and when it's debug in time we need some more peaceful music a focus uh ticket price okay so interesting two brothers um okay so there you go so what we should be seeing when we do a bicol is we should see something along the lines of let's go ahead and buy like three tickets okay so it should pop up that's fine then it'll say buy tickets with a value of three so that's what we want to be seeing okay and in our situation we're not seeing that we're seeing a pretty nasty kind of like buy tickets but with no data or value being passed in so that's why it's freaking out so at this point I think I know where the error is I believe our error lies yeah well we've got our buy tickets so this is not what we wanted um use contract call I'm going to double check something here as well buy tickets use contract call and you've already seen the contract address now so it doesn't really matter environment local is b11 that's fine okay and value here is seems to be incorrect so I'll tell you what I'm going to do I'm going to grab my try catch block I'm just going to replace it I think I maybe made a small mistake wow I've not literally made any mistake though okay interesting so buy tickets is the same here as it was there interesting Okay so we've got some weird situation right now um oh okay so maybe I've screwed up with my quantity or my ticket price if no ticket price return so I yes you would think but it actually does work this way Guys Madison says you have to convert it to a big number um ether's big number so it does work that's the thing right so let's go ahead and get rid of this to I don't think you could do too big number um it doesn't work no you can't do that um two numbers no this is not the one that I wanted Okay so super strange um frustrating because we're live as well um let's go ahead and change I just want to check something as well 0.01 Easter value okay okay brain's getting a little bit fired so let's keep focused let's do a number of use tickets let me see what's going on Okay so I know this will come I know it's super super frustrating but we'll get this all right so constantial click oops what have I done let me just make sure nothing pops up Okay so oh I know I feel I feel I feel I feel so alive okay okay okay [Music] um ethers from ethers whoa what the hell is this issue um all right I'm gonna try something my tickets and buy tickets is loading I want to guess cause I found my way my tickets is next public Lorry address okay and then I want to try a simple on a version of it let's try the symbol s me on my way so this is um expecting variables array and then it was actually it was inside of um was it I'm sure it was maybe array of arguments as an object foreign thank you dude buy tickets with a value inside of it yes that's what I expected so buy tickets to the Valiant side of it it's not that though it's not it's can't be that I don't think it's that because I don't accept an array of arguments which is strange it's gonna say he was not expecting more welcome to the popular question here by the way what's up buy tickets let's see thank you okay we got a pop-up I think that might have actually done it where the heck is my pop-up okay okay we made it oh bloody oh okay well I'm I'm struggling to understand what the hell why um why am I accepting an array of buy tickets there strange I think there was an update since I since I did it because that's new I wasn't there in my last build that's so strange because they have been deploying so maybe there's an update to that okay anyway we've done it hey let's go I can always explain what happened right so in this case there okay if we look at this here you can see it's expecting uh unknown array right it's in a data type of array so it needs to be an array I needed to pass in a value property and in this case you can see we're passing on ether we're doing this so now if I was to go ahead and actually correctly say this added like 0.05 buy tickets you'll now see there should be 0.05 okay what the hell happened there oops um 0.05 um one second guys oh God damn it one minute okay so 0.05 buy tickets is it passing a notebook yes there we go thank God thank God all right confirm now we should see five tickets bought tickets remaining will get updated because it's all connected to the same hook the total pool will increase to 0.05 and that is it let me see if we get that we should smash 500 likes come on please for the love of God because that way I can breathe yes that's what I'm talking about is it where's the success come on give me the success give me the successful toast oh wait I think I got rid of the successful toast notification oops that's why it's loading oh yeah I did oh my bad there you go I got rid of it contract call success there we go damn okay so I would have shown it okay nice it worked it worked my God Madison said I was hanging around the same age for about two days Mr fine let's go yes that's what I'm talking about all right let's go ahead and buy three more tickets just to prove that this is working because that is bloody oh man oh my god there you go guys you've seen some real debugging there's some real stress right there okay so we should see I'm gonna blow some music up if we see it love you buy any tickets or break [Music] it's going on the blockchain everything's happening right now yay there we go let's go guys that is sick okay nah nice so trust me we're actually moving at very good Pace now because now all we need to do is basically have it so that so in this one let me go ahead and buy three tickets now show you what we're gonna build next guys so what you're gonna what you're gonna now see is I know exactly what was bothering me before as well and it's gonna fix yes so I know exactly what it is okay so um you should see three tickets under here so now what we're gonna do is basically do the UI which will show how many tickets you're holding to for this round okay so let's go ahead and do that um there we go so you have three tickets in this draw so this lovely little beautiful UI box goes underneath the buy ticket box okay so we're gonna go ahead and Implement that right now so this is good guys let's go back up on this vibe let me go ahead and go ahead and get some upbeat music up in this place I think I might have the old let me go down a little level okay this is good that's good let's get it let's get angry all right so so you can't quit you cannot quit encoding all right you need the tenacity to go so we've got the uh handle click to buy okay and now what I also want to do is I want to increase this uh button text to be a bit more meaningful so I actually want to have it say something a bit more interesting than just what it says I want to make it fun semi board as well send me both there you go nice and instead of just some boring text here I'm going to say something like bye quantity tickets so quantity tickets or yeah space ah screw that I'll just do this um four ticket price and only if there's a ticket price then I'm gonna go ahead and do um a number um ethers format the ticket price yes and I'm going to times that by quantity no there we go okay one second I've gone a bit haywire here ticket price is out what the hell is this ticket price yep and then currency there we go there we go nice so you see that buy one ticket for zero one one there we go buy ten tickets all right just looking good guys okay now underneath that button underneath this div I'm gonna have user ticket so if you okay so we need to get the number of user tickets right so firstly there is a function for that and I'm just going to grab it so so for this one what I'm actually going to do here is we're going to do a bit of logic right so I'm gonna have a oops I'm gonna have a piece of State which is going to be a number we're going to say user tickets initially is at a value of zero okay uh Mr Frank says sunny does the contract choose a winner and reset every XX minutes automatically so Frank no it doesn't reset automatically actually resets um oh yeah the music is quite loud the music I actually resets every time the admin draws a winner so after 30 minutes I've kind of given you this power as an admin to then draw a winner so it kind of builds the suspense I guess but what would be ideal and it's definitely an extension you could do is every 30 minutes after the expiration it automatically draws the winner but all the functionality is there to do that you just have to make it automatically trigger every 30 minutes but yes that's uh that's how you basically do it so user tickets there um now I'm gonna go ahead and actually have a use effect then you're probably wondering whoa what the hell is why is it near use effect right well I'll show you why and firstly before I do that I need to get all the tickets now I am doing something on the front end here some of you might have found on it based see what I'm doing is I'm getting all the tickets that have been bought yes you could do this all on the back end I understand we're doing it as a demo it's fine right we're going to basically say we've got an array of tickets that have been purchased and then I'm going to do a reduced function to calculate how many of them are mine right yes you can definitely do it on the back end but I just wanted to do it we've got quite a lot to go through today so I'm going to have a use effect here and it's also going to demonstrate use effects so it's pretty cool use effect uh dependency array is empty in the beginning uh we're actually going to be dependent on the tickets and the user's address here because we're going to use those two values okay and then what we're going to do is we're going to say if there are no tickets we're going to do a bit of defensive programming if there are no tickets simply return okay otherwise what I'm going to do is I'm going to get a cont total tickets uh this is going to be a string array equals tickets I'm making a copy of the array and then what I'm going to do is I'm going to say const number of user tickets equals total tickets total tickets dot um reduce now you can do a filter filter out do length that kind of thing but in this case I'm going to do uh thank you my someone said my background looks sick Lucas yes it is available publicly the playlist is in the description Jay can also drop it but it's actually the papa found playlist sign up to the newsletter in the description you'll get it sent out to you immediately so we're going to do a reduce function reduce functions are awesome we cover this in the course as well so if you are interested join us at zero to full stack hero so everything will uh ticket that I kind of go through so it's going to be ticket address because it's going to be an array of addresses that we're going to be looping through um I'm going to return for every Loop so we're going to start the reduce function at zero we're going to say if the ticket address is equal to the user address then I'm going to add a total I'm going to increment the total basically otherwise give the existing total so what this will now do guys is it will show me it will basically like run up a number based on how many of those addresses are mine okay so if I was to go into the um here so there's eight tickets that have been bought if I go click get tickets you'll see that there is an array of eight right so we'll go through and it will basically fill around or reduce this down to a list of a number right so based on how many of those are mine and then what I'm going to do is set the user tickets to the number of use tickets so kind of a cool way of showing you how to use a user fat yes it's not the most optimal I understand that you could do it on the back end or something you can do all that but it's fine for this demonstration all right I'm just trying to show you loads of programming principles in a demo right so TCG says it says really interesting thank you so much dude appreciate you right so at this point we've got a number of user tickets so what I can now do is do a little Quick Test right what I would say here is do a quick console log and just get out the user tickets right and see what's going on here so we can see eight tickets online that's perfect right that's working exactly as we wanted it so now I've got my eight tickets and knows that those eight are mine um and then what we can do is we can render out the logic right so I'm going to show you a nice little handy rendering trick here um and this is actually going to go underneath the buy button so where we have the button here underneath that div here we're going to say if the user tickets if the user tickets um are greater than zero and oh jba Mega Montana us two dollars thank you is this really nice design sunny I appreciate you because I spent a long time on that um so thank you so much dude for acknowledging it so we're here we're going to have a div the class name is going to be the custom stats that we defined earlier so as you can see the box is starting to appear and then what we're going to do is we're going to have a P tag saying you have uh user tickets um you have used tickets tickets in this draw hit save you have eight tickets in this draw nice and then what I want to do guys is underneath we have a div and this div I'm going to do a nice little trick I'm going to say array use a ticket so remember user tickets is a number right so from that number what I actually want to do is I'm going to do a little trick here to basically if imagine we've got a number eight in this situation I can now do something called fill right I'm going to fill it with empty strings each individual one then I'm going to map through and I really don't care about the actual thing so what I can do here is I can say underscore to skip over the original thing so I don't care about that I'm gonna return the actual um thing here so I'm going to say it's going to be a P tag and it's going to be index last one and this will return back you'll see one two three four five six seven eight okay and remember each different uh when you're mapping through it should always show um your key so in this case we should have the index so I'm just going to use that as this value there is another way of doing it as well um I don't really get the point you know that there is Lottery and positive remember you ask uh not really dude if there's actually no nothing wrong with that um there's no Ponzi crap there this is free so yeah okay uh how did you learn design practice honestly practice and getting exposure to uh websites I recommend for design dribble and behance basically look at a project and just try and clone it out yourself and then you'll get used to sort of practicing but yeah there is a disclaimer for any other kind of you know anything related to finance or anything we don't wanna we're not liable so yeah chill dude it's cool um P tag someone's always gonna take it too far in it um here we'll say class name equals I would say text Emerald uh 300. height of 20 width of 12 and now we're going to start getting somewhere and then I'm going to say uh background should be Emerald uh 500 but this is a cool little trick if you don't want that opacity you see I can do 30 opacity it's a shorthand very nice right we're going to round the corners out rounded large Flex it Flex shrink so they don't shrink like shrink zero um items should be in the center justify in the center as well and say text should be extra small and it should be italic boom okay higher training there we go nice um cool um so at this point I'm gonna go into the div that's surrounding it this is going to be a flex div Max width is going to be SM Flex is going to be wrap wrap there we go and GAP uh X of two and Gap y of two there you go bam oops oh okay my bad Gap okay um so in this case there you go that's what I was that's the problem I had earlier I did damn it okay so this point if I change user I just want to see something okay says that okay that's why I see I was wondering why that's bothering me out there all right so there we go obviously that's fine it's fine I know okay of course so look at this so now for the uh I'm gonna add a um a slight margin bottom of two towards that P tag so I'm gonna say text should be large and margin bottom are two kind of push it away right so you have a blah blah that's cool Capital One there you go it turns into your front spot so look at that guys absolutely incredible all right really really clean design like like look at that man that is just so clean right um while we're here on the subject of the footer I'm actually just going to copy the photo in it's literally a disclaimer for like styling purposes as well I mean it looks clean um but underneath it oh I'm basically going to go right down to the final div and just pop in a footer so you can feel free to add the photo if you want this is purely for us to tell you guys that we're not liable for any of the finance stuff we're not basically pushing it's a purely educational it's a tutorial just to show you some tech stuff that's it all right so that's the disclaimer bit cool um so yeah this is nice at this point um so this is looking good so we can buy tickets now tickets now closed for this draw um so the draw is finished right so now what we're gonna do is we're going to do a winner part right so if you've won then we should go ahead and show something right so how do we do that right so I'm going to show you now still alive this guy's a monster thank you Alex um so now what we're gonna do is I'm actually gonna show you guys we've got a I've actually created something pretty handy um suddenly did you do the design or zombie design part I used inspiration from something on beehance and then I actually designed it myself um so thank you if you like the design um it took me a while to kind of get for it but yeah um so what I'm actually going to do is use a pre-built function that we've done and I've already created for you in the solidity smart contract and what it does guys is it's going to tell us if you have winnings for a specific user okay so in this case if I withdraw a winner here so in this case I'm going to go ahead and withdraw a winner so draw a winner ticket so this is going to draw a winner it's going to reset the the lottery so imagine at this point it's only me in there so I'm gonna win the lottery um obviously it doesn't make sense to keep doing that because if it's only you and Laurie you're just paying gas fees for no reason whereas if it's like loads of people are paid in then you win yeah nice okay so let's go ahead and do this um since I started watching tutorials I finished my projects thank you Joseph that's awesome man okay so at this point bam we get this nice right um so we've gone ahead and reset but now there's a winner right so what I can do is I can use this function called get winnings for address and what this does is I pass in the address as a third argument right and this is because this function the smart contract I'll just show you a rough example this is solidity we're talking about it takes an address as a parameter and it returns us the winnings with the basically is accessing a map right so you're passing the key of the user's address it's going to pass us the winnings back as a number right so are you int right so that's basically a number so at this point what we're actually doing here is this winnings number will have a number in it if somebody's won something so at this point now what I can actually do is I can say if the winnings are greater than zero we should have some presentational logic okay so where we have next draw so let's have a look down here where we have the next drawer so where's everyone I'm in the wrong wow okay that might help let's go down to uh next draw so here we go here I'm going to say will I make more web 3 yes I will thank you for asking that question um let's go ahead and do this I didn't use figma or anything for this design by the way I just done this like kind of freehand but yes figma is awesome for that how many times if you take to learn how many times did it take you to learn your first language uh it depends honestly it depends on the effort you moved but if I had something like 0 to full stack hero link it in the description I would have learned it a hell of a lot faster because I have mentor and mental community so I would 100 recommend if you're on the fence join us at the papa Farm our members crush it and if there's any members in the chat right now you can tell them yourself our members are sick right we are actually flying and I love these guys so much right okay um so at this point we're doing pretty damn well right Jay we're doing good so at this point um I've got the winnings oh yeah so if we've got one I basically want to have a div and inside that div I'm going to have a bunch of things I'm gonna have um essentially like two P dags a break I'm being lazy here yes we have a break I know and then I'm gonna say click here to withdraw click here to withdraw uh on this P tag I'm gonna say winner winner chicken dinner if you won winner winner chicken dinner Hey right and it's gonna say total winnings right and then we're gonna go ahead and show out your winnings all right so I'm actually gonna go ahead and show you the snippet that I've done here already similar to what we did last time we're just formatting yeah so hey this person won right hey there we go guys we got some Papa file members in the house Brian what's up man you go science Bill's insane let's go thank you so much dude my first Big Goal at solidity programming uh actually no it's not we've done it loads in the course but yeah my first project on YouTube I guess uh Alex I'm a diamond member and I can confirm I've got a lot for the amount of money and it never stops videos keep getting alerted but you pay only once thank you so much dude for shouting it out appreciate you guys yeah Diamond members crushing right so this is looking pretty damn good so if we click this I want to have a withdrawal Okay so we've actually got that so firstly let's just design this makes it look a little bit better right so we're going to go ahead and design the winnings first then we'll say Max width is going to be medium but on a medium screen I want to increase the max width to a 2XL on a large screen Max width which is going to go even further to a 4XL then the margin X Auto is going to kick in so margin X Auto and then I'm going to say margin top of five bam okay so there you go it may not look like much but it did change I promise you the button here is going to have a padding of five let's do a background gradient and I'm going to do two bottom okay and then we're going to say from an orange oats from an orange 500 to a emerald 600 let's go ahead and I'm gonna animate it as well animate post text should be in the center uh rounded XL width it should be four there we go okay bam look at that awesome stuff uh for the P tag I want to do fun mode oh my God uh fun boat um for the P tag here I'm gonna say that one's fine and this one should be font semi board for a class name font semi board acos a very good question you guys saying you have a cleaner way to use Tailwind inline classrooms ugly and could be unreadable example to use in a larger company okay a quick little answer to this one because I get it all the time a few things you could do firstly create your own custom utility classes so that way you shorten the amount that you see everywhere that's the first thing and secondly if you have repeating components where there's several inline elements kind of like there's several inline kind of things being repeated componentize it the way that we should be doing and react those two things alone are going to reduce the amount of code otherwise you should just get used to that inline because trust me when I say it it's a lot better than going to an external file trying to figure out the media queries that crap when you see it straight in front of you it makes a lot more sense so I personally Am pro this design but that other those two tips hopefully will help you get a cleaner Tailwind CSS written up hope that helped dude okay so at this point now we've got winner winner chicken dinner look at that looks good okay now when we click this I need to withdraw my winnings okay so we have created this function already in the solidity smart contract so now what I'm going to do is create a on withdrawal winnings function so I'm going to say on click equals on withdrawal winnings now I'm going to create this helper function at the top I'm going to say const on withdrawal winnings like so and this is going to be an asynchronous function and you may have guessed it we're going to do some pretty cool stuff here with the r notifications so firstly I'm going to have a notification which is going to say withdrawing your winnings the second thing I'm going to do is actually have a uh plus pull in a smart contract helper function from our handy hook and you can see you can refactor this because it's getting a little bit you know up there but it's not too bad right it's fine the case real code it's this will happen sometimes right so at this point what we now do is we can have a try catch block which is going to go ahead and do the following so we can have a try we can have a catch and we can have an error and if the error gets thrown what I want to do is basically dismiss the toast notification with a console.er error now the first thing I want to do is I want to actually go ahead and say withdraw your winnings basically uh simple as that and it definitely did get updated I'm telling you because it has changed from my other code um so it definitely did get updated but we managed to get past it now once that's done guys I'm actually going to go ahead and dismiss the previous notification like so okay now it automatically does know that you're the person withdrawing it because you are the person submitting that request guys okay guys we passed 500 likes when did that happen incredible amazing stuff thank you so much this is awesome oh my God right welcome my energy back up right so this is sick we are a winner so I'm gonna go ahead and show you guys just to prove it I'm logged into my account 2.45 right somebody just donate I think no is it that's somebody donated to my uh test net 2.45 so I'm going to go ahead and click here to withdraw and we should see now okay nice withdrawal winnings has been submitted okay let's go ahead and confirm now we can see that we should see look at this uh 2.45 with if this goes up we've withdrawn Our Winning successfully and it should be approximately 0.11 after commission that kind of stuff gets taken out so 0.11 so we should see like 0.56 oh nice there we go 0.57 boom withdrawing like withdrawn Works guys I don't know if you understand this or not yet but the hype for me is real right now purely because that's nuts right that's a whole payment transaction essentially happening from some small smart contract bit of code that has been easily deployed thanks to our friends over third web like that's nuts that's actually nuts like I can't even when I was coding this up I was like what the hell this isn't this is this is gonna open the doors to like some a whole nother array of apps and possibilities right it's nuts and that's a whole payment from one person to another done oh and it's literally you're in control it's it's it's really amazing like Akon says we'll try it it's hard to convince my team to start a new project with Tailwind honestly I understand but it's worth it dude okay so now at this point let's go ahead and upgrade it to have a marquee for the last winner so we're only going to show the last winner right if you're a winner it's always going to show you Alex is insane how you get excited love this guy's Angie man thank you dude I appreciate you so much all right so oh my God we've got admin controls as well right so let's do two things right first things first we're gonna do the Marquee second thing we're gonna do is admin controls admin controls sounds long it's actually not but we're we're almost there guys so stick with me right first things first let's do the Marquee okay so Marquee we're gonna actually use a nice little function from react fast Marquee these are whole libraries I hope you find useful uh I'm gonna show you this one for example it's an awesome library right react fast Marquee this is actually a website for it and it's actually the best Marquee I probably have used you see you use it bad like well look my inner Road man came out Bears all right um so in this case we're gonna go ahead and install that yarn I had rap fast Marquee yes I'm a London boy so it is it does come out at times all right I'm gonna say yawn add oh we've already got here you wanna react plus monkey boom I just realized the other day that you don't get demonetized for swearing so we're gonna keep that in mind sometimes it just flips uh okay so zero man will help me finish my LinkedIn clone uh join the papa fam dude we've got those members inside Samuel says and Cool Stuff saying thank you so much dude appreciate you right at this point we don't actually need the data you could get rid of that and just do a weight but I'm gonna leave it there so you go if you're not friend of KSI joking oh dude I love KSI man he's incredible um I hope you you're not a friend in case I yeah KSI is amazing dude I watch his stuff all the time um Marquee and my friend made the joke the other day and said something you should get involved in the boxing team and I was like I do box I do books this could be a thing you know he knows I could be fighting all the rest of the the developers on YouTube who knows and then KSI you know right so we've got Marquee over here um let's go ahead and do uh uh classic I'm gonna show you how to use this one by the way so some of us KSI he's looking good man he's looking good so we'll do a gradient posts I'll show you guys I've actually skipped you a bunch of headaches so we can use this uh speed equals 100 the side band was amazing uh Ali says we can do aspiring I'm an amateur boxer let's fire this one uh dude when you come to Dubai I'm ready um let's go I'm gonna go ahead and start this up a little bit there we go and inside of here I'm gonna have a div and this div is going to have a H4 inside of it and it's going to say last winner I'm going to use a helper function in a second to get the last winner and underneath that I'm gonna have H4 saying previous winnings previous previous winnings dot dot and I've actually created helper functions for all of this so we will see it now there you go look lay just like that guys it comes up amazing all right so I'm actually gonna go ahead and um where we had uh the div here sorry last name we're going to say Flex Space X of 2 MX 10 bam okay and then for the H4 here and here I'm going to go and say class name text should be white font should be bold there we go okay now let's get these values so for the first one we've got the last winner right so last winner I'm going to go ahead and get the that value with this one right here and last minute Romance I'm actually going to pull both in to save some time here we've got last winner and last winner amount so they're basically like I said I've created these and the code is given to you so you can go ahead and use it and so forth okay so let's go ahead and Pop That in right now so last winner let's go ahead and Pop That in so do do that's vibing that's so chill last winner two string thumb okay and also okay that's interesting um interesting okay and previous winnings is going to be a format right so last minute amount and then I'm gonna basically just save us a bit of time here and pop it in like so right um get rid of that one afterwards you don't care all right boom look at that the last winner was 0.117 which was correct that was the last winner amazing okay now I was the one who created this or deployed this smart contract which means my address is on it right which means that now what we can do is we can actually check to see if I am an admin right so let's go ahead and use that right now so Lottery operator where we're going to use a helper function here for the lottery operator so Marquee is done we're now going to add in the admin controls and then we are done ladies and gentlemen right so we got the is Lottery operator function and this will return a Boolean value if I am the lottery uh winner okay so what I'm gonna do is underneath the Marquee I'm gonna go ahead and say if is Lottery oh my God what the hell I'm gonna say if is Lottery operator um is the same as addresses sorry it returns a string yeah then what I'm gonna do is I'm gonna say that we should see a div with the admin controls component inside of it okay so I'm going to make it super clean now I'm going to say Flex justify Center I just want to say guys honestly if you're still watching I bloody appreciate you guys because there are so many people still watching and it is nuts thank you right admin controls and let's go ahead and create a oops okay admin controls dot TSX Bam rfce Boom admin controls hit save let's close that up let's go back over to our index.tsx let's pull this in and as you can see I am an admin right so just to prove that this is not like not talking crap I can change my account to a non-admin and you can see the admin disappeared so now you guys can see I've got admin controls okay so what I want to now do guys is I want to go ahead and actually actually change this um and get the admin controls basically in play right so what we're trying to do now is get these controls in action okay and then we are done oh my God this is nuts all right let's log on as you see oh my goodness right it's so cool um all right so H2 I'm going to do admin controls now pre-workout slapped me so hard you know they're actually still in effect all right I'm gonna say total Commission to be withdrawn so you know if you've hosted it you've done all the hard work of keeping it intact you can actually get commission nice right uh so we'll have some total commission number here so we're gonna work that one out um we'll have a div underneath and this will have five different buttons or four different buttons in so button times four each button is going to say so we've got a draw winner we've got um withdraw Commission withdrawal commission we've got um to restart the draw restart the draw and we've got refund oh okay cool um so that's cool and then we've got four icons I'm going to go ahead and pull in so it'll save us a bit of time go ahead and chop these in and what I've done here guys is I've actually gone ahead and just imported these in like so so I'm going to go ahead and just pull them in um one at a time so we've got on the draw winner I've got a star icon above it on the withdraw commission I've got a dollar sign icon because you're making some money um on the restart drawer I've got a arrow path which is kind of like a restart emblem cool and then on the Arrow U-turn I've got a for the refund Arrow U10 there we go bam cool um for all of these I'm gonna go ahead and sort of style them out so Flex column on this um you can see that pops in on the mobile view space between them on the mobile view should be a value of two and what I'm going to do just before I carry on with that I'm going to make the outside text white so that way you can see what's going on so SpaceX of two when you hit a bigger screen we should go into a row because you don't want it to be like that and we can also get rid of the space between the X the Y values when we hit the larger screen when we hit the bigger screen we're going to give Space X of two okay so now you can see on a large phone it's that and then on a thing it starts okay nice looks good looks the same as this very nice okay and then four the actual um stuff outside we can say text should be Center padding X of a five padding y of three hit save as you do it all right rounded MD um border Emerald should be 300 and maybe 20 opacity and I'm going to apply a border bam okay now we've got that in play the admin controls is going to be font mode the P tag is going to be a margin bottom of five to push it away from the bottom and then for the each individual buttons we are going to go ahead and give them a class name of admin button so you know where I'm going with this we're going to go to our globals oops a globals and we're going to add in a custom class called admin button okay go to admin bot or Global sorry and inside of here what I'm going to do is I'm going to go ahead and style it up apply which for the nice little effect we've got a custom background color so for these buttons we've got a nice background color and as you can see I'm going to go ahead and hit save as we do it we've already got text white so we don't actually need that we can do p to flex one that way they all use up the max space that they can rounded MD for the corners we're going to give it a custom border with a pixel value of two so let's go ahead and do that now there you go and then when we hover over it guys I want to have a different color um here so no man Chris Van Gogh's you're really really awesome I did thank you man that makes my day when people say that I love and appreciate all of you guys honestly guys and girls you know I mean um so in this case look we got that looking pretty sick all right uh let's go over here look oh my goodness looking clean right um so at this point the total commission to be drawn and the functionality needs to be done so tell commission to be drawn probably the easiest thing let's get that out of the way so let's get the operator Turtle commission so firstly I'm going to get the contract bam at the contract we actually use that contract and we use a bunch of others so I'm going to pull those in here um and then what we're going to do is from that contract I'm going to get the um where's it gone use contract told commission so this is a helper function that we created earlier bam this gives us the commission value we can go ahead and literally plug that into where we had our total commission to be withdrawn here so I'm going to do the same basically the same approach that we did before and I'm going to basically plug it there so there you go um ethers I'm currents currently I'm going to import from our constants ethers I need from our is dependency now you can see bam we've got that's the total commission that we need to basically withdraw right so at this point I can add in um there you go space out cool total commission to be withdrawn is 0.013 Matic all right so looking good now I need to have it so when you click these it does the appropriate actions so first thing I'm going to do guys is I'm going to import all of the helper functions that we're actually going to need right so what we're actually going to need here is we've got four helper functions one for draw win a ticket one for refund or one for restart one for withdrawal commission so I'm basically going to pull these in all at once there you go so these are basically the same contract calls we had earlier except they're for each individual action that we have on the screen okay they're not in the exact order but you know what I'm saying right so at this point we're going to have and I'm actually going to have separate functions here for each one okay I'm going to have a draw winner on withdrawal Commission on restart draw and on refund all now yes you could probably add in a kind of you know refactor this and have a helpful function I just realized but it's okay um it's pretty cool ideas you could do that no it's fine we're gonna do this yeah right so I'm going to create the first one let's do a draw winner okay um bro you're from Dubai I'm actually I'm living Dubai from London um draw winner so let's create a const draw winner okay let's go ahead and do this asynchronous function and this one I'm gonna go ahead and plug it in here because we're going to save time because we've got to do it four times right so as you can see we're going to import the toast um toast notification where is it let's go ahead and pour this in like so and you can see all we're doing here is the same exact logic that we did earlier except again that is actually so different right so we're drawing a win a ticket and then if it's success we show that success message if it's not we do the same thing now I'm gonna do the exact same for the commission so I'm going to show you right now so this is the exact same for the commission and again yes and you know what they definitely updated their dependency before I came live which is nuts right um me and Jay will know that we actually had a lot of that happen before we went live which is crazy um but yeah that's a live debug right there on restart we've drawn and on refund or Okay so this one as well so now we've done that we've got all of our helper functions nicely done guys right so now what we can actually do is we can hook these up to the appropriate action so for the uh on draw winner I'm going to go ahead and say on click draw is it on draw winner draw winner draw winner there we go um for the withdrawal winnings oh sorry on click um with draw winnings um withdrawal commissioner what was it uh on withdrawal Commission on withdrawal Commission and then for restart it was on restart draw and for refund or it was on refund no it was on yeah on refund or there we go okay boom I think we've already done it that was fast right so yeah because I we had the helper functions there so it was kind of ready to do so let's give this a damn try first thing I want to do is I want to restart the draw so refund all you can only refund everyone once the draw ends so I'm not going to wait for that right um but what I'm going to do now is I'm going to restart the draw withdraw my commission buy some tickets and withdraw a winner between two different people so first things first let's restart the draw see if this works so restart draw and as I am admin I can do this and yes if you're wondering how did he do that in the thing is because inside the solidity code it will check that I am the admin so we have a modifier in solidity code which is actually going to check and it will actually block me if I'm not admin to do it and plus you won't see it on the screen so you can't do it right so this should restart the draw in just a second guys hello from El Salvador what's up dude do you go for um oh nice there we did it yeah boom okay nice do you stop everywhere like controller you can see it I mean no we don't not at this point you can do it feel free to do it all right so at this point I'm going to withdraw the commission so we're going to withdraw our commission numbers from here so 0.013 um so this will actually go ahead and allow me to withdraw our commissions so at this point we should see our commission drained to zero all right oh Jay look at the timings dude I think I'll be getting it in so withdrawing the commissions going to North Point North wait for it there you go we've withdrawn the we've withdrew the commission and let's go ahead and buy I'm gonna buy two tickets for this guy and I'm gonna buy like 10 for the other guys so he's got a higher chance of winning [Music] okay so let's go and do this and obviously yes you can make there's a lot of probabilities and stuff you can go ahead and iron out this is purely educational right so two tickets for this guy let's go over to this one here and buy 10 tickets or some stuff you see he's not an admin you can only just buy so 0.1 yep that's correct confirm oh let's get energy up as we get to the winner let's get that oh 10 tickets nice all right we're gonna go back to our admin [Music] boom okay we've got the admin controls I'm gonna draw a winner now picking a lucky winner we have to accept that draw when the ticket boom okay confirm picking a lucky winner this is where his cowkling is doing all the magical stuff oh my God what's going to happen [Music] wait for it the suspense oh my God hey when is mislected was it this guy no anime which kind of makes sense the other guy had better probability so if I go ahead and log in as the other guy he comes into in this count he's like oh my God I won the lottery this is crazy six see right Works uh so at that point we're gonna win the chicken dinner you just won 0.1 attic and then I can go ahead and withdraw my winnings they're like oh my god let's go buy that new Ferrari withdraw my winnings smash thumbs up if you enjoyed that as well all right we're enjoying the winnings and just like this our pizza because this is another fun build actually thank you so much all right wait for it and then this should actually withdraw the winnings so we should see here I've gone for 0.12 to 0.23 bomb done and also look at this how A5 just won 0.0108 so confirmed Works responsive everything is perfect that is sick right look at that Logan Oh my God nice guys look at that exact same bam amazing guys amazing here you could refund I'll show you guys on the actual production one because this one ran out so you can actually log into this one and because we're not drawing a winner but you could actually refund everyone at this point if you wanted to so what this will do is like the refund all so imagine everyone had like you know bought tickets whatever and you said no we've canceled the lottery this time it's been a mistake then you can refund and everyone actually gets paid according to who bought tickets which is pretty cool right so we'll go through and they'll actually pay everyone their sort of wings but there you go all refunded successfully bam what is happening in web 3 world man this is so cool that you can do this stuff but it wouldn't be possible without the amazing guys over at third web deploy third web honestly the third web deploy was absolutely incredible it was a reason why we could do this they absolutely smashed it with this one I can't even I had so much fun writing this up it was awesome and I and I cannot even begin to imagine the power out our hands with this kind of stuff right as I mentioned before the solidity smart contract in the description second link first link if you want to go ahead and sign up make sure you use the referral link the first link in the description when you sign up to third web because it's going to help you out it's going to help us out helps everyone know that you know the proper fan brought you to third web so guys overall yeah this has been your boy Papa react sunny and this has been one of my favorite builds period absolutely one of my favorite builds it was challenging it was hard it was really tricky to figure out it was a new programming language we made it it was awesome absolutely incredible stuff and I hope to God you learned a bunch of stuff I'm gonna run through the last few things about what we did in this build to wrap this video up today we learned how to deploy your first ever solidity smart contract across different networks using third web's amazing deploy features so deployed to ethereum blockchain you can deploy to a polygame blockchain you can put it on top 10 you can throw it to binance you can do loads of stuff it's literally available whatever's available in third web deploy your contract to them remember you actually own your smart contract which is incredible awesome stuff thank you for another donation cool stuff jba got absolute fire appreciate you you guys learned how to code a bit in city for the first time ever on this channel we gave you a little bit of exposure to it our main focus was on xjs react heroin all that good stuff how to implement the kind of you know the power of that smart contract inside of an application in the form of a lottery draw okay so ever again I want to iterate this is only for educational purposes we are not endorsing any form of gambling or anything like that and you are liable for your own risk and you're at loss risk and losses all that kind of stuff is it your own take right the way it's just teaching you how to do this stuff don't don't risk your money right and you learn how to do a bit of typescript today as well ladies and gentlemen uh so yeah you built an awesome app with some responsive design it was absolutely incredible we are literally flying with the likes guys as always this has been your boy pop rap it's only why we end it the way that we know best and I'm trying to find the main song there we go so this has been an amazing build incredible incredible stuff as I mentioned before it's just it's so fun to try our new tech and if you haven't already subscribed to the channel because we have so much content coming I'm I'm not joking guys we've got a backlog and it's coming out every single other oh my God it's coming out big and trust me I'm working hard right now me and Jay are overtime right now things are flying so if you enjoyed this content hit the Subscribe hit that Bell notification icon to make sure you don't miss out on any of our videos thank you guys for 160 000 subscribers if you're watching this past that they're bloody amazing and we hit a million the other day on Uber which was incredible the papa Farm is why on here is why I do what I do thank you so much to every single one of you thank you to third web for sponsoring this video and for being damn awesome I appreciate you guys I'll see you in the next video peace Papa fam let's go oh my God [Music] thank you guys I will see you in a future build peace I didn't think I'd make it without you by my side [Music]

Channel: Sonny Sangha

Views: 129,568

Keywords: react, developer, reactjs, html, css, js, javascript, papa, papareact, papa-react, tutorial, frontend, webdev, web-dev, clone, fullstack, backend, motivation, reactnative, react-native, redux, typescript

Id: oNlhptQmChc

Length: 206min 25sec (12385 seconds)

Published: Tue Aug 30 2022