如何检测小狐狸钱包登录

Question

我们如何检测用户在页面加载后何时登录小狐狸钱包？是否有必要诉诸轮询，或者是否有页面可以侦听的事件？

Answer 1

截至 2020 年，web3 站点必须通过以下方式请求帐户访问权限 ethereum.request({ method: 'eth_requestAccounts' }) ，然后通过 accountsChanged 事件监听帐户更改。

有关详细信息，请参阅小狐狸钱包文档。

Answer 2

使用 web3 版本 1.0.0，小狐狸钱包提供程序公开一个"更新"事件，您可以在其 publicConfigStore 上收听。

web3.currentProvider.publicConfigStore.on('update', callback);

只要这些属性发生变化，您的回调就会被传递一个带有"selectedAddress"和"networkVersion"的对象。

Answer 3

通过'eth_requestAccounts'请求帐户访问权限并不是您可以做的最好的事情，因为这会不断在小狐狸钱包（性能不佳）和糟糕的用户体验（弹出窗口 + 通知）中添加请求

这样做的方法是通过

const isUnlocked = await window?.ethereum?._metamask.isUnlocked();
console.debug({ isUnlocked });

Answer 4

这将检查小狐狸钱包是否已连接，而无需要求用户使用小狐狸钱包登录

if (window.ethereum._state.accounts.length > 0) {
  // metamask is already connected
  console.log(window.ethereum._state.accounts[0]);
}

完全工作 反应/下一步.js代码：

import { useState, useEffect } from "react";
export default function Home() {
  const [ismetamask, setIsmetamask] = useState(false); // is metamask installed ?
  const [accountaddress, setAccountaddress] = useState([]);
  useEffect(() => {
    if (window) {
      // Sometimes window is not loaded, so wait
      if (typeof window.ethereum !== "undefined") {
        console.log("MetaMask is installed!");
        setIsmetamask(true);
        // check if metamask is already connected
        if (window.ethereum._state.accounts.length > 0) {
          // metamask is already connected
          setAccountaddress(window.ethereum._state.accounts[0]);
        }
        // trigger when account change: logout or login
        ethereum.on("accountsChanged", function (accounts) {
        if (window.ethereum._state.accounts.length > 0) {
          setAccountaddress(window.ethereum._state.accounts[0]);
        } else {
          setAccountaddress([]);
        }
        });
      } else {
          console.log("metamask not installed");
      }
    } else {
        console.log("window not loaded yet");
    }
  }, []);
  const signinMetamask = async () => {
    // const accounts =
    await ethereum.request({ method: "eth_requestAccounts" });
    // const account = accounts[0];
  };
  return (
    <>
      {ismetamask ? (
        <>
          {accountaddress.length < 1 ? (
            <>
              <button
                onClick={() => {
                  signinMetamask();
                }}
                className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
              >
                Connect MetaMask
              </button>
            </>
          ) : (
            <>user: {accountaddress}</>
          )}
        </>
      ) : (
        <>MetaMask not installed</>
      )}
    </>
  );
}