Custom Wallet List

Customizing the wallet list

Note: This API is unstable and likely to change in the near future. We recommend avoiding changes to the wallet list for now.

You can use the wallet object and the Wallet TypeScript type to build your own list of wallets. This way you have full control over which wallets to display, and in which order.

For example, you can choose to only show Rainbow and WalletConnect.

import { wallet, WalletList } from '@rainbow-me/rainbowkit';

const wallets: WalletList = [
  {
    groupName: 'Recommended',
    wallets: [
      wallet.rainbow({ chains, infuraId }),
      wallet.walletConnect({ chains, infuraId }),
    ],
  },
];

You can then use your wallets object to create the neccessary connectors by using the connectorsForWallets function.

import { wallet, WalletList, connectorsForWallets } from '@rainbow-me/rainbowkit';

const wallets: WalletList = [...];

const connectors = connectorsForWallets(wallets);

Finally, you can now pass your custom wallets to WagmiProvider's connectors prop.

import { WagmiProvider, chain } from 'wagmi';
...
const connectors = connectorsForWallets(wallets);

const App = () => (
  <WagmiProvider connectors={connectors}>
    <RainbowKitProvider>
      {/* Your App */}
    </RainbowKitProvider>
  </WagmiProvider>
);

Built-in wallets

The following wallets are provided via the wallet object (in alphabetical order).

Argent

import { wallet } from '@rainbow-me/rainbowkit';

wallet.argent(options: {
  chains: Chain[];
  infuraId?: string;
});

Coinbase Wallet

import { wallet } from '@rainbow-me/rainbowkit';

wallet.coinbase(options: {
  appName: string;
  chains: Chain[];
  jsonRpcUrl: string | ((args: { chainId?: number }) => string);
});

Injected Wallet

This is a fallback wallet option designed for scenarios where window.ethereum exists but hasn’t been provided by another wallet in the list.

import { wallet } from '@rainbow-me/rainbowkit';

wallet.injected(options: {
  chains: Chain[];
  shimDisconnect?: boolean;
});

This shouldn’t be used if another injected wallet is available. For example, when combined with MetaMask and Coinbase Wallet:

import { wallet, WalletList } from '@rainbow-me/rainbowkit';

const needsInjectedWalletFallback =
  typeof window !== 'undefined' &&
  window.ethereum &&
  !window.ethereum.isMetaMask &&
  !window.ethereum.isCoinbaseWallet;

const wallets: WalletList = [
  {
    groupName: 'Suggested',
    wallets: [
      wallet.rainbow({ chains, infuraId }),
      wallet.walletConnect({ chains, infuraId }),
      wallet.coinbase({
        chains,
        appName: 'My RainbowKit App',
        jsonRpcUrl: ({ chainId }) =>
          chains.find(x => x.id === chainId)?.rpcUrls?.[0] ??
          chain.mainnet.rpcUrls[0],
      }),
      wallet.metaMask({ chains, infuraId }),
      ...(needsInjectedWalletFallback
        ? [wallet.injected({ chains })]
        : []),
    ],
  },
];

MetaMask

import { wallet } from '@rainbow-me/rainbowkit';

wallet.metaMask(options: {
  chains: Chain[];
  infuraId?: string;
  shimDisconnect?: boolean;
});

Rainbow

import { wallet } from '@rainbow-me/rainbowkit';

wallet.rainbow(options: {
  chains: Chain[];
  infuraId?: string;
});

Trust Wallet

import { wallet } from '@rainbow-me/rainbowkit';

wallet.trust(options: {
  chains: Chain[];
  infuraId?: string;
});

WalletConnect

This is a fallback wallet option designed for other WalletConnect-based wallets that haven’t been provided by another wallet in the list.

import { wallet } from '@rainbow-me/rainbowkit';

wallet.walletConnect(options: {
  chains: Chain[];
  infuraId?: string;
});

Examples

Ordering

Here are a few examples of displaying different wallets, in different order.

Show MetaMask and WalletConnect.

import { wallet, WalletList } from '@rainbow-me/rainbowkit';

const wallets: WalletList = [
  {
    groupName: 'Recommended',
    wallets: [
      wallet.metaMask({ chains, infuraId }),
      wallet.walletConnect({ chains, infuraId }),
    ],
  },
];

Show MetaMask, Rainbow and Coinbase.

import { wallet, WalletList } from '@rainbow-me/rainbowkit';

const wallets: WalletList = [
  {
    groupName: 'Suggested',
    wallets: [
      wallet.metaMask({ chains, infuraId }),
      wallet.rainbow({ chains, infuraId }),
      wallet.coinbase({
        chains,
        appName: 'My RainbowKit App',
        jsonRpcUrl: ({ chainId }) =>
          chains.find(x => x.id === chainId)?.rpcUrls?.[0] ??
          chain.mainnet.rpcUrls[0],
      }),
    ],
  },
];

Reminder: The order of the wallets array defines the order in which wallets will be displayed in the UI.

Multiple groups

You can use the groupName key to name different wallet groups. This is useful if you want to communicate to your users which wallets you recommend, as well as other possibile wallets.

Recommend Rainbow and MetaMask, but also offer WalletConnect and Coinbase.

import { wallet, WalletList } from '@rainbow-me/rainbowkit';

const wallets: WalletList = [
  {
    groupName: 'Recommended',
    wallets: [
      wallet.rainbow({ chains, infuraId }),
      wallet.metaMask({ chains, infuraId }),
    ],
  },
  {
    groupName: 'Others',
    wallets: [
      wallet.walletConnect({ chains, infuraId }),
      wallet.coinbase({
        chains,
        appName: 'My RainbowKit App',
        jsonRpcUrl: ({ chainId }) =>
          chains.find(x => x.id === chainId)?.rpcUrls?.[0] ??
          chain.mainnet.rpcUrls[0],
      }),
    ],
  },
];

Overview

Getting Started

Advanced