Rainbow logo
RainbowKit
1.0.5

Advanced

Custom Wallets

Create a custom wallet

Note: This API is unstable and likely to change in the near future. We will be adding more built-in wallets over time. Let us know if there are any particular wallets you're interested in.

The Wallet function type is provided to help you define your own custom wallets. The following properties can be configured on the return value of your Wallet function:

PropTypeDefault
id*string
name*string
shortNamestring | undefined
iconUrl*string | (() => Promise<string>)
iconAccentstring
iconBackground*string
installedboolean | undefined
downloadUrlsDownloadUrls | undefined
hidden(args) => boolean | undefined
createConnector*RainbowKitConnector
PropTypeDefault
androidstring
iosstring
mobilestring
qrCodestring
chromestring
edgestring
firefoxstring
operastring
safaristring
browserExtensionstring

The following properties are defined on the return value of the createConnector function.

PropTypeDefault
mobileobject
desktopobject
qrCodeobject
extensionobject

For example, to create a custom wallet using WalletConnect:

import { Chain, Wallet, getWalletConnectConnector, } from '@rainbow-me/rainbowkit';
export interface MyWalletOptions {
projectId: string;
chains: Chain[];
}
export const rainbow = ({
chains,
projectId,
}: MyWalletOptions): Wallet => ({
id: 'my-wallet',
name: 'My Wallet',
iconUrl: 'https://my-image.xyz',
iconBackground: '#0c2f78',
downloadUrls: {
android: 'https://play.google.com/store/apps/details?id=my.wallet',
ios: 'https://apps.apple.com/us/app/my-wallet',
chrome: 'https://chrome.google.com/webstore/detail/my-wallet',
qrCode: 'https://my-wallet/qr',
},
createConnector: () => {
const connector = getWalletConnectConnector({ projectId, chains });
return {
connector,
mobile: {
getUri: async () => {
const provider = await connector.getProvider();
const uri = await new Promise<string>(resolve =>
provider.once('display_uri', resolve)
);
return uri;
},
},
qrCode: {
getUri: async () => {
const provider = await connector.getProvider();
const uri = await new Promise<string>(resolve =>
provider.once('display_uri', resolve)
);
return uri;
},
instructions: {
learnMoreUrl: 'https://my-wallet/learn-more',
steps: [
{
description:
'We recommend putting My Wallet on your home screen for faster access to your wallet.',
step: 'install',
title: 'Open the My Wallet app',
},
{
description:
'After you scan, a connection prompt will appear for you to connect your wallet.',
step: 'scan',
title: 'Tap the scan button',
},
],
},
},
extension: {
instructions: {
learnMoreUrl: 'https://my-wallet/learn-more',
steps: [
{
description:
'We recommend pinning My Wallet to your taskbar for quicker access to your wallet.',
step: 'install',
title: 'Install the My Wallet extension',
},
{
description:
'Be sure to back up your wallet using a secure method. Never share your secret phrase with anyone.',
step: 'create',
title: 'Create or Import a Wallet',
},
{
description:
'Once you set up your wallet, click below to refresh the browser and load up the extension.',
step: 'refresh',
title: 'Refresh your browser',
},
],
},
},
};
},
});

You can then add your custom wallet in the wallet list.