Web3

This is a 100% decentralized blockchain red packet application. Users can connect their wallets, set an amount and quantity to send red packets, and then share a link for others to claim. All data and operations are based on the blockchain, completely eliminating the need for centralized servers, making the entire process secure, transparent, and traceable. If you’re interested, you can check out my code on GitHub: redpacket‑dapp Feature Highlights 🧧 Send Red Packet: Connect your wallet, set the amount and quantity, and send a red packet to the blockchain. 🎁 Claim Red Packet: Through a shared link, others can connect their wallets and claim the red packet directly from the blockchain. 🔗 Smart Contract: Secure smart contracts written in Solidity handle all logic. 🌐 Multi-chain Support: Supports local testnet and BSC testnet. 💼 Web3 Integration: Uses MetaMask wallet connection. 🚀 Fully Decentralized: No backend server, all data stored on the blockchain. Tech Stack Frontend: React 19, React Router 6, TypeScript, Vite, Ethers v6 Contract Layer: Hardhat, Solidity 0.8.x Tools: ESLint, Prettier No Backend Required: Zero server dependencies ❌ Quick Start # 1. Install project dependencies npm install cd react-dapp && npm install && cd .. # 2. Start local blockchain node npm run node # 3. Compile smart contracts npx hardhat compile # 4. Deploy smart contracts npm run deploy # 5. Start frontend npm run frontend Directory Structure redpacket-web3/ ├─ contracts/ # Solidity smart contracts │ └─ RedPacket.sol ├─ react-dapp/ # React + Vite frontend │ ├─ src/ │ │ ├─ components/ # Common components (wallet button, create form, etc.) │ │ ├─ config/ # ABI, contract address configuration │ │ ├─ hooks/ # Custom hooks (useWallet) │ │ ├─ pages/ # Pages (Home, ClaimPacket) │ │ ├─ styles/ # Global styles │ │ ├─ utils/ # Web3 utility functions │ │ └─ App.tsx # Routing and layout │ ├─ .env.example # Frontend environment variable instructions │ └─ package.json ├─ scripts/ │ └─ deploy.js # Hardhat deployment script (automatically writes to frontend config) ├─ hardhat.config.js └─ package.json # Root scripts (Hardhat + frontend one-click start) Usage Guide Create a Red Packet Open the frontend and click “Connect Wallet” in the top right corner. Fill in the total red packet amount and number of shares; the application will randomly split the amount on the frontend. Submit and confirm the transaction in MetaMask, then wait for block confirmation. Upon success, copy the system-generated claim link and share it with friends. Claim a Red Packet Open the shared link (URL contains /claim/{packetId}). Connect your wallet first, then click “Claim”. After signing and confirming, wait for the block to be mined. The page will display the result and remaining shares. Environment Variables dapp/.env (automatically ignored in development, please refer to .env.example) VITE_RPC_URL: Frontend direct RPC node, defaults to http://127.0.0.1:8545 VITE_CONTRACT_ADDRESS: Can override the address written by the deployment script VITE_CHAIN_ID: Chain ID (hexadecimal) prompted for use by the frontend root/.env: If you need to reference private keys or BSC RPC in Hardhat, you can continue to use the original syntax. Smart Contract (RedPacket.sol) Core methods: ...

A practical reflection on multi-chain wallet integration Finally, I have some free time to sort out the code. The Web3 project has access to multi-chain wallet connection functions, mainly involving Ethereum, Polygon, BSC and Solana. At first glance, it seemed like it was just a matter of “doing a few more sets of compatible logic”, but after I actually implemented it, I discovered that many things were actually not as simple as I thought. ...

Another new inexplicable word -. - I can roughly summarize it into the following points: What is web3.0 Web 3.0 (Web3) is the development direction of the next generation of the Internet, aiming to create a more decentralized, user-controlled and data-protected network environment. Different from the previous Web 1.0 (static web pages) and Web 2.0 (dynamic, interactive web pages and social media), the core concepts and technologies of Web 3.0 include the following aspects: ...

Before we start, let’s briefly understand the basic concepts. I can roughly summarize them into the following points What is Web3.0 and what does it have to do with blockchain? (The article last time will come in handy) Requirements: Develop a Python-based Web 3.0 image uploading system. This system will allow users to upload images and store them on a decentralized network, while recording transaction information on the blockchain. I originally wrote it for fun, but I thought about writing it into a user authentication file operation that integrates a full set of management, so that it “will eventually become the ultimate solution for image upload services.” But in practice, I found that it was not very practical, so I gave up. However, I have always been so obsessed with pictures. ...