Getting Started with Sequence Kit

In this guide, we will walk you through installing Sequence Kit, triggering the connection modal, and displaying the Inventory in your application.

Installing Sequence Kit Packages

Sequence Kit is modular, allowing you to install only the necessary packages. To get started, install the kit core package, the connectors package for interfacing with various wallet providers. Additionally, install other dependencies such as wagmi, viem, and 0xsequence.

npm install @0xsequence/kit @0xsequence/kit-connectors wagmi [email protected] viem 0xsequence @tanstack/react-query
# or
pnpm install @0xsequence/kit @0xsequence/kit-connectors wagmi [email protected] viem 0xsequence @tanstack/react-query
# or
yarn add @0xsequence/kit @0xsequence/kit-connectors wagmi [email protected] viem 0xsequence @tanstack/react-query

Setting Up the Kit Wrapper

To utilize the core kit wrapper for connecting web3 wallets to your application, follow these steps:

Configure wagmi for your app. Below is a basic wagmi configuration. For advanced configurations, please refer to the wagmi documentation.

import MyPage from './components/MyPage'
import { KitProvider } from '@0xsequence/kit'
import { getDefaultConnectors } from '@0xsequence/kit-connectors'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { createConfig, http, WagmiProvider, WagmiConfig } from 'wagmi'
import { mainnet, polygon, Chain } from 'wagmi/chains'
 
const queryClient = new QueryClient() 
 
function App() {
  const chains = [mainnet, polygon] as [Chain, ...Chain[]]
  
  const projectAccessKey = '<access-key>'
 
  const connectors = getDefaultConnectors({
    walletConnectProjectId: 'wallet-connect-id',
    defaultChainId: 137,
    appName: 'demo app',
    projectAccessKey
  })
 
  const transports: any = {}
 
  chains.forEach(chain => {
    transports[chain.id] = http()
  })
  
  //@ts-ignore
  const config = createConfig({
    transports,
    connectors,
    chains
  })
 
  return (
    <WagmiConfig config={config}>
      <QueryClientProvider client={queryClient}> 
        <KitProvider>
          <MyPage />
        </KitProvider>
      </QueryClientProvider>
    </WagmiConfig>
  );
}

Wrap your app with the KitProvider within the WagmiConfig wrapper.

Integrating Embedded Wallet

Sequence Kit also natively supports our seamless embedded wallet for a web2-like experience with social login and optional popups / modals. We simply need to pass in a few additional parameters such as your social login client ID.

import { sequence } from '0xsequence'
import { KitConfig, KitProvider } from '@0xsequence/kit'
import { getDefaultWaasConnectors } from '@0xsequence/kit-connectors' // Adding Embedded Wallet Config
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import React from 'react'
import ReactDOM from 'react-dom/client'
import { WagmiProvider, createConfig, http } from 'wagmi'
import { Chain, arbitrumNova, arbitrumSepolia, mainnet, polygon } from 'wagmi/chains'
import MyPage from './components/MyPage'
 
const queryClient = new QueryClient()
 
const chains: readonly [Chain, ...Chain[]] = [arbitrumNova as Chain, arbitrumSepolia as Chain, mainnet as Chain, polygon as Chain]
 
// replace with your keys, and better to use env vars
const projectAccessKey = 'AQAAAAAAAEGvyZiWA9FMslYeG_yayXaHnSI' // Demo access key - switch to yours
const waasConfigKey = 'eyJwcm9qZWN0SWQiOjE2ODE1LCJycGNTZXJ2ZXIiOiJodHRwczovL3dhYXMuc2VxdWVuY2UuYXBwIn0=' // Pass in your waasConfigKey
const googleClientId = 'googleClientID' // Pass in your Google Client ID
 
// Optional other providers like Apple
// const appleClientId =
// const appleRedirectURI = 'https://' + window.location.host
 
const connectors = [
  ...getDefaultWaasConnectors({
    walletConnectProjectId: 'wallet-connect-id',
    enableConfirmationModal: false, // Optional confirmation modal - can update this dynamically on your application using local storage or set a default property 
    defaultChainId: 421614,
    waasConfigKey,
    googleClientId,
    // appleClientId,
    // appleRedirectURI,
    appName: 'Kit Demo',
    projectAccessKey
  })
]
 
/* @ts-expect-error-next-line */
const transports: Record<number, HttpTransport> = {}
 
chains.forEach(chain => {
  const network = sequence.network.findNetworkConfig(sequence.network.allNetworks, chain.id)
  if (!network) return
 
  transports[chain.id] = http(network.rpcUrl)
})
 
const config = createConfig({
  transports,
  chains,
  connectors
})
 
const kitConfig: KitConfig = {
  projectAccessKey,
  defaultTheme: 'dark',
  signIn: {
    projectName: 'Kit Demo'
  }
}
 
  return (
    <WagmiConfig config={config}>
      <QueryClientProvider client={queryClient}> 
        <KitProvider config={kitConfig}>
          <MyPage />
        </KitProvider>
      </QueryClientProvider>
    </WagmiConfig>
  );

For web3 interactions, wagmi exposes a set of React hooks that make it convenient for common functions like sending transactions. Please check out our embedded wallet template with Sequence Kit for more examples of interactions.

Setting Up Inventory

To install the optional Inventory feature, add the KitWalletProvider below the KitProvider wrapper.

import { KitWalletProvider } from '@0xsequence/kit-wallet'
 
// ...
 
const App = () => {
  return (
    <WagmiConfig config={config}>
      <QueryClientProvider client={queryClient}> 
        <KitProvider config={kitConfig}>
          <KitWalletProvider>
            <Page />
          </KitWalletProvider>
        </KitProvider>
      </QueryClientProvider>
    </WagmiConfig>
  )
}

The complete code will then look like this:

import MyPage from './components/MyPage'
import { KitProvider } from '@0xsequence/kit'
import { getDefaultConnectors } from '@0xsequence/kit-connectors'
import { KitWalletProvider } from '@0xsequence/kit-wallet'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { createConfig, http, WagmiProvider, WagmiConfig } from 'wagmi'
import { mainnet, polygon, Chain } from 'wagmi/chains'
 
const queryClient = new QueryClient() 
 
function App() {
  const chains = [mainnet, polygon] as [Chain, ...Chain[]]
  
  const projectAccessKey = '<access-key>'
 
  const connectors = getDefaultConnectors({
    walletConnectProjectId: 'wallet-connect-id',
    defaultChainId: 137,
    appName: 'demo app',
    projectAccessKey
  })
 
  const transports: any = {}
 
  chains.forEach(chain => {
    transports[chain.id] = http()
  })
  
  //@ts-ignore
  const config = createConfig({
    transports,
    connectors,
    chains
  })
 
  return (
    <WagmiConfig config={config}>
      <QueryClientProvider client={queryClient}> 
        <KitProvider config={kitConfig}>
          <KitWalletProvider>
            <MyPage />
          </KitWalletProvider>
        </KitProvider>
      </QueryClientProvider>
    </WagmiConfig>
  );
}

Triggering the Connect Modal

Invoke the connect modal using the useOpenConnectModal hook.

import { useOpenConnectModal } from '@0xsequence/kit'
import { useDisconnect, useAccount } from 'wagmi'
 
 
const MyReactComponent = () => {
  const { setOpenConnectModal } = useOpenConnectModal()
 
  const { isConnected } = useAccount()
 
  const onClick = () => {
    setOpenConnectModal(true)
  }
 
  return (
    <>
      {!isConnected && (
        <button onClick={onClick}>
          Sign in
        </button>
      )}
    </>
  )
}

The modal will automatically close once the user signs in. You can utilize the useAccount hook from wagmi to detect the user's connection status.

Invoking the Inventory modal

Open the Inventory using the useOpenWalletModal react hook.

import { useOpenWalletModal } from '@0xsequence/kit-wallet'
 
const MyComponent = () => {
  const { setOpenWalletModal } = useOpenWalletModal()
 
  const onClick = () => {
    setOpenWalletModal(true)
  }
 
  return (
    <button onClick={onClick}>open inventory</button>
  )
}

Users can then select on the collectible in order to send to another address.

React Example

The Sequence Kit Github repository contains an example app that you can use for learning and testing.