Web3modal or WalletConnectModal

[pmosse]

Hello, I am using Web3Modal in a React application. In mobile I am having issues with some browsers: sometimes the disconnect button of the modal doesn't work, other times I get an "invalid params" message when trying to send a transaction, sometimes when I connect to Metamask or Core Wallet, it opens that wallet but not "Request Approval" popup appears so I can't really connect.

Should I switch to WalletConnectModal? When should I use each?

Thanks!

[xzilja]

WalletConnectModal is mostly for users who already manage things like account views, browser extensions etc. them selves and just want to plugin WalletConnect. It is usually used together with @walletconnect/ethereum-provider package.
https://docs.walletconnect.com/2.0/web/walletConnectModal/modal/installation

Web3Modal is more complete solution with most of functionality that you need pre-made and it is doing so via good integration with wagmi.
https://docs.walletconnect.com/2.0/web/about-web3modal

You should not be having those issues on Web3Modal, I will have a look, but sounds like some issues with walelts.

[pmosse]

Thanks! We definitively need to keep web3modal then. We have a list of the browsers & devices in which we have trouble if you need. We are also sometimes getting this error when we try to connect:

786.9cc0ede8.chunk.js:2 Error: Unsupported chains. connect() optionalNamespaces, chains must be defined as "namespace:chainId" e.g. "eip155:1": {...} in the namespace key OR as an array of CAIP-2 chainIds e.g. eip155: { chains: ["eip155:1", "eip155:5"] }
    at 786.9cc0ede8.chunk.js:2:292641
    at async n (786.9cc0ede8.chunk.js:2:292438)

There is some info online about removing some dependencies from babel but it doesn't seem to work. We are using only avalanche in the chains array.

[xzilja]

This looks like an issue we solved in latest wagmi release, make sure to update all your deps (check .lock files to verify).

[pmosse]

We did, but when we get this error:

main.a2b2c2fa.js:2 Error: `useConfig` must be used within `WagmiConfig`.
Read more: https://wagmi.sh/react/WagmiConfig

We are just wrapping the routes with WagmiConfig. We tried with Web3modal inside of WagmiConfig as well.

return (
    <>
      <WagmiConfig config={wagmiConfig}>
        <ParallaxProvider>
          <BrowserRouter>
            <ScrollToTop />
            <Routes>
              <Route path="/" element={<Layout />}>
                <Route index element={<Home />} />
                ...........
              </Route>
            </Routes>
          </BrowserRouter>
        </ParallaxProvider>
      </WagmiConfig>
      <div style={{maxWidth: "100vw", maxHeight: "100vh" }}>
        <Web3Modal 
          projectId={projectId}
          ethereumClient={ethereumClient}
        />
      </div>
    </>
  );
}

This doesn't happen with wagmi 1.3.4 (it happens with 1.3.7 or 1.3.8)

[xzilja]

That error looks like it is referring to usage of wagmi's hook(s) outside of <WagmiConfig> scope

[pmosse]

Thanks! I removed an use we had outside the WagmiConfig and that works. It is strange because that same code worked for month and it started failing with the latest wagmi version only. Now these issues seem to be okay but we still have the initial problems mentioned with some browsers. For example with DuckDuckGo in Android, when connecting, we get to select the wallet (Core or Metamask) but never get the approval modal so we can confirm the connection. This is just one example. In Desktop we don't have any issues, and Chrome in Mobile is okay