connected right andto start from scratch here you can ai tutorial for beginnersgoahead and be disconnected but but mybrowser says hey we're connected rightso now we'll connect and we'll actuallybe connected right next connect and ituh and it just overwrote connected youknow with inject let's let's make thisinject injected and then we'll removeyep okay injected so we'll refresh likeconnect and now it says injected Okaycool so now we're connected here if inhere if I just switch accounts rightlet's go to account three I'llconnect if we go back to our consolereal quick we'll say account change toblah blah blah I can change back rightwe'll go changed account change to blahblah blah now if we go back to ourapplication go in here and we diddisconnect now let's disconnect both ofthesedisconnect and disconnect we'll see it'snow been removed from local storage andif we go to our console it'll say nullaccount changed to null null accountfound and it removed it now if I hitrefresh nothing happens here I can goand connect right next connect I canrefresh whoops I need to go back in hereand reenable this so sorry let's addthis back in here but now I can refreshlet's go ahead and disconnect heredisconnect let's go back to the consolewe can connect thing will pop up nextconnect I can refresh it stays connectedfor me I can switch accounts I can goahead in here I can switch accounts Ican evendisconnect and it'll automaticallyupdate for me which is what we want sonow we've essentially made a way morerobust connect button where it goes backand forth with when we're connectednow now one more thing that we mightwant to do for our application is whenwe hit connect we want to maybe disablethis button right we don't want to allowit to be able to be pressed so I'm goingto hit cancel we're just going to addone more bit of functionality here we'regoing to add this is web 3 enableloading and what this does is it justchecks to see if metamask has popped upand so with our button after the onclicksection we can add adddisabled equals is web 3 enable loadingso it'll be disabled if we're loadinghere so let's go ahead and we'lldisconnect disconnect now we'll hitconnect and you'll see the button can'tbe clicked so that just it makes it alittle bit nicer next connect bada bingbada boom awesome we have just made away more robust front end than what wehad before this connect button is supersleek and it allows us to kind of flipback and forth in our application isincredibly powerful and knows how tohandle all these differentchanges now that we've learned how to dowith the manual way let me give you thecheaty way in our components we're goingto create a new file header. JS and whatwe're going to do is we're going toinstall this web 3 UI kit it's afront-end kit and it has a whole bunchof these components already built for usso we can build like a header componentand a connect button component just byusing this so to install install itwe're going to come back here we'regoing to stop our front end and we'rejust going to run yarn add web3 UI kitlike that and again we don't want thisto be a Dev dependency because it isgoing to be a part of our website andthen we'll do in our header. JS we'll doimport connectbutton from web 3ui kit and we'll doexportdefault functionheader and then all we'll do is returndo like a divand then inside this div we'll do conectbutton with a little backslash here wearen't going to need this for thisproject but if we want to be superexplicit we'll say Morales off equalsfalse just again to reiterate hey we'renot trying to connect to a server herejust to make that super explicit butthis connect button doeses everythingthis manual header thing that we justcreated does so back in our index.js wecan comment or delete this line we'll doimport headerfrom do/ components slhe header and theninstead of manual header we'll just doheader we start our app back up withyarn Devagain we go back to the page we do alittle refresh here we now see we havethis connect wallet button and it evenlooks a lot nicer it's got some nicestyling to it as well we can hit connectwallet and it'll give us this littlemodal asking us which wallet we want toconnect to so ask asking us which walletwe want to connect to is kind of similarin our manual header to this or set itemconnected injected right for walletconnect it would do connected walletconnect for trust wallet it would itwould set item as connected walletconnect Etc so it allows us to connectin different ways and if we hit metamaskwe go ahead and connect like so it evenhas some nice styling here where itgives us our wallet address here but italso gives us our Wallet balance as welland again if we go ahead and disconnectwe'll see it automatically disconnect wecan connect like so we can reconnectlike so boom boom if we switch accountsit's smart enough to know that we'reswitching accounts so I know I showedyou kind of the hard way but I wanted toshow you kind of what's going on it'ssetting this local storage in thebackground so that it knows which whereit's actually connected but for headersmoving forward this is all you need andyour life will be drasticallydrastically easier and let's just adddecentralized lottery or decentralizedraffle or whatever you want to ourheader as well so it says decentralizedLottery you know the buttonhello now that we have that what else dowe need well well the main thing thatthis app needs to do is just have a bigbutton that says enter the lottery andthen ideally you know show how manypeople are in the lottery and then therecent winner as well so let's go aheadwe'll create a new component calledLottery entrance and we'll grab thatcomponent similar to like what we didwith our header we'll drop this thatcomponent right here and then our appleprint pretty much be done so let'screate this Lottery entrance componentLottery entrance. JS right and again andthe reason we're

(Editor in charge: javascript)