用户要想与以太坊交互就离不开钱包。同样的，为用户提供服务的以太坊 dapp 也必须实现与用户钱包交互的功能。否则，它算不上真正的 dapp，顶多成为一个以太坊数据的查看器。在众多钱包之中，不得不提及 MetaMask。不仅仅因为其是目前使用最多的钱包之一，而且还因为它是不少的 EIP 的参考实现。基本上，只要你的 dapp 可以正常跟 MetaMask 交互，那跟其他钱包交互也不会有多少大问题。因此，本文以 MetaMask 为例，谈谈 dapp 开发者必须了解的知识点。

通过本文，你可以了解到：

• 每个【Connect Wallet】都需要实现的基本功能
• 支持多 provider
• 应用加载后自动连接
• 如何让地址旁出现跟 MM 一样的图标？
• 理解 permission
• 如何添加新网络？
• 如何实现自动切换网络？
• 如何添加新 Token？
• 实现钱包登录的一般思路
• 实现自己的钱包连接界面
• 移动端和桌面端的差异

同时，也请留意本文不会提及的内容：

• 签名，请参见 Ethers.js 非权威开发指南（下）的“签名”一节。
• MM Falsk 相关内容，因为尚未发布稳定版，在这之前一切皆有可能变化。

每个【Connect Wallet】都需要实现的基本功能

当 dapp 被（已装 MM 插件的）桌面浏览器或钱包浏览器加载后，后者会往页面注入钱包实例。此时，开发者所需完成的工作就是：

1. 连上它。
2. 得到当前实例连接到的网络和账户地址。
3. 注册必要的事件处理函数。

以上三件事就是每个【Connect Wallet】必须实现的基本事项，至于其他的，比如说“若当前连接到的网络不符合预期则报错”，都属于锦上添花。这三件事对应下面的三段代码：

// 获得实例
provider = window.ethereum;

// 连接并获得当前账户地址
const accounts = await ethereum.request({ method: "eth_requestAccounts" });
const account = accounts[0];

// 获得当前链接的 chain id
const chainId = await ethereum.request({ method: "eth_chainId" });

// 注册事件处理函数
provider
  .on("connect", async (connectInfo) => {
    // 处理
  })
  .on("disconnect", (error) => {
    // 处理
  })
  .on("accountsChanged", (accounts) => {
    // 处理
  })
  .on("chainChanged", (chainId) => {
    // 处理
  });