Web3 オンチェーン紅包 DApp

Sat, 10 Jan 2026 14:02:35 +0000

これは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 + フロントエンドをワンクリックで起動）

使用ガイド

お年玉の作成

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

お年玉の受け取り

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

環境変数

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）

コアメソッド：

区块链 on MoeJue's Blog