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 import individual wallets from '@rainbow-me/rainbowkit/wallets' along with the connectorsForWallets function to build your own list of wallets with their necessary connectors. This way you have full control over which wallets to display, and in which order.

For example, you can choose to only show Rainbow along with generic fallback wallets.

import { connectorsForWallets } from '@rainbow-me/rainbowkit';
import {
  injectedWallet,
  rainbowWallet,
  walletConnectWallet,
} from '@rainbow-me/rainbowkit/wallets';
import { configureChains, mainnet } from 'wagmi';
import { alchemyProvider } from 'wagmi/providers/alchemy';
import { publicProvider } from 'wagmi/providers/public';

const { chains } = configureChains(
  [mainnet],
  [
    alchemyProvider({ apiKey: process.env.ALCHEMY_ID }),
    publicProvider(),
  ]
);

const connectors = connectorsForWallets([
  {
    groupName: 'Recommended',
    wallets: [
      injectedWallet({ chains }),
      rainbowWallet({ projectId, chains }),
      walletConnectWallet({ projectId, chains }),
    ],
  },
]);

You can then pass your connectors to wagmi's createConfig.

import { createConfig, WagmiConfig } from 'wagmi';
...
const connectors = connectorsForWallets([ /* ... */ ]);

const wagmiConfig = createConfig({
  connectors,
});

const App = () => (
  <WagmiConfig config={wagmiConfig}>
    <RainbowKitProvider {...etc}>
      {/* Your App */}
    </RainbowKitProvider>
  </WagmiConfig>
);

Built-in wallets

The following wallets are provided via the wallet object.

Generic Wallets

The following wallets are scoped to generic connection methods rather than specific apps. As a result, it’s recommended that these wallets are always included.

WalletConnect

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

It's recommended that you always include this wallet in the list to ensure all WalletConnect-based wallets are supported.

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

walletConnectWallet(options: {
  projectId: string;
  chains: Chain[];
  options?: {
    qrcodeModalOptions?: {
      desktopLinks?: string[];
      mobileLinks?: string[];
    };
  }
});

Additional documentation for supported options can be found here.

In preparation for the migration to WalletConnect v2, the options for Web3Modal v2 are also supported. Reference the Ethereum Provider docs. The required projectId is automatically pre-populated by RainbowKit.

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. This wallet will automatically hide itself from the list when the fallback is not necessary or if there is no injected wallet available.

It's recommended that you always include this wallet in the list to ensure all injected wallets are supported.

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

injectedWallet(options: {
  chains: Chain[];
});

Specific Wallets

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

Argent

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

argentWallet(options: {
  projectId: string;
  chains: Chain[];
});

Bitski

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

bitskiWallet(options: {
  chains: Chain[];
});

Brave Wallet

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

braveWallet(options: {
  chains: Chain[];
});

Coinbase Wallet

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

coinbaseWallet(options: {
  appName: string;
  chains: Chain[];
});

Dawn Wallet

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

dawnWallet(options: {
  chains: Chain[];
});

Ledger Live

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

ledgerWallet(options: {
  projectId: string;
  chains: Chain[];
  infuraId?: string;
});

imToken

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

imTokenWallet(options: {
  projectId: string;
  chains: Chain[];
});

MetaMask

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

metaMaskWallet(options: {
  projectId: string;
  chains: Chain[];
});

MEW Wallet

import { mewWallet } from '@rainbow-me/rainbowkit/wallets';
mewWallet(options: {
  chains: Chain[];
});

OKX Wallet

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

okxWallet(options: {
  projectId: string;
  chains: Chain[];
});

Omni

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

omniWallet(options: {
  projectId: string;
  chains: Chain[];
});

Phantom

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

phantomWallet(options: {
  chains: Chain[];
});

Rabby Wallet

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

rabbyWallet(options: {
  chains: Chain[];
});

Rainbow

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

rainbowWallet(options: {
  projectId: string;
  chains: Chain[];
});

Safe (Gnosis Safe)

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

safeWallet(options: {
  chains: Chain[];
});

Taho

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

tahoWallet(options: {
  chains: Chain[];
});

Trust Wallet

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

trustWallet(options: {
  projectId: string;
  chains: Chain[];
});

XDEFI Wallet

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

xdefiWallet(options: {
  chains: Chain[];
});

Zerion

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

zerionWallet(options: {
  projectId: string;
  chains: Chain[];
});

Examples

Ordering

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

Show MetaMask along with generic fallback wallets.

import { connectorsForWallets } from '@rainbow-me/rainbowkit';
import {
  injectedWallet,
  metaMaskWallet,
  walletConnectWallet,
} from '@rainbow-me/rainbowkit/wallets';

const connectors = connectorsForWallets([
  {
    groupName: 'Recommended',
    wallets: [
      injectedWallet({ chains }),
      metaMaskWallet({ projectId, chains }),
      walletConnectWallet({ projectId, chains }),
    ],
  },
]);

Show Rainbow, MetaMask and Coinbase along with generic fallback wallets.

import { connectorsForWallets } from '@rainbow-me/rainbowkit';
import {
  injectedWallet,
  rainbowWallet,
  metaMaskWallet,
  coinbaseWallet,
  walletConnectWallet,
} from '@rainbow-me/rainbowkit/wallets';

const connectors = connectorsForWallets([
  {
    groupName: 'Suggested',
    wallets: [
      injectedWallet({ chains }),
      rainbowWallet({ projectId, chains }),
      metaMaskWallet({ projectId, chains }),
      coinbaseWallet({ chains, appName: 'My RainbowKit App' }),
      walletConnectWallet({ projectId, chains }),
    ],
  },
]);

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 Coinbase along with generic fallback wallets.

import { connectorsForWallets } from '@rainbow-me/rainbowkit';
import {
  injectedWallet,
  rainbowWallet,
  metaMaskWallet,
  coinbaseWallet,
  walletConnectWallet,
} from '@rainbow-me/rainbowkit/wallets';

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

Overview

Getting Started

Advanced