Initializing EthereumProvider throws an error

[DragonmasterETH]

Hello,

I am currently trying to utilize walletconnect with an ethersJS project. I created a walletconnect account to use the project id instead of the infura id like in previous versions of walletconnect. I have found while trying to use the V2 version of Web3Modal that it's not possible and EthereumProvider should instead be used with ethers. I am currently unable to initialize the provider without throwing an error:

import { EthereumProvider } from "@walletconnect/ethereum-provider";

[...]

const provider = await EthereumProvider.init({
            projectId: 'MY_PROJECT_ID',
            chains: [1],
            showQrModal: true
          });

This gives me the error:
Uncaught (in promise) TypeError: Cannot convert undefined or null to object at Function.getPrototypeOf (<anonymous>)

[boidushya]

Could you help us out with which version of EthereumProvider and ethers you're using?

[DragonmasterETH]

My apologies,

"@walletconnect/ethereum-provider": "^2.9.0",
"@walletconnect/modal": "^2.6.0",
"ethers": "^5.7.1",

[grahac]

We also had similar problems with those versions and had to revert to earlier versions.

[TEE2DWHY]

@grahac pls could you provide your code in full to help?

[boidushya]

@Slula @grahac could you take a look at this codesandbox and see if the implementation differs in any way? We tried to use the same versions and are not facing this issue

[DragonmasterETH]

We are using nextjs, so I also had to install loki

Using this method we are unable to build with the showQrModal set to true, as it throws an error that @walletconnect/modal must be installed, which it is.

import React, { useEffect, useState } from 'react';
import { ethers } from 'ethers';
import { EthereumProvider } from '@walletconnect/ethereum-provider';
import vipABI from '../../../../utils/vipABI.json';

const walletCon = await EthereumProvider.init({
  projectId: "id",
  chains: [1],
  methods: ["eth_signTypedData", "eth_signTypedData_v4", "personal_ecRecover"],
  showQrModal: true,
  qrModalOptions: {
    themeMode: "light",
  },
});

walletCon.on("display_uri", (uri) => {
  console.log("display_uri", uri);
});

export default function Hero() {
  const [address, setAddress] = useState(null);
  const [provider, setProvider] = useState(null);


//...

const connectWalletWC = async () => {
    walletCon.connect().then(() => {
      setProvider(new ethers.providers.Web3Provider(walletCon));
      setAddress(provider.accounts[0]);
    });
  }

[grahac]

We switched to Wagmi and everything is much much better.

[TEE2DWHY]

@grahac. Yes I used WAGMI and it also worked. But I noticed wagmi sendTransaction method does not work in trust wallet. Does yours work?

[grahac]

We have not tried trustwallet. We have seen issues with personal signing on Rainbow with hex signatures but that's it so far.

[grahac]

Btw I was mistaken. Wagmi does not work when we try it haha.

[grahac]

Hi - just adding to this. We found that the latest (2.9.0/ 2.6.0) of EthereumProvider produces this error. When we go back to 2.8.4 it works.

[TEE2DWHY]

Alright. I’ll try it out now . Thanks

[grahac]

Read my comment below. I think I figured out the issue.

[grahac]

Oh and I think I found the solution (forgot!)

You now NEED events parameter (and I think optionalChains field too)
optionalChains: [1],
events: [],

            So try:

const walletCon = await EthereumProvider.init({
    projectId: "id",
    chains: [1],
    events: [],
    optionalChains: [],
    methods: ["eth_signTypedData", "eth_signTypedData_v4", "personal_ecRecover"],
    showQrModal: true,
    qrModalOptions: {
      themeMode: "light",
    },
  });

apologies about formatting. Github interface is acting funky for me rn.

[TEE2DWHY]

Pls could you provide code in full . Or a link to a repo🙏🏼. I’ll really appreciate

[grahac]

Actually I stand corrected. I thought I had it working but it is giving me the same error again. Best is to revert to older version for now. Looks like the latest versions do not work.

[glitch-txs]

Could you provide a minimal reproducible example of the issue?
Also, no need to install loki just don't trigger the fn on server side

[grahac]

Heard from the discord this happens if you log out and log back in. Or log in multiple times after a while.

[glitch-txs]

Are you able to reproduce on labs?

https://lab-walletconnect-modal.pages.dev/with-ethereum-provider

[DragonmasterETH]

Here's a repro repo:
https://github.com/Slula/walletconnect-qr-modal-error-repro-repo

[glitch-txs]

thanks @Slula, you need to move the init function inside the useEffect hook, this worked for me:

  useEffect(() => {
    const getWC = async () => {
      const walletCon = await EthereumProvider.init({
        projectId: "86acca839acf9cfaa0063dc9951984e5",
        chains: [1],
        methods: ["eth_signTypedData", "eth_signTypedData_v4", "personal_ecRecover"],
        showQrModal: true,
        qrModalOptions: {
          themeMode: "light",
        },
      });
      
      walletCon.on("display_uri", (uri) => {
        console.log("display_uri", uri);
      });
      
      setProvider(walletCon)
    }
    getWC();
  },[]);
  
  const connectWalletWC = async () => {
    provider.connect().then(() => {
      setProvider(new ethers.providers.Web3Provider(provider));
    });
  }

Some recomendations:

• Avoid setting optionalChains as an empty array, some wallets like Trust Wallet will throw an error with this config, you can just ignore that option and it will be set as undefined.
• I'd suggest updating the ethereum-provider lib to the latest version.
• since useEffect runs only on client side you won't need lokijs dep.

[TEE2DWHY]

Hello @glitch-txs. Thanks for sharing this code. Pls do you have a send Transaction function in your code. I tried using mine it trust wallet but it does not work.

[DragonmasterETH]

@glitch-txs Thanks so much for this. I have no idea why putting it in useEffect stops the build error that qrModal is not installed, but it works.

Now a new problem arises though- I cannot scan the qrcode to connect the app, and using the display uri does not work either. All I have changed from the repo is move the ethereumprovider inside the useeffect hook

[glitch-txs]

@Slula which wallet are you testing with? Try removing the empty array values

Another possible solution is to move the methods to optionalMethods as well.

[DragonmasterETH]

I am using Ledger Live on Android 13,
If I use Metamask on Android 13 the qr code scans but nothing happens.

    const getWC = async () => {
      const walletCon = await EthereumProvider.init({
        projectId: "86acca839acf9cfaa0063dc9951984e5",
        chains: [1],
        methods: ["eth_signTypedData", "eth_signTypedData_v4", "personal_ecRecover"],
        showQrModal: true,
        qrModalOptions: {
          themeMode: "light",
        },
      });
      
      walletCon.on("display_uri", (uri) => {
        console.log("display_uri", uri);
      });
      
      setProvider(walletCon)
    }
    getWC();
  },[]);
  
  const connectWalletWC = async () => {
    provider.connect().then(() => {
      setProvider(new ethers.providers.Web3Provider(provider));
    });
  }```

[TEE2DWHY]

<script src="https://cdn.ethers.io/lib/ethers-5.4.umd.min.js"></script> <title>Document</title> Connect Wallet

<script src="main.js" type="module"></script>

[grahac]

More info on this: For some reason our local storage got corrupted and a bunch of values were set to null. I blew away the local storage and it worked. Not sure how to reproduce but the next time I do I will post here. My best guess is log in first with 2.8.4 and then with 2.90 but I have not tried it yet.

[TEE2DWHY]

I used this and it worked well. Just make sure you install the latest etheruem provider and put in your project Id. This works

import { EthereumProvider } from "@walletconnect/ethereum-provider";
import { useEffect, useState } from "react";

const projectID = “ your project Id here”
if (!projectID) {
throw new Error("You need to provide projectId");
}

export default function App() {
const [providerClient, setProviderClient] = useState(undefined);
console.log(projectID);

async function onInitializeProviderClient() {
const client = await EthereumProvider.init({
projectId: projectID,
showQrModal: true,
qrModalOptions: { themeMode: "light" },
chains: [1],
methods: ["eth_sendTransaction", "personal_sign"],
events: ["chainChanged", "accountsChanged"],
metadata: {
name: "My Dapp",
description: "My Dapp description",
url: "https://my-dapp.com",
icons: ["https://my-dapp.com/logo.png"],
},
});
setProviderClient(client);
}

async function onConnect() {
if (providerClient) {
await providerClient.connect();
} else {
throw new Error("providerClient is not initialized");
}
}

useEffect(() => {
onInitializeProviderClient();
}, []);

return providerClient ? (

Connect Wallet

) : (
"Initializing..."
);
}

[grahac]

Note: I was able to reproduce the null error.

I was toggling between the 2.8.3 and 2.9 versions of WC Ethereum Provider and logging in with each.

I may or may not have done npm install in between but I did get into a state where my local storage showed the following.

wc@2:universal_provider:/namespaces	null
wc@2:universal_provider:/sessionProperties	null

Hopefully this helps the team! Dunno if this is a big issue or not.

[grahac]

I believe I was able to reproduce this by calling client.disconnect()

[grahac]

I have confirmed if I call client.disconnect on our system it will get into a null universal_provider state where you need to delete your local storage.