> ## 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.

# Web SDKのはじめ方

> 必要なパッケージをインストールし、wagmiコネクタを使ってEmbedded WalletやネイティブEOAウォレットで認証する方法をご案内します。

# Dapp のセットアップ

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

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

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

<Tabs>
  <Tab title="Viteアプリ">
    <Steps>
      <Step title="ViteでReactプロジェクトを作成">
        まずは[vite](https://vitejs.dev/)を使って[React](https://react.dev/)プロジェクトを作成します：

        ```sh theme={null}
        npm create vite
        # or
        pnpm create vite
        # or
        yarn create vite
        ```
      </Step>

      <Step title="Web SDKの依存パッケージをインストール">
        ```bash theme={null}
        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
        ```
      </Step>

      <Step title="設定ファイルの作成">
        次に、設定を作成します。

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

        export const config: any = createConfig({
          projectAccessKey: "<your-project-access-key>",
          signIn: {
            projectName: 'Sequence Web SDK Demo',
          },
          walletUrl: 'https://v3.sequence.app',
          dappOrigin: window.location.origin,
          appName: 'Sequence Web SDK Demo',
          chainIds: [1],
          defaultChainId: 1,
          google: true,
          apple: true,
          email: true,
          walletConnect: {
            projectId: walletConnectProjectId
          },
          permissions: ...
        });
        ```

        さらにカスタマイズしたい場合は、[追加の設定パラメータ一覧](/sdk/web/wallet-sdk/embedded/custom-configuration)をご参照ください。
      </Step>

      <Step title="プロバイダーコンポーネントの設定">
        [ステップ3](/sdk/web/wallet-sdk/embedded/getting-started#create-a-config)で作成した設定を、下記のように`main.tsx`内のプロバイダーに渡します。

        ```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>
        );
        ```
      </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
        ```

        web3操作には、wagmiが提供するReactフックを使うことで、トランザクション送信などの一般的な機能を簡単に実装できます。
      </Step>
    </Steps>
  </Tab>

  <Tab title="NextJSアプリ">
    <Steps>
      <Step title="Web SDKの依存パッケージをインストール">
        ```bash theme={null}
        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
        ```
      </Step>

      <Step title="Next.jsの設定を行う">
        wagmiや[@walletconnect](https://docs.reown.com/appkit/next/core/installation#extra-configuration)パッケージとの互換性を保つため、next.config.jsファイルに以下の設定を追加してください。

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

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

      <Step title="設定ファイルの作成">
        次に、設定を作成します。

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

        export const config: any = createConfig({
          projectAccessKey: "<your-project-access-key>",
          signIn: {
            projectName: 'Sequence Web SDK Demo',
          },
          walletUrl: 'https://v3.sequence.app',
          dappOrigin: window.location.origin,
          appName: 'Sequence Web SDK Demo',
          chainIds: [1],
          defaultChainId: 1,
          google: true,
          apple: true,
          email: true,
          walletConnect: {
            projectId: walletConnectProjectId
          },
          permissions: ...
        });
        ```

        さらにカスタマイズしたい場合は、[追加の設定パラメータ一覧](/sdk/web/wallet-sdk/embedded/custom-configuration)をご参照ください。
      </Step>

      <Step title="プロバイダーコンポーネントの設定">
        [ステップ3](/sdk/web/wallet-sdk/embedded/getting-started#create-a-config)で作成した設定をSequenceConnectプロバイダーに渡します。

        アプリ全体をProvidersコンポーネントでラップするため、別途「providers.tsx」ファイルを作成します。

        ```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
        ```

        web3操作には、wagmiが提供するReactフックを使うことで、トランザクション送信などの一般的な機能を簡単に実装できます。
      </Step>

      web3操作には、wagmiが提供するReactフックを使うことで、トランザクション送信などの一般的な機能を簡単に実装できます。
    </Steps>
  </Tab>
</Tabs>