Web3 on MoeJue's Blog

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/              # 自定義 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）

核心方法：

多鏈支援，真沒你想的那麼簡單

Sat, 05 Jul 2025 08:20:55 +0000

多鏈錢包整合的實踐反思

總算是空閒下來可以整理一下程式碼了，Web3 專案接入多鏈錢包連接功能，主要涉及 Ethereum、Polygon、BSC 和 Solana。乍一聽好像只是「多做幾套相容邏輯」的事，但真正落地後才發現，很多東西其實沒想得那麼簡單。

this.networkConfigs = {
    ethereum: {
        chainId: '0x1', // 1
        chainName: 'Ethereum Mainnet',
        nativeCurrency: {
            name: 'Ethereum',
            symbol: 'ETH',
            decimals: 18
        },
        rpcUrls: ['https://eth-mainnet.public.blastapi.io'],
        blockExplorerUrls: ['https://etherscan.io']
    },
    polygon: {
        chainId: '0x89', // 137
        chainName: 'Polygon Mainnet',
        nativeCurrency: {
            name: 'MATIC',
            symbol: 'MATIC',
            decimals: 18
        },
        rpcUrls: ['https://polygon-rpc.com'],
        blockExplorerUrls: ['https://polygonscan.com']
    },
    bsc: {
        chainId: '0x38', // 56
        chainName: 'BNB Smart Chain',
        nativeCurrency: {
            name: 'BNB',
            symbol: 'BNB',
            decimals: 18
        },
        rpcUrls: ['https://bsc-dataseed.binance.org'],
        blockExplorerUrls: ['https://bscscan.com']
    }
}

多鏈並非簡單的「支援多個錢包」

最大的感受是：鏈不一樣，錢包互動方式也不一樣，連 SDK 的思維方式都不一樣。以太坊生態可以用統一的 Web3.js 處理很多邏輯，而到了 Solana，你會發現它完全是另一套系統：Provider 接入、連接流程、PublicKey 建構方式都不太一樣，甚至連網路延遲和穩定性都影響體驗。

什麼是Web3.0，與區塊鏈又有什麼關係？

Mon, 17 Jun 2024 12:59:22 +0000

又是一個莫名其妙的詞語的新起-。- 我大致歸納為以下幾個點

什麼是web3.0

Web 3.0（Web3）是下一代網際網路的發展方向，旨在創建一個更加去中心化、用戶控制和數據保護的網路環境。與之前的Web 1.0（靜態網頁）和Web 2.0（動態、互動式網頁和社交媒體）不同，Web 3.0的核心理念和技術包括以下幾個方面：

去中心化：

區塊鏈技術：Web 3.0的核心是區塊鏈技術，它提供了一個去中心化的帳本，記錄所有的交易和數據變化。這意味著數據不再由單一的中央伺服器控制，而是分佈在多個節點上。
分佈式應用（DApps）：這些應用程式運行在區塊鏈網路上，沒有中心化的控制者。DApps的用戶可以直接進行交易和互動，而無需通過中介機構。

用戶控制和數據保護：

用戶主權身份：在Web 3.0中，用戶可以完全控制自己的數位身份和數據。通過加密技術，用戶可以決定誰可以訪問他們的数据以及如何使用這些數據。
數據所有權：用戶的數據儲存在去中心化的網路上，用戶擁有數據的所有權，而不是由大公司集中管理和控制。

智能合約：

自動執行協議：智能合約是在區塊鏈上運行的自動化協議，當滿足特定條件時自動執行。這種技術可以用於各種場景，如金融交易、供應鏈管理和法律合約。互操作性：
跨平台和跨鏈技術：Web 3.0致力於實現不同區塊鏈和分佈式網路之間的互操作性，使得數據和資產可以在不同平台之間無縫轉移。

去信任化和透明度：

無信任機制：Web 3.0通過區塊鏈技術實現了無信任機制，即參與者無需互相信任或依賴第三方中介，就能進行安全的交易和互動。
透明性：所有交易和數據變更記錄在區塊鏈上，公開透明且不可篡改，提高了信任度和安全性。

Web 3.0的應用場景

去中心化金融（DeFi）：通過智能合約和區塊鏈技術，提供無需中介的金融服務，如借貸、交易和投資。
數位身份：用戶可以創建和管理自己的數位身份，控制個人數據的訪問和使用。
供應鏈管理：通過區塊鏈技術，實現供應鏈的透明和可追溯性，防止偽造和欺詐。
內容創作和分發：藝術家、音樂家和作家可以直接與觀眾互動和交易，獲得更公平的收益分配。

那什麼又是區塊鏈呢？

區塊鏈技術是一種分佈式帳本技術（Distributed Ledger Technology, DLT），用於記錄交易和資訊的不可篡改、去中心化的資料庫。區塊鏈技術的核心思想是通過去中心化的方式實現數據的安全、透明和可信。

區塊鏈的基本原理

區塊（Block）：
- 區塊是包含交易記錄的數據包。每個區塊包含多個交易和一個哈希值（用於唯一標識該區塊）。
- 區塊還包含上一個區塊的哈希值，從而將所有區塊連接成鏈，形成區塊鏈。
鏈（Chain）：
- 區塊通過哈希值相互連接，形成一個鏈式結構。每個區塊包含前一個區塊的哈希值，這使得區塊鏈中的數據難以篡改。
- 如果試圖更改一個區塊中的數據，將導致該區塊及其後續所有區塊的哈希值發生變化，需要重新計算所有這些區塊的哈希值，這幾乎是不可能的。
去中心化（Decentralization）：
- 區塊鏈網路中的所有節點（電腦）都保存一個完整的區塊鏈副本，這些副本通過共識機制保持一致。
- 沒有中央機構控制或管理區塊鏈，數據由所有節點共同維護。
共識機制（Consensus Mechanism）：
- 區塊鏈網路使用共識機制來確保所有節點對區塊鏈的狀態達成一致。常見的共識機制包括工作量證明（Proof of Work, PoW）和權益證明（Proof of Stake, PoS）。
- 工作量證明（PoW）：礦工通過解決複雜的數學問題來驗證交易，並將其添加到區塊鏈中。解決問題需要大量計算能力，確保了區塊鏈的安全性。權益證明（PoS）：驗證者根據其持有的加密貨幣數量和其他因素來驗證交易，並獲得相應的獎勵。
加密技術（Cryptography）： -區塊鏈使用加密技術確保數據的安全性和隱私性。每個交易都使用公鑰和私鑰進行簽名和驗證，確保只有合法的所有者才能發起交易。

區塊鏈的優點

安全性：
- 數據分佈在多個節點上，沒有單點故障，攻擊者難以篡改數據。每個區塊包含上一個區塊的哈希值，篡改一個區塊需要更改整個鏈條，成本極高。

2.透明性：

區塊鏈上的所有交易記錄都是公開可見的，任何人都可以查閱。交易記錄不可篡改，提高了系統的透明度和信任度。

3.去中心化：

沒有中央控制機構，所有節點平等參與網路的維護和管理，防止了單點控制和權力集中。

4.不可篡改性：

一旦數據被寫入區塊鏈，就很難被篡改，確保了數據的完整性和真實性。

區塊鏈的應用場景

加密貨幣：

基於Web3.0的區塊鏈圖片上傳

Mon, 17 Jun 2024 12:57:43 +0000

在開始之前，我們先簡單了解一下基本的概念，我大致歸納為以下幾個點什麼是Web3.0，和區塊鏈又有什麼關係？（上回的文章不就派上用場了）

需求：開發一個基於Python的Web 3.0圖片上傳系統。這個系統將允許用戶上傳圖片，並將圖片儲存在去中心化的網路上，同時記錄交易資訊在區塊鏈上。本來只是寫著玩的，想過要寫成用戶認證、檔案操作集成全套管理的，讓他「終將成為圖片上傳服務的最終解決方案」。實際下來卻發現不是很實際，就作罷了，奈何我一直以來對圖片這麼執著。

步驟概述

環境設定：使用Python開發，安裝必要的Python函式庫。
IPFS整合：將圖片上傳到IPFS，取得圖片的CID（內容識別碼）。
區塊鏈整合：將IPFS CID記錄在區塊鏈上。
Web介面：使用Flask建立一個Web介面，允許用戶上傳圖片。

詳細步驟

1. 環境設定

安裝所需的Python函式庫：

pip install flask web3 ipfshttpclient

2. IPFS整合

IPFS（星際檔案系統）是一種點對點的檔案儲存協定。我們可以使用ipfshttpclient函式庫來與IPFS網路互動。

首先，請確保你已經安裝並運行了IPFS節點。如果還沒有安裝IPFS，可以在IPFS官網找到安裝指南。

以下是上傳圖片到IPFS的程式碼範例：

import ipfshttpclient

def upload_to_ipfs(file_path):
    client = ipfshttpclient.connect('/ip4/127.0.0.1/tcp/5001')
    res = client.add(file_path)
    return res['Hash']

3. 區塊鏈整合

使用web3.py函式庫將IPFS CID記錄到區塊鏈上。我們將以太坊（Ethereum）作為範例區塊鏈。

以下是一個簡單的智能合約範例，用於儲存IPFS CID：

pragma solidity ^0.8.0;

contract IPFSStorage {
    mapping(address => string[]) public userCIDs;

    function storeCID(string memory cid) public {
        userCIDs[msg.sender].push(cid);
    }

    function getCIDs() public view returns (string[] memory) {
        return userCIDs[msg.sender];
    }
}

編譯並部署該合約後，使用以下Python程式碼與智能合約互動：