Wagmi throwing errors when using getDefaultConfig vs createConfig

[onethread]

I'm using rainbowkit with getDefaultConfig, and for some reason, various functions are throwing; e.g., signMessage -> getConnectorClient throws connection.connector.getChainId is not a function.

Inspecting connection.connector shows an object: {id: 'io.metamask', name: 'MetaMask', type: 'injected', uid: '74f3...'}

However, I don't get these errors if I use Wagmi's createConfig. I'm not really sure why, can anyone shed some light?

@rainbow-me/rainbowkit": "2.1.2",
"wagmi": "^2.10.5",
"viem": "2.9.31"

[magiziz]

@onethread Can you share a small reproducible example ? Meanwhile you do that can you try declaring a global config type from Wagmi ? Here is an example https://wagmi.sh/react/typescript#declaration-merging.

[onethread]

Hi @magiziz, so updating wagmi to 2.10.7 and viem to 2.16.3 fixed it. Using createConfig was a red herring, it was also only intermittently working prior to updating.

Thanks for getting back to me, though!

[magiziz]

Glad it worked. Let me know if there is anything else i can help you with 👍

[godsflaw]

I'm getting this too. I've spent hours debugging it, and probably could use a hand. Unfortunately, the upgrade didn't work as I'm on newer versions of everything than @onethread. I have pulled rainbowkit in as a replacement for my old wallet connect button. I love it, but my entire project is using ethers.js, and so I needed to lift the provider and the signer out of wagmi using this utility function:

import { getClient, getConnectorClient } from '@wagmi/core';
import { providers } from 'ethers';

/** Convert client to provider */
export function clientToProvider(client) {
  const { chain, transport } = client;
  const network = {
    chainId: chain.id,
    name: chain.name,
    ensAddress: chain.contracts?.ensRegistry?.address,
  };
  if (transport.type === 'fallback') {
    return new providers.FallbackProvider(
      transport.transports.map(({ value }) => new providers.JsonRpcProvider(value?.url, network)),
    );
  }
  return new providers.JsonRpcProvider(transport.url, network);
}

/** Convert viem Public Client to ethers.js Provider */
export function getEthersProvider(config, { chainId } = {}) {
  const client = getClient(config, { chainId });
  if (!client) return null;
  return clientToProvider(client);
}

/** Convert client to signer */
export function clientToSigner(client) {
  const { account, chain, transport } = client;
  const network = {
    chainId: chain.id,
    name: chain.name,
    ensAddress: chain.contracts?.ensRegistry?.address,
  };
  const provider = new providers.Web3Provider(transport, network);
  const signer = provider.getSigner(account.address);
  return signer;
}

/** Convert viem Public Client to ethers.js Signer */
export async function getEthersSigner(config, { chainId } = {}) {
  try {
    const client = await getConnectorClient(config, { chainId });
    return clientToSigner(client);
  } catch (error) {
    console.error("Failed to get Ethers signer:", error);
    return null;
  }
}

When I browse around with an unconnected wallet it works fine, as my provider is set like this and passed to my views:

  const { isConnected } = useAccount();

  useEffect(() => {
    setWalletConnected(isConnected);
  }, [isConnected]);

  const provider = useMemo(() => {
    if (walletConnected) {
      const ethersProvider = getEthersProvider(config.rainbowConfig);
      if (ethersProvider) {
        return ethersProvider;
      }
    }
    return new ethers.providers.JsonRpcProvider(config.readOnlyUrls[config.readOnlyChainId], {
      name: "Base Mainnet",
      chainId: config.readOnlyChainId,
      ensAddress: ensAddress
    });
  }, [walletConnected]);

The problem comes in the views that need signers, where I get the signers like this:

      console.log("walletConnected", walletConnected);
      if (walletConnected) {
        console.log("provider", provider);

        const signer = await getEthersSigner(config.rainbowConfig);
        if (signer) {
          userAddress = await signer.getAddress();
          console.log("signer", signer);
          console.log("userAddress", userAddress);
        } else {
          console.error("Failed to get signer");
        }
      }

When I first start the app up, or when I first connect a wallet everything works. The signer comes in as my address, I can browse around the site from view to view, and I can even send transactions. The problem is, if I reload that page like in @onethread's case, I get:

TypeError: connection.connector.getChainId is not a function

This happens in the call to getConnectorClient() inside getEthersSigner(). Now, it may be that I'm missing something and need a rubber duck review, but this issue is exactly what I'm seeing. Any thoughts @magiziz? I'm happy to share a screen and debug it together if you think this is a bigger issue that needs attention.

I will say, it's highly likely I'm doing something dumb here as UI work isn't my strongest area. If I figure this out in a more satisfying way than @onethread, I will post the resolution here for others.

UPDATE:
I now have multiple views with the problem, but one view using the same methodology doesn't have the problem. It feels like a race condition, but I don't know if it's something I'm causing or in rainbowkit.

UPDATE:
I tried downgrading to @onethread's versions of packages and it didn't work.

[godsflaw]

So, it's a race condition for sure, I just don't know yet if it's in rainbowkit, wagmi, or my code. My hack to work around it at the moment is to do this in getEthersSigner():

/** Convert viem Public Client to ethers.js Signer */
export async function getEthersSigner(config, { chainId } = {}) {
  const maxRetries = 5;
  let retries = 0;

  // gross hack to beat race condition until I figure out where it is
  while (retries < maxRetries) {
    try {
      const client = await getConnectorClient(config, { chainId });
      if (!client) throw new Error('Client is not defined');
      return clientToSigner(client);
    } catch (error) {
      // console.error("Failed to get Ethers signer, retrying:", error);
      retries += 1;
      await new Promise((resolve) => setTimeout(resolve, 100));
    }
  }

  console.error("Failed to get Ethers signer after retries");
  return null;
}