External wallet Metamask not working

I tried to use external wallet with metamask adapters

    "@web3auth/base": "^8.0.0",
    "@web3auth/coinbase-adapter": "^8.0.1",
    "@web3auth/default-evm-adapter": "^8.0.1",
    "@web3auth/ethereum-provider": "^8.0.1",
    "@web3auth/metamask-adapter": "^8.0.1",
    "@web3auth/modal": "^8.0.1",
    "@web3auth/openlogin-adapter": "^8.0.1",
    "@web3auth/wallet-services-plugin": "^8.0.1",
    "@web3auth/web3auth-wagmi-connector": "^6.0.0",
    "@web3auth/wallet-connect-v2-adapter": "^8.0.1",

in the code:
const metamaskAdapter = new MetamaskAdapter(web3AuthOptions) web3AuthInstance.configureAdapter(metamaskAdapter)

I tried on this demo project too with evm example and it is also same, not show metamask pop up connection.
REF DEMO

when i click the metamask button, my metamask is not responding.
I tried using wallet connect connection, it is working perfectly fine.
only metamask button is not doing anything, is this a bug?

screenshot:
Screenshot 2024-03-30 at 17.57.37

error logs:

Hey @yoseph.wijaya0,

I hope everything’s going well on your end! To better assist you, would you mind sharing some code snippets that show how you’re configuring and initializing Web3Auth?

Thank you for reaching out, and I’m looking forward to your response.

@TomTom thank you for follow up.

here you go, this snippet from my testing branch, actually i am using wagmi connector version.

function Web3AuthConnectorInstance(chains: Chain[]) {

  const name = "YCB";
  const chainConfig = {
    chainNamespace: CHAIN_NAMESPACES.EIP155,
    chainId: toQuantity(chains[0].id),
    rpcTarget: chains[0].rpcUrls.default.http[0],
    displayName: chains[0].name,
    tickerName: chains[0].nativeCurrency?.name,
    ticker: chains[0].nativeCurrency?.symbol,
    blockExplorerUrl: chains[0].blockExplorers?.default.url[0] as string,
  };

  const privateKeyProvider = new EthereumPrivateKeyProvider({ config: { chainConfig } });

  const web3AuthOptions: Web3AuthOptions = {
    clientId: `${process.env.WEB3AUTH_CLIENT_KEY}`,
    chainConfig,
    privateKeyProvider,
    uiConfig: {
      appName: name,
      appUrl: "https://app.ycryptobank.com",
      defaultLanguage: "en",
      logoDark: "https://github.com/ycryptobank/project-audit-images/blob/88c61f780a435c7f0a842f0e5d774964a0dd7416/YCB/walletkey.png?raw=true",
      uxMode: "redirect",
      mode: "dark",
    },
    web3AuthNetwork: WEB3AUTH_NETWORK.TESTNET,
    enableLogging: true,
    sessionTime: 86400,
  }

  const web3AuthInstance = new Web3Auth(web3AuthOptions)
  web3AuthInstance.addPlugin(walletServicesPlugin)

  const metamaskAdapter = new MetamaskAdapter(web3AuthOptions);
  web3AuthInstance.configureAdapter(metamaskAdapter);

  const modalConfig = {
    [WALLET_ADAPTERS.OPENLOGIN]: {
      label: WALLET_ADAPTERS.OPENLOGIN,
      loginMethods: {
        facebook: {
          name: "facebook login",
          showOnModal: false,
        },
      },
      // setting it to false will hide all social login methods from modal.
      showOnModal: true,
    },
    [WALLET_ADAPTERS.METAMASK]: {
      label: "metamask",
      showOnModal: true,
    },
    [WALLET_ADAPTERS.COINBASE]: {
      label: "coinbase",
      showOnModal: true,
    },
    [WALLET_ADAPTERS.WALLET_CONNECT_V2]: {
      label: WALLET_ADAPTERS.WALLET_CONNECT_V2,
      showOnModal: true,
    }
  }


  return Web3AuthConnector({
    web3AuthInstance,
    modalConfig
  });
}


export var configWeb3Auth = createConfig({
  chains: chains,
  transports: {
    [polygon.id]: http(),
    [polygonMumbai.id]: http(),
    [arbitrum.id]: http(),
    [bsc.id]: http(),
    [mainnet.id]: http(),
    [optimism.id]: http(),
    [polygonZkEvm.id]: http(),
  },
  connectors: [
    Web3AuthConnectorInstance(evmchains)
  ],
  ssr: true
})

export default function Web3ModalProvider({
  children
}: {
  children: ReactNode
  initialState?: State
}) {
  return (
    <WagmiProvider config={configWeb3Auth}>
      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
    </WagmiProvider>
  )
}

I tested , everything working well, only via external wallet is not working properly especially metamask…

also i tried another approach by using getDefaultExternalAdapters, i can run it but it throwing me error metamask adapter has been initialized as soon as the page loaded. I tried to ignore it and click metamask external wallet button, it can trigger the wallet, but sometimes wagmi not recognized the connection as if it is disconnected.

Hi @yoseph.wijaya0,

I’ve just gone through both the Modal wagmi example and the modal EVM example using MetaMask, and everything seems to be working fine on my end. Have you had a chance to run these examples in your local environment? If you’re encountering issues, it might be helpful to test them out in a different browser to see if the problem persists.

Let me know how it goes after trying this out, or if there’s anything specific that’s not working as expected. I’m here to help you troubleshoot any issues you come across.

Looking forward to hearing from you and assisting further!