Below are frequently asked questions related to the integration of the Sequence wallet connector.

NextJs

Why does my wallet integration produce an error when used with next.js?

Wallet libraries and connectors must be rendered in the browser. This is particularly true for Wagmi and Wagmi-based libraries. Attempts to render the page elsewhere, such as on backend server, can produce errors in some situations. Rendering on the server is therefore highly discouraged.

The method for fixing this issue will depend on the folder structure. The pages folder structure is available for all versions of NextJs, while the app folder structure is only available for NextJs version 13 and above and may require being turned on through an experimental setting.

See using wallet libraries with next.js pages directory

See using wallet libraries with next.js app directory(NextJs 13+ feature)

How do I use a wallet library and connector with next.js using the pages directory (all versions of NextJs)?

The content of the application which depends on Wagmi hooks must be mounted only once the application is rendered in the client. This is a limitation due to wagmi when used with NextJs, and all wagmi-based libraries will inherit this limitation. To do so we can use a useEffect hook to wait before rendering the application.

In the example below, we wait until the app is mounted in the client before rendering the rest of the application:

import { useIsMounted } from '../hooks'
import Home from '../components/Home'
 
const Page = () => {
  const isMounted = useIsMounted()
 
  if (!isMounted) return null
  return (
    <>
      <Home />
    </>
  )
}
 
export default Page

A full code example of this setup working with the Wagmi library can be found on github. The method described above is the one recommended by Wagmi and is demonstrated in their official example.

How do I use a wallet library and connector with next.js using the app directory (version 13 and above only)?

NextJs 13 and above allows using a new folder structure in which the content is placed in an app directory. Enabling this feature may require explicitly indicating it with an experimental setting. When using such a folder structure, NextJs allows the declaration of Client Components which are components that will be rendered in the browser. A wrapper component containing the wallet library initialized with all the connectors must be declared with the "use client" directive. The "use client" directive is what will turn the wrapper component into a Client Component to be rendered in the browser.

In addition, there is a bug with wagmi and nextJs when using the autoConnect feature which causes

In the example below, we declare a wrapper component with the "use client" directive:

"use client" // this directive informs next.js that the component is a Client Component to be rendered in the browser
 
const WagmiWrapper = ({ children }) => {
  const wagmiClient = createClient({
    autoConnect: true,
    connectors,
    provider,
    webSocketProvider,
  });
 
 
  return (
    <WagmiConfig client={wagmiClient}>
      {children}
    </WagmiConfig>
  );
}
 
export default WagmiWrapper

This wrapper component can then be imported normally and wrap the rest of the application. The child components can be a combination of Client and Server components.

// We import a custom wrapper component that initializes the wallet library and all its connectors
// An example of the content of this wrapper component can be found here: https://github.com/0xsequence/demo-dapp-wagmi-next/blob/master/components/WagmiProvider.tsx
import WagmiWrapper from './WagmiWrapper'
 
// We can then wrap our entire app with this browser's rendered component
function MyApp({ Component, pageProps }: AppProps) {
  return (
    <WagmiWrapper>
      <Component {...pageProps} />
    </WagmiWrapper>
  );
}

A full code example using Nextjs and the app directory can be found on github. The method described above is the one recommended by Wagmi through their NextJs example which can be consulted by running the command npx create-wagmi and selecting the nextJs option.

Click here for more information about Client Components.