chapter4_workshop

本リポジトリは、Suiのスマートコントラクトとフロントエンドを連携させる手順を学ぶワークショップ教材です。Sui Moveで実装したコントラクトをデプロイし、React+Vite製のフロントエンドからミント処理を呼び出す一連の流れを体験できます。

ディレクトリ構成

• contracts: ワークショップで使用するSui Moveコントラクト群。パッケージのビルドやテスト、デプロイをここで行います。
• mint_site: 完成済みの参考実装（お手本）。Sui Wallet接続やミント処理の呼び出し方、UIの構成などを確認できます。
• mint_site_workshop: 受講者が実装を仕上げる課題用フロントエンド。mint_site と同じ構成をベースに、必要な機能を段階的に追加していきます。

ワークショップの進め方

1. Sui環境の準備: Sui CLIやローカルネットワークのセットアップを行い、contracts をビルド・テストして仕組みを理解します。
2. お手本の把握: mint_site を pnpm install → pnpm dev で起動し、完成形のUIとSuiコントラクト連携の挙動を確認します。
3. 課題の実装: mint_site_workshop に移り、ウォレット接続、コントラクト呼び出し、UIの整備などを順番に実装していきます。必要に応じて mint_site のコードを参照してください。
4. 動作確認: 実装後はテストネットやローカルネットワークでミント操作を行い、コントラクトとフロントエンドが正しく連携しているかを検証します。

必要な準備・推奨環境

• Node.js 18以降
• パッケージマネージャ: pnpm（pnpm-lock.yaml を同梱）
• Sui CLI（ローカルネットまたはテストネットへの接続設定含む）

mint_site をガイドとして参照しながら mint_site_workshop を完成させ、Suiコントラクトとの接続やトランザクション送信の流れを理解しましょう。