A comprehensive toolkit of Web3 SDKs that seamlessly integrate into your application.

We provide your users with a smooth and secure onboarding experience. With our robust tools built on the popular wagmi library, unlock a realm of possibilities in the world of web3.

• @0xsequence/connect - Connect and authentication
• @0xsequence/checkout - Payment and checkout flows
• @0xsequence/hooks - React hooks for Web3 functionality
• @0xsequence/wallet-widget - Production-ready wallet widget
• @0xsequence/marketplace-sdk - Marketplace UI and functionality

Connect via popular social logins such as Google, Apple, Facebook or use email, passkeys or any external wallet!

A cross-application and self-custodial smart contract wallet that users can create to interact with any application on the Ecosystem.

Allow users to pre-approve a set of granular permissions, enabling a fluid experience or powerful automation, all while maintaining user security and self-custody.

Easily plug in our swap hooks to your application to enable token swaps.

Allow your users to link multiple wallets to their account.

Build a chain abstracted experience by using our hooks to fetch multi-chain balances, coin prices, transactions and more.

Provide your users with a web3-enabled inventory, enabling them to manage their coins and collectibles all within your own application.

Enable users to purchase collectibles within Sequence Checkout using a credit card or crypto.

A production ready wallet widget with built-in swap, transaction history, inventory, fiat onramp and more.

Brand the connect modal with your own logo, color scheme and configure it with your social providers and wallets you want to service.

Easiest way to build your own Web3 Marketplace without managing infrastructure.

Explore the potential of our Web SDKs by trying out our demo!

Install the core package and required peer deps:

npm install @0xsequence/connect @0xsequence/hooks wagmi ethers@6.13.0 viem @tanstack/react-query

The SDK supports two connector paths. Keep them separate in your app config so behavior is explicit.

Use createConfig({...}) (without wallet type) to configure the v3 path.

import { createConfig } from '@0xsequence/connect'

export const ecosystemConfig = createConfig({
  projectAccessKey: '<your-project-access-key>',
  appName: 'Demo Dapp',
  signIn: {
    projectName: 'Demo Dapp'
  },
  chainIds: [1, 137],
  defaultChainId: 1,

  // required for v3 social/email/passkey connectors
  walletUrl: 'https://wallet.sequence.app',
  dappOrigin: window.location.origin,

  // v3 auth connectors
  email: true,
  google: true,
  apple: true,
  passkey: true,

  // external wallets
  walletConnect: {
    projectId: '<your-wallet-connect-id>'
  },
  metaMask: true,
  coinbase: true
})

Use createConfig('waas', {...}) when authenticating with WaaS.

import { createConfig } from '@0xsequence/connect'

export const waasConfig = createConfig('waas', {
  projectAccessKey: '<your-project-access-key>',
  waasConfigKey: '<your-waas-config-key>',
  appName: 'Demo Dapp',
  chainIds: [1, 137],
  defaultChainId: 1,

  guest: true,
  email: true,
  google: {
    clientId: '<your-google-client-id>'
  },
  apple: {
    clientId: '<your-apple-client-id>',
    redirectURI: 'https://your.app/apple-callback'
  },
  X: {
    clientId: '<your-x-client-id>',
    redirectURI: 'https://your.app/x-callback'
  },

  walletConnect: {
    projectId: '<your-wallet-connect-id>'
  }
})

X auth needs a callback route. Your configured redirectURI must match the route exactly.

import { useEffect } from 'react'

export function XAuthCallback() {
  useEffect(() => {
    const query = new URLSearchParams(window.location.search)

    const payload = {
      code: query.get('code'),
      state: query.get('state')
    }

    if (window.opener) {
      window.opener.postMessage({ type: 'OAUTH_RETURN', data: payload }, '*')
    }

    window.close()
  }, [])

  return <h3>You may now close this window.</h3>
}

import { SequenceConnect } from '@0xsequence/connect'
import { waasConfig } from './config'
import Content from './Content'

export function App() {
  return (
    <SequenceConnect config={waasConfig}>
      <Content />
    </SequenceConnect>
  )
}

import { useOpenConnectModal } from '@0xsequence/connect'
import { useConnection } from 'wagmi'

export function SignInButton() {
  const { setOpenConnectModal } = useOpenConnectModal()
  const { isConnected } = useConnection()

  if (isConnected) return null

  return <button onClick={() => setOpenConnectModal(true)}>Sign in</button>
}

import { useOpenConnectModal } from '@0xsequence/connect'

const { setOpenConnectModal } = useOpenConnectModal()
setOpenConnectModal(true)

import { useWallets } from '@0xsequence/connect'

const {
  wallets,
  linkedWallets,
  setActiveWallet,
  disconnectWallet,
  refetchLinkedWallets
} = useWallets()

await setActiveWallet('<wallet-address>')
await disconnectWallet('<wallet-address>')
await refetchLinkedWallets()

import { useTheme } from '@0xsequence/connect'

const { theme, setTheme } = useTheme()
setTheme('light')

All UI options can be configured directly in createConfig.

import { createConfig } from '@0xsequence/connect'
import { zeroAddress } from 'viem'

const config = createConfig('waas', {
  projectAccessKey: '<your-project-access-key>',
  waasConfigKey: '<your-waas-config-key>',
  appName: 'Demo Dapp',
  defaultTheme: 'light',
  position: 'top-left',
  signIn: {
    logoUrl: 'https://your-cdn/logo.svg',
    projectName: 'My App'
  },
  displayedAssets: [
    {
      contractAddress: zeroAddress,
      chainId: 137
    }
  ],
  readOnlyNetworks: [10],
  onConnectSuccess: address => {
    console.log('Wallet connected:', address)
  }
})

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

1. Replace web-sdk dependencies with workspace versions:

"@0xsequence/connect": "workspace:*",
"@0xsequence/checkout": "workspace:*",
"@0xsequence/wallet-widget": "workspace:*"

2. pnpm install
3. From the root folder, run pnpm build to build packages, or run pnpm dev in a separate terminal for watch mode.
4. From the root folder, run pnpm dev:react or pnpm dev:next to run the examples.

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

Apache-2.0

Copyright (c) 2017-present Sequence Platforms ULC. / https://sequence.xyz