折腾代码

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: ...

Recently, I’ve made a “big move” to my personal blog - I’ve upgraded it I upgraded my blog from a monolingual version to a multilingual site (Simplified Chinese, Traditional Chinese, English, Japanese). And the whole process is automated. 💪 Mainly includes: Automatic synchronization of master articles Automatic AI translation of content Automatically build and deploy multilingual sites Why Hugo? Because of its confident slogan: “The world’s fastest framework for building websites.” ...

Do you still remember that random graph interface that you guys ruined? It was updated today! In the past few years, Random Graph API has been a “little toy” and “common tool” for many front-end developers, 2D webmasters, and even desktop plug-in enthusiasts. 🥇 Generation 1: Simple but clunky starting point To be honest, the random graph API at that time was just a small PHP script + a cloud host. The goal at that time was simple: provide an interface that can return random pictures. ...

✨ Oyama まひろの小屋 ✨ 🌸 Welcome to Oyama まひろの小屋 🌸 Wow! You discovered my secret base! (*≧ω≦) This is Oyama Misaki’s personal website, full of cute animations and interesting content! I will share my favorite animations, comics, games and some small blessings in daily life here~ 💕 About Me 💕 My name is Oyama Ouyuki, and I love you and I love you. I like anime, comics, light novels and all kinds of cute things! Favorite colors are pink and light blue! ...

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. ...

Project Overview In today’s world of web development, user experience and interface design are becoming increasingly important. Mac Web Vue Template This is a modern and elegant Vue.js Web template inspired by macOS design. It is a modern web application template based on Vue.js. Its design is inspired by the elegant interface of macOS. This project not only provides beautiful UI design, but also includes complete project structure and best practices. ...

Project introduction The mobile version of Mengyin Mall is a multi-terminal mall system developed based on uniapp, supporting multiple platforms such as iOS, Android, H5 and small programs. The system uses PHP + MySQL + FastAdmin as the back-end technology stack to achieve complete e-commerce functions. Core functions Product management: classification, list, detail display Shopping process: shopping cart, settlement, payment, order management User system: member center, personal information management -Multi-merchant model: merchants manage products and orders independently Shipping system: supports pushing orders to ERP (Guan Jia Po) system for processing Dual mode trading: Online ordering and express delivery Order online and pick up in store/delivery by rider System preview Backend management interface ...

How to rub a portable monitor by hand Preface I have an old laptop at home. Except for the dead battery, all other parts are still functioning normally. However, due to the rapid technological changes, this laptop has almost no other uses except browsing the web. It would be a pity to throw it away, but it would be worthless to sell it. So I decided to transform it into a portable monitor, so that I can connect it to a laptop or desktop, play games, watch videos, and let it continue to use its residual heat. By the way, I have transformed the hard drive into a portable hard drive. ...

From the earliest [Gallery] (https://moejue.cn/archives/10), to [Picture Bed] (https://moejue.cn/archives/61), to the current photo album. My persistence in pictures can be said to have spanned several centuries. The pictures in the gallery were stored in Qiniuyun, but later the traffic was blocked and closed. The Picture Bed is now providing image upload services for blogs. Photo album is the concept of a photo album in a mobile phone. It can store both pictures and videos. Gradually it is becoming more and more perfect. ...

MoeKoe Music An open source, simple and beautiful Kugou third-party client 🌎 GitHub repository | 📦️ Download the installation package | 💬 Visit the blog Preface As early as around 10 years ago, when I was using the web version of QQ, I had already started using Kugou Music (and I have been a fan for more than ten years), so all the songs I have collected over the years are on it. Later, I also tried to use NetEase Cloud or QQ Music, and also tried to import Kugou’s playlist, but the results were not satisfactory. Most of the songs I listened to were Japanese comic OPs, and many songs could not be found. ...