まず、Sequence Projectアカウントを作成していることを確認してください。まだお持ちでない場合はこちらから作成できます。続行するにはProject Access Keyが必要です。
当社のWeb SDKはwagmiの上に構築されています。高度な設定やトランザクション送信、コントラクト呼び出しなどについては、wagmiのドキュメントをご参照ください。
1

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

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
2

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

次に、Ecosystem Walletの設定を作成します。
[config.ts]
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を使用しています。dappOriginはdappのオリジンで、ユーザーのアクセス元を確認するために使われます。explicitSessionParams オブジェクトを使うことで、dapp は接続時にユーザーから特定の権限をリクエストできます。 これらの権限により、dapp は一定期間ユーザーに代わって特定の操作を実行できるようになり、トランザクションの確認画面なしで自動処理やシームレスな体験を実現します。例として、「次の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://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供給などの操作が追加のポップアップなしで実行でき、ユーザーがオフラインでも自動化が可能です。
3

アプリを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>
);
4

接続モーダルの表示

[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
接続時にユーザーに権限の承認が求められます。メインダッシュボード画面