Advanced
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}>
{}
</RainbowKitProvider>
</WagmiConfig>
);
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';
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.
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[];
});
The following wallets are provided via the wallet object (in alphabetical order).
import { argentWallet } from '@rainbow-me/rainbowkit/wallets';
argentWallet(options: {
projectId: string;
chains: Chain[];
});
import { bitskiWallet } from '@rainbow-me/rainbowkit/wallets';
bitskiWallet(options: {
chains: Chain[];
});
import { braveWallet } from '@rainbow-me/rainbowkit/wallets';
braveWallet(options: {
chains: Chain[];
});
import { coinbaseWallet } from '@rainbow-me/rainbowkit/wallets';
coinbaseWallet(options: {
appName: string;
chains: Chain[];
});
import { dawnWallet } from '@rainbow-me/rainbowkit/wallets';
dawnWallet(options: {
chains: Chain[];
});
import { ledgerWallet } from '@rainbow-me/rainbowkit/wallets';
ledgerWallet(options: {
projectId: string;
chains: Chain[];
infuraId?: string;
});
import { imTokenWallet } from '@rainbow-me/rainbowkit/wallets';
imTokenWallet(options: {
projectId: string;
chains: Chain[];
});
import { metaMaskWallet } from '@rainbow-me/rainbowkit/wallets';
metaMaskWallet(options: {
projectId: string;
chains: Chain[];
});
import { mewWallet } from '@rainbow-me/rainbowkit/wallets';
mewWallet(options: {
chains: Chain[];
});
import { okxWallet } from '@rainbow-me/rainbowkit/wallets';
okxWallet(options: {
projectId: string;
chains: Chain[];
});
import { omniWallet } from '@rainbow-me/rainbowkit/wallets';
omniWallet(options: {
projectId: string;
chains: Chain[];
});
import { phantomWallet } from '@rainbow-me/rainbowkit/wallets';
phantomWallet(options: {
chains: Chain[];
});
import { rabbyWallet } from '@rainbow-me/rainbowkit/wallets';
rabbyWallet(options: {
chains: Chain[];
});
import { rainbowWallet } from '@rainbow-me/rainbowkit/wallets';
rainbowWallet(options: {
projectId: string;
chains: Chain[];
});
import { safeWallet } from '@rainbow-me/rainbowkit/wallets';
safeWallet(options: {
chains: Chain[];
});
import { safeheronWallet } from '@rainbow-me/rainbowkit/wallets';
safeheronWallet(options: {
chains: Chain[];
});
import { tahoWallet } from '@rainbow-me/rainbowkit/wallets';
tahoWallet(options: {
chains: Chain[];
});
import { trustWallet } from '@rainbow-me/rainbowkit/wallets';
trustWallet(options: {
projectId: string;
chains: Chain[];
});
import { xdefiWallet } from '@rainbow-me/rainbowkit/wallets';
xdefiWallet(options: {
chains: Chain[];
});
import { zerionWallet } from '@rainbow-me/rainbowkit/wallets';
zerionWallet(options: {
projectId: string;
chains: Chain[];
});
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.
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 }),
],
},
]);
