Using Wagmi

The Sequence wallet used with Wagmi through the connector.

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 { sequenceWallet } from '@0xsequence/wagmi-connector';
import { configureChains, createConfig } from 'wagmi';
import { polygon } from 'wagmi/chains';
import { publicProvider } from 'wagmi/providers/public';
 
const chains: [Chain] = [polygon];
 
const connectors = [
  sequenceWallet({,
    walletAppURL: 'wallet_app_url',
    defaultNetwork: chains[0].id, // Polygon network ID,
    connectOptions: {
      app: 'Demo-app',
      projectAccessKey: 'your_project_access_key', // Replace with your actual project access key
    }
  }),
  // ...other connectors
];
 
const config = createConfig({
  chains,
  connectors,
  transports: {
    ...
  },
})
 
export default ({
    children
}: {
  children: React.ReactNode;
}) => {
  return (
    <WagmiProvider config={config}>
        {children}
    </WagmiProvider>
  )
}

Parameters

walletAppURL

Url of sequence wallet to connect to

defaultNetwork

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

connectOptions.app (required)

The name of the dapp, which will be displayed to the user on the connect screen.

connectOptions.appProtocol (optional)

A custom protocol used for authentication redirects, particularly for Unity and Unreal Engine integrations.

connectOptions.origin (optional)

The origin hint of the dapp’s host opening the wallet. This value is automatically determined and verified for integrity, so it can usually be omitted.

connectOptions.projectAccessKey (optional)

The access key for the project, which can be obtained from Sequence Builder. If the key is passed in initWallet, this value will be automatically populated.

connectOptions.expiry (optional)

The expiration time (in seconds) used for ETHAuth proof. The default is 1 week (604800 seconds).

connectOptions.authorize (optional)

If set to true, the connection process will include an ETHAuth EIP-712 signing step and return the proof to the dapp.

connectOptions.authorizeNonce (optional)

A custom nonce value for ETHAuth proof, used for replay protection.

connectOptions.authorizeVersion (optional)

The SDK version that will validate the ETHAuth proof.

connectOptions.askForEmail (optional)

If set to true, the dapp will prompt the user for permission to access their email address.

connectOptions.refresh (optional)

If set to true, forces a full re-connect by disconnecting and then reconnecting the wallet.

connectOptions.keepWalletOpened (optional)

If set to true, the wallet window will remain open after connecting. By default, the wallet automatically closes after a successful connection.

connectOptions.clientVersion (optional)

Specifies the version of Sequence.js used by the dapp client.

connectOptions.settings (optional)

Additional options to customize the wallet experience.

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/wagmi-connector@1.0 0xsequence ethers

or

yarn add @0xsequence/wagmi-connector@1.0 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.