## 1. EIP-6963 完整原理 ### 什么是 EIP-6963？ EIP-6963 定义了**多钱包发现机制**（Multi Injected Provider Discovery），解决了 EIP-1193 的 `window.ethereum` 被覆盖的问题。 **核心问题：** ```javascript // 用户安装了 MetaMask 和 Coinbase Wallet window.ethereum = MetaMask; // MetaMask 先注入 window.ethereum = Coinbase; // Coinbase 后注入，覆盖了 MetaMask！ // 结果：MetaMask 不可用 ❌ ``` **EIP-6963 解决方案：** ```javascript // 所有钱包都可以被发现 const providers = [MetaMask, Coinbase, Rabby, ...]; // 用户可以选择使用哪个钱包 ``` --- ## 2. 工作原理 ### 2.1 事件驱动架构 EIP-6963 使用**自定义事件**在 DApp 和钱包之间通信。 ``` DApp → 发送请求事件 (eip6963:requestProvider) ↓ Wallet → 响应公告事件 (eip6963:announceProvider) ↓ DApp → 接收所有钱包信息 ``` --- ### 2.2 核心事件 #### eip6963:requestProvider - DApp 请求钱包列表 ```javascript // DApp 发送请求 window.dispatchEvent(new Event('eip6963:requestProvider')); ``` --- #### eip6963:announceProvider - 钱包公告自己 ```javascript // 钱包响应（每个钱包都会发送） window.addEventListener('eip6963:announceProvider', (event) => { console.log('发现钱包:', event.detail); }); // event.detail 结构： { info: { uuid: 'unique-wallet-id', name: 'MetaMask', icon: 'data:image/svg+xml;base64,...', rdns: 'io.metamask' }, provider: EthereumProvider // EIP-1193 兼容的 Provider } ``` --- ## 3. 数据结构详解 ### EIP6963ProviderInfo ```typescript interface EIP6963ProviderInfo { // 钱包唯一标识符（UUID） uuid: string; // 钱包名称 name: string; // 钱包图标（Base64 编码的 SVG/PNG） icon: string; // 反向域名（Reverse DNS） // 格式：com.example 或 io.metamask rdns: string; } ``` **示例：** ```javascript // MetaMask { uuid: '350670db-19fa-4704-a166-e52e178b59d2', name: 'MetaMask', icon: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIi...', rdns: 'io.metamask' } // Coinbase Wallet { uuid: 'fd20dc42-6b9d-4c8f-9b31-2a7f9b84a3d1', name: 'Coinbase Wallet', icon: 'data:image/png;base64,iVBORw0KGgoAAAANS...', rdns: 'com.coinbase.wallet' } ``` --- ### EIP6963ProviderDetail ```typescript interface EIP6963ProviderDetail { info: EIP6963ProviderInfo; provider: EIP1193Provider; // 兼容 EIP-1193 的 Provider } interface EIP6963AnnounceProviderEvent extends CustomEvent { type: 'eip6963:announceProvider'; detail: EIP6963ProviderDetail; } ``` --- ## 4. 完整代码示例 ### 4.1 DApp 端：发现所有钱包 ```javascript class WalletDiscovery { constructor() { this.providers = new Map(); // uuid -> ProviderDetail this.listeners = new Set(); } // 开始发现钱包 discover() { // 监听钱包公告 window.addEventListener( 'eip6963:announceProvider', this.handleAnnouncement.bind(this) ); // 请求钱包公告自己 window.dispatchEvent(new Event('eip6963:requestProvider')); } // 处理钱包公告 handleAnnouncement(event) { const { info, provider } = event.detail; // 存储 Provider（使用 UUID 去重） if (!this.providers.has(info.uuid)) { this.providers.set(info.uuid, { info, provider }); // 通知监听器 this.notifyListeners(); } } // 获取所有钱包 getProviders() { return Array.from(this.providers.values()); } // 根据 RDNS 查找钱包 getProviderByRdns(rdns) { for (const { info, provider } of this.providers.values()) { if (info.rdns === rdns) { return { info, provider }; } } return null; } // 订阅钱包变化 subscribe(callback) { this.listeners.add(callback); return () => this.listeners.delete(callback); } notifyListeners() { const providers = this.getProviders(); this.listeners.forEach(callback => callback(providers)); } // 清理 cleanup() { window.removeEventListener( 'eip6963:announceProvider', this.handleAnnouncement ); this.providers.clear(); this.listeners.clear(); } } // 使用示例 const discovery = new WalletDiscovery(); discovery.discover(); // 监听钱包列表变化 discovery.subscribe((providers) => { console.log('可用钱包:', providers); providers.forEach(({ info }) => { console.log(`- ${info.name} (${info.rdns})`); }); }); // 获取所有钱包 setTimeout(() => { const providers = discovery.getProviders(); console.log(`发现 ${providers.length} 个钱包`); }, 1000); // 查找特定钱包 const metamask = discovery.getProviderByRdns('io.metamask'); if (metamask) { console.log('找到 MetaMask:', metamask.info.name); } ``` --- ### 4.2 React Hook 封装 ```javascript import { useState, useEffect } from 'react'; export function useWalletDiscovery() { const [providers, setProviders] = useState([]); const [isDiscovering, setIsDiscovering] = useState(true); useEffect(() => { const discoveredProviders = new Map(); // 处理钱包公告 function handleAnnouncement(event) { const { info, provider } = event.detail; // 使用 UUID 去重 if (!discoveredProviders.has(info.uuid)) { discoveredProviders.set(info.uuid, { info, provider }); // 更新状态 setProviders(Array.from(discoveredProviders.values())); } } // 监听公告事件 window.addEventListener('eip6963:announceProvider', handleAnnouncement); // 发送请求 window.dispatchEvent(new Event('eip6963:requestProvider')); // 给钱包一些时间响应 const timer = setTimeout(() => { setIsDiscovering(false); }, 500); // 清理 return () => { window.removeEventListener('eip6963:announceProvider', handleAnnouncement); clearTimeout(timer); }; }, []); return { providers, isDiscovering }; } // 使用示例 function WalletSelector() { const { providers, isDiscovering } = useWalletDiscovery(); const [selectedProvider, setSelectedProvider] = useState(null); const connectWallet = async (providerDetail) => { try { const accounts = await providerDetail.provider.request({ method: 'eth_requestAccounts' }); setSelectedProvider({ ...providerDetail, account: accounts[0] }); } catch (error) { console.error('连接失败:', error); } }; if (isDiscovering) { return

正在发现钱包...

; } if (providers.length === 0) { return

未发现钱包，请安装 MetaMask 或其他钱包

; } return (

选择钱包

{providers.map(({ info, provider }) => ( ))} {selectedProvider && (

已连接: {selectedProvider.info.name}

账户: {selectedProvider.account}

)}

); } ``` --- ### 4.3 钱包端：公告自己 ```javascript // 钱包扩展需要实现的代码 class WalletProvider { constructor() { this.info = { uuid: crypto.randomUUID(), // 生成唯一 ID name: 'My Wallet', icon: 'data:image/svg+xml;base64,...', rdns: 'com.mywallet' }; // 创建 EIP-1193 兼容的 Provider this.provider = this.createProvider(); // 注册监听器 this.setupListeners(); } createProvider() { // 实现 EIP-1193 标准 return { isMyWallet: true, request: async ({ method, params }) => { // 实现 RPC 方法 switch (method) { case 'eth_requestAccounts': return this.requestAccounts(); case 'eth_accounts': return this.getAccounts(); case 'eth_chainId': return this.getChainId(); // ... 其他方法 default: throw new Error(`Unsupported method: ${method}`); } }, on: (event, callback) => { // 事件监听 }, removeListener: (event, callback) => { // 移除监听 }, isConnected: () => true, }; } setupListeners() { // 监听 DApp 的请求 window.addEventListener('eip6963:requestProvider', () => { this.announceProvider(); }); // 立即公告一次（页面加载时） this.announceProvider(); } announceProvider() { // 发送公告事件 const event = new CustomEvent('eip6963:announceProvider', { detail: { info: this.info, provider: this.provider } }); window.dispatchEvent(event); } } // 钱包初始化 const wallet = new WalletProvider(); ``` --- ## 5. 面试重点知识点 ### 高频问题 1：EIP-6963 解决了什么问题？ **标准回答：** **问题：** 在 EIP-1193 中，所有钱包都注入 `window.ethereum`，后注入的会覆盖先注入的。 ```javascript // 问题示例 window.ethereum = MetaMask; // MetaMask 先注入 window.ethereum = Coinbase; // Coinbase 覆盖 MetaMask // 结果：用户只能使用 Coinbase，MetaMask 不可用 ``` **解决方案：** EIP-6963 使用事件机制，让所有钱包都能被发现。 ```javascript // EIP-6963 方案 const providers = [MetaMask, Coinbase, Rabby, ...]; // 所有钱包都可用，用户可以选择 ``` --- ### 高频问题 2：EIP-6963 和 EIP-1193 的关系 **标准回答：** | 特性 | EIP-1193 | EIP-6963 | |------|----------|----------| | **作用** | 定义 Provider 接口 | 定义多钱包发现机制 | | **关系** | 基础协议 | 扩展协议 | | **兼容性** | 单钱包场景 | 多钱包场景 | ```javascript // EIP-6963 返回的是 EIP-1193 兼容的 Provider const { info, provider } = event.detail; // provider 实现了 EIP-1193 的 request() 方法 await provider.request({ method: 'eth_accounts' }); ``` **关键点：** - EIP-6963 不替代 EIP-1193 - EIP-6963 是 EIP-1193 的补充 - Provider 必须同时兼容两个标准 --- ### 高频问题 3：UUID 的作用是什么？ **标准回答：** UUID 用于**去重**和**唯一标识**钱包。 ```javascript const providers = new Map(); // uuid -> ProviderDetail function handleAnnouncement(event) { const { info, provider } = event.detail; // 使用 UUID 去重 if (!providers.has(info.uuid)) { providers.set(info.uuid, { info, provider }); } } ``` **为什么需要 UUID？** 1. **防止重复：** 同一个钱包可能多次发送公告 2. **唯一标识：** name 可能重复，UUID 保证唯一 3. **持久性：** 钱包应该在每次启动时使用相同的 UUID --- ### 高频问题 4：RDNS（反向域名）的作用 **标准回答：** RDNS 是钱包的**唯一身份标识**，类似 Android 的包名。 ```javascript // 格式：反向域名 'io.metamask' // MetaMask 'com.coinbase.wallet' // Coinbase Wallet 'xyz.rabby' // Rabby Wallet ``` **用途：** ```javascript // 1. 查找特定钱包 function getMetaMask(providers) { return providers.find(p => p.info.rdns === 'io.metamask'); } // 2. 记住用户偏好 localStorage.setItem('preferredWallet', 'io.metamask'); // 3. 钱包优先级排序 const priority = ['io.metamask', 'com.coinbase.wallet', 'xyz.rabby']; ``` --- ### 高频问题 5：如何处理多个钱包同时存在？ **标准回答：** 提供**钱包选择 UI**，让用户决定使用哪个。 ```javascript function WalletSelector({ providers }) { // 1. 显示所有可用钱包 return (

{providers.map(({ info, provider }) => ( connectWallet(provider)} /> ))}

); } // 2. 记住用户选择 function rememberChoice(rdns) { localStorage.setItem('lastUsedWallet', rdns); } // 3. 自动连接上次使用的钱包 function autoConnect(providers) { const lastUsed = localStorage.getItem('lastUsedWallet'); const provider = providers.find(p => p.info.rdns === lastUsed); if (provider) { connectWallet(provider.provider); } } ``` --- ### 高频问题 6：如何兼容不支持 EIP-6963 的钱包？ **标准回答：** **降级策略：** 如果没有发现钱包，回退到 `window.ethereum`。 ```javascript function getProvider() { // 1. 优先使用 EIP-6963 const discovery = new WalletDiscovery(); discovery.discover(); const providers = discovery.getProviders(); if (providers.length > 0) { return providers[0].provider; // 或让用户选择 } // 2. 降级到 EIP-1193 if (window.ethereum) { return window.ethereum; } // 3. 未安装钱包 throw new Error('No wallet found'); } ``` --- ## 7. 实际应用场景 ### 7.1 钱包选择模态框 ```javascript function WalletModal({ isOpen, onClose }) { const { providers, isDiscovering } = useWalletDiscovery(); const [connecting, setConnecting] = useState(null); const handleConnect = async (providerDetail) => { setConnecting(providerDetail.info.uuid); try { const accounts = await providerDetail.provider.request({ method: 'eth_requestAccounts' }); // 保存用户选择 localStorage.setItem('preferredWallet', providerDetail.info.rdns); // 连接成功 onConnect(providerDetail, accounts[0]); onClose(); } catch (error) { console.error('连接失败:', error); } finally { setConnecting(null); } }; if (!isOpen) return null; return (

连接钱包

{isDiscovering ? (

正在搜索钱包...

) : providers.length === 0 ? (

未检测到钱包

安装 MetaMask

) : (

{providers.map(({ info, provider }) => ( ))}

)}

); } ``` --- ### 7.2 智能降级策略 ```javascript class SmartWalletConnector { async connect() { // 1. 尝试 EIP-6963 const eip6963Providers = await this.discoverEIP6963(); if (eip6963Providers.length > 0) { return this.selectProvider(eip6963Providers); } // 2. 降级到 EIP-1193 if (window.ethereum) { return window.ethereum; } // 3. 引导用户安装 this.showInstallGuide(); throw new Error('No wallet installed'); } async discoverEIP6963() { return new Promise((resolve) => { const providers = []; window.addEventListener('eip6963:announceProvider', (event) => { providers.push(event.detail); }); window.dispatchEvent(new Event('eip6963:requestProvider')); // 等待 500ms 收集所有响应 setTimeout(() => resolve(providers), 500); }); } selectProvider(providers) { // 优先使用上次选择的钱包 const preferred = localStorage.getItem('preferredWallet'); if (preferred) { const found = providers.find(p => p.info.rdns === preferred); if (found) return found.provider; } // 否则显示选择界面 return this.showWalletSelector(providers); } } ``` --- ### 7.3 钱包优先级排序 ```javascript // 根据用户偏好排序钱包 function sortProviders(providers) { // 定义优先级（可以让用户自定义） const priority = [ 'io.metamask', 'com.coinbase.wallet', 'xyz.rabby', 'app.phantom', ]; return providers.sort((a, b) => { const indexA = priority.indexOf(a.info.rdns); const indexB = priority.indexOf(b.info.rdns); // 未在优先级列表中的排在后面 if (indexA === -1) return 1; if (indexB === -1) return -1; return indexA - indexB; }); } // 使用 const sortedProviders = sortProviders(providers); ``` --- ## 8. 安全注意事项 ### 8.1 验证 Provider 完整性 ```javascript function validateProvider(providerDetail) { const { info, provider } = providerDetail; // 验证必需字段 if (!info.uuid || !info.name || !info.rdns) { throw new Error('Invalid provider info'); } // 验证 Provider 接口 if (typeof provider.request !== 'function') { throw new Error('Invalid provider interface'); } // 验证 UUID 格式 const uuidPattern = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i; if (!uuidPattern.test(info.uuid)) { throw new Error('Invalid UUID format'); } return true; } ``` --- ### 8.2 防止恶意钱包 ```javascript // 维护可信钱包白名单 const TRUSTED_WALLETS = new Set([ 'io.metamask', 'com.coinbase.wallet', 'xyz.rabby', 'app.phantom', ]); function filterTrustedProviders(providers) { return providers.filter(({ info }) => { if (TRUSTED_WALLETS.has(info.rdns)) { return true; } // 显示警告 console.warn(`Unknown wallet: ${info.name} (${info.rdns})`); return false; // 或让用户决定 }); } ``` --- ### 8.3 处理钓鱼攻击 ```javascript // 显示钱包来源信息 function WalletOption({ info }) { return (

{info.name} {info.rdns} {/* 显示 RDNS */}

{!isTrustedWallet(info.rdns) && ( ⚠️ 未验证 )}

); } ``` --- ## 9. 模拟面试问答 ### Q: 为什么不直接让钱包注入到不同的 window 属性？ **A:** ```javascript // 这样做的问题： window.metamask = MetaMaskProvider; window.coinbase = CoinbaseProvider; window.rabby = RabbyProvider; ``` **问题：** 1. **命名冲突：** 不同钱包可能选择相同的名字 2. **不可扩展：** DApp 需要硬编码每个钱包的属性名 3. **污染全局：** 向 window 添加大量属性 **EIP-6963 优势：** - 统一的事件机制 - 无命名冲突 - 可扩展（新钱包无需修改 DApp 代码） --- ### Q: EIP-6963 如何处理钱包动态安装/卸载？ **A:** 钱包安装后应该立即发送公告事件。 ```javascript // 钱包安装时 chrome.runtime.onInstalled.addListener(() => { // 向所有已打开的标签页发送公告 chrome.tabs.query({}, (tabs) => { tabs.forEach((tab) => { chrome.tabs.sendMessage(tab.id, { type: 'ANNOUNCE_PROVIDER' }); }); }); }); ``` DApp 端需要持续监听： ```javascript // DApp 需要一直监听新钱包 window.addEventListener('eip6963:announceProvider', handleAnnouncement); // 不要 removeListener，除非组件卸载 ``` --- ### Q: 你的项目如何实现钱包选择？ **A:** 1. 使用 EIP-6963 发现所有钱包 2. 显示钱包选择 UI（带图标和名称） 3. 记住用户上次选择（localStorage） 4. 降级到 window.ethereum（兼容旧钱包） 5. 引导未安装钱包的用户 --- ## 9. 总结：必须记住的点 1. **核心事件**：`eip6963:requestProvider`（请求）和 `eip6963:announceProvider`（公告） 2. **去重机制**：使用 UUID 防止重复 3. **身份标识**：RDNS 是钱包的唯一身份 4. **兼容性**：EIP-6963 不替代 EIP-1193，是补充 5. **降级策略**：回退到 `window.ethereum` 6. **安全原则**：验证 Provider、维护白名单 --- ## 相关资源 - [EIP-6963 官方规范](https://eips.ethereum.org/EIPS/eip-6963) - [EIP-1193 规范](https://eips.ethereum.org/EIPS/eip-1193) - [MIPD (Multi Injected Provider Discovery) 库](https://github.com/wevm/mipd) - [示例实现](https://github.com/MetaMask/providers/tree/main/src) --- ## 练习题 1. 实现一个完整的钱包发现和选择系统 2. 写一个智能降级逻辑（EIP-6963 → EIP-1193 → 引导安装） 3. 实现钱包优先级排序功能 4. 添加钱包白名单验证 5. 处理动态安装/卸载钱包的场景 --- ## 对比总结 ### EIP-1193 vs EIP-6963 | 特性 | EIP-1193 | EIP-6963 | |------|----------|----------| | **发布时间** | 2018 | 2023 | | **解决问题** | 统一 Provider 接口 | 多钱包共存 | | **注入方式** | `window.ethereum` | 事件通信 | | **多钱包** | ❌ 会被覆盖 | ✅ 全部可见 | | **兼容性** | 所有钱包 | 新钱包 | | **使用场景** | 单钱包环境 | 多钱包环境 | **建议：** - 优先使用 EIP-6963 - 降级到 EIP-1193（兼容老钱包） - 两者结合使用效果最佳