react: Fetch the Owner’s Wallet Address From a Smart Contract

(*1*)(*2*)

Trainer: [0:00] Let’s examine if the present pockets deal with, hooked up to our React application, additionally owns our good contract. Come down underneath in our app part and upload a brand new impact hook, useEffect. Within the dependency array, we’re going to upload deal with and hooked up contract.

[0:19] Within the scope of the hook, we are going to outline a brand new asynchronous serve as and say const test isContract proprietor equals async. Within the serve as, we’re going to be sure we’ve got each an deal with and a freelance.

[0:36] We’re going to say, if no longer deal with, or if no longer hooked up contract, go back early. Underneath that, we’re going to upload a brand new variable, const proprietor deal with. Set it equals to watch for hooked up contract.proprietor. This serve as is equipped to us by means of the Ownable magnificence in OpenZeppelin, and can go back to us the deal with that owns this good contract.

[1:06] Underneath right here, we’re going to evaluate each our deal with and the landlord’s deal with. We’re going to say, if deal with.to lowercase = = = proprietor deal with.to lowercase. Earlier than continuing, we’re going to want to upload a state variable above.

[1:24] Say const isOwner, set isOwner, set that to useState, and make the default worth false. We will additionally log that out underneath. Console.log isOwner, isOwner. Then we come down underneath and inside of our if-statement.

[1:47] If the hooked up deal with suits the landlord deal with, we will say set isOwner is correct. Another way, we’re going to say that set isOwner is fake. Underneath the serve as definition, however nonetheless within the hook, we need to name this serve as to verify it fires. Test isContract proprietor.

[2:08] If we come to the browser and open the console, you’ll be able to see that isOwner is about to true, however we simplest need householders as a way to get admission to check-in and settings. Let’s disable those pages for non-owners. Come again into React. We’re going to cross right down to our menu pieces. Here is check-in.

[2:26] We’re going to disable this, isDisabled, each time the consumer isn’t the landlord of the contract, so isOwner. Reproduction and paste that and do the similar factor for the admin underneath. Again within the browser, you’ll be able to see the present consumer can get admission to all of these items as it owns the good contract.

[2:46] If I had been to disconnect and reconnect with a unique pockets, account two as a substitute, you can see I will simplest get admission to the purchase to your price ticket pages as a result of I don’t personal the good contract.

[2:57] To check, we added an impact hook that calls our good contract to fetch its proprietor’s deal with. We then evaluate this to the pockets deal with hooked up to our React app after which prohibit it get admission to to sure menu pieces for non-owners.