3
import {
  EthereumClient,
  modalConnectors,
  walletConnectProvider,
} from "@web3modal/ethereum";
import { configureChains, createClient, WagmiConfig } from "wagmi";
import { Web3Modal } from "@web3modal/react";

const chains = [mainnet];

const { provider, webSocketProvider } = configureChains(chains, [
    walletConnectProvider({
      projectId: "projectid",
    }),
  ]);
  const wagmiClient = createClient({
    autoConnect: true,
    connectors: modalConnectors({
      projectId: "projectId",
      version: "2",
      appName: "Test App",
      chains,

    }),
    provider,
    webSocketProvider,
  });

  const ethereumClient = new EthereumClient(wagmiClient, chains);
  
  return (
  <>
  <WagmiConfig client={wagmiClient}>
<Routes>
  <Route path="/testing" element={<Testing />} />
</Routes>      
  </WagmiConfig>
  <Web3Modal
       projectId="projectId"
       ethereumClient={ethereumClient}
       themeZIndex={1350}
    />
 </>
  )

And in testing component i m using web3button like this

import {  Web3Button } from "@web3modal/react";
return (
<Web3Button balance="show" />
 )

when i press this button in mobile browser it prompts to open metamask as select and go in nothing happens no prompt for connect or anything. What to do to make it work in mobile browsers ?

Works all good in desktop browser.

1
  • Did you find a solution? Feb 16, 2023 at 11:55

2 Answers 2

1
+50

You can use @web3-react/walletconnect-connector to achieve wallet connection in mobile through browser like chrome.

import { WalletConnectConnector } from "@web3-react/walletconnect-connector"

const walletconnect = new WalletConnectConnector({
      rpc:{ 1 :"ethereum-rpc"}
    });

 .............

await activate(walletconnect, undefined, true).catch((err) => {
    walletconnect.walletConnectProvider = undefined;
});

This will pop up the interface as shown in the picture below, from where you can choose your wallet to connect.

enter image description here

2

You are expecting your Mobile Metamask app to pop up like on your desktop computer browser.

This will not work. This is why there is an internal browser in the mobile version of Metamask.

The work around is to use wallet Connect like Safi mentioned.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.