How to Connect Web3 Wallet into your Website? (Web3 and Blockchain project).

Connecting a MetaMask wallet to your Web3 website is important for various reasons. It allows you to connect you to your DApps, manage your Crypto assets, signing transactions and message verification and enhance security.

Prerequisite: EVM, Blockchain, JavaScript, React.js

Check if any EVM based wallet is installed in your browser

 if (typeof window.ethereum !== "undefined") {
      console.log("Wallet installed");
    }

Check installed wallet is Metamask or not

In that case we will use ethereum.isMetaMask to check:

if (typeof window.ethereum && ethereum.isMetaMask !== "undefined") {
      console.log("MetaMask Wallet is present");
    }

If you don't have MetaMask installed

 if (typeof window.ethereum === "undefined") {
      console.log("MetaMask Wallet not installed");
      window.location.href = "https://metamask.io/download.html";
    }

Now we have installed MetaMask, its time to connect the wallet with our website.

    try {
      const accounts = await ethereum.request({
        method: "eth_requestAccounts",
      });
      console.log(accounts);
    } catch (error) {
      console.error(error);
    }

These are all the methods we need to follow to connect our wallet with our frontend.