多链适配

多链生态现状

以太坊生态已经从单链发展为多链并行的格局。除了以太坊主网（Ethereum Mainnet），还有大量 EVM 兼容链和 Layer 2 网络：

链	Chain ID	类型	Gas Token	区块时间	特点
Ethereum	1	L1	ETH	~12s	安全性最高，Gas 最贵
Polygon	137	Sidechain	POL	~2s	低 Gas，高吞吐
Arbitrum One	42161	Optimistic Rollup	ETH	~0.25s	以太坊安全性，低 Gas
Optimism	10	Optimistic Rollup	ETH	~2s	OP Stack 生态
Base	8453	Optimistic Rollup	ETH	~2s	Coinbase 推出，OP Stack
BSC	56	L1	BNB	~3s	币安生态，兼容 EVM
Avalanche C-Chain	43114	L1	AVAX	~2s	高性能，子网架构
zkSync Era	324	ZK Rollup	ETH	~1s	零知识证明

为什么需要多链适配

多链适配是现代 DApp 的基本要求。用户的资产可能分散在不同链上，DApp 需要支持多链才能覆盖更广泛的用户群体，提供更好的用户体验（更低的 Gas、更快的确认速度）。

面试速答版

多链生态长啥样？前端要做什么？ 现在 DApp 默认要支持多链：

• L1：Ethereum、BSC、Avalanche；L2：Arbitrum、Optimism、Base、zkSync——都是 EVM 兼容，账户/合约/ABI 完全通用。
• 用户的资产分布在不同链，前端必须按链管理合约地址、Gas Token、区块浏览器。

怎么让用户切链？ 两个 EIP 配合：

• EIP-3326 / wallet_switchEthereumChain：让钱包切到指定 chainId；如果钱包没添加该链会报 4902。
• EIP-3085 / wallet_addEthereumChain：捕获 4902 后调它把链加进钱包，传 chainName、rpcUrls、blockExplorerUrls、nativeCurrency。
• Wagmi 直接给 useSwitchChain，会自动处理添加和切换。

多链工程上要注意什么？

• 合约地址要做 chainId → address 的映射表，按当前链查；同样要管 RPC、浏览器 URL、原生币符号。
• 充值/转账界面显示金额时要按 nativeCurrency.decimals，BSC 用 BNB 不是 ETH。
• 区块时间不同（Arbitrum 0.25s vs Ethereum 12s）影响轮询确认的策略。
• L2 跨链需用官方桥（Arbitrum Bridge）或第三方（Across、Hop），不要直接 transfer 到 L2 地址。

EVM 兼容链的共性与差异

所有 EVM 兼容链共享相同的 账户模型、交易格式 和 智能合约标准（ERC-20、ERC-721 等），但在以下方面存在差异：

维度	说明	影响
Chain ID	唯一标识符，防止跨链重放攻击	必须正确配置
RPC URL	节点通信地址	不同链使用不同 RPC
Gas Token	支付交易费用的原生代币	ETH / BNB / POL 等
区块时间	出块间隔	影响确认速度和 UX
Gas 机制	EIP-1559 支持、Gas 价格范围	L2 有额外 L1 data fee
合约地址	同一协议在不同链上地址不同	需要多链地址映射

注意

同一个 DApp 的合约在不同链上的地址通常是不同的（除非使用 CREATE2 确定性部署）。前端必须根据当前链 ID 动态选择正确的合约地址。

链切换实现

原生 EIP-3326 / EIP-3085

通过 EIP-3326 和 EIP-3085 定义的 RPC 方法，可以请求钱包切换或添加链：

chainSwitch.ts

// 切换到已添加的链
async function switchChain(chainId: number) {
  try {
    await window.ethereum.request({
      method: 'wallet_switchEthereumChain',
      params: [{ chainId: `0x${chainId.toString(16)}` }],
    });
  } catch (error: any) {
    // 错误码 4902：钱包中没有该链，需要先添加
    if (error.code === 4902) {
      await addChain(chainId);
    } else {
      throw error;
    }
  }
}

// 添加自定义链到钱包
async function addChain(chainId: number) {
  const chainConfig = CHAIN_CONFIGS[chainId];
  await window.ethereum.request({
    method: 'wallet_addEthereumChain',
    params: [
      {
        chainId: `0x${chainId.toString(16)}`,
        chainName: chainConfig.name,
        nativeCurrency: chainConfig.nativeCurrency,
        rpcUrls: chainConfig.rpcUrls,
        blockExplorerUrls: chainConfig.blockExplorers,
      },
    ],
  });
}

警告

wallet_switchEthereumChain 对以太坊主网（Chain ID 1）通常不会抛出 4902 错误，因为所有钱包默认内置主网。但对于 L2 或自定义链，用户的钱包中可能没有该链的配置，必须处理 4902 fallback。

Wagmi Hooks

使用 Wagmi 可以大幅简化链切换逻辑：

ChainSwitcher.tsx

import { useChainId, useSwitchChain, useAccount } from 'wagmi';

function ChainSwitcher() {
  const chainId = useChainId();
  const { chains, switchChain, isPending } = useSwitchChain();
  const { isConnected } = useAccount();

  if (!isConnected) return null;

  return (
    <div>
      <p>当前链 ID: {chainId}</p>
      {chains.map((chain) => (
        <button
          key={chain.id}
          disabled={chain.id === chainId || isPending}
          onClick={() => switchChain({ chainId: chain.id })}
        >
          {chain.name}
        </button>
      ))}
    </div>
  );
}

多链配置架构

Chain 定义

使用 Viem 定义链配置，这是 Wagmi 生态的标准方式：

config/chains.ts

import { defineChain } from 'viem';
import { mainnet, polygon, arbitrum, optimism, base } from 'viem/chains';

// 自定义链示例（如果 Viem 没有内置）
export const myCustomChain = defineChain({
  id: 12345,
  name: 'My Custom Chain',
  nativeCurrency: { name: 'ETH', symbol: 'ETH', decimals: 18 },
  rpcUrls: {
    default: { http: ['https://rpc.mychain.io'] },
  },
  blockExplorers: {
    default: { name: 'MyScan', url: 'https://scan.mychain.io' },
  },
});

// 支持的链列表
export const supportedChains = [
  mainnet,
  polygon,
  arbitrum,
  optimism,
  base,
] as const;

合约地址多链映射表

config/contracts.ts

import { type Address } from 'viem';
import { mainnet, polygon, arbitrum } from 'viem/chains';

// 合约地址按链 ID 映射
const CONTRACT_ADDRESSES: Record<number, Record<string, Address>> = {
  [mainnet.id]: {
    token: '0x1111111111111111111111111111111111111111',
    staking: '0x2222222222222222222222222222222222222222',
  },
  [polygon.id]: {
    token: '0xaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa',
    staking: '0xbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb',
  },
  [arbitrum.id]: {
    token: '0xcccccccccccccccccccccccccccccccccccccccc',
    staking: '0xdddddddddddddddddddddddddddddddddddddd',
  },
};

// 根据当前链获取合约地址，未配置则抛错
export function getContractAddress(chainId: number, name: string): Address {
  const addresses = CONTRACT_ADDRESSES[chainId];
  if (!addresses?.[name]) {
    throw new Error(`Contract ${name} not deployed on chain ${chainId}`);
  }
  return addresses[name];
}

动态 RPC 选择

为提高可用性，可以为每条链配置多个 RPC，并在主 RPC 不可用时自动切换：

config/wagmi.ts

import { createConfig, http, fallback } from 'wagmi';
import { mainnet, arbitrum } from 'wagmi/chains';

export const config = createConfig({
  chains: [mainnet, arbitrum],
  transports: {
    // 主 RPC 失败时自动 fallback 到备用 RPC
    [mainnet.id]: fallback([
      http('https://eth-mainnet.g.alchemy.com/v2/YOUR_KEY'),
      http('https://mainnet.infura.io/v3/YOUR_KEY'),
      http('https://rpc.ankr.com/eth'),  // 公共 RPC 兜底
    ]),
    [arbitrum.id]: fallback([
      http('https://arb-mainnet.g.alchemy.com/v2/YOUR_KEY'),
      http('https://arb1.arbitrum.io/rpc'),
    ]),
  },
});

多链 DApp 前端设计模式

链感知组件

根据当前链动态渲染不同的 UI 内容：

components/ChainAwareBalance.tsx

import { useChainId, useBalance, useAccount } from 'wagmi';
import { mainnet, polygon, arbitrum } from 'wagmi/chains';

// 不同链的原生代币名称和图标
const CHAIN_META: Record<number, { symbol: string; icon: string }> = {
  [mainnet.id]: { symbol: 'ETH', icon: '/icons/eth.svg' },
  [polygon.id]: { symbol: 'POL', icon: '/icons/polygon.svg' },
  [arbitrum.id]: { symbol: 'ETH', icon: '/icons/arbitrum.svg' },
};

function ChainAwareBalance() {
  const chainId = useChainId();
  const { address } = useAccount();
  const { data: balance } = useBalance({ address });
  const meta = CHAIN_META[chainId];

  return (
    <div>
      <img src={meta?.icon} alt={meta?.symbol} />
      <span>{balance?.formatted} {meta?.symbol}</span>
    </div>
  );
}

错误链提示

当用户连接的链不是 DApp 要求的目标链时，阻止操作并提示切换：

components/WrongChainGuard.tsx

import { useChainId, useSwitchChain } from 'wagmi';

interface Props {
  requiredChainId: number;
  children: React.ReactNode;
}

function WrongChainGuard({ requiredChainId, children }: Props) {
  const chainId = useChainId();
  const { switchChain } = useSwitchChain();

  if (chainId !== requiredChainId) {
    return (
      <div className="wrong-chain-banner">
        <p>请切换到正确的网络后继续操作</p>
        <button onClick={() => switchChain({ chainId: requiredChainId })}>
          切换网络
        </button>
      </div>
    );
  }

  return <>{children}</>;
}

多链交互流程

Layer 2 特殊处理

Optimistic Rollup 提现等待期

Optimistic Rollup（Arbitrum、Optimism、Base）从 L2 提现到 L1 需要经过 7 天挑战期（Challenge Period）。在此期间，任何人都可以对交易的有效性提出质疑。

用户体验建议

7 天等待期对用户来说体验很差。前端应该：

• 明确告知用户预计的提现到账时间
• 提供进度追踪界面
• 推荐用户使用第三方桥（如 Hop、Across）进行快速提现（通常几分钟，但会收取少量手续费）

L2 Gas 特殊计算

L2 的交易费用由两部分组成：

费用组成	说明
L2 执行费	在 L2 上执行交易的 Gas 费，通常很便宜
L1 数据费	将交易数据提交到 L1 的成本，是 L2 费用的主要部分

L1 数据费取决于以太坊主网的 Gas 价格。当主网 Gas 飙升时，L2 的交易费也会相应增加。EIP-4844（Proto-Danksharding）引入 Blob 后，L1 数据费大幅降低。

跨链桥基础

跨链桥是连接不同区块链的基础设施，常见模式：

模式	原理	示例
Lock & Mint	在源链锁定资产，在目标链铸造等价代币	Wrapped BTC (WBTC)
Burn & Release	在源链销毁代币，在目标链释放原始资产	Lock & Mint 的逆操作
消息传递	跨链传递任意消息，不仅限于资产转移	LayerZero、Wormhole
原子交换	通过哈希时间锁合约实现去信任交换	去中心化最彻底

安全风险

跨链桥是 Web3 中最常被攻击的目标之一（Ronin Bridge、Wormhole 等事件损失数亿美元）。前端在集成跨链桥时，应选择经过审计的成熟方案，并明确向用户提示跨链操作的风险。

Wagmi + Viem 多链配置完整示例

config/wagmi.ts

import { createConfig, http, fallback } from 'wagmi';
import { mainnet, polygon, arbitrum, optimism, base } from 'wagmi/chains';
import { injected, walletConnect } from 'wagmi/connectors';

export const config = createConfig({
  chains: [mainnet, polygon, arbitrum, optimism, base],
  connectors: [
    injected(),
    walletConnect({ projectId: 'YOUR_PROJECT_ID' }),
  ],
  transports: {
    [mainnet.id]: fallback([
      http('https://eth-mainnet.g.alchemy.com/v2/KEY'),
      http(),  // 使用链的默认公共 RPC
    ]),
    [polygon.id]: http('https://polygon-rpc.com'),
    [arbitrum.id]: http('https://arb1.arbitrum.io/rpc'),
    [optimism.id]: http('https://mainnet.optimism.io'),
    [base.id]: http('https://mainnet.base.org'),
  },
});

App.tsx

import { WagmiProvider } from 'wagmi';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { config } from './config/wagmi';

const queryClient = new QueryClient();

function App() {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <MyDApp />
      </QueryClientProvider>
    </WagmiProvider>
  );
}

---

常见面试问题

Q1: 什么是 Chain ID？为什么它很重要？

答案：

Chain ID 是区块链网络的唯一数字标识符（如以太坊主网是 1，Polygon 是 137）。它被写入交易签名中（EIP-155），用于防止跨链重放攻击。如果没有 Chain ID，在以太坊主网上签署的交易可以被拿到另一条 EVM 兼容链上重放执行。前端在发送交易前必须校验当前 Chain ID 是否与目标链一致。

Q2: wallet_switchEthereumChain 和 wallet_addEthereumChain 的区别是什么？

答案：

• wallet_switchEthereumChain：请求钱包切换到已存在的链。只需传入 chainId 参数。如果钱包中没有该链配置，会抛出错误码 4902。
• wallet_addEthereumChain：请求钱包添加一条新链（并切换到该链）。需要传入完整的链配置：chainId、chainName、rpcUrls、nativeCurrency、blockExplorerUrls。

标准做法是先尝试 switch，捕获到 4902 错误后再调用 add。

Q3: 如何在前端管理多链的合约地址？

答案：

推荐使用合约地址映射表：以 Chain ID 为 key，合约名称为二级 key，地址为值。配合一个 getContractAddress(chainId, name) 工具函数，在运行时根据当前链动态获取合约地址。对于使用 Wagmi 的项目，也可以利用 Viem 的 multicall 和 Wagmi 的 useReadContract 直接传入对应链的地址。所有地址应集中管理在一个配置文件中，避免硬编码分散在各组件里。

Q4: 为什么 Optimistic Rollup 从 L2 提现到 L1 需要 7 天？

答案：

Optimistic Rollup 的核心假设是"乐观地"认为所有交易都是有效的，只有在有人提出质疑时才进行验证。7 天挑战期是为了给验证者足够的时间来检查是否存在欺诈交易并提交欺诈证明。如果挑战期内没有人提出质疑，提现交易就被视为有效并在 L1 上执行。这是安全性和用户体验之间的权衡。用户可以通过第三方快速桥（如 Hop、Across）绕过等待期，但需要支付额外手续费。

Q5: L2 的 Gas 费用由哪几部分组成？

答案：

L2 的 Gas 费用由两部分组成：

1. L2 执行费：在 L2 链上执行交易的计算成本，通常非常低。
2. L1 数据费（Data Fee）：将 L2 交易数据（calldata）发布到 L1 以太坊的成本，这是 L2 费用的主要来源。L1 数据费随以太坊主网的 Gas 价格波动。EIP-4844 引入 Blob 数据类型后，L1 数据费大幅下降（降低了 10-100 倍）。

Q6: EVM 兼容链之间有哪些关键差异？

答案：

虽然共享相同的虚拟机和账户模型，但差异包括：

• Chain ID：每条链唯一标识
• Gas Token：ETH、BNB、POL 等
• 区块时间：从 0.25 秒（Arbitrum）到 12 秒（以太坊）不等
• Gas 价格范围和机制：L2 有额外的 L1 data fee
• 合约地址：同一协议在不同链上地址通常不同
• 预编译合约：部分链有自定义预编译合约
• RPC 节点：不同的 RPC 端点和速率限制

前端需要针对这些差异进行适配，特别是合约地址映射和 Gas 估算。

Q7: 跨链桥的 Lock & Mint 模式是如何工作的？

答案：

Lock & Mint 的流程：

1. 用户在源链将资产发送到桥合约，资产被锁定
2. 桥的验证者（或中继器）检测到锁定事件
3. 验证者在目标链上调用桥合约，铸造等量的包装代币
4. 用户在目标链收到包装代币，可自由使用

反向操作（Burn & Release）：用户在目标链销毁包装代币，桥在源链释放原始资产。核心风险在于桥合约的安全性，一旦桥被攻击，锁定的资产可能被盗。

Q8: 前端如何处理用户在错误链上的操作？

答案：

推荐采用"守卫组件"模式：

1. 在页面或功能入口处检查当前 Chain ID 是否匹配目标链
2. 如果不匹配，渲染一个提示 UI，阻止后续操作
3. 提供一键切换按钮，调用 useSwitchChain（Wagmi）或 wallet_switchEthereumChain
4. 切换成功后自动显示正常内容

此外，所有合约交互函数也应在执行前校验 Chain ID，作为双重保险。对于支持多链的 DApp，可以在全局状态中维护"当前选择的链"和"钱包实际连接的链"，两者不一致时触发切换提示。

Q9: Wagmi 中如何配置 RPC fallback？为什么需要 fallback？

答案：

Wagmi 通过 Viem 的 fallback transport 实现多 RPC 自动切换。当主 RPC 节点不可用（超时、限流、宕机）时，自动尝试下一个 RPC，提升 DApp 的可用性。配置方式是将 fallback([http(url1), http(url2), ...]) 作为链的 transport。建议优先使用付费 RPC（Alchemy、Infura）保证稳定性，最后以公共 RPC 兜底。

相关链接

• Chainlist - 所有 EVM 链的 Chain ID 和 RPC 列表
• EIP-155: Simple Replay Attack Protection
• EIP-3085: wallet_addEthereumChain
• EIP-3326: wallet_switchEthereumChain
• EIP-4844: Proto-Danksharding
• Viem Chains 文档
• Wagmi 多链配置
• L2Beat - Layer 2 项目数据和安全性分析
• Ethereum L2 对比