React 19 is supported on Web SDK!

Installing new dependencies

All of our hook libraries have been renamed, here are the new dependencies you need to get started with Web SDK:

npm install @0xsequence/connect wagmi ethers@6.13.0 viem 0xsequence @tanstack/react-query
# or
pnpm install @0xsequence/connect wagmi ethers@6.13.0 viem 0xsequence @tanstack/react-query
# or
yarn add @0xsequence/connect wagmi ethers@6.13.0 viem 0xsequence @tanstack/react-query

Configuring your app

Main differences when it comes to configuration:

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css"; 

import App from "./App";
import { SequenceConnect } from "@0xsequence/connect";
import { SequenceCheckoutProvider } from "@0xsequence/checkout"
import { config } from "./config";

function Dapp() {
  return (
    <SequenceConnect config={config}>
      <SequenceCheckoutProvider>
          <App />
      </SequenceCheckoutProvider>
    </SequenceConnect>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <Dapp />
  </React.StrictMode>
);
  • @0xsequence/kit -> @0xsequence/connect
  • @0xsequence/kit-checkout -> @0xsequence/checkout
  • no need to manually import the @0xsequence/design-system/styles.css when using @0xsequence/connect
  • @0xsequence/connect is compatible with @0xsequence/design-system v2
  • SequenceKit provider is now SequenceConnect provider
  • KitCheckoutProvider is now SequenceCheckoutProvider

Connecting your app

import './App.css'
import { useOpenConnectModal } from '@0xsequence/connect'

function App() {
  const {setOpenConnectModal} = useOpenConnectModal()
  
  return (
    <>
      <button onClick={() => setOpenConnectModal(true)}>Connect</button>
    </>
  )
}

export default App