使用“eth_requestAccounts”请求 Metamask 在 next.js 中不起作用答案

【问题标题】：requesting Metamask with "eth_requestAccounts" does not work in next.js使用“eth_requestAccounts”请求 Metamask 在 next.js 中不起作用
【发布时间】：2023-04-10 01:39:02
【问题描述】：

这是一个 next.js 项目。我检测到元掩码：

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);

这是向元掩码发送请求的函数。它没有抛出错误：

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

我添加点击处理程序：

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

什么都没有发生。所以我将点击处理程序改为：

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

我点击了日志，但它没有向 Metamask 发送请求

【问题讨论】：

在onClick处理函数中，需要实际调用函数，即await connect();。

标签： next.js ethereum solidity web3 metamask

【解决方案1】：

第一

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

无法正常工作，因为您需要执行 connect()

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

第二个连接可能正在工作，如果已经连接，它将不会打开弹出窗口。请尝试这样做。

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

或者如果你想保持异步

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();
    }
  };

【讨论】：