Dapp のセットアップ

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

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

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

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を意味します）。

[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に関する警告が解消されます。

設定ファイルの作成

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

[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 のセットアップ

Web SDK

ゲームエンジンSDK

その他のSDK

​Dapp のセットアップ

Dapp のセットアップ