I want to use web3modal + web3js in conjunction, but I get an error #3186

C0INON · 2023-07-17T23:24:12Z

C0INON
Jul 17, 2023

import { WalletConnectModalSign } from "https://unpkg.com/@walletconnect/[email protected]";

const web3Modal = new WalletConnectModalSign({
     projectId: "7e80420cca676d108caa1fe986e69b70",
     metadata: {
      name: "My Dapp",
      description: "My Dapp description",
      url: "https://my-dapp.com",
      icons: ["https://my-dapp.com/logo.png"],
     },
   });



async function onConnect() {
  try {
    const session = await web3Modal.connect({
      requiredNamespaces: {
        eip155: {
          methods: ["eth_sendTransaction", "personal_sign"],
          chains: ["eip155:1"],
          events: ["chainChanged", "accountsChanged"],
        },
      },
    });
    console.log(session);
   web3 = new Web3(session);
   chain = await web3.eth.getChainId();
   console.log(chain);
  } catch (err) {
    console.log(err);
  } finally {
    console.log("here");
  }
}

chain = await web3.eth.getChainId();

An error occurs when using that code. It is recognized that it is not linked to web3js. I'm asking because I think someone knows this solution.

console error
Uncaught Error: Provider does not have a request or send method to use.

Example used for source code as a reference.
https://github.com/WalletConnect/web3modal-examples/tree/main/walletconnect-modal-sign-html-cdn
And I loaded the web3js file into the index file.

Answered by glitch-txs

Jul 26, 2023

this line should be without brackets
const pkg = await import("https://esm.run/@walletconnect/[email protected]/dist/index.umd.js");

View full answer

glitch-txs · 2023-07-17T23:36:48Z

glitch-txs
Jul 17, 2023

Hi, the sign API alone doesn't work with libraries like web3.js, you can do this with the ethereum-provider package, though there's no CDN for it atm.

https://docs.walletconnect.com/2.0/web/providers/ethereum

7 replies

C0INON Jul 17, 2023
Author

Thank you for guiding me to a good solution. But I'm using Apache server and php, so I'll have to wait for CDN to come out. Thank you for your help

glitch-txs Jul 24, 2023

Hi @C0INON could you try this one: https://github.com/glitch-txs/ethereum-provider-cdn

C0INON Jul 26, 2023
Author

Thank you for letting me know the good data. I think it works when it's type="module". But I want to use it without type="module".

I've been importing dynamically, but it doesn't seem to be able to load the function 'etherumProvider' function.

Let me show you my source code

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button id="connect-button" onclick="onConnect()">Connect Wallet</button>
	<script language="javascript" type="text/javascript" src="web3.min.js"></script>
    <script src="main.js"></script>
  </body>
</html>

main.js

let web3;
let ethereumProvider = undefined;
const projectId = '7e80420cca676d108caa1fe986e69b70';
if (projectId === 'YOUR_PROJECT_ID') {
  throw new Error("You need to provide a project ID");
}

async function onConnect() {
	  try {
	const {pkg} = await import("https://esm.run/@walletconnect/[email protected]/dist/index.umd.js");
    // 5. Create ethereum provider, if one doesn't exist
    if (!ethereumProvider) {
      ethereumProvider = await pkg.EthereumProvider.init({
        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"],
        },
      });

      // 6. Set up connection listener
	  web3 = new Web3(ethereumProvider);
    }

    ethereumProvider.connect();
  } catch (err) {
    console.log(err);
  }
}

glitch-txs Jul 26, 2023

this line should be without brackets
const pkg = await import("https://esm.run/@walletconnect/[email protected]/dist/index.umd.js");

Answer selected by C0INON

C0INON Jul 26, 2023
Author

I tried to do what you told me, but I get the following error.
TypeError: Cannot read properties of undefined (reading 'init')

:(

C0INON Jul 26, 2023
Author

I solved the 'default. thanks for the many test.

thank

C0INON Jul 26, 2023
Author

 projectId,
        showQrModal: true,
        qrModalOptions: { themeMode: "light" },
		chains: [1],
		optionalChains: [56, 43114, 137, 250, 128, 42220, 1285, 8217, 42161, 100, 4689, 10000, 10001, 1666600000],
        methods: ["eth_sendTransaction", "personal_sign"],
        events: ["chainChanged", "accountsChanged"],
        metadata: {

Hello, sir, may I ask you a few more questions?
Wallet linkage has been completed, but it only goes on the Ethereum network and does not change to another network, and even if you change your wallet address, your account does not change at allis complete, but it only connects to the Ethereum network and does not change to another network.

 ethereumProvider.on("connect", (chainId) => {
		 console.log(ethereumProvider.accounts);
		});
		ethereumProvider.on("accountsChanged", (chainId) => {
		 console.log(ethereumProvider.accounts);
		});
	   ethereumProvider.on("chainChanged", (chainId) => {
		 console.log("change");
		});
		ethereumProvider.on("disconnect", (chainId) => {
		 console.log("bye bye");
		});

When you first connect your wallet, only chain changes and wallet addresses appear, and after that, changing your wallet address and network does not print outThe first time you connect your wallet, you'll see a log for the chain changes, and any subsequent network changes will not print the log. Disconnect is output normally.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

WalletConnect

I want to use web3modal + web3js in conjunction, but I get an error #3186

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment 7 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

WalletConnect

I want to use web3modal + web3js in conjunction, but I get an error #3186

C0INON Jul 17, 2023

Replies: 1 comment · 7 replies

glitch-txs Jul 17, 2023

C0INON Jul 17, 2023 Author

glitch-txs Jul 24, 2023

C0INON Jul 26, 2023 Author

glitch-txs Jul 26, 2023

C0INON Jul 26, 2023 Author

C0INON Jul 26, 2023 Author

C0INON Jul 26, 2023 Author

C0INON
Jul 17, 2023

Replies: 1 comment 7 replies

glitch-txs
Jul 17, 2023

C0INON Jul 17, 2023
Author

C0INON Jul 26, 2023
Author

C0INON Jul 26, 2023
Author

C0INON Jul 26, 2023
Author

C0INON Jul 26, 2023
Author