Skip to main content

Using RainbowKit

The Sequence wallet can be added to RainbowKit through the connector.

Try it live :)

Try a live Dapp example using Sequence + Metamask + Rainbow + Wallet Connect with RainbowKit.

Source code is available too: https://github.com/0xsequence/demo-dapp-rainbowkit

Installation

The connector is installed via the npm package @0xsequence/rainbowkit-plugin.

npm install @0xsequence/rainbowkit-plugin 0xsequence ethers

or

yarn add @0xsequence/rainbowkit-plugin 0xsequence ethers

Usage

The connector is then imported and added to the list of connectors alongside the other RainbowKit wallets.

import { sequenceWallet } from '@0xsequence/rainbowkit-plugin'
import { connectorsForWallets } from '@rainbow-me/rainbowkit';

const connectors = connectorsForWallets([
{
groupName: 'Recommended',
wallets: [
sequenceWallet({
chains,
defaultNetwork: 'polygon',
connect: {
app: 'Demo-app'
}
}),
...otherRainbowKitWallets
]
}

Parameters

chains

Chains supported by app. This is the same parameter as would be passed to other RainbowKit wallets.

connect (optional)

Connect options for Sequence, including the name of the app and the default network id the wallet will attempt connection to. A more in depth description of the connect options is available here.

defaultNetwork (optional)

The default network to connect to. Sequence will default all operations to this network. It can also be defined using a number (e.g. 1 for Mainnet, 5 for Goerli, etc...).

Using NextJs

There are special considerations to take into account when using NextJs with Wagmi-based libraries like RainbowKit, such that it functions harmoniously with the server-side rendering of NextJs. The correct technique to use differs depending on whether the application uses the older pages router or the more recent app router.

See this section for an explanation on using Wagmi or Wagmi-based libraries with app router.
See the example app which uses the app router structure.

See this section for an explanation on using Wagmi or Wagmi-based libraries with pages router.
See the example app which uses the pages router structure.

Using older versions of Wagmi (<= 0.12.x)

If you are using an older version of Wagmi (<= 0.12.x), which is based on ethers instead of viem, use the following command to install the appropriate version of the wagmi connector:

npm install @0xsequence/[email protected] 0xsequence ethers

or

yarn add @0xsequence/[email protected] 0xsequence ethers

Examples

A demo app for RainbowKit is available here

A demo app for NextJs + Wagmi (which is applicable for wagmi-based libraries) with the app router structure here.
A demo app for NextJs + Wagmi (which is applicable for wagmi-based libraries) with the older pages router structure here.