Next.js+Web3环境下MetaMask与TrustWallet连接冲突问题

1. 精准识别并绑定对应钱包提供商 #

MetaMask和TrustWallet会在浏览器中注入window.ethereum对象，但各自带有唯一标识字段：

• MetaMask：window.ethereum.isMetaMask
• TrustWallet：window.ethereum.isTrust

通过检查这些标识，可确保点击对应按钮时仅唤起目标钱包：

MetaMask连接逻辑 #

async function connectMetaMask() {
  // 仅当检测到MetaMask时执行连接
  if (window.ethereum?.isMetaMask) {
    try {
      const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
      console.log('MetaMask连接成功', accounts);
      // 后续业务逻辑处理
    } catch (err) {
      console.error('MetaMask连接失败', err);
    }
  } else {
    alert('请安装MetaMask钱包');
  }
}

TrustWallet连接逻辑 #

async function connectTrustWallet() {
  // 仅当检测到TrustWallet时执行连接
  if (window.ethereum?.isTrust) {
    try {
      const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
      console.log('TrustWallet连接成功', accounts);
      // 后续业务逻辑处理
    } catch (err) {
      console.error('TrustWallet连接失败', err);
    }
  } else {
    alert('请安装TrustWallet钱包');
  }
}

2. 初始化Web3实例时指定对应Provider #

避免Web3自动选择冲突的Provider，初始化时明确传入目标钱包的Provider：

// 初始化MetaMask专属Web3实例
function getMetaMaskWeb3() {
  return window.ethereum?.isMetaMask ? new Web3(window.ethereum) : null;
}

// 初始化TrustWallet专属Web3实例
function getTrustWalletWeb3() {
  return window.ethereum?.isTrust ? new Web3(window.ethereum) : null;
}

3. 清理LocalStorage冗余数据 #

连接钱包前，可针对性清理不属于当前钱包的存储数据（需根据实际存储键名调整规则）：

function cleanNonMetaMaskStorage() {
  Object.keys(localStorage).forEach(key => {
    // 保留MetaMask相关键，删除TrustWallet及无关键
    if (key.includes('trust') || !key.includes('metamask') && !key.includes('ethereum')) {
      localStorage.removeItem(key);
    }
  });
}

// 在MetaMask连接前调用清理
async function connectMetaMask() {
  cleanNonMetaMaskStorage();
  // 后续连接逻辑...
}

4. 监听钱包切换事件（可选） #

为防止用户手动切换钱包导致状态混乱，可添加事件监听并验证当前钱包标识：

if (window.ethereum?.isMetaMask) {
  window.ethereum.on('accountsChanged', (accounts) => {
    // 仅处理MetaMask的账户变化
    if (window.ethereum.isMetaMask) {
      console.log('MetaMask账户更新', accounts);
      // 更新应用状态
    }
  });
}

核心原理 #

两个钱包共享window.ethereum注入点，但通过各自的唯一标识字段可精准区分请求对象，避免跨钱包的请求拦截，确保按钮与钱包的一一对应。

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