How to connect metamask to dapp?
Question
I am building a dapp and I want it to connect to metamask. I got the code below from https://docs.metamask.io/guide/getting-started.html#basic-considerations . Metamask is installed on my browser, but it's not working. When the browser loads the page the console writes MetaMask not installed! . When I click the enableEthereumButton the console gives me an error:
demo.js:16 Uncaught (in promise) ReferenceError: ethereum is not defined
at getAccount (demo.js:16)
at HTMLButtonElement.<anonymous> (demo.js:12)
getAccount @ demo.js:16
(anonymous) @ demo.js:12
index.html
<!DOCTYPE html>
<html>
<head>
<title>Dapp</title>
</head>
<body>
<button class="enableEthereumButton">Enable Ethereum</button>
<h2>Account: <span class="showAccount"></span></h2>
<script src="demo.js"></script>
</body>
</html>
demo.js
if (typeof window.ethereum !== 'undefined') {
console.log('MetaMask is installed!');
}
else{
console.log('MetaMask not installed!');
}
const ethereumButton = document.querySelector('.enableEthereumButton');
const showAccount = document.querySelector('.showAccount');
ethereumButton.addEventListener('click', () => {
getAccount();
});
async function getAccount() {
const accounts = await ethereum.request({ method: 'eth_requestAccounts' });
const account = accounts[0];
showAccount.innerHTML = account;
}
What am I missing? I followed the instructions on the website provided above.
2 answers
solution1
0 2021-08-02 18:39:44
@slaven tojic After installing Metamask extension in Chrome, have you activated it?
Open extensions from settings OR Open a tab in browser and type chrome://extensions/.
Check in Metamask block, if toggle button is turned on or not. If not activate it.
Also, pin Metamask extension on browser -> check following images. Chrome MetaMask extension setting & Metamask after activation
After this Check if your code is working. If you have already done above settings, then there must be other issue.
Also, in your code you are referring to account[0]. Are you using Testnet accounts for connecting or local accounts ( using Ganache https://www.trufflesuite.com/ganache ).
If you are using local Ganache server, then you have to configure it in MetaMask. You can find lots of articles regarding the same. Please ignore this additional info, if you are already following it.
solution2
0 2021-12-23 12:37:00
Here's the issue, Metamask requires a normal host to inject (eg localhost), it will not inject on a random file opened on your own workstation, hence the reason why your validation can't find the window.ethereum object.
Also, depending on how you are running your project, I would place the ethereumButton const within a window.onload function to avoid the query selector not finding it because it doesn't exist yet.
I would do the following:
window.onload = function() {
const ethereumButton =
document.querySelector('.enableEthereumButton');
ethereumButton.addEventListener('click', () => {
if (typeof window.ethereum !== 'undefined') {
getAccount();
} else {
alert('Please install MetaMask');
}
});
};
async function getAccount() {
const showAccount = document.querySelector('.showAccount');
const accounts = await ethereum.request({ method:
'eth_requestAccounts' });
const account = accounts[0];
showAccount.innerHTML = account;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.