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） 核心方法： ...