Menu
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>
714
A Provider is an abstraction of a connection to the Ethereum network, providing a concise, consistent interface to standard Ethereum node functionality. The ethers.
Connecting to MetaMask "Connecting" or "logging in" to MetaMask effectively means "to access the user's Ethereum account (s)". You should only initiate a connection request in response to direct user action, such as clicking a button. You should always disable the "connect" button while the connection request is pending.
To use the Ethers.js library in your React project, you will need to add the following import statement above your class definition. Then we will create a new function that uses the Ethers.js library to connect to a users’ Metamask wallet within the web browser to the React app.
MetaMaks: MetaMask is a crypto wallet and a gateway to blockchain DAPP. It is used to connect our app to web3. It is just a chrome extension that is used to access and interact with the Ethereum blockchain. Its features support tokens and digital assets on the Ethereum ecosystem. It is also used as a primary wallet to store the balance in Ethereum.
To get the ETH balance of a Metamask account using Ethers.js, you can use the getBalance function on the Web3Provider passing the wallet address as a parameter. The function will return a BigNumber, to display this in ETH units in the user interface, use the utility function formatEther.
Using ethers.js to interact with Metamask
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());
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.
37
window.ethereum.enable() is deprecated.
You should use:
ethereum.request({ method: 'eth_requestAccounts' })
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
