はじめに

コレクティブルを表示・操作できるシンプルなReactアプリケーションを作成します。ウォレット接続と基本的なコレクティブル閲覧機能を設定しましょう。

Sequence Builder でプロジェクトを作成

コーディングを始める前に、プロジェクトのセットアップが必要です。

Sequence Builder にアクセスします。
新しいプロジェクトを作成します。
ホワイトラベルマーケットプレイスガイドはこちらをご覧ください。
プロジェクト ID と API アクセスキーをメモしておきましょう。

新しい React プロジェクトを作成

このガイドでは Vite、React、TypeScript を使用します。パッケージマネージャーは何でも構いませんが、例では pnpm を使います。

# Create a new project
pnpm create vite@latest my-marketplace-app -- --template react-ts

# Navigate to the project directory
cd my-marketplace-app

# Install dependencies
pnpm install

必要な依存パッケージのインストール

Marketplace SDK とそのピア依存パッケージをインストールします。

pnpm add @0xsequence/marketplace-sdk @0xsequence/connect wagmi viem @tanstack/react-query

SDK設定の作成

新しいファイル src/config/sdk.ts を作成し、SDKの設定を保存します。

import type { SdkConfig } from "@0xsequence/marketplace-sdk";

export const sdkConfig = {
  projectId: "YOUR_PROJECT_ID",
  projectAccessKey: "YOUR_PROJECT_ACCESS_KEY",
} satisfies SdkConfig;

YOUR_PROJECT_ID と YOUR_PROJECT_ACCESS_KEY を実際のプロジェクト情報に置き換えてください。Project ID は https://sequence.build/project/{YOUR_PROJECT_ID}/overview、Project Access Key は https://sequence.build/project/{YOUR_PROJECT_ID}/settings/apikeys で Sequence Builder ダッシュボードから確認できます。

プロバイダーのセットアップ

必要なプロバイダーを設定するために、新しいファイル src/providers.tsx を作成します。

import {
  MarketplaceProvider,
  MarketplaceQueryClientProvider,
  ModalProvider,
  createWagmiConfig,
  getQueryClient,
  marketplaceConfigOptions,
} from "@0xsequence/marketplace-sdk/react";
import { useQuery } from "@tanstack/react-query";
import { WagmiProvider } from "wagmi";
import {
  SequenceConnectProvider,
  type ConnectConfig,
} from "@0xsequence/connect";
import { sdkConfig } from "./config/sdk";

interface ProvidersProps {
  children: React.ReactNode;
}

export default function Providers({ children }: ProvidersProps) {
  const queryClient = getQueryClient();
  const { data: marketplaceConfig, isLoading } = useQuery(
    marketplaceConfigOptions(sdkConfig),
    queryClient
  );

  if (isLoading) {
    return <div>Loading configuration...</div>;
  }

  if (!marketplaceConfig) {
    return <div>Failed to load marketplace configuration</div>;
  }

  const connectConfig: ConnectConfig = {
    projectAccessKey: sdkConfig.projectAccessKey,
    signIn: {
      projectName: marketplaceConfig.settings.title,
    },
  };

  const wagmiConfig = createWagmiConfig(marketplaceConfig, sdkConfig);

  return (
    <WagmiProvider config={wagmiConfig}>
      <MarketplaceQueryClientProvider>
        <SequenceConnectProvider config={connectConfig}>
          <MarketplaceProvider config={sdkConfig}>
            {children}
            <ModalProvider />
          </MarketplaceProvider>
        </SequenceConnectProvider>
      </MarketplaceQueryClientProvider>
    </WagmiProvider>
  );
}

メインエントリーポイントの更新

main.tsx を更新して Providers コンポーネントを利用します。

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import Providers from './providers'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <Providers>
      <App />
    </Providers>
  </React.StrictMode>
)

コレクティブルカードコンポーネントの作成

コレクティブルを表示・操作するための新しいコンポーネント src/components/CollectibleCard.tsx を作成します。

import {
useCollectible,
useMakeOfferModal,
useMarketplaceConfig,
useOpenConnectModal,
} from "@0xsequence/marketplace-sdk/react";
import type { Address } from "viem";
import { useAccount } from "wagmi";

export default function CollectibleCard() {
const { data: marketplaceConfig, isLoading: isMarketplaceConfigLoading } = useMarketplaceConfig();
const { isConnected } = useAccount()
const { openConnectModal } = useOpenConnectModal()

const collection = marketplaceConfig?.market.collections[0];
const chainId = collection?.chainId as number;
const collectionAddress = collection?.itemsAddress as Address;
const collectibleId = "0";

const { data: collectible, isLoading: isCollectibleLoading, error: collectibleError } = useCollectible({
chainId,
collectionAddress,
collectibleId,
});

const { show } = useMakeOfferModal();

if (isMarketplaceConfigLoading || isCollectibleLoading) return <div>Loading...</div>;
if (collectibleError) return <div>Error: {collectibleError.message}</div>;
if (!collectible) return <div>No collectible found</div>;

return (
<div>
  <img width={200} height={200} src={collectible.image} alt={collectible.name} />
  <h3>{collectible.name}</h3>
  {isConnected ? (
    <button
      onClick={() => {
        show({
          chainId,
          collectionAddress,
          collectibleId,
        });
      }}
    >
      Make Offer
    </button>
  ) : (
    <button onClick={() => openConnectModal()}>Connect Wallet</button>
  )}
</div>
);
}

コレクション内で少なくとも 1 つコレクティブルをミントし、そのコレクティブルの ID を collectibleId として使用してください。

最適な体験にはSequence Connectを推奨しますが、Marketplace SDKでは他のウォレットプロバイダーも利用可能です。カスタムウォレットコネクタについては、カスタムコネクタのガイドをご覧ください。

App コンポーネントの更新

App.tsx を更新して新しいコンポーネントを利用します。

import NFTCard from "./nft-card";

export default function App() {
return (
    <NFTCard />
);
}

アプリケーションの実行

開発サーバーを起動します。

pnpm run dev

マーケットプレイスアプリケーションが http://localhost:5173 で動作します。次のことができます：

Connect ボタンでウォレットを接続
コレクティブルの詳細を表示する
「オファーする」ボタンを使ってコレクティブルにオファーを出す

次のステップ

基本的な機能が動作したら、次のことにも挑戦できます：

コレクティブルのリスティングを作成する
注文の管理
UI のカスタマイズ
さらに多くの機能については他のガイドもご覧ください。

お困りの際は、Discordコミュニティにご参加ください。

​はじめに

​次のステップ

はじめに

次のステップ