一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu

多钱包自动发现以及注入冲突解决方案: 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 (github.com/rainbow-me/…),耗时耗力。

EIP-6963 协议介绍

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

EIP6963ProviderInfo

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

/**
 * 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接口)。

interface EIP6963ProviderDetail {
  info: EIP6963ProviderInfo;
  provider: EIP1193Provider;
}

Announce和Request 事件

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

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

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

    // Announce Event dispatched by a Wallet
    interface EIP6963AnnounceProviderEvent extends CustomEvent {
      type: "eip6963:announceProvider";
      detail: EIP6963ProviderDetail;
    }
    
  • 定义了 EIP6963RequestProviderEvent 接口,并且实现该接口的对象必须是 Event 对象。

    // 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
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 信息。
// 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 具体实现

  • 一些主流钱包已经陆续实现了该协议,如: Metamask, Okx Wallet, Bitget Wallet, Brave, Rainbow, Safeheron Wallet 等。更多钱包见github.com/WalletConne…
  • 如果你的插件钱包需要实现该协议,可以参考Metamask代码github.com/MetaMask/pr…

EIP-6963 测试

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

原文链接:https://juejin.cn/post/7319781980974448675 作者:悖论

(0)
上一篇 2024年1月4日 下午5:09
下一篇 2024年1月5日 上午10:00

相关推荐

发表评论

登录后才能评论