Rainbow logo
RainbowKit
2.1.2

Custom Wallet List

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

The following wallets are provided via the wallet object.

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.

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

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

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

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

import { argentWallet } from '@rainbow-me/rainbowkit/wallets';
import { bitgetWallet } from '@rainbow-me/rainbowkit/wallets';
import { bifrostWallet } from '@rainbow-me/rainbowkit/wallets';
import { bitskiWallet } from '@rainbow-me/rainbowkit/wallets';
import { bitverseWallet } from '@rainbow-me/rainbowkit/wallets';
import { bloomWallet } from '@rainbow-me/rainbowkit/wallets';
import { bybitWallet } from '@rainbow-me/rainbowkit/wallets';
import { braveWallet } from '@rainbow-me/rainbowkit/wallets';

This wallet connector supports both the Coinbase Wallet app and extension, as well as Coinbase Smart Wallet on Web.

A preference argument is available to control whether Smart Wallet is enabled and available for users. Preference based behavior is documented here.

Smart Wallet will be enabled by default with all in early June, without a further upgrade.

Developers can test Smart Wallet with sepolia and baseSepolia chains today by setting smartWalletOnly and including coinbaseWallet in their wallet list like so:

import { coinbaseWallet } from '@rainbow-me/rainbowkit/wallets';
// Enable Coinbase Smart Wallet for testing
coinbaseWallet.preference = 'smartWalletOnly';
import { compassWallet } from '@rainbow-me/rainbowkit/compassWallet';
import { coin98Wallet } from '@rainbow-me/rainbowkit/wallets';
import { coreWallet } from '@rainbow-me/rainbowkit/wallets';
import { dawnWallet } from '@rainbow-me/rainbowkit/wallets';
import { enkryptWallet } from '@rainbow-me/rainbowkit/wallets';
import { foxWallet } from '@rainbow-me/rainbowkit/wallets';
import { frameWallet } from '@rainbow-me/rainbowkit/wallets';
import { frontierWallet } from '@rainbow-me/rainbowkit/wallets';
import { gateWallet } from '@rainbow-me/rainbowkit/wallets';
import { ledgerWallet } from '@rainbow-me/rainbowkit/wallets';
import { imTokenWallet } from '@rainbow-me/rainbowkit/wallets';
import { krakenWallet } from '@rainbow-me/rainbowkit/wallets';
import { kresusWallet } from '@rainbow-me/rainbowkit/wallets';
import { kaikasWallet } from '@rainbow-me/rainbowkit/wallets';
import { magicEdenWallet } from '@rainbow-me/rainbowkit/wallets';
import { metaMaskWallet } from '@rainbow-me/rainbowkit/wallets';
import { mewWallet } from '@rainbow-me/rainbowkit/wallets';
import { okxWallet } from '@rainbow-me/rainbowkit/wallets';
import { omniWallet } from '@rainbow-me/rainbowkit/wallets';
import { oneInchWallet } from '@rainbow-me/rainbowkit/wallets';
import { oneKeyWallet } from '@rainbow-me/rainbowkit/wallets';
import { phantomWallet } from '@rainbow-me/rainbowkit/wallets';
import { rabbyWallet } from '@rainbow-me/rainbowkit/wallets';
import { rainbowWallet } from '@rainbow-me/rainbowkit/wallets';
import { ramperWallet } from '@rainbow-me/rainbowkit/wallets';
import { roninWallet } from '@rainbow-me/rainbowkit/wallets';
import { safeheronWallet } from '@rainbow-me/rainbowkit/wallets';
import { tahoWallet } from '@rainbow-me/rainbowkit/wallets';
import { talismanWallet } from '@rainbow-me/rainbowkit/wallets';
import { tokenaryWallet } from '@rainbow-me/rainbowkit/wallets';
import { tokenPocketWallet } from '@rainbow-me/rainbowkit/wallets';
import { trustWallet } from '@rainbow-me/rainbowkit/wallets';
import { uniswapWallet } from '@rainbow-me/rainbowkit/wallets';
import { xdefiWallet } from '@rainbow-me/rainbowkit/wallets';
import { zerionWallet } from '@rainbow-me/rainbowkit/wallets';

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.

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' },
);