Day 57：开发交易模拟器（Gas + 滑点估算）

日期：2026-03-12 主题：设计并开发交易模拟器组件，支持 Gas 费估算和滑点预览，代码提交

---

今日目标

---

一、交易模拟器产品设计

1.1 功能定义

交易模拟器 = 在交易执行前，帮用户预览：
├── 1. Gas 费用估算（当前网络费用 + 法币等值）
├── 2. 滑点预览（预期价格 vs 实际可能价格）
├── 3. 价格影响（这笔交易对市场价格的影响）
├── 4. 最终结果预览（交易后你的余额变化）
└── 5. 风险提示（高 Gas / 高滑点 / 高价格影响 告警）

1.2 用户故事

作为一个 DeFi 交易者，
我希望在确认 Swap 之前能看到：
├── 这笔交易大概要花多少 Gas（以美元计）
├── 由于滑点我最少能收到多少代币
├── 这笔交易会对价格造成多大影响
└── 是否有异常风险需要注意

这样我就能做出更好的交易决策，避免意外损失。

1.3 MVP 功能范围

---

二、技术设计

2.1 Gas 费估算原理

EIP-1559 Gas 费模型：

Gas Fee = Gas Used × (Base Fee + Priority Fee)

├── Gas Used：交易消耗的计算单元数
│   ├── ETH 转账：21,000 gas（固定）
│   ├── ERC20 转账：~65,000 gas
│   ├── Uniswap Swap：~150,000 gas
│   ├── Aave 存款：~200,000 gas
│   └── 复杂合约交互：变化很大
│
├── Base Fee：网络基础费（由协议自动调整）
│   ├── 上一区块 Gas 使用 > 50% → Base Fee 上涨
│   ├── 上一区块 Gas 使用 < 50% → Base Fee 下降
│   └── 最大变化幅度：每区块 ±12.5%
│
└── Priority Fee（Tip）：给验证者的小费
    ├── 网络空闲：~0.1 Gwei
    ├── 正常：~1-2 Gwei
    └── 拥堵：~5-50+ Gwei

2.2 滑点计算原理

AMM 滑点（以 Uniswap V2 为例）：

恒定乘积公式：x × y = k

交易前：ETH池 = 1000, USDC池 = 2,000,000
价格：1 ETH = 2,000 USDC

用户要买 10 ETH：
├── 新 ETH 池 = 1000 - 10 = 990
├── 需要的 USDC = k / 990 - 2,000,000
│               = 2,000,000,000 / 990 - 2,000,000
│               = 2,020,202 - 2,000,000
│               = 20,202 USDC
├── 实际价格 = 20,202 / 10 = 2,020.2 USDC/ETH
├── 市场价格 = 2,000 USDC/ETH
├── 滑点 = (2,020.2 - 2,000) / 2,000 = 1.01%
└── 价格影响 = 1.01%

交易量越大 → 滑点越大
流动性越深 → 滑点越小

2.3 组件架构

TransactionSimulator/
├── GasEstimator         → Gas 费估算和展示
├── SlippageCalculator   → 滑点计算和预览
├── PriceImpactWarning   → 价格影响警告
├── TransactionPreview   → 综合预览面板
└── hooks/
    ├── useGasEstimate   → 获取 Gas 数据
    ├── useSlippage      → 计算滑点
    └── useEthPrice      → ETH 价格（复用现有）

---

三、组件代码实现

3.1 Gas 估算 Hook

// src/hooks/useGasEstimate.ts
import { useEffect, useState } from 'react';

interface GasEstimate {
  baseFee: number;        // Gwei
  priorityFee: number;    // Gwei
  gasLimit: number;       // units
  estimatedCost: number;  // ETH
  estimatedUSD: number;   // USD
  speed: 'slow' | 'standard' | 'fast';
}

interface GasData {
  slow: GasEstimate;
  standard: GasEstimate;
  fast: GasEstimate;
  lastBlock: number;
  loading: boolean;
  error: string | null;
}

3.2 滑点计算器逻辑

// 滑点计算核心逻辑
interface SlippageResult {
  expectedOutput: number;     // 预期输出
  minimumOutput: number;      // 最少收到（考虑滑点容忍）
  priceImpact: number;        // 价格影响百分比
  effectivePrice: number;     // 实际成交价
  slippageTolerance: number;  // 用户设置的滑点容忍度
  riskLevel: 'low' | 'medium' | 'high';
}

// 价格影响分级
// < 1%   → 低 (绿色)
// 1%-5%  → 中 (黄色)
// > 5%   → 高 (红色，需确认)
// > 15%  → 极高 (红色闪烁，强烈警告)

3.3 组件 UI 设计

┌─────────────────────────────────────────┐
│        交易模拟器                      │
├─────────────────────────────────────────┤
│                                         │
│  交易对:  ETH → USDC                    │
│  输入量:  [  0.5  ] ETH                 │
│                                         │
│  ─────── Gas 费估算 ───────             │
│                                         │
│  慢速    $1.20  (~3分钟)              │
│  标准    $2.30  (~30秒)   ← 推荐     │
│  快速    $4.50  (~12秒)              │
│                                         │
│  当前 Base Fee: 25 Gwei                 │
│  网络状态: 中等繁忙                   │
│                                         │
│  ─────── 滑点预览 ───────               │
│                                         │
│  预期收到:    1,247.50 USDC              │
│  最少收到:    1,241.26 USDC (0.5%滑点)   │
│  价格影响:    0.03%                   │
│  有效价格:    2,495 USDC/ETH             │
│  市场价格:    2,495.75 USDC/ETH          │
│                                         │
│  滑点容忍: [0.5%] [1%] [自定义]          │
│                                         │
│  ─────── 费用汇总 ───────               │
│                                         │
│  交易金额:   $1,247.88                   │
│  Gas 费用:   $2.30                       │
│  总花费:     $1,250.18                   │
│  净收到:     1,247.50 USDC               │
│                                         │
│  [模拟交易]  [重新计算]                   │
│                                         │
└─────────────────────────────────────────┘

3.4 风险提示设计

低风险（绿色提示条）：
┌──────────────────────────────────────┐
│ ✅ 交易条件良好                        │
│ Gas 费正常，价格影响 < 0.1%            │
└──────────────────────────────────────┘

中风险（黄色警告）：
┌──────────────────────────────────────┐
│ ⚠️ 注意：价格影响较大 (2.3%)           │
│ 建议减小交易金额或分批交易              │
└──────────────────────────────────────┘

高风险（红色警告）：
┌──────────────────────────────────────┐
│ 警告：价格影响过大 (8.5%)           │
│ 此交易可能导致显著滑点损失              │
│ 建议：分3-5笔交易执行                  │
│ [我了解风险，继续] [取消]               │
└──────────────────────────────────────┘

极高风险（红色闪烁）：
┌──────────────────────────────────────┐
│ 严重警告：价格影响极大 (18.2%)      │
│ 此交易几乎肯定会造成重大损失！          │
│ 你将比市场价多付约 $2,250               │
│ 强烈建议取消此交易                      │
│ [取消交易（推荐）]                      │
│ [我确认了解风险并继续 →]                │
└──────────────────────────────────────┘

---

四、常见交易类型 Gas 估算参考

4.1 Gas 用量参考表

4.2 不同网络 Gas 对比

---

五、技术实现要点

5.1 Gas 数据获取

// 方案1：直接 RPC 调用
// eth_gasPrice / eth_feeHistory / eth_estimateGas

// 方案2：使用 viem/wagmi hooks（推荐）
// useGasPrice() → 当前 Gas 价格
// useEstimateGas() → 交易 Gas 估算
// useFeeHistory() → 历史 Gas 数据

// 方案3：第三方 API
// Etherscan Gas Tracker API
// Blocknative Gas Estimator
// Alchemy Gas Manager

5.2 关键实现细节

Gas 估算注意事项：
├── estimateGas 返回的是"最低需要"，实际应 +20% 作为安全余量
├── EIP-1559 交易需要分别估算 maxFeePerGas 和 maxPriorityFeePerGas
├── L2 网络的 Gas 估算逻辑不同（包含 L1 数据费用）
├── 不同钱包对 Gas 估算的处理不同
└── 合约交互的 Gas 受输入参数影响，需要带参数估算

滑点计算注意事项：
├── V2 和 V3 的滑点计算方式不同
├── V3 的集中流动性使得滑点不是单调函数
├── 聚合器的滑点取决于路由拆分方案
├── 价格影响 ≠ 滑点（价格影响是确定的，滑点是不确定的）
└── 前端报价到实际执行之间可能有价格变化

5.3 用户体验要点

✅ 自动刷新：Gas 价格每 12 秒（每个区块）刷新
✅ 法币换算：所有费用同时展示 ETH 和 USD
✅ 默认值合理：滑点默认 0.5%，Gas 默认标准速度
✅ 颜色编码：绿/黄/红直观显示风险级别
✅ 一键调整：高滑点/高Gas时提供一键调整按钮
✅ 响应式：移动端简化展示，可展开详情

❌ 避免：
├── 不要每秒刷新（浪费请求，数字跳动让用户焦虑）
├── 不要只显示 Gwei（用户不懂）
├── 不要隐藏费用（透明是信任的基础）
└── 不要强制高级参数（默认值应该适用于大多数情况）

---

六、Day 58 继续开发计划

Day 57（今天）：
├── ✅ 产品设计和技术方案
├── ✅ Gas 估算核心逻辑
├── ✅ 滑点计算核心逻辑
└── ✅ UI 组件设计

Day 58（明天）：
├── □ 组件代码实现和联调
├── □ 接入真实 Gas 数据 API
├── □ 风险提示逻辑完善
├── □ 响应式适配
└── □ 代码提交

---

面试准备

问题：如何设计交易模拟器来改善用户体验？

30秒版本： 交易模拟器核心解决"不确定性"——在用户签名前展示三个关键信息：Gas 费用（法币标注）、滑点和最少收到量、价格影响（颜色编码风险）。技术上通过 eth_estimateGas 和 AMM 公式计算，关键是合理的默认值和直觉化的风险提示，让用户不需要理解 Gwei 和滑点就能安全交易。

追问准备：

• Q：Gas 估算不准怎么办？→ 加 20% 安全余量。如果估算失败，展示"无法估算 Gas，交易可能失败"的警告而非静默失败
• Q：L2 和 L1 的模拟器有什么不同？→ L2 Gas 极低（可以弱化 Gas 展示），但 L2 有额外的 L1 数据费用需要展示。L2 上滑点和价格影响更重要
• Q：如何处理聚合器的复杂路由？→ 展示简化路由（A→B→C），详情可展开。关键是展示最终结果（收到多少），而非路径细节

---

参考

• EIP-1559 Gas 费模型
• Uniswap V2/V3 白皮书（滑点计算）
• Etherscan Gas Tracker API
• 博客笔记：/blog/day57-transaction-simulator

---

完成后

Day 58：交易模拟器开发（续），完成组件实现、联调测试、代码提交。