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
pnpm install @0xsequence/connect wagmi ethers@6.13.0 viem 0xsequence @tanstack/react-query
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