Fetch the Owner's Wallet Address From a Smart Contract
We don’t want any user to be able to access admin pages. Let’s check if the user’s wallet address matches the address of our connected smart contract.
This can be done by using OpenZeppelin to get the owner address from the smart contract, then comparing that to the currently connected address.
Instructor: [0:00] Let's see if the current wallet address, connected to our React application, also owns our smart contract. Come down below in our app component and add a new effect hook, useEffect. In the dependency array, we'll add address and connected contract.
[0:19] Inside the scope of the hook, we're going to define a new asynchronous function and say const check isContract owner equals async. Inside the function, we'll make sure we have both an address and a contract.
[0:36] We'll say, if not address, or if not connected contract, return early. Below that, we'll add a new variable, const owner address. Set it equals to await connected contract.owner. This function is provided to us by the Ownable class in OpenZeppelin, and will return to us the address that owns this smart contract.
[1:06] Below here, we'll compare both our address and the owner's address. We'll say, if address.to lowercase = = = owner address.to lowercase. Before proceeding, we'll need to add a state variable above.
[1:24] Say const isOwner, set isOwner, set that to useState, and make the default value false. We can also log that out below. Console.log isOwner, isOwner. Then we come down below and inside our if-statement.
[1:47] If the connected address matches the owner address, we can say set isOwner is true. Otherwise, we'll say that set isOwner is false. Below the function definition, but still inside of the hook, we want to call this function to make sure it fires. Check isContract owner.
[2:08] If we come to the browser and open the console, you can see that isOwner is set to true, but we only want owners to be able to access check-in and settings. Let's disable these pages for non-owners. Come back into React. We'll go down to our menu items. Here's check-in.
[2:26] We'll disable this, isDisabled, whenever the user is not the owner of the contract, so isOwner. Copy and paste that and do the same thing for the admin below. Back in the browser, you can see the current user can access all of these things because it owns the smart contract.
[2:46] If I were to disconnect and reconnect with a different wallet, account two instead, you'll see I can only access the buy in your ticket pages because I do not own the smart contract.
[2:57] To review, we added an effect hook that calls our smart contract to fetch its owner's address. We then compare this to the wallet address connected to our React app and then limit it access to certain menu items for non-owners.