> ## Documentation Index
> Fetch the complete documentation index at: https://docs.sequence.xyz/llms.txt
> Use this file to discover all available pages before exploring further.

> Ecosystem Wallet Web SDKの始め方をご案内します

# Getting started

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

<Note>
  当社のWeb SDKはwagmiの上に構築されています。高度な設定やトランザクション送信、コントラクト呼び出しなどについては、[wagmiのドキュメント](https://wagmi.sh/react/WagmiConfig)をご参照ください。
</Note>

<Tabs>
  <Tab title="Viteアプリ">
    <Steps>
      <Step title="必要なライブラリをインストールします">
        ```bash theme={null}
        npm install @0xsequence/connect wagmi viem
        # or
        pnpm install @0xsequence/connect wagmi viem
        # or
        yarn add @0xsequence/connect wagmi viem
        ```
      </Step>

      <Step title="ウォレット設定を作成します">
        次に、Ecosystem Walletの設定を作成します。

        **Ecosystem Walletに必須**

        * `projectAccessKey`
        * `walletUrl`

        **オプション**

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

        ```typescript [config.ts] theme={null}
        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 エコシステムウォレット](https://acme-wallet.ecosystem-demo.xyz) を使用しています。

        `dappOrigin`はdappのオリジンで、ユーザーのアクセス元を確認するために使われます。

        `explicitSession`オブジェクトを使うことで、dAppが接続時にユーザーから特定の権限をリクエストできます。
        これらの権限により、ユーザーに取引確認を求めずに一定期間dAppが特定の操作を代行でき、よりシームレスな体験や自動化が可能になります。

        参照：[権限の詳細解説](/sdk/web/wallet-sdk/ecosystem/permissions-deep-dive) および [トークンディレクトリ](/sdk/web/wallet-sdk/ecosystem/token-directory)。

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

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

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

        手数料の支払いが満たされない場合、コアのコントラクトコール権限が正しくても、トランザクションは送信時に失敗することがあります。

        `nativeTokenSpending`はオプションです。省略した場合、セッションはネイティブトークンの支出許可なしがデフォルトとなります。

        例として、「次の24時間、ユーザーの代理でArbitrum上のAAVE V3プールに100 USDCを入金する」ための明示的セッションを作成してみましょう。

        ```typescript [config.ts] theme={null}
        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供給などの操作が追加のポップアップなしで実行でき、ユーザーがオフラインでも自動化が可能です。
      </Step>

      <Step title="アプリをProviderでラップする">
        アプリケーション全体でパッケージのフックやコンポーネントを利用できるよう、アプリケーションを`SequenceConnect` Providerでラップしてください。

        [ステップ2](/sdk/web/wallet-sdk/ecosystem/getting-started#create-a-config)で作成した設定を、Providerの`config`に渡す必要があります。

        ```typescript [main.tsx] theme={null}
        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
        ```
      </Step>

      <Step title="接続モーダルの表示">
        ```typescript [App.tsx] theme={null}
        import './App.css'
        import { useOpenConnectModal } from '@0xsequence/connect'

        function App() {
          const {setOpenConnectModal} = useOpenConnectModal()
          
          return (
            <>
              <button onClick={() => setOpenConnectModal(true)}>Connect</button>
            </>
          )
        }

        export default App
        ```

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

        <img src="https://mintcdn.com/sequence-0fb8d9e6/yt_Z0jOG3cMhspj0/images/wallet_permissions.png?fit=max&auto=format&n=yt_Z0jOG3cMhspj0&q=85&s=06ac34b70e9284f97240692b1b9d50f4" alt="メインダッシュボード画面" height="200" className="rounded-lg" data-path="images/wallet_permissions.png" />
      </Step>
    </Steps>
  </Tab>

  <Tab title="NextJSアプリ">
    <Steps>
      <Step title="Web SDKの依存パッケージをインストール">
        ```bash theme={null}
        npm install @0xsequence/connect wagmi viem 
        # or
        pnpm install @0xsequence/connect wagmi viem 
        # or
        yarn add @0xsequence/connect wagmi viem 
        ```
      </Step>

      <Step title="ウォレット設定を作成します">
        次に、Ecosystem Walletの設定を作成します。

        **Ecosystem Walletに必須**

        * `projectAccessKey`
        * `walletUrl`

        **オプション**

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

        ```typescript [config.ts] theme={null}
        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 エコシステムウォレット](https://acme-wallet.ecosystem-demo.xyz) を使用しています。

        `dappOrigin`はdappのオリジンで、ユーザーのアクセス元を確認するために使われます。

        `explicitSession`オブジェクトを使うと、接続時にユーザーから特定の権限をリクエストできます。
        これにより、一定期間ユーザーの代理で特定の操作を実行でき、取引プロンプトなしでシームレスな体験を提供します。

        `nativeTokenSpending`はオプションです。省略した場合、セッションはネイティブトークンの支出許可なしがデフォルトとなります。

        例として、「次の24時間、ユーザーの代理でArbitrum上のAAVE V3プールに100 USDCを入金する」ための明示的セッションを作成してみましょう。

        ```typescript [config.ts] theme={null}
        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
                  }
                ]
              })
            ]
          })
        });
        ```

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

      <Step title="アプリをProviderでラップする">
        アプリケーション全体でパッケージのフックやコンポーネントを利用できるよう、アプリケーションを`SequenceConnect` Providerでラップしてください。

        [ステップ2](/sdk/web/wallet-sdk/ecosystem/getting-started#create-a-config)で作成した設定を、Providerの`config`に渡す必要があります。

        ```typescript [src/app/providers.tsx] theme={null}
        "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;
        ```
      </Step>

      <Step title="アプリをProvidersでラップ">
        アプリ全体をProvidersコンポーネントでラップします。

        ```typescript [src/app/layout.tsx] theme={null}
        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>
          );
        }
        ```
      </Step>

      <Step title="接続モーダルの表示">
        ```typescript [App.tsx] theme={null}
        "use client"

        import { useOpenConnectModal } from '@0xsequence/connect'

        function Home() {
          const { setOpenConnectModal } = useOpenConnectModal()

          return (
            <>
              <button onClick={() => setOpenConnectModal(true)}>Connect</button>
            </>
          )
        }

        export default Home
        ```

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

        <img src="https://mintcdn.com/sequence-0fb8d9e6/yt_Z0jOG3cMhspj0/images/wallet_permissions.png?fit=max&auto=format&n=yt_Z0jOG3cMhspj0&q=85&s=06ac34b70e9284f97240692b1b9d50f4" alt="メインダッシュボード画面" height="200" className="rounded-lg" data-path="images/wallet_permissions.png" />
      </Step>
    </Steps>
  </Tab>
</Tabs>