如何修复MetaMask提示window.web3替换为window.ethereum的警告？

问题根源 #

你的代码使用了MetaMask已废弃的web3.currentProvider兼容层，同时账户获取方式不符合现代EIP-1193标准，导致警告弹出且账户无法正常显示。

完整修复后的app.js代码 #

App = {
  loading: false,
  contracts: {},
  account: '',

  load: async () => {
    console.log("app loading") // 添加加载状态日志
    await App.loadWeb3()
    await App.loadAccount()
    // await App.loadContract() // 后续实现合约加载时可启用
    await App.render()
    // 监听账户切换事件
    App.listenForAccountChanges()
  },

  loadWeb3: async () => {
    // 优先使用现代EIP-1193标准的window.ethereum
    if (window.ethereum) {
      App.web3Provider = window.ethereum
      try {
        // 请求账户授权（替代废弃的ethereum.enable()）
        await window.ethereum.request({ method: 'eth_requestAccounts' })
      } catch (error) {
        console.error('用户拒绝账户授权:', error)
        window.alert("请授权账户以继续使用")
      }
    } 
    // 兼容旧版dApp浏览器（可选，无需支持可移除）
    else if (window.web3) {
      App.web3Provider = window.web3.currentProvider
      console.warn('当前使用旧版web3兼容层，建议升级浏览器或MetaMask')
    } 
    // 非以太坊浏览器提示
    else {
      console.log('未检测到以太坊浏览器，请安装MetaMask！')
      window.alert("请安装MetaMask以继续使用")
    }
    // 初始化Web3实例（基于现代provider）
    if (App.web3Provider) {
      window.web3 = new Web3(App.web3Provider)
    }
  },

  loadAccount: async () => {
    // 通过EIP-1193 API获取当前账户
    const accounts = await window.ethereum.request({ method: 'eth_accounts' })
    App.account = accounts[0] || ''
    console.log('当前账户:', App.account)
  },

  render: async () => {
    // 避免重复加载
    if (App.loading) return
    App.loading = true

    // 更新页面账户显示
    document.getElementById('account').textContent = App.account

    // 切换加载状态与内容显示
    document.getElementById('loader').style.display = 'none'
    document.getElementById('content').style.display = 'block'

    App.loading = false
  },

  listenForAccountChanges: () => {
    // 监听MetaMask账户切换事件
    window.ethereum.on('accountsChanged', async (accounts) => {
      App.account = accounts[0] || ''
      console.log('账户已切换:', App.account)
      await App.render()
    })
  }
}

// 页面加载完成后初始化App
$(window).on('load', () => {
  App.load()
})

关键修复点说明 #

• 移除废弃API: 彻底替换web3.currentProvider为window.ethereum，消除MetaMask警告。
• 现代账户授权: 使用eth_requestAccounts替代旧的ethereum.enable()，符合最新EIP-1193标准。
• 正确获取账户: 通过eth_accounts API获取账户，替代已废弃的web3.eth.accounts[0]。
• 账户切换监听: 添加accountsChanged事件监听，确保用户切换账户后页面实时更新。
• 加载状态反馈: 添加app loading日志，修复页面加载状态的显示逻辑。
• 代码简化: 重构web3初始化逻辑，优先使用现代API，兼容逻辑后置。

额外提示 #

1. 确保Web3.js版本为最新，旧版本可能不支持EIP-1193标准。
2. 测试时确认MetaMask已连接到目标网络（主网/测试网）。
3. 后续加载智能合约时，可基于App.web3Provider使用Truffle Contract库初始化。

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