Interacting with Web3: Frontend Development in Cohort X

this week to give you guys updates on front end web3 front end is similar to regular Web Two frontend in that we use the same Technologies react View and light andap is a decentralized application you know and this particular decentralized application has as it you know structure the front end and then the smart contracts serving as the back end what makes web and front end different from we front end is how it connects to the back end so in web 3 we make use of a deblock chain right and instead of Performing cow operations or making use of like graft C to make requests to the back end make use of contract ebis and contract addresses before we can interact with the smart contract using the front end we need a tool kit well there are many kind of tool kits you can use for that there's rainbow kit there's wallet connect and so on a number of things made um fronting a little different from traditional fronting here in web 3 one was the fact that because we don't have the typical um account Creations right we use things that are called providers and signer so basically um a signer is something that helps users sign transactions something like your connect wallet like your metamask and a provider is um basically an interface that allows people in um communicate with the blockchain we have Library libraries like like with 3js like ejs and so on in our dab we made use of event to listen to um event emitted when uh there was if there's an interaction if you're interacting with your content you need your AI you need your url your RPC URL and some other things and to be able to even connect to a specific Network you need you need a specific chain ID you want to be you want to connect to or a range of chain IDs you want to switch in between and this this is the reason why on every front end website that has to do with web 3 or web3 Associated you notice a connect button once you click it it pops up a mod to sign the transaction to probably change your network or do something that is where you are connecting your button is initiating a button connect and from there we we'll get the AI of the smart contract so for us to be able to interact directly with functions embedded in the smart contract this wallet connection actually helps to identify who is actually connected to this particular D now for us to actually read data from the smart contract we need the JC which actually does not require signing of transactions multi which is used to request for a lot of data from the blockchain at once I delivers it to the front end if you use multi call you can just bash all those calls to those addresses into one call which is called like a multi so you just use the multi call address passing all those um addresses that you want to pass into it then you call the function at once instead of like calling the balance of function in like hundred of addresses connecting your front end application to your front end um libraries to the blockchain right we use something that is called the um abis right every contract that's has been deployed onto the blockchain has something that is called an ABI and that AI helps us create an instance of that particular contract on our front end and interact with it by the use of what I just said providers and sign us [Music]