[Ethereum] Connect to metamask and WalletConnect using web3-react

dappsethereum-wallet-dappreactwalletconnectweb3js

I have been using web3-react to connect different wallets:
I want to connect to metamask extension with the help of

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

For wallectConnect

export const walletConnector = new WalletConnectConnector({
  rpc: {
    3: `https://ropsten.infura.io/v3/${INFURA_ID}`,
  },
});

If I activate above walletConnector it only shows QR code and DOESNOT include metamask (injected provider) option.

Or else what is the option to integrate @walletconnect/web3-provider with web3-react

Best Answer

you want to use InjectedConnector,

const MetaMask = new InjectedConnector({ supportedNetworks: [1, 4] });
const connectors = { MetaMask };

Then you want to wrap your app with:

 <Web3Provider
      connectors={connectors}
      libraryName={"ethers.js"}
    > <YOUR_APP/> 
</Web3Provider>

Then use it with something like this

import { useWeb3Context } from "web3-react";
import { useEffect } from "react";

const context = useWeb3Context();

useEffect(() => {
    context.setConnector("MetaMask");
}, []);

If you use MetaMask option in WalletConnect I think its just to mobile Metamask

Related Topic