Custom Wallet List

Customizing the wallet list

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 {
  rainbowWallet,
  walletConnectWallet,
} from '@rainbow-me/rainbowkit/wallets';

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

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

import { connectorsForWallets } from '@rainbow-me/rainbowkit';
import { createConfig } from 'wagmi';

const connectors = connectorsForWallets(/* ... */);

const config = createConfig({
  connectors,
  {/* Wagmi config */}
});

const queryClient = new QueryClient();

const App = () => (
  <WagmiProvider config={config}>
    <QueryClientProvider client={queryClient}>
      <RainbowKitProvider {...etc}>
        {/* Your App */}
      </RainbowKitProvider>
    </QueryClientProvider>
  </WagmiProvider>
);

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';

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';

Safe Wallet

For dApps that support Safe Apps to allow users to easily connect with their Safe vault or multi-sig, include the safeWallet option for automatic connections. The Safe option will only appear in the Safe Wallet browser environment.

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

Specific Wallets

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

Argent

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

Bitget

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

Bifrost Wallet

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

Bitski

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

Bitverse

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

Bloom Wallet

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

Bybit Wallet

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

Brave Wallet

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

Coinbase Wallet

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

Compass Wallet

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

Coin98 Wallet

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

Core

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

Dawn Wallet

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

Enkrypt Wallet

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

FoxWallet

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

Frame Wallet

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

Frontier Wallet

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

Gate Wallet

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

Ledger Live

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

imToken

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

Kresus Wallet

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

Kaikas

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

MetaMask

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

MEW Wallet

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

OKX Wallet

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

Omni

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

1inch Wallet

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

OneKey

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

Phantom

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

Rabby Wallet

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

Rainbow

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

Ramper Wallet

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

Ronin Wallet

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

Safeheron

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

Taho

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

Talisman

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

Tokenary

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

TokenPocket

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

Trust Wallet

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

Uniswap Wallet

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

XDEFI Wallet

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

Zerion

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

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 {
  metaMaskWallet,
  walletConnectWallet,
} from '@rainbow-me/rainbowkit/wallets';

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

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

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

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

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 possible wallets.

Recommend Rainbow and MetaMask, but also offer Coinbase along with generic fallback wallets.

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

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

Overview

Getting Started

Advanced