requesting Metamask with "eth_requestAccounts" does not work in next.js

user_10262805 0
Viewed 1783

This is a next.js project. I detected metamask:

import detectEthereumProvider from "@metamask/detect-provider";

let provider;
if (typeof window !== "undefined") {
  // for simplicity I am configured next.js for using top-level await
  provider = await detectEthereumProvider();
}
// Provider is detected
console.log("provider", provider);

This is the function to send request to metamask. It is not throwing error:

const connect = async () => {
    try {
      await provider.request({ method: "eth_requestAccounts" });
    } catch (e) {
      console.log("error in request", e);
      // location.reload();
    }
  };

I add click handler:

            <Button onClick={connect}>Connect</Button>

Nothing is happening. so I chanded the click handler to:

          <Button
              onClick={() => {
                // this is logging.
                console.log("clicked to send request to Metamask");
                connect;
              }}
            >
              Connect
            </Button>

It is logging that I clicked but it is not sending request to Metamask

solidity metamask web3 ethereum next.js
1 Answers

First

      <Button
          onClick={() => {
            // this is logging.
            console.log("clicked to send request to Metamask");
            connect;
          }}
        >
          Connect
        </Button>

Wont work cause you need to do connect()

      <Button
          onClick={() => {
            // this is logging.
            console.log("clicked to send request to Metamask");
            connect(); // <===
          }}
        >
          Connect
        </Button>

Second connection might be working, it won't open popup if already connected. Try doing this instead.

const connect = () => {
    provider.request({ method: "eth_requestAccounts" })
         .then(response => console.log(response)
         .catch(err => console.log(err)
  };

or if you want to keep it with async

const connect = async () => {
    try {
      const addresses = await provider.request({ method: "eth_requestAccounts" });
      console.log(addresses)
    } catch (e) {
      console.log("error in request", e);
      // location.reload();
    }
  };
user_111662380
Related