MetaMask 作为最流行的去中心化钱包，相关中文资料却很少，自己啃着英文文档做了一个 Dapp，总结记录一下。

检测

首先要检测浏览器上 MetaMask 扩展是否已经安装，如果已安装，会在 window 下面挂载 ethereum 对象

const isMetaMaskInstalled = () => {
    const { ethereum } = window
    return Boolean(ethereum && ethereum.isMetaMask)
}

如果返回true就是安装了 MetaMask，然后就可以进行连接了。

连接

连接需要调用eth_requestAccounts这个 RPC 方法

const connect = async () => {
  try {
    await ethereum.request({ method: 'eth_requestAccounts' });
  } catch (error) {
    console.error(error);
  }
};

此时就会看到 MetaMask 已经被拉起来，确认授权就可以进行接下来的操作。

调用智能合约

调用合约我使用的是 web3.js，拿到 ABI 文件和合约地址，调用 web3 的 API 即可

import Web3 from 'web3'

// 创建新的合约实例，需要提供ABI和合约地址
let MyContract = new web3.eth.Contract(ABI, CONTRACT_ADDRESS)
// 调用合约，myMethod即为ABI中声明的方法
MyContract.methods
  .myMethod(params)
  .send(params)
  .then(res => {
    console.log(res)
  })
  .catch(err => {
    console.log(err)
  })

这是一个简单的例子，web3 还有很多高级用法可以参考中文文档。

在手机上使用

MetaMask 有提供手机版 app，实际上就是一个内置了 MetaMask 扩展的浏览器，把页面在这个浏览器里打开，就可以和桌面浏览器一样使用 MetaMask 的各种功能。

问题是让用户在手机上手动打开 app 并输入冗长的链接体验很不好，于是官方提供了一个叫做深度链接（deeplinks）的东西，可以一键拉起 MetaMask app 跳转到指定页面。深度链接的规则如下

https://metamask.app.link/dapp/example.com

example.com 就是我们的页面。

在手机的任意浏览器点开这个链接，就会拉起 MetaMask app 跳转到 https://example.com ，注意一定要是 https 协议。如果没有安装 MetaMask app 怎么办呢？官方也想到了，没安装会自动跳转到应用商店的下载页，同时支持 App Store 和 Google Play。不过 MetaMask 并没有上架中国区，国内也用不了 Google Play，国内用户其实是点了个寂寞。