Dapp のセットアップ

まず、Sequenceアカウントを作成していることを確認してください。まだお持ちでない場合はこちらから作成できます。Web SDKを利用するにはProject Access Keyが必要です。 web3ウォレットをアプリケーションに接続するためにSequenceConnectラッパーを利用する手順は以下の通りです：

Web SDKはwagmiの上に構築されているため、高度な設定やトランザクション送信、コントラクト呼び出しなどについては、wagmiのドキュメントをご参照ください。

Viteアプリ
NextJSアプリ

ViteでReactプロジェクトを作成

まずはviteを使ってReactプロジェクトを作成します：

npm create vite
# or
pnpm create vite
# or
yarn create vite

Web SDKの依存パッケージをインストール

npm install @0xsequence/connect @0xsequence/hooks wagmi ethers viem 0xsequence @tanstack/react-query
# or
pnpm install @0xsequence/connect @0xsequence/hooks wagmi ethers viem 0xsequence @tanstack/react-query
# or
yarn add @0xsequence/connect @0xsequence/hooks wagmi ethers viem 0xsequence @tanstack/react-query

設定ファイルの作成

次に、設定を作成します。

[config.ts]

import { createConfig } from "@0xsequence/connect";

export const config: any = createConfig({
  projectAccessKey: "<your-project-access-key>",
  signIn: {
    projectName: 'Sequence Web SDK Demo',
  },
  walletUrl: 'https://v3.sequence.app',
  dappOrigin: window.location.origin,
  appName: 'Sequence Web SDK Demo',
  chainIds: [1],
  defaultChainId: 1,
  google: true,
  apple: true,
  email: true,
  walletConnect: {
    projectId: walletConnectProjectId
  },
  permissions: ...
});

さらにカスタマイズしたい場合は、追加の設定パラメータ一覧をご参照ください。

プロバイダーコンポーネントの設定

ステップ3で作成した設定を、下記のようにmain.tsx内のプロバイダーに渡します。

[main.tsx]

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 Dapp() {
  return (
    <SequenceConnect config={config}>
      <App />
    </SequenceConnect>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <Dapp />
  </React.StrictMode>
);

接続モーダルの表示

[App.tsx]

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

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

export default App

web3操作には、wagmiが提供するReactフックを使うことで、トランザクション送信などの一般的な機能を簡単に実装できます。

​Dapp のセットアップ

Dapp のセットアップ