Clark Cui

Appearance

ETH #5：Dapp、钱包与智能合约 ​

Dapp 是 Web3 的应用形态。理解 Dapp 与钱包的交互方式，是前端工程师进入 Web3 的关键一步。

学习目标 ​

  1. 理解交易的完整生命周期
  2. 了解插件钱包的能力和架构
  3. 掌握 Dapp 与插件钱包的常见交互规范
  4. 初步认识智能合约和 ABI 编码

Dapp 是什么 ​

Dapp（Decentralized Application）= 前端界面 + 智能合约。与传统 Web 应用不同的是，Dapp 的后端逻辑运行在区块链上，数据公开透明、不可篡改。

Dapp 与钱包的交互流程 ​

sequenceDiagram
    participant User as 用户
    participant Dapp as Dapp 前端
    participant Wallet as 插件钱包
    participant RPC as RPC 节点
    participant Chain as 区块链

    User->>Dapp: 点击"连接钱包"
    Dapp->>Wallet: 请求连接（eth_requestAccounts）
    Wallet-->>User: 弹窗确认连接
    User->>Wallet: 确认 ✅
    Wallet-->>Dapp: 返回账户地址

    User->>Dapp: 点击"Swap 代币"
    Dapp->>Dapp: 构建交易数据（ABI 编码）
    Dapp->>Wallet: 请求签名（eth_sendTransaction）
    Wallet-->>User: 弹窗显示交易详情
    User->>Wallet: 确认签名 ✅
    Wallet->>RPC: 发送已签名交易
    RPC->>Chain: 广播并等待确认
    Chain-->>Dapp: 交易成功 🎉

插件钱包的能力 ​

插件钱包（如 MetaMask）是 Dapp 与区块链之间的桥梁：

graph TB
    subgraph 钱包核心能力
        A["🔑 账户管理<br/>密钥存储/派生/切换"]
        B["✍️ 交易签名<br/>本地签名不暴露私钥"]
        C["🌐 网络管理<br/>主网/测试网/自定义RPC"]
        D["🔗 Dapp 连接<br/>Provider API"]
        E["🛡️ 安全防护<br/>钓鱼检测/风险提示"]
    end

ABI 编码 ​

ABI（Application Binary Interface） 是智能合约的接口描述，定义了函数名、参数类型、返回值等。

当 Dapp 调用合约函数时，需要将函数调用编码为二进制数据，作为交易的 data 字段：

graph LR
    A["函数调用<br/>transfer(to, amount)"] -->|"ABI 编码"| B["data 字段<br/>0xa9059cbb<br/>000000...addr<br/>000000...amount"]
    B -->|"作为交易 data"| C["发送到合约地址"]

编码规则 ​

data = 函数选择器(4字节) + 参数编码(每个32字节)
  • 函数选择器 = keccak256("transfer(address,uint256)") 的前 4 字节 = 0xa9059cbb
  • 参数编码 = 每个参数左填充到 32 字节

示例 ​

调用 transfer(0xBob, 100)：

0xa9059cbb
0000000000000000000000000Bob的地址（32字节）
0000000000000000000000000000000000000000000000000000000000000064 (100的16进制)

学习资源 ​