Option to not show installed wallets when using custom wallet list

[agnideepGhosh]

In @rainbow-me/rainbowkit v2, when I am using a custom wallet list as described here - https://www.rainbowkit.com/docs/custom-wallet-list, installed wallets also appear in the modal. Is there a way to only show wallets passed in the custom list in the modal?

[magiziz]

@agnideepGhosh Yes that's possible. You can set multiInjectedProviderDiscovery to false in your wagmi config.

Example with createConfig.

import { connectorsForWallets } from '@rainbow-me/rainbowkit';
import {
  rainbowWallet,
  walletConnectWallet,
} from '@rainbow-me/rainbowkit/wallets';
import { createConfig, http } from 'wagmi';
import { mainnet } from 'wagmi/chains';

const connectors = connectorsForWallets(
  [
    {
      groupName: 'Recommended',
      wallets: [rainbowWallet, walletConnectWallet],
    },
  ],
  {
    appName: 'My RainbowKit App',
    projectId: 'YOUR_PROJECT_ID',
  }
);

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

Example with getDefaultConfig.

import '@rainbow-me/rainbowkit/styles.css';

import { getDefaultConfig } from '@rainbow-me/rainbowkit';
import {
  rainbowWallet,
  walletConnectWallet,
} from '@rainbow-me/rainbowkit/wallets';
import { mainnet } from 'wagmi/chains';

const config = getDefaultConfig({
  wallets: [
    {
      groupName: 'Recommended',
      wallets: [rainbowWallet, walletConnectWallet],
    },
  ],
  multiInjectedProviderDiscovery: false,
  chains: [mainnet],
  appName: 'My RainbowKit App',
  projectId: 'YOUR_PROJECT_ID',
});

[kylehoang92]

I want to display only the wallets I have added to connectorsForWallets. To achieve this, I can disable multiInjectedProviderDiscovery. However, there may be a connection issue as noted in the first comment. It would be ideal if there is an option to utilize EIP-6963 benefits while selectively showcasing supported wallets.

[DanielSinclair]

I see. That's valid. I think we would actually want to introduce this behavior into EIP-6963 as it currently lacks the ability for the wallet to advertise their supported chains. The way to approach this for now would be to allow a user to connect any wallet, attempt to switch to the appropriate chain with useSwitchChain. Wagmi will throw an error if the chain is unavailable and the wallet lacks support for Custom Chains. When this errors occurs, advise the user that their wallet isn't supported, and provide valid options. Alternatively, you could use our WalletButton API and build a custom connection flow that only supports specific wallets. As far as Keplr Wallet, we can definitely add support for that. If you're familair, do you mind opening a PR to add support? You can reference this PR: https://github.com/rainbow-me/rainbowkit/pull/2156/files

[kylehoang92]

Hi @DanielSinclair, thank you for the suggestion. Unfortunately, when I have multiple extensions installed on my browser and set multiInjectedProviderDiscovery to true, using WalletButton opens the wrong extension prompt.

[DanielSinclair]

@kylehoang92 Which wallet were you seeing that routing issues with? Some unfortunately still haven't fully adopted EIP-6963 which would prevent that. We have manual overrides as well for EIP-1193 and I can try to add one for that specific wallet

[kylehoang92]

@DanielSinclair I am having trouble with my MetaMask wallet, as it is being overridden by the OKX, Biget, or Trust wallets. I cannot connect to MetaMask properly.

[Adebesin-Cell]

Hi @magiziz,

I've been trying to add a custom wallet - Magic. You can find the dedicated wallet connector definition here. However, for some reason, it never shows up in the wallet list. It works fine in version 1.x but doesn't appear in version 2.x. Is there something additional that needs to be done for a custom wallet to show up?

Below are the relevant code snippet and screenshots:

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],
          },
        },
      },
    }),
})

Thanks in advance for any guidance!

[DanielSinclair]

@Adebesin-Cell Can you create a new GitHub issue for this?

[Adebesin-Cell]

For sure!