Building a Third Web App with Rapplet: A Step-by-Step Guide

As we explored in our previous video, building a web application on top of blockchain technology is not only possible but also exciting. In this article, we'll walk through the process of creating a basic third web app using the Rapplet framework.

Getting Started with Delegation and Voting

------------------------------------------

The first step in building our third web app was to delegate our tokens towards the power of voting and proposals. This means allowing our vote to have weight with the ape coins, enabling us to participate in the decision-making process on the blockchain. We did this by navigating to our dashboard, hitting refresh, and seeing that delegation was complete. With our delegation set up, we could now proceed to vote on a proposal.

Speeding Up the Voting Process

------------------------------

After delegating our tokens, we found that voting was not possible at first. However, when we went back and refreshed the page, we discovered that our vote was still processing. We decided to speed it up by hitting confirm on our previous submission. To our surprise, this allowed us to vote successfully. This demonstrated that delegation is crucial for giving our votes power and allowing them to have a significant impact on the blockchain.

Using Rapplet to Create a Proposal

----------------------------------

With our tokens delegated, we were able to create a proposal from scratch. We navigated to our second account, which had already been set up with delegated tokens, and created a new proposal. This showed that even without delegating our tokens initially, we could still create a proposal and start participating in the decision-making process.

The Benefits of Using Rapplet

---------------------------

Throughout this process, we used the Rapplet framework to simplify the development experience. By using their pre-built components and styling, we were able to focus on writing web3 logic without having to worry about every single detail from scratch. This makes it an ideal choice for developers who want to build third web apps quickly and efficiently.

The Blockchain Industry: A Lucrative Opportunity

------------------------------------------------

As we concluded our video, we emphasized the potential of the blockchain industry. With the right skills and knowledge, developers can earn significant amounts of money, often in excess of $100,000 per year. This is because there is a growing demand for skilled web3 developers who can help build and maintain blockchain applications.

In conclusion, building a third web app with Rapplet is a fun and rewarding experience that simplifies the development process. By using their framework, we were able to delegate our tokens, create proposals, and vote on decisions in a matter of minutes. With this knowledge and skills, you can join the growing number of developers who are making a name for themselves in the blockchain industry.

Forking Rapplet for Yourself

-----------------------------

As a special treat for our readers, we've included the Rapplet framework below. By forking it, you'll be able to replicate our build and start building your own third web app quickly and easily. This will save you countless hours of development time and allow you to focus on writing web3 logic.

We hope you enjoyed this video and learned something new about building third web apps with Rapplet. If you have any questions or comments, please don't hesitate to reach out. We'll see you in the next video!

"WEBVTTKind: captionsLanguage: enwhat if you wanted to build an app where your community has the voting power to make decisions so if you were between hiring an angular js developer or a react developer your community can actually help vote and not only that let's take it a step further people who had more coins in your community their vote actually held more weight in the decision-making process so let's say you ask your community hey should we hire a react developer and then john votes for that and john says you know what we should hire a react developer and john is somebody in your community that has a lot of coins so he's rich in your community and he makes a decision unless john has like 50 000 coins and then bob comes along and bob says i'm against react react sucks i'm voting against it but bob only has 5 000 coins in your community now who will win on that decision john would and therefore the proposal to hire a new react developer would actually go through and imagine even one step further that developer you wanted to hire automatically got paid as soon as that proposal went through now that is a power of web 3 and this is a technology that's shifting the world and this is powered by blockchain and i'm going to show you how you can build all of this even if you're a complete beginner and you've never done anything with web3 you're going to be able to build this and what gives you a lot of value as a developer is if you could build things like this or communities like this for other influencers other creators other celebrities and you can give them a community where their community has voting powers where people can actually earn coins to be able to make decisions and change things i mean tomorrow jay-z or rihanna could have a huge community where their people have a voting power this could monumentally shift the world and you are at the forefront of learning technology like this so with that said i'm excited smash that like button so this video goes out to as many people as possible and hey by the way if you don't know me i'm rafa qazi the ceo and founder of clever programmer i've helped millions of people learn how to code and my job here is to make you a better developer now let's get into a little bit of a deeper dive into this app so i'm going to open this app up this app is powered by next js i'm going to connect my wallet with the meta mask so i'm going to click that and i'll be able to actually log in now that i logged in you could see that it's showing me the front page with proposals i can make a proposal like higher next gs dev or higher angular dev and once i've made the proposal you can see it shows me against foreign abstain that just means hey somebody can vote you can vote for do you want to be against this or for this or do you want to not vote on this at all say i go ahead and i say i am for hiring in nextgs developer and now you could see that boom it's asking me to open up my meta mask i go ahead and confirm the transaction and once i do that you could see um all right this there's you know x amount of coins like 50 000 coins or whatever delegated towards four okay so it's basically what it's doing is it's taking all of my uh coins in my wallet you know my ape coins or my developer dow coins or whatever right and it's delegating them towards the vote which means that if somebody else comes along and votes their vote will have more power you know if they have more money than me or more coins than me so how this works is whoever has the most coins their votes count higher okay so this way you have an incentive actually to earn points and credits inside of this community because the more coins you have the higher your voting power is therefore the more influence you can make inside of this community uh this app is powered by third web so a lot of the technology will be covered by third web and it'll make it really easy for us to access everything yeah so with that all of that said we're ready to pretty much get started here's what i want you to do go ahead and in the description below you're going to see a link that says join.replit.com cp dao so go ahead click that link below that'll take you to replit and then it's then go ahead and simply fork this repo or fork this ruffle it doesn't cost you anything it's completely free to fork and why i'm asking you to fork is because we're going to be giving away a ton of the assets for this build so for example we're giving away all of the front end the css html styling a lot of the react components because what i want to focus on is purely the uh web 3 part of this technology the blockchain part of this build okay so i don't want to focus too much on let's create these react components again for the 100th time right because we've done so much of that over the last few years so a lot of that front end is going to be given so when you fork that rublet you're already going to have access to all of the components etc and then what we're going to do is we're going to code everything step by step and the way that i've set it up for you there's exercises almost exercise like structure meaning there's going to be functions that are already there and then you're going to have to complete it and we'll complete it and walk through it together so my goal is that you get a ton of understanding of how this works you'll be able to hit run your app will run your functionality won't work yet because that's the part you're gonna have to add in and we're gonna add all of that part in from scratch so you will still understand and retain a lot that said i'm excited let's go ahead jump in and start coding this bad boy up all right so you can go ahead and name your fork whatever you want so i'm gonna call it instructor because this is gonna be mine you could go ahead and call it you know something completely different that's totally fine uh you could call it a project or you could just leave it as is that's fine too okay now once this is forked this is gonna be great we're gonna leave this alone now and what we're gonna do is set up because what we're gonna need is third web for this so let's go ahead and just set up third web real quick so we can make sure we can start building uh everything on here is completely free you could see third web is 100 free so click start all right and then we're gonna go ahead and click deploy new contract okay and before we do this here a couple of things you need to know make sure that in your meta mask you have uh your switch to the mumbai network okay and how you could do that is if you don't have that setup yet just in settings i mean if you don't have meta mask make sure you install and download metamask right that's step one but then you can go into advanced and you can go into networks show test networks and just turn that to yes okay so once you turn that to yes you'll be able to go and you'll be able to see all these networks i want you to switch to mumbai because rankaby will be deprecated soon so go ahead and do mumbai all right and now you should be in mumbai okay and then if you don't have matic we're gonna need to get you matic so just go ahead to mumbai faucet like that and then click here should bring you to this page and they just need your wallet address so click your metamask account click your wallet address and just copy it okay if you just click that button right there it'll copy it and paste it right here and hit send me matic okay for me since i've already asked it to send me matic it has sent me every 24 hours or sorry it has sent me one but i requested it a few hours ago so i won't be able to get new one but if you put it in you will be able to get a new one okay and then you should have matic and you should be good to go on that end okay now going back to this app over here let's go back and see okay what it should say is you should have some amount of matic so you might have to wait for a little bit it might take a second so just be patient maybe give it a few minutes if it's taking long but at some point you should look and you should have matic okay you're gonna need that because otherwise you won't be able to deploy contracts and do the next parts we're gonna do okay so once we're done with that great go ahead and hit deploy new contract okay and then we're going to go ahead click pre-built contracts and it says what do you want to build so we want to build really two things one we want to build a token so our community can have money and token and all that and two we want to be able to build votes so then we can have actual proposals and we can have voting powers etc so we want to do it in that order let's go ahead and build out our tokens first and then we're going to do our governance and splits which is where our votes are going to be so let's click this and we're going to choose token and inside of our token i want to choose i'm going to give it a name okay so i can go ahead and call this the ape uh ap coin dao okay and you could give it whatever image you want so i'll probably choose some random image but you could give it an image of um you could give it whatever image you want well that looks like that has a little monkey in it so i'll just give it that you can you should give it like a actual dowel image so that looks you know look cleaner that way and i'll say the symbol is ape for this okay and now for recipient address that'll be your wallet address right over here so those should match and then the chain make sure you scroll down and you choose mumbai and you choose matic okay once you do that we're gonna go ahead and click deploy now that button right there the deploy now button okay now it pops up our meta mask so let's go ahead and hit confirm and we will hit confirm and once we're good on that it's going to take a second but it's going to then take us to the next page where it's going to say hey you're done building out your token okay once we're done building out our token all we need to do is make sure that we distribute this token and we give the ap coin to ourselves all right now it took a while but it popped just this up right here the second confirmation so i'm gonna go ahead and hit confirm okay and then once that's confirmed we're pretty much good to go okay so that's still gonna take maybe another minute or something right 30 seconds a minute let's just wait for it all right now you should see this screen where it's a successfully deployed contract you should see this if coin dao and go ahead and just hit copy here so when you click that it'll copy it to your clipboard so just make sure you copy to your clipboard you don't need to click it a hundred times like i did but i just did it for fun so make sure that that's copied you're gonna need that for later right now you'll see that the amount of coins that a coin has to in total is zero and owned by you is zero so we're gonna go ahead and mint so we're gonna distribute coins and you could give as much supply as you want so we'll just say that there are a total of one million coins i believe that's one million let's just see uh that's not okay there we go that should be good let's go ahead and mint tokens and now it should distribute about one million coins to this community and um i think in the start they're by default owned they have to be owned by somebody so they'll just be owned by you and the start we can make another uh wallet and we can send some to another wallet as well okay now we wait all right now it says at the bottom tokens minted successfully so go ahead and refresh this page now and pretty soon it should show that there are 1 million coins in total supply 1 million are owned by you so let's go to our meta mask wallet and now here's what i want you to do in assets you see where i have ape you won't have that there okay so in order to get that to show up you're gonna need to click where it says import tokens so go ahead and click import tokens paste that contract address from here it will automatically say hey that's ape whatever hit add custom token and hit import tokens okay and now you got all of those okay so you just got all of these ape tokens okay i don't need this one so i'll hide hide this one for now there we go so this is the one that we just got okay so you have one million tokens here now if i had another um i can send these tokens to another person as well so for example say i go to this other account that i have bts cp2 okay that's my second account you could call it whatever you want okay you just make your own account and let's send it to this address so copy the address of the second account go back to your first account hit send paste the address of that and we're gonna send it ape so i'm gonna send it let's say three hundred thousand eight okay let's hit next and let's hit confirm okay now our meta mask is sending it and remember all of this is happening over the test network right so this is obviously none of it is real money just yet because you should build your apps on tests and then you should take them out to the um if you know final versions i'm just going to click speed up because this is fake money so i can just keep spending it to speed up the process you could hit speed up and hit submit and what that will do is speed up the process so it happens faster now let's go ahead and i have seven hundred thousand eight coins left okay and the confirmation is here that it has been sent so let's go back to bts cp2 my second account and let's also import this contract address so let's go ahead copy this uh okay let's copy this let's go ahead hit import tokens let's import the token all right ad yep if it doesn't know what the decimal is just put 18 we'll hit add import tokens there we go okay so now the 300 000 has been sent let's go to our account cool so now you can see that our account one has seven hundred thousand and when i switch this account to account two that has three hundred thousand so now inside of our third web i can see okay this is my total supply this is a total supply and this is what's actually owned by me okay so there you go so that's all good now the next thing we need to do is we need to deploy a voting contract okay so let's go ahead and let's go back to our app so i'm gonna click this home button right here okay and um now we're gonna go ahead and create a new dow okay so we've made a coin now we're sorry we just made uh apecoin so i just removed all the other contracts because i wanted to make your life simpler so it's easier to understand follow this tutorial so you should only have essentially one contract in here and right now that should just be your type token okay so this is not gonna be the voting one it's just gonna be your token okay so this is your coin this this is a contract address right there all right now we're going to go ahead and deploy a new contract and we're going to choose pre-built contracts we're going to go ahead and go government governance and splits let's go ahead click vote and then here we're going to call it ipcoin dao vote okay now it's going to ask for the token address you can paste the token address from your coin okay if you lost it go back and copy it but that's the token address you need that you you had earlier for voting period i'm gonna just choose 60 because it takes two seconds for every block this is 60 blocks so that basically means the voting period will last roughly two minutes long okay so that's basically what i'm saying there and then vote in quorum we'll leave this as zero and we'll leave voting delay at zero as well okay all right and then other than that everything else is good and then we have our mumbai matic chain make sure this is the chain you chose and then just go ahead and click deploy now so pretty soon this should be all set up and then we'll be coding okay well but we just got to get this all set up and then we're ready to code so hit confirm and then just wait might take a couple of seconds might take a few minutes but you know this is the web 3 world so sometimes you have to wait a little bit okay you're going to get used to that but in the future you know obviously they're going to make all of this much faster and you'll be able to get through it but right now it takes long because it has a lot of security mechanisms and features built into it so that ends up taking a second all right there we go so our contract is successfully deployed as you can see at the bottom and now it just says hey for your voting thing you're gonna need to delegate some stuff okay delegate to create your own proposals or vote on other proposals so i'm just going to go ahead and hit delegate tokens okay and then it will pop this thing up right here and hit yes all i'm saying is my 70 000 or 700 000 that i have yes i want that to be delegated towards voting now that doesn't mean i'm going to lose my 700 000 doesn't mean that at all i still keep all my 700 000 coins it just means that when i vote i am voting with the full power of my seven hundred thousand coins okay so that's all that delegating token means and now that i'm done with that the delegation is completed okay um well let's actually just see if it's actually completed or not so i'm gonna click meta mask you can see it's pending here so i could hit speed up hit submit and then it'll happen a little bit faster but it's cued right now and then once it's actually fully done when you hit refresh on this page it won't bother you about that delegation anymore okay so right now i can still see it's pending and it'll take a few seconds i imagine okay so let's wait for this all right now my delegation is complete i can confirm that from a meta mask that delegation has happened and i can see my balance here and that weird orange error message or whatever is not showing up anymore so that's a really good sign okay and this is our ape dow vote um coin address we're gonna need this later for now let's just simply head to our home page and you should be seeing these two contracts you've created so one should be a token and one should be a vote both of them should be on the mumbai testnet and then their contract addresses should be right here so you're going to need this later to copy this contract addresses and use them with that said ready to go back to our app and start coding all right so this is where you should be at right now let's just go back to our app and you should just be seeing it says apecoin dao and then it should say connect with metamask if you try to hit connect with metamask right now you're going to run into an error because we haven't connected anything um because the front end is there but the app is completely broken right now okay so we're going to go ahead and build it out step by step the first thing we're going to do is we're going to wrap this entire app in a third web provider okay so i'm gonna go ahead and and just so you can get the lay of the land before i even continue moving further okay uh you'll notice that index tsx like the basically this index file and it's just a next file so you could write regular next code here you should be fine okay all of this is already completed for you okay if you go to public or you go to styles all the styles here are done ahead of time for you if you go to next config that's already handled for you all packages and everything you need to install are already installed for you so you'll see on the left hand side they're all installed that you need like toastify react third web react third web sdk all of that everything is here free okay so we've set up this repel in a way where you have access to everything that you need i'm just gonna make the font size bigger so it's easier for you to see all the code okay so there you go so you have already access to pretty much everything okay let's go like this now inside of the main thing and components right we're giving away the header component we are giving away the so you know what's the header component so we're giving away this header component we're giving away all of this this the design for this the components that make up that right the proposal card component the login component this component right here okay all of that is given away in the front end and there's not crazy amount of complexity going on there okay this is something you you can kind of grasp your mind around or you could look at previous videos and see how we've done this so you should be good there now what we're actually going to be coding is if you go into your app tsx we're going to wrap this in the third web provider so we're going to be focused just on the web 3 logic okay now let's go ahead and think through this right now what i want to do is i want to wrap the entire app up inside my third web provider in order to do that i'm going to go ahead and say import and we'll say chain id and also third web provider third web provider okay and we're gonna say from i said third web dev slash react okay so we're gonna get chain id and third web provider now we're gonna wrap our entire app up inside of that the web provider so i'm going to go here and i'm going to say third web provider and we're going to give it a desired chain id okay now on line six you could see it says a comment here it says this is a chain id your dap will work on so let's head go ahead and set up our active chain id and i'm going to say chain id dot rinkeby and let's say const right there okay so basically i am from our chain id oh let's go ahead and go small c here from our chain id actually it's a capital c that we're importing capital c here we'll go capital c here okay so now we're importing rinkeby that will get us access to the ranking network make sure you do it with a capital r okay there we go so we're gonna say our desired chain id is this and we're gonna put it in squiggly so it knows we're referring to uh some javascript here active chain id and then we're gonna have to close our third web provider so we're going to go ahead and say third web provider just like that i'll format the code and so there you go okay now our app is wrapped inside of the third web provider so the entire app has access to third web so that'll be able so that'll make it easy for us to log in and anywhere we need third web data we can get it okay great so let's go ahead and save and it sometimes takes a second this page to load okay but once it is loaded you will see the home page showing up here but uh rinkybee is deprecated so we won't be using this we will be using in place of rinkaby we'll be using mumbai so let's go ahead and see if it has mumbai it seems like it does and that's what we're going to pass as our desired chain and that's going to be our active chain id all right guys so now we're going to transition into adding the authentication functionality into our app so what i want you to do is go ahead to this file in go to the folder context and go to context dot js go to this file right over here all right so one shot one note that you should know about is this context.js you probably saw on my screen there was solution.js but that file is supposed to be hidden so in yours you wouldn't see it you guys wouldn't see that okay because we're hiding the solution file from you if you want to see it click this hit show hidden files and it'll show you everything including the solution but i only recommend looking at that if you're really really stuck and can't get past it okay but the solution is there for you the whole time all right so now we have imported some of these files from third web sdk which you're going to need later so for example we need this use vote hook this use token hook use address use meta mask and use disconnect okay for now i don't want you to worry about these two i only want you to worry about these three we're going to use these three hooks right here to make sure that our connect wallet button is working okay so the connect wallet button is when you start your app and you have the connect wallet button show up on your right hand side this one we're just gonna go ahead and make that functionality work okay so in order to be able to do that by the way we have some notes here for you too so if you wanted to attempt this on your own right all the notes are there for you and what each function should do the bodies of the function are written make sure you don't change the bodies of the function they're i'm sorry make sure you add stuff to the bodies of the function but don't change their names because all their names are important and they're being referenced in other files and so if you like change the name or you make it lowercase or uppercase or whatever this create proposal function will not work and then you'll have to go in other files and make it work okay so just keep these variable names as they are all right so we've imported all of this stuff now let's go ahead and and add it so we're going to add this disconnect wallet and then connect with metamask all right here you can see this uh note that says get the address using third web's convenient hooks so i'm gonna remove where it says true and we're just gonna go ahead and say use address all right next up for connect with the meta mask we're gonna use the hook that we got from up here from third web sdk and we're gonna go ahead and say use meta mask okay and that will give us access to metamask and then we're gonna also disconnect wallet and so we're gonna use the use disconnect hook here okay so now our address is set our connect meta mask is set and disconnect wallet is set now what we have to do is we have to go down and we have to export all of these luckily our exporting is already done so normally you would have to export this okay you'll have to make sure that you say connect with metamask disconnect wallet and address all right so what we're going to do is technically this address that we have here is really the current user address okay whoever the current logged in user is so i'm just gonna go ahead i'm gonna right click this too and rename all references and i'll say current user address all right now just double check if you scroll down and make sure that current user address is right here as well and um so we're we're giving this off to our context provider okay and if i go to my context if i go outside of my context now to my login file so let's go to components and i'll go to my login.js component you can see that login is already destructure and connect with metamask so that's the one that we provided it it's getting it from our context and then down here you can see that on click we're giving it that connect with meta mask button now what we're going to do if we want to test this out and run this now metamask sometimes doesn't like working from an iframe so meaning within this window right so what we're going to do is we're going to hit that new tab at the top right this is opening a new tab so we'll open this up okay and let's try running this and let's see what happens and if you're wondering what the hell is happening with qazi's shirt that's just because it's a green shirt and i have a green screen behind me and so it thinks i'm not really wearing anything okay we'll wait for this app to load and then as soon as it loads we'll hit that connect button all right so if we have done everything correctly fingers crossed didn't mean to print that oops fingers crossed if i hit connect with meta mask my meta mask should pop up at the top so let's see connect with metamask boom there you go it's showing that i'll hit next connect and something should happen great so now we're getting an error which is totally okay okay we just all we're trying to make work right now is a connect wallet okay so there's some other part of the app that's complaining that's fine we're going to fix that no problem all right so now that we've connected the wallet with this connect with metamask that we added to our context.js now we should actually be able to go to the deployed version of the app so make sure you don't do it in preview because that won't work so go here and now we should be able to hit connect with meta mask and our metamask boy thing should pop up okay boom right there let's click that and connect boom look at that it brings me straight to the home page of the website right and i can see if coin down make a proposal and it's giving me uh whether it's against for or abstain how much has been against for or abstained and then a way to disconnect my wallet now this over here that you're seeing you can notice that there's a text in here and it says it's a dummy proposal okay so this is fake dummy data that we have hard coded for you so you could just see what it looks like but then what we're going to do in our next steps is we're going to auto populate it populated with actual data right so for example if i show you this if we go to our index.js you could see i have this state variable here called dummy data and inside of dummy data i have who the proposer is okay and i gave it a wallet address i'm telling it what the votes are right so you could see 30 thousand forty uh thirty thousand four hundred forty three right and then four has forty three thousand and you can see that four here has forty three thousand uh abstain has thirty four hundred which is right there so we're clearly pulling this from the dummy data and the dummy data is inside of our index.js all right so if we go back to our code and we go back to our login page okay you can see that we have given our connect with metamask but something else that we've actually done that's really cool if we go to i believe our index and we scroll down actually let's go to our header so let's get out of pages let's go to header.js and inside of header you're going to see that we have the disconnect button right and since you added it to context you can see we're getting our disconnect wallet from our context and right over here we're giving it to our on click so now when you actually click this disconnect wallet you'll get disconnected as well all right let's go ahead and hit disconnect wallet and first let's go ahead and just refresh the apps to make sure that all of our current changes are up to date all right so we're going to go ahead and hit that disconnect wallet button okay so i'm clicking it but nothing is really happening so give me one second here let's try it one more time boom there you go i hit disconnect wallet and you can see it's disconnected the reason why it's working is if you go to your header in your components you'll see we're already extracting disconnect wallet and then we're saying hey if the disconnect wallet function is there then on click disconnect the wallet otherwise just console log disconnect button clicked okay so in our case we do have access to it so then let's go ahead connect with blah blah let's hit disconnect and boom you see it just disconnects you right away all right so here's what we're gonna do let's go back to our third web dashboard and we're gonna go ahead to our a coin down vote that you created earlier and let's go ahead at the top right you see where it says create proposal click that so we're going to create a proposal and we're going to say uh we're going to say hire a reactions developer okay so i'm gonna make submit this proposal and then metamask is gonna pop up and it's gonna show me this i'm gonna go ahead and hit confirm okay then it's gonna okay let's see we've gotten an error all right so there you go my proposal is created successfully all i did is i just removed the emoji maybe it has problems when you do it with an emoji so if it failed for you like it failed for me the first time just do this and you should be fine now we have one proposal created already all right so now that we have this in here let's go back to our app and we're gonna try to actually pull all of this data and how we're gonna do this is inside of our let's go back to our context so inside of our context let's go down we're going to go ahead and get all of the proposals here okay and i'm going to say for getting all the proposals i'm going to say cons proposals and in order to get my proposals okay what i need to do is i need access to my contract address for voting so i need access to the voting contract address so how i'm going to do that is let's click to our home page and let's copy this vote contract address and so i'm gonna now go up top right here where we have let vote and i'm gonna now say use vote and i'm going to pop in that contract address now this use vote hook we've already used pulled it from here and you can see we have a used token hook as well okay so i'm now going to go ahead and save proposal is equal to await vote.getall so this will get all of my votes and then we can console log these proposals and then we can also simply return them all right now so watch this if everything you've done correctly here if you go to your app it should automatically pull your proposal and if you actually see it already is look at that it's pulling your proposal from the proposal that you've created right so for example if i go here i can see higher react.js developer and it's actually pulling it so that is fantastic i mean that is so slick that happens so quickly now let me show you all the kind of behind the scenes logic that um allowed it to get rendered to the front end so we're let's go ahead and see this right so we're we have this function get all proposals now we need our entire app to have access to this get all proposals and so what we have done is we've sent it to our provider get all proposals and then let's go to our index.js and inside of our index.js you'll see we have this use effect hook what it's doing is it's calling our get all proposals function and since it's a promise we're saying once you get it then check if there are any there are proposals so that's why it's checking the length if there are proposals then i want you to reverse the proposals so we call dot reverse on it and the point of this dot reverse here is so it reverses the order right so you actually see it in a descending order meaning the most recent ones first and then we go ahead and console log it so you could see it let's go back to the app i'm gonna hit inspect let's click console and you can see i'm getting these um arrays of objects here right and you can see inside of it i have a proposal and that proposal says hire react.js developer and then it has a bunch of different information in here that's not super useful for us but it can also tell us the votes and we can see it has votes and it has how many you know what are the types of those votes and how many votes those have okay so let's get out of here let's close this so it's already pulling the proposals like so for example if you made another one it will also pull that too so if i go ahead hit create proposal and i say hire a next.js developer okay let's hit submit proposal and make sure you have matic in your wallet okay hit confirm make sure you're on the mumbai network you have matic in your wallet okay so a couple of things just make sure if you get an error no problem just refresh try again if you added emojis remove them try it without emojis i think sometimes the emojis can throw it off is what i've noticed at least maybe you might notice something different if you notice that they don't really give you problems but it was something else let me know that too so here proposal successfully created and you can see higher nexus developer showing up but it's saying the state is currently pending which means that it won't be showing up yet in our app but once that state is not pending anymore it should show up right away there you go you could see our app is automatically pulling higher next yes developer so that is a really nice experience and this is what's helping do the rendering right it's calling the function and uh you know showing it out onto the screen so now well you might be asking okay how is proposals actually showing up kazi i see you're calling the function i see your console logging here how it's actually showing is if i let's go to command f4 proposals and here you see we have proposals and then we're just we're checking if that proposal exists if they do then we're iterating through the proposals and then we're building it out in a proposal card okay to get the keys all right so you can see that we're just rendering out the proposals that is what's allowing the proposals to show up okay if there are proposals then show them okay um and if there aren't if we if we're in a situation where we don't have proposals right so you can see the whole thing is wrapped in a ternary operator with proposals so proposals exist do this if proposals don't exist well then what i want you to do is show the dummy data you guys see that right there dummy data so this here is the structure of the one proposal we get right so imagine this is a proposal right here the top part of that proposal is the proposer who proposed okay and then uh this part over here which says testing or whatever right we said hire react.js developer that's the description and so this is the data structure okay so meaning like that object that we get back this is how we can parse it we can look we can grab the proposal from the proposal we could grab the description from it and a few other things now there are a few other things like the status so it can say defeated it can say successful so for example if the if most people were against and the vote is over ill say defeated if most people were four and it's over ill says successful okay so that's the status state and then you have a vote types array so this is like okay i have three types i have type against type four type abstain and then we have the vote count at the bottom that shows me okay against is eleven thousand four zero thousand and abstain is zero um or sorry not 0 000 what the hell zero eight coins and abstain is zero if coins okay so this is the data structure so if you understand this that's going to be valuable for you as we continue through the build all right now we're going to make this function create proposal and what this does is create a proposal to mint tokens to the dao's treasury okay so let's get to work on this create proposal guy now the first thing i want to do is i'm going to have an amount so i'll just set the amount here to 100 000. so if you do underscore this it's the same as saying this but this is just easier to read all right so we're going to get rid of this amount here actually so what we're going to do is going to be even some a lot simpler and i'm just going to go ahead and say hey get me the proposal and the proposal will be we're going to await vote.propose and uh this is what we're gonna propose we're gonna pass in the description the user gave us and that's it okay and then we're just gonna console.log the proposal proposal okay so this statement right here just this command right here will automatically create create a proposal for us and it'll add it to our third web so we're gonna see another proposals pop up in there now let's go above and finish our is executable function all right so what we're going to do is we're going to go right here and for our is executable it's going to take in an id okay and it's going to check if the proposal given is executable okay so i'm going to go ahead and say const can execute and then this is going to return to us a boolean and i'm just going to say vote can execute and it'll take in an id okay and then we'll just return can execute all right boom done and then we're going to also check if the user has voted for the given proposal so this will actually check if if the whatever the user was you know mostly the logged in user if that user has voted or not and so we're gonna say await vote dot has voted and we're gonna take in the address of that user as well okay and then um we're gonna go ahead down here and we're gonna say has voted and then we're just going to return the res all right we're going to call this current user address okay because that's what we're choosing to call this so everywhere you see address change it with current user address and so there we go and that should be what check if voted should look like all right so for the vote for i'm gonna go ahead and say try and then i'm gonna set our delegation and i'm going to say await token.get delegation of and we're going to get current user address okay and then if the user has delegation okay delegation so this will basically just check if the coins have been delegated right if they have been then we're gonna say delegate to address all right and we're gonna say vote type and let's go down here i'm going to say if the type is against here's what i want to happen okay so if the type is against i want to set vote type to vote type dot against all right so vote type if you're seeing hey what is this vote type it's actually being we're calling it from third web so we're calling it right here vote type okay we're importing it so let's go ahead and go for type not against and then we'll say else if type is for okay if this is the case we're gonna say vote type is equal to vote votetype.4 okay and then we're going to say we're going to go down here we're going to say else vote type is equal to vote type abstain because that's really the only choice left at that point stain just like this okay so let's get out of this else here and i'm gonna say my result is and we're gonna await check if voted we're gonna pass it the id if i have not voted all right so this in other words had this is really has voted okay so you could change that so then it's like okay so if the user has not voted then effectively i want you to await and go ahead and vote okay so then we're gonna go ahead and call uh your you know we're gonna we're gonna place a vote all right that's what we're gonna do if you haven't like if you clicked it and you hadn't voted yet then we're gonna place a vote otherwise we're going to say you have already voted for this proposal okay and we can even make it fun i guess it oh oh looks like you have already voted for this proposal okay so if you have already voted it will detect that with this okay and then at the end of all of this this try catch block we're gonna go ahead and say catch and we'll say error sorry error okay and if there is an error then i just want you to console log it so we can just go ahead and say console log there we go okay so this is our vote for all right all right so if you actually scroll up here and you see this error that says property delegate 2 does not exist on type string we have not add given any value to token so let's go ahead and set that up so we have this use token hook that we have so let's go ahead and do this we're going to say use token okay and then this is going to take in the token address that you got from um from third web so go back to your home page on third web and on your home page you're gonna see your token copy the contract address for your token okay so make sure it says make sure it says token right here okay contract type and then just paste that so now you have token okay now that error should go away because delegate2 does exist on it okay and then make this a capital left here for votetype.4 make it a capital f and that'll get rid of that little error that was showing up okay and just to kind of recap and understand what's happening here this part of the code is basically saying hey delegate your custom tokens you own to be used to vote okay this part here is determining what the user voted and then our parts underneath it is check if the user has voted okay if they haven't voted then cast their vote and if they have already voted then just let them know you've already voted and here we're just catching any errors that happen okay so that's really what's happening in this entire script it looks scary but it's really not all right guys so let's go back to our app and see if you can create a proposal and vote for it so if you had done everything correctly in here you should be able to do something okay with it so i'm gonna go ahead and say hire an angular developer okay let's go ahead and hit submit and see what happens okay something really weird happened but um our mask popped up so let's go ahead and hit confirm and let's see what will happen okay so let's fix this probably some icon is showing up but it's telling us that it's submitting our proposal here so that's a good sign now let's take a look at our meta mask and let's go ahead and speed this up and we'll fix this ui bug that's happening but let's just see if our vote is being casted or not that's the main main main thing because if our vote or if our proposal is being created then you know the main functionality app is working so our proposal looks like went through let's refresh and let's look at here as well let's refresh our third web and see if in our third web we got a new proposal oh nice look at that we just got a brand new proposal hire an angular developer proposed by and it seems like it's pulling my wallet address and let's see here yo that is sick right like our angular developer uh proposal is coming up so that is beautiful all right so basically that little error that happened it was toastify and it was missing its css so that's why you didn't really see anything so we're just gonna go ahead and import this inside of our index.js okay you probably will already have this but it just wasn't there in mind so because i want to give away all the front end i'm going to give you this don't worry so then you don't have to deal with that stupid problem let's go back here and let's make another proposal and i'll just call it another proposal and let's hit submit and see what happens and now you can see it looks beautiful right submitting proposal comes up looks really nice and i can hit confirm and now you know if the proposal is done it will tell me it's successfully done too so that's the really nice part so i'm gonna speed it up in the meantime just keep paying for it and hitting speed up okay and then whenever uh it's done you can go ahead and hit refresh all right so this is good now let's get out of here we have our app working right our toaster toastify thing was showing up at the top submitting a proposal looked clean looked nice and now we know our proposal has went through if we refresh on third web we'll be able to see it and then if we go back and we refresh here we'll see it now it's time to vote so let's see if our voting would work okay so i'm gonna go ahead and hit open up inspect element as well so i could see what's happening and let's go ahead and hit four here and uh it says false has voted so you see it doesn't it notices that i haven't voted yet so that's a really good sign and then i'm gonna go ahead and hit confirm all right so i've had i hit confirm and now let's see how long it takes for my vote to cast cast vote with reason is what you should see it's queued up and i'm gonna go ahead and hit refresh on third web as well to take a look if my vote has come through yet i don't think it has okay not yet it's still loading and now let's speed it up so it happens just a wee bit faster okay speed it up some more right let's refresh okay so sometimes this can take a second don't you know don't worry about it's not too big of a problem we'll just wait it out ten percent increase let we do aggressive it doesn't seem like it's allowing us to go much faster ah there we go okay so we could see that we have voted for this and there is 700 000 a coins worth of power towards this proposal meaning if somebody wants to overthrow this they need to vote they need to have like more than seven hundred thousand coins uh eight coins to beat my vote so it either needs to be multiple people that need to vote that have more than seven hundred thousand eight points or it needs to be somebody who's like richer right in this community than me who needs to vote and overthrow me otherwise this is not gonna get overthrown and this another proposal is gonna get passed in favor four okay so after two minutes pass pretty much the proposal window's gonna close and you see it says this one says defeated pretty soon this one is gonna say successful because we have a four and we don't have any against or abstains so it seems like it's gonna go through okay so there you go it looks like almost all of the functionality of our app is working right we don't really we're not really facing any problems all right now i'm going to try to vote as a second person so it looks like there's multiple people voting here so i'm going to go ahead and refresh um and yeah and you can see right it's actually pulling the 700 000 eight coins it can see that too which is super cool now i'm gonna come in and log in as a different user to vote so let's go ahead and let's actually try voting as the same user and let's see it goes uh oh looks like you have already voted for this proposal so you can detect very clearly that you have voted so that's good now i'm going to switch my user so i'm going to go ahead and go to my other user and i'm going to connect to the site and let's go here and now i'm going to vote against and let's see what happens i tried voting against and it says address is not defined so let's go ahead and see where we're using address and where it's not defined all right so here this is it it's we're using address when we should really be using current user address so let's go back to our app let's hit refresh and let's try that same thing again and let's see what happens so that vote has ended okay so that vote actually just ended because uh this is successful because two minutes passed and we had uh two minutes passed and we already had somebody voting for and nobody else voted in that time frame so that looks like it succeeded all right so now you can see that i have this whole thing coming up it says successful okay and we have this execute button here as well so this execute button would be like if you wanted to set it up so like let's just say that you wanted to hire a developer and you knew exactly which developer it was and then you had their wallet address right here you could hit this execute button once this vote passed and it would automatically fund their account with money okay so that's the really cool part about this you could do it like that now i'm gonna create a proposal from a different account and let's see what happens let's see if we run into any problems i'm gonna say um eat a cookie no hold on eat ice cream tonight so let's see what we want to vote for we want to eat ice cream or cookie or what do we want to eat so let's see let's go ahead and start with ice cream i'm going to try to create a proposal and you're going to see i get this error that says proposer votes below threshold and this basically implies that i haven't delegated my coins to this dao and so therefore i'm not able to like create a proposal with it or do anything so we're going to go ahead and fix that now okay so let's go back to our app we're going to write a use-effect hook that's going to catch a scenario where the user who hasn't delegated their coins can can use this dao okay so we're going to create a use effect hook and use effect we have a function and then our dependency array is going to be empty so it's not it's going to just fire off on page refresh and it's going to be an async function i'm going to go ahead and say try so we're going to try and see if we have this delegation and i'm going to await it okay we're going to get delegation of the current of the current user so i'm going to say current user address okay and then if delegation so we're going to actually repeat this code and we could probably even just copy some of this so this part over here just copy this and paste this because we're effectively doing this same thing here okay so i'm going to say boom paste okay there we go okay and then we're gonna say catch and for catch we're gonna do the same thing hey if there's an error then just console.log and we're going to say error.message and we'll we'll follow it up with error and then us and then since this is a iife okay me iife immediately invoked function expression that just basically means that since this function doesn't have a name you need to call it right away because if you don't then you won't ever be able to reference it by anything so i'm just gonna call it right away okay so this block of code will just call itself and yeah it'll call itself whenever the app loads so let's go ahead now we're getting this error that says use effect is not defined not a problem we're just going to go ahead and import use effect from react so i'm going to go ahead and say use effect and then we should be gucci okay and then let's go to our app and let's go ahead and hit refresh okay and now let's try making a proposal so proposal uh eat ice cream tonight let's go ahead and put an ice cream emoji there i'm gonna hit submit there we go now it says submitting proposal ah okay getting an error again all right now what i want you to do is just switch back to the main account okay so i'm gonna go ahead and i'm gonna reject this just ignore ignore this for now okay don't worry about that go back to your main account so i'm just gonna switch back to my main account that i was on which is my btscp in this case and then i'm going to make the same proposal with the main account and let's see if we can vote from the main account and another account so let's try that that's important because we we don't also want maybe everybody to make a proposal we want it to be where only like we as the owners of an account can make um the proposal so let's start with this for now and uh let's take a look at our metamask and see what's happening so i'm going to go ahead and say speed up and then we'll wait and it looks like the proposal has happened so if i hit refresh it should pop up pretty much right away all right there we go i got my ice cream proposal i'm gonna go ahead and say i'm for eating ice cream so i'm gonna hit i'm gonna vote for four and this popped up let's go ahead and hit confirm and now we'll see what happens okay so now we have one person voting for let's just double check that our vote is going through i'll just speed it up a little bit okay but in the meantime while that vote is pending i'm gonna go ahead and switch so that vote shouldn't be pending anymore actually but let's refresh and that vote should be showing up and you can see that 700 000 worth of ape coins have voted for ice cream tonight now remember this is not you actually putting your money on the line it's just saying that your seven your vote has seven hundred thousand a coins worth of power okay that's all that means now let's go to our uh bts cp2 account okay so you're go now go to your second account and from your second account just go ahead and see if you could vote so i'm going to go ahead and say against and boom look at that it actually allows me to vote and let's go ahead and hit confirm and now let's go to our app here i'm gonna hit refresh okay and there you go you can actually see um actually hold on i think our vote is still processing it hasn't happened yet so i could speed it up now it has happened let's refresh let's take a look oh we don't i don't see it yet i don't see it yet so that means i must have voted without having my coins be delegated right that's probably that's probably what that actually means okay so let's see what the error what problem we're running into here okay we're still running into that error okay let's go back let's go to our dashboard and let's hit refresh on this ice cream one ah so what happened the first time it was actually delegating my tokens towards the thing now i can actually vote so let's go ahead and vote okay so delegation just means i'm allowing you know if uh i'm a law allowing uh my vote to have power with this ape coins okay so i'm delegating my coins towards the power of voting and these you know towards these proposals now i can actually vote so this is this is working as expected so this is good this is good all right so our vote is now pending okay our delegation is complete so that's good let's go ahead and speed up our vote it says queued and once it's done you'll see that it'll be a green text underneath it which would imply that it is done there we go and now we could see august 2nd and it is done okay let's go ahead and hit refresh and let's see if we have somebody let's wait for it wait for it let's wait to get the dynamic data okay let's go to our dashboard and let's see if we voted for it or not okay we have active awesome so you saw how we were able to do that now we can actually even make another one right eat cookies later and let me put a cookie here and i'll hit submit and now watch this from my second account it's also allowing me so let me just reject all of these transactions for now so i can just show this from scratch let's go ahead and just refresh now you'll see from my second account since i've delegated my tokens i can now make a proposal from this account as well so eat cookies tonight let's put a cookie and let's hit submit okay and now you're going to see my meta mask pop up right there above my head and i'm going to go ahead and hit confirm and now that proposal should be able should be popping up soon okay so we'll just wait for it and uh if it allows you to just go ahead and speed it up okay all right there we go our uh our proposal seems to have happened so now with the second account i should have been able to create my proposal and boom there you go i was able to actually create my proposal with the second account so with that said guys i hope you enjoyed this build it was a ton of fun to build it together with you from scratch we had already done a lot of the front end work which means that if you followed along hopefully it saved you a ton of time from having to do every single thing from scratch so make sure you fork the rapplet below because it'll save your life it'll you know be able to give you all the front end all the styling the components so that way you're only writing the web 3 logic and doing a lot of the third web stuff with that said i hope you enjoyed it i hope you picked up something a new skill out of it and just so you have some context right blockchain world there's a lot of opportunity there a lot of developers making you know 70 000 thousand dollars hundred thousand dollars a year and a bunch of developers i personally know they're making hundred that thirty thousand two hundred thousand three hundred thousand dollars a year or more and so if you're good in this community and you're as in you're a great developer and you're a good person you can go pretty far and this industry is just booming so if you learn these skills you'll be very you know sought after and if you use something like third web it makes it a lot easier for you right to be able to do all of these things it simplifies the process and it just makes it a much more enjoyable experience instead of having to just write every single line of solidity code all by yourself and that just makes things more complicated with that said i love your beautiful face i hope you enjoyed this video and as always i'll see you in the next videowhat if you wanted to build an app where your community has the voting power to make decisions so if you were between hiring an angular js developer or a react developer your community can actually help vote and not only that let's take it a step further people who had more coins in your community their vote actually held more weight in the decision-making process so let's say you ask your community hey should we hire a react developer and then john votes for that and john says you know what we should hire a react developer and john is somebody in your community that has a lot of coins so he's rich in your community and he makes a decision unless john has like 50 000 coins and then bob comes along and bob says i'm against react react sucks i'm voting against it but bob only has 5 000 coins in your community now who will win on that decision john would and therefore the proposal to hire a new react developer would actually go through and imagine even one step further that developer you wanted to hire automatically got paid as soon as that proposal went through now that is a power of web 3 and this is a technology that's shifting the world and this is powered by blockchain and i'm going to show you how you can build all of this even if you're a complete beginner and you've never done anything with web3 you're going to be able to build this and what gives you a lot of value as a developer is if you could build things like this or communities like this for other influencers other creators other celebrities and you can give them a community where their community has voting powers where people can actually earn coins to be able to make decisions and change things i mean tomorrow jay-z or rihanna could have a huge community where their people have a voting power this could monumentally shift the world and you are at the forefront of learning technology like this so with that said i'm excited smash that like button so this video goes out to as many people as possible and hey by the way if you don't know me i'm rafa qazi the ceo and founder of clever programmer i've helped millions of people learn how to code and my job here is to make you a better developer now let's get into a little bit of a deeper dive into this app so i'm going to open this app up this app is powered by next js i'm going to connect my wallet with the meta mask so i'm going to click that and i'll be able to actually log in now that i logged in you could see that it's showing me the front page with proposals i can make a proposal like higher next gs dev or higher angular dev and once i've made the proposal you can see it shows me against foreign abstain that just means hey somebody can vote you can vote for do you want to be against this or for this or do you want to not vote on this at all say i go ahead and i say i am for hiring in nextgs developer and now you could see that boom it's asking me to open up my meta mask i go ahead and confirm the transaction and once i do that you could see um all right this there's you know x amount of coins like 50 000 coins or whatever delegated towards four okay so it's basically what it's doing is it's taking all of my uh coins in my wallet you know my ape coins or my developer dow coins or whatever right and it's delegating them towards the vote which means that if somebody else comes along and votes their vote will have more power you know if they have more money than me or more coins than me so how this works is whoever has the most coins their votes count higher okay so this way you have an incentive actually to earn points and credits inside of this community because the more coins you have the higher your voting power is therefore the more influence you can make inside of this community uh this app is powered by third web so a lot of the technology will be covered by third web and it'll make it really easy for us to access everything yeah so with that all of that said we're ready to pretty much get started here's what i want you to do go ahead and in the description below you're going to see a link that says join.replit.com cp dao so go ahead click that link below that'll take you to replit and then it's then go ahead and simply fork this repo or fork this ruffle it doesn't cost you anything it's completely free to fork and why i'm asking you to fork is because we're going to be giving away a ton of the assets for this build so for example we're giving away all of the front end the css html styling a lot of the react components because what i want to focus on is purely the uh web 3 part of this technology the blockchain part of this build okay so i don't want to focus too much on let's create these react components again for the 100th time right because we've done so much of that over the last few years so a lot of that front end is going to be given so when you fork that rublet you're already going to have access to all of the components etc and then what we're going to do is we're going to code everything step by step and the way that i've set it up for you there's exercises almost exercise like structure meaning there's going to be functions that are already there and then you're going to have to complete it and we'll complete it and walk through it together so my goal is that you get a ton of understanding of how this works you'll be able to hit run your app will run your functionality won't work yet because that's the part you're gonna have to add in and we're gonna add all of that part in from scratch so you will still understand and retain a lot that said i'm excited let's go ahead jump in and start coding this bad boy up all right so you can go ahead and name your fork whatever you want so i'm gonna call it instructor because this is gonna be mine you could go ahead and call it you know something completely different that's totally fine uh you could call it a project or you could just leave it as is that's fine too okay now once this is forked this is gonna be great we're gonna leave this alone now and what we're gonna do is set up because what we're gonna need is third web for this so let's go ahead and just set up third web real quick so we can make sure we can start building uh everything on here is completely free you could see third web is 100 free so click start all right and then we're gonna go ahead and click deploy new contract okay and before we do this here a couple of things you need to know make sure that in your meta mask you have uh your switch to the mumbai network okay and how you could do that is if you don't have that setup yet just in settings i mean if you don't have meta mask make sure you install and download metamask right that's step one but then you can go into advanced and you can go into networks show test networks and just turn that to yes okay so once you turn that to yes you'll be able to go and you'll be able to see all these networks i want you to switch to mumbai because rankaby will be deprecated soon so go ahead and do mumbai all right and now you should be in mumbai okay and then if you don't have matic we're gonna need to get you matic so just go ahead to mumbai faucet like that and then click here should bring you to this page and they just need your wallet address so click your metamask account click your wallet address and just copy it okay if you just click that button right there it'll copy it and paste it right here and hit send me matic okay for me since i've already asked it to send me matic it has sent me every 24 hours or sorry it has sent me one but i requested it a few hours ago so i won't be able to get new one but if you put it in you will be able to get a new one okay and then you should have matic and you should be good to go on that end okay now going back to this app over here let's go back and see okay what it should say is you should have some amount of matic so you might have to wait for a little bit it might take a second so just be patient maybe give it a few minutes if it's taking long but at some point you should look and you should have matic okay you're gonna need that because otherwise you won't be able to deploy contracts and do the next parts we're gonna do okay so once we're done with that great go ahead and hit deploy new contract okay and then we're going to go ahead click pre-built contracts and it says what do you want to build so we want to build really two things one we want to build a token so our community can have money and token and all that and two we want to be able to build votes so then we can have actual proposals and we can have voting powers etc so we want to do it in that order let's go ahead and build out our tokens first and then we're going to do our governance and splits which is where our votes are going to be so let's click this and we're going to choose token and inside of our token i want to choose i'm going to give it a name okay so i can go ahead and call this the ape uh ap coin dao okay and you could give it whatever image you want so i'll probably choose some random image but you could give it an image of um you could give it whatever image you want well that looks like that has a little monkey in it so i'll just give it that you can you should give it like a actual dowel image so that looks you know look cleaner that way and i'll say the symbol is ape for this okay and now for recipient address that'll be your wallet address right over here so those should match and then the chain make sure you scroll down and you choose mumbai and you choose matic okay once you do that we're gonna go ahead and click deploy now that button right there the deploy now button okay now it pops up our meta mask so let's go ahead and hit confirm and we will hit confirm and once we're good on that it's going to take a second but it's going to then take us to the next page where it's going to say hey you're done building out your token okay once we're done building out our token all we need to do is make sure that we distribute this token and we give the ap coin to ourselves all right now it took a while but it popped just this up right here the second confirmation so i'm gonna go ahead and hit confirm okay and then once that's confirmed we're pretty much good to go okay so that's still gonna take maybe another minute or something right 30 seconds a minute let's just wait for it all right now you should see this screen where it's a successfully deployed contract you should see this if coin dao and go ahead and just hit copy here so when you click that it'll copy it to your clipboard so just make sure you copy to your clipboard you don't need to click it a hundred times like i did but i just did it for fun so make sure that that's copied you're gonna need that for later right now you'll see that the amount of coins that a coin has to in total is zero and owned by you is zero so we're gonna go ahead and mint so we're gonna distribute coins and you could give as much supply as you want so we'll just say that there are a total of one million coins i believe that's one million let's just see uh that's not okay there we go that should be good let's go ahead and mint tokens and now it should distribute about one million coins to this community and um i think in the start they're by default owned they have to be owned by somebody so they'll just be owned by you and the start we can make another uh wallet and we can send some to another wallet as well okay now we wait all right now it says at the bottom tokens minted successfully so go ahead and refresh this page now and pretty soon it should show that there are 1 million coins in total supply 1 million are owned by you so let's go to our meta mask wallet and now here's what i want you to do in assets you see where i have ape you won't have that there okay so in order to get that to show up you're gonna need to click where it says import tokens so go ahead and click import tokens paste that contract address from here it will automatically say hey that's ape whatever hit add custom token and hit import tokens okay and now you got all of those okay so you just got all of these ape tokens okay i don't need this one so i'll hide hide this one for now there we go so this is the one that we just got okay so you have one million tokens here now if i had another um i can send these tokens to another person as well so for example say i go to this other account that i have bts cp2 okay that's my second account you could call it whatever you want okay you just make your own account and let's send it to this address so copy the address of the second account go back to your first account hit send paste the address of that and we're gonna send it ape so i'm gonna send it let's say three hundred thousand eight okay let's hit next and let's hit confirm okay now our meta mask is sending it and remember all of this is happening over the test network right so this is obviously none of it is real money just yet because you should build your apps on tests and then you should take them out to the um if you know final versions i'm just going to click speed up because this is fake money so i can just keep spending it to speed up the process you could hit speed up and hit submit and what that will do is speed up the process so it happens faster now let's go ahead and i have seven hundred thousand eight coins left okay and the confirmation is here that it has been sent so let's go back to bts cp2 my second account and let's also import this contract address so let's go ahead copy this uh okay let's copy this let's go ahead hit import tokens let's import the token all right ad yep if it doesn't know what the decimal is just put 18 we'll hit add import tokens there we go okay so now the 300 000 has been sent let's go to our account cool so now you can see that our account one has seven hundred thousand and when i switch this account to account two that has three hundred thousand so now inside of our third web i can see okay this is my total supply this is a total supply and this is what's actually owned by me okay so there you go so that's all good now the next thing we need to do is we need to deploy a voting contract okay so let's go ahead and let's go back to our app so i'm gonna click this home button right here okay and um now we're gonna go ahead and create a new dow okay so we've made a coin now we're sorry we just made uh apecoin so i just removed all the other contracts because i wanted to make your life simpler so it's easier to understand follow this tutorial so you should only have essentially one contract in here and right now that should just be your type token okay so this is not gonna be the voting one it's just gonna be your token okay so this is your coin this this is a contract address right there all right now we're going to go ahead and deploy a new contract and we're going to choose pre-built contracts we're going to go ahead and go government governance and splits let's go ahead click vote and then here we're going to call it ipcoin dao vote okay now it's going to ask for the token address you can paste the token address from your coin okay if you lost it go back and copy it but that's the token address you need that you you had earlier for voting period i'm gonna just choose 60 because it takes two seconds for every block this is 60 blocks so that basically means the voting period will last roughly two minutes long okay so that's basically what i'm saying there and then vote in quorum we'll leave this as zero and we'll leave voting delay at zero as well okay all right and then other than that everything else is good and then we have our mumbai matic chain make sure this is the chain you chose and then just go ahead and click deploy now so pretty soon this should be all set up and then we'll be coding okay well but we just got to get this all set up and then we're ready to code so hit confirm and then just wait might take a couple of seconds might take a few minutes but you know this is the web 3 world so sometimes you have to wait a little bit okay you're going to get used to that but in the future you know obviously they're going to make all of this much faster and you'll be able to get through it but right now it takes long because it has a lot of security mechanisms and features built into it so that ends up taking a second all right there we go so our contract is successfully deployed as you can see at the bottom and now it just says hey for your voting thing you're gonna need to delegate some stuff okay delegate to create your own proposals or vote on other proposals so i'm just going to go ahead and hit delegate tokens okay and then it will pop this thing up right here and hit yes all i'm saying is my 70 000 or 700 000 that i have yes i want that to be delegated towards voting now that doesn't mean i'm going to lose my 700 000 doesn't mean that at all i still keep all my 700 000 coins it just means that when i vote i am voting with the full power of my seven hundred thousand coins okay so that's all that delegating token means and now that i'm done with that the delegation is completed okay um well let's actually just see if it's actually completed or not so i'm gonna click meta mask you can see it's pending here so i could hit speed up hit submit and then it'll happen a little bit faster but it's cued right now and then once it's actually fully done when you hit refresh on this page it won't bother you about that delegation anymore okay so right now i can still see it's pending and it'll take a few seconds i imagine okay so let's wait for this all right now my delegation is complete i can confirm that from a meta mask that delegation has happened and i can see my balance here and that weird orange error message or whatever is not showing up anymore so that's a really good sign okay and this is our ape dow vote um coin address we're gonna need this later for now let's just simply head to our home page and you should be seeing these two contracts you've created so one should be a token and one should be a vote both of them should be on the mumbai testnet and then their contract addresses should be right here so you're going to need this later to copy this contract addresses and use them with that said ready to go back to our app and start coding all right so this is where you should be at right now let's just go back to our app and you should just be seeing it says apecoin dao and then it should say connect with metamask if you try to hit connect with metamask right now you're going to run into an error because we haven't connected anything um because the front end is there but the app is completely broken right now okay so we're going to go ahead and build it out step by step the first thing we're going to do is we're going to wrap this entire app in a third web provider okay so i'm gonna go ahead and and just so you can get the lay of the land before i even continue moving further okay uh you'll notice that index tsx like the basically this index file and it's just a next file so you could write regular next code here you should be fine okay all of this is already completed for you okay if you go to public or you go to styles all the styles here are done ahead of time for you if you go to next config that's already handled for you all packages and everything you need to install are already installed for you so you'll see on the left hand side they're all installed that you need like toastify react third web react third web sdk all of that everything is here free okay so we've set up this repel in a way where you have access to everything that you need i'm just gonna make the font size bigger so it's easier for you to see all the code okay so there you go so you have already access to pretty much everything okay let's go like this now inside of the main thing and components right we're giving away the header component we are giving away the so you know what's the header component so we're giving away this header component we're giving away all of this this the design for this the components that make up that right the proposal card component the login component this component right here okay all of that is given away in the front end and there's not crazy amount of complexity going on there okay this is something you you can kind of grasp your mind around or you could look at previous videos and see how we've done this so you should be good there now what we're actually going to be coding is if you go into your app tsx we're going to wrap this in the third web provider so we're going to be focused just on the web 3 logic okay now let's go ahead and think through this right now what i want to do is i want to wrap the entire app up inside my third web provider in order to do that i'm going to go ahead and say import and we'll say chain id and also third web provider third web provider okay and we're gonna say from i said third web dev slash react okay so we're gonna get chain id and third web provider now we're gonna wrap our entire app up inside of that the web provider so i'm going to go here and i'm going to say third web provider and we're going to give it a desired chain id okay now on line six you could see it says a comment here it says this is a chain id your dap will work on so let's head go ahead and set up our active chain id and i'm going to say chain id dot rinkeby and let's say const right there okay so basically i am from our chain id oh let's go ahead and go small c here from our chain id actually it's a capital c that we're importing capital c here we'll go capital c here okay so now we're importing rinkeby that will get us access to the ranking network make sure you do it with a capital r okay there we go so we're gonna say our desired chain id is this and we're gonna put it in squiggly so it knows we're referring to uh some javascript here active chain id and then we're gonna have to close our third web provider so we're going to go ahead and say third web provider just like that i'll format the code and so there you go okay now our app is wrapped inside of the third web provider so the entire app has access to third web so that'll be able so that'll make it easy for us to log in and anywhere we need third web data we can get it okay great so let's go ahead and save and it sometimes takes a second this page to load okay but once it is loaded you will see the home page showing up here but uh rinkybee is deprecated so we won't be using this we will be using in place of rinkaby we'll be using mumbai so let's go ahead and see if it has mumbai it seems like it does and that's what we're going to pass as our desired chain and that's going to be our active chain id all right guys so now we're going to transition into adding the authentication functionality into our app so what i want you to do is go ahead to this file in go to the folder context and go to context dot js go to this file right over here all right so one shot one note that you should know about is this context.js you probably saw on my screen there was solution.js but that file is supposed to be hidden so in yours you wouldn't see it you guys wouldn't see that okay because we're hiding the solution file from you if you want to see it click this hit show hidden files and it'll show you everything including the solution but i only recommend looking at that if you're really really stuck and can't get past it okay but the solution is there for you the whole time all right so now we have imported some of these files from third web sdk which you're going to need later so for example we need this use vote hook this use token hook use address use meta mask and use disconnect okay for now i don't want you to worry about these two i only want you to worry about these three we're going to use these three hooks right here to make sure that our connect wallet button is working okay so the connect wallet button is when you start your app and you have the connect wallet button show up on your right hand side this one we're just gonna go ahead and make that functionality work okay so in order to be able to do that by the way we have some notes here for you too so if you wanted to attempt this on your own right all the notes are there for you and what each function should do the bodies of the function are written make sure you don't change the bodies of the function they're i'm sorry make sure you add stuff to the bodies of the function but don't change their names because all their names are important and they're being referenced in other files and so if you like change the name or you make it lowercase or uppercase or whatever this create proposal function will not work and then you'll have to go in other files and make it work okay so just keep these variable names as they are all right so we've imported all of this stuff now let's go ahead and and add it so we're going to add this disconnect wallet and then connect with metamask all right here you can see this uh note that says get the address using third web's convenient hooks so i'm gonna remove where it says true and we're just gonna go ahead and say use address all right next up for connect with the meta mask we're gonna use the hook that we got from up here from third web sdk and we're gonna go ahead and say use meta mask okay and that will give us access to metamask and then we're gonna also disconnect wallet and so we're gonna use the use disconnect hook here okay so now our address is set our connect meta mask is set and disconnect wallet is set now what we have to do is we have to go down and we have to export all of these luckily our exporting is already done so normally you would have to export this okay you'll have to make sure that you say connect with metamask disconnect wallet and address all right so what we're going to do is technically this address that we have here is really the current user address okay whoever the current logged in user is so i'm just gonna go ahead i'm gonna right click this too and rename all references and i'll say current user address all right now just double check if you scroll down and make sure that current user address is right here as well and um so we're we're giving this off to our context provider okay and if i go to my context if i go outside of my context now to my login file so let's go to components and i'll go to my login.js component you can see that login is already destructure and connect with metamask so that's the one that we provided it it's getting it from our context and then down here you can see that on click we're giving it that connect with meta mask button now what we're going to do if we want to test this out and run this now metamask sometimes doesn't like working from an iframe so meaning within this window right so what we're going to do is we're going to hit that new tab at the top right this is opening a new tab so we'll open this up okay and let's try running this and let's see what happens and if you're wondering what the hell is happening with qazi's shirt that's just because it's a green shirt and i have a green screen behind me and so it thinks i'm not really wearing anything okay we'll wait for this app to load and then as soon as it loads we'll hit that connect button all right so if we have done everything correctly fingers crossed didn't mean to print that oops fingers crossed if i hit connect with meta mask my meta mask should pop up at the top so let's see connect with metamask boom there you go it's showing that i'll hit next connect and something should happen great so now we're getting an error which is totally okay okay we just all we're trying to make work right now is a connect wallet okay so there's some other part of the app that's complaining that's fine we're going to fix that no problem all right so now that we've connected the wallet with this connect with metamask that we added to our context.js now we should actually be able to go to the deployed version of the app so make sure you don't do it in preview because that won't work so go here and now we should be able to hit connect with meta mask and our metamask boy thing should pop up okay boom right there let's click that and connect boom look at that it brings me straight to the home page of the website right and i can see if coin down make a proposal and it's giving me uh whether it's against for or abstain how much has been against for or abstained and then a way to disconnect my wallet now this over here that you're seeing you can notice that there's a text in here and it says it's a dummy proposal okay so this is fake dummy data that we have hard coded for you so you could just see what it looks like but then what we're going to do in our next steps is we're going to auto populate it populated with actual data right so for example if i show you this if we go to our index.js you could see i have this state variable here called dummy data and inside of dummy data i have who the proposer is okay and i gave it a wallet address i'm telling it what the votes are right so you could see 30 thousand forty uh thirty thousand four hundred forty three right and then four has forty three thousand and you can see that four here has forty three thousand uh abstain has thirty four hundred which is right there so we're clearly pulling this from the dummy data and the dummy data is inside of our index.js all right so if we go back to our code and we go back to our login page okay you can see that we have given our connect with metamask but something else that we've actually done that's really cool if we go to i believe our index and we scroll down actually let's go to our header so let's get out of pages let's go to header.js and inside of header you're going to see that we have the disconnect button right and since you added it to context you can see we're getting our disconnect wallet from our context and right over here we're giving it to our on click so now when you actually click this disconnect wallet you'll get disconnected as well all right let's go ahead and hit disconnect wallet and first let's go ahead and just refresh the apps to make sure that all of our current changes are up to date all right so we're going to go ahead and hit that disconnect wallet button okay so i'm clicking it but nothing is really happening so give me one second here let's try it one more time boom there you go i hit disconnect wallet and you can see it's disconnected the reason why it's working is if you go to your header in your components you'll see we're already extracting disconnect wallet and then we're saying hey if the disconnect wallet function is there then on click disconnect the wallet otherwise just console log disconnect button clicked okay so in our case we do have access to it so then let's go ahead connect with blah blah let's hit disconnect and boom you see it just disconnects you right away all right so here's what we're gonna do let's go back to our third web dashboard and we're gonna go ahead to our a coin down vote that you created earlier and let's go ahead at the top right you see where it says create proposal click that so we're going to create a proposal and we're going to say uh we're going to say hire a reactions developer okay so i'm gonna make submit this proposal and then metamask is gonna pop up and it's gonna show me this i'm gonna go ahead and hit confirm okay then it's gonna okay let's see we've gotten an error all right so there you go my proposal is created successfully all i did is i just removed the emoji maybe it has problems when you do it with an emoji so if it failed for you like it failed for me the first time just do this and you should be fine now we have one proposal created already all right so now that we have this in here let's go back to our app and we're gonna try to actually pull all of this data and how we're gonna do this is inside of our let's go back to our context so inside of our context let's go down we're going to go ahead and get all of the proposals here okay and i'm going to say for getting all the proposals i'm going to say cons proposals and in order to get my proposals okay what i need to do is i need access to my contract address for voting so i need access to the voting contract address so how i'm going to do that is let's click to our home page and let's copy this vote contract address and so i'm gonna now go up top right here where we have let vote and i'm gonna now say use vote and i'm going to pop in that contract address now this use vote hook we've already used pulled it from here and you can see we have a used token hook as well okay so i'm now going to go ahead and save proposal is equal to await vote.getall so this will get all of my votes and then we can console log these proposals and then we can also simply return them all right now so watch this if everything you've done correctly here if you go to your app it should automatically pull your proposal and if you actually see it already is look at that it's pulling your proposal from the proposal that you've created right so for example if i go here i can see higher react.js developer and it's actually pulling it so that is fantastic i mean that is so slick that happens so quickly now let me show you all the kind of behind the scenes logic that um allowed it to get rendered to the front end so we're let's go ahead and see this right so we're we have this function get all proposals now we need our entire app to have access to this get all proposals and so what we have done is we've sent it to our provider get all proposals and then let's go to our index.js and inside of our index.js you'll see we have this use effect hook what it's doing is it's calling our get all proposals function and since it's a promise we're saying once you get it then check if there are any there are proposals so that's why it's checking the length if there are proposals then i want you to reverse the proposals so we call dot reverse on it and the point of this dot reverse here is so it reverses the order right so you actually see it in a descending order meaning the most recent ones first and then we go ahead and console log it so you could see it let's go back to the app i'm gonna hit inspect let's click console and you can see i'm getting these um arrays of objects here right and you can see inside of it i have a proposal and that proposal says hire react.js developer and then it has a bunch of different information in here that's not super useful for us but it can also tell us the votes and we can see it has votes and it has how many you know what are the types of those votes and how many votes those have okay so let's get out of here let's close this so it's already pulling the proposals like so for example if you made another one it will also pull that too so if i go ahead hit create proposal and i say hire a next.js developer okay let's hit submit proposal and make sure you have matic in your wallet okay hit confirm make sure you're on the mumbai network you have matic in your wallet okay so a couple of things just make sure if you get an error no problem just refresh try again if you added emojis remove them try it without emojis i think sometimes the emojis can throw it off is what i've noticed at least maybe you might notice something different if you notice that they don't really give you problems but it was something else let me know that too so here proposal successfully created and you can see higher nexus developer showing up but it's saying the state is currently pending which means that it won't be showing up yet in our app but once that state is not pending anymore it should show up right away there you go you could see our app is automatically pulling higher next yes developer so that is a really nice experience and this is what's helping do the rendering right it's calling the function and uh you know showing it out onto the screen so now well you might be asking okay how is proposals actually showing up kazi i see you're calling the function i see your console logging here how it's actually showing is if i let's go to command f4 proposals and here you see we have proposals and then we're just we're checking if that proposal exists if they do then we're iterating through the proposals and then we're building it out in a proposal card okay to get the keys all right so you can see that we're just rendering out the proposals that is what's allowing the proposals to show up okay if there are proposals then show them okay um and if there aren't if we if we're in a situation where we don't have proposals right so you can see the whole thing is wrapped in a ternary operator with proposals so proposals exist do this if proposals don't exist well then what i want you to do is show the dummy data you guys see that right there dummy data so this here is the structure of the one proposal we get right so imagine this is a proposal right here the top part of that proposal is the proposer who proposed okay and then uh this part over here which says testing or whatever right we said hire react.js developer that's the description and so this is the data structure okay so meaning like that object that we get back this is how we can parse it we can look we can grab the proposal from the proposal we could grab the description from it and a few other things now there are a few other things like the status so it can say defeated it can say successful so for example if the if most people were against and the vote is over ill say defeated if most people were four and it's over ill says successful okay so that's the status state and then you have a vote types array so this is like okay i have three types i have type against type four type abstain and then we have the vote count at the bottom that shows me okay against is eleven thousand four zero thousand and abstain is zero um or sorry not 0 000 what the hell zero eight coins and abstain is zero if coins okay so this is the data structure so if you understand this that's going to be valuable for you as we continue through the build all right now we're going to make this function create proposal and what this does is create a proposal to mint tokens to the dao's treasury okay so let's get to work on this create proposal guy now the first thing i want to do is i'm going to have an amount so i'll just set the amount here to 100 000. so if you do underscore this it's the same as saying this but this is just easier to read all right so we're going to get rid of this amount here actually so what we're going to do is going to be even some a lot simpler and i'm just going to go ahead and say hey get me the proposal and the proposal will be we're going to await vote.propose and uh this is what we're gonna propose we're gonna pass in the description the user gave us and that's it okay and then we're just gonna console.log the proposal proposal okay so this statement right here just this command right here will automatically create create a proposal for us and it'll add it to our third web so we're gonna see another proposals pop up in there now let's go above and finish our is executable function all right so what we're going to do is we're going to go right here and for our is executable it's going to take in an id okay and it's going to check if the proposal given is executable okay so i'm going to go ahead and say const can execute and then this is going to return to us a boolean and i'm just going to say vote can execute and it'll take in an id okay and then we'll just return can execute all right boom done and then we're going to also check if the user has voted for the given proposal so this will actually check if if the whatever the user was you know mostly the logged in user if that user has voted or not and so we're gonna say await vote dot has voted and we're gonna take in the address of that user as well okay and then um we're gonna go ahead down here and we're gonna say has voted and then we're just going to return the res all right we're going to call this current user address okay because that's what we're choosing to call this so everywhere you see address change it with current user address and so there we go and that should be what check if voted should look like all right so for the vote for i'm gonna go ahead and say try and then i'm gonna set our delegation and i'm going to say await token.get delegation of and we're going to get current user address okay and then if the user has delegation okay delegation so this will basically just check if the coins have been delegated right if they have been then we're gonna say delegate to address all right and we're gonna say vote type and let's go down here i'm going to say if the type is against here's what i want to happen okay so if the type is against i want to set vote type to vote type dot against all right so vote type if you're seeing hey what is this vote type it's actually being we're calling it from third web so we're calling it right here vote type okay we're importing it so let's go ahead and go for type not against and then we'll say else if type is for okay if this is the case we're gonna say vote type is equal to vote votetype.4 okay and then we're going to say we're going to go down here we're going to say else vote type is equal to vote type abstain because that's really the only choice left at that point stain just like this okay so let's get out of this else here and i'm gonna say my result is and we're gonna await check if voted we're gonna pass it the id if i have not voted all right so this in other words had this is really has voted okay so you could change that so then it's like okay so if the user has not voted then effectively i want you to await and go ahead and vote okay so then we're gonna go ahead and call uh your you know we're gonna we're gonna place a vote all right that's what we're gonna do if you haven't like if you clicked it and you hadn't voted yet then we're gonna place a vote otherwise we're going to say you have already voted for this proposal okay and we can even make it fun i guess it oh oh looks like you have already voted for this proposal okay so if you have already voted it will detect that with this okay and then at the end of all of this this try catch block we're gonna go ahead and say catch and we'll say error sorry error okay and if there is an error then i just want you to console log it so we can just go ahead and say console log there we go okay so this is our vote for all right all right so if you actually scroll up here and you see this error that says property delegate 2 does not exist on type string we have not add given any value to token so let's go ahead and set that up so we have this use token hook that we have so let's go ahead and do this we're going to say use token okay and then this is going to take in the token address that you got from um from third web so go back to your home page on third web and on your home page you're gonna see your token copy the contract address for your token okay so make sure it says make sure it says token right here okay contract type and then just paste that so now you have token okay now that error should go away because delegate2 does exist on it okay and then make this a capital left here for votetype.4 make it a capital f and that'll get rid of that little error that was showing up okay and just to kind of recap and understand what's happening here this part of the code is basically saying hey delegate your custom tokens you own to be used to vote okay this part here is determining what the user voted and then our parts underneath it is check if the user has voted okay if they haven't voted then cast their vote and if they have already voted then just let them know you've already voted and here we're just catching any errors that happen okay so that's really what's happening in this entire script it looks scary but it's really not all right guys so let's go back to our app and see if you can create a proposal and vote for it so if you had done everything correctly in here you should be able to do something okay with it so i'm gonna go ahead and say hire an angular developer okay let's go ahead and hit submit and see what happens okay something really weird happened but um our mask popped up so let's go ahead and hit confirm and let's see what will happen okay so let's fix this probably some icon is showing up but it's telling us that it's submitting our proposal here so that's a good sign now let's take a look at our meta mask and let's go ahead and speed this up and we'll fix this ui bug that's happening but let's just see if our vote is being casted or not that's the main main main thing because if our vote or if our proposal is being created then you know the main functionality app is working so our proposal looks like went through let's refresh and let's look at here as well let's refresh our third web and see if in our third web we got a new proposal oh nice look at that we just got a brand new proposal hire an angular developer proposed by and it seems like it's pulling my wallet address and let's see here yo that is sick right like our angular developer uh proposal is coming up so that is beautiful all right so basically that little error that happened it was toastify and it was missing its css so that's why you didn't really see anything so we're just gonna go ahead and import this inside of our index.js okay you probably will already have this but it just wasn't there in mind so because i want to give away all the front end i'm going to give you this don't worry so then you don't have to deal with that stupid problem let's go back here and let's make another proposal and i'll just call it another proposal and let's hit submit and see what happens and now you can see it looks beautiful right submitting proposal comes up looks really nice and i can hit confirm and now you know if the proposal is done it will tell me it's successfully done too so that's the really nice part so i'm gonna speed it up in the meantime just keep paying for it and hitting speed up okay and then whenever uh it's done you can go ahead and hit refresh all right so this is good now let's get out of here we have our app working right our toaster toastify thing was showing up at the top submitting a proposal looked clean looked nice and now we know our proposal has went through if we refresh on third web we'll be able to see it and then if we go back and we refresh here we'll see it now it's time to vote so let's see if our voting would work okay so i'm gonna go ahead and hit open up inspect element as well so i could see what's happening and let's go ahead and hit four here and uh it says false has voted so you see it doesn't it notices that i haven't voted yet so that's a really good sign and then i'm gonna go ahead and hit confirm all right so i've had i hit confirm and now let's see how long it takes for my vote to cast cast vote with reason is what you should see it's queued up and i'm gonna go ahead and hit refresh on third web as well to take a look if my vote has come through yet i don't think it has okay not yet it's still loading and now let's speed it up so it happens just a wee bit faster okay speed it up some more right let's refresh okay so sometimes this can take a second don't you know don't worry about it's not too big of a problem we'll just wait it out ten percent increase let we do aggressive it doesn't seem like it's allowing us to go much faster ah there we go okay so we could see that we have voted for this and there is 700 000 a coins worth of power towards this proposal meaning if somebody wants to overthrow this they need to vote they need to have like more than seven hundred thousand coins uh eight coins to beat my vote so it either needs to be multiple people that need to vote that have more than seven hundred thousand eight points or it needs to be somebody who's like richer right in this community than me who needs to vote and overthrow me otherwise this is not gonna get overthrown and this another proposal is gonna get passed in favor four okay so after two minutes pass pretty much the proposal window's gonna close and you see it says this one says defeated pretty soon this one is gonna say successful because we have a four and we don't have any against or abstains so it seems like it's gonna go through okay so there you go it looks like almost all of the functionality of our app is working right we don't really we're not really facing any problems all right now i'm going to try to vote as a second person so it looks like there's multiple people voting here so i'm going to go ahead and refresh um and yeah and you can see right it's actually pulling the 700 000 eight coins it can see that too which is super cool now i'm gonna come in and log in as a different user to vote so let's go ahead and let's actually try voting as the same user and let's see it goes uh oh looks like you have already voted for this proposal so you can detect very clearly that you have voted so that's good now i'm going to switch my user so i'm going to go ahead and go to my other user and i'm going to connect to the site and let's go here and now i'm going to vote against and let's see what happens i tried voting against and it says address is not defined so let's go ahead and see where we're using address and where it's not defined all right so here this is it it's we're using address when we should really be using current user address so let's go back to our app let's hit refresh and let's try that same thing again and let's see what happens so that vote has ended okay so that vote actually just ended because uh this is successful because two minutes passed and we had uh two minutes passed and we already had somebody voting for and nobody else voted in that time frame so that looks like it succeeded all right so now you can see that i have this whole thing coming up it says successful okay and we have this execute button here as well so this execute button would be like if you wanted to set it up so like let's just say that you wanted to hire a developer and you knew exactly which developer it was and then you had their wallet address right here you could hit this execute button once this vote passed and it would automatically fund their account with money okay so that's the really cool part about this you could do it like that now i'm gonna create a proposal from a different account and let's see what happens let's see if we run into any problems i'm gonna say um eat a cookie no hold on eat ice cream tonight so let's see what we want to vote for we want to eat ice cream or cookie or what do we want to eat so let's see let's go ahead and start with ice cream i'm going to try to create a proposal and you're going to see i get this error that says proposer votes below threshold and this basically implies that i haven't delegated my coins to this dao and so therefore i'm not able to like create a proposal with it or do anything so we're going to go ahead and fix that now okay so let's go back to our app we're going to write a use-effect hook that's going to catch a scenario where the user who hasn't delegated their coins can can use this dao okay so we're going to create a use effect hook and use effect we have a function and then our dependency array is going to be empty so it's not it's going to just fire off on page refresh and it's going to be an async function i'm going to go ahead and say try so we're going to try and see if we have this delegation and i'm going to await it okay we're going to get delegation of the current of the current user so i'm going to say current user address okay and then if delegation so we're going to actually repeat this code and we could probably even just copy some of this so this part over here just copy this and paste this because we're effectively doing this same thing here okay so i'm going to say boom paste okay there we go okay and then we're gonna say catch and for catch we're gonna do the same thing hey if there's an error then just console.log and we're going to say error.message and we'll we'll follow it up with error and then us and then since this is a iife okay me iife immediately invoked function expression that just basically means that since this function doesn't have a name you need to call it right away because if you don't then you won't ever be able to reference it by anything so i'm just gonna call it right away okay so this block of code will just call itself and yeah it'll call itself whenever the app loads so let's go ahead now we're getting this error that says use effect is not defined not a problem we're just going to go ahead and import use effect from react so i'm going to go ahead and say use effect and then we should be gucci okay and then let's go to our app and let's go ahead and hit refresh okay and now let's try making a proposal so proposal uh eat ice cream tonight let's go ahead and put an ice cream emoji there i'm gonna hit submit there we go now it says submitting proposal ah okay getting an error again all right now what i want you to do is just switch back to the main account okay so i'm gonna go ahead and i'm gonna reject this just ignore ignore this for now okay don't worry about that go back to your main account so i'm just gonna switch back to my main account that i was on which is my btscp in this case and then i'm going to make the same proposal with the main account and let's see if we can vote from the main account and another account so let's try that that's important because we we don't also want maybe everybody to make a proposal we want it to be where only like we as the owners of an account can make um the proposal so let's start with this for now and uh let's take a look at our metamask and see what's happening so i'm going to go ahead and say speed up and then we'll wait and it looks like the proposal has happened so if i hit refresh it should pop up pretty much right away all right there we go i got my ice cream proposal i'm gonna go ahead and say i'm for eating ice cream so i'm gonna hit i'm gonna vote for four and this popped up let's go ahead and hit confirm and now we'll see what happens okay so now we have one person voting for let's just double check that our vote is going through i'll just speed it up a little bit okay but in the meantime while that vote is pending i'm gonna go ahead and switch so that vote shouldn't be pending anymore actually but let's refresh and that vote should be showing up and you can see that 700 000 worth of ape coins have voted for ice cream tonight now remember this is not you actually putting your money on the line it's just saying that your seven your vote has seven hundred thousand a coins worth of power okay that's all that means now let's go to our uh bts cp2 account okay so you're go now go to your second account and from your second account just go ahead and see if you could vote so i'm going to go ahead and say against and boom look at that it actually allows me to vote and let's go ahead and hit confirm and now let's go to our app here i'm gonna hit refresh okay and there you go you can actually see um actually hold on i think our vote is still processing it hasn't happened yet so i could speed it up now it has happened let's refresh let's take a look oh we don't i don't see it yet i don't see it yet so that means i must have voted without having my coins be delegated right that's probably that's probably what that actually means okay so let's see what the error what problem we're running into here okay we're still running into that error okay let's go back let's go to our dashboard and let's hit refresh on this ice cream one ah so what happened the first time it was actually delegating my tokens towards the thing now i can actually vote so let's go ahead and vote okay so delegation just means i'm allowing you know if uh i'm a law allowing uh my vote to have power with this ape coins okay so i'm delegating my coins towards the power of voting and these you know towards these proposals now i can actually vote so this is this is working as expected so this is good this is good all right so our vote is now pending okay our delegation is complete so that's good let's go ahead and speed up our vote it says queued and once it's done you'll see that it'll be a green text underneath it which would imply that it is done there we go and now we could see august 2nd and it is done okay let's go ahead and hit refresh and let's see if we have somebody let's wait for it wait for it let's wait to get the dynamic data okay let's go to our dashboard and let's see if we voted for it or not okay we have active awesome so you saw how we were able to do that now we can actually even make another one right eat cookies later and let me put a cookie here and i'll hit submit and now watch this from my second account it's also allowing me so let me just reject all of these transactions for now so i can just show this from scratch let's go ahead and just refresh now you'll see from my second account since i've delegated my tokens i can now make a proposal from this account as well so eat cookies tonight let's put a cookie and let's hit submit okay and now you're going to see my meta mask pop up right there above my head and i'm going to go ahead and hit confirm and now that proposal should be able should be popping up soon okay so we'll just wait for it and uh if it allows you to just go ahead and speed it up okay all right there we go our uh our proposal seems to have happened so now with the second account i should have been able to create my proposal and boom there you go i was able to actually create my proposal with the second account so with that said guys i hope you enjoyed this build it was a ton of fun to build it together with you from scratch we had already done a lot of the front end work which means that if you followed along hopefully it saved you a ton of time from having to do every single thing from scratch so make sure you fork the rapplet below because it'll save your life it'll you know be able to give you all the front end all the styling the components so that way you're only writing the web 3 logic and doing a lot of the third web stuff with that said i hope you enjoyed it i hope you picked up something a new skill out of it and just so you have some context right blockchain world there's a lot of opportunity there a lot of developers making you know 70 000 thousand dollars hundred thousand dollars a year and a bunch of developers i personally know they're making hundred that thirty thousand two hundred thousand three hundred thousand dollars a year or more and so if you're good in this community and you're as in you're a great developer and you're a good person you can go pretty far and this industry is just booming so if you learn these skills you'll be very you know sought after and if you use something like third web it makes it a lot easier for you right to be able to do all of these things it simplifies the process and it just makes it a much more enjoyable experience instead of having to just write every single line of solidity code all by yourself and that just makes things more complicated with that said i love your beautiful face i hope you enjoyed this video and as always i'll see you in the next video\n"