本节作者：@愚指导为什么要开发《DEX 开发实战》这一章课程在前面的两个章节《新手入门》中，我们帮组大家理解了 DApp 开发的一些基础点，帮助前端开发尝试智能合约开发，帮助非前端开发搭建了一个前端 Demo。但是对于一个真正的 DApp 来说，这完全不够。首先，真正要上到生产环境的合约通常需...

本节作者：@愚指导这一讲我们会介绍什么是去中心化交易所（DEX），以及它的一些关键特质和相关概念，让你可以从产品逻辑上理解 DEX，为后面的开发实战做好概念上的认识。什么是去中心化交易所（DEX）？Uniswap 和 Blur 就是典型的两个去中心化交易所。前者主要用于交易代币, 后者主要用于...

本节作者：@Web3Pignard这一讲我们正式走进 Uniswap 的代码解析，准确来说是 Uniswap V3，通过阅读本节，你可以了解到：什么是 Uniswap，Uniswap 推出了哪些版本，为什么要解析 V3 版本；Uniswap V3 由哪些合约构成，每个合约的主要功能和核心流程的...

本节作者：@愚指导在上面的几讲中我们大概介绍了 DEX，分析了我们大概要做什么，以及参考了 Uniswap 的合约代码。那这一讲我们开始设计 Wtfswap 的整体功能，我们会设计一个类似 Uniswap 但是有部分区别于它的功能，会做一些简化调整，用于课程开发练习。我们在上一讲《Uniswa...

本节作者：@Web3Pignard @愚指导这一讲将会设计整体合约的结构，定义各个合约的接口，并做初步的技术分析。合约需求描述wtfswap 设计每个池子都有一个价格范围，swap 只能在此价格范围内成交任何人都可以创建池子，创建池子可以指定当前价格、价格范围： [a, b] 和 费率 f；相...

本节作者：@愚指导这一讲我们将在本地开发环境中初始化合约，正式启动开发。初始化合约Wtfswap 的合约开发我们继续基于之前在《合约本地开发和测试环境》 和《使用 Wagmi CLI 调试本地合约》中搭建的本地开发环境开发，如果你还没有搭建过，请基于那一讲课程搭建。我们结合在上一讲中接口的设计...

本节作者：@mocha.wiz @愚指导这一讲我们将引导大家完成 Factory.sol 合约的开发。合约简介在我们的课程设计中 PoolManager 合约继承了 Factory 合约，在 Solidity 智能合约的开发中，这样的继承更多只是为了代码的组织，最终合约发布到链上后只会有一个合...

本节作者：@yeezo、@Ethan这一讲我们将引导大家完成 PoolManager.sol 合约的开发。合约简介PoolManager 合约的主要作用是控制池子，并且提供池子的信息来供前端展示。PoolManger 合约继承了 Factory 合约，开发者在想要获取池子信息的时候，无需向更底...

本节作者：@愚指导这一讲将会实现 Pool 合约中涉及到 LP（流动性提供者）相关的接口，包括添加流动性、移除流动性、提取代币等。合约简介Pool 合约是教程中最复杂的一个合约，它由 Factory 合约创建，可能会有多个 Pool 合约。在我们的课程设计中，每个代币对可能有多个 Pool 合...

本节作者：@愚指导这一讲将会实现 Pool 合约中的 swap 交易方法。合约简介在上一讲中，我们实现了 Pool 合约的流动性添加和管理的相关方法，流动性添加本质上就是 LP 将代币注入到 Pool 合约中，这样用户就可以利用 LP 注入的代币来进行交易了。比如我们设置了初始化的价格为 10...

本节作者：@愚指导这一讲将会实现 Pool 合约中的手续费收取的逻辑。简介手续费收取除了需要考虑从用户手中扣除手续费外，还要考虑如何按照 LP 贡献的流动性来分配手续费收益。首先我们需要在 Pool 合约中定义两个变量：/// @inheritdoc IPool uint256 public ...

本节作者：@愚指导这一讲将会实现 PositionManager 合约。合约简介PositionManager 合约并不是核心功能，和 Uniswap V3 的 NonfungiblePositionManager.sol 合约类似。理论上来讲，你想要通过 Uniswap V3 来交易可以不通...

本节作者：@mocha.wiz @愚指导这一讲我们将引导大家完成 SwapRouter.sol 合约的开发。合约简介SwapRouter 合约用于将多个交易池 Pool 合约的交易组合为一个交易。每个代币对可能会有多个交易池，因为交易池的流动性、手续费、价格上下限不一样，所以用户的一次交易需求...

本节作者：@愚指导这一讲将会初始化前端代码，搭建起基本的 UI 框架，并做初步的技术分析。初始化前端代码我们将会继续基于 React + Next.js + TypeScript 来初始化我们的项目，并直接沿用在前面的课程中创建好的项目代码。如果你还没有创建项目，可以参考 01_QuickSt...

本节作者：@愚指导这一讲，我们来实现 Wtfswap 的 Layout 头部部分的 UI。设计稿如下所示：样式比较简单，右侧我们可以使用 Ant Design Web3 的 ConnectButton 组件，其它部分可以直接用些样式，样式我们基于 CSSModules 来写，NextJS 默认...

本节作者：@愚指导这一讲我们将支持通过钱包链接区块链，你也可以参考之前基础课程中的连接钱包学习。初始化 Provider我们基于 Ant Design Web3 的以太坊适配，来给整个 DApp 的组件提供连接链的支持，我们需要在 DApp 的最外层包裹 WagmiWeb3ConfigProv...

本节作者：@小符这一讲我们来实现 Wtfswap 的 Swap 部分的 UI。设计稿如下所示：Swap 页面是 Wtfswap 的核心页面，先来拆分下 Swap 页面，Swap 页面首先引入了 Layout 的头部，然后在页面中间实现了 Swap UI；搭建 Swap 页面需要多个组件， 主要...

本节作者：@愚指导这一讲我们来实现 Wtfswap 的交易池列表的 UI 页面开发。框架搭建首先我们来看一下设计稿：该页面主要是用来显示一个列表，展示出当前所有的交易池。另外有两个按钮，分别是添加交易池和查看流动性列表的入口。我们主要会用到 Ant Design 的 Table 组件 来展示列...

本节作者：@愚指导这一讲我们来实现 Wtfswap 添加交易弹窗的 UI。添加弹窗我们参考下面设计稿：设计稿是添加流动性的设计稿，这里仅作为参考，因为是课程，我们不会完全实现设计稿中的效果，仅仅通过必要的代码实现必要的功能。我们主要会用到 Ant Design 的 Modal 组件 和 For...

本节作者：@愚指导这一讲我们来实现 Wtfswap 的流动性（头寸）列表的 UI 页面开发。框架搭建首先我们来看一下设计稿：和交易池列表页面类似，该页面主要是用来显示一个列表，展示出当前账号下的头寸，并包含添加头寸、移除头寸和收回头寸的操作入口。我们可以直接复制交易池列表页面的代码 pool....

本节作者：@愚指导这一讲我们来实现 Wtfswap 添加流动性（头寸）弹窗的 UI。添加弹窗我们参考下面设计稿：设计稿仅作视觉上的参考，我们不会完全实现设计稿中的效果，仅仅通过必要的代码实现必要的功能。和添加交易池弹窗 UI 的课程类似，我们首先创建一个组件 WtfAddPositionMod...

本节作者：@愚指导这一讲开始将会准备前端和链联调相关工作，为后面各个开发前端和链做交互做准备。添加测试用的代币合约为了方便测试，我们新建一个 wtfswap/test-contracts/DebugToken.sol 合约，用于测试。合约代码如下：// SPDX-License-Identif...

本节作者：@愚指导这一讲开始将会开发前端调用合约相关逻辑，我们首先从支持添加交易对开始。获取交易池列表我们在之前的《PoolManager 合约开发》中已经实现了 getAllPools 方法，这个方法可以获取所有的交易池列表。我们在前端调用这个方法，获取所有的交易池列表。需要注意的是，在实际...

本节作者：@愚指导这一讲会完成前端和链交互相关的获取流动性列表、添加流动性、移除流动性和提取流动性的逻辑。获取流动性列表我们在之前的《PositionManager 合约开发》中已经实现了 getAllPositions 方法，和上一讲类似，我们直接通过 useReadPositionMana...

本节作者：@愚指导这一讲会完成交易相关逻辑，包括交易的询价、指定输入交易、指定输出交易等。显示可用的交易对首先，我们需要获取到当前可以用的交易对，并展示到下拉选择中供用户选择。我们需要使用 useReadPoolManagerGetPairs 调用 PoolManager 的 GetPairs...

本节作者：@愚指导漏洞列表贡献：@愚指导、@Ethan这一讲会简单讲一下合约安全，也欢迎大家提交本课程的合约漏洞帮助完善该文档。关于合约安全和优化合约安全是 DApp 开发中非常重要的一个环节，智能合约的漏洞可能会导致资产的损失，因此在开发合约时需要格外小心。因为大部分区块链的合约一旦部署就无...

本节作者：@愚指导这一讲我们将会把 Wtfswap 部署到测试网 Sepolia 上，正式完成我们的课程。合约部署和部署合约到本地测试节点类似，我们可以使用 Hardhat Ignition 来部署合约到测试网。首先我们需要在 hardhat.config.ts 中配置测试网的网络信息：imp...

MIT LicenseCopyright (c) 2024 WTF AcademyCopyright (c) 2025 ZAN (Modified Portions)Permission is hereby granted, free of charge, to any person obta...