钱包唤起时的混乱连接钱包是进入 Web3 世界的关键一步,Web3 用户经常需要在一些 DApp 网站上连接钱

作者:ZAN Team

原用标题:Web3 新手系列:点击 MetaMask 误唤起其他钱包?钱包冲突解决方案现状

封面:Photo by Shubham’s Web3 on Unsplash

钱包唤起时的混乱

连接钱包是进入 Web3 世界的关键一步,Web3 用户经常需要在一些 DApp 网站上连接钱包。但是,仅仅是这个简单的动作,也可能对用户造成严重的不便。

连接钱包

想象一下这样一个场景:一位新入门的 Web3 用户(出于好奇,他安装了许多个插件钱包),访问了某个 DApp 网站,并且想要使用自己的浏览器插件钱包来连接它,但是当他们点击网站提供的 “Connect Wallet” 按钮,并选择某个钱包以便想使用它来连接 DApp 时,可能会发现弹出的钱包并不是自己选择的。这很可能会让他感到慌乱和窒息,以为是自己的电脑中了病毒,所以才执行了自己意料之外的操作。

区块链钱包是连接区块链的重要入口,而为了占据这个入口,各个钱包使用了它们能想到的各种方式。其中最让 DApp 开发者以及 DApp 用户头疼的要数各钱包对全局变量的篡改。

在当前的浏览器钱包实现逻辑中,都有通过向浏览器注入全局变量来暴露钱包提供的功能(例如以太坊平台的钱包会将其提供的功能注入到 window.ethereum  上),以便 DApp 可以调用钱包提供的方法来与之交互。

只是,由于很多钱包都会将自己注入到同一个 window.ethereum 变量上,就导致在后面注册的钱包会覆盖之前注册的钱包,以至于只能通过这种方式只能唤起最后注册的那个。

有时候 DApp 用户为了可以正常使用自己想要用的钱包,不得不临时将其他钱包插件禁用,或者直接只安装某一个钱包。这样一来,反而与钱包开发者最初的想法大相径庭了。并且新钱包哪怕做的更出色,也很难吸引到已经使用其他钱包的用户。

有朋友可能奇怪,为什么一定要注入到同一个变量中呢?假设有两个钱包:A 和 B,其实只要 A 将自己注入到 window.a,B 将自己注入到 window.b,想要唤起哪个钱包,就调用其对应的对象中提供的方法,就不会发生上述想要调用 A 却反而将 B 唤起的问题。这样确实可以解决竞争问题,但是,问题在于,如此以来,假如 DApp 将要支持多个钱包连接,就必须将开发者想要适配的所有钱包名称全部预先定义在代码中,并且在用户选中某个钱包时,调用该钱包的相关方法。导致相关代码维护起来相当麻烦。而统一将钱包注入到同一个对象上,则可以免于这个麻烦。

解决方案

为了脱离上述的两难困境,社区中有两个相似的标准。

以太坊的解决方案:EIP-6963

以太坊社区在 2023 年 5 月份提出了 EIP-6963 提案。

其中的基本逻辑很简单,就是舍弃全局变量,转而使用约定的事件,来解决钱包注册与发现的问题。
具体来说,插件钱包加载成功后,触发统一的 eip6963:announceProvider  事件,通知 DApp 有新的钱包可用。而 DApp 则通过监听此事件,来得知自己目前可用的钱包有哪些。

这样,通过一套抽象的事件监听逻辑,避免了直接使用全局变量所造成的问题,且能够自动发现目前用户环境中可用的钱包。如此一来,两难自解。

社区标准:Wallet Standard

EIP-6963 是以太坊生态标准,但是不止以太坊,其他链平台也会有类似的问题。例如 Solana 链的钱包,普遍会将自己注入到 window.solana  变量上,同样会造成竞争情况。

那么可否让 Solana 生态也实现这个标准呢?虽然 EIP-6963 只是为了解决以太坊生态中的钱包发现问题,但是其中所蕴含的思路其实可以套用在所有链平台。那么,我们能否再进一步,提供一套通用的标准,让所有区块链平台的钱包和 DApp 实现,让所有链平台的开发者和用户都能享受到 EIP-6963 所提供的便利?理论上是完全没有问题的,而且已经有开发者在这么做了,也就是 Wallet Standard

Wallet Standard 所做的核心工作,在于提供了两个函数:registerWallet  和 getWallets,前者用于钱包,后者用于 DApp。

钱包调用 registerWallet,传入一个钱包对象,这个对象上封装了钱包提供的功能(例如 Connect 方法,用于连接钱包)。函数内部会先触发一个 RegisterWalletEvent 事件,事件的参数其实是一个回调函数,用于让 DApp 监听到 RegisterWalletEvent 事件时调用,而这个回调函数实际上会将 wallet 对象传入,于是 DApp 就可以拿到钱包对象引用,也就可以与钱包进行交互了。

export function registerWallet(wallet: Wallet): void {    const callback: WindowRegisterWalletEventCallback = ({ register }) => register(wallet);    try {        (window as WalletEventsWindow).dispatchEvent(new RegisterWalletEvent(callback));    } catch (error) {        console.error('wallet-standard:register-wallet event could not be dispatched\n', error);    }    try {        (window as WalletEventsWindow).addEventListener('wallet-standard:app-ready', ({ detail: api }) =>            callback(api));    } catch (error) {        console.error('wallet-standard:app-ready event listener could not be added\n', error);    }}

DApp 开发者没有必要自己来写监听、接收钱包对象的代码,这部分也已经被 Wallet Standard 内置到 getWallets  当中。但是,getWallets 只是监听了事件,具体要怎样处理事件,还是需要开发者考虑。例如获取到的 Wallets 放到哪里?有些钱包在 DApp 加载前就已经加载,而另一些钱包可能在之后才加载,这些钱包的状态如何维护?Wallet Standard 针对以上细节问题,同时提供了 @wallet-standard/react  包,开发者直接使用它提供的 React Hooks 就可以获取到想要的数据,包括钱包列表、当前连接的钱包、钱包提供的方法等。

Wallet Standard Features

除了最基本的获取 Wallet 对象外,Wallet Standard 也定义了一些 Features 格式。

实际上,钱包都具有一些最基本的功能,例如连接、监听钱包事件等。Wallet Standard 提供了 standard:connectstandard:events  等 Features,钱包供应商实现这些特性后,DApp 可以直接根据这些值来判断钱包是否支持某些操作。

上面提到的 "standard:*" 是它内置定义的特性,实际上它们的值并没有特别强硬的要求,所以可以随意扩展。不同的链平台也会有其独特的特性,例如 Solana,直接约定 "solana:*" 即可。Solana 平台常见的 Features 包括 solana:signTransactionsolana:signMessage  等。

Wallet Standard 现状

目前实现了 Wallet Standard 标准的项目实际上并不多,值得一提的有 Solana 和 Sui。

在 Ant Design Web3 的 Solana 适配器中,也支持适配了 Wallet Standard 的钱包的自动检测,开发者基本只需要通过一个 autoAddRegisteredWallets  开启即可,不需要配置一大堆的钱包元数据,开发体验和用户使用体验直线上升。

ZAN.TOP 连接钱包的逻辑在早期同样遇到相同的问题,不过现在,得益于 Ant Design Web3 提供的配置,很轻松就适配了 EIP-6963 标准。大家在 https://zan.top/personal/account?chInfo=ch_wxdyh  绑定地址时应该已经体验到这一点了。

各区块链生态的实现

目前各个区块链平台对 Wallet Standard(或 EIP-6963)标准的态度并不相同,这里举几个例子:

Bitcoin

比特币目前为止似乎没有类似的标准,有一个实现了 Wallet Standard 标准的项目,但是并没有引起太多关注,现在也很久没有提交新的代码。

目前开发者只能手动维护状态,或者使用一些开发包来辅助工作。例如在 Ant Design Web3 中的 Bitcoin 适配器实现中,针对不同的钱包,会从不同的全局变量上获取,并存到统一的状态中。这其实是等于库开发者将繁琐的状态维护工作接手了。而且,这仅仅解决了钱包冲突问题,无法自动感知可用钱包的问题依然存在。

Ethereum

以太坊平台已经有了 EIP-6963 标准,相关库和钱包也大多提供了支持。

Solana

如上文,官方提供了实现:https://github.com/solana-labs/wallet-standard

Sui

Sui 目前已经对 Wallet Standard 提供了实现,在官方文档上可以找到使用方法:https://docs.sui.io/standards/wallet-standard

DApps 开发库的支持

wagm

iwagmi 通过 mipd (https://github.com/wevm/mipd) 库对 EIP-6963 提供了支持,具体方式可以查看 wagmi 的文档。

RainbowKit

RainbowKit(https://www.rainbowkit.com/)内部逻辑基于 wagmi,所以也已经对 EIP-6963 提供了内置支持。

Ant Design Web3

Ant Design Web3(https://web3.ant.design/) 的 Ethereum 和 Solana 适配器对这两个标准都进行了非常好的支持,并且开发者开启起来非常便携。

对以太坊 DApp 开发者而言,只需要添加 eip6963 配置即可,注意其中与 EIP-6963 相关的在 23-25 行:App.tsx

import { ConnectButton, Connector } from '@ant-design/web3';import {  MetaMask,  OkxWallet,  WagmiWeb3ConfigProvider,} from '@ant-design/web3-wagmi';import { QueryClient } from '@tanstack/react-query';import { createConfig, http } from 'wagmi';import { mainnet } from 'wagmi/chains';
const queryClient = new QueryClient();
const config = createConfig({ chains: [mainnet], transports: { [mainnet.id]: http(), },});
const App: React.FC = () => { return ( <WagmiWeb3ConfigProvider eip6963={{ autoAddInjectedWallets: true, }} ens wallets={[ MetaMask(), OkxWallet(), ]} config={config} queryClient={queryClient} > <Connector modalProps={{ mode: 'simple' }}> <ConnectButton quickConnect /> </Connector> </WagmiWeb3ConfigProvider> );};
export default App;

而如果你是 Solana 生态的 DApp 开发者,方式也是类似的。它提供了 autoAddRegisteredWallets 属性:App.tsx

import React from 'react';import { ConnectButton, Connector } from '@ant-design/web3';import {  OKXWallet,  PhantomWallet,  SolanaWeb3ConfigProvider,  WalletConnectWallet,} from '@ant-design/web3-solana';
const App: React.FC = () => { return ( <SolanaWeb3ConfigProvider autoAddRegisteredWallets balance wallets={[PhantomWallet(), OKXWallet(), WalletConnectWallet()]} walletConnect={{ projectId: YOUR_WALLET_CONNECT_PROJECT_ID }} > <Connector modalProps={{ mode: 'simple', group: false }}> <ConnectButton quickConnect /> </Connector> </SolanaWeb3ConfigProvider> );};
export default App;

总结

EIP-6963 和 Wallet Standard 可以极大改善用户连接钱包的体验,降低新钱包供应商的准入门槛。希望以后能有更多链平台以及钱包、DApp 开发者可以提供或实现相关标准,这有利于 Web3 向着更好的方向发展。

免责声明:作为区块链信息平台,本站所发布文章仅代表作者及嘉宾个人观点,与 Web3Caff 立场无关。文章内的信息仅供参考,均不构成任何投资建议及要约,并请您遵守所在国家或地区的相关法律法规。