これは100%分散型のブロックチェーンお年玉（レッドパケット）アプリケーションです。ユーザーはウォレットを接続し、金額と数量を設定してお年玉を送信し、リンクを通じて他の人と共有して受け取ることができます。すべてのデータと操作はブロックチェーンに基づいており、中央集権型サーバーは一切不要で、プロセス全体が安全、透明、追跡可能です。

興味があれば、GitHubで私のコードをご覧ください：redpacket‑dapp

機能ハイライト

  • 🧧 お年玉の送信: ウォレットを接続後、金額と数量を設定してブロックチェーンにお年玉を送信します。
  • 🎁 お年玉の受け取り: 共有リンクを通じて、他の人はウォレットを接続してブロックチェーンから直接お年玉を受け取ることができます。
  • 🔗 スマートコントラクト: Solidityで書かれた安全なスマートコントラクトがすべてのロジックを処理します。
  • 🌐 マルチチェーン対応: ローカルテストネットとBSCテストネットをサポートします。
  • 💼 Web3統合: MetaMaskウォレットを使用して接続します。
  • 🚀 完全分散型: バックエンドサーバーがなく、すべてのデータはブロックチェーンに保存されます。

技術スタック

  • フロントエンド：React 19、React Router 6、TypeScript、Vite、Ethers v6
  • コントラクト層：Hardhat、Solidity 0.8.x
  • ツール：ESLint、Prettier
  • バックエンド不要: サーバーへの依存なし ❌

クイックスタート

# 1. プロジェクトの依存関係をインストール
npm install
cd react-dapp && npm install && cd ..

# 2. ローカルブロックチェーンノードを起動
npm run node

# 3. スマートコントラクトをコンパイル
npx hardhat compile

# 4. スマートコントラクトをデプロイ
npm run deploy

# 5. フロントエンドを起動
npm run frontend

ディレクトリ構造

redpacket-web3/
├─ contracts/                # Solidity スマートコントラクト
│  └─ RedPacket.sol
├─ react-dapp/               # React + Vite フロントエンド
│  ├─ src/
│  │  ├─ components/         # 共通コンポーネント（ウォレットボタン、作成フォームなど）
│  │  ├─ config/             # ABI、コントラクトアドレス設定
│  │  ├─ hooks/              # カスタムフック（useWallet）
│  │  ├─ pages/              # ページ（Home、ClaimPacket）
│  │  ├─ styles/             # グローバルスタイル
│  │  ├─ utils/              # Web3 ユーティリティ関数
│  │  └─ App.tsx             # ルーティングとレイアウト
│  ├─ .env.example           # フロントエンドに必要な環境変数説明
│  └─ package.json
├─ scripts/
│  └─ deploy.js              # Hardhat デプロイスクリプト（自動的にフロントエンド設定に書き込みます）
├─ hardhat.config.js
└─ package.json              # ルートディレクトリのスクリプト（Hardhat + フロントエンドをワンクリックで起動）

使用ガイド

お年玉の作成

  1. フロントエンドを開き、右上の「ウォレットを接続」をクリックします。
  2. お年玉の総額と個数を入力すると、アプリケーションがフロントエンドで金額をランダムに分割します。
  3. 送信後、MetaMaskでトランザクションを確認し、ブロックの承認を待ちます。
  4. 成功後、システムが生成した受け取りリンクをコピーして友人と共有できます。

お年玉の受け取り

  1. 共有リンク（URLに /claim/{packetId} が含まれる）を開きます。
  2. 同様にまずウォレットを接続し、「クリックして受け取る」をクリックします。
  3. 署名確認後、ブロックのパッケージングを待ち、ページに結果と残り個数が表示されます。

環境変数

  • dapp/.env（開発環境では自動的に無視されます。.env.exampleを参照してください）
    • VITE_RPC_URL：フロントエンドが直接接続するノードRPC、デフォルトは http://127.0.0.1:8545
    • VITE_CONTRACT_ADDRESS：デプロイスクリプトによって書き込まれたアドレスを上書きできます。
    • VITE_CHAIN_ID：フロントエンドが使用するチェーンID（16進数）
  • root/.env：Hardhatで秘密鍵やBSC RPCを参照する必要がある場合は、既存の記述をそのまま使用できます。

スマートコントラクト（RedPacket.sol）

コアメソッド：

  • createRedPacket(bytes32 packetId, uint256 totalCount, uint256[] amounts)：お年玉を作成し、ETH/BNBをコントラクトに預け入れます。
  • claimRedPacket(bytes32 packetId, uint256 index)：お年玉を受け取り、ランダムなインデックスに従って金額を配布します。
  • getPacketInfo(bytes32 packetId)：お年玉の総額、数量、受け取り状況などを照会します。
  • hasClaimed(bytes32 packetId, address user)：ユーザーがすでに受け取ったかどうかを判断します。

HardhatノードまたはBSCテストネットのいずれも上記のインターフェースを再利用でき、デプロイスクリプトは最新のアドレスをフロントエンドに同期します。再デプロイする場合は、npm run deployを再実行してください。

USDCのデプロイ (USDC.sol)

  • すべてのコントラクトをコンパイル

    npx hardhat compile

  • ERC-20 USDCトークンをデプロイ

    npx hardhat run scripts/deploy-usdc.js --network localhost

  • コマンド

    • Hardhat環境に入る

    npx hardhat console --network localhost

    • テストトークンを送信

      const usdc = await ethers.getContractAt("USDC","0xe7f1725E7734CE288F8367e1Bb143E90bb3F0512");
await usdc.transfer("0x8626f6940E2eb28930eFb4CeF49B2d1F2C9C1199",ethers.utils.parseUnits("1000", 6));

    • 残高を照会

      const balance = await usdc.balanceOf("0x23618e81E3f5cdF7f54C3d65f7FBc0aBf5B21E8f");
console.log(ethers.utils.formatUnits(balance, 6));

ネットワーク

Local Hardhat

  • ネットワーク名: Hardhat Localhost
  • RPC URL: http://127.0.0.1:8545
  • チェーンID: 1337 (0x7a69)
  • 通貨シンボル: ETH
  • ブロックエクスプローラー: なし（ローカルノードコンソールで確認）

BSC Testnet

よくある質問

  • BSC Testnetの使い方は？
    Hardhat設定にBSCネットワークを追加してデプロイするか、VITE_RPC_URLをBSCノードに向け、同時にVITE_CONTRACT_ADDRESSを対応するオンチェーンアドレスに変更するだけです。

お年玉を楽しくゲットしてください！🧨

⚠️ 注意：本プロジェクトは機能と実現可能性のテストのみを目的としており、テストネットやメインネットにはまだデプロイされておらず、完全なセキュリティテストも実施されていません。実際の資産操作には使用しないでください。これにより発生するリスクは自己責任となります。

image
image
image
image
image