はじめに - Sequence Docs

まず、Sequence Projectアカウントを作成していることを確認してください。まだお持ちでない場合はこちらから作成できます。続行するにはProject Access Keyが必要です。

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

Viteアプリ
NextJSアプリ

必要なライブラリをインストールします

npm install @0xsequence/connect wagmi viem
# or
pnpm install @0xsequence/connect wagmi viem
# or
yarn add @0xsequence/connect wagmi viem

ウォレット設定を作成します

次に、Ecosystem Walletの設定を作成します。Ecosystem Walletに必須

projectAccessKey
walletUrl

オプション

dappOrigin
signIn.projectName, appName
chainIds, defaultChainId
explicitSession（オプション；明示的なセッション権限と制限をリクエスト）
includeFeeOptionPermissions, enableImplicitSession
nodesUrl, relayerUrl
walletConnect

[config.ts]

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

export const config: any = createConfig({
  projectAccessKey: "AQAAAAAAAABtDHG1It7lxRF_9bbxw4diip8",
  walletUrl: 'https://acme-wallet.ecosystem-demo.xyz',
  // Optional
  dappOrigin: window.location.origin,
  signIn: {
    projectName: 'Sequence Web SDK Demo'
  },
  appName: 'Sequence Web SDK Demo',
  chainIds: [42161],
  defaultChainId: 42161,
  google: true,
  apple: true,
  email: true,
  explicitSession: createExplicitSession({ ... })
});

walletUrl は、dApp が利用するエコシステムウォレットのURLです。デモでは、Acme エコシステムウォレットを使用しています。dappOriginはdappのオリジンで、ユーザーのアクセス元を確認するために使われます。explicitSessionオブジェクトを使うことで、dAppが接続時にユーザーから特定の権限をリクエストできます。これらの権限により、ユーザーに取引確認を求めずに一定期間dAppが特定の操作を代行でき、よりシームレスな体験や自動化が可能になります。参照：権限の詳細解説およびトークンディレクトリ。

手数料オプションの挙動（重要）

アプリがSequenceリレーを通じてトランザクションを送信する際、リレーラーは手数料の支払い方法を判断する必要があります。

明示的なセッション作成時にSDKが自動で必要な手数料関連の権限をリクエストするようにしたい場合は、includeFeeOptionPermissionsを有効にしてください。
これを無効にした場合、利用する手数料オプションに必要な手数料関連の権限を自分で含める必要があります。

手数料の支払いが満たされない場合、コアのコントラクトコール権限が正しくても、トランザクションは送信時に失敗することがあります。nativeTokenSpendingはオプションです。省略した場合、セッションはネイティブトークンの支出許可なしがデフォルトとなります。例として、「次の24時間、ユーザーの代理でArbitrum上のAAVE V3プールに100 USDCを入金する」ための明示的セッションを作成してみましょう。

[config.ts]

import { createConfig, createContractPermission } from "@0xsequence/connect";
import { parseEther, parseUnits } from "viem";

export const USDC_ADDRESS_ARBITRUM = '0xaf88d065e77c8cC2239327C5EDb3A432268e5831'
export const AAVE_V3_POOL_ADDRESS_ARBITRUM = '0x794a61358D6845594F94dc1DB02A252b5b4814aD'

export const config: any = createConfig({
  projectAccessKey: "AQAAAAAAAABtDHG1It7lxRF_9bbxw4diip8",
  walletUrl: 'https://acme-wallet.ecosystem-demo.xyz',
  // Optional
  dappOrigin: window.location.origin,
  signIn: {
    projectName: 'Sequence Web SDK Demo',
  },
  appName: 'Sequence Web SDK Demo',
  chainIds: [42161],
  defaultChainId: 42161,
  google: true,
  apple: true,
  email: true,
  explicitSession: createExplicitSession({
    chainId: 42161,
    nativeTokenSpending: {
      valueLimit: parseEther('0.01'), // Allow spending up to 0.01 ETH for gas fees
    },
    expiresIn: {
      hours: 24, // Session lasts for 24 hours
    },
    permissions: [
      createContractPermission({
        address: AAVE_V3_POOL_ADDRESS_ARBITRUM,
        functionSignature: 'function supply(address asset, uint256 amount, address onBehalfOf, uint16 referralCode)',
        rules: [
          {
            param: 'asset',
            type: 'address',
            condition: 'EQUAL',
            value: USDC_ADDRESS_ARBITRUM
          },
          {
            param: 'amount',
            type: 'uint256',
            condition: 'LESS_THAN_OR_EQUAL',
            value: parseUnits('100', 6), // Max cumulative amount of 100 USDC
            cumulative: true
          }
        ]
      })
    ]
  })
});

ユーザーがウォレットを接続すると、dAppに権限を付与するよう求められます。承認されると、AAVEへのUSDC供給などの操作が追加のポップアップなしで実行でき、ユーザーがオフラインでも自動化が可能です。

アプリをProviderでラップする

アプリケーション全体でパッケージのフックやコンポーネントを利用できるよう、アプリケーションをSequenceConnect Providerでラップしてください。ステップ2で作成した設定を、Providerのconfigに渡す必要があります。

[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>
);

export default Dapp

接続モーダルの表示

[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

接続時にユーザーに権限の承認が求められます。

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

npm install @0xsequence/connect wagmi viem 
# or
pnpm install @0xsequence/connect wagmi viem 
# or
yarn add @0xsequence/connect wagmi viem 

ウォレット設定を作成します

次に、Ecosystem Walletの設定を作成します。Ecosystem Walletに必須

projectAccessKey
walletUrl

オプション

dappOrigin
signIn.projectName, appName
chainIds, defaultChainId
explicitSession（オプション；明示的なセッション権限と制限をリクエスト）
includeFeeOptionPermissions, enableImplicitSession
nodesUrl, relayerUrl
walletConnect

[config.ts]

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

export const config: any = createConfig({
  projectAccessKey: "AQAAAAAAAABtDHG1It7lxRF_9bbxw4diip8",
  signIn: {
    projectName: 'Sequence Web SDK Demo',
  },
  walletUrl: 'https://acme-wallet.ecosystem-demo.xyz',
  dappOrigin: window.location.origin,
  appName: 'Sequence Web SDK Demo',
  chainIds: [42161],
  defaultChainId: 42161,
  google: true,
  apple: true,
  email: true,
  explicitSession: createExplicitSession({ ... })
});

walletUrl は、dApp が利用するエコシステムウォレットのURLです。デモでは、Acme エコシステムウォレットを使用しています。dappOriginはdappのオリジンで、ユーザーのアクセス元を確認するために使われます。explicitSessionオブジェクトを使うと、接続時にユーザーから特定の権限をリクエストできます。これにより、一定期間ユーザーの代理で特定の操作を実行でき、取引プロンプトなしでシームレスな体験を提供します。nativeTokenSpendingはオプションです。省略した場合、セッションはネイティブトークンの支出許可なしがデフォルトとなります。例として、「次の24時間、ユーザーの代理でArbitrum上のAAVE V3プールに100 USDCを入金する」ための明示的セッションを作成してみましょう。

[config.ts]

import { createConfig, createContractPermission } from "@0xsequence/connect";
import { parseEther, parseUnits } from "viem";

export const USDC_ADDRESS_ARBITRUM = '0xaf88d065e77c8cC2239327C5EDb3A432268e5831'
export const AAVE_V3_POOL_ADDRESS_ARBITRUM = '0x794a61358D6845594F94dc1DB02A252b5b4814aD'

export const config: any = createConfig({
  projectAccessKey: "AQAAAAAAAABtDHG1It7lxRF_9bbxw4diip8",
  signIn: {
    projectName: 'Sequence Web SDK Demo',
  },
  walletUrl: 'https://acme-wallet.ecosystem-demo.xyz',
  dappOrigin: window.location.origin,
  appName: 'Sequence Web SDK Demo',
  chainIds: [42161],
  defaultChainId: 42161,
  google: true,
  apple: true,
  email: true,
  explicitSession: createExplicitSession({
    chainId: 42161,
    nativeTokenSpending: {
      valueLimit: parseEther('0.01'), // Allow spending up to 0.01 ETH for gas fees
    },
    expiresIn: {
      hours: 24, // Session lasts for 24 hours
    },
    permissions: [
      createContractPermission({
        address: AAVE_V3_POOL_ADDRESS_ARBITRUM,
        functionSignature: 'function supply(address asset, uint256 amount, address onBehalfOf, uint16 referralCode)',
        rules: [
          {
            param: 'asset',
            type: 'address',
            condition: 'EQUAL',
            value: USDC_ADDRESS_ARBITRUM
          },
          {
            param: 'amount',
            type: 'uint256',
            condition: 'LESS_THAN_OR_EQUAL',
            value: parseUnits('100', 6), // Max cumulative amount of 100 USDC
            cumulative: true
          }
        ]
      })
    ]
  })
});

アプリをProviderでラップする

[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

接続時にユーザーに権限の承認が求められます。

Web SDK

ゲームエンジンSDK

モバイル

その他のSDK

Getting started

手数料オプションの挙動（重要）

​手数料オプションの挙動（重要）

手数料オプションの挙動（重要）