Web SDKのはじめ方

必要なパッケージをインストールし、wagmiコネクタを使ってEmbedded WalletやネイティブEOAウォレットで認証する方法をご案内します。

​

Dapp のセットアップ

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

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

Viteアプリ

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

NextJSアプリ

1. NextJSプロジェクトの作成

   まずはcreate-next-appを使ってNextJSプロジェクトを作成します：

   npx create-next-app@latest
   # or
   pnpm create next-app
   # or
   yarn create next-app
   
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設定ガイドをご覧ください。

   [src/app/config.ts]

   import { createConfig } from "@0xsequence/connect";
   
   export const config = createConfig("waas" /*or, 'universal'*/, {
     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で作成した設定をSequenceConnectプロバイダーに渡します。

   アプリ全体をProvidersコンポーネントでラップするため、別途「providers.tsx」ファイルを作成します。

   [src/app/providers.tsx]

   "use client";
   
   import React from "react"
   import { config } from "./config"
   import { SequenceConnect } from "@0xsequence/connect"
   
   const Providers = ({ children }: { children: React.ReactNode }) => {
       return (
           <SequenceConnect config={config}>
               {children}
           </SequenceConnect>
       )
   }
   
   export default Providers;
   
5. アプリをProvidersでラップ

   アプリ全体をProvidersコンポーネントでラップします。

   [src/app/layout.tsx]

   import type { Metadata } from "next";
   import { Geist, Geist_Mono } from "next/font/google";
   import "./globals.css";
   import Providers from "./providers";
   
   const geistSans = Geist({
     variable: "--font-geist-sans",
     subsets: ["latin"],
   });
   
   const geistMono = Geist_Mono({
     variable: "--font-geist-mono",
     subsets: ["latin"],
   });
   
   export const metadata: Metadata = {
     title: "Create Next App",
     description: "Generated by create next app",
   };
   
   export default function RootLayout({
     children,
   }: Readonly<{
     children: React.ReactNode;
   }>) {
     return (
       <html lang="en">
         <body
           className={`${geistSans.variable} ${geistMono.variable} antialiased`}
         >
           <Providers>
             {children}
           </Providers>
         </body>
       </html>
     );
   }
   
6. 接続モーダルの表示

   [App.tsx]

   "use client"
   
   import { useOpenConnectModal } from '@0xsequence/connect'
   
   function Home() {
     const { setOpenConnectModal } = useOpenConnectModal()
   
     return (
       <>
         <button onClick={() => setOpenConnectModal(true)}>Connect</button>
       </>
     )
   }
   
   export default Home
   

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