https://github.com/wtfacademy/wtf-dapp
⭐ Minimal tutorials to build Dapps | DEX Development Tutorial | Uniswap 代码解析 | 去中心化交易所实战全栈教程 WTFSwap | DApp 智能合约和前端教程 ⭐
https://github.com/wtfacademy/wtf-dapp
blockchain dapp dex
Last synced: 11 days ago
JSON representation
⭐ Minimal tutorials to build Dapps | DEX Development Tutorial | Uniswap 代码解析 | 去中心化交易所实战全栈教程 WTFSwap | DApp 智能合约和前端教程 ⭐
- Host: GitHub
- URL: https://github.com/wtfacademy/wtf-dapp
- Owner: WTFAcademy
- License: mit
- Created: 2024-01-12T06:39:26.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-31T03:23:32.000Z (3 months ago)
- Last Synced: 2025-04-12T03:49:34.524Z (11 days ago)
- Topics: blockchain, dapp, dex
- Language: Solidity
- Homepage: https://wtf-dapp.vercel.app
- Size: 34.9 MB
- Stars: 495
- Watchers: 7
- Forks: 108
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# WTF-Dapp
👉 WTF Dapp 是一个围绕 DApp 全栈开发的入门课程，帮助开发者入门去中心应用开发 🚀。
目前设计中包含三个部分：
- 🐝 新手入门：极简入门教程，从零开始帮助有简单开发经验的开发者快速上手去中心化应用开发。包括简单的前端页面和一个基础的 NFT 合约的开发。
- 🏃 DEX 开发实战：围绕一个课程设计的简单的去中心化交易所（DEX）的开发实战课程。通过这个课程，开发者可以了解到 DEX 的基本原理和实现，以及在实战中学习一些更加复杂的 DApp 开发知识。
- 📝 经验手册：一些关于 DApp 开发的经验总结，包括合约的权限管理、多合约的部署等 DApp 开发过程中可能会遇到的常见问题和解决方案的分享。
📬 课程完全开源，欢迎对 DApp 开发感兴趣的开发者参与贡献。第一部分新手入门已经完成，你可以帮忙校对、提出修改意见。第二部分 DEX 开发实战已经完成，你可以访问[《体验 WTFSwap 测试网 Demo》](./T001_WtfswapDemo/readme.md)参与体验和学习。第三部分经验手册则开放收集合适的优秀文章，欢迎提交 PR。另外参与讨论和反馈问题也是对课程很重要的贡献，你可以在 [Issues](https://github.com/WTFAcademy/WTF-Dapp/issues) 中讨论或者反馈问题。贡献者可以添加你的 Twitter 到文章头部。更多贡献说明参考 [CONTRIBUTING](./CONTRIBUTING.md)。
📔 课程中包含合约开发和前端开发的内容，你可以按照你的需求选择学习其中某一个部分。但是我们更加建议你学习全部课程，这样可以更好的理解 DApp 的开发，每一部分我们都提供了完整的代码供参考。
👉 你的 Star 是对我们最好的鼓励，如果对我们的课程感兴趣，欢迎给一个 Star 吧 ⭐
## 赞助商
感谢 ZAN 对 WTF Dapp 课程的赞助 ❤️
🔊 [ZAN](https://zan.top?chInfo=wtf) 是一家 Web3 技术服务提供商，提供[节点服务](https://zan.top/home/node-service?chInfo=wtf)、[测试网水龙头](https://zan.top/faucet?chInfo=wtf)、[智能合约审计](https://zan.top/home/ai-scan?chInfo=wtf)等服务，为 DApp 开发者提供技术服务支持。
欢迎加入 ZAN 的 [DApp 开发者学习频道](https://discord.gg/nAGcVn5wFh)，一起讨论学习 DApp 开发。
## 新手入门
**第 1 讲：快速开始（三分钟展示 NFT）**：[教程](./01_QuickStart/readme.md) | [代码](./01_QuickStart/web3.tsx)
**第 2 讲：连接钱包**：[教程](./02_ConnectWallet/readme.md) | [代码](./02_ConnectWallet/web3.tsx)
**第 3 讲：节点服务和水龙头**：[教程](./03_NodeService/readme.md) | [代码](./03_NodeService/web3.tsx)
**第 4 讲：调用合约**：[教程](./04_CallContract/readme.md) | [代码](./04_CallContract/web3.tsx)
**第 5 讲：监听事件**：[教程](./05_Events/readme.md) | [代码](./05_Events/web3.tsx)
**第 6 讲：Next.js 部署**：[教程](./06_NextJS/readme.md)
**第 7 讲：合约开发和测试**：[教程](./07_ContractDev/readme.md) | [代码](./07_ContractDev/MyToken.sol)
**第 8 讲：合约部署**：[教程](./08_ContractDeploy/readme.md) | [代码](./08_ContractDeploy/demo/dapp.tsx)
**第 9 讲：EIP1193 和 EIP6963**：[教程](./09_EIP1193/readme.md) | [代码](./09_EIP1193/web3.tsx)
**第 10 讲：通过 WalletConnect 连接移动端钱包**：[教程](./10_WalletConnect/readme.md) | [代码](./10_WalletConnect/web3.tsx)
**第 11 讲：支持多链**：[教程](./11_MultipleChain/readme.md) | [代码](./11_MultipleChain/web3.tsx)
**第 12 讲：签名和验签**：[教程](./12_Signature/readme.md) | [代码](./demo/pages/sign/index.tsx)
**第 13 讲：转账和收款**：[教程](./13_Payment/readme.md) | [代码](./demo/pages/transaction/index.tsx)
**第 14 讲：合约本地开发和测试环境**：[教程](./14_LocalDev/readme.md) | [代码](./demo-contract)
**第 15 讲：使用 Wagmi CLI 调试本地合约**：[教程](./15_WagmiCli/readme.md) | [代码](./demo/wagmi.config.ts)
## DEX 开发实战
**第 P000 讲：为什么要做这个实战课程**：[教程](./P000_WhyDEX/readme.md)
### 0. 准备工作
**第 P001 讲：什么是去中心化交易所（DEX）**：[教程](./P001_WhatIsDEX/readme.md)
**第 P002 讲：Uniswap 代码解析**：[教程](./P002_WhatIsUniswap/readme.md)
**第 P003 讲：Wtfswap 整体设计**：[教程](./P003_OverallDesign/readme.md)
### 1. 合约开发
**第 P101 讲：Wtfswap 合约设计**：[教程](./P101_ContractsDesign/readme.md) | [代码](./demo-contract/contracts/wtfswap/interfaces/)
**第 P102 讲：初始化合约和开发环境**：[教程](./P102_InitContracts/readme.md) | [代码](./P102_InitContracts/code/)
**第 P103 讲：Factory 合约开发**：[教程](./P103_Factory/readme.md) | [代码](./demo-contract/contracts/wtfswap/Factory.sol)
**第 P104 讲：PoolManager 合约开发**：[教程](./P104_PoolManager/readme.md) | [代码](./demo-contract/contracts/wtfswap/PoolManager.sol)
**第 P105 讲：Pool 合约 LP 相关接口开发**：[教程](./P105_PoolLP/readme.md) | [代码](./demo-contract/contracts/wtfswap/Pool.sol)
**第 P106 讲：Pool 合约 swap 接口开发**：[教程](./P106_PoolSwap/readme.md) | [代码](./demo-contract/contracts/wtfswap/Pool.sol)
**第 P107 讲：Pool 合约交易手续费逻辑开发**：[教程](./P107_PoolFee/readme.md) | [代码](./demo-contract/contracts/wtfswap/Pool.sol)
**第 P108 讲：PositionManager 合约开发**：[教程](./P108_PositionManager/readme.md) | [代码](./demo-contract/contracts/wtfswap/PositionManager.sol)
**第 P109 讲：SwapRouter 合约开发**：[教程](./P109_SwapRouter/readme.md) | [代码](./demo-contract/contracts/wtfswap/SwapRouter.sol)
### 2. 前端开发
**第 P201 讲：初始化前端代码和技术分析**：[教程](./P201_InitFrontend/readme.md) | [代码](./P201_InitFrontend/code/)
**第 P202 讲：头部 UI 开发**：[教程](./P202_HeadUI/readme.md) | [代码](./P202_HeadUI/code/)
**第 P203 讲：支持连接链**：[教程](./P203_Connect/) | [代码](./P203_Connect/code/)
**第 P204 讲：Swap 页面 UI 开发**：[教程](./P204_SwapUI/) | [代码](./P204_SwapUI/code/)
**第 P205 讲：Pool 列表页面 UI 开发**：[教程](./P205_PoolListUI/readme.md) | [代码](./P205_PoolListUI/code/pool.tsx)
**第 P206 讲：添加 Pool 页面 UI 开发**：[教程](./P206_AddPoolUI/readme.md) | [代码](./demo/components/AddPoolModal/index.tsx)
**第 P207 讲：查看流动性页面 UI 开发**：[教程](./P207_PositionList/readme.md) | [代码](./P207_PositionList/code/)
**第 P208 讲：添加流动性弹窗 UI 开发**：[教程](./P208_AddPositionUI/readme.md) | [代码](./demo/components/AddPositionModal/index.tsx)
**第 P209 讲：前端和链交互准备工作**：[教程](./P209_DebugWithChain/readme.md) | [代码](./demo/pages/wtfswap/debug.tsx)
**第 P210 讲：支持查看和创建交易池**：[教程](./P210_DebugPool/readme.md) | [代码](./demo/pages/wtfswap/pool.tsx)
**第 P211 讲：支持管理流动性**：[教程](./P211_DebugPosition/readme.md) | [代码](./demo/pages/wtfswap/position.tsx)
**第 P212 讲：支持 Swap**：[教程](./P212_DebugSwap/readme.md) | [代码](./demo/pages/wtfswap/index.tsx)
### 3. 部署和优化
**第 P301 讲：合约的优化和安全**：[教程](./P301_ContractOptimize/readme.md)
**第 P302 讲：Wtfswap 部署**：[教程](./P302_Deploy/readme.md)
## 经验手册（PR Welcome）
**第 T001 篇：体验 WTFSwap 测试网 Demo**：[文章](./T001_WtfswapDemo/readme.md)