MPL-404 Hybrid UI テンプレートの使い方

Metaplex MPL-404 Hybrid UI テンプレートは、開発者とユーザーが開発をスムーズに始められるように設計されています。このテンプレートには、.env のサンプルファイル、機能的な UI コンポーネント、およびトランザクション呼び出しが事前に設定されており、Hybrid Collection のフロントエンド UI を構築する際の開発を速くします。

Features

• Nextjs React framework

• Tailwind

• Shadcn

• Solana WalletAdapter

• Metaplex Umi

• Zustand

• Dark/Light Mode

• Umi Helpers

このUIテンプレートは、MetaplexのベースUIテンプレートを使用して作成されています。追加のドキュメントは「Base Template GitHubリポジトリ」で確認できます。

インストール

git clone https://github.com/metaplex-foundation/mpl-hybrid-404-ui-template-nextjs-tailwind-shadcn.git

「GitHubリポジトリ」はこちら

セットアップ

.env ファイル

.env.example を .env にリネームし、以下の項目に正しい情報を入力してください。

// Escrow Account
NEXT_PUBLIC_ESCROW="11111111111111111111111111111111"
NEXT_PUBLIC_COLLECTION="11111111111111111111111111111111"
NEXT_PUBLIC_TOKEN="11111111111111111111111111111111"

// RPC URL
NEXT_PUBLIC_RPC="https://myrpc.com/?api-key="

画像の置き換え

src/assets/images/ ディレクトリ内に、以下の2つの画像を置き換えてください。

• collectionImage.jpg

• token.jpg

これらの画像は、コレクションやトークンのメタデータから画像URIを取得する手間を省くために使用されています。

RPCの変更

プロジェクトのRPC URLは、以下のいずれかの方法で設定できます。

• .env

• constants.ts file

• hardcoded into umi directly

この例では、RPC URLは src/store/useUmiStore.ts の 21行目 にある umiStore の umi ステート内にハードコードされています。

const useUmiStore = create<UmiState>()((set) => ({
  // add your own RPC here
  umi: createUmi('http://api.devnet.solana.com').use(
    signerIdentity(
      createNoopSigner(publicKey('11111111111111111111111111111111'))
    )
  ),
  ...
}))

追加ドキュメント

このテンプレートが使用しているヘルパーや機能を理解するために、ベーステンプレートのドキュメントを参照することをお勧めします。

「GitHubリポジトリ」はこちら