メインコンテンツへスキップ

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.

完全に統合されたデモを見るには、Mining Quest をご覧ください。また、そのソースコードはこちらで確認できます。

​
🔑 ステップ1：プロジェクトアクセスキーを取得

まず、アプリをSequenceインフラに接続するためのキーが必要です。このキーはプロジェクトを識別し、各種サービスの利用を可能にします。 sequence.buildにアクセスし、サインアップまたはログインして新しいプロジェクトを作成します。Builder Getting Startedガイドで手順を確認できます。 ここで、あなた専用の projectAccessKey を取得できます。

​
📦 ステップ2：コアSDKパッケージ@0xsequence/connectをインストール

次に、Sequence Web SDKの主要パッケージをプロジェクトの依存関係に追加します。このパッケージには必要なフックやコンポーネント、ウォレットモーダルがすべて含まれています。 プロジェクトのターミナルで、以下のインストールコマンドを実行してください。 
pnpm install @0xsequence/connect
これでSequence SDKがプロジェクトの依存関係として追加され、すぐに利用可能です。

​
🔗 ステップ3：Reactアプリに統合

最後に、アプリケーション全体をウォレットプロバイダーでラップします。これにより、dApp内のどのコンポーネントからも接続機能が利用できるようになります。 また、ユーザーの代わりに最大100トークンまで利用できる権限をリクエストする明示的なセッションも作成しており、自動化やUX向上の可能性が広がります。 参照：権限の詳細解説 および トークンディレクトリ。 
import { SequenceConnect, createConfig, createContractPermission, createExplicitSession, useOpenConnectModal, type SequenceConnectConfig } from "@0xsequence/connect";
import { parseUnits } from "viem";
import { useAccount, useDisconnect } from "wagmi";

const config: SequenceConnectConfig = createConfig({
  projectAccessKey: "<your-project-access-key>",
  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,
  explicitSession: createExplicitSession({
    chainId: 42161,
    nativeTokenSpending: {
      valueLimit: 0n
    },
    expiresIn: {
      hours: 24, // Session lasts for 24 hours
    },
    permissions: [
      // Request a permission to spend up to 100 tokens on behalf of the user
      createContractPermission({
        address: '0x...',
        functionSignature: 'function transfer(address to, uint256 amount)',
        rules: [
          {
            param: 'to',
            type: 'address',
            condition: 'EQUAL',
            value: '0x...' // The address where dApp can spend the tokens
                },
          {
            param: 'amount',
            type: 'uint256',
            condition: 'LESS_THAN_OR_EQUAL',
            value: parseUnits('100', 6), // Max cumulative amount of 100 tokens
            cumulative: true
          }
        ]
      })
    ]
  })
});

export const App = () => {
  return (
    <SequenceConnect config={config}>
      <Homepage />
    </SequenceConnect>
  );
};

const Homepage = () => {

  const { address } = useAccount()
  const { disconnect } = useDisconnect()
  const { setOpenConnectModal } = useOpenConnectModal()
  
  return (
    <div>
      {address ? (
        <button onClick={() => disconnect()}>Disconnect</button>
      ) : (
        <>
          Connected address: {address}
          <button onClick={() => setOpenConnectModal(true)}>Connect</button>
        </>
      )}
    </div>
  );
};
Sequenceウォレットがアプリで利用可能になりました。useConnect()などのwagmiフックを使って、ユーザーがSNSやメールでサインインし、ブロックチェーンとやり取りできるようになります。