Marketplace SDK のはじめ方

必要なパッケージのインストールや設定ファイルの作成など、Marketplace SDK の導入手順を解説します。

この統合を始める前に、Web SDK のインストールと設定が完了していることを確認してください。セットアップ手順は Web SDK - Getting started のドキュメントをご参照ください。完了したら、ここに戻って続けてください。

それ以外の場合は、Marketplace SDK のインストールから、SDK のインスタンス化、マーケットプレイスと連携するためのフックの使い方まで順を追ってご案内します。

​

Marketplace SDK パッケージのインストール

Marketplace SDK はモジュール式なので、必要なパッケージだけをインストールできます。まずは @0xsequence/marketplace-sdk のコアパッケージと、その他必要な依存パッケージをインストールしてください。

npm install @0xsequence/connect @0xsequence/checkout @0xsequence/wallet-widget @0xsequence/marketplace-sdk @0xsequence/design-system @0xsequence/network @0xsequence/indexer @0xsequence/metadata wagmi ethers@^6 viem 0xsequence @tanstack/react-query @tanstack/react-query-devtools @legendapp/state framer-motion pino-pretty
# or
pnpm add @0xsequence/connect @0xsequence/checkout @0xsequence/wallet-widget @0xsequence/marketplace-sdk @0xsequence/design-system @0xsequence/network @0xsequence/indexer @0xsequence/metadata wagmi ethers@^6 viem 0xsequence @tanstack/react-query @tanstack/react-query-devtools @legendapp/state framer-motion pino-pretty
# or
yarn add @0xsequence/connect @0xsequence/checkout @0xsequence/wallet-widget @0xsequence/marketplace-sdk @0xsequence/design-system @0xsequence/network @0xsequence/indexer @0xsequence/metadata wagmi ethers@^6 viem 0xsequence @tanstack/react-query @tanstack/react-query-devtools @legendapp/state framer-motion pino-pretty

​

Dapp のセットアップ

アプリケーションからマーケットプレイスとやり取りするために、core marketplace-sdk ラッパーを利用するには以下の手順に従ってください。

1. Web SDK が正しく統合されているか確認

   Marketplace SDK を始める前に、Web SDK が正しく統合されていることが重要です。これを確認するには、ログイン・ログアウトが正常にできるかをチェックしてください。

2. 設定ファイルの作成

   次に、Marketplace SDK 用の設定変数を作成します。このファイルで環境変数など、Marketplace SDK の主要な設定値を一元管理します。これにより、設定値の管理や保守が容易になります。

   ​

   config.ts

   vite

   import type { SdkConfig } from '@0xsequence/marketplace-sdk';
   
   const projectAccessKey = import.meta.env.VITE_PROJECT_ACCESS_KEY;
   const projectId = import.meta.env.VITE_PROJECT_ID!;
   const waasConfigKey = import.meta.env.VITE_WAAS_CONFIG_KEY;
   const googleClientId = import.meta.env.VITE_GOOGLE_CLIENT_ID;
   const appleClientId = import.meta.env.VITE_APPLE_CLIENT_ID;
   const appleRedirectURI = window.location.origin + window.location.pathname;
   const walletConnectId = import.meta.env.VITE_WALLET_CONNECT_ID;
   
   export function getConfig() {
     const embedded = waasConfigKey
       ? ({
           waasConfigKey,
           googleClientId,
           appleClientId,
           appleRedirectURI,
         } satisfies NonNullable<SdkConfig["wallet"]>["embedded"])
       : undefined;
   
     const config = {
       projectId,
       projectAccessKey,
       wallet: {
         walletConnectProjectId: walletConnectId,
         embedded,
       },
     } satisfies SdkConfig;
   
     return config;
   }
   
3. SSR クライアントの作成

   次に、Marketplace SDK 用の SSR クライアントを作成します。この SSR クライアントは Next.js サーバー上で Marketplace SDK を初期化するエントリーポイントとなり、UI 描画前の効率的なデータ取得や設定が可能になります。

   ​

   SSR クライアントの理解

   SSR クライアントを使うことで、マーケットプレイスの主要なデータや設定にアクセスでき、サーバーサイドで SDK を正しく初期化するのに役立ちます。以下のデータが取得可能です：

   このセットアップにより、サーバーサイドレンダリングと Marketplace SDK のシームレスな統合が実現し、パフォーマンスとユーザー体験が向上します。

   ​

   ssrClient.ts

   vite

   // You can omit this step with VITE
   
4. Marketplace SDK プロバイダーを Web SDK プロバイダーと一緒に追加

   Providers.tsx ファイルを開き、Web SDK の設定とともに Marketplace SDK のプロバイダーも統合してください。

   vite

   import {
     MarketplaceProvider,
     ModalProvider,
   } from "@0xsequence/marketplace-sdk/react";
   import { getConfig } from "./config";
   
   const sdkConfig = getConfig();
   
   // Into your React component:
   
   return (
     /* Your other providers should be placed here (they should wrap MarketplaceProvider) */
     
     <MarketplaceProvider config={sdkConfig}>
       {children}
       <ModalProvider />
     </MarketplaceProvider>
   
     /* Your other providers should close here */
   );
   
5. 完了

   これで、Marketplace SDKで利用可能なフックを探索する準備が整いました。興味がありますか？詳しくはMarketplace SDK hooksのドキュメントをご覧ください。