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
for authentication
@0xsequence/kit
-> @0xsequence/wallet-widget
for wallet UI
@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
KitProvider
is now SequenceConnectProvider
KitCheckoutProvider
is now SequenceCheckoutProvider
KitWalletProvider
is now SequenceWalletProvider
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