[bug] Adding a custom Wallet with a custom connector does not display in wallet list

[secbajor]

Is there an existing issue for this?

• I have searched the existing issues

RainbowKit Version

2.2.3

wagmi Version

2.14.8

Current Behavior

I've followed the Rainbowkit v2 documentation for creating a custom wallet and adding it to my wallet list. The custom wallet displays in the list of wallets in my app when using the example for createConnector which is getWalletConnectConnector. However, I want to use my own custom connector functions to create a mock wallet for my development environment. When I do so, by replacing getWalletConnectConnector with a fully detailed connector function, there is no error but the wallet does not appear in the list.

Expected Behavior

I want to be able to write a custom connector, provide it to createConnector in my custom wallet, and see that wallet display in the list in my app. We had a working implementing with Rainbowkit/Wagmi v1 so I was expecting to be able to get this working on v2.

Steps To Reproduce

This works as expected (copied from the example in Rainbowkit docs) - the custom wallet displays in the wallet list.

export const customWallet = ({ projectId }: MyWalletOptions): Wallet => ({
  id: "custom-dev-wallet",
  name: "Development Wallet",
  iconUrl: "https://my-image.xyz",
  iconBackground: "#0c2f78",
  hidden: () => false,
  createConnector: getWalletConnectConnector({ projectId }),
});

However, attempting to set createConnector with my custom connector prevents the wallet from displaying in the wallet list (note that the app actually loads as connected to the mock wallet, so the connection itself is working OK, its just that it no longer displays in the wallet list)

export const customWallet = ({ projectId }: MyWalletOptions): Wallet => ({
  id: "custom-dev-wallet",
  name: "Development Wallet",
  iconUrl: "https://my-image.xyz",
  iconBackground: "#0c2f78",
  hidden: () => false,
  createConnector: () => (config) => ({
    id: "custom-wallet",
    name: "Custom Wallet",
    type: "custom" as const,
    connect: async () => ({
      accounts: [devAccount],
      chainId: foundry.id,
    }),
    disconnect: async () => {
      console.log("Disconnected from custom wallet");
    },
    getAccounts: async () => {
      return [devAccount];
    },
    getChainId: async () => {
      return foundry.id;
    },
    isAuthorized: async () => {
      return true;
    },
    onAccountsChanged: (accounts: string[]) => {
      console.log("Accounts changed:", accounts);
    },
    onDisconnect: () => {
      console.log("Disconnected");
    },
    getWalletClient: async () =>
      createWalletClient({
        account: {
          address: devAccount,
          type: "json-rpc",
        },
        chain: foundry,
        transport: http("http://localhost:8545"),
      }),
    getProvider: async () => {
      return { provider: http("http://localhost:8545") };
    },
    onChainChanged: (chainId: string) => {
      console.log("Chain changed:", chainId);
    },
  }),
});

And setting my config

const config = getDefaultConfig({
  appName: "App",
  projectId: projectId,
  chains: [mainnet, sepolia, foundry],
  wallets: [
    {
      groupName: "Recommended",
      wallets: [rainbowWallet, customWallet, injectedWallet],
    },
  ],
  transports: {
    [foundry.id]: http(),
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
});

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

No response

Anything else?

I expect my custom wallet to display here in my running app, however it does not.

[linear]

RK-141 [bug] Adding a custom Wallet with a custom connector does not display in wallet list

[DanielSinclair]

The connector changed a little bit in v2, which I think is the root issue. Checkout how we implement getWalletConnectConnector here to match the connector type, or follow this guide and look at Web3Auth's implementation for their connector implementation that is compatible with v2. https://web3auth.io/docs/guides/rainbowkit-guide

Is there a reason you need a custom connector? Generally you would want to use EIP-6963 on the wallet side so that it is registered/discoverable in RainbowKit without a connector and avoids conflicts. The wevm team built a wallet for Anvil that does exactly this too: https://github.com/paradigmxyz/rivet