Web3 Developer in 2024 Roadmap_ Solidity, Smart Contract, and Blockchain Development [Full Course] - Ep41

folder we have edureka ai coursean underscoreapp.tsx file and in our underscoreapp.tsx file here this is where the mainsetup of our blockchain application isgoing to happen and you can see here wehave a component called the third webprovidernow coming back to our docs and we headon over to the third web provider youcan see it it's a wrapper component thatprovides access to all of thirdweb'ssdks hook and UI components so when wecreate a new project using a third webCLI this is all set up for us alreadynow the third web provider we do need toprovide it with at least two things herethe first one is going to be our clientID which is our client ID from the APIkey that we created as well as theactive chain and this is the going to bethe chain that our application is goingto be interacting withso we'll do the active change first andyou can see here that it's referencingour active chain variable which we haveset up here right now by default it isset to the ethereum blockchain now whatwe'll have to do here is change it tothe blockchain of the contracts that wedeployedso in my case here I use the Mumbai testnet so I'm switching this over to Mumbaiyou'll switch this over to whicheverblockchain you are currently using andif you have questions on what should youput into the active chain you can cometo this website here thirdweb.comchainless and you can search any of thechains that you are looking to add andwhen you click on it you can come downto the code snippet here and it'll showyou what you have to actually put in thestring to make sure that you're addingthe right chain to your application butcoming back to our code editor here wehave our active Sheen set the next thingwe need to do is set our client ID nowcoming back to our file directory herewe have a you can see that decline ID isgetting grabbed from our environmentvariable and if we come to our fileshere we have a DOT env.example file thathas our client ID variable right hereclose this for a bit and what we have todo here is paste in our client IDif we come back to our dashboard and wego to settings we have our API Keys hereand we have the API key that we createdearlier we can copy that client ID rightover there come back to our code editorand paste that in we'll save that fileand close it as now our client ID is setnow what we'll do next is actually runthis application and there is someboiler blade code that this comes withso if I head back to my terminal herewhat we'll do is let me just clear thisout really quick in our terminal herewe're going to run you can run npm runDev if you have npm installed or ifyou're using yarn you can use yarn Devas wellbut I'll run npm run Dev in case youdon't have yarn installed what this willdo is run this on our local device soyou can see here we're going to berunning this on localhost3001. so coming back to my browser herewe'll then open up localhost 3001.and you can see right over here we havea blockchain application all set andready for us now this is just someboilerplate code that comes when youcreate an application through third webCLI it gives you links to ourdocumentations or portal links to ourdashboard for your contracts or you caneven clone some templates that we havefor things like nft claims ormarketplaces right over here you'll seesome information this is actually a UIcomponent that you get with the reactSDK which is a connect wallet componentand what it'll do is connect any type ofwallet to your blockchain application solet me come here and actually sign outyou can see that this is a connectwallet button here and we'll actually beadding this connect wallet button intoour application and going over it in alittle bit more detail in just a bit butjust know that you'll be able to connecta metamask or connect a wallet like acoinbase or any wallet connect supportedwallet right here just using this walletconnect button so coming back to ourcode editor here again that was ourapplication that we now have running ontop of our computer so we're going toset up a few more things before weactually start building out thisapplication and the next thing we'regoing to do is come to our filedirectory here and we're going to createa new folder and I'm going to name thisfolder constants here and this constantsfolder we're going to create a fileinside of it called addresses dot TS andyou can name this JS if you're usingJavaScript we're using typescript hereso I'm going to put TS and within thisfile here we're going to create all ofthe variables for our contract addressesthat we're going to be using so actuallyI have it all set here I'm just going topaste this in but we're going to exportthe variable and we're going to name allof our contract addresses and paste inthe string of that contract address sothat we can use these variablesthroughout our application whenever weneed to reference the contract addressinstead of putting in this long contractaddress right here we'll also have abetter understanding of what address isbeing used instead of seeing just thecontract address and trying to rememberwhich one that which contract thataddress belongs to and again if you everneed to reference your contractaddresses coming back to your contractdashboard you can just grab them fromright here click and copy and then comeback to your code Editor to paste themwithin the correct areas and once youhave that set we can close that out andthe final thing we're going to set up isjust some styling for this applicationnow I'm not going to go in depth onstyling this application with CSS Iactually have all the CSS Stylesconfigured for this app and I'm justgoing to copy and paste it into ourstyle sheet here now we'll have a linkdown in the description below to theStyles as well so you can then copy andpaste those Styles in that way you canjust

(Editor: c)