Web3

這是一個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） 核心方法： ...

多鏈錢包整合的實踐反思 總算是空閒下來可以整理一下程式碼了，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 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，和區塊鏈又有什麼關係？（上回的文章不就派上用場了） 需求：開發一個基於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程式碼與智能合約互動： ...