MetaMask与Coinbase Wallet兼容问题：window.ethereum.providers未定义

提供的React代码用于分别连接MetaMask和Coinbase Wallet，但运行时window.ethereum.providers为undefined，导致功能失效，且不想使用Web3Modal的弹窗选择方式。

问题根源在于并非所有钱包都会暴露providers数组——当仅安装单个钱包时，window.ethereum直接对应该钱包的provider，不会生成providers集合。以下是调整后的健壮实现：

1. 连接MetaMask的修正逻辑 #

• 优先检查window.ethereum.isMetaMask是否为true（单个MetaMask安装时的情况）
• 若存在providers数组，再从中筛选MetaMask provider
• 增加错误处理，避免找不到provider时报错

2. 连接Coinbase Wallet的修正逻辑 #

• 优先检查window.ethereum.isCoinbaseWallet
• 其次检查providers数组
• 最后检查window.coinbaseWalletExtension（Coinbase Wallet的直接暴露方式）
• 同样增加错误提示

export default function Home() {
  const connectMetamask = async () => {
    let walletProvider;
    // 单个MetaMask安装时直接使用window.ethereum
    if (typeof window.ethereum !== "undefined") {
      if (window.ethereum.isMetaMask) {
        walletProvider = window.ethereum;
      } 
      // 多个钱包共存时从providers查找
      else if (window.ethereum.providers?.length) {
        walletProvider = window.ethereum.providers.find(x => x.isMetaMask);
      }
    }

    if (walletProvider) {
      try {
        await walletProvider.request({ method: "eth_requestAccounts" });
      } catch (err) {
        console.error("MetaMask连接失败:", err);
        alert("MetaMask连接失败，请确保已安装并启用钱包");
      }
    } else {
      alert("未检测到MetaMask，请先安装MetaMask钱包");
    }
  };

  const connectCoinbaseWallet = async () => {
    let walletProvider;
    if (typeof window.ethereum !== "undefined") {
      // 单个Coinbase Wallet安装时
      if (window.ethereum.isCoinbaseWallet) {
        walletProvider = window.ethereum;
      } 
      // 多个钱包共存时从providers查找
      else if (window.ethereum.providers?.length) {
        walletProvider = window.ethereum.providers.find(x => x.isCoinbaseWallet);
      }
    }
    // 直接检查Coinbase Wallet的专属暴露对象
    if (!walletProvider && window.coinbaseWalletExtension) {
      walletProvider = window.coinbaseWalletExtension;
    }

    if (walletProvider) {
      try {
        await walletProvider.request({ method: "eth_requestAccounts" });
      } catch (err) {
        console.error("Coinbase Wallet连接失败:", err);
        alert("Coinbase Wallet连接失败，请确保已安装并启用钱包");
      }
    } else {
      alert("未检测到Coinbase Wallet，请先安装Coinbase Wallet");
    }
  };

  const MetaMaskButton = () => (
    <button onClick={connectMetamask}>
      连接MetaMask
    </button>
  );

  const CoinbaseWalletButton = () => (
    <button onClick={connectCoinbaseWallet}>
      连接Coinbase Wallet
    </button>
  );

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <MetaMaskButton />
      <CoinbaseWalletButton />
    </div>
  );
}

• 兼容单钱包和多钱包共存场景，不再依赖providers数组的存在
• 增加错误捕获和用户提示，提升体验
• 针对Coinbase Wallet的专属暴露方式做了兼容
• 优化组件命名，符合React组件命名规范

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