useChain Hook Not Working As Expected With WalletConnect

Hey guys, I am trying to use the properties and methods inside Moralis’ useChain hook in my Nextjs app after authenticating with WalletConnect. But all of the properties seem to be either null or undefined. I had a problem with Module not found: Can't resolve '@walletconnect/web3-provider' after NPM installing react-moralis, which I then resolved by NPM installing @walletconnect/web3-provider, so I don’t know if that could be part of the issue or not.

These are the packages I’m using:

"@walletconnect/web3-provider": "^1.7.0",
"next": "^12.0.7",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-moralis": "^0.3.2",
"web3": "^1.6.1"

And here is my code, the console.logs for chain, chainId, and account do not exist when authenticating with WalletConnect, however, it all works fine when authenticating directly with MetaMask without using WalletConnect:

import React, { useEffect } from 'react';

import { useMoralis, useChain } from 'react-moralis';

const Index = () => {

    const { isWeb3Enabled, isAuthenticated, authenticate, enableWeb3, logout } = useMoralis();

    const { chain, chainId, account } = useChain();

    const auth = async () => {

        try {

            if (window.ethereum) {

                await authenticate();

            } else {

                await authenticate({

                    provider: 'walletconnect',

                    chainId: 56,

                    mobileLinks: ['metamask', 'trust'],



        } catch (error) {




    useEffect(() => {

        if (!isWeb3Enabled && isAuthenticated) {

            if (!window.ethereum) {

                enableWeb3({ provider: 'walletConnect' });

            } else {




        return () => {};

    }, [isWeb3Enabled, isAuthenticated]);




    if (isAuthenticated) {

        return (


                <h1 style={{ color: 'green' }}>We are authenticated</h1>

                <button onClick={logout}>Logout</button>



    } else {

        return (


                <h1 style={{ color: 'red' }}>We are NOT authenticated</h1>

                <button onClick={auth}>Login</button>





export default Index;
1 Like

Still looking for some feedback on this one. Does anyone have any ideas?

But besides not showing anything, it works well? As in if you try to do a transaction it will do it on the right chain that you specified on authentication or when you use enableWeb3?

I was trying to render the user’s wallet address, and the chain they were connected to which were all undefined or null when using the useChain hook only after authenticating with WalletConnect.

So right now, I’m using web3 from the useMoralis() as my fallback solution. And I’m just updating my redux state when web3.currentProvider.on(‘chainChanged’) and web3.currentProvider.on(‘accountsChanged’) are fired.

This solution seems to work well, but I feel like it’s kind of weird because I would like to just use the useChain hook that Moralis provides. However, I was able to get everything working how I needed to.

Also yes, I’m able to get transfers working fine, even after switching chains, but that’s all without using the useChain hook right now since I couldn’t get it working at all. Everything else that I’m using seems to work fine for me.

Hi @zelox!

The fix for this issue is ready, it will be added soon.

Also, did you manage to somehow change the active chain with WC?(this is the reason why I still didn’t open a PR)

1 Like

I don’t really remember if I was able to change the active chain with WC or not. I switched to using web3 in useMoralis as soon as I realized useChain wasn’t working as expected. And from there I didn’t have any other issues at all.

I’ll have to go back and test out the new update to useChain when I get the chance. Thanks :slight_smile: