Hi @malik,
The error stemmed from misreading the Gatsby docs: https://www.gatsbyjs.com/docs/reference/config-files/gatsby-browser/#wrapRootElement
Allow a plugin to wrap the root element.
This is useful to set up any Provider components that will wrap your application. For setting persistent UI elements around pages use wrapPageElement.
I had initially configured react-moralis
to set the provider using the gatsby
APIs. After taking a big step back, I realized I had overcomplicated the issue while looking for an answer, and that I just needed to wrap my layout
component.
When using the gatsby-browser
and gatsby-ssr
APIs as described in their docs to load the Moralis provider, it returns the error I included in my initial post.
ERROR
There was an error compiling the html.js component for the development server.
See our docs page on debugging HTML builds for help https://gatsby.dev/debug-html ReferenceError: btoa is not defined
21 | }
22 | else {
> 23 | _btoa = btoa.bind(window);
| ^
24 | helpers = function (url) {
25 | return new URL(url);
26 | };
WebpackError: ReferenceError: btoa is not defined
It looked like this came down from how Moralis had implemented web3-providers-ws
, but it was all due to how I had implemented react-moralis
.
As of right now, I am able to connect to web3 using WalletConnect with Moralis.
…That said, this has introduced a new bug. At least I think it is a bug?
- When reference the walletconnect provider like in the docs I get a
No window.ethereum found
warning:
import { useMoralis } from 'react-moralis';
import '@walletconnect/web3-provider';
export function GuestbookAuth() {
const { authenticate, Moralis } = useMoralis();
// Create WalletConnect Provider
return {
login: async () => {
Moralis.Web3.getSigningData = () => 'My custom message';
try {
await authenticate({
provider: 'walletconnect',
onSuccess: () => alert('🎉'),
});
} catch (e) {
console.error(e.message, e);
}
},
};
}
- If I manually define and enable the provider, things almost work. It requests to connect, but will only request a signature in browser through MetaMask. In a non-metamask browser it does nothing, and the user is never set.
import { useMoralis } from 'react-moralis';
import WalletConnectProvider from '@walletconnect/web3-provider';
export function GuestbookAuth() {
const { authenticate, Moralis } = useMoralis();
// Create WalletConnect Provider
const provider = new WalletConnectProvider({
rpc: {
1: process.env.GATSBY_MORALIS_NODE,
4: process.env.GATSBY_MORALIS_NODE_RINKEBY,
},
});
return {
login: async () => {
await provider.enable();
Moralis.Web3.getSigningData = () => 'My custom message';
try {
await authenticate({
provider: provider,
onSuccess: () => alert('🎉'),
});
} catch (e) {
console.error(e.message, e);
}
},
};
}
- Authenticating through MetaMask (no WalletConnect) works as expected—it connects and then requests a signature.
How can I get WalletConnect to request a signature after connecting?