10

Some web3 enabled websites ask you to switch your network on metamask. How can I do so? Some other websites also allow you to add a network you don't have (for example https://chainlist.org/). I would like to do it too. Example: Metamask asks to switch your network

I am using react and web3 react (https://www.npmjs.com/package/web3-react), which means I am using ethers.js under the hood.

Thank you very much, Thomas

2 Answers 2

19

Here is an example how to make your website to ask the users so they can add and switch to the Matic network:

window.ethereum.request({
    method: "wallet_addEthereumChain",
    params: [{
        chainId: "0x89",
        rpcUrls: ["https://rpc-mainnet.matic.network/"],
        chainName: "Matic Mainnet",
        nativeCurrency: {
            name: "MATIC",
            symbol: "MATIC",
            decimals: 18
        },
        blockExplorerUrls: ["https://polygonscan.com/"]
    }]
});
2
  • Thank you very much Miroslav, it works perfectly!
    – Th0rgal
    Dec 23, 2021 at 17:07
  • As of today, just fixed rpcUrls: ["https://polygon-rpc.com/"] and blockExplorerUrls: ["https://explorer.matic.network"] , works fine!
    – qpaycm
    Jun 23, 2022 at 9:28
0

This works for me on desktop. On mobile whole button disapperas:

import React, { useEffect, useState } from "react";
import { ethers } from "ethers";
import Blockies from "react-blockies";

import { makeStyles } from '@material-ui/core/styles';

import { useWeb3Modal } from "../hooks/web3";
import { isMobile, Provider } from "web3modal";
import Link from 'next/link'
if (isMobile){print = "ppppp"}


const abi = require('../config/abi.json');
const abi_1155 = require('../config/abi_1155.json');

const truncateAddress = (address) => {
  return address.slice(0, 6) + "..." + address.slice(-4);
};

const ConnectWallet = ({ signerAddress, contract_1155, contract_721, setContract_1155, setContract_721, setSignerAddress , setNetworkId, SetProvider}) => {
  const classes = useStyles();
  // const [isWaiting, setWaiting] = useState(false)
  // const [isSent, setSent] = useState(false)
  // const [walletNotDetected, setWalletNotDetected] = useState(false)

  const { connectWallet, disconnectWallet, provider, error } = useWeb3Modal();

  useEffect(() => {
    const getAddress = async () => {
      const signer = provider.getSigner();
      const address = await signer.getAddress();
      setSignerAddress(address);

      const networkId = await provider.getNetwork();
      console.log(networkId)
      setNetworkId(networkId);
    
      // if(chainId !== 8001)


      // for erc721 mainnet and testnet
      setContract_721(new ethers.Contract("0x002606386e5D884e338A5ac351D3A79260bB65CD", abi));

      // for erc1155 mainnet
      if (networkId == "137") setContract_1155(new ethers.Contract("0x002606386e5D884e338A5ac351D3A79260bB65CD", abi_1155));
      // for erc1155 testnet
      else setContract_1155(new ethers.Contract("0x002606386e5D884e338A5ac351D3A79260bB65CD", abi_1155));

      console.log(contract_721, contract_1155)
    }
    if (provider) getAddress();
    else setSignerAddress("");
  }, [provider]);


  const handleClickConnect = async () => {
    await connectWallet();
  };

  const handleClickAddress = () => {
    disconnectWallet();
  };

  return (
    <button
      className={classes.btn}
      onClick={signerAddress ? handleClickAddress : handleClickConnect}>
      <Blockies
        className={classes.img}
        seed={signerAddress.toLowerCase()}
        size={8}
        scale={3}
      />
     <div>
        {signerAddress ? truncateAddress(signerAddress) : "Connect Wallet"} 
      </div>
    </button>
  );
}


const useStyles = makeStyles((theme) => ({
  btn: {
    background: 'rgb(183,192,238)',
    cursor: 'pointer',
    border: 0,
    outline: 'none',
    borderRadius: 9999,
    height: 35,
    display: 'flex',
    alignItems: 'center'
  },
  img: {
    borderRadius: 999,
    marginRight: 5
  }
}));



export default ConnectWallet;

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.