Skip to main content

Using Wagmi

The Sequence wallet used with Wagmi through the connector.

Try it live :)

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

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

Installation

The connector is installed via the npm package @0xsequence/wagmi-connector. If you are using the latest version of wagmi (>= 1.0.0) the latest version of the wagmi-connector package can be installed with the following command:

npm install @0xsequence/wagmi-connector 0xsequence ethers

or

yarn add @0xsequence/wagmi-connector 0xsequence ethers

Usage

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

import { SequenceConnector } from '@0xsequence/wagmi-connector'

const connectors = [
new SequenceConnector({
chains,
options: {
defaultNetwork: 'polygon',
connect: {
app: 'Demo-app',
}
}
}),
...otherConnectors
]

const wagmiConfig = createConfig({
autoConnect: true,
connectors,
publicClient,
webSocketPublicClient
})

Parameters

chains

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

options.connect (optional)

Connection details that will be passed to Sequence upon connection, including app name, network id, etc... A more in depth description of the connect options is available here.

options.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 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

Using NextJs

There are special considerations to take into account when using Wagmi with NextJs 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 the Wagmi connector with app router.
See the example app which uses the app router structure.

See this section for an explanation on using the Wagmi connector with pages router.
See the example app which uses the pages router structure.

Examples

Below are example dapps using various versions of wagmi and libraries.

A demo app for the lastest version of Wagmi is available here.
A demo app is available for older version of Wagmi(<=0.12.x) is available here.

A demo app for Wagmi + NextJs with the app router structure here.
A demo app for Wagmi + NextJs with the older pages router structure here.