Web3Modal+wagmi in VanillaJS doesn't connect with wallets installed on smartphone #2659

ratstraper · 2024-08-01T08:59:03Z

ratstraper
Aug 1, 2024

With the same code and conditions in the chrome browser on the desktop computer, I can easily connect to the metamask module. But when I try to connect to the wallet in chrome browser on smartphone (android) I get the answer "Connection declined". I have metamask, trustwallet and other apps installed on my smartphone. I can also connect via e-mail on my smartphone but not to the wallets.
How can I fix it?

<html>
<head>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <w3m-button></w3m-button>
    <script type="module">
        import { createWeb3Modal, defaultWagmiConfig } from "https://esm.sh/@web3modal/wagmi@5.0.10/?bundle";
        // or import { createWeb3Modal, defaultWagmiConfig } from "https://esm.sh/v135/@web3modal/wagmi@5.0.10/es2022/wagmi.bundle.mjs";
        import { mainnet, polygon } from "https://esm.sh/@wagmi/core@2.12.2/chains?exports=mainnet,polygon";
        import { reconnect, getAccount, getEnsName, switchChain } from "https://esm.sh/@wagmi/core@2.12.2?exports=reconnect,getAccount,getEnsName,switchChain";

        const projectId = WALLET_CONNECT_PROJECT_ID;

        const metadata = {
            name: "name",
            description: "description",
            url: "https://mysite", // origin must match your domain & subdomain
            icons: ["https://avatars.githubusercontent.com/u/37784886"],
        };

        const chains = [mainnet, polygon];

        export const config = defaultWagmiConfig({
            chains,
            projectId,
            metadata,
        });

        reconnect(config);

        const modal = createWeb3Modal({
            wagmiConfig: config,
            projectId,
        });

        modal.subscribeEvents((newState) => {
            const name  = newState.data.event;
            console.log("events", newState.data.event);
        });
      </script>
</body>
</html>

preciousaffiah · 2025-01-13T18:24:17Z

preciousaffiah
Jan 13, 2025

It’s the same issue I’m having

0 replies

mvaljento · 2025-01-15T08:21:02Z

mvaljento
Jan 15, 2025

I'm having a similar issue in my Angular-based dApp using AppKit and wagmi. Although I'm not getting connection errors. MetaMask simply disconnects immediately.

0 replies

AItoNFT · 2025-05-26T20:10:21Z

AItoNFT
May 26, 2025

1 reply

arein May 26, 2025
Maintainer

Using Wagmi i can connect with the Metamask app. But after reloading page its not reconnecting. Am i missing something or is it a bug?

Possibly related to #4395 which we should merge shortly

Assuming you're already on the latest version

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Reown

Web3Modal+wagmi in VanillaJS doesn't connect with wallets installed on smartphone #2659

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 3 comments 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Reown

Web3Modal+wagmi in VanillaJS doesn't connect with wallets installed on smartphone #2659

Uh oh!

Uh oh!

ratstraper Aug 1, 2024

Replies: 3 comments · 1 reply

Uh oh!

preciousaffiah Jan 13, 2025

Uh oh!

Uh oh!

mvaljento Jan 15, 2025

Uh oh!

AItoNFT May 26, 2025

Uh oh!

arein May 26, 2025 Maintainer

ratstraper
Aug 1, 2024

Replies: 3 comments 1 reply

preciousaffiah
Jan 13, 2025

mvaljento
Jan 15, 2025

AItoNFT
May 26, 2025

arein May 26, 2025
Maintainer