Problem with using custom wagmi client

[sjunaiduk]

    Hi,

When I use the default client with getDefaultClient

The wallet connect option and metamask option work fine.

The coinbase option, I select it and get an error popup in the UI showing the following: "This dApp is most likely missing the headlessMode: true flag in the custom CoinbaseWalletConnector options."

I then tried using my own custom wagmi client using the coinbase wallet connector.

I got the same problem then.

I also tried using the injected connector and that also wasn't showing as an option when I click the connect button.

Also, the wallet connect connector if I try to use it with my custom wagmi client, (when qrcode is set to false in the connector options) , the qr code to scan with the phone doesnt show. I see this:

However when I click "use Walletconect modal" that works fine.

When I set qr code to true and click the wallet connect option, the QR code pops up but if I try closing it it doesn't close and fetches a new qr code..

Am I doing anything wrong or missing something?

Wagmi version: ^0.11.7 Ethers version: ^5.7.2 Connect kit verison: ^1.2.1

Originally posted by @sjunaiduk in https://github.com/family/connectkit/discussions/169

[lochie]

Hey @sjunaiduk, what framework are you using here? You may need to include polyfills if your bundler doesn't provide them for you (e.g. Vite).

If not, could you provide us a minimal reproducible example to help debug this issue? You can use one of our templates on codesandbox to help get you started.

[sjunaiduk]

Hey @sjunaiduk, what framework are you using here? You may need to include polyfills if your bundler doesn't provide them for you (e.g. Vite).

If not, could you provide us a minimal reproducible example to help debug this issue? You can use one of our templates on codesandbox to help get you started.

Hi, I'm using the latest version of react and the bundler is webpack.

I'll get try get a minimal reproducible example to clarify what exactly I did.

Thanks for your help

[dszeto]

Running into a similar situation as well. There is a slight difference on my end. If I set headlessMode: true in my CoinbaseWalletConnector, the UI works properly for the first time. Once I disconnect and try to connect again, it looks like as if headlessMode got overwritten and the default Coinbase connect UI pops out again.

I'll also make a reproducible example once I have bandwidth.

[sjunaiduk]

Hey,

So what I did was I setup a react project using truffle. https://trufflesuite.com/boxes/react/

I installed truffle globally using npm then ran the command truffle unbox react to setup the react project.

I then deleted the starter components already made for me, and followed the example in the getting started section of connectkit website.

I believe it must be something to do with the way truffle set up the react project. If I use createreactapp then the project works fine!

[lochie]

Managed to replicate this issue when having multiple wallet extensions installed (e.g Coinbase Wallet + Phantom). I believe this is a conflict issue with the wallet providers trying to override other providers. Unfortunately we can't control that within ConnectKit until we get the EIP-5749 proposal across.

If any of you have found this issue occurs in other scenarios, and can share a reproducible example, feel free to comment and we'll reopen this issue.

[sjunaiduk]

I managed to replicate this issue when I wasn't using getDefaultClient which connectkit provides, and if I instead explicitly use the WalletConnectConnector when creating the client I get the problem of being unable to close the qr code popup and instead of it closing the QR code refreshes. The same problem with the headless mode of the coinbase modal also occured and I resolved that by manually setting headlessMode to true.

import { publicProvider } from "wagmi/providers/public";
import { bscTestnet } from "wagmi/chains";
import { WalletConnectConnector } from "wagmi/connectors/walletConnect";

const { chains, provider } = configureChains([bscTestnet], [publicProvider()]);

// const client = createClient(
//   getDefaultClient({
//     chains: [bscTestnet],
//   })
// );

const client = createClient({
  connectors: [
    new WalletConnectConnector({
      chains,
      options: {
        projectId: ID_HERE,
      },
    }),
  new CoinbaseWalletConnector({
      chains,
      options: {
        appName: "wagmi",
        headlessMode: true
      },
    }),
  ],
  provider,
});

This can also be seen in the network logs as I attempt to close the WalletConnect modal:

I used create react app to create the react app, and instead of using the getDefaultClient connectkit provides I used the connectors from wagmi to create a custom client.

[lochie]

@sjunaiduk youll need to include the showQrModal:false option in the new walletconnectconnector. if not using our client helper there's a lot of little details that get missed.

[sjunaiduk]

@sjunaiduk youll need to include the showQrModal:false option in the new walletconnectconnector. if not using our client helper there's a lot of little details that get missed.

Thanks, setting showQrModal:false for the WalletConnectConnector did the trick.

However, the initial problem with the injected connector that I stated in the opening post is still occuring.

I also tried using the injected connector and that also wasn't showing as an option when I click the connect button.