​

概要

​

推奨される移行手順

1. ユーザー認証
   • ユーザーがログインしようとすると、Sequence SDKを使って希望するソーシャルプロバイダーやメールで認証を行います。
   • ユーザーが認証されると、メールアドレスやその他の一意のユーザー識別子とSequenceウォレットアドレスなどのユーザーデータがバックエンドに渡されます。
   Sequence SDKからSequence専用のidTokenを取得し、それをバックエンドに渡すことで、ユーザーのメールアドレスやアドレスをバックエンド側で確認し、紐付けることができます。 こちらのガイドで、フロントエンドからトークンをリクエストし、バックエンドで検証する方法をご覧いただけます。
2. データベースの照合と更新 バックエンドで認証情報が確認できたら、ユーザーデータベースを修正し、そのユーザーにSequenceウォレットが既に存在するかどうかを管理できるようにします。
   • ユーザーデータベースにsequenceWalletカラムを追加します。
   • データベースは一意なユーザー識別子で検索され、該当ユーザーのレコードを取得します。
   • システムは、そのユーザーに’sequenceWallet’が既に存在するかどうかを確認します。存在する場合は、特に何も行いません。
   • Sequence ウォレットアドレスが見つからない場合： a. 渡された Sequence ウォレットをsequenceWalletカラムに挿入します。
   • データベースにユーザーが存在しない場合は、渡された情報を新規ユーザーとして登録します。
3. 資産の移行
   • ユーザーが正常にログインした後、資産の移行が既に行われているかシステムが確認します。
   • 存在しない場合は、旧ウォレットから新しいSequenceウォレットへ資産を移行する必要があることをユーザーに説明する案内が表示されます。
   • ユーザーは一度だけ、特定の移行ページから以前のプロバイダーにログインし、希望する資産を新しいSequenceウォレットへ移動します。
   • 資産移行をスムーズに行うため、Sequence の Indexer を使って関連資産とその数量をユーザーに表示することをおすすめします。

​

thirdweb から Sequence への移行方法

​

ユーザー認証

​

Sequenceの依存関係のインストール

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

​

thirdweb プロバイダーから Sequence プロバイダーへの移行方法

- import { ThirdwebProvider } from "thirdweb/react";
+ import React from "react";
+ import ReactDOM from "react-dom/client";
+ import "./index.css";

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

function MainLayout() {
  return (
-		<ThirdwebProvider>
+			<SequenceConnect config={config}>
+				<App />
+			</SequenceConnect>
-		</ThirdwebProvider>
  );
}

​

thirdweb のログイン機能から Sequence のログイン機能への移行

- import { ConnectButton } from "thirdweb/react";
- import { client } from "../client";
+ import { useOpenConnectModal } from '@0xsequence/connect'

export function Landing() {
+ const { setOpenConnectModal } = useOpenConnectModal()
  
  return (
-   <ConnectButton client={client} />
+   <button onClick={() => setOpenConnectModal(true)}>Connect</button>
  )
}

• React Boilerplate – Sequence Embedded Walletが組み込まれたReactベースのスタータープロジェクトです。
• Next.js Boilerplate – Sequence Embedded Walletが組み込まれたNext.jsベースのスタータープロジェクトです。