[bug] Unable to add custom wallet to wallet list

[Adebesin-Cell]

Is there an existing issue for this?

• I have searched the existing issues

RainbowKit Version

^2.1.4

wagmi Version

^2.12.4

Current Behavior

The custom wallet "Magic" does not show up in the wallet list when using version 2.x. Definition of magic connector can be found here

Code Samples

import { dedicatedWalletConnector } from '@magiclabs/wagmi-connector

export const rainbowMagicConnector = ({ chain }: { chain: Chain }): Wallet => ({
  id: 'magic',
  name: 'Magic',
  iconUrl: 'https://svgshare.com/i/pXA.svg',
  iconBackground: 'white',
  installed: true,
  rdns: 'io.magic',

  createConnector: () =>
    dedicatedWalletConnector({
      chains: [chain],
      options: {
        customLogo: 'https://iq.social/images/iq-logo.svg',
        apiKey: env.NEXT_PUBLIC_MAGIC_API_KEY,
        accentColor: '#ea3b87',
        oauthOptions: {
          providers: ['google', 'facebook', 'twitter', 'discord'],
        },
        isDarkMode: false,
        magicSdkConfiguration: {
          network: {
            chainId: chain.id,
            rpcUrl: chain.rpcUrls.default.http[0],
          },
        },
      },
    }),
})

const connectors = connectorsForWallets(
  [
    {
      groupName: 'Suggestions',
      wallets: [() => rainbowMagicConnector({ chain: polygon })]
    },
    ...getDefaultWallets({
      appName: 'My App',
      projectId: env.NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID
    }).wallets
  ],
  {
    appName: 'My App',
    projectId: env.NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID
  }
);

const config = createConfig({
  chains: [chain] as any,
  connectors,
  transports: {
    [chain.id]: http()
  },
  multiInjectedProviderDiscovery: false
});

Expected Behavior

The custom wallet "Magic" should appear in the wallet list.

Steps To Reproduce

1. Import the dedicatedWalletConnector:

   import { dedicatedWalletConnector } from '@magiclabs/wagmi-connector';

2. Define the custom wallet connector:

   export const rainbowMagicConnector = ({ chain }: { chain: Chain }): Wallet => ({
     id: 'magic',
     name: 'Magic',
     iconUrl: 'https://svgshare.com/i/pXA.svg',
     iconBackground: 'white',
     installed: true,
     rdns: 'io.magic',
   
     createConnector: () =>
       dedicatedWalletConnector({
         chains: [chain],
         options: {
           customLogo: 'https://iq.social/images/iq-logo.svg',
           apiKey: env.NEXT_PUBLIC_MAGIC_API_KEY,
           accentColor: '#ea3b87',
           oauthOptions: {
             providers: ['google', 'facebook', 'twitter', 'discord'],
           },
           isDarkMode: false,
           magicSdkConfiguration: {
             network: {
               chainId: chain.id,
               rpcUrl: chain.rpcUrls.default.http[0],
             },
           },
         },
       }),
   });

3. Attempt to use the custom wallet in your RainbowKit setup:

   const connectors = connectorsForWallets(
     [
       {
         groupName: 'Suggestions',
         wallets: [() => rainbowMagicConnector({ chain: polygon })],
       },
       ...getDefaultWallets({
         appName: 'My App',
         projectId: env.NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID,
       }).wallets,
     ],
     {
       appName: 'My App',
       projectId: env.NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID,
     }
   );
   
   const config = createConfig({
     chains: [chain] as any,
     connectors,
     transports: {
       [chain.id]: http(),
     },
     multiInjectedProviderDiscovery: false,
   });

4. Observe that the "Magic" wallet does not appear in the wallet list.

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

https://stackblitz.com/edit/stackblitz-starters-swcim7?file=app%2Fconfig.ts

Anything else?

Media

[Adebesin-Cell]

@DanielSinclair I created the issue as requested, kindly help look at it, thanks 👏

[Adebesin-Cell]

Hey @DanielSinclair, I've been debugging the issue and discovered that while the connectors are being passed to createConfig through getDefaultConfig from RainbowKit, it seems that Wagmi isn't properly parsing them. This might be related to the information in the Wagmi documentation on creating connectors.

Additionally, I noticed that the Safe wallet doesn't render in RainbowKit, even though it is listed on Wagmi's page here.

At this point, I'm not sure what the best course of action is. If you have any suggestions or leads, I would greatly appreciate your input.

Thanks in advance!

[Adebesin-Cell]

Hey @DanielSinclair, thanks! I'll be closing this, I figured it out

[cedrichan]

@Adebesin-Cell Do you recall how you were able to address this? I am running into the same issue.

[Adebesin-Cell]

Hey @cedrichan, yeah, I think I do! I ended up following the coinbaseWallet approach. Here's how they set up the connector:

createConnector: (walletDetails: WalletDetailsParams) => {
  const connector: CreateConnectorFn = coinbaseConnector({
    appName,
    appLogoUrl: appIcon,
    preference: coinbaseWallet.preference,
  });

  return createConnector((config) => ({
    ...connector(config),
    ...walletDetails,
  }));
}

This was the approach I was trying to configure back then, although I struggled to get the connector working 😅. Below is the more detailed code I used, which involves magicWallet and the dedicatedWalletConnector from @magiclabs/wagmi-connector:

import { env } from '@/env';
import { dedicatedWalletConnector } from '@magiclabs/wagmi-connector';
import type { Wallet } from '@rainbow-me/rainbowkit';
import type { Chain } from 'viem';
import { polygon } from 'viem/chains';
import { createConnector } from 'wagmi';

export const createMagicConnector = ({ chain }: { chain: Chain }): Wallet => ({
  id: 'magic',
  name: 'Magic',
  iconUrl: 'https://svgshare.com/i/pXA.svg',
  iconBackground: '#fff',
  installed: true,
  iconAccent: '#b4acfc',

  createConnector: (walletDetails) => {
    const magicConnector = dedicatedWalletConnector({
      chains: [chain],
      options: {
        customLogo: 'https://iq.social/images/iq-logo.svg',
        apiKey: env.NEXT_PUBLIC_MAGIC_API_KEY,
        accentColor: '#ea3b87',
        oauthOptions: {
          providers: ['google', 'facebook', 'twitter', 'discord'],
        },
        isDarkMode: false,
        magicSdkConfiguration: {
          network: {
            chainId: chain.id,
            rpcUrl: chain.rpcUrls.default.http[0],
          },
        },
      },
    });

    return createConnector((config) => ({
      ...magicConnector(config),
      ...walletDetails,
    }));
  },
});

export const magicWallet = () => createMagicConnector({ chain: polygon });

You can also refer to this pull request for more context. This setup worked for me, though it took a bit of trial and error to get everything configured properly. Hope this helps!