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:

Wallet Properties

Prop	Type	Default
`id*`	`string`	–
`name*`	`string`	–
`shortName`	`string \| undefined`	–
`iconUrl*`	`string \| (() => Promise<string>)`	–
`iconBackground*`	`string`	–
`installed`	`boolean \| undefined`	–
`downloadUrls`	`DownloadUrls \| undefined`	–
`createConnector*`	`Connector`	–

RainbowKitConnector properties

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

Prop	Type	Default
`mobile`	`object`	–
`desktop`	`object`	–
`qrCode`	`object`	–

Examples

For example, to create a custom wallet using WalletConnect:

import { WalletConnectConnector } from 'wagmi/connectors/walletConnect';
import { Chain, Wallet } from '@rainbow-me/rainbowkit';

export interface MyWalletOptions {
  chains: Chain[];
}

export const rainbow = ({ chains }: MyWalletOptions): Wallet => ({
  id: 'my-wallet',
  name: 'My Wallet',
  iconUrl: 'https://my-image.xyz',
  iconBackground: '#0c2f78',
  downloadUrls: {
    android: 'https://my-wallet/android',
    ios: 'https://my-wallet/ios',
    qrCode: 'https://my-wallet/qr',
  },
  createConnector: () => {
    const rpc = chains.reduce(
      (rpcUrlMap, chain) => ({
        ...rpcUrlMap,
        [chain.id]: chain.rpcUrls.default,
      }),
      {}
    );
    const connector = new WalletConnectConnector({
      chains,
      options: {
        qrcode: false,
        rpc,
      },
    });

    return {
      connector,
      mobile: {
        getUri: async () => {
          const { uri } = (await connector.getProvider()).connector;
          return uri;
        },
      },
      qrCode: {
        getUri: async () =>
          (await connector.getProvider()).connector.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',
            },
          ],
        },
      },
    };
  },
});

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

Overview

Getting Started

Advanced

Custom Wallets

Create a custom wallet

Wallet Properties

RainbowKitConnector properties

Examples