- create a html file
index.htm - add this bare minimum code there
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fund Me Web Page</title>
</head>
<body>
hello!
</body>
</html>- If you don't have metamask installed, install it now!
- Now we have metamask, check if we have
ethereumobject in ourwindowobject. - Create a js file:
main.js - Link it with html file.
const metamaskLink = "https://metamask.io/";
if(typeof window.ethereum !== undefined){
console.log("Metamask found!");
} else {
console.log(`get metamask from here: ${metamaskLink}`)
}- If the above code is giving output as
metamask found, then you are good to go. - Now the metamask is found, let's connect it to our web page using
eth_requestAccountsmethod. Add this line afterconsole.log("Metamask found!");line:
window.ethereum.request({
method: "eth_requestAccounts"
})
console.log("Connected to metamask wallet!");refresh the page and you'll see metamask popping up. 7. It is very annoying, every time you hitting refresh and metamask asking for connect, to fix it, we need to make an async function and put the connecting code there.
async function connect() {
const metamaskLink = "https://metamask.io/";
if (typeof window.ethereum !== undefined) {
console.log("Metamask found!");
await window.ethereum.request({
method: "eth_requestAccounts",
});
console.log("Connected to metamask wallet!");
} else {
console.log(`get metamask from here: ${metamaskLink}`);
}
}- Create a button in html file, onClick, this button will connect to metamask.
<button id="connectBtn" onclick="connect()">Connect your wallet</button>