WalletConnect Fails to Detect MetaMask Despite It Being Installed

[ValerieKC]

Description

I am encountering an issue where WalletConnect does not detect MetaMask, even though I have the MetaMask Chrome extension installed and it is up to date. I have verified that MetaMask is installed and enabled using window.ethereum, which confirmed its presence. Additionally, I have allowed localhost to access MetaMask by selecting the account I want to use on this site.

Environment

MetaMask Chrome Extension: 12.5.0 (latest version)
@reown/appkit: ^1.1.7
@reown/appkit-adapter-ethers: ^1.1.7
ethers: ^6.13.4
@vitejs/plugin-react: ^4.0.0
vite: ^4.3.9
vite-plugin-compression2: ^0.10.2
react": ^17.0.2

Steps Taken

I have checked if MetaMask is installed using window.ethereum, and it confirmed that MetaMask is installed and enabled.
I am using useAppKit and related hooks to integrate WalletConnect with my application.
The code attempts to connect to the wallet using the open function from useAppKit, but WalletConnect does not detect MetaMask.

Expected Behavior

WalletConnect should detect MetaMask and allow me to connect.

Actual Behavior

WalletConnect fails to detect MetaMask, even though it is installed and confirmed using window.ethereum.

Screen shot

Image 1: It should display "installed" if MetaMask is successfully detected. .

  

Image 2: allowed localhost to access MetaMask by selecting the account I want to use on my site

  

Image 3: get this warning after first load

Code

import { createAppKit, useAppKit, useAppKitAccount, useAppKitProvider, useAppKitState } from '@reown/appkit/react'
import { EthersAdapter } from '@reown/appkit-adapter-ethers'
import { bsc, defineChain } from '@reown/appkit/networks'
import { BrowserProvider, ethers } from 'ethers'
import { useEffect } from 'react'

const projectId = 'projectId'
const metadata = {
  name: 'test',
  description: 'test',
  url: 'http://localhost:3001/',
  icons: ['']
}

const customNetwork = defineChain({
  //hide
})

const ConnectWallet = () => {
  const { t } = useTranslation()
  createAppKit({
   adapters: [new EthersAdapter()],
    networks:[bsc],
    metadata,
    projectId,
    features: {
      analytics: true, // Optional - defaults to your Cloud configuration
      email: false,
      socials: false,
    },
    featuredWalletIds: [
      'c57ca95b47569778a828d19178114f4db188b89b763c899ba0be274e97267d96',
    ],
    enableWalletConnect: false,
    allowUnsupportedChain: true,
    debug: true,
  })

  const { open } = useAppKit()
  const { address, isConnected, caipAddress, status } = useAppKitAccount()
  const { walletProvider } = useAppKitProvider('eipxxxx')

  const handleConnectWallet = async () => {
    try {
      await open()
    } catch (error) {
      console.error(error)
    }
  }

  return (
    <>
      <Button circle onClick={() => handleConnectWallet()}>connectWallet</Button>
    </>
  )
}
export default ConnectWallet

##Questions

• Is there an issue with how I am configuring AppKit or WalletConnect?
• Are there known compatibility problems with the specified versions?
• Should I adjust any configurations to ensure MetaMask detection?