完成日: 2025年11月14日 バージョン: 1.0.0-beta
SBT表示とネットワーク検証機能を備えた JPYC 決済スキャナーアプリケーション が実装されました。このプロジェクトは、jpyc-payment-scanner を拡張し、利用者がSBT（ソウルバウンドトークン）を表示・管理できるとともに、決済ネットワークを間違えないようにするための仕組みを導入しています。
コンポーネント: src/components/SBTDisplay.tsx
- ✅ ウォレット接続後、保有しているSBTを一覧表示
- ✅ SBTのランク表示（Bronze/Silver/Gold/Platinum）
- ✅ 発行者情報と詳細説明の表示
- ✅ ネットワークごとのSBT分類
- ✅ SBT画像のプレビュー
- ✅ コンパクト表示（バッジ）とフル表示（カード）の2つのレイアウト
ユーティリティ: src/utils/sbt.ts
fetchUserSBTs()- ユーザーの全SBTを取得fetchSBTsByNetwork()- ネットワーク別にフィルタhasSBT()- 特定SBTの保有確認getUserHighestRank()- 最高ランクを取得calculateDiscount()- 割引額を計算getSBTBadgeColor()- ランクに応じた色を取得
ユーティリティ: src/utils/network.ts
基本決済:
payment:0xAddress?network=sepolia&amount=100&memo=テスト
SBT限定決済:
sbt-payment:0xAddress?network=ethereum&sbt=jpyc-early-adopter&sbt-rank=gold&amount=50
parseQRCodeData()- QRコード文字列をパースcreatePaymentQRCode()- 決済用QRコードを生成createSBTPaymentQRCode()- SBT限定決済用QRコードを生成getNetworkFromChainId()- ChainIDからネットワーク名を取得
| ネットワーク | Chain ID | ステータス | 色 |
|---|---|---|---|
| Ethereum | 1 | Mainnet | #627EEA |
| Sepolia | 11155111 | Testnet | #FF8C00 |
| Polygon | 137 | Mainnet | #8247E5 |
| Arbitrum | 42161 | Mainnet | #28A0F0 |
| Optimism | 10 | Mainnet | #FF0420 |
コンポーネント: src/components/NetworkValidation.tsx
ネットワーク検証画面
- QRスキャン時に自動検証
- 現在のネットワークと必要なネットワークを表示
- ネットワーク不一致時に詳細な警告を表示
アクション
- [ネットワークを切り替え] - MetaMask自動切り替え
- [このまま続行] - ユーザーの判断に任せる
- [キャンセル] - スキャン画面に戻る
検証関数: src/utils/network.ts
validateNetwork()- ネットワーク比較validatePaymentNetwork()- QRデータのネットワーク検証NetworkValidationResult- 検証結果型
ランク別割引ルール
| ランク | 割引率 | 日次上限 | 月次上限 | 色 |
|---|---|---|---|---|
| Bronze | 2% | 100,000 | 1,000,000 | #CD7F32 |
| Silver | 5% | 500,000 | 5,000,000 | #C0C0C0 |
| Gold | 10% | 1,000,000 | 10,000,000 | #FFD700 |
| Platinum | 15% | 5,000,000 | 50,000,000 | #E5E4E2 |
実装関数: src/utils/sbt.ts
canPayWithNetwork()- ネットワーク別決済可能性を確認RANK_INFO- ランク情報マッピングSBT_PAYMENT_RULES- 支払いルール定義
SBT-JPYC-QR-Scanner/
├── src/
│ ├── app/ # Next.js アプリケーション層
│ ├── components/
│ │ ├── SBTDisplay.tsx # ✅ SBT表示コンポーネント
│ │ └── NetworkValidation.tsx # ✅ ネットワーク検証UI
│ ├── types/
│ │ └── index.ts # ✅ 型定義（SBT, Network, Payment）
│ └── utils/
│ ├── network.ts # ✅ ネットワーク検証・QRパース
│ └── sbt.ts # ✅ SBT管理・割引計算
├── public/ # 静的ファイル
├── package.json # ✅ 依存関係定義
├── tsconfig.json # ✅ TypeScript設定
├── tailwind.config.ts # ✅ Tailwind CSS設定
├── next.config.js # ✅ Next.js設定
├── postcss.config.mjs # ✅ PostCSS設定
├── eslint.config.mjs # ✅ ESLint設定
├── .env.example # ✅ 環境変数テンプレート
├── README.md # ✅ プロジェクト概要
├── SETUP_GUIDE.md # ✅ セットアップガイド
└── IMPLEMENTATION_GUIDE.md # ✅ 実装ガイド
{
"react": "^19.0.0",
"next": "^16.0.0",
"@rainbow-me/rainbowkit": "^2.2.0",
"wagmi": "^2.0.0",
"viem": "^2.0.0",
"qrcode.react": "^1.0.0",
"qr-scanner": "^1.4.0",
"lucide-react": "^0.414.0",
"framer-motion": "^11.0.0",
"tailwindcss": "^3.0.0",
"next-pwa": "^5.6.0"
}interface SBT {
id: string;
name: string;
symbol: string;
address: `0x${string}`;
issuer: string;
issuerAddress: `0x${string}`;
description: string;
imageUrl?: string;
network: NetworkType; // ethereum | sepolia | polygon | arbitrum | optimism
chainId: number;
tokenId?: bigint;
metadata?: Record<string, any>;
rank?: 'bronze' | 'silver' | 'gold' | 'platinum';
issuedDate?: Date;
expiryDate?: Date;
}interface PaymentQRData {
type: 'ethereum' | 'jpyc' | 'payment' | 'sbt-payment';
address: `0x${string}`;
amount?: string;
network?: NetworkType;
chainId?: number;
sbtRequired?: string[];
minimumSBTRank?: 'bronze' | 'silver' | 'gold' | 'platinum';
memo?: string;
timestamp?: number;
}interface NetworkValidationResult {
isValid: boolean;
currentNetwork: NetworkType;
requiredNetwork: NetworkType;
mismatch: boolean;
message: string;
action?: 'switch-network' | 'confirm' | 'cancel';
}- プロジェクト概要
- 主要機能説明
- 技術スタック
- セットアップ手順
- 使用方法
- QRコード仕様
- SBT割引ルール
- トラブルシューティング
- 詳細なセットアップ手順
- MetaMask 設定
- テスト用トークン取得
- 動作確認チェックリスト
- スマートフォン環境設定
- 実装パターン
- 参考リポジトリとの統合方法
- デバッグのコツ
- テストケース
- デプロイ準備
- SBT一覧取得
- ネットワークフィルタリング
- SBT保有確認
- ランク取得
- 割引計算
- QRコードパース
- ネットワーク比較
- 検証結果の返却
- エラーハンドリング
- コンポーネントレンダリング
- イベントハンドリング
- ローディング表示
- エラー表示
- Node.js 18.0+
- npm または yarn
- MetaMask ブラウザ拡張機能
- WalletConnect Project ID
# 1. 依存関係をインストール
npm install
# 2. 環境変数を設定
cp .env.example .env.local
# .env.local を編集して WALLET_CONNECT_PROJECT_ID を設定
# 3. 開発サーバーを起動
npm run dev
# 4. ブラウザで http://localhost:3000 を開く1. ウォレット接続
2. QRコードスキャン
3. ネットワーク自動検証 ← 新機能
4. SBT割引を確認 ← 新機能
5. 決済実行
1. QRコード読み込み（Sepoliaネットワーク指定）
2. 現在のネットワークが Ethereum
3. 警告画面表示 ← 新UI
4. [ネットワークを切り替え] をクリック
5. MetaMask 自動切り替え
6. 決済画面へ
1. QRコード読み込み（sbt-payment形式）
2. ウォレットのSBTを確認
3. 必要なSBTとランクを検証
4. SBT割引を計算
5. 割引後の金額で決済
- ✅ テストネット専用実装
- ✅ 環境変数による秘密鍵管理
- ✅ HTTPS接続の強制（スマートフォン）
- ✅ MetaMask による署名検証
- ✅ チェックサムアドレス正規化
-
マルチシグウォレット
- 複数署名者による承認フロー
-
SBTの動的割引
- SBT保有期間による割引変動
- 複数SBT組み合わせ割引
-
統計・分析機能
- 決済フロー分析
- ネットワーク別統計
-
国際化
- 多言語サポート
- 地域別ネットワーク設定
- ネットワーク検証関数
- QRコードパース関数
- SBT取得関数
- 割引計算関数
- SBTDisplay.tsx
- NetworkValidation.tsx
- tsconfig.json
- tailwind.config.ts
- next.config.js
- postcss.config.mjs
- eslint.config.mjs
- package.json
- .env.example
- README.md
- SETUP_GUIDE.md
- IMPLEMENTATION_GUIDE.md
- .gitignore
- Git コミット
このプロジェクトで学べる技術：
-
Web3インテグレーション
- RainbowKit によるウォレット接続
- wagmi フックの使用
- viem による Ethereum 操作
-
QRコード処理
- QRコード読み込みと解析
- カスタムフォーマット設計
- URL パラメータ管理
-
ネットワーク管理
- マルチチェーン対応
- ネットワーク検証ロジック
- 自動切り替え実装
-
React・Next.js開発
- TypeScript + React 型安全性
- Server/Client Components
- 動的レイアウト
-
UI/UX設計
- Tailwind CSS によるスタイリング
- Lucide React アイコン
- ユーザーフレンドリーな警告画面
- jpyc-payment-scanner - QRスキャン実装
- SBT-JPYC-Pay - QRコード生成ロジック
MIT License
- JPYC Corporation
- Rainbow Team
- Ethereum Foundation
- Next.js Team
実装終了: 2025年11月14日 バージョン: 1.0.0-beta ステータス: ✅ 完成・テスト待機中