检测 MetaMask 是否安装
- 原始方法:
window.ethereum && ethereum.isMetaMask
- 第三方库
import detectEthereumProvider from '@metamask/detect-provider'; const provider = await detectEthereumProvider(); if (provider) { // From now on, this should always be true: // provider === window.ethereum startApp(provider); // initialize your app } else { console.log('Please install MetaMask!'); }
更换链与增加链
使用场景是如果链配置信息已在 MetaMask 存在,那么切换到所在链。如果链信息不存在,那么唤起 MetaMask 引导用户将链信息保存到 MetaMask 里面。
const param =
{
"chainId": "0x65",
"chainName": "NELOMeta",
"rpcUrls": ["https://rpc.nelo.world"],
"nativeCurrency": {
"name": "NELO Chain",
"symbol": "NELO",
"decimals": 18
},
"blockExplorerUrls": ["https://analysis.nelo.world/"]
}
try {
const reply = await ethereum.request({
method: 'wallet_switchEthereumChain',
params: [{ chainId: param.chainId }]
});
console.log("wallet_switchEthereumChain reply", reply)
} catch (switchError) {
// This error code indicates that the chain has not been added to MetaMask.
console.log("wallet_switchEthereumChain error", switchError)
if (switchError.code === 4902) {
try {
await ethereum.request({ method: 'wallet_addEthereumChain', params: [param] });
} catch (addError) {
// handle "add" error
console.log("wallet_addEthereumChain error", addError)
}
}
// handle other "switch" errors
}
请求 MetaMask 账号权限
MetaMask提供了一个接口 ethereum.isConnected()
。这个接口 不是网站请求到了 MetaMask 的账号权限,而是MetaMask 能正常请求到链所配置的 RPC 接口
请求 MetaMask 账号权限的接口是 ethereum.request({ method: 'eth_requestAccounts' })
。如果 MetaMask 已经给了权限,那么会返回选择的账户。如果 MetaMask 没有给过权限,那么 MetaMask 插件会弹出一个授权的对话框。
总结 MetaMask 使用流程
- 检查 MetaMask 是否安装,如果没有安装,提示用户安装 MetaMask
- 如果已经安装 MetaMask,应用程序每次启动主动与 MetaMask 交互一次。获取链ID,使用接口
await ethereum.request({ method: 'eth_accounts' })
获取 MetaMask 的已选择账户。如果链ID符合预期,返回的账户数目不为空,那么默认用户已经连上了 MetaMask,将选择的账户放置到页面上。如果链 ID 与想要的不一致,放置一个 "Connect" 按钮供用户主动去连接 MetaMask - 用户点击 MetaMask,首先执行链切换,如果切换成功,那么获取账户,如果获取账户成功,那么将账户信息显示到页面上,完成链接。如果切换失败,那么执行链的添加操作,添加成功之后,请求账户权限,将用户选中的账号显示到页面上。
- 注意:唤起 MetaMask 授权账号的时候,必须至少选择一个账户才能进行到下一步。所以我们不要担心已经授权过,但是获取选中账户为空的情况。