Dapp のセットアップ

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

設定ファイルの作成

次に、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>",
  },
});

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

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

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

NextJSプロジェクトの作成

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

npx create-next-app@latest
# or
pnpm create next-app
# or
yarn create next-app

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

Next.jsの設定を行う

wagmiや@walletconnectパッケージとの互換性を保つため、next.config.jsファイルに以下の設定を追加してください。

// Path: next.config.js
const nextConfig = {
  webpack: (config) => {
    config.externals.push("pino-pretty", "lokijs", "encoding");
    return config;
  },
};

これにより、pino-prettyに関する警告が解消されます。

設定ファイルの作成

[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>",
  },
});

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

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

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

アプリを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>
  );
}

接続モーダルの表示

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

Web SDK

ゲームエンジンSDK

その他のSDK

Web SDKのはじめ方

Dapp のセットアップ

​Dapp のセットアップ

Dapp のセットアップ