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) {
console.log(error);
}
};
useEffect(() => {
if (!isWeb3Enabled && isAuthenticated) {
if (!window.ethereum) {
enableWeb3({ provider: 'walletConnect' });
} else {
enableWeb3();
}
}
return () => {};
}, [isWeb3Enabled, isAuthenticated]);
console.log(chain);
console.log(chainId);
console.log(account);
if (isAuthenticated) {
return (
<div>
<h1 style={{ color: 'green' }}>We are authenticated</h1>
<button onClick={logout}>Logout</button>
</div>
);
} else {
return (
<div>
<h1 style={{ color: 'red' }}>We are NOT authenticated</h1>
<button onClick={auth}>Login</button>
</div>
);
}
};
export default Index;
