Web SDKからWeb SDKへの移行 - Sequence Docs

Web SDKでReact 19がサポートされました！

新しい依存パッケージのインストール

すべてのフックライブラリの名前が変更されました。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

npm install @0xsequence/kit @0xsequence/waas wagmi ethers@6.13.0 viem 0xsequence @0xsequence/design-system@^1.9.0 motion @tanstack/react-query
# or
pnpm install @0xsequence/kit @0xsequence/waas wagmi ethers@6.13.0 viem 0xsequence @0xsequence/design-system@^1.9.0 motion @tanstack/react-query
# or
yarn add @0xsequence/kit @0xsequence/waas wagmi ethers@6.13.0 viem 0xsequence @0xsequence/design-system@^1.9.0 motion @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>
);

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

import App from "./App";
import { SequenceKit } from "@0xsequence/kit";
import { KitCheckoutProvider } from "@0xsequence/kit-checkout";
import { config } from "./config";
import '@0xsequence/design-system/styles.css'

function Dapp() {
  return (
    <SequenceKit config={config}>
      <KitCheckoutProvider>
        <App />
      </KitCheckoutProvider>
    </SequenceKit>
  );
}

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

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

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

export default App