🔑 关键词：链上调用、交易签名、合约函数调用、wagmi、viem、writeContract、readContract、交易确认

背景：调用不是“点击按钮那么简单”

DApp 的核心功能往往围绕合约调用展开，但前端调用链上函数与传统调用 API 完全不同：

理解调用全过程，是每个 Web3 前端的基本功。

原理：链上调用流程拆解（EOA）

✅ 标准调用链：

构造参数 → 发起签名 → 构造交易 → 发送到 RPC → 节点验证 → 出块 → 状态更新

✅ 合约函数调用分类

调用类型 是否上链 是否需要签名 是否消耗 Gas 适用场景 wagmi Hook
read 否 否 否 查询余额/状态 useReadContract, readContract
write 是 是 是 执行转账/mint useWriteContract, writeContract

核心代码拆解：以铸造 NFT 为例

1. 读取合约状态（不需签名）

const { data: totalSupply } = useReadContract({
  abi,
  address: contractAddress,
  functionName: 'totalSupply',
})

此类调用走 eth_call，不会真正发起交易，适用于 UI 状态显示。