Real pain with connector errors - am I alone?

[NBMSacha]

Hey!

We're using WAGMI + viem for a little while now, appreciate it.

However, we've been getting, randomly, without any way to reproduce nor debug, users complaining about impossibility to connect - sometimes fixed magically.

Error messages are often "Connector not found" or "Connector already connected" - finding little to nothing online about it, so I was wondering: is anyone also experiencing this, is there any troubleshoot, workaround, reasons for these?

Our front-end: mobula.fi

[SaadNiaziDev]

Can u share your wagmi config file here? So it would be easy to debug.

[NBMSacha]

Sure, here is the config:

import {MagicAuthConnector} from "@everipedia/wagmi-magic-connector";
import {publicProvider} from "@wagmi/core/providers/public";
import {configureChains, Connector} from "wagmi";
import {CoinbaseWalletConnector} from "wagmi/connectors/coinbaseWallet";
import {InjectedConnector} from "wagmi/connectors/injected";
import {MetaMaskConnector} from "wagmi/connectors/metaMask";
import {WalletConnectConnector} from "wagmi/connectors/walletConnect";

import {
  arbitrum,
  aurora,
  avalanche,
  bittorrentchain,
  bnbChain,
  boba,
  celo,
  cronos,
  dfkSubnet,
  ethereum,
  fantom,
  gnosis,
  harmony,
  heco,
  klaytn,
  moonriver,
  oasis,
  okex,
  optimism,
  polygon,
  smartBCH,
  velas,
} from "../utils/constants/chains";

export const {chains, publicClient} = configureChains(
  [
    polygon,
    bnbChain,
    ethereum,
    avalanche,
    arbitrum,
    optimism,
    fantom,
    aurora,
    smartBCH,
    cronos,
    heco,
    dfkSubnet,
    velas,
    oasis,
    bittorrentchain,
    moonriver,
    okex,
    boba,
    harmony,
    klaytn,
    gnosis,
    celo,
  ],
  [publicProvider()],
);

export const connectors = [
  new MetaMaskConnector({chains, options: {shimDisconnect: true}}),
  new WalletConnectConnector({
    chains,
    options: {
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      projectId: "66f273755c831295d3179420693b4e97",
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-ignore
      qrModalOptions: {
        themeVariables: {
          "--wcm-z-index": "10000000000000000000",
        },
        explorerRecommendedWalletIds: [
          "c57ca95b47569778a828d19178114f4db188b89b763c899ba0be274e97267d96",
          "1ae92b26df02f0abca6304df07debccd18262fdf5fe82daa81593582dac9a369",
          "4622a2b2d6af1c9844944291e5e7351a6aa24cd7b23099efac1b2fd875da31a0",
        ],
        // mobileWallets: [
        //   "metamask",
        //   "trust",
        //   "rainbow",
        //   "argent",
        //   "imtoken",
        //   "pillar",
        //   "gnosisSafe",
        //   "opera",
        //   "operaTouch",
        //   "torus",
        // ],
      },
    },
  }),
  new CoinbaseWalletConnector({chains, options: {appName: "Mobula"}}),
  new InjectedConnector({
    chains,
    options: {
      name: "Injected",
      shimDisconnect: true,
    },
  }),
  new MagicAuthConnector({
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    chains,
    options: {
      apiKey: "pk_live_14B4398AB5406257", // required
      accentColor: "var(--chakra-colors-text-30)",
      customLogo: "https://mobula.fi/WhiteRound.png",
      customHeaderText: "Mobula ",
      isDarkMode: true,
      oauthOptions: {
        providers: ["google", "discord", "twitter"],
      },
      magicSdkConfiguration: {
        network: {
          rpcUrl: "https://polygon-rpc.com",
          chainId: 137,
        },
      },
    },
  }) as unknown as Connector,
];

[SaadNiaziDev]

Hide your keys :P .

[NBMSacha]

Well it's a front-end code so it's kinda public anyway 😁

[SaadNiaziDev]

"Connector already connected"
I have encountered this message few times. To bypass this one, you need to explicitly disconnect before connecting.
I think this happen due to conflict in localstorage as wagmi stores connection information there (like you connect to multiple websites before comming to your website, might be). But better explaination can be given by Wagmi team.

"Connector not found"
This happens if you are connecting like connect(connectors[0]) . Try to do this way connect({connector : connectors[0]})

This is how solve these errors in past during development. Hope someone might hai specific reason for this to happen.

[NBMSacha]

I have a testimonial from someone who just experienced this:

• Connector not found
• On Metamask (connector[0]) Windows & Chrome
• Has to deconnected the Metamask from the page, and worked fine.

He then confirmed that the user already went to Mobula, and that right now, the session wasn't "connected" (address = undefined) BUT still he had to disconnect (and I would have expected the other error message, the already connected one, REALLY trouble).

For the "Connector already connected" I'll try handling it this way as a workaround right now, for the connectors, I'm connecting the right way

[NBMSacha]

tagging @jxom to maybe provider further insight on how the magic happens under the hood?

[NBMSacha]

up up

[NBMSacha]

:'(

[NBMSacha]

Am I really the only one? 😬

[BLOCKCHAINDEVWEB]

Likewise, I have a difficult development because I have several connectors and chains in my Wagmi configuration.
Until now, maybe users only use wagmi with a single chain.

The public providers registered in wagmi's chains collection don't work at all and sometimes a bit correctly.
I've customized a collection of networks for the faulty ones with public providers less fussy about the quality of requests made via wagmi and private providers alchemy.

[issa-me-sush]

DAMN WHY CANT WE FIND ANY HELP ON THIS?

[kohana11]

#2660 (comment)
Maybe this will help, I'm using nextjs and sometimes facing this issue. You can check connectors from hook useConnect and check the ready of each connector. First load it should be false and will be true on the second load.

[NBMSacha]

Amazing! Did this solve 100% or not? Le 10 oct. 2023 à 15:42 +0200, kohana11 ***@***.***>, a écrit :

…

#2660 (comment) Maybe this will help, I'm using nextjs and sometimes facing this issue. You can check connectors from hook useConnect and check the ready of each connector. Firtst load it should be false and will be on the second load. — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: ***@***.***>

[bond-aspecta]

My solutions:

• Reduce the connectors in wagmi config, or just do not specify connectors in the config.
• Check whether the desired connector exists and show toast to tell users to install the wallet before running connect method.