How to connect ethers.js with metamask?

Question

I am using the ethers.js documentation: https://docs.ethers.io/ethers.js/html/cookbook-providers.html . I am getting the error when setting up the provider -: Uncaught ReferenceError: web3 is not defined I want to connect my Decentralized Application with the metamask. For that I am trying to connect the metamask with ethers.js by setting the provider as per the documentation. I have used provider = new ethers.providers.Web3Provider(web3.currentProvider). But it throws error for the web3 object in the code. This code is exactly as per the documentation. But still isn't working.

        //let provider = new ethers.getDefaultProvider('rinkeby');
        let provider = new ethers.providers.Web3Provider(web3.currentProvider);
        let contract;
        let wallet;
        let abi = [
    {
        "anonymous": false,
        "inputs": [
            {
                "indexed": true,
                "internalType": "address",
                "name": "account",
                "type": "address"
            },
            {
                "indexed": false,
                "internalType": "string",
                "name": "pwd",
                "type": "string"
            }
        ],
        "name": "Pwd_Assigned",
        "type": "event"
    },
    {
        "inputs": [
            {
                "internalType": "string",
                "name": "_passwd",
                "type": "string"
            }
        ],
        "name": "setPwd",
        "outputs": [
            {
                "internalType": "bool",
                "name": "success",
                "type": "bool"
            }
        ],
        "stateMutability": "nonpayable",
        "type": "function"
    },
    {
        "inputs": [
            {
                "internalType": "string",
                "name": "_uname",
                "type": "string"
            }
        ],
        "name": "setUname",
        "outputs": [
            {
                "internalType": "bool",
                "name": "success",
                "type": "bool"
            }
        ],
        "stateMutability": "nonpayable",
        "type": "function"
    },
    {
        "inputs": [
            {
                "internalType": "string",
                "name": "_uType",
                "type": "string"
            }
        ],
        "name": "setUtype",
        "outputs": [
            {
                "internalType": "bool",
                "name": "success",
                "type": "bool"
            }
        ],
        "stateMutability": "nonpayable",
        "type": "function"
    },
    {
        "anonymous": false,
        "inputs": [
            {
                "indexed": true,
                "internalType": "address",
                "name": "account",
                "type": "address"
            },
            {
                "indexed": false,
                "internalType": "string",
                "name": "utype",
                "type": "string"
            }
        ],
        "name": "Type_Assigned",
        "type": "event"
    },
    {
        "anonymous": false,
        "inputs": [
            {
                "indexed": true,
                "internalType": "address",
                "name": "account",
                "type": "address"
            },
            {
                "indexed": false,
                "internalType": "string",
                "name": "uname",
                "type": "string"
            }
        ],
        "name": "Username_Assigned",
        "type": "event"
    },
    {
        "inputs": [],
        "name": "getContractName",
        "outputs": [
            {
                "internalType": "string",
                "name": "_name",
                "type": "string"
            }
        ],
        "stateMutability": "view",
        "type": "function"
    },
    {
        "inputs": [],
        "name": "name",
        "outputs": [
            {
                "internalType": "string",
                "name": "",
                "type": "string"
            }
        ],
        "stateMutability": "view",
        "type": "function"
    },
    {
        "inputs": [
            {
                "internalType": "address",
                "name": "",
                "type": "address"
            }
        ],
        "name": "pwd",
        "outputs": [
            {
                "internalType": "string",
                "name": "",
                "type": "string"
            }
        ],
        "stateMutability": "view",
        "type": "function"
    },
    {
        "inputs": [],
        "name": "symbol",
        "outputs": [
            {
                "internalType": "string",
                "name": "",
                "type": "string"
            }
        ],
        "stateMutability": "view",
        "type": "function"
    },
    {
        "inputs": [
            {
                "internalType": "address",
                "name": "",
                "type": "address"
            }
        ],
        "name": "uname",
        "outputs": [
            {
                "internalType": "string",
                "name": "",
                "type": "string"
            }
        ],
        "stateMutability": "view",
        "type": "function"
    },
    {
        "inputs": [
            {
                "internalType": "address",
                "name": "",
                "type": "address"
            }
        ],
        "name": "uType",
        "outputs": [
            {
                "internalType": "string",
                "name": "",
                "type": "string"
            }
        ],
        "stateMutability": "view",
        "type": "function"
    }
];
        let contractAddress = "0xECFFa8439Fa4DC64388227fA43a420449E895c3f"; // for rinkeby
        let AidTokenAbi = [
            {
                "inputs": [
                    {
                        "internalType": "uint256",
                        "name": "_initialSupply",
                        "type": "uint256"
                    }
                ],
                "stateMutability": "nonpayable",
                "type": "constructor"
            },
            {
                "anonymous": false,
                "inputs": [
                    {
                        "indexed": true,
                        "internalType": "address",
                        "name": "_owner",
                        "type": "address"
                    },
                    {
                        "indexed": true,
                        "internalType": "address",
                        "name": "_spender",
                        "type": "address"
                    },
                    {
                        "indexed": false,
                        "internalType": "uint256",
                        "name": "_value",
                        "type": "uint256"
                    }
                ],
                "name": "Approval",
                "type": "event"
            },
            {
                "inputs": [
                    {
                        "internalType": "address",
                        "name": "_spender",
                        "type": "address"
                    },
                    {
                        "internalType": "uint256",
                        "name": "_value",
                        "type": "uint256"
                    }
                ],
                "name": "approve",
                "outputs": [
                    {
                        "internalType": "bool",
                        "name": "success",
                        "type": "bool"
                    }
                ],
                "stateMutability": "payable",
                "type": "function"
            },
            {
                "inputs": [
                    {
                        "internalType": "address",
                        "name": "_to",
                        "type": "address"
                    },
                    {
                        "internalType": "uint256",
                        "name": "_value",
                        "type": "uint256"
                    }
                ],
                "name": "transfer",
                "outputs": [
                    {
                        "internalType": "bool",
                        "name": "success",
                        "type": "bool"
                    }
                ],
                "stateMutability": "payable",
                "type": "function"
            },
            {
                "anonymous": false,
                "inputs": [
                    {
                        "indexed": true,
                        "internalType": "address",
                        "name": "_from",
                        "type": "address"
                    },
                    {
                        "indexed": true,
                        "internalType": "address",
                        "name": "_to",
                        "type": "address"
                    },
                    {
                        "indexed": false,
                        "internalType": "uint256",
                        "name": "_value",
                        "type": "uint256"
                    }
                ],
                "name": "Transfer",
                "type": "event"
            },
            {
                "inputs": [
                    {
                        "internalType": "address",
                        "name": "_from",
                        "type": "address"
                    },
                    {
                        "internalType": "address",
                        "name": "_to",
                        "type": "address"
                    },
                    {
                        "internalType": "uint256",
                        "name": "_value",
                        "type": "uint256"
                    }
                ],
                "name": "transferFrom",
                "outputs": [
                    {
                        "internalType": "bool",
                        "name": "success",
                        "type": "bool"
                    }
                ],
                "stateMutability": "payable",
                "type": "function"
            },
            {
                "inputs": [
                    {
                        "internalType": "address",
                        "name": "",
                        "type": "address"
                    },
                    {
                        "internalType": "address",
                        "name": "",
                        "type": "address"
                    }
                ],
                "name": "allowance",
                "outputs": [
                    {
                        "internalType": "uint256",
                        "name": "",
                        "type": "uint256"
                    }
                ],
                "stateMutability": "view",
                "type": "function"
            },
            {
                "inputs": [
                    {
                        "internalType": "address",
                        "name": "",
                        "type": "address"
                    }
                ],
                "name": "balanceOf",
                "outputs": [
                    {
                        "internalType": "uint256",
                        "name": "",
                        "type": "uint256"
                    }
                ],
                "stateMutability": "view",
                "type": "function"
            },
            {
                "inputs": [],
                "name": "name",
                "outputs": [
                    {
                        "internalType": "string",
                        "name": "",
                        "type": "string"
                    }
                ],
                "stateMutability": "view",
                "type": "function"
            },
            {
                "inputs": [],
                "name": "standard",
                "outputs": [
                    {
                        "internalType": "string",
                        "name": "",
                        "type": "string"
                    }
                ],
                "stateMutability": "view",
                "type": "function"
            },
            {
                "inputs": [],
                "name": "symbol",
                "outputs": [
                    {
                        "internalType": "string",
                        "name": "",
                        "type": "string"
                    }
                ],
                "stateMutability": "view",
                "type": "function"
            },
            {
                "inputs": [],
                "name": "tokensSold",
                "outputs": [
                    {
                        "internalType": "uint256",
                        "name": "",
                        "type": "uint256"
                    }
                ],
                "stateMutability": "view",
                "type": "function"
            },
            {
                "inputs": [],
                "name": "totalSupply",
                "outputs": [
                    {
                        "internalType": "uint256",
                        "name": "",
                        "type": "uint256"
                    }
                ],
                "stateMutability": "view",
                "type": "function"
            }
        ];
        let AidtokenAddress = "0x17b0e97DF8217a984294De6bDbbb9D7020190479";
        let AidTokenContract;
        let signer = provider.getSigner();
        let usr_account;

        function loadWallet(){
            signer.getAddress().then(async(res)=>{
                usr_account = res;
                await console.log(usr_account);
            });
        }

        // async function setProvider(){
        //   provider = await new ethers.providers.JsonRpcProvider('http://127.0.0.1:8545');
        // }

        function getContract(){
            contract = new ethers.Contract(contractAddress,abi, signer);
            console.log(contract.functions);
        }
        
        function getTokenContract(){
            AidTokenContract = new ethers.Contract(AidtokenAddress,AidTokenAbi, signer);
        }
        
        async function getName(){
            // var name = await contract.functions.getContractName();
            // console.log(name);
            await contract.name().then(async (res)=>{
              await console.log(res);
            });
        }

        async function setInfo(event){
            event.preventDefault();
            loadWallet();
            getContract();
            var uname = document.getElementById('uname').value;
            var pwd = document.getElementById('psw').value;
            var utype = document.getElementById('utype').value;
            await contract.functions.setUname(uname).then(async(res)=>{
                console.log(res);
            });
            await contract.functions.setUtype(utype).then(async(res)=>{
                console.log(res);
            });
            await contract.functions.setPwd(pwd).then(async(res)=>{
                console.log(res);
            });
            //getInfo();
        }

        async function getInfo(event){
          event.preventDefault();
            var uname;
            var utype;
            var pwd;
            loadWallet();
            getContract();
            await contract.functions.uname(usr_account).then(async(res)=>{
                uname=res;
                console.log(res);
            });
            await contract.functions.uType(usr_account).then(async(res)=>{
                utype = res;
                console.log(res);
            });
            await contract.functions.pwd(usr_account).then(async(res)=>{
                pwd=res
                console.log(res);
            });
        }

        async function transfer(event){
            event.preventDefault();
            loadWallet();
            getTokenContract();
            await console.log(".....");
            var numberOfTokens = document.getElementById('numberOfTokens').value;
            await AidTokenContract.functions.transfer(numberOfTokens,{
                from: usr_account,
                gasLimit: 500000
            });
        }

        //setProvider();
        loadWallet();
        getContract();
        //getName();

        // setInfo();
        //getInfo();

<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcode-generator/1.4.3/qrcode.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <!-- <script src="js/web3.min.js"></script> -->
    <script charset="utf-8"
            src="https://cdn.ethers.io/scripts/ethers-v4.min.js" type="text/javascript">
        </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.js"></script>
  </head>
  <body>

    <form onsubmit="setInfo(event)">
        <div>
                  <h1>Register</h1>
                  <p>Please fill in this form to create an account.</p>
                  <hr>
                <br>
                  <label for="uname"><b>User Name</b></label>
                  <input type="text" placeholder="Enter Username" id="uname" required>
                <br>
                  <label for="utype">Choose a User type:</label>
                  <select id="utype" name="utype">
                        <option value="Donor">Donor</option>
                        <option value="NGO">NGO</option>
                        <option value="Government">Government</option>
                  </select>
              <br>
                  <label for="psw"><b>Password</b></label>
                  <input type="password" placeholder="Enter Password" id="psw" required>
              
                  <!-- <label for="psw-repeat"><b>Repeat Password</b></label>
                  <input type="password" placeholder="Repeat Password" name="psw-repeat" required>
                  <hr> -->
              
                  <p>By creating an account you agree to our <a href="#">Terms & Privacy</a>.</p>
                  <button type="submit" id="registerbtn">Register</button>
        </div>
              
                <div class="container signin">
                  <p>Already have an account? <a href="#">Sign in</a>.</p>
                </div>
    </form>
<br><br>
    <form onsubmit="getInfo(event)">
        <button type="submit" >Get Info</button>
    </form>

    <form onsubmit="transfer(event)">
      <input id="numberOfTokens" type="number" name="number" value="1" min="1" pattern="[0-9]">
      <button type="submit" >Donate</button>
  </form>
  <!-- <script src="https://cdn.jsdelivr.net/gh/ethereum/web3.js/dist/web3.min.js"></script> -->
  
    
    <script src="js/app.js"></script>

  </body>
</html>

Getting this error while setting the provider-Uncaught ReferenceError: web3js is not defined

Codler · Answer 1 · 2023-07-04T09:25:55.450

64

Using ethers.js to interact with Metamask

v6.0.0 (2023-02-02) and above

const provider = new ethers.BrowserProvider(window.ethereum);
// It will prompt user for account connections if it isnt connected
const signer = await provider.getSigner();
console.log("Account:", await signer.getAddress());

v5.7.2 and below

const provider = new ethers.providers.Web3Provider(window.ethereum, "any");
// Prompt user for account connections
await provider.send("eth_requestAccounts", []);
const signer = provider.getSigner();
console.log("Account:", await signer.getAddress());

edited Jul 04 '23 at 09:25

answered Jun 04 '21 at 11:51

Codler

10,951
6
52
65

Thanks, can you share the doc url for that? – user2342558 Oct 01 '21 at 13:05
Note that you also need to call window. ethereum.enable() first. – whileone Oct 27 '21 at 05:34
@whileone why does it is needed? – user2342558 Oct 27 '21 at 07:52
6

The method `ethereum.enable()` was deprecated in place of `.send('eth_requestAccounts')`, as per https://eips.ethereum.org/EIPS/eip-1102 – Do Async Nov 19 '21 at 09:40
2

[Ethers docs for Metamask](https://docs.ethers.io/v5/single-page/#/v5/getting-started/-%23-getting-started--connecting) should be updated – Do Async Nov 19 '21 at 09:48
Finally, I've found the answer! Thank you! – Konstantin Dec 12 '22 at 11:05
ethers.providers is no longer supported in newer version I don't why there is no content in the internet around this. Please correct me if I'm wrong – Abhishek Feb 11 '23 at 23:39

Concrete_Buddha · Answer 2 · 2021-02-04T20:51:40.567

I too have found this confusing. According to the ethers.js documentation for Metamask the following is required:

const provider = new ethers.providers.Web3Provider(web3.currentProvider);
const signer = provider.getSigner();

But this causes an error: specifically the web3.currentProvider not being recognised.

The Ethers.js github issue log has a similar complaint at Issue #433. Using this as a guide I've therefore used window.ethereum in place of web3.currentProvider and also included the .enable() beforehand:

await window.ethereum.enable()
const provider = new ethers.providers.Web3Provider(window.ethereum);
const signer = provider.getSigner();

Or alternatively (outside of an async function):

let provider;
window.ethereum.enable().then(provider = new ethers.providers.Web3Provider(window.ethereum));
const signer = provider.getSigner();

This clears the error, and ensures that Metamask asks for permission prior to connecting to the browser/DApp.

The method "ethereum.enable()" has now been deprecated in place of "ethereum.send('eth_requestAccounts')". As per the following 'https://eips.ethereum.org/EIPS/eip-1102' — Thomas Fox, May 29 '21 at 09:13

score 6 · Answer 3 · edited Nov 20 '21 at 17:35

6

window.ethereum.enable() is deprecated.

You should use:

ethereum.request({ method: 'eth_requestAccounts' })

edited Nov 20 '21 at 17:35

tdy

36,675
19
86
83

answered Nov 20 '21 at 13:47

sanskar khare

77
1
2

2

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Nov 20 '21 at 18:32
I tried it and it worked. Quicker and easier than reading any docs. Even if I read the docs I would still have to try and see if it works. Happy to have a succinct correct answer. – Jonathan Sep 17 '22 at 06:30

score 1 · Answer 4 · answered Jun 21 '23 at 00:12

1

You have to use below ethers.js@6.0.0. Here is function to connect metamask.

  const [walletAddress, setWalletAddress] = useState();  
  const connectWallet = async () => {
    if (typeof window.ethereum !== 'undefined') {
      const [account] = await window.ethereum.request(
       { method: 'eth_requestAccounts' });  // connect wallet
      setWalletAddress(account);
    }
  }

Here is the code to get signer from metamask

const provider = new ethers.providers.Web3Provider(window.ethereum);
const signer = provider.getSigner();

answered Jun 21 '23 at 00:12

cryptowarrier

19
3

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jun 23 '23 at 00:29

How to connect ethers.js with metamask?

4 Answers4

Linked