Lesson 10 - Queries on enableWeb3 & deactivateWeb3

[levblanc]

Hi,

I've tried to search on Google and Moralis docs, but couldn't find any result. I guess my next step would be to read Moralis source code. Please feel free to share your ideas and leave your comments.

In lesson 10, when we use enableWeb3 with await keyword inside the button onClick function, Metamask pops up and waits for user confirmation to connect to the web app.
https://github.com/PatrickAlphaC/nextjs-smartcontract-lottery-fcc/blob/main/components/ManualHeader.js#L49

But in the useEffect hook, when we put enableWeb3 inside the localStorage connected condition without the await keyword, Metamask doesn't popup and Moralis knows which account to connect.
https://github.com/PatrickAlphaC/nextjs-smartcontract-lottery-fcc/blob/main/components/ManualHeader.js#L17

My queries:

1. With my understanding on Javascript, enableWeb3 should be returning a promise, because it waits for user confirmation.

   We are not using await keyword in useEffects hook just because:

   • the hook doesn't like explicit async/await keywords in its callback function. (To prevent racing condition, as the error says)
   • we've got isWeb3EnableLoading to disable our button, so we don't need to wait for the result of enableWeb3

   Is the above understanding for the await keyword correct?

2. If enableWeb3 is meant to wait for user confirmation, why is it not popping up when we have a "connected" item in localStorage?

   My guess is Moralis already knows which account to connect to (it also has a onAccountChanged function), but how? We didn't save the connected account info anywhere. I've checked browser's cookies, session storage and local storage.

3. Extended query on query no.2, how does Moralis know which account is currently activated? We could even call deactivateWeb3 without any params.

[alymurtazamemon]

@levblanc Hey! enableWeb3 is basically a react hook provided by react-moralis that is just like the normal bool variable but because it reacts hook it renders the website.

In the onClick we await because we want to wait for the confirmation and only on the success, we want to change the value in local storage. But in the useEffect we do not want to do other things and we do not need to wait for it to perform other things, because those we are already verifying like, isWeb3Enable and local storage has true value, and window is not undefined.

Hope it clears your all queries.

[levblanc]

Hi @alymurtazamemon @SimasG ,

Thanks for the input!

For queries no.2 & no.3, I actually want to know more on how Moralis work with MetaMask and then the blockchain.
Here's the call stack that I dig:

1. useMoralis().enableWeb3 (react-moralis)
2. Moralis.enableWeb3 (moralis-v1)
3. internalWeb3Provider.activate (moralis-v1)
4. InjectedWeb3Connector.activate (moralis-v1), this eventually calls window.ethereum MetaMask injected when extension on load:

const [accounts, chainId] = await Promise.all([
    window.ethereum.request({
        method: 'eth_requestAccounts',
    }),
    window.ethereum.request({ method: 'eth_chainId' }),
]);

Finally, window.ethereum.request calls JSON-RPC APIs.

Here's my further query:

When we make AJAX requests with libraries like axios, axios is calling XMLHttpRequest under the hood. In the case of MetaMask, it is injecting window.ethereum object into the browser and provides an request function for JSON PRC requests.

Rather than relying on MetaMask's wrapper function, I want to go deeper and find the XMLHttpRequest equivalent in MetaMask's source code (mainly MetaMask/metamask-extension & MetaMask/json-rpc-engine), but failed.

With Google, examples are in CURL commands, and there's no such functionality in Chrome's developer tool of viewing JSON RPC requests. When I click a button on MetaMask, everything just happen transparently to me, so I really want to see how this kind of requests are made in code.

Would you please help?

[alymurtazamemon]

@levblanc Hope this will work for you LINK

[SimasG]

Thanks for the q @levblanc and a @alymurtazamemon - I also had similar questions.

@alymurtazamemon, isn't enableWeb3 just a Moralis function that turns bool isWeb3Enabled to true? Or can it also be considered a hook?

@levblanc, to riff on your third question, it seems that by calling deactivateWeb3, we don't really disconnect from our web3 provider. We are just changing isWeb3Enabled to false this time (which has UI implications for us). If you look at your MetaMask (or any other wallet), you'd see that we're actually still connected to the app. That's probably why we can call it without any params. Not sure what's the logic of this from Moralis side here.

[alymurtazamemon]

@levblanc Yes, isWeb3Enable tell the status of whether it is true or not, but it does not do actual working of triggering the MetaMask and after acceptance renders the UI, it just tells the status. It is an enableWeb3 hook that does all the stuff and make isWeb3Enable true. Same like this deactivateWeb3 make isWeb3Enable value to false and because we are using moralis useEffect it listens for isWeb3Enable value and update the state of the UI.