​
Dapp のセットアップ

web3ウォレットをアプリケーションに接続するためにSequenceConnectラッパーを利用する手順は以下の通りです：

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

1

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

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

npm create vite

# or

pnpm create vite

# or

yarn create vite
2

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
3

設定ファイルの作成

次に、SequenceConnect用の設定変数をwaasとして作成します（Embedded Walletを意味します）。

まずSequence BuilderからWaaS設定キーとプロジェクトアクセスキーを取得し、プロジェクトのオリジンがBuilder Embedded Wallet Configurationでホワイトリストに登録されていることを確認してください。 WalletConnectを許可したい場合はWallet Connect IDも必要です。 Googleログインの設定はEmbedded WalletのGoogle設定ガイドをご覧ください。

[config.ts]
import { createConfig } from "@0xsequence/connect";



export const config: any = createConfig("waas", {

  projectAccessKey: "<your-project-access-key>",

  chainIds: [1, 137],

  defaultChainId: 1,

  appName: "Demo Dapp",

  waasConfigKey: "<your-waas-config-key>", // for waas

  google: {

    clientId: "<your-google-client-id>",

  },

  walletConnect: {

    projectId: "<your-wallet-connect-project-id>",

  },

});

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

4

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

ステップ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>

);
5

接続モーダルの表示

[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フックを使うことで、トランザクション送信などの一般的な機能を簡単に実装できます。