The Process of Creating a Smart Contract Lottery System

To create a smart contract lottery system, we start by setting up a new lotteries that makes sense. We need to define the rules and parameters of the game, including the number of players, the amount of money being raised, and the distribution method for the winnings.

The first step is to initialize the variables and set up the smart contract. This includes defining the wallet address, lottery ID, and player addresses. The wallet address will be used to store the funds, while the lottery ID will serve as a unique identifier for each game. We also need to define the number of players, which will determine how many people can participate in the game.

Next, we need to create a mechanism for players to join the lottery and participate in the drawing. This involves setting up a function that allows players to deposit funds into their wallets and update the player list. The function should also handle cases where multiple players try to join at the same time, ensuring that each player's entry is valid and secure.

Another important aspect of the smart contract lottery system is the random number generator. We need to ensure that the numbers are truly random and not biased in any way. This involves using a cryptographically secure pseudo-random number generator (CSPRNG) to generate the winning numbers.

Once we have set up the basic structure of the game, we can start thinking about how to implement the drawing mechanism. This is where things get interesting, as we need to find a way to ensure that the winner is chosen fairly and randomly. We can use a combination of cryptography and mathematics to achieve this.

We then take the wallet address and replace it with the actual winner, ensuring that the correct person wins the lottery. We also export the last winner for future reference.

To access the last winner, we need to update the code on line 29 to reflect the changes. This involves replacing the hard-coded value with a variable that stores the last winner. We can then use this variable to display the correct winner and their wallet address.

One of the challenges we face is dealing with arrays of winners. When there are multiple winners, we need to find a way to display them correctly. To do this, we can use a combination of array indexing and mathematical operations to retrieve the most recent winner.

For example, if we want to get the last element of an array, we can use the `length` property and subtract 1 from it. This ensures that we get the correct winner, even if there are multiple winners in the game.

Once we have set up the drawing mechanism, we can start testing the smart contract lottery system. We need to ensure that it works as expected, including handling cases where multiple players try to join at the same time or where the winning numbers are drawn randomly.

To test the system, we can create a new user and enter them into the lottery. We then refresh the pool size and pot size to see how the game is being played out. The results should be clear: one player wins the lottery, while all others lose.

As the owner of the contract, we need to switch to our account and pick the winner. This involves using the smart contract's functions to update the winning number and display the correct winner. We can then wait for the gas price to settle before confirming the result.

Finally, we refresh the pool size to see how the game is being played out with the new owner. The results should be clear: the winner is displayed correctly, while all others lose. The smart contract lottery system has successfully executed another round of games, ensuring fairness and randomness in each draw.

"WEBVTTKind: captionsLanguage: enwelcome to another web 3 slash blockchain project that we're going to be building using infuria this project is going to be a lottery dab now there are gaming companies out there like crypto games using something similar the point of this is you have multiple users enter each of who pays in ethereum a certain amount in the pot and at the end you pick a winner and you randomly select the winner and that Winner Takes the entire pot but we're just gonna have fun with it and learn web 3 by building this lottery app now let's go ahead and kind of demo what the app looks like so here's the app I'm going to I currently have no players inside here right you can see that I have zero players at the bottom so I'm going to go ahead and with one of my accounts I'm going to enter this okay and then we're gonna add in uh one person okay and so I'm going to log in here cool and now we have one person and I'm gonna enter with that account cool so let's go ahead and do that I'm gonna enter boom I'm in and now let's go ahead we're gonna speed up through this process so we can go faster I'll just pay higher gas fee now I have entered as a user and you can see at the bottom that I'm inside now I'm going to enter with a second account so let's go ahead repeat the same exact process and we'll enter it all right now we're gonna enter a second user so I'm gonna go ahead to my metamask I'm gonna speed up and do the same thing and Boom at the bottom you can see that the second user has been added to this Lottery and each of them added Point fifteen point zero one five eighth to the lottery and at the end of this what you'll notice is we have a winner and that winner which is this account right over here he won all of that is okay so that's how this will work next up what we need to do is we need to sign up for infuria and the reason why we need to do that is so we can actually build this app it's going to be completely free and it's going to allow you to build your web3 app and scale it as much as you want so I want you to go to the URL in the description below okay we've given it to you you'll get to this landing page of inferior and then just hit sign up at the top once you do that just make sure you create an account under get started for free pop in your email and your password and once you're done doing that it's going to ask you to verify it then just simply go ahead verify your account and then it'll take you to this next page okay Pick Your Role Etc which organization you can pretty much pick whatever you want hit submit for the network we're going to choose the web3 API formerly ethereum and for name we're going to say production and then just hit submit okay once you're done with that it's going to bring you to this page at this this point this is where you are you can take a look around but your job here is done you don't really need to do anything else with that said we're going to continue and next up work on installing metamask now we're going to go ahead and install metamask if you already know how to install and use it just skip this part timestamps for below I'm going to keep going so go to metamask on Google find it as a Chrome extension hit add to Chrome and what you want to do after you add it to Chrome is just hit agree with everything so it takes you to the next part and this is the important thing that I need you to do once you are on this page where it says new to metamask do not pick no I already have a secret recovery phrase choose yes let's get set up create a wallet there and then pop in your password and the important thing we're going to really need is this mnemonic phrase that it gives you AKA or secret recovery phrase this is the important part because in this app in this app that you're going to be building you're are going to need access to this so make sure if you already have an existing account make sure you have the secret recovery phrase if you don't have a secret recovery phrase or you forgot it just make a new account right now okay and then follow along that way it's going to ask you to confirm your secret security phrase and then it's going to ask you to safely store it somewhere then in your account you're going to notice that you don't have any other accounts like any other networks you only have the ethereum mainnet so what you want to do in that case is you want to go to you want to click where it says show slash High test networks and go to your advanced settings and in there you want to say show test Network so make sure that's turned on and make sure the show conversion on test networks is also turned on and now when you hit X and you hit your networks you can see that all these other test networks are there like Robson and Gorly Etc alright so type in robsten faucet because what we want to do is we want to get some free robsten which is essentially ether okay and that's how you're going to be able to play with this app and do stuff with this app so go to disrupts and test that faucet go ahead to your metamask and you can pin it just like I did here right click and copy the account address and paste this account address and say give me robsten eth it's going to give you the Robson eth you could see that we got 10 Robson eighth right here now I do want to highlight something here you will see Robson will shut down in Q4 okay so it's going to be shutting down soon but what we're showing you here is just as easy to do with the gwirly test Network as you can do with robston so you could follow along and you could just do it with quarterly okay so yeah so if you're watching this after 2022 just do that you should be fine with that said we're going to keep going and now we get to the coding part now open up your command line and we're just gonna go ahead and get your entire project set up some key notes that I want to show you is I want you to go ahead and do into your GitHub folder or wherever you store all of your stuff and then I want you to use npx clever programmer now before I continue the benefit of doing this way is we are giving you all of the assets for you know just giving it away for you okay so you're gonna have access to all of the assets you will have access to the styling of this app you will have access to the components inside of this app and you know majority of front end you'll get access to okay which you won't get access to are things like blockchain and smart contract because in this project I don't want to focus so much on the front end part otherwise this tutorial would be 9 hours 10 hours long we want to focus more on the interesting aspects of this project which are it's the smart contract the blockchain parts so that's what we're going to be focusing on more and we're giving away a lot of this and if you do npx clever programmer you'll automatically get access to all of these things for this project for this Lottery dap okay so we're making your life a lot easier so do npx clever programmer at latest and then it will install it globally and then just go ahead pop in your email and what you want to do after you put in your email is It'll ask you for your name and then simply go ahead and choose the project so here I want you to go ahead and choose the lottery app go to that okay select it and then you're just going to hit enter now it's going to initialize your project it's going to give you the front end right it's going to install all of the dependencies and it's also going to tell you to smash that like button while you wait so go ahead do that right now while it's loading it also automatically there's a fancy thing that we've added to it it automatically opens up your Visual Studio code if it gives you an error there or doesn't work for you somehow just go there and open up this folder inside of your Visual Studio code and there you go there's your project your lottery app there you go okay this is your starter now all I want you to do is go ahead and do yarn Dev and it should open it up on your right hand side or just open it up in Chrome on your Local Host 3000 okay and uh just get to the part where your app is up and running okay so there you go that is the starter okay if it doesn't error out it's telling you that hey this is working all the styling is here and everything is here and this blank page here with this color that's a good sign that means your starter is completely working so good job and with that said we're gonna go ahead and continue building all right now what I want to show you is that at any given time I don't want you to get stuck all right I do not want you to get stuck so what we have done for you is this thing that you got from npx clever programmer if you're a more advanced user you are sitting on a branch right now called CLI starter and there's a branch of this project that's called I believe main right the main one the main branch actually has the solution so at any given point you could switch to that branch and get the solution okay this is the branch you're currently on by default because all you did from the CLI tool was clone this repo on your computer okay so let's just walk through it and you could also go to this repository from the link in the description below so it has a solution on there so you could do it that way too just click uh use one of the links in the description below and you can see that we have all of the code right there right I could click into context and I can click context.js and it will give you the entire solution for this project okay so there you go uh this is just a thing that's made available to you to get answers to get unstuck at any given point just wanted to highlight that with that said now we're going to start building these smart contract um and this is going to be a really fun process because we're going to do it step by step so let's go all right now what we're going to do guys is we're gonna go ahead to remix IDE a remix IDE which is a phenomenal online ID if and it's completely free for writing smart contracts and iterating and getting live instant feedback for everything that you're doing so go ahead there okay and start coding online click that and it'll bring you to their page just hit accept cool hit next blah blah blah and then you should be good to go okay uh here you're going to choose a workspace name all right you could call it Lottery we'll call it Lottery dap and then on the left hand side you will see that it populated it with some dummy contracts and stuff like that just to kind of get you started okay so close the scripts tab close the test tab go into contracts and inside of contracts we're going to make a contract and it's going to be called lottery.sol okay so lottery.solidity contract great now that we're doing this let's go ahead on the left hand side and I'm going to click on that third Tab and we're going to choose Auto compile and for the version we're going to choose 0.8.15 plus that's the version let's go back to our lottery.soul and here first of all the first thing we do always is pick the license so we're just going to choose the MIT license for this one we're gonna pick our solidity version at 0.8.15 we're going to create a contract called Lottery and in this contract okay the first things that we're going to create are State and some storage variables that are going to be necessary for us so let's create a owner we're going to need to keep track of our owner let's create also a player's array okay that's where all of our players are going to go inside of let's also go ahead and create a Winner's array and then we're going to go ahead and create a lottery ID which we will keep track of okay and now I'm going to go ahead and explain something special for you okay so for example I told you that these are the variables and variable names here right but I didn't explain to you would address public address payable public is so let's go ahead and do that now address as a special data type in solidity which refers to you know anytime you see a wallet address that's like that that's there's a specific data type for that that's not just a string okay in JavaScript you'll store that as a string but in solidity you store that as an actual data type public here means everybody will have access to these variables meaning that even outside of the smart contract you could access them okay so that's why it's Public Public public so you could make it private as well which would mean that we can't access it from outside but in this case we don't need to do that okay so that's the word public okay so hopefully that handles that situation now what is this uh thing called payable payable means that these contract addresses are put in a way where we can pay them or we can send money to them all right now payable means these are the guys that are uh you know where we can actually send them money okay so that's why this address type is a payable type because any of these players we want to be able able to send them money based on if they won the lottery or not okay that's what's happening there this empty open close uh array that you see over here that basically says that this data type is going to be an array of addresses meaning that they're going to be multiple addresses in here so players variable isn't just going to be like one random zero x dot dot dot address it means it's going to be an array of addresses so it's going to look more like this comma 0x dot dot dot comma 0x0x after you get the idea right with multiple addresses there okay so that's what's happening inside of this array it's going to be an array of addresses then we have array of winners the reason why we're not making this public or sorry uh not making this payable is because they've already won so we don't want to be able to pay them programmatically or at all because they've already gotten the money and then we have Lottery ID which is an integer because it's going to be zero when you know it's the first Lottery then it's going to be one on the second Lottery two on the third Lottery Etc and we'll show you how to do that as well all right let's keep going with this so once I'm done with that we're going to create a Constructor and this Constructor this runs when the contract is deployed okay so let's create a Constructor here we're going to go ahead and say owner is the message sender AKA whoever Crea uh you know created the contract whoever was like logged into their metamask and was the person that created the contract um at the time that the contract was created okay that's gonna be set as the owner so what construction Constructor means that this piece of code is going to run right when this contract is deployed so the very first time this contractor is deployed a contract is deployed it'll run and then this part will never really run ever again it'll only run once when the contract is deployed if you have experience with the react think of it kind of like your kind of like your use um you know your use effect hook where it fires off once the page loads and then if you don't have any dependencies it doesn't fire off again right kind of like that except it just runs once forever even if you refresh the page and we're gonna set the lottery ID to zero because that's what we want to initialize it to be next up we're going to create the enter function so this will be the function that allows a user to really enter the lottery so let's go ahead say function enter and I'm going to set the public function okay and I'll explain why we're saying payable afterwards this function we want to make sure that we require the message value is you need to put in basically what we're seeing here is hey you need to put in more than 0.5 uh one eth okay so if you're gonna if you're gonna put some money in the pool make sure it's more than 0.1 ether because you can't just put like baby money in that right where we're here to play the big boys are here the big boys and the big girls are here I don't want to get canceled like Andrew Tate um so here then once we do that we want to do players.push and we want to push the address of whoever was like the logged in user in metamask whenever you see message.sender think the current logged in user with metamask okay that's the easy way I think about it and so I'm pushing whoever was currently logged in and entered the lottery boom add them to the players array that's what we're doing all right so now what's special about this function and why we're calling payable right here is because this function by doing payable here means you can actually kind of quote unquote pay this function okay when you call this function you could enter and you could literally pass it like to eth so think of it like that you're almost calling the function you can pass it a certain amount of eth and that ether you pass this function it will actually store that inside of the contract address okay so the contract address so think of the contract address like just another wallet just like kind of how you have a wallet contract address kind of has a built-in wallet and so the money is going into the contract pool okay so that's how the money is going uh into the pool and then we just make sure that the message value right is greater than 0.1 ether and then if it is we go great we add that to our players array that we created up at the top and we want to make sure it's payable so that whoever entered the player's array is a payable address okay so that way we can pay them out later one thing to note here is if you didn't have the word payable here you wouldn't be able to require message.value okay all right so that is that is the you know the heart of that enter function now let's go ahead and test it out so by the way here's a really cool thing about remix right look at that it just gives us so many accounts and all of them have a hundred ether in it so you don't have to go to a faucet get ether in your wallet do all this garbage you just have it here right away ready to go so that makes our lives very easy okay let's go ahead and I'm gonna take this account the 0x5 B3 account and with that account I'm going to go ahead and deploy this smart contract so let's go ahead and hit deploy now you'll notice that when it deployed it took some amount of ether out of my account to be able to deploy okay now the smart contract is deployed now we have this function enter and we'll try to run this function enter I just tried to run it do you notice what just happened right when I try to run it I got into this error over here and this error basically saying hey you don't have more than 0.1 ether okay so we need to actually send it some money before we can run it so we got this error and we're not very happy right because you don't like when you get errors but this happened because we're not giving it more than 0.1 ether equal to or more than so what I'm going to do here is I'm going to go grab value and sometimes this is a little buggy in remix IDE so just command a like select it and then hit delete backspace and then you can like hit one or something or hit the arrow at the top and then it'll actually increment the value so sometimes this bugs out make sure you get the one there and then change it to Ether once you're done doing that and now go down and hit enter and let's see what happens and boom look at that we were entered into the lottery so let me ask you a question if I pooled one eighth and I entered into the lottery What's the total Lottery pool right now I'll give you five seconds to try to answer this five four three two one I really hope you said one okay I really hope you did because it's one person and one person entered with one eth so we have one total pool okay great I'll ask you this question again when another person and and enters so keep your answer ready I'm gonna go ahead and choose a different account so I'm gonna choose the zero x a B8 account with a hundred ether because I'm a big boy we're gonna scroll down and I'm gonna hit enter and let's see what happens I got an error because I didn't add any value I didn't pull any money so let's go ahead and pull it I'm gonna go one and then let's click enter there we go we just entered it with one eth okay so now the total amount of the pool is two eth okay now let's go ahead and grab all the players that are currently entered so we can see their wallet addresses all right so forget players I'm going to write this function it's going to be called surprise surprise get players and it's going to be just a public view meaning it doesn't really do anything it just shows stuff what we're going to be returning here is a array of payable addresses and just write memory because otherwise you're going to get an error and at the bottom I want to say return players okay so we're going to return players that's all it does those are the players that we're going to be returning that we initialized and you know at the top okay great so now that this function is made let's go ahead and kind of re-enter so we're going to delete the smart contract that we previously had because we're going to need to redeploy this new smart contract because we just made changes to it so I'm going to choose my 0x5b wallet to deploy it with we just deployed the smart contract it it is deployed let's click it so it expands and here I have my get players function as you can see I have an array of addresses that is currently empty and it's a zero because there are no players in the pool right now right now I'm going to go ahead and enter with one eth with my you know the owner the owner is going to come in and enter it's like the dude who owned the basketball team right jumps down and starts playing with Steph Curry you know and uh they're team members so that's what's Happening Here the guy who created the lottery is playing the lottery a little conflict of interest there but it's fine now I'm going to choose a second address and hit enter okay with the one eth now we got two players okay let's see who um and yeah when I hit players right boom we could see the two players are showing up so this function get players is working perfectly that is amazing now we're going to write a new function called get balance and it will get the balance of the pool aka the balance of the contract address so if it has to eat it needs to show to eth so what we're going to say is return address this dot balance why am I writing the keyword this this refers to this specific contract address the contract it refers to this contract the one you're writing okay so it'll return the balance that this contract has that's how we get it now let's delete our contract let's go back to our Xerox 5B account which won't be called Xerox 5B on yours because it'll probably be something different right we all get different addresses with different you know with 100 eth in it um let's go and hit deploy again so you can see you have a bunch of deploy you have your deployed contract and now you can see to get balance which I saw nicely hovered over for you then we are going to let's see then we're going to put in one eth into the pool let's hit enter so I joined with one eighth so the owner jumped in again with one eth and let's go and see what happens when this other guy jumps in with one eighth let's hit enter so now two people have jumped in with one eighth let me ask you a question currently what's the pool size how much eth is in there I'll give you five seconds five four three two one I hope that you said to eat because one plus one is two okay if you didn't get that right you my friend have much bigger problems than learning blockchain okay so I'm I would be really worried if you didn't get that answer right you look yourself in the mirror and oh yeah okay so it's showing that we have two eth but it's showing like two trillion or two billion each and the reason why it's doing that most likely is because it's showing that in way okay yeah so away is like a very small unit right ways like if think of way as you have sense think of eth as dollars you have dollars and then you have cents but something even smaller than ascent because like you know just to expand on this analogy right one dollar is a hundred cents so an eighth might be a hundred way even though one eighth is way bigger than a hundred weights way bigger there you go and now I'm writing a comment for you letting you know that solidity Works in way so it's written out and extremely obvious to you so you just have no chance of missing that piece of information now we're going to get lottery ID and I'm going to create this function it will be called get lottery ID and this will be a very simple function so it's going to be public view returns and we're going to return an integer and we're going to if you see uint it just means an unsigned integer and that means it could be negative or positive but literally whenever I say int just thank you and keep your life easy and then we're going to go ahead and do return Lottery ID so very very simple because we have made this variable up at the top here on line nine and we're simply returning it on line 36. so in order to test this get lottery ID we need to delete our current smart contract we need to go back and then we're going to deploy our smart contract so let's hit deploy it's been deployed successfully you can see at the bottom it's there and now you can click get lottery ID and it shows you that the current lottery ID is zero which makes sense because in the Constructor we defined it to be zero right boom there we go hand in the brain we defined it to be zero okay perfect now we'll make a new function and this will allow us to get a random number this is going to be a helper function for picking a winner so I'm going to create this function and we're going to say get random number and it's just going to be a public view it's not going to mutate any data so it's not going to cost us anything okay and it's going to return an integer and it's going to return a random number and what we'll do so I'm going to get so caccac is going 256 is going to help us generate a random number and to be technically accurate it's going to be a pseudo random number which you know if a really professional hacker tried to destroy your app or hack your app that probably could so if you're work building a production you know app and you need this random number to be truly random then you should look into chain link and how you could set this up with them okay I wouldn't try to do this yourself using sudo code okay so we got yeah so we're gonna go ahead and we're gonna take the ABI and we're gonna say in code pact we're going to pass it the owner of the smart contract and then we're going to give it a block.time stamp so we're just going to give it some unique pieces of information like the owner and the time stamp and we're hoping that that information when we give it to it it'll encode it it'll use the algorithm Keck 256 to kind of scramble it and then we'll call integer on it because we'll and at that point we'll assume it'll give us somewhat of a random looking number would would you know fairly weird obfuscated information that we're giving it so that's how we create a random number I wish they just had math.random because this is ridiculous right but we're early so we got to pay the price for being this early um all right let's go ahead and delete our smart contract that we had deployed and now we're gonna pick a winner that's that's what we're going to be doing okay but let's go ahead and test or get random number first so I'm going to deploy our smart contract let's go down and you can see get random number it functions right there let's click it let's see if anything happens whoa something did happen it gave us this massive random number I mean that would have been crazy can you imagine if I asked you to guess that number how screwed you would have been holy but Jesus that is an insane number to guess so for us I mean you know the pseudo-random number is pretty darn good okay Keck hack is doing something useful okay let's go ahead and write this pick winner function and I'm going to call it pick winner it's going to be public we're going to require that the person who can pick the winner is the owner nobody outside of the owner should be allowed to pick the winner and even the owner will get to pick the winner randomly so that's what we're doing require and we want to say hey make sure that the current logged in metamask user AKA message.sender you know or whatever wallet you're using is the owner of the address okay and I believe we assigned the owner when the Constructor happened right when the when we when we deploy the smart contract and then we're going to create a random index using the get random number function we made and then we're going to do module players dot length and here's what's happening here okay let's say you have you know you have uh five players or two players Ryu and you have Ken okay from Street Fighter get random index whenever you run this function it'll either get you zero or one or zero or one okay literally just those out of those two numbers it'll randomly pick between those two now let's say that you had also Zangief now this random number will get you a number between 0 1 and 2 randomly between these Okay so that part of how so remember how get random number was giving you this big giant number well you might be thinking how the heck is going is that going to give us a index number like zero one or two how is it doing that that is the magic of this modulo players.length operator is very nice and modulo allows us it's a remainder okay that's what it technically mathematically speaking module is just a remainder so if you did three divided by two you'd get a remainder of one but another way to think about is this allows you to wrap around whatever you give it so if you give it like two or number three right then effectively you're taking this giant number you're dividing it by three and you'll have some remainder left over there'll be always between zero one or two so that's the trick we're doing here the way I like to think about it is if I give it three it'll always wrap around give me between zero one and two it'll always always do that if I give it a module like module allows me to wrap things around okay whatever mental framework you want to use to understand that that's fine but but at a higher level if we ignore all this nerdy crap just know that random index gives you between 0 1 and 2 or whatever the length of that array players array is so if that player array is a hundred items in there or 100 players in there playing the lottery then it will be between 0 to 99 and they'll pick a number between um you know that entire range of zero through 99 okay all right and then we're going to grab the Rand a random player and transfer them the funds of this contract so remember address this dot balance okay all right so there we go this allows us to take the funds from our contract address okay so let's say that we have this our big pool right and it has all of the Monies then we have this like array of players right player one player two player three we randomly select let's say this player three right and then because of this here dot transfer we are able to take that player three right and and let's say that they have they're a real person they're very happy then we send them the funds okay that's this is what's happening guys There's real live stuff happening you're changing people's lives writing this code so don't just think of it like random nerdy math numbers somebody will be able to use this one day and get money in the bank account and then you know they can provide for their little tiny children or much smaller than them this is not to scale but yeah because that would be a huge face right if you're a little child I was six years old was smaller than your face that would have been that would be crazy um unless you're Shaquille O'Neal so now we're gonna go and uh grab the winners and push the player that was the winner okay so the the the person that we chose to win we're going to push that winner onto the array so you know and in other words this part over here players random index okay this weird looking code that just really means winner okay and so all we're doing here is we're just pushing that winner okay that's what's happening hopefully that's not too scary or weird or freaky what the heck is this okay whatever I don't know maybe I maybe I'll use it one day for something but for now let's keep going all right now we have Lottery ID and what I want to do is every single time you've picked the winner well at that point essentially the lottery is done the current lottery is done so when the current lottery is done at that so at that point I think we should increment the lottery ID by one because now you know you're technically on the second Lottery because the first Lottery is over people have been paid out got their money and Life's good and last thing we want to do is remember that players array we had like the current active players that were playing the lottery well we need to clear that array so we're going to write this function it's going to allow us to do that so imagine you had this array with player one comma player two but this function is not going to allow you to do is really just turn it into an empty array that's all okay and not function but we're just going to take our variable players that we had initially written and we're going to just reassign it and give it a new definition and we're just going to say hey become an empty array I wish solidity could just make it easy for you okay what we're really writing here before I write it and and freaks you out here's what we're really writing players equals MTR rate that is it okay in JavaScript that is what you would do and you would move on in solidity they want you to just go through a lot of pain and uh be super verbose with what you're doing but I understand why to make your code less error prone you know add and type safety increases the speed I understand but it's still kind of annoying from a developer experience perspective so that's all you're doing here you're just saying hey players should be a new thing and it should be a array of address payables and currently it's at size zero meaning it's just currently empty we're making it empty okay great okay now let's go ahead and play with this new function that we made so let's deploy the smart contract let's go make sure that it's deployed and it's showing us and you can see we have pick winner looking orange looking really nice all right so I just want to kind of take a quick pause here and explain what's what are what what the heck is that I just explain what all of this is right why are these blue so what does blue mean why is that one orange what does that mean okay and and then red so blue means these are our getters these are just your public view functions that don't change any data don't change anything rather they return something okay so these are our getters and then orange are our setters that is where you're changing data and mutating data AKA like we're mutating and we're changing the definition of the word players we're mutating winners because we're adding a player to the Winner's array we're taking laundry idea and we're incrementing it by one so there's a lot of mutation happening and then this red over here it's a legendary weapon orange for to me used to mean a legendary weapon in the game Borderlands so orange is a very special color but that's not what it means here okay and then red here means it's a payable uh it's there's some payment action money stuff is happening okay that's that's as far as I know when I find out new information I'll let you know so the color coding kind of makes it nice you could look at it visually and know kind of what's Happening all right now we're gonna try this okay so let's go ahead and deploy this smart contract uh or sorry we've deployed it but let's enter it with one eth as our you know as an owner and then I'm going to go to another uh pick another wallet and I'm going to put in one eighth here and I'm going to go ahead and enter as well so now I've entered here so the pool size now should be two eth and okay actually let's go and enter with the third person account as well so let's hit enter and now we have three people in the pool so that's pretty good let's do get players and look at that we have three players it's kind of hard to tell but it's three players all right so there we go let's hit get balance and take a look at that right Lottery idea is zero balance is three eighth okay this is in way so obviously it's gonna be like crazy right because this is the sense incense and ether ethereum is dollar this is going to be a way bigger number here is all of the addresses right so these are three addresses so here you see the one comma and then two commas right so that means one address two addresses three addresses so three players are in three is the eighth and we will now be picking the winner so let's go ahead and pick the winner soon okay now notice that I'm on the smart uh notice that I'm on a wallet that is not the owner remember the owner was the first one we used okay the owner was a zero x5b3 one but I'm not on that I'm not on the owner so remember our smart contract says if you're not the owner you should not be able to pick the winner so let's see if we can pick the winner so I'm going to go down and I'm gonna go and try to hit um pick winner and notice right when I clicked pick winner I actually got an error at the bottom this error means that I'm not the owner so it's not allowing me to pick it remember for a pick winner you can see only the owner of contract can pick winner that's what line 47 is saying so I'm going to go up at the top and change my wallet address to the owner of this smart contract that was deployed now let's go down now let's pick winner and boom look at that we see that green tick mark and that means we were able to select the we were able to pick a winner now notice that when I say get players there are no players there's zero players empty and that makes sense because we on line 54 of our code after the lottery winner has been picked we set the players to be an empty array if you get the lottery ID well look now it's a lottery ID one so that's really cool and when I hit get balance balance is zero because there's no more money in the pool all of the winner has been picked and that winner got all of the eighth okay next up we're going to make a function that's going to be called get winners and this way we'll see who won get winners will be you know we'll do a re public view returns here it's going to be an address of winners all right there you go so now we're just gonna return winners so it's going to be an address you know it's going to be in a address of arrays and you could see an array of addresses I'm sorry what the heck and that's what winners is that's what we're returning and so you could see on line 59 we're just returning the winners okay when we created that variable earlier all right and let's go delete that smart contract we need to deploy a new smart contract well because we made changes to it it's a different one than that deployed one let's go and go to Xerox five I mean for you it's going to be something different right but I'm gonna go to that account and I'm gonna hit deploy so the smart contract has been deployed I'm going to pick one ether and I'm going to come to my deployed contracts and I'm going to enter the lottery and I'll pick another account and I'll also put in one ether and I will enter the lottery and I'll pick a third account put one ether enter the lottery once I've entered the lottery I'll get players you can see it's three players right now I will say get winners there's no winners you could see the array of addresses is empty and Lottery is currently zero now we're going to go to the owner because only the owner could pick the winner so I'm going to say pick winner the winner has been selected great now let's go ahead and get players players are empty because now the lottery is over let's check get winners and look at that guess who won the game is rigged boys and girls that's why I told you don't let the owner hop into the lottery it is it's just gonna be a massacre right the owner of course wins because it's it's rigged and it's pseudo-random you know hell yeah pseudo random right the owner always wins that's what happens so lessons to learn right it's a huge conflict of interest the dude who made the lottery don't let them jump into the lottery but yeah um there you go owner was picked and oh wow what a coincidence check who the owner is the owner is the same dude that freaking won okay there we go all right uh yeah very good so with that said you are done essentially with the smart contract part how does it feel do you feel special because you should feel very special this is a huge task that you just completed and this was awesome I think I hope you had as much fun as I had going through it with you and picking up these things and sharing these with you I think it's just so cool like this part of web3 is pretty cool and I think um yeah I hope you learn anyways we're now going to take this smart contract that you built and start bringing it into our development environment inside of you know whatever you're using visual studio code or whatever ID you use to code we're going to bring it in there so then our entire app could build off of this but I like this flow a lot build on something like remix IDE so you have that iterative instant feedback loop so you can keep iteratively building building building building once you're done building the smart contract bring that back into your app cool with that said let's continue all right so now what we want to do is I want to take all of this and move it into my coding environment so I'm going to copy the whole damn thing okay darn thing let's copy it let's go back to our app and inside of my app I'm going to make a new folder at a global level and I want to call it my back end AKA my blockchain AKA my smart contract part okay because we don't have a real you know traditional back end as in Firebase or super bass or you know mongodb or MySQL or postgres or whatever in this case our backend is going to be the blockchain that's where we're storing our data and running our app from so let's go to our command line now and I'm going to CD into our backend folder now first thing we want to do all right so I have this blockchain part now I want to do Truffle in it however most likely you on your computer might not have it installed okay um and maybe I might not even have it installed so first thing we want to do is make sure we install it so let's go ahead and do npmi down G okay I'll just zoom in here so you could see the command that I'm actually typing and I know my mouse is blocking this but it's a dash G okay and then we're gonna do truffle okay and then I want you to go ahead and hit enter and it will and start installing it okay there we go so let's go ahead install truffle all right it's doing its thing it's installing all of the dependencies that truffle comes with truffle is very very helpful in developing and deploying smart contracts makes our lives very easy hey let's go and install this once it's done installing I'm gonna now say Truffle in it make sure you're in the back end folder very important make sure you're in the backend folder hit truffle init and once you do that it will go ahead and scaffold an empty project for you so now you can see that you have contracts migrations tests truffle all of that stuff now in your migrations you have no migrations okay in your contracts you have no contracts you'll have to start by creating a smart contract so we'll hit new file we'll call it lottery.sol and now we're going to go to our remix IDE we're going to grab that contract address that we had gotten so let's go ahead select everything and let's go and copy it and we're going to bring it and we're going to paste it inside of our vs code lottery.sol file so now we have access to it on you know inside of our project let's go to the migrations we're going to hit new file and I'm going to say one underscore deploy.js and inside of this what I want to do is I want to say cons Lottery and I want to say artifacts that require Lottery some of this code is going to be new and weird just write it and you'll start getting used to it okay but don't you don't need to worry too much about understanding this because it's not that important you write it once and then you're done and you can kind of copy and paste it for all your future projects and you should be good okay and we're going to export the following module it's going to be a function that's going to take in a deployer and then we're going to take in whatever we're trying to deploy and we're going to deploy it and pass in our Lottery artifact all you need to understand about that is that piece of thing that we wrote is going to help us deploy our lottery.smart contract and the benefit of deploying it is just like the web 2 deployments it will deploy it to the ethereum network meaning that anybody will be able to actually access it you know almost like it's a website or an API that's publicly available okay that's what a smart contract does now let's go into our truffle config file so I'm going to go and scroll all the way down in my truffle config file so it's this file right here so let's scroll down and I'm I just want to fix the version so version right now is 0.8.16 I'm looking at my English little tiny Bulldog pudgy please baby don't do that her name is pudgy and we're going to change it to 0.8.15 because that's the version we're using and that is it for moving it into your Visual Studio code into your own um you know development environment so at this point you're done doing that next up we're going to set up the Truffle extension let's go now we're going to set up our truffle extension so the first thing you want to do when you're setting up a truffle extension is obviously you need to install truffle from the extensions okay go ahead type in truffle and there you go truffle for vs code now what is truffle it is incredibly powerful software built by consensus and what it allows you to do is in you know basically uh integrate your smart contract with infuria in a very very easy way and deploy to their Network okay and it just makes your smart contract deployment building of it incredibly easy so make sure you're using this for pretty much almost all of your you know solidity projects so at the bottom left click truffle and go into that extension and that error at the bottom if it pops up for you just ignore it it's not important now what you're going to click on is you're going to create a new network so hover on that create a new network and you're going to choose inferior service and then inferior will pop up and it'll ask you to sign in Click sign in and all I want you to do is go ahead and hit authorize at the bottom here so you make sure that you sign in and I'll hide myself so you can see that authorize button okay there we go all right um so let's keep going here okay once you authorize and that was Kevin and me on the call that you saw on Zoom okay all right so let's go here yep so now it will say you are signed in beautiful and you can exit out once you've signed in now at the top here it's going to ask you to put your project name so go ahead and put your project name we're just going to call it all right so I'm going to type in Lottery and then just hit enter once you type that in and then you could choose this project as public fantastic now at the bottom in the networks you see it says Lottery and it's showing us that it's connected to multiple networks on layer 1 and layer 2. and if you go to your infuria dashboard you'll also be able to see this project there now I'm going to go inside of my contract and what I want to do is right click on my lottery.sol and go and choose build contract so there you go build contract so click that and then once you once it starts building it for you just simply wait and go in your vs code and choose truffle for vs code for your outputs you can actually see the output I'm going to drag this up now and we'll wait for it and now it says command finish running so now it's built our smart contract and next after we've built it we're going to deploy it so then click deploy go ahead and choose your project so since we're on the robston one choose inferior Lottery Robson INF underscore Lottery underscore Robson choose that that's going to be your deploy destination okay and now it's going to say hey enter gas price just hit enter so you can leave it as default and here you're going to pop in your mnemonic okay so hopefully you've copied your mnemonic from earlier remember when you made your wallet yeah that if you didn't do that go ahead and create a brand you know either find a mnemonic for an existing wallet that you have or create a new wallet and grab that while it's mnemonic this is going to be very important and then paste that mnemonic here once you paste that mnemonic it's going to ask you to save and I want you to just save it as you know kind of wherever you want to save it it doesn't really matter I'm going to save it on my account in desktop and I'm just going to call it key dot ends it's really just short for Kevin and then wait for it to deploy at the bottom it's loading okay deploying takes a little bit of time so we're going to keep waiting for the deployment boom there we go it says deploy succeeded finished running command now grab that contract address that we got from our deployment copy that and now you can go over into you know we're create a new folder and we'll call this utils at the top level make this folder inside of it we're going to put a new file and it's going to be constance.js and inside of this file we can say export cons contract and we can say contract address and then boom we can paste that contract address okay that we copied there we go now our app will have access to this contract address now go into your back end go into your build and grab lottery.json and copy it then go in utils and paste that file so now we just pasted launcher.json and while we're doing this is because we will need access to our Abi and this has the entire ABI in there okay now we're also going to import in our constants file we're going to import our ABI from Lottery Json and then we're going to export that API yeah as well so now we're just going to do export cost contract API and we're just going to say abi.abi that should do the trick with that said we're all set up our front end now is plugged in and connected to our smart contract and backend we have access to everything now we're going to start creating the lottery from react and start doing the front end stuff okay let's get to it now let's go ahead and actually factually connect our back end and front end okay up until now we kind of pull that information a contract address now we'll actually like create a lottery helper function that connects it let's go into utils I'll create a new file we'll call this file Lottery contract.js and in here I want to do the following I want to import my contract address and my contract ABI from the Lord from my constants okay because my constants have access to all of this information once I have access to that I'm going to create my lottery contract and it will be doing in the following way okay we'll say hey return to me a new web3 eth contract and you're going to take in the contract API and you're going to take in the contract address and with that said that is it so with this thing that we've made now we'll be able to actually access this in other files and use our Lottery contract and at this point you could add the export but we're going to add the export later and this is just going to be a helper function we'll be able to use throughout our entire app with that said let's move on and let's start working on the actual header in our app all right now we're going to be building the header and here's what it will look like boom boom all right so this is the header that we're gonna be building on the connect wallet button so I'll put it here as just like a reference point that we can use as we continue building so let's go ahead and continue building here all right so I'm going to pop in and I'm going to say header okay and make sure you are in your index.js file and we're going to import header from components header okay then just write down header there okay this is a component we've already made for you inside of if you're going to the components folder you'll see header.js it's pretty much already built but it does have some to-do's so it does ask you there are things that you're going to need to do in there to add functionality so it says get the connect wallet and address from blah blah and then on line eight it has another to do replace a static address so we've added these to-do's for you to make your life easier and then we have context as well so here's our context.js file so so let's go ahead and work inside of our context file and we're going to keep track of the user's address we also will want to add functionality for connect wallet so the user could log in and it's going to be an async function and we're going to say if the window is undefined okay and window ethereum is undefined so meaning that you know you're not on metamask or whatever and then we'll do else and we'll just say hey please install metamask let's add a try catch in between those if statements and we will try catch it in the following way so we'll have we'll console log the error and then inside of our try we want to request wallet connection and so how we do that is we want to do window.ethereum.request method eth underscore request accounts that'll allow us to request wallet connection okay that's that brings up the little pop-up in metamask and then next up we want to create a web 3 instance so let's do web3 equals new web3 and we want to pull it from window dot ethereum let's go ahead and import web3 from web3 great let's keep track of a couple of other states here so we're going to keep track of a web 3 State and we're going to use that hook right here and we're going to say set web 3 to whatever we defined web3 to be right right above on line 19 and then we want to have accounts and we want to pull all of the accounts from that user's metamask like whatever they connected whatever accounts are connected and we're going to set the address to be the zeroth account like the first account that they selected okay now go to Lottery contract and here I'm going to export default and we're going to export our Lottery contracts so we have access to it outside of our utils file for lottery contract and we're gonna actually you know what rename it let's rename it to create Lottery contract that would be a good renaming for this let's go ahead and set a state here on line 9 and we're going to set a state for lottery contract okay so we can keep track of everything that's happening because the lottery contract can get updated so that's why we need to keep track of the state now in line 24 I want to say set Lottery contract okay to create Lottery contract and we're going to pass it web 3 that we just got and then what we want to do is we want to say hey window.etherium Dot on accounts changed all right and we want to run this async function in here so whenever the accounts change then I want you to get accounts and set the address to account zero so if the user changes their account picks a new account this will do it okay this will automatically update it without necessarily having to even refresh the page or do anything because it's an on change it's kind of a listener here next up what we want to do is in our provider we want to pass this around so we want to pass connect wallet function that we created around so our entire app has access to it and then we want to pass the current address around so our app has access to it okay so let's go to our header function now and inside of our header function you can see it says Hey to do get the connect wallet and address from context so now we're going to go ahead and get that we're going to finish that to do so I'm going to say connect wallet and then address and we'll say use app context okay let's fix the yep address right there remove that address we don't need that and yeah on line 18 we want to say hey if the use your card so you can see on line eight we have a to-do that says replace the static address or the currently logged in user so on line 18 we had a static address and now what we're saying is hey if the there is an address meaning there is a logged in user then I want you to show the user card with the following address otherwise I want you to show the connect wallet button okay so we're going to say address we're going to pass it the address and then for our connect wallet button we'll say hey um yeah made the connect wallet function should be the connect wallet function that we got from the top okay so that's what we're going to pass in as a connect wallet prop okay great so we've made fantastic progress on it so far let's go ahead and hit refresh and there we go our Lottery dap is showing up and now let's see if when we hit connect wallet if it runs okay so it didn't work right now so let's see what's going on so let's go to our connect wallet button component in components and it has a couple of to-do's for us okay so we need to destructure connect wallet because that's what we're passing it and we need that function to run on click okay so let's go ahead and set that up so for the button we're going to give it on click and we're simply going to say hey run the connect wallet function that we wrote when you do on click so as soon as you click that metamask will then pop up okay so that is how we're connecting that functionality and here's our user card component that we have made and we need to destructure the prop the address prop that we gave it okay so that this has access to the address and we need to render the user's address in here so right now we just have some dummy address let's remove that dummy address and let's render the user address in there and we'll just say address just like that okay great now let's go ahead and we'll full screen this so we could see it let's hit connect wallet boom look at that right metamask just opened up we'll type in our password and let's see if this works great it worked and there you go right you can see welcome you could see the current user's wallet address and let's see if it's the actual current user or if it's doing some kind of dummy data thing and look at that 0xa right 0x a it is the current user we'll switch users as a zero um X31 or whatever let's switch to 0x35 Let's refresh right let's connect and look at that right it changed the user to zero x35 and so you could see that this app works completely well with this it's picking up the current logged in User it's changing the state when we hit login connect wallet it changes it to the Welcome State it can change the current active user it has allowed us to bring up metamask and unbring it up and basically it's you know authentication at this point of the app is working so fantastic job if you got to this part now we're going to continue and we're going to start adding in the lottery card so you can enter the lottery let's go all right now let's go and work on the lottery card first thing I need to do is actually write the write out the lottery card component and then you're going to add in all the functionality we're going to add it together so let's go Lottery card right here and we and if you run this we get an error which says Lottery card is not defined what we have to do is we have to import Lottery card so that way we actually have access to it and we're going to import it from components slash Lottery card okay there you go we've already made this component for you now this component is coming in with dummy data it's coming in with dummy data and you can see that we got 10 eighth we got a winner last like who won the lottery last and we can pick our winner so let's go to context.js and inside of our context we want to do the following I want to all right so I'm going to say Lottery pot and we're going to say set Lottery pot so I'm going to keep track of the lottery pot state and we're going to start the state as empty and then we're also going to keep track of the lottery players okay it's going to be an empty in an array of players we're going to also keep track of who won last and yeah okay and then we're gonna keep track of the lottery ID which Lottery are we on are we on lottery 0 1 2 3 4 Etc let's go ahead and now we're going to write our enter Lottery function and I'm going to say enter Lottery this is going to be async and we're going to wrap it in a try catch we're just going to console log the error just a good habit to get into and then in the try what I want to do oh copilot is telling me everything I'm going to grab my lottery contract and I'm going to call the enter Lottery function that I created on the back end okay it's called enter okay and then we're going to send and send is going to take in the following information into account it's going to take in the from address it's going to take in the value and so I'm just going to pass it a very small amount of ether as value because that's what I want to put in the pot okay this is the minimum amount that I could put in the pot and then we're converting it to whey because that's what it wants on the back end all right now for gas we're going to just pick 300 000 or whatever that is um okay so it's going to be gas in Whey or way and then we got the gas price here and gas price is going to be null now we want to also export this function so let's put enter Lottery inside of the app context and now we'll have access to enter lottery in our other files so let's go to our Lottery card and now we get the data needed from Context so now we're dynamically getting all of the data so let's go ahead and import our use app context from context and we will say use app context and we're going to destructure the following properties enter Lottery okay and that's kind of it that's all we need and where we have that enter button happening that's where we want our function to fire off that we just created so I'm going to say on click enter Lottery okay now let's go ahead and try that connect wallet login and then we're going to hit enter and now we should have entered Lottery and let's see what is happening we're currently getting some error that says cannot tell you cannot read from undefined so we're going to import create Lottery contract from okay from where let's see from our utils okay from dot dot slash utils slash and we're going to say Lottery contract okay that's what we're getting it from now let's scroll down and let's say 0.1 ether instead of 0.01 ether for our value that we pass and now let's hit enter so that way we're just passing in a bit more ether into the pot let's hit enter and boom okay that worked let's hit confirm okay let's see what happens so let's take a look at the Smart contract here okay our dummy data of 10 East is still there so that's not going to change but our smart contract looks like it has entered so our enter function worked it didn't fail so that's a great sign and you can see that we put in 0.1 Ross pen here Robinson okay now with that part we're done now we're going to make it so we actually update the lottery pot let's go ahead and do that all right let's go and update our Lottery pot now okay so let's go inside of our context and we're gonna update the lottery card dynamically using our contract okay so that way where it says 10 eighth we need that to update dynamically and not for us to have to manually hard code it and fix it okay so I'm going to make update Lottery function here and this is going to be an async function and I'm going to say hey if the lottery contract exists okay then I want you to create a pot and I want you to go and get me to get pot method and since we're using web3 you got to do dot call to actually call your method okay and then whatever we get from our pot we're going to set Lottery pot to that okay let's use a use effect hook and inside of this use effect hook we're going to make Lottery contract a dependency so whenever our Lottery contract changes our app should you know our use effect hook should fire off and our app should dynamically update and when it does we should update the lottery so then we run the update Lottery function all right now in our context we also need to make sure that we um export Lottery pots or other files have access to it Lottery pot dynamically render the lottery okay so we're going to destructure in Lottery card our Lottery pot as well and where it says 10 eth we're going to dynamically now write Lottery pot there and it's going to pull from our Lottery pot and put that there foreign let's set it to be zero eighth when it starts so now you can see it says zeroes okay I'm going to make it a string and then it will dynamically update once we have something in the pool so let's go ahead and connect wallet hmm interesting okay got dot get pod is not a function all right get pot is not a function so it's let's see it's get balance okay there we go and so we just got the balance and look at that so on our back end right on our smart contract blockchain part it's get balanced that's what the function is so now you can see that when I say get balance I'm getting all of this money in way and so it is a massive massive amount and that's not what we want so we need to actually convert it back into ether so we're going to say web3utils dot from way okay and when you do Dot from way it allows us to convert it back into ether that's the really nice thing about that so it knows that it's getting way all right now let's go ahead and run this and boom that is so clean right now we can see that it's 0.1 eth that's showing up and we'll write the word eth at the end of that there you go now it says 0.1 eighth so now our app is dynamically updating super cool let's now update the lottery ID now we are going to update and render the players so they actually show up on screen when they enter let's go into index.js and we have a to-do here that's very nicely written for us and I'm going to say table all right and this is a table that we've already made for you so import table from components table all right so yeah so we're going to get the table make sure you've also gotten the you know Styles make sure you have the Styles obviously and there we go look at that our table is already showing up at the bottom hey nice oh wait I'm hiding everything so I'm gonna hide myself give me one second here okay I'm gonna hide myself here real quick so you can kind of see it so there we go right we got the player showing up now I'm gonna make myself tinier okay let's go back and let's go inside of our table and here we can actually map we need to map through the players and loop through it so our to-do is telling us bring in the players data from Context so we need to get the players data so let's go inside of our contacts and get access to all of the players all right so in update Lottery I'm going to also write a player's method um and I'm going to say hey set the players to and let's go talk to our back end or blockchain part so I'm going to say going to the lottery contract going to the methods grab the get players method and call it and whatever that returns let's set that as our player so it's going to return an array let's set that array as our Lottery players okay and we can even console log this out so you could see it here all right there you go at the bottom you can see that we got an array of players it only had one item in that array and you could see that we had this guy right there okay and that's the guy that's currently actually logged in so it is working all right now let's go ahead and Export Lottery players in our provider so that we have access to another files right and now let's go to our table.js and I'm going to basically say inside of the loop here okay or inside of uh the div there but first i'm gonna pull my data from my context all right so let's say use app context and we're going to destructure Lottery players okay that's the one that we're destructuring there and now I'm just going to say hey in players row just show Lottery players okay let's do that we're going to say hey if La if Lottery players exist then I want you to Loop through those players and show me those players okay create a table Row from each of them and then show them to me and we're just going to make index the key for player we're just going to pass in the player okay that's it but if they don't exist and obviously just show me dummy data okay or don't show me anything at all so we're going to say style of no players and we'll send no players yet now when we run this you could see that it's actually already dynamically pulling in user information because you could see this is the guy right there and you can see 0xa1 f a blah blah blah so if this is working perfectly let's go inside of table row and you can see that we're destructuring the player and we're truncating that player's address okay that's what's shortening that address right so you can see that address is being shortened right there that's how that's happening okay it's because we have that function truncate that we're calling on it okay now let's say we change our wallet address and see what happens boom okay let's go ahead and hit reject there cool all right you can see we have 0.1 eighth and you could see our user address is still 0xa because that's the player that's that has actually entered 0x35 has never entered this dap it's Lottery okay but now let's say that we do enter let's see what happens now so I'm going to hit confirm okay we'll speed this up I'll just put in high gas prices so I could speed it up and looks like it went through now we'll refresh the page and boom there you go all of the players are showing up and they are being rendered dynamically how freaking cool is that so with that said we're pretty much done with that part just remove the part where it says you know 0.015 eth and we just hard coded it to 0.1 eth so right here we could hard code it with 0.1 each because in this app the only pool like the only amount you can enter with is 0.1 eighth so we know guarantee the 0.1 need so I don't need to pull data dynamically I can just hard code 0.1 each here and be accurate because you can't do more or less than that okay so with that said we're done with this part now we're on to the last and most exciting part which is we gotta pick our winner so let's go all right time to pick the winner so here we go let's go into our Lottery card here you can see I have my pick winner okay so we need to add functionality for this let's go into context JS first we're going to write our function pick winner that allows us to pick our winner let me put a little space after my comments because I'm a professional and then we're gonna say hey pick winner function is going to be an async all right so here basically what we're gonna do is I'm gonna write a simple try catch and obviously it's console logger error and then in my try catch I want to say I want to Define my transaction and I want to go into my lottery contract and I want to pick the winner okay and I need to send so to pick the winner I need to send it the from address I need to send it the gas and all the other things that it needs okay so we're just going to pick 300 000 way gas price is going to be null and that's that's it okay pick winner is going to pick randomly and the reason why it needs the from address is remember it's checking for if you are the owner if you're not the owner then it won't work all right and then what we want to do is once we get the winner we want to update the lottery okay so we want to actually at this point we want to first update the lottery okay so we want to run or update Lottery function and that way it will automatically update all of the data on our Lottery card you know the current wallet address the current users Etc let's export this pick winner function so other files have access to it let's go to our Lottery card and here I'm going to get access to this okay so let's go ahead and destructure pick winner and then we're gonna go ahead and do on click pick winner okay there we go so now we entered our on click we gave our on click the pick winner so let's go and now choose pick winner and we'll soon see what happens okay and let's also update the wallet address for our last winner so we're gonna you know create that function too at some point okay so let's go ahead and set the last winner to be whoever the last winner was so luckily in our blockchain we've already made that smart contract and so I'm going to go to my lottery contract and the methods and I'm going to extract my get winners all right so we are getting our we're calling our get winners method from our smart contract which gets us all of the winners and then from here what we want to do is we want to extract the last one it's going to be an array so let's go ahead and console log this and we're going to console log um our last winner so let's go ahead and do that and let's make it an array so let's go to on line 12 and let's make it a empty array by default all right now let's log in so now everything got updated right right when I logged in all the users got updated Etc and let's see if the last winner is showing up so I'm gonna go here we're going to look at our console and you can see on the right hand side that right now it says length is zero okay so so right now we since we haven't picked a winner it's just saying zero but once we picked it pick a winner it's going to show an array of who won last okay so let's go ahead and do last winner here okay and I'm just gonna write last winner there okay and so yeah let's take a look at it and now we can see that it's showing us an array of people those are players right the array that you're seeing with the actual wallet addresses those are actual players but the one where you're seeing empty that's where it's a winner and it's because nobody has a one yet so we're gonna need to run our one pick winner function first and then it'll tell us so let's go ahead to our Lottery card and we're going to dynamically render the last winner as that note says because right now it's hard coded so let's go and grab our last winner so we're gonna say on line 23 actually first let's destructure our last winner so we have access to it we'll go in our context and we'll make sure we're exporting our last winner okay and then we want to do the following we want to say hey if the last winner is there then show all of this div and everything that's happening underneath okay so I'm going to say not last winner okay so if basically so if last Runner does not exist then I want you to do the following if it doesn't exist then I want you to create a div with uh we're going to say style.winner and here we're just going to say no winner yet and then if it does exist then I'm going to do the whole winner thing Okay cool so let's see what's happening here so if there is a winner then I want you to if there's no winner then I don't wanna I want you to say no winner yet if there is a winner then I want you to show uh a address okay show the the Winner's address now here you can see it says no winners yet that is perfect okay that is what we want when we're doing this right now now I'm going to click pick winner and make sure you're the owner account when you say pick winner and then I want you to go ahead and hit confirm okay and let's see we're still waiting let's see let's speed it up for pick winner I'm gonna put High money into it speeding and speeding it up ah it failed so let's see why it happened ah because I was not the owner right that's why it failed now I'm the owner now let's pick and let's see what happens so I'm going to hit confirm here and then we're gonna see if we can speed up the contract addresses let's speed them up let's put it on high perfect Boom the winner is picked let's go and now you can see user address is empty because new the player players are now wiped out because the last lottery is over right now we're in a new lotteries that makes sense why I got wiped out now for last winners it shows us a hard coded thing it's saying the Pod is zero so that's good okay lottery number incremented by one however our last winner okay it says no winner yet sorry actually it says we have zero x one two three blah blah blah so it's not showing us who the actual last winner was we need to update that because we have left it hard coded remember so we need to go and fix that on line 29 okay we're going to take that wallet address and we're going to replace it with the actual winner so yep okay there we go that's our last winner we're exporting our last winner as well now let's go here okay we have access to our last winner so all I'm going to do is I'm going to replace all of that and I'm going to say last winner okay and it says address match is not a function okay so since it's an array we're going to go ahead and say last winner and I'm going to get the last item from that array okay so all I'm doing here is I'm getting the last item from that array so let's say I have 10 winners well since I want to get the most recent winner I'm going to grab the last element out of that array okay and to just kind of visually see it for yourself it's like if I have David Kevin and if I want to get the last winner here well I want to be able to do you know let's say that this is called winners I want to be able to do winners and get me cozy so I want to do winners of two okay in other words I want to do winners of dot length because dot length and actually I want to do length minus one right because that'll actually get me the last possible item so if I do winners.length I get three I subtract 1 I get two this whole thing turns to two winners of two is cozy okay since we start at zero one two yeah okay so I'm going to write that then let's go ahead and do -1 okay great now let's connect wallet and there we go our last winner the actual factual person now one is now showing up how beautiful is that let's click enter to enter the lottery so now we're basically doing the last final demo run and let's test if this whole thing works okay let's click enter all right I'm gonna speed it up speed it up speed it up speed it up there we go okay so now it looks like I have entered successfully it did cost me some robston to do that because I pulled the money let's refresh and you can see 0.1 eth is there and you can see the new user is showing up there at the bottom beautiful then let's go ahead into our metamask I'm going to switch my account to a different account and inside of this account I will hit enter okay let's go ahead and hit confirm all right and once I hit confirm here let's wait for it we'll speed it up okay let's speed it up speed it up and then we'll hit save and it looks like I have entered with that one as well so let's refresh the pool size the pot size is 0.2 each both of the users that are current players are showing up as players and then we got our last winner showing up as well so this is amazing so far you guys now we have to switch to the owner of the contract smart contract address and then we gotta go and pick our win okay once you are the owner and then you go ahead and pick winner now we'll just wait and wait for that bad boy to speed up okay let's pick the high highest gas price possible speed it up speed it up speed it up speed it up and let's see what happens boom look at that right all the players got wiped because the lottery is successfully over the number for the lottery ID at the top incremented automatically the last winner was updated to whoever won and always remember whenever the owner jumps into the lottery I mean the chances of the owner winning are massive yeah the game is rigged so be careful letting the owner jump into the lottery all right with that said I hope that you enjoyed this so very much as much as I did make sure if you did Smash that like button subscribe to the channel if you haven't already and with that said I hope you enjoyed it put on your portfolio show it off to people and good luck in your web 3 Journey this is qazi I love your beautiful face and as always I'll see you in the next videowelcome to another web 3 slash blockchain project that we're going to be building using infuria this project is going to be a lottery dab now there are gaming companies out there like crypto games using something similar the point of this is you have multiple users enter each of who pays in ethereum a certain amount in the pot and at the end you pick a winner and you randomly select the winner and that Winner Takes the entire pot but we're just gonna have fun with it and learn web 3 by building this lottery app now let's go ahead and kind of demo what the app looks like so here's the app I'm going to I currently have no players inside here right you can see that I have zero players at the bottom so I'm going to go ahead and with one of my accounts I'm going to enter this okay and then we're gonna add in uh one person okay and so I'm going to log in here cool and now we have one person and I'm gonna enter with that account cool so let's go ahead and do that I'm gonna enter boom I'm in and now let's go ahead we're gonna speed up through this process so we can go faster I'll just pay higher gas fee now I have entered as a user and you can see at the bottom that I'm inside now I'm going to enter with a second account so let's go ahead repeat the same exact process and we'll enter it all right now we're gonna enter a second user so I'm gonna go ahead to my metamask I'm gonna speed up and do the same thing and Boom at the bottom you can see that the second user has been added to this Lottery and each of them added Point fifteen point zero one five eighth to the lottery and at the end of this what you'll notice is we have a winner and that winner which is this account right over here he won all of that is okay so that's how this will work next up what we need to do is we need to sign up for infuria and the reason why we need to do that is so we can actually build this app it's going to be completely free and it's going to allow you to build your web3 app and scale it as much as you want so I want you to go to the URL in the description below okay we've given it to you you'll get to this landing page of inferior and then just hit sign up at the top once you do that just make sure you create an account under get started for free pop in your email and your password and once you're done doing that it's going to ask you to verify it then just simply go ahead verify your account and then it'll take you to this next page okay Pick Your Role Etc which organization you can pretty much pick whatever you want hit submit for the network we're going to choose the web3 API formerly ethereum and for name we're going to say production and then just hit submit okay once you're done with that it's going to bring you to this page at this this point this is where you are you can take a look around but your job here is done you don't really need to do anything else with that said we're going to continue and next up work on installing metamask now we're going to go ahead and install metamask if you already know how to install and use it just skip this part timestamps for below I'm going to keep going so go to metamask on Google find it as a Chrome extension hit add to Chrome and what you want to do after you add it to Chrome is just hit agree with everything so it takes you to the next part and this is the important thing that I need you to do once you are on this page where it says new to metamask do not pick no I already have a secret recovery phrase choose yes let's get set up create a wallet there and then pop in your password and the important thing we're going to really need is this mnemonic phrase that it gives you AKA or secret recovery phrase this is the important part because in this app in this app that you're going to be building you're are going to need access to this so make sure if you already have an existing account make sure you have the secret recovery phrase if you don't have a secret recovery phrase or you forgot it just make a new account right now okay and then follow along that way it's going to ask you to confirm your secret security phrase and then it's going to ask you to safely store it somewhere then in your account you're going to notice that you don't have any other accounts like any other networks you only have the ethereum mainnet so what you want to do in that case is you want to go to you want to click where it says show slash High test networks and go to your advanced settings and in there you want to say show test Network so make sure that's turned on and make sure the show conversion on test networks is also turned on and now when you hit X and you hit your networks you can see that all these other test networks are there like Robson and Gorly Etc alright so type in robsten faucet because what we want to do is we want to get some free robsten which is essentially ether okay and that's how you're going to be able to play with this app and do stuff with this app so go to disrupts and test that faucet go ahead to your metamask and you can pin it just like I did here right click and copy the account address and paste this account address and say give me robsten eth it's going to give you the Robson eth you could see that we got 10 Robson eighth right here now I do want to highlight something here you will see Robson will shut down in Q4 okay so it's going to be shutting down soon but what we're showing you here is just as easy to do with the gwirly test Network as you can do with robston so you could follow along and you could just do it with quarterly okay so yeah so if you're watching this after 2022 just do that you should be fine with that said we're going to keep going and now we get to the coding part now open up your command line and we're just gonna go ahead and get your entire project set up some key notes that I want to show you is I want you to go ahead and do into your GitHub folder or wherever you store all of your stuff and then I want you to use npx clever programmer now before I continue the benefit of doing this way is we are giving you all of the assets for you know just giving it away for you okay so you're gonna have access to all of the assets you will have access to the styling of this app you will have access to the components inside of this app and you know majority of front end you'll get access to okay which you won't get access to are things like blockchain and smart contract because in this project I don't want to focus so much on the front end part otherwise this tutorial would be 9 hours 10 hours long we want to focus more on the interesting aspects of this project which are it's the smart contract the blockchain parts so that's what we're going to be focusing on more and we're giving away a lot of this and if you do npx clever programmer you'll automatically get access to all of these things for this project for this Lottery dap okay so we're making your life a lot easier so do npx clever programmer at latest and then it will install it globally and then just go ahead pop in your email and what you want to do after you put in your email is It'll ask you for your name and then simply go ahead and choose the project so here I want you to go ahead and choose the lottery app go to that okay select it and then you're just going to hit enter now it's going to initialize your project it's going to give you the front end right it's going to install all of the dependencies and it's also going to tell you to smash that like button while you wait so go ahead do that right now while it's loading it also automatically there's a fancy thing that we've added to it it automatically opens up your Visual Studio code if it gives you an error there or doesn't work for you somehow just go there and open up this folder inside of your Visual Studio code and there you go there's your project your lottery app there you go okay this is your starter now all I want you to do is go ahead and do yarn Dev and it should open it up on your right hand side or just open it up in Chrome on your Local Host 3000 okay and uh just get to the part where your app is up and running okay so there you go that is the starter okay if it doesn't error out it's telling you that hey this is working all the styling is here and everything is here and this blank page here with this color that's a good sign that means your starter is completely working so good job and with that said we're gonna go ahead and continue building all right now what I want to show you is that at any given time I don't want you to get stuck all right I do not want you to get stuck so what we have done for you is this thing that you got from npx clever programmer if you're a more advanced user you are sitting on a branch right now called CLI starter and there's a branch of this project that's called I believe main right the main one the main branch actually has the solution so at any given point you could switch to that branch and get the solution okay this is the branch you're currently on by default because all you did from the CLI tool was clone this repo on your computer okay so let's just walk through it and you could also go to this repository from the link in the description below so it has a solution on there so you could do it that way too just click uh use one of the links in the description below and you can see that we have all of the code right there right I could click into context and I can click context.js and it will give you the entire solution for this project okay so there you go uh this is just a thing that's made available to you to get answers to get unstuck at any given point just wanted to highlight that with that said now we're going to start building these smart contract um and this is going to be a really fun process because we're going to do it step by step so let's go all right now what we're going to do guys is we're gonna go ahead to remix IDE a remix IDE which is a phenomenal online ID if and it's completely free for writing smart contracts and iterating and getting live instant feedback for everything that you're doing so go ahead there okay and start coding online click that and it'll bring you to their page just hit accept cool hit next blah blah blah and then you should be good to go okay uh here you're going to choose a workspace name all right you could call it Lottery we'll call it Lottery dap and then on the left hand side you will see that it populated it with some dummy contracts and stuff like that just to kind of get you started okay so close the scripts tab close the test tab go into contracts and inside of contracts we're going to make a contract and it's going to be called lottery.sol okay so lottery.solidity contract great now that we're doing this let's go ahead on the left hand side and I'm going to click on that third Tab and we're going to choose Auto compile and for the version we're going to choose 0.8.15 plus that's the version let's go back to our lottery.soul and here first of all the first thing we do always is pick the license so we're just going to choose the MIT license for this one we're gonna pick our solidity version at 0.8.15 we're going to create a contract called Lottery and in this contract okay the first things that we're going to create are State and some storage variables that are going to be necessary for us so let's create a owner we're going to need to keep track of our owner let's create also a player's array okay that's where all of our players are going to go inside of let's also go ahead and create a Winner's array and then we're going to go ahead and create a lottery ID which we will keep track of okay and now I'm going to go ahead and explain something special for you okay so for example I told you that these are the variables and variable names here right but I didn't explain to you would address public address payable public is so let's go ahead and do that now address as a special data type in solidity which refers to you know anytime you see a wallet address that's like that that's there's a specific data type for that that's not just a string okay in JavaScript you'll store that as a string but in solidity you store that as an actual data type public here means everybody will have access to these variables meaning that even outside of the smart contract you could access them okay so that's why it's Public Public public so you could make it private as well which would mean that we can't access it from outside but in this case we don't need to do that okay so that's the word public okay so hopefully that handles that situation now what is this uh thing called payable payable means that these contract addresses are put in a way where we can pay them or we can send money to them all right now payable means these are the guys that are uh you know where we can actually send them money okay so that's why this address type is a payable type because any of these players we want to be able able to send them money based on if they won the lottery or not okay that's what's happening there this empty open close uh array that you see over here that basically says that this data type is going to be an array of addresses meaning that they're going to be multiple addresses in here so players variable isn't just going to be like one random zero x dot dot dot address it means it's going to be an array of addresses so it's going to look more like this comma 0x dot dot dot comma 0x0x after you get the idea right with multiple addresses there okay so that's what's happening inside of this array it's going to be an array of addresses then we have array of winners the reason why we're not making this public or sorry uh not making this payable is because they've already won so we don't want to be able to pay them programmatically or at all because they've already gotten the money and then we have Lottery ID which is an integer because it's going to be zero when you know it's the first Lottery then it's going to be one on the second Lottery two on the third Lottery Etc and we'll show you how to do that as well all right let's keep going with this so once I'm done with that we're going to create a Constructor and this Constructor this runs when the contract is deployed okay so let's create a Constructor here we're going to go ahead and say owner is the message sender AKA whoever Crea uh you know created the contract whoever was like logged into their metamask and was the person that created the contract um at the time that the contract was created okay that's gonna be set as the owner so what construction Constructor means that this piece of code is going to run right when this contract is deployed so the very first time this contractor is deployed a contract is deployed it'll run and then this part will never really run ever again it'll only run once when the contract is deployed if you have experience with the react think of it kind of like your kind of like your use um you know your use effect hook where it fires off once the page loads and then if you don't have any dependencies it doesn't fire off again right kind of like that except it just runs once forever even if you refresh the page and we're gonna set the lottery ID to zero because that's what we want to initialize it to be next up we're going to create the enter function so this will be the function that allows a user to really enter the lottery so let's go ahead say function enter and I'm going to set the public function okay and I'll explain why we're saying payable afterwards this function we want to make sure that we require the message value is you need to put in basically what we're seeing here is hey you need to put in more than 0.5 uh one eth okay so if you're gonna if you're gonna put some money in the pool make sure it's more than 0.1 ether because you can't just put like baby money in that right where we're here to play the big boys are here the big boys and the big girls are here I don't want to get canceled like Andrew Tate um so here then once we do that we want to do players.push and we want to push the address of whoever was like the logged in user in metamask whenever you see message.sender think the current logged in user with metamask okay that's the easy way I think about it and so I'm pushing whoever was currently logged in and entered the lottery boom add them to the players array that's what we're doing all right so now what's special about this function and why we're calling payable right here is because this function by doing payable here means you can actually kind of quote unquote pay this function okay when you call this function you could enter and you could literally pass it like to eth so think of it like that you're almost calling the function you can pass it a certain amount of eth and that ether you pass this function it will actually store that inside of the contract address okay so the contract address so think of the contract address like just another wallet just like kind of how you have a wallet contract address kind of has a built-in wallet and so the money is going into the contract pool okay so that's how the money is going uh into the pool and then we just make sure that the message value right is greater than 0.1 ether and then if it is we go great we add that to our players array that we created up at the top and we want to make sure it's payable so that whoever entered the player's array is a payable address okay so that way we can pay them out later one thing to note here is if you didn't have the word payable here you wouldn't be able to require message.value okay all right so that is that is the you know the heart of that enter function now let's go ahead and test it out so by the way here's a really cool thing about remix right look at that it just gives us so many accounts and all of them have a hundred ether in it so you don't have to go to a faucet get ether in your wallet do all this garbage you just have it here right away ready to go so that makes our lives very easy okay let's go ahead and I'm gonna take this account the 0x5 B3 account and with that account I'm going to go ahead and deploy this smart contract so let's go ahead and hit deploy now you'll notice that when it deployed it took some amount of ether out of my account to be able to deploy okay now the smart contract is deployed now we have this function enter and we'll try to run this function enter I just tried to run it do you notice what just happened right when I try to run it I got into this error over here and this error basically saying hey you don't have more than 0.1 ether okay so we need to actually send it some money before we can run it so we got this error and we're not very happy right because you don't like when you get errors but this happened because we're not giving it more than 0.1 ether equal to or more than so what I'm going to do here is I'm going to go grab value and sometimes this is a little buggy in remix IDE so just command a like select it and then hit delete backspace and then you can like hit one or something or hit the arrow at the top and then it'll actually increment the value so sometimes this bugs out make sure you get the one there and then change it to Ether once you're done doing that and now go down and hit enter and let's see what happens and boom look at that we were entered into the lottery so let me ask you a question if I pooled one eighth and I entered into the lottery What's the total Lottery pool right now I'll give you five seconds to try to answer this five four three two one I really hope you said one okay I really hope you did because it's one person and one person entered with one eth so we have one total pool okay great I'll ask you this question again when another person and and enters so keep your answer ready I'm gonna go ahead and choose a different account so I'm gonna choose the zero x a B8 account with a hundred ether because I'm a big boy we're gonna scroll down and I'm gonna hit enter and let's see what happens I got an error because I didn't add any value I didn't pull any money so let's go ahead and pull it I'm gonna go one and then let's click enter there we go we just entered it with one eth okay so now the total amount of the pool is two eth okay now let's go ahead and grab all the players that are currently entered so we can see their wallet addresses all right so forget players I'm going to write this function it's going to be called surprise surprise get players and it's going to be just a public view meaning it doesn't really do anything it just shows stuff what we're going to be returning here is a array of payable addresses and just write memory because otherwise you're going to get an error and at the bottom I want to say return players okay so we're going to return players that's all it does those are the players that we're going to be returning that we initialized and you know at the top okay great so now that this function is made let's go ahead and kind of re-enter so we're going to delete the smart contract that we previously had because we're going to need to redeploy this new smart contract because we just made changes to it so I'm going to choose my 0x5b wallet to deploy it with we just deployed the smart contract it it is deployed let's click it so it expands and here I have my get players function as you can see I have an array of addresses that is currently empty and it's a zero because there are no players in the pool right now right now I'm going to go ahead and enter with one eth with my you know the owner the owner is going to come in and enter it's like the dude who owned the basketball team right jumps down and starts playing with Steph Curry you know and uh they're team members so that's what's Happening Here the guy who created the lottery is playing the lottery a little conflict of interest there but it's fine now I'm going to choose a second address and hit enter okay with the one eth now we got two players okay let's see who um and yeah when I hit players right boom we could see the two players are showing up so this function get players is working perfectly that is amazing now we're going to write a new function called get balance and it will get the balance of the pool aka the balance of the contract address so if it has to eat it needs to show to eth so what we're going to say is return address this dot balance why am I writing the keyword this this refers to this specific contract address the contract it refers to this contract the one you're writing okay so it'll return the balance that this contract has that's how we get it now let's delete our contract let's go back to our Xerox 5B account which won't be called Xerox 5B on yours because it'll probably be something different right we all get different addresses with different you know with 100 eth in it um let's go and hit deploy again so you can see you have a bunch of deploy you have your deployed contract and now you can see to get balance which I saw nicely hovered over for you then we are going to let's see then we're going to put in one eth into the pool let's hit enter so I joined with one eighth so the owner jumped in again with one eth and let's go and see what happens when this other guy jumps in with one eighth let's hit enter so now two people have jumped in with one eighth let me ask you a question currently what's the pool size how much eth is in there I'll give you five seconds five four three two one I hope that you said to eat because one plus one is two okay if you didn't get that right you my friend have much bigger problems than learning blockchain okay so I'm I would be really worried if you didn't get that answer right you look yourself in the mirror and oh yeah okay so it's showing that we have two eth but it's showing like two trillion or two billion each and the reason why it's doing that most likely is because it's showing that in way okay yeah so away is like a very small unit right ways like if think of way as you have sense think of eth as dollars you have dollars and then you have cents but something even smaller than ascent because like you know just to expand on this analogy right one dollar is a hundred cents so an eighth might be a hundred way even though one eighth is way bigger than a hundred weights way bigger there you go and now I'm writing a comment for you letting you know that solidity Works in way so it's written out and extremely obvious to you so you just have no chance of missing that piece of information now we're going to get lottery ID and I'm going to create this function it will be called get lottery ID and this will be a very simple function so it's going to be public view returns and we're going to return an integer and we're going to if you see uint it just means an unsigned integer and that means it could be negative or positive but literally whenever I say int just thank you and keep your life easy and then we're going to go ahead and do return Lottery ID so very very simple because we have made this variable up at the top here on line nine and we're simply returning it on line 36. so in order to test this get lottery ID we need to delete our current smart contract we need to go back and then we're going to deploy our smart contract so let's hit deploy it's been deployed successfully you can see at the bottom it's there and now you can click get lottery ID and it shows you that the current lottery ID is zero which makes sense because in the Constructor we defined it to be zero right boom there we go hand in the brain we defined it to be zero okay perfect now we'll make a new function and this will allow us to get a random number this is going to be a helper function for picking a winner so I'm going to create this function and we're going to say get random number and it's just going to be a public view it's not going to mutate any data so it's not going to cost us anything okay and it's going to return an integer and it's going to return a random number and what we'll do so I'm going to get so caccac is going 256 is going to help us generate a random number and to be technically accurate it's going to be a pseudo random number which you know if a really professional hacker tried to destroy your app or hack your app that probably could so if you're work building a production you know app and you need this random number to be truly random then you should look into chain link and how you could set this up with them okay I wouldn't try to do this yourself using sudo code okay so we got yeah so we're gonna go ahead and we're gonna take the ABI and we're gonna say in code pact we're going to pass it the owner of the smart contract and then we're going to give it a block.time stamp so we're just going to give it some unique pieces of information like the owner and the time stamp and we're hoping that that information when we give it to it it'll encode it it'll use the algorithm Keck 256 to kind of scramble it and then we'll call integer on it because we'll and at that point we'll assume it'll give us somewhat of a random looking number would would you know fairly weird obfuscated information that we're giving it so that's how we create a random number I wish they just had math.random because this is ridiculous right but we're early so we got to pay the price for being this early um all right let's go ahead and delete our smart contract that we had deployed and now we're gonna pick a winner that's that's what we're going to be doing okay but let's go ahead and test or get random number first so I'm going to deploy our smart contract let's go down and you can see get random number it functions right there let's click it let's see if anything happens whoa something did happen it gave us this massive random number I mean that would have been crazy can you imagine if I asked you to guess that number how screwed you would have been holy but Jesus that is an insane number to guess so for us I mean you know the pseudo-random number is pretty darn good okay Keck hack is doing something useful okay let's go ahead and write this pick winner function and I'm going to call it pick winner it's going to be public we're going to require that the person who can pick the winner is the owner nobody outside of the owner should be allowed to pick the winner and even the owner will get to pick the winner randomly so that's what we're doing require and we want to say hey make sure that the current logged in metamask user AKA message.sender you know or whatever wallet you're using is the owner of the address okay and I believe we assigned the owner when the Constructor happened right when the when we when we deploy the smart contract and then we're going to create a random index using the get random number function we made and then we're going to do module players dot length and here's what's happening here okay let's say you have you know you have uh five players or two players Ryu and you have Ken okay from Street Fighter get random index whenever you run this function it'll either get you zero or one or zero or one okay literally just those out of those two numbers it'll randomly pick between those two now let's say that you had also Zangief now this random number will get you a number between 0 1 and 2 randomly between these Okay so that part of how so remember how get random number was giving you this big giant number well you might be thinking how the heck is going is that going to give us a index number like zero one or two how is it doing that that is the magic of this modulo players.length operator is very nice and modulo allows us it's a remainder okay that's what it technically mathematically speaking module is just a remainder so if you did three divided by two you'd get a remainder of one but another way to think about is this allows you to wrap around whatever you give it so if you give it like two or number three right then effectively you're taking this giant number you're dividing it by three and you'll have some remainder left over there'll be always between zero one or two so that's the trick we're doing here the way I like to think about it is if I give it three it'll always wrap around give me between zero one and two it'll always always do that if I give it a module like module allows me to wrap things around okay whatever mental framework you want to use to understand that that's fine but but at a higher level if we ignore all this nerdy crap just know that random index gives you between 0 1 and 2 or whatever the length of that array players array is so if that player array is a hundred items in there or 100 players in there playing the lottery then it will be between 0 to 99 and they'll pick a number between um you know that entire range of zero through 99 okay all right and then we're going to grab the Rand a random player and transfer them the funds of this contract so remember address this dot balance okay all right so there we go this allows us to take the funds from our contract address okay so let's say that we have this our big pool right and it has all of the Monies then we have this like array of players right player one player two player three we randomly select let's say this player three right and then because of this here dot transfer we are able to take that player three right and and let's say that they have they're a real person they're very happy then we send them the funds okay that's this is what's happening guys There's real live stuff happening you're changing people's lives writing this code so don't just think of it like random nerdy math numbers somebody will be able to use this one day and get money in the bank account and then you know they can provide for their little tiny children or much smaller than them this is not to scale but yeah because that would be a huge face right if you're a little child I was six years old was smaller than your face that would have been that would be crazy um unless you're Shaquille O'Neal so now we're gonna go and uh grab the winners and push the player that was the winner okay so the the the person that we chose to win we're going to push that winner onto the array so you know and in other words this part over here players random index okay this weird looking code that just really means winner okay and so all we're doing here is we're just pushing that winner okay that's what's happening hopefully that's not too scary or weird or freaky what the heck is this okay whatever I don't know maybe I maybe I'll use it one day for something but for now let's keep going all right now we have Lottery ID and what I want to do is every single time you've picked the winner well at that point essentially the lottery is done the current lottery is done so when the current lottery is done at that so at that point I think we should increment the lottery ID by one because now you know you're technically on the second Lottery because the first Lottery is over people have been paid out got their money and Life's good and last thing we want to do is remember that players array we had like the current active players that were playing the lottery well we need to clear that array so we're going to write this function it's going to allow us to do that so imagine you had this array with player one comma player two but this function is not going to allow you to do is really just turn it into an empty array that's all okay and not function but we're just going to take our variable players that we had initially written and we're going to just reassign it and give it a new definition and we're just going to say hey become an empty array I wish solidity could just make it easy for you okay what we're really writing here before I write it and and freaks you out here's what we're really writing players equals MTR rate that is it okay in JavaScript that is what you would do and you would move on in solidity they want you to just go through a lot of pain and uh be super verbose with what you're doing but I understand why to make your code less error prone you know add and type safety increases the speed I understand but it's still kind of annoying from a developer experience perspective so that's all you're doing here you're just saying hey players should be a new thing and it should be a array of address payables and currently it's at size zero meaning it's just currently empty we're making it empty okay great okay now let's go ahead and play with this new function that we made so let's deploy the smart contract let's go make sure that it's deployed and it's showing us and you can see we have pick winner looking orange looking really nice all right so I just want to kind of take a quick pause here and explain what's what are what what the heck is that I just explain what all of this is right why are these blue so what does blue mean why is that one orange what does that mean okay and and then red so blue means these are our getters these are just your public view functions that don't change any data don't change anything rather they return something okay so these are our getters and then orange are our setters that is where you're changing data and mutating data AKA like we're mutating and we're changing the definition of the word players we're mutating winners because we're adding a player to the Winner's array we're taking laundry idea and we're incrementing it by one so there's a lot of mutation happening and then this red over here it's a legendary weapon orange for to me used to mean a legendary weapon in the game Borderlands so orange is a very special color but that's not what it means here okay and then red here means it's a payable uh it's there's some payment action money stuff is happening okay that's that's as far as I know when I find out new information I'll let you know so the color coding kind of makes it nice you could look at it visually and know kind of what's Happening all right now we're gonna try this okay so let's go ahead and deploy this smart contract uh or sorry we've deployed it but let's enter it with one eth as our you know as an owner and then I'm going to go to another uh pick another wallet and I'm going to put in one eighth here and I'm going to go ahead and enter as well so now I've entered here so the pool size now should be two eth and okay actually let's go and enter with the third person account as well so let's hit enter and now we have three people in the pool so that's pretty good let's do get players and look at that we have three players it's kind of hard to tell but it's three players all right so there we go let's hit get balance and take a look at that right Lottery idea is zero balance is three eighth okay this is in way so obviously it's gonna be like crazy right because this is the sense incense and ether ethereum is dollar this is going to be a way bigger number here is all of the addresses right so these are three addresses so here you see the one comma and then two commas right so that means one address two addresses three addresses so three players are in three is the eighth and we will now be picking the winner so let's go ahead and pick the winner soon okay now notice that I'm on the smart uh notice that I'm on a wallet that is not the owner remember the owner was the first one we used okay the owner was a zero x5b3 one but I'm not on that I'm not on the owner so remember our smart contract says if you're not the owner you should not be able to pick the winner so let's see if we can pick the winner so I'm going to go down and I'm gonna go and try to hit um pick winner and notice right when I clicked pick winner I actually got an error at the bottom this error means that I'm not the owner so it's not allowing me to pick it remember for a pick winner you can see only the owner of contract can pick winner that's what line 47 is saying so I'm going to go up at the top and change my wallet address to the owner of this smart contract that was deployed now let's go down now let's pick winner and boom look at that we see that green tick mark and that means we were able to select the we were able to pick a winner now notice that when I say get players there are no players there's zero players empty and that makes sense because we on line 54 of our code after the lottery winner has been picked we set the players to be an empty array if you get the lottery ID well look now it's a lottery ID one so that's really cool and when I hit get balance balance is zero because there's no more money in the pool all of the winner has been picked and that winner got all of the eighth okay next up we're going to make a function that's going to be called get winners and this way we'll see who won get winners will be you know we'll do a re public view returns here it's going to be an address of winners all right there you go so now we're just gonna return winners so it's going to be an address you know it's going to be in a address of arrays and you could see an array of addresses I'm sorry what the heck and that's what winners is that's what we're returning and so you could see on line 59 we're just returning the winners okay when we created that variable earlier all right and let's go delete that smart contract we need to deploy a new smart contract well because we made changes to it it's a different one than that deployed one let's go and go to Xerox five I mean for you it's going to be something different right but I'm gonna go to that account and I'm gonna hit deploy so the smart contract has been deployed I'm going to pick one ether and I'm going to come to my deployed contracts and I'm going to enter the lottery and I'll pick another account and I'll also put in one ether and I will enter the lottery and I'll pick a third account put one ether enter the lottery once I've entered the lottery I'll get players you can see it's three players right now I will say get winners there's no winners you could see the array of addresses is empty and Lottery is currently zero now we're going to go to the owner because only the owner could pick the winner so I'm going to say pick winner the winner has been selected great now let's go ahead and get players players are empty because now the lottery is over let's check get winners and look at that guess who won the game is rigged boys and girls that's why I told you don't let the owner hop into the lottery it is it's just gonna be a massacre right the owner of course wins because it's it's rigged and it's pseudo-random you know hell yeah pseudo random right the owner always wins that's what happens so lessons to learn right it's a huge conflict of interest the dude who made the lottery don't let them jump into the lottery but yeah um there you go owner was picked and oh wow what a coincidence check who the owner is the owner is the same dude that freaking won okay there we go all right uh yeah very good so with that said you are done essentially with the smart contract part how does it feel do you feel special because you should feel very special this is a huge task that you just completed and this was awesome I think I hope you had as much fun as I had going through it with you and picking up these things and sharing these with you I think it's just so cool like this part of web3 is pretty cool and I think um yeah I hope you learn anyways we're now going to take this smart contract that you built and start bringing it into our development environment inside of you know whatever you're using visual studio code or whatever ID you use to code we're going to bring it in there so then our entire app could build off of this but I like this flow a lot build on something like remix IDE so you have that iterative instant feedback loop so you can keep iteratively building building building building once you're done building the smart contract bring that back into your app cool with that said let's continue all right so now what we want to do is I want to take all of this and move it into my coding environment so I'm going to copy the whole damn thing okay darn thing let's copy it let's go back to our app and inside of my app I'm going to make a new folder at a global level and I want to call it my back end AKA my blockchain AKA my smart contract part okay because we don't have a real you know traditional back end as in Firebase or super bass or you know mongodb or MySQL or postgres or whatever in this case our backend is going to be the blockchain that's where we're storing our data and running our app from so let's go to our command line now and I'm going to CD into our backend folder now first thing we want to do all right so I have this blockchain part now I want to do Truffle in it however most likely you on your computer might not have it installed okay um and maybe I might not even have it installed so first thing we want to do is make sure we install it so let's go ahead and do npmi down G okay I'll just zoom in here so you could see the command that I'm actually typing and I know my mouse is blocking this but it's a dash G okay and then we're gonna do truffle okay and then I want you to go ahead and hit enter and it will and start installing it okay there we go so let's go ahead install truffle all right it's doing its thing it's installing all of the dependencies that truffle comes with truffle is very very helpful in developing and deploying smart contracts makes our lives very easy hey let's go and install this once it's done installing I'm gonna now say Truffle in it make sure you're in the back end folder very important make sure you're in the backend folder hit truffle init and once you do that it will go ahead and scaffold an empty project for you so now you can see that you have contracts migrations tests truffle all of that stuff now in your migrations you have no migrations okay in your contracts you have no contracts you'll have to start by creating a smart contract so we'll hit new file we'll call it lottery.sol and now we're going to go to our remix IDE we're going to grab that contract address that we had gotten so let's go ahead select everything and let's go and copy it and we're going to bring it and we're going to paste it inside of our vs code lottery.sol file so now we have access to it on you know inside of our project let's go to the migrations we're going to hit new file and I'm going to say one underscore deploy.js and inside of this what I want to do is I want to say cons Lottery and I want to say artifacts that require Lottery some of this code is going to be new and weird just write it and you'll start getting used to it okay but don't you don't need to worry too much about understanding this because it's not that important you write it once and then you're done and you can kind of copy and paste it for all your future projects and you should be good okay and we're going to export the following module it's going to be a function that's going to take in a deployer and then we're going to take in whatever we're trying to deploy and we're going to deploy it and pass in our Lottery artifact all you need to understand about that is that piece of thing that we wrote is going to help us deploy our lottery.smart contract and the benefit of deploying it is just like the web 2 deployments it will deploy it to the ethereum network meaning that anybody will be able to actually access it you know almost like it's a website or an API that's publicly available okay that's what a smart contract does now let's go into our truffle config file so I'm going to go and scroll all the way down in my truffle config file so it's this file right here so let's scroll down and I'm I just want to fix the version so version right now is 0.8.16 I'm looking at my English little tiny Bulldog pudgy please baby don't do that her name is pudgy and we're going to change it to 0.8.15 because that's the version we're using and that is it for moving it into your Visual Studio code into your own um you know development environment so at this point you're done doing that next up we're going to set up the Truffle extension let's go now we're going to set up our truffle extension so the first thing you want to do when you're setting up a truffle extension is obviously you need to install truffle from the extensions okay go ahead type in truffle and there you go truffle for vs code now what is truffle it is incredibly powerful software built by consensus and what it allows you to do is in you know basically uh integrate your smart contract with infuria in a very very easy way and deploy to their Network okay and it just makes your smart contract deployment building of it incredibly easy so make sure you're using this for pretty much almost all of your you know solidity projects so at the bottom left click truffle and go into that extension and that error at the bottom if it pops up for you just ignore it it's not important now what you're going to click on is you're going to create a new network so hover on that create a new network and you're going to choose inferior service and then inferior will pop up and it'll ask you to sign in Click sign in and all I want you to do is go ahead and hit authorize at the bottom here so you make sure that you sign in and I'll hide myself so you can see that authorize button okay there we go all right um so let's keep going here okay once you authorize and that was Kevin and me on the call that you saw on Zoom okay all right so let's go here yep so now it will say you are signed in beautiful and you can exit out once you've signed in now at the top here it's going to ask you to put your project name so go ahead and put your project name we're just going to call it all right so I'm going to type in Lottery and then just hit enter once you type that in and then you could choose this project as public fantastic now at the bottom in the networks you see it says Lottery and it's showing us that it's connected to multiple networks on layer 1 and layer 2. and if you go to your infuria dashboard you'll also be able to see this project there now I'm going to go inside of my contract and what I want to do is right click on my lottery.sol and go and choose build contract so there you go build contract so click that and then once you once it starts building it for you just simply wait and go in your vs code and choose truffle for vs code for your outputs you can actually see the output I'm going to drag this up now and we'll wait for it and now it says command finish running so now it's built our smart contract and next after we've built it we're going to deploy it so then click deploy go ahead and choose your project so since we're on the robston one choose inferior Lottery Robson INF underscore Lottery underscore Robson choose that that's going to be your deploy destination okay and now it's going to say hey enter gas price just hit enter so you can leave it as default and here you're going to pop in your mnemonic okay so hopefully you've copied your mnemonic from earlier remember when you made your wallet yeah that if you didn't do that go ahead and create a brand you know either find a mnemonic for an existing wallet that you have or create a new wallet and grab that while it's mnemonic this is going to be very important and then paste that mnemonic here once you paste that mnemonic it's going to ask you to save and I want you to just save it as you know kind of wherever you want to save it it doesn't really matter I'm going to save it on my account in desktop and I'm just going to call it key dot ends it's really just short for Kevin and then wait for it to deploy at the bottom it's loading okay deploying takes a little bit of time so we're going to keep waiting for the deployment boom there we go it says deploy succeeded finished running command now grab that contract address that we got from our deployment copy that and now you can go over into you know we're create a new folder and we'll call this utils at the top level make this folder inside of it we're going to put a new file and it's going to be constance.js and inside of this file we can say export cons contract and we can say contract address and then boom we can paste that contract address okay that we copied there we go now our app will have access to this contract address now go into your back end go into your build and grab lottery.json and copy it then go in utils and paste that file so now we just pasted launcher.json and while we're doing this is because we will need access to our Abi and this has the entire ABI in there okay now we're also going to import in our constants file we're going to import our ABI from Lottery Json and then we're going to export that API yeah as well so now we're just going to do export cost contract API and we're just going to say abi.abi that should do the trick with that said we're all set up our front end now is plugged in and connected to our smart contract and backend we have access to everything now we're going to start creating the lottery from react and start doing the front end stuff okay let's get to it now let's go ahead and actually factually connect our back end and front end okay up until now we kind of pull that information a contract address now we'll actually like create a lottery helper function that connects it let's go into utils I'll create a new file we'll call this file Lottery contract.js and in here I want to do the following I want to import my contract address and my contract ABI from the Lord from my constants okay because my constants have access to all of this information once I have access to that I'm going to create my lottery contract and it will be doing in the following way okay we'll say hey return to me a new web3 eth contract and you're going to take in the contract API and you're going to take in the contract address and with that said that is it so with this thing that we've made now we'll be able to actually access this in other files and use our Lottery contract and at this point you could add the export but we're going to add the export later and this is just going to be a helper function we'll be able to use throughout our entire app with that said let's move on and let's start working on the actual header in our app all right now we're going to be building the header and here's what it will look like boom boom all right so this is the header that we're gonna be building on the connect wallet button so I'll put it here as just like a reference point that we can use as we continue building so let's go ahead and continue building here all right so I'm going to pop in and I'm going to say header okay and make sure you are in your index.js file and we're going to import header from components header okay then just write down header there okay this is a component we've already made for you inside of if you're going to the components folder you'll see header.js it's pretty much already built but it does have some to-do's so it does ask you there are things that you're going to need to do in there to add functionality so it says get the connect wallet and address from blah blah and then on line eight it has another to do replace a static address so we've added these to-do's for you to make your life easier and then we have context as well so here's our context.js file so so let's go ahead and work inside of our context file and we're going to keep track of the user's address we also will want to add functionality for connect wallet so the user could log in and it's going to be an async function and we're going to say if the window is undefined okay and window ethereum is undefined so meaning that you know you're not on metamask or whatever and then we'll do else and we'll just say hey please install metamask let's add a try catch in between those if statements and we will try catch it in the following way so we'll have we'll console log the error and then inside of our try we want to request wallet connection and so how we do that is we want to do window.ethereum.request method eth underscore request accounts that'll allow us to request wallet connection okay that's that brings up the little pop-up in metamask and then next up we want to create a web 3 instance so let's do web3 equals new web3 and we want to pull it from window dot ethereum let's go ahead and import web3 from web3 great let's keep track of a couple of other states here so we're going to keep track of a web 3 State and we're going to use that hook right here and we're going to say set web 3 to whatever we defined web3 to be right right above on line 19 and then we want to have accounts and we want to pull all of the accounts from that user's metamask like whatever they connected whatever accounts are connected and we're going to set the address to be the zeroth account like the first account that they selected okay now go to Lottery contract and here I'm going to export default and we're going to export our Lottery contracts so we have access to it outside of our utils file for lottery contract and we're gonna actually you know what rename it let's rename it to create Lottery contract that would be a good renaming for this let's go ahead and set a state here on line 9 and we're going to set a state for lottery contract okay so we can keep track of everything that's happening because the lottery contract can get updated so that's why we need to keep track of the state now in line 24 I want to say set Lottery contract okay to create Lottery contract and we're going to pass it web 3 that we just got and then what we want to do is we want to say hey window.etherium Dot on accounts changed all right and we want to run this async function in here so whenever the accounts change then I want you to get accounts and set the address to account zero so if the user changes their account picks a new account this will do it okay this will automatically update it without necessarily having to even refresh the page or do anything because it's an on change it's kind of a listener here next up what we want to do is in our provider we want to pass this around so we want to pass connect wallet function that we created around so our entire app has access to it and then we want to pass the current address around so our app has access to it okay so let's go to our header function now and inside of our header function you can see it says Hey to do get the connect wallet and address from context so now we're going to go ahead and get that we're going to finish that to do so I'm going to say connect wallet and then address and we'll say use app context okay let's fix the yep address right there remove that address we don't need that and yeah on line 18 we want to say hey if the use your card so you can see on line eight we have a to-do that says replace the static address or the currently logged in user so on line 18 we had a static address and now what we're saying is hey if the there is an address meaning there is a logged in user then I want you to show the user card with the following address otherwise I want you to show the connect wallet button okay so we're going to say address we're going to pass it the address and then for our connect wallet button we'll say hey um yeah made the connect wallet function should be the connect wallet function that we got from the top okay so that's what we're going to pass in as a connect wallet prop okay great so we've made fantastic progress on it so far let's go ahead and hit refresh and there we go our Lottery dap is showing up and now let's see if when we hit connect wallet if it runs okay so it didn't work right now so let's see what's going on so let's go to our connect wallet button component in components and it has a couple of to-do's for us okay so we need to destructure connect wallet because that's what we're passing it and we need that function to run on click okay so let's go ahead and set that up so for the button we're going to give it on click and we're simply going to say hey run the connect wallet function that we wrote when you do on click so as soon as you click that metamask will then pop up okay so that is how we're connecting that functionality and here's our user card component that we have made and we need to destructure the prop the address prop that we gave it okay so that this has access to the address and we need to render the user's address in here so right now we just have some dummy address let's remove that dummy address and let's render the user address in there and we'll just say address just like that okay great now let's go ahead and we'll full screen this so we could see it let's hit connect wallet boom look at that right metamask just opened up we'll type in our password and let's see if this works great it worked and there you go right you can see welcome you could see the current user's wallet address and let's see if it's the actual current user or if it's doing some kind of dummy data thing and look at that 0xa right 0x a it is the current user we'll switch users as a zero um X31 or whatever let's switch to 0x35 Let's refresh right let's connect and look at that right it changed the user to zero x35 and so you could see that this app works completely well with this it's picking up the current logged in User it's changing the state when we hit login connect wallet it changes it to the Welcome State it can change the current active user it has allowed us to bring up metamask and unbring it up and basically it's you know authentication at this point of the app is working so fantastic job if you got to this part now we're going to continue and we're going to start adding in the lottery card so you can enter the lottery let's go all right now let's go and work on the lottery card first thing I need to do is actually write the write out the lottery card component and then you're going to add in all the functionality we're going to add it together so let's go Lottery card right here and we and if you run this we get an error which says Lottery card is not defined what we have to do is we have to import Lottery card so that way we actually have access to it and we're going to import it from components slash Lottery card okay there you go we've already made this component for you now this component is coming in with dummy data it's coming in with dummy data and you can see that we got 10 eighth we got a winner last like who won the lottery last and we can pick our winner so let's go to context.js and inside of our context we want to do the following I want to all right so I'm going to say Lottery pot and we're going to say set Lottery pot so I'm going to keep track of the lottery pot state and we're going to start the state as empty and then we're also going to keep track of the lottery players okay it's going to be an empty in an array of players we're going to also keep track of who won last and yeah okay and then we're gonna keep track of the lottery ID which Lottery are we on are we on lottery 0 1 2 3 4 Etc let's go ahead and now we're going to write our enter Lottery function and I'm going to say enter Lottery this is going to be async and we're going to wrap it in a try catch we're just going to console log the error just a good habit to get into and then in the try what I want to do oh copilot is telling me everything I'm going to grab my lottery contract and I'm going to call the enter Lottery function that I created on the back end okay it's called enter okay and then we're going to send and send is going to take in the following information into account it's going to take in the from address it's going to take in the value and so I'm just going to pass it a very small amount of ether as value because that's what I want to put in the pot okay this is the minimum amount that I could put in the pot and then we're converting it to whey because that's what it wants on the back end all right now for gas we're going to just pick 300 000 or whatever that is um okay so it's going to be gas in Whey or way and then we got the gas price here and gas price is going to be null now we want to also export this function so let's put enter Lottery inside of the app context and now we'll have access to enter lottery in our other files so let's go to our Lottery card and now we get the data needed from Context so now we're dynamically getting all of the data so let's go ahead and import our use app context from context and we will say use app context and we're going to destructure the following properties enter Lottery okay and that's kind of it that's all we need and where we have that enter button happening that's where we want our function to fire off that we just created so I'm going to say on click enter Lottery okay now let's go ahead and try that connect wallet login and then we're going to hit enter and now we should have entered Lottery and let's see what is happening we're currently getting some error that says cannot tell you cannot read from undefined so we're going to import create Lottery contract from okay from where let's see from our utils okay from dot dot slash utils slash and we're going to say Lottery contract okay that's what we're getting it from now let's scroll down and let's say 0.1 ether instead of 0.01 ether for our value that we pass and now let's hit enter so that way we're just passing in a bit more ether into the pot let's hit enter and boom okay that worked let's hit confirm okay let's see what happens so let's take a look at the Smart contract here okay our dummy data of 10 East is still there so that's not going to change but our smart contract looks like it has entered so our enter function worked it didn't fail so that's a great sign and you can see that we put in 0.1 Ross pen here Robinson okay now with that part we're done now we're going to make it so we actually update the lottery pot let's go ahead and do that all right let's go and update our Lottery pot now okay so let's go inside of our context and we're gonna update the lottery card dynamically using our contract okay so that way where it says 10 eighth we need that to update dynamically and not for us to have to manually hard code it and fix it okay so I'm going to make update Lottery function here and this is going to be an async function and I'm going to say hey if the lottery contract exists okay then I want you to create a pot and I want you to go and get me to get pot method and since we're using web3 you got to do dot call to actually call your method okay and then whatever we get from our pot we're going to set Lottery pot to that okay let's use a use effect hook and inside of this use effect hook we're going to make Lottery contract a dependency so whenever our Lottery contract changes our app should you know our use effect hook should fire off and our app should dynamically update and when it does we should update the lottery so then we run the update Lottery function all right now in our context we also need to make sure that we um export Lottery pots or other files have access to it Lottery pot dynamically render the lottery okay so we're going to destructure in Lottery card our Lottery pot as well and where it says 10 eth we're going to dynamically now write Lottery pot there and it's going to pull from our Lottery pot and put that there foreign let's set it to be zero eighth when it starts so now you can see it says zeroes okay I'm going to make it a string and then it will dynamically update once we have something in the pool so let's go ahead and connect wallet hmm interesting okay got dot get pod is not a function all right get pot is not a function so it's let's see it's get balance okay there we go and so we just got the balance and look at that so on our back end right on our smart contract blockchain part it's get balanced that's what the function is so now you can see that when I say get balance I'm getting all of this money in way and so it is a massive massive amount and that's not what we want so we need to actually convert it back into ether so we're going to say web3utils dot from way okay and when you do Dot from way it allows us to convert it back into ether that's the really nice thing about that so it knows that it's getting way all right now let's go ahead and run this and boom that is so clean right now we can see that it's 0.1 eth that's showing up and we'll write the word eth at the end of that there you go now it says 0.1 eighth so now our app is dynamically updating super cool let's now update the lottery ID now we are going to update and render the players so they actually show up on screen when they enter let's go into index.js and we have a to-do here that's very nicely written for us and I'm going to say table all right and this is a table that we've already made for you so import table from components table all right so yeah so we're going to get the table make sure you've also gotten the you know Styles make sure you have the Styles obviously and there we go look at that our table is already showing up at the bottom hey nice oh wait I'm hiding everything so I'm gonna hide myself give me one second here okay I'm gonna hide myself here real quick so you can kind of see it so there we go right we got the player showing up now I'm gonna make myself tinier okay let's go back and let's go inside of our table and here we can actually map we need to map through the players and loop through it so our to-do is telling us bring in the players data from Context so we need to get the players data so let's go inside of our contacts and get access to all of the players all right so in update Lottery I'm going to also write a player's method um and I'm going to say hey set the players to and let's go talk to our back end or blockchain part so I'm going to say going to the lottery contract going to the methods grab the get players method and call it and whatever that returns let's set that as our player so it's going to return an array let's set that array as our Lottery players okay and we can even console log this out so you could see it here all right there you go at the bottom you can see that we got an array of players it only had one item in that array and you could see that we had this guy right there okay and that's the guy that's currently actually logged in so it is working all right now let's go ahead and Export Lottery players in our provider so that we have access to another files right and now let's go to our table.js and I'm going to basically say inside of the loop here okay or inside of uh the div there but first i'm gonna pull my data from my context all right so let's say use app context and we're going to destructure Lottery players okay that's the one that we're destructuring there and now I'm just going to say hey in players row just show Lottery players okay let's do that we're going to say hey if La if Lottery players exist then I want you to Loop through those players and show me those players okay create a table Row from each of them and then show them to me and we're just going to make index the key for player we're just going to pass in the player okay that's it but if they don't exist and obviously just show me dummy data okay or don't show me anything at all so we're going to say style of no players and we'll send no players yet now when we run this you could see that it's actually already dynamically pulling in user information because you could see this is the guy right there and you can see 0xa1 f a blah blah blah so if this is working perfectly let's go inside of table row and you can see that we're destructuring the player and we're truncating that player's address okay that's what's shortening that address right so you can see that address is being shortened right there that's how that's happening okay it's because we have that function truncate that we're calling on it okay now let's say we change our wallet address and see what happens boom okay let's go ahead and hit reject there cool all right you can see we have 0.1 eighth and you could see our user address is still 0xa because that's the player that's that has actually entered 0x35 has never entered this dap it's Lottery okay but now let's say that we do enter let's see what happens now so I'm going to hit confirm okay we'll speed this up I'll just put in high gas prices so I could speed it up and looks like it went through now we'll refresh the page and boom there you go all of the players are showing up and they are being rendered dynamically how freaking cool is that so with that said we're pretty much done with that part just remove the part where it says you know 0.015 eth and we just hard coded it to 0.1 eth so right here we could hard code it with 0.1 each because in this app the only pool like the only amount you can enter with is 0.1 eighth so we know guarantee the 0.1 need so I don't need to pull data dynamically I can just hard code 0.1 each here and be accurate because you can't do more or less than that okay so with that said we're done with this part now we're on to the last and most exciting part which is we gotta pick our winner so let's go all right time to pick the winner so here we go let's go into our Lottery card here you can see I have my pick winner okay so we need to add functionality for this let's go into context JS first we're going to write our function pick winner that allows us to pick our winner let me put a little space after my comments because I'm a professional and then we're gonna say hey pick winner function is going to be an async all right so here basically what we're gonna do is I'm gonna write a simple try catch and obviously it's console logger error and then in my try catch I want to say I want to Define my transaction and I want to go into my lottery contract and I want to pick the winner okay and I need to send so to pick the winner I need to send it the from address I need to send it the gas and all the other things that it needs okay so we're just going to pick 300 000 way gas price is going to be null and that's that's it okay pick winner is going to pick randomly and the reason why it needs the from address is remember it's checking for if you are the owner if you're not the owner then it won't work all right and then what we want to do is once we get the winner we want to update the lottery okay so we want to actually at this point we want to first update the lottery okay so we want to run or update Lottery function and that way it will automatically update all of the data on our Lottery card you know the current wallet address the current users Etc let's export this pick winner function so other files have access to it let's go to our Lottery card and here I'm going to get access to this okay so let's go ahead and destructure pick winner and then we're gonna go ahead and do on click pick winner okay there we go so now we entered our on click we gave our on click the pick winner so let's go and now choose pick winner and we'll soon see what happens okay and let's also update the wallet address for our last winner so we're gonna you know create that function too at some point okay so let's go ahead and set the last winner to be whoever the last winner was so luckily in our blockchain we've already made that smart contract and so I'm going to go to my lottery contract and the methods and I'm going to extract my get winners all right so we are getting our we're calling our get winners method from our smart contract which gets us all of the winners and then from here what we want to do is we want to extract the last one it's going to be an array so let's go ahead and console log this and we're going to console log um our last winner so let's go ahead and do that and let's make it an array so let's go to on line 12 and let's make it a empty array by default all right now let's log in so now everything got updated right right when I logged in all the users got updated Etc and let's see if the last winner is showing up so I'm gonna go here we're going to look at our console and you can see on the right hand side that right now it says length is zero okay so so right now we since we haven't picked a winner it's just saying zero but once we picked it pick a winner it's going to show an array of who won last okay so let's go ahead and do last winner here okay and I'm just gonna write last winner there okay and so yeah let's take a look at it and now we can see that it's showing us an array of people those are players right the array that you're seeing with the actual wallet addresses those are actual players but the one where you're seeing empty that's where it's a winner and it's because nobody has a one yet so we're gonna need to run our one pick winner function first and then it'll tell us so let's go ahead to our Lottery card and we're going to dynamically render the last winner as that note says because right now it's hard coded so let's go and grab our last winner so we're gonna say on line 23 actually first let's destructure our last winner so we have access to it we'll go in our context and we'll make sure we're exporting our last winner okay and then we want to do the following we want to say hey if the last winner is there then show all of this div and everything that's happening underneath okay so I'm going to say not last winner okay so if basically so if last Runner does not exist then I want you to do the following if it doesn't exist then I want you to create a div with uh we're going to say style.winner and here we're just going to say no winner yet and then if it does exist then I'm going to do the whole winner thing Okay cool so let's see what's happening here so if there is a winner then I want you to if there's no winner then I don't wanna I want you to say no winner yet if there is a winner then I want you to show uh a address okay show the the Winner's address now here you can see it says no winners yet that is perfect okay that is what we want when we're doing this right now now I'm going to click pick winner and make sure you're the owner account when you say pick winner and then I want you to go ahead and hit confirm okay and let's see we're still waiting let's see let's speed it up for pick winner I'm gonna put High money into it speeding and speeding it up ah it failed so let's see why it happened ah because I was not the owner right that's why it failed now I'm the owner now let's pick and let's see what happens so I'm going to hit confirm here and then we're gonna see if we can speed up the contract addresses let's speed them up let's put it on high perfect Boom the winner is picked let's go and now you can see user address is empty because new the player players are now wiped out because the last lottery is over right now we're in a new lotteries that makes sense why I got wiped out now for last winners it shows us a hard coded thing it's saying the Pod is zero so that's good okay lottery number incremented by one however our last winner okay it says no winner yet sorry actually it says we have zero x one two three blah blah blah so it's not showing us who the actual last winner was we need to update that because we have left it hard coded remember so we need to go and fix that on line 29 okay we're going to take that wallet address and we're going to replace it with the actual winner so yep okay there we go that's our last winner we're exporting our last winner as well now let's go here okay we have access to our last winner so all I'm going to do is I'm going to replace all of that and I'm going to say last winner okay and it says address match is not a function okay so since it's an array we're going to go ahead and say last winner and I'm going to get the last item from that array okay so all I'm doing here is I'm getting the last item from that array so let's say I have 10 winners well since I want to get the most recent winner I'm going to grab the last element out of that array okay and to just kind of visually see it for yourself it's like if I have David Kevin and if I want to get the last winner here well I want to be able to do you know let's say that this is called winners I want to be able to do winners and get me cozy so I want to do winners of two okay in other words I want to do winners of dot length because dot length and actually I want to do length minus one right because that'll actually get me the last possible item so if I do winners.length I get three I subtract 1 I get two this whole thing turns to two winners of two is cozy okay since we start at zero one two yeah okay so I'm going to write that then let's go ahead and do -1 okay great now let's connect wallet and there we go our last winner the actual factual person now one is now showing up how beautiful is that let's click enter to enter the lottery so now we're basically doing the last final demo run and let's test if this whole thing works okay let's click enter all right I'm gonna speed it up speed it up speed it up speed it up there we go okay so now it looks like I have entered successfully it did cost me some robston to do that because I pulled the money let's refresh and you can see 0.1 eth is there and you can see the new user is showing up there at the bottom beautiful then let's go ahead into our metamask I'm going to switch my account to a different account and inside of this account I will hit enter okay let's go ahead and hit confirm all right and once I hit confirm here let's wait for it we'll speed it up okay let's speed it up speed it up and then we'll hit save and it looks like I have entered with that one as well so let's refresh the pool size the pot size is 0.2 each both of the users that are current players are showing up as players and then we got our last winner showing up as well so this is amazing so far you guys now we have to switch to the owner of the contract smart contract address and then we gotta go and pick our win okay once you are the owner and then you go ahead and pick winner now we'll just wait and wait for that bad boy to speed up okay let's pick the high highest gas price possible speed it up speed it up speed it up speed it up and let's see what happens boom look at that right all the players got wiped because the lottery is successfully over the number for the lottery ID at the top incremented automatically the last winner was updated to whoever won and always remember whenever the owner jumps into the lottery I mean the chances of the owner winning are massive yeah the game is rigged so be careful letting the owner jump into the lottery all right with that said I hope that you enjoyed this so very much as much as I did make sure if you did Smash that like button subscribe to the channel if you haven't already and with that said I hope you enjoyed it put on your portfolio show it off to people and good luck in your web 3 Journey this is qazi I love your beautiful face and as always I'll see you in the next video\n"