Web3Modal: Building the Building Blocks For Your Dapp by Vanessa Mercado

ethereum client passing in that wagme client object and then the chains and once we have they can like the Imports and configuration set up like where do you add this code so in this example because we're using react your app.js is going to be like your um not the root of the of the component but basically where like now your index.html file but where your components actually start rendering and so this example is like if you're using next JS which is generally what it looks like but for what we can do here is this would essentially just be app because it's like your your first app component that you have when you're using react and we wrap that up we wrap it with the wagme configuration passing in the client which is a wagme client and then lastly we then add web3 model below so we don't actually wrap web3 model with any of this and then once you have that set up then it's this simple to just add the web3 button so it's just literally its own component and we can add different styling to it as well The Styling the way it'll look like so we can use this let me disconnect okay so if we click on connect wallet this is like that web3 modal button and then you see this modal that's already kind of pre-done for you so what I can do from my metamask wallet I can just click metamask actually let's try that again um I'm going to click metamask well I'll just get the QR code open up metamask from my from my mobile device and then I'm going to scan it and then I'm being asked if I want to connect to this site from my phone so then I can put connect then it's connecting you can kind of see it's still loading some information here but you can see that it already kind of Auto configures to my ens information which this is like my ens domain finesse finesse and this is my nft avatar that is also included in my ens domain properties okay cool the project finished loading excellent so let's jump into this project and let's add every like all the code we just basically did all right so first things first I'm going to create a environment variable just because that's for this is where I want to keep my project information so we can do that by in your terminal typing in touch.env and now let me get that project ID number that I have saved so I'm just going to save that to my clipboard and let's open up that terminal I just created and because this is a react project we need to make sure we start everything with react app and we're going to call this project ID so we'll paste that in the project ID and let's go back to the documentation and we can just start kind of importing all the code we need all right so this might take hopefully not as long but let's install these dependencies which will be the web through modal ethereum react rugby and ethers while that's loading let's go back and grab some of the Imports that we'll be using so in your app.js actually okay earlier I said that this all goes in your app.

js file I lied it goes into your index.js so it's a lot easier once you can start seeing it encoding it in real life so let's just get rid of some of the things that we're not going to need um and then we could import so we're just pasting in this entire Chunk from the import and we'll be adding it to your index.js file this is where we'll be changing the change that we'll be using so for this import all just going to be using orally since that's the chain that we can test and now let's go down to our configuration so let's just copy this entire block and and here we'll be able to create the client so our chains will just have to be updated to the one chain that we just updated and then let's go to our project ID info down here so let me just make sure I can see that um all right that's still loading here for a sec but pretending that this does exist and this actually works I'm just going to make a variable for it so it just looks nicer and prettier so for example like here under project ID we can actually just erase this entire thing and just pass in Project ID and this is just because I named my project I did the exact variable name so if I had done something like this then I would have to do project ID Cloud hopefully that makes sense but we're going to just keep it the same so I don't have to worry about creating a different variable for it specifically and we can do the same thing with your wagme client and we'll just save that for now and let's go back to the Rodney components so I'm going to just copy this everything from wag me and the web3 model I'm going to copy that we're going to kind of clean some things up here so I'll just paste that in remove this strict mode okay hopefully this looks a lot cleaner so all we did we kind of got rid of all the extra rendering we still have our app that will be rendered but now we're wrapping it with the wagme configuration component and then at the bottom we're adding our web 3 modal and let's not forget to also add our project ID down here so that looks pretty good to me I guess we can just finish until the dependencies are finished installing but lastly let's just go ahead and add our connect wallet button so from our app.js we can probably just get rid of everything from this app and we can just say Denver 2023 and I'm going to import that web3 button oh it's still loading that's why it's not Auto completing but we'll give this a second to load but while this is loading does anybody have any questions are you all in a team to hack this weekend this week any cool stuff not really just here for the parties it's okay A lot of people are just here for the parties too so let's look at that wagney config so this is this create client is this what you mean so we're grabbing create client from this import line and that's in the documentation um when you're importing yeah here it is so that's a second to last line you're creating that create client cool cool the internet looks strong but it's not going that strong right now so appreciate your patience here well while that's loading um I'm happy to show a different project that is actually using wag me Hooks and you can see how it's Incorporated using um web3 model so at least I can give you guys some a working example here um what was this intro okay there's a lot happening here but let me load this app so you guys can kind of see what it looks like is anybody else having issues connected to Wi-Fi or is this the Wi-Fi everyone else is connected to as well attendee Dash East Den yeah that might be the move if the internet doesn't work down here okay cool that's loading for us awesome okay so this is like a guest book that I created earlier um let's see is this actually all right not working as expected however let's take a look at the code so let's take a look at where wag me actually gets used um let's see let's see okay actually let's go back to the example because it did finally load um so that's good and about three modal okay so let's try running this and we're using npm all right so we've got something that's working that looks promising so if you click on connect wallet we're now able to also get the QR modal so let's just try from the browser itself so I'm going to just connect to this like burner account that I've got oh it looks like I have two rejections in here switch Network all right let's okay let's just try that again I think there was like a another request earlier so let's click connect wallet and let's just kind of do it the QR way as well so I'm going to connect using my phone and it looks like I'm connected through my phone over here and we are connected to chain one what is this showing as yeah so we're able to like actually connect um I know that wasn't as the workshop I was playing planning to give you all but it's honestly like really that easy once you have the configuration set up you're then able to use wag me hooks so if you're unaware what wag me hooks are we can go here and the important thing here to know is you're going to see that you have two examples so up here on the very top you have react and core for when we're using the react package you're going to want to use the react hooks and down here on the sidebar if you click on hooks you'll be able to see all the information that you're able to use so let's say you want to be able to get the balance of the user which web3 model already does for you under the hood but let's say you want to display it somewhere else in your application you'll be able to just import it like this like use wag me you can probably even just try it out as well let's try it here so use rag me and so this is from the balance see so we want to be able to get the user account right from who's ever already logged in because you obviously want this to be dynamic so we go to use account it's just another hook that we're going to be importing and if we do this so this console log this for or just comment it out for the time being and let's just console log address and going back into the react app okay we're able to see this is the address that I'm currently connected to so here ending in CE Oh no just kidding I connected on my phone so this is the right address so now let's go back and let's see if we can pull the the user balance so let's just remove that because we don't need it for right now remove this log and we're going to actually move this down here and since we already have the address what we're going to actually just do is pass in the address and let's see what we now get when we console log data so we get this object and you're able to see that we've got kind of all that information that web3 model is already pulling but this is kind of just honestly how easy it is to use wag me versus using ethers and kind of creating all of that on your own which is normally what you have to do if you're not using wag me and the same kind of goes to if you want to like read the contract or write so do people here have examples with smart contracts and like reading smart contracts from your front end okay so then you know you kind of know when you're going to be reading a contract from your front end you need to have access to that ABI which is just that Json file so very similar to like what we did earlier let's say we want to use this so use contract read and let's just get rid of that and you know if you get this error or like you know you can't use the same cons because we've already had it you could always rename this to like um like contract read data so then you're just setting it as a different variable name so we do console log oops all right so we can change some of these things up so this is supposed to be the contract that we've deployed so I believe I have a contract um where is this contract so as this is a contract I've kind of been like using so you can see all these different ad entries so looking at the docs like you just want to make sure you use the the actual contract that you're you're trying to read from so I'm going to just import or just use the contract address that already exists the Abi will have to create an API so let's see if I can do that here fast contract so let's just copy that um back in here and where are we so much and so I'm just going to create the um a quick file just to import all this info and this is just what I got straight from etherscan if you go back to it app.js you'll want to import that of course so we can call this um ABI from API contract so let's see okay and for the function name like we can take a look at this contract as well so we should just be able to use get entries this is just a getter function from the contract and let's try that so get entries and then let's just remove all of this and Okay so expecting to see a lot of data so here we go so this is what I'm logging using the contract to log and then you can see all the information that's already posted to the contract and this is all just again using wag me hooks super easy but yeah that's all I've got today everyone so thank you so much for joining and if you guys have any questions um yeah just come find me on the side I'll be here thanks again bye foreign