Vue项目中用ethers v6.11选择连接多Web3浏览器钱包的方法咨询

1. 核心原理：不同钱包的全局注入差异 #

主流钱包会在浏览器全局window对象中注入各自的以太坊提供者，但部分钱包会覆盖window.ethereum（比如MetaMask），导致你只能获取到单个钱包。现在推荐遵循EIP-6963标准来发现所有可用钱包，同时兼容手动检测特定钱包的方式。

2. 具体实现方案 #

方法一：基于EIP-6963自动发现所有钱包（推荐） #

EIP-6963是多钱包发现的标准规范，钱包会主动广播自身信息，dApp可通过监听事件获取所有可用钱包的提供者。

<script setup>
import { ethers } from 'ethers';
import { ref, onMounted } from 'vue';

const availableWallets = ref([]);
const selectedWallet = ref(null);
const connectedAccount = ref('');

// 监听并收集所有可用钱包
const listenForWallets = () => {
  // 先获取已注入的钱包提供者
  if (window.ethereum?.providers) {
    window.ethereum.providers.forEach(provider => {
      if (provider.info) {
        availableWallets.value.push({
          id: provider.info.uuid,
          name: provider.info.name,
          icon: provider.info.icon,
          provider: provider
        });
      }
    });
  }

  // 监听新钱包的广播事件
  window.addEventListener('eip6963:announceProvider', (event) => {
    const { info, provider } = event.detail;
    const isExist = availableWallets.value.some(wallet => wallet.id === info.uuid);
    if (!isExist) {
      availableWallets.value.push({
        id: info.uuid,
        name: info.name,
        icon: info.icon,
        provider: provider
      });
    }
  });
};

// 连接选中的钱包
const connectSelectedWallet = async () => {
  if (!selectedWallet.value) return;

  try {
    // 请求钱包授权
    await selectedWallet.value.provider.request({ method: 'eth_requestAccounts' });
    // 用ethers v6包装钱包提供者
    const ethersProvider = new ethers.BrowserProvider(selectedWallet.value.provider);
    const signer = await ethersProvider.getSigner();
    connectedAccount.value = await signer.getAddress();
    console.log('连接成功，账户:', connectedAccount.value);
  } catch (error) {
    console.error('连接失败:', error);
  }
};

onMounted(() => {
  listenForWallets();
});
</script>

<template>
  <div>
    <select v-model="selectedWallet">
      <option value="">请选择钱包</option>
      <option v-for="wallet in availableWallets" :key="wallet.id" :value="wallet">
        {{ wallet.name }}
      </option>
    </select>
    <button @click="connectSelectedWallet" :disabled="!selectedWallet">连接钱包</button>
    <div v-if="connectedAccount">已连接账户: {{ connectedAccount }}</div>
  </div>
</template>

方法二：手动检测特定钱包（兼容旧版钱包） #

如果部分钱包不支持EIP-6963，可以通过检测钱包专属的全局对象来识别：

// 替换上述listenForWallets函数为以下内容
const detectWalletsManually = () => {
  const wallets = [];

  // 检测MetaMask
  if (window.ethereum && window.ethereum.isMetaMask) {
    wallets.push({ name: 'MetaMask', provider: window.ethereum });
  }

  // 检测Trust Wallet
  if (window.trustwallet || (window.ethereum && window.ethereum.isTrustWallet)) {
    const provider = window.trustwallet || window.ethereum;
    wallets.push({ name: 'Trust Wallet', provider: provider });
  }

  // 检测XDEFI
  if (window.xfi) {
    wallets.push({ name: 'XDEFI', provider: window.xfi.ethereum });
  }

  availableWallets.value = wallets;
};

// 在onMounted中调用：detectWalletsManually();

3. 关键注意事项 #

• 避免直接依赖window.ethereum：多个钱包共存时，该对象可能被最后注入的钱包覆盖，导致无法获取其他钱包。
• 统一使用标准方法：所有合规钱包都支持eth_requestAccounts授权方法，无需针对单个钱包写特殊逻辑。
• ethers v6适配：使用BrowserProvider替代旧版的Web3Provider来包装钱包提供者，再通过getSigner()获取账户签名对象。

内容的提问来源于stack exchange，提问作者user2171002