Web SDKでReact 19がサポートされました!
新しい依存パッケージのインストール
すべてのフックライブラリの名前が変更されました。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
アプリの設定
設定に関する主な違い:
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
- ウォレットUI用:
@0xsequence/kit
→ @0xsequence/wallet-widget
@0xsequence/kit-checkout
→ @0xsequence/checkout
@0xsequence/connect
を使う場合、@0xsequence/design-system/styles.css
を手動でインポートする必要はありません
@0xsequence/connect
は@0xsequence/design-system
v2と互換性があります
KitProvider
はSequenceConnectProvider
になりました
KitCheckoutProvider
はSequenceCheckoutProvider
になりました
KitWalletProvider
はSequenceWalletProvider
になりました
アプリの接続
import './App.css'
import { useOpenConnectModal } from '@0xsequence/connect'
function App() {
const {setOpenConnectModal} = useOpenConnectModal()
return (
<>
<button onClick={() => setOpenConnectModal(true)}>Connect</button>
</>
)
}
export default App