Web3 鏈上紅包 DApp

這是一個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/              # 自定義 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（十六進制）
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
RPC URL: https://data-seed-prebsc-1-s1.binance.org:8545
鏈 ID: 97
貨幣符號: tBNB
區塊瀏覽器: https://testnet.bscscan.com

常見問題

如何使用 BSC Testnet？
在 Hardhat 配置中增加 BSC 網路並部署，或將 VITE_RPC_URL 指向 BSC 節點，同時把 VITE_CONTRACT_ADDRESS 改為對應的鏈上地址即可。

祝你搶紅包愉快！🧨

⚠️ 提醒：本專案僅用於功能與可行性測試，尚未部署至測試網或主網，未經過完整安全測試，請勿用於實際資產操作，由此產生的風險需自行承擔。