多钱包自动发现以及注入冲突解决方案: EIP-6963调研

以太坊, 区块链

前言

如果浏览器插件钱包需要向 Dapp 提供以太坊 Provider 能力，必须实现 EIP1193 协议。根据 EIP1193 协议描述，要求插件钱包将 Provider 实现注入到 window.ethereum。 这就导致了一些问题。

  • 注入冲突。用户如果安装了多个插件钱包，就会造成 window.ethereum 被重复覆盖，最终值取决于插件钱包的加载顺序。
  • 恶意竞争。为了让自家钱包的 Provider 实现能够成功注入到 window.ethereum, 有些插件钱包会延迟自家 Provider 的注入，甚至freeze window.ethereum对象，使其无法被覆盖。

同时，由于 EIP1193 没有定义钱包 Provider 的元数据描述接口，导致 Dapp 无法统一自动解析 Provider 中的特定信息来区分不同钱包。插件钱包的元数据(图标，名称等)如果要正确被显示，就需要钱包开发者手动将这些信息提交给 Dapp 或者 Provider Discovery Library (https://github.com/rainbow-me/rainbowkit/pull/1166)，耗时耗力。

EIP-6963 协议介绍

EIP-6963（Multi Injected Provider Discovery），就很好地解决了上述这些问题。下面简要概述下该协议的核心内容。

EIP6963ProviderInfo

该协议定义了 一个标准化的 EIP6963ProviderInfo 接口，包含了钱包 Provider 的一些相关元数据。

1
2
3
4
5
6
7
8
9
/**
 * Represents the assets needed to display a wallet
 */
interface EIP6963ProviderInfo {
  uuid:string;
  name:string;
  icon:string;
  rdns:string;
}
  • uuid: 符合 UUID v4.0 规范的钱包本地唯一标识符。
  • name: 人类可读的钱包名称。
  • icon: 指向图像的 URI，应为 96x96px 的最小分辨率的正方形。建议使用 PNG , WebP 或SVG。
  • rdns: 钱包的反向域名标识符，如 io.metamask.wallet

EIP6963ProviderDetail

该协议定义了一个标准化的 EIP6963ProviderDetail 接口，用于公布钱包 Provider 对象(实现EIP1193规范)和钱包 Provider 的一些相关元数据(实现EIP6963ProviderInfo接口)。

1
2
3
4
interface EIP6963ProviderDetail {
  info: EIP6963ProviderInfo;
  provider: EIP1193Provider;
}

Announce和Request 事件

该协议引入了一组 window 事件，通过事件实现 Dapp 与钱包 Provider 的双向通信。

  • Dapp 与钱包 Provider 都需要使用 window.dispatchEvent 函数来触发事件，使用 window.addEventListener 来监听事件。

  • 定义了 EIP6963AnnounceProviderEvent 接口，并且实现该接口的对象必须是CustomEvent 对象。应该使用Object.freeze() 冻结 detail 属性。

    1
    2
    3
    4
    5
    // Announce Event dispatched by a Wallet
    interface EIP6963AnnounceProviderEvent extends CustomEvent {
      type: "eip6963:announceProvider";
      detail: EIP6963ProviderDetail;
    }

  • 定义了 EIP6963RequestProviderEvent 接口，并且实现该接口的对象必须是 Event 对象。

    1
    2
    3
    4
    // Request Event dispatched by a DApp
    interface EIP6963RequestProviderEvent extends Event {
      type: "eip6963:requestProvider";
    }

通信流程

钱包端

  • 钱包通过window.addEventListener监听eip6963:requestProvider事件, 当收到该事件时，应该立即通过 window.dispatchEvent 触发EIP6963AnnounceProviderEvent 事件，将钱包的EIP6963ProviderDetail 信息发送给 Dapp。
  • 由于钱包可能晚于 Dapp 加载完成，导致未能成功监听到 Dapp 发送的eip6963:requestProvider 事件。所以当钱包加载完成时，应该立即通过 window.dispatchEvent 触发一次 EIP6963AnnounceProviderEvent 。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
let info: EIP6963ProviderInfo;
let provider: EIP1193Provider;

const announceEvent: EIP6963AnnounceProviderEvent = new CustomEvent(
  "eip6963:announceProvider",
  { detail: Object.freeze({ info, provider }) }
);

// The Wallet dispatches an announce event which is heard by
// the DApp code that had run earlier
window.dispatchEvent(announceEvent);

// The Wallet listens to the request events which may be
// dispatched later and re-dispatches the `EIP6963AnnounceProviderEvent`
window.addEventListener("eip6963:requestProvider", () => {
  window.dispatchEvent(announceEvent);
});

Dapp端

  • Dapp 应该通过 window.addEventListener 监听 eip6963:announceProvider 事件。并且在页面生命周期内，不得移除该事件监听。
  • 当监听eip6963:announceProvider 事件后，Dapp 才可以通过window.dispatchEvent 发送eip6963:requestProvider 事件，向钱包请求 EIP6963ProviderDetail 信息。
1
2
3
4
5
6
7
8
9
// The DApp listens to announced providers
window.addEventListener(
  "eip6963:announceProvider",
  (event: EIP6963AnnounceProviderEvent) => {}
);

// The DApp dispatches a request event which will be heard by 
// Wallets' code that had run earlier
window.dispatchEvent(new Event("eip6963:requestProvider"));

EIP-6963 具体实现

EIP-6963 测试

如果需要测试钱包是否支持了该协议，可以使用如下 Dapp 测试