> ## Documentation Index
> Fetch the complete documentation index at: https://sequence-0fb8d9e6-6256-forte-config.mintlify.site/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@v6-beta wagmi viem 
        # or
        pnpm install @0xsequence/connect@v6-beta wagmi viem 
        # or
        yarn add @0xsequence/connect@v6-beta wagmi viem 
        ```
      </Step>

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

        ```typescript [config.ts] theme={null}
        import { createConfig } from "@0xsequence/connect";

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

        `walletUrl`は、dAppが利用するEcosystem WalletのURLです。デモでは[Acme Ecosystem Wallet](https://next-acme-wallet.sequence-dev.app)を使用しています。

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

        `explicitSessionParams` オブジェクトを使うことで、dapp は接続時にユーザーから特定の権限をリクエストできます。
        これらの権限により、dapp は一定期間ユーザーに代わって特定の操作を実行できるようになり、トランザクションの確認画面なしで自動処理やシームレスな体験を実現します。

        例として、「次の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://next-acme-wallet.sequence-dev.app',
          dappOrigin: window.location.origin,
          appName: 'Sequence Web SDK Demo',
          chainIds: [42161],
          defaultChainId: 42161,
          google: true,
          apple: true,
          email: true,
          explicitSessionParams: {
            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-6256-forte-config/4Fh23C5wkIhn2BWw/images/wallet_permissions.png?fit=max&auto=format&n=4Fh23C5wkIhn2BWw&q=85&s=dd464a9a6b222ee36dc0f16b9ce8ad74" 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@v6-beta wagmi viem 
        # or
        pnpm install @0xsequence/connect@v6-beta wagmi viem 
        # or
        yarn add @0xsequence/connect@v6-beta wagmi viem 
        ```
      </Step>

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

        ```typescript [config.ts] theme={null}
        import { createConfig } from "@0xsequence/connect";

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

        `walletUrl`は、dAppが利用するEcosystem WalletのURLです。デモでは[Acme Ecosystem Wallet](https://next-acme-wallet.sequence-dev.app)を使用しています。

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

        `explicitSessionParams` オブジェクトを使うことで、dapp は接続時にユーザーから特定の権限をリクエストできます。
        これらの権限により、dapp は一定期間ユーザーに代わって特定の操作を実行できるようになり、トランザクションの確認画面なしでよりスムーズなユーザー体験を提供できます。

        例として、「次の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://next-acme-wallet.sequence-dev.app',
          dappOrigin: window.location.origin,
          appName: 'Sequence Web SDK Demo',
          chainIds: [42161],
          defaultChainId: 42161,
          google: true,
          apple: true,
          email: true,
          explicitSessionParams: {
            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-6256-forte-config/4Fh23C5wkIhn2BWw/images/wallet_permissions.png?fit=max&auto=format&n=4Fh23C5wkIhn2BWw&q=85&s=dd464a9a6b222ee36dc0f16b9ce8ad74" alt="メインダッシュボード画面" height="200" className="rounded-lg" data-path="images/wallet_permissions.png" />
      </Step>
    </Steps>
  </Tab>
</Tabs>