@0xsequence/kit v2.3.0

Sequence Kit 🧰

Sequence Kit 🧰 is a library enabling developers to easily integrate web3 wallets in their app. It is based on wagmi and supports all wagmi features.

• Connect via social logins eg: facebook, google, discord, etc...! 🔐🪪
• Connect to popular web3 wallets eg: walletConnect, metamask ! 🦊 ⛓️
• Full-fledged embedded wallet for coins and collectibles 👛 🖼️ 🪙
• Fiat onramp 💵 💶 💴 💷

View the demo! 👀

Quick Start

Installing the Library

@0xsequence/kit is the core package. Any extra modules require this package to be installed first. To install this package:

npm install @0xsequence/kit @0xsequence/kit-connectors wagmi ethers@5.7.2 viem 0xsequence @tanstack/react-query
# or
pnpm install @0xsequence/kit @0xsequence/kit-connectors wagmi ethers@5.7.2 viem 0xsequence @tanstack/react-query
# or
yarn add @0xsequence/kit @0xsequence/kit-connectors wagmi ethers@5.7.2 viem 0xsequence @tanstack/react-query

Setting up the Library

React apps must be wrapped by a Wagmi client and the KitWalletProvider components. It is important that the Wagmi wrapper comes before the Sequence Kit wrapper.

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 } from 'wagmi'
import { mainnet, polygon, Chain } from 'wagmi/chains'

const queryClient = new QueryClient() 

function App() {
  const chains = [mainnet, polygon] as [Chain, ...Chain[]]
  
  const projectAccessKey = 'xyz'

  const connectors = getDefaultConnectors({
    walletConnectProjectId: 'wallet-connect-id',
    defaultChainId: 137,
    appName: 'demo app',
    projectAccessKey
  })

  const transports = {}

  chains.forEach(chain => {
    transports[chain.id] = http()
  })
  
  const config = createConfig({
    transports,
    connectors,
    chains
  })

  return (
    <WagmiConfig config={config}>
      <QueryClientProvider client={queryClient}> 
        <KitProvider>
          <MyPage />
        </KitProvider>
      </QueryClientProvider>
    </WagmiConfig>
  );
}

Opening the Sign in Modal

Wallet selection is done through a modal which can be called programmatically.

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>
      )}
    </>
  )
}

Hooks

useOpenConnectModal

Use the useOpenConnectModal to change to open or close the connection modal.

import { useOpenConnectModal } from '@0xsequence/kit'
// ...
  const { setOpenConnectModal } = useOpenConnectModal()
  setOpenConnectModal(true)

useTheme

Use the useTheme hook to get information about the current theme, such as light or dark, or set it to something else.

import { useTheme } from '@0xsequence/kit'
  const { theme, setTheme } = useTheme()

  setTheme('light')

Customization

The KitProvider wrapper can accept an optional config object.

The settings are described in more detailed in the Sequence Kit documentation.

  const kitConfig =  {
    defaultTheme: 'light',
    position: 'top-left',
    signIn: {
      logoUrl: 'https://logo-dark-mode.svg',
      projectName: 'my app',
      showEmailInput: true,
      socialAuthOptions: ['google', 'facebook', 'twitch', 'apple'],
      walletAuthOptions: ['sequence', 'metamask', 'wallet-connect', 'coinbase-wallet'],
    },
    // limits the digital assets displayed on the assets summary screen
    displayedAssets: [
      {
        contractAddress: ethers.constants.AddressZero,
        chainId: 137,
      },
      {
        contractAddress: '0x631998e91476da5b870d741192fc5cbc55f5a52e',
        chainId: 137
      }
    ],
  }

  <KitProvider config={kitConfig}>
    <App />
  <KitProvider>

Packages

Local Development

The React example can be used to test the library locally.

1. pnpm install
2. From the root folder, run pnpm watch to build the package in watch mode in one console.
3. From the root folder, run pnpm start:react to run the react example in another console.

What to do next?

Now that the core package is installed, you can install the embedded wallet or take a look at the checkout.

LICENSE

Apache-2.0

Copyright (c) 2017-present Horizon Blockchain Games Inc. / https://horizon.io