0

MetaMask 非权威开发指南

 2 years ago
source link: https://blog.dteam.top/posts/2022-02/metamask-indefinitive-guide.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

MetaMask 非权威开发指南

胡键 Posted at — Feb 26, 2022 阅读 18

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

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

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

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

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

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

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

以上三件事就是每个【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) => {
    // 处理
  });

本文是付费文章，剩余内容请访问以下链接支付之后继续阅读：

付费链接 （已付费：2）

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK