Thirdweb DApp点击MetaMask连接按钮唤起Coinbase钱包问题排查

出现点击MetaMask连接按钮唤起Coinbase钱包的问题，核心是钱包注入识别逻辑冲突，具体原因如下：

• 未显式配置Thirdweb支持的钱包列表：当前代码中ThirdwebProvider仅传入了链ID参数，没有声明supportedWallets列表，Thirdweb会走默认的自动注入检测逻辑。Coinbase浏览器插件默认开启MetaMask兼容模式，会主动注入window.ethereum对象并将自身的isMetaMask属性标记为true，旧版本Thirdweb的MetaMask连接hook未做严格的钱包唯一标识校验，会直接误识别Coinbase为MetaMask唤起。
• 钱包注入顺序冲突：如果浏览器同时安装MetaMask和Coinbase钱包插件，Coinbase若优先于MetaMask加载，会直接抢占window.ethereum注入位，覆盖MetaMask的注入对象，此时调用MetaMask连接方法自然只会唤起Coinbase。
• 次要逻辑问题：当前代码中WalletConnect按钮错误引用了Coinbase的图标资源，会造成用户识别混淆；且连接/断开操作后没有自动关闭弹窗，交互逻辑不完整。

第一步：修正根组件ThirdwebProvider配置 #

显式声明支持的钱包列表，开启EIP-6963标准多钱包检测，从底层避免钱包识别冲突，修改后App.js代码如下：

import { ChainId, ThirdwebProvider, MetaMaskWallet, CoinbaseWallet, WalletConnect } from "@thirdweb-dev/react";
function App() {   
  return (
    <CanvasProvider>
      <ChakraProvider theme={theme}>
        <ThirdwebProvider 
          desiredChainId={ChainId.Mainnet}
          // 按优先级声明支持的钱包，Thirdweb会按唯一标识匹配对应钱包
          supportedWallets={[MetaMaskWallet(), CoinbaseWallet(), WalletConnect()]}
          autoConnect={true}
        >
          <Editor />
        </ThirdwebProvider>
      </ChakraProvider>
    </CanvasProvider>   
  ); 
}
export default App;

第二步：修正钱包连接组件逻辑 #

优化连接交互、修正图标引用、补全连接成功/断开后的弹窗关闭逻辑，修改后Wallet.js代码如下：

import { useAddress, useDisconnect, useMetaMask, useCoinbaseWallet, useWalletConnect } from "@thirdweb-dev/react";
import { useDisclosure } from "@chakra-ui/react";
// 提前导入三个钱包对应的独立图标文件，不要混用
import metaIcon from "./assets/metamask.png";
import coinbaseIcon from "./assets/coinbase.png";
import walletconnectIcon from "./assets/walletconnect.png";

const Wallet = () => {
    const connectMetaMask = useMetaMask();
    const connectCoinbase = useCoinbaseWallet();
    const connectWalletConnect = useWalletConnect();
    const address = useAddress();
    const disconnect = useDisconnect();
    const { isOpen, onOpen, onClose } = useDisclosure();

    // 通用连接处理，捕获异常、连接成功后自动关闭弹窗
    const handleConnect = async (connectFn) => {
      try {
        await connectFn();
        onClose();
      } catch (err) {
        console.error("钱包连接失败：", err);
      }
    }

    return (
        <>
            <Button
                onClick={onOpen}
                bgColor={'#1890ff'}
                color={'white'}
                _hover={{ bgColor: '#1677ff', color: 'white' }}
            >
                {/* 已连接时显示截断的钱包地址，未连接显示连接按钮文案 */}
                {address ? `${address.slice(0, 6)}...${address.slice(-4)}` : "Connect Wallet"}
            </Button>

            <Modal isOpen={isOpen} onClose={onClose}>
                <ModalOverlay />
                <ModalContent bgColor={'#001529'} textColor={'white'}>
                    <ModalHeader>Connect a Wallet</ModalHeader>
                    <ModalCloseButton />
                    <ModalBody>
                        <VStack align={'center'} justify={'center'} gap={3}>
                            <Button 
                              onClick={() => handleConnect(connectMetaMask)} 
                              w={'full'} 
                              bgColor={'#205375'} 
                              _hover={{ color: "#001529" }}
                            >
                                <Stack direction={'row'} align={'center'} gap={2}>
                                    <Text>Connect MetaMask</Text>
                                    <Img src={metaIcon} boxSize={'6'} />
                                </Stack>
                            </Button>

                            <Button 
                              onClick={() => handleConnect(connectCoinbase)} 
                              w={'full'} 
                              bgColor={'#205375'} 
                              _hover={{ color: "#001529" }}
                            >
                                <Stack direction={'row'} align={'center'} gap={2}>
                                    <Text>Connect Coinbase</Text>
                                    <Img src={coinbaseIcon} boxSize={'6'} />
                                </Stack>
                            </Button>

                            <Button 
                              onClick={() => handleConnect(connectWalletConnect)} 
                              w={'full'} 
                              bgColor={'#205375'} 
                              _hover={{ color: "#001529" }}
                            >
                                <Stack direction={'row'} align={'center'} gap={2}>
                                    <Text>Connect WalletConnect</Text>
                                    <Img src={walletconnectIcon} boxSize={'6'} />
                                </Stack>
                            </Button>

                            {/* 仅在钱包已连接状态下显示断开按钮 */}
                            {address && (
                              <Button 
                                onClick={() => {
                                  disconnect();
                                  onClose();
                                }} 
                                w={'full'} 
                                bgColor={'#205375'} 
                                _hover={{ color: "#001529" }}
                              >
                                  <Stack direction={'row'} align={'center'} gap={2}>
                                      <Text>Disconnect Wallet</Text>
                                  </Stack>
                              </Button>
                            )}
                        </VStack>
                    </ModalBody>
                </ModalContent>
            </Modal>
        </>
    )
}

• 建议将@thirdweb-dev/react升级到最新稳定版，新版本完整适配EIP-6963多钱包检测标准，会通过钱包的唯一rdns标识区分不同注入钱包，从根本上避免识别混淆问题。
• 如果修复后仍偶发识别错误，打开Coinbase钱包插件的设置页，关闭「默认以太坊钱包」选项，避免它主动抢占其他钱包的注入位。
• Thirdweb的useDisconnect hook会自动清除本地连接缓存、重置钱包连接状态，不需要额外手动清理localStorage或状态变量。

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