Metamask Wallet Connection – How to Connect Without a Server?

metamask

i need to connect my wallet to metamask, just i am using html + js (i have not to use any server neither other framework), then i implemented like this:

const connect = async () => {
  if (window.ethereum) { //check if Metamask is installed
    try {
    const address = await window.ethereum.enable(); //connect Metamask

but here if (window.ethereum) { i am getting always undefined

can i get up metamak

Best Answer

From Metamask's now archived FAQ.

Due to browser security restrictions, we can't communicate with dapps running on file://. Please use a local server for development.

"window.ethereum" is injected by MetaMask to a host, HTML opened on your browser is basically like a "text" file rendered by the browser, which won't trigger any browser extension's injection.

You don't need an actual server to test things out though, you can do it through localhost-ing.

The easiest one is through Visual Studio Code's extension - Live server.

Or if you're familiar with node.js.

cd <your-folder>

then from there:

npx http-server

Related Solutions

Web3.js – Automatically Get User’s Wallet Info Without MetaMask Popup

The solution will depend a little bit on your front-end. This is how I did to cover your requirements with React in TypeScript:

    React.useEffect(() => {
       const checkConnection = async () => {

           // Check if browser is running Metamask
           let web3: any;
           if (window.ethereum) {
               web3 = new Web3(window.ethereum);
           } else if (window.web3) {
               web3 = new Web3(window.web3.currentProvider);
           };

           // Check if User is already connected by retrieving the accounts
           web3.eth.getAccounts()
               .then(async (addr: string) => {
                   // Set User account into state
               });
       };
       checkConnection();
   }, []);

When Users connect to the web page, I check if there is a web3 plugin in browser and try to retrieve the accounts. If I get any result, it means the User is already connected to Metamask and don't need to trigger any pop-up to connect.

If the User is not connected to Metamask, then you can trigger the pop-up by pressing the button you mentioned, and you will execute a similar code but including await window.ethereum.enable();

If you are not using React, then you just need to execute this function the first time you load the page and skip the useEffect method.

Best Answer

Related Solutions

Web3.js – Automatically Get User’s Wallet Info Without MetaMask Popup

Related Topic