Error calling Ethereum-Provider in HTML/JS: isWsUrl is not a function

[wavywtf]

Hello I've been trying to migrate from v1 to v2 and use the new Ethereum-Provider package to pass as a provider to web3, however I am currently running into an issue. See below image:

My current setup is as follows:

<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
<script type="module">
import walletconnectEthereumProvider from 'https://cdn.skypack.dev/@walletconnect/ethereum-provider';
import { WalletConnectModal } from 'https://unpkg.com/@walletconnect/modal'
import { Web3Modal } from 'https://unpkg.com/@web3modal/html'

/* Using these following cdn packages also give an error "EthereumProvider not provided/found as export" */
//import { EthereumProvider } from 'https://cdn.skypack.dev/@walletconnect/ethereum-provider';
//import { EthereumProvider } from 'https://unpkg.com/@walletconnect/ethereum-provider';

let ethereumProvider = undefined;
const connectButton = document.getElementById("connect-button");
async function onConnect() {
  try {
    connectButton.disabled = true;

    if (!ethereumProvider) {
      ethereumProvider = await walletconnectEthereumProvider.init({
        projectId,
        showQrModal: true,
        chains: [5],
		rpcMap: {
          [5]: "https://goerli.infura.io/v3/*******",
        },
        methods: ["eth_sendTransaction", "personal_sign"],
        events: ["chainChanged", "accountsChanged"],
      });

      ethereumProvider.on("connect", () =>
        console.log(ethereumProvider.accounts)
      );
    }

    ethereumProvider.connect();
  } catch (err) {
    console.log(err);
  } finally {
    connectButton.disabled = false;
  }
}

jQuery('#connect-button').on('click', async function(e) { 
	e.preventDefault; 
	await onConnect();
});

if(ethereumProvider) {
    let web3 = new Web3(ethereumProvider);
	setInterval(function () { 
		web3.eth.getBlockNumber().then(data => {   
			console.log(data); 
		});
	}, 6000);
}
</script>

<button id="connect-button">Sign In</button>

Any ideas as to what 'isWsUrl is not a function' is referring to and why it's not working?

[wavywtf]

bump

[atifnimran]

P

[wavywtf]

This is a very urgent matter and still no response. I will be bumping this until I get a response. Walletconnect v2 has to be the worst update/rollout execution I've ever experienced. There are LIVE projects failing because of simple provider implementation that used to work so great in v1. Before deprecating v1, the authors should've of made sure to keep this simple and easy. Web3's entire existence does not and should not revolve entirely around React. But yeah I digress cause I can go on for days.

[wavywtf]

I’m sorry but this isn’t a reply to my questions nor does it clarify things or provide any example for a js/html pure solution. The examples you originally link are using vite or similar. And of course I added my project Id. Is there a pure js/html example you can provide?

[glitch-txs]

Hi @wavywtf, you can check the ones that are labeled as cdn which are pure html/js:

• Example #1
• Example #2

[wavywtf]

I don't where in the provided examples am I able to get the provider to pass to web3.js??

[glitch-txs]

Hi @wavywtf, those don't work directly with web3.js. I managed to make Ethereum Provider work, could you test it?
https://github.com/glitch-txs/ethereum-provider-cdn

[wavywtf]

HI thanks I ran my bare minimum test and it was a success so thanks! I have to test my own setup more but as far as getting the provider to pass to web3js, that seems to do the trick and be exactly what I was looking for in terms of pure js/html and lightweight. My original code wasn't that much different from the repo except the package import. So I still don't know what isWsUrl is, but THAT repo should definitely be in the official docs, examples, and website. I'm positive it can be helpful to others.

I'm running into other errors not related to my question such as metamask not showing on desktop as an option (?), but as far as my original problem, it's resolved, so thanks @glitch-txs !

[glitch-txs]

hi! Glad to hear that! Unfortunatelly ethereum-provider doesn't work with browser wallets, this is only available in web3modal atm. There's a work around for ethers that I'm sure could be adapted to web3,js in case you want to use web3modal instead https://wagmi.sh/core/ethers-adapters.

Having browser wallets in the modal and support for other libraries like ethers and web3.js is being worked on in web3modal v3, but it's still WIP

[atifnimran]

Okay please

[wavywtf]

Oh ok, I guess I'll have to figure out something else for desktop.

I do have another question though of something I noticed while testing the code. In my old setup I was able to get the provider and save it as a local storage item so I can use throughout multiple scripts and not have to reconnect every time. Now however I'm unable to because it returns as [object object], and come to find out it's due to circular references that I'm unable to even stringify or parse without a custom function to clean the circular references. Currently I tried stringifying -> save as local storage item -> reload page -> get item and parse -> pass to web3 = error So for now I'm using window but I still have to reconnect every page load. Any idea on a workaround?

[glitch-txs]

Hi, when you're are already connected WalletConnect will store this information in localStorage, and after running init function it will reconnect automatically. You can know if there's an open session if provider.session object exists

[wavywtf]

Ok so based on the code in your repo, I added

if(!ethereumProvider.session) {
await ethereumProvider.connect();
}

after the ethereumProvider init() function. And it looks like it worked.

So to clarify, if a user is already connected and the page is reloaded, does that mean the provider init() function has to run first every time/page load before being able to check provider.session? or can the provider be retrieved on page load without init()?