如何使用 Web3-react 保持 MetaMask 与 UI 的连接？

如何解决如何使用 Web3-react 保持 MetaMask 与 UI 的连接？

我正在使用 web3-react，但我不知道如何在浏览器刷新时保持与 MetaMask 钱包的连接。

这是代码：

// define the injectedConnectors

const injectedConnector = new InjectedConnector({
  supportedChainIds: [
    1,// Mainet
    3,// Ropsten
    4,// Rinkeby
    5,// Goerli
    42,// Kovan
  ],})

const { chainId,account,activate,active } = useWeb3React()
// activate the wallet
activate(injectedConnector)
console.log(account)
// all good. 

到这里一切正常，我激活了我的 MetaMask 钱包，并且我正确记录了帐户，并且活动变量是一个布尔值，它更改为 true。 问题是，当我刷新页面时，active 变为 false，并且我失去了 UI 与 MetaMask 钱包之间的连接。当然，将 active 保存到浏览器中不会改变任何东西，因为连接依赖于 active 布尔值。 文档缺少此类信息。 任何帮助将不胜感激。

解决方法

终于找到解决办法了！ 我试图使用官方库中的示例 using ... 但由于某种原因它没有工作，尽管没有出现错误。 然后我偶然发现了一个有同样问题的人并在 reddit 上发帖，并得到了一个对我有用的好答案。 这是帖子的链接：https://www.reddit.com/r/ethdev/comments/nw7iyv/displaying_connected_wallet_after_browser_refresh/h5uxl88/?context=3 这是该帖子中的代码：

首先创建一个文件，其中包含名为 connector.js 的注入连接器：

import { InjectedConnector } from '@web3-react/injected-connector'
export const Injected = new InjectedConnector({ supportedNetworks: [1,3,4,5,42] })

然后创建一个组件来检查用户是否已经激活了钱包：

import React,{ useEffect,useState } from 'react'
import { injected } from '../connectors'
import { useWeb3React } from '@web3-react/core'

function MetamaskProvider({ children }) {
  const { active: networkActive,error: networkError,activate: activateNetwork } = useWeb3React()
  const [loaded,setLoaded] = useState(false)
  useEffect(() => {
    injected
      .isAuthorized()
      .then((isAuthorized) => {
        setLoaded(true)
        if (isAuthorized && !networkActive && !networkError) {
          activateNetwork(injected)
        }
      })
      .catch(() => {
        setLoaded(true)
      })
  },[activateNetwork,networkActive,networkError])
  if (loaded) {
    return children
  }
  return <>Loading</>
}

export default MetamaskProvider

并将 MetamaskProvider 包裹在您希望在刷新时激活钱包的组件：

 return (
    <ThemeProvider theme={darkMode ? darkTheme : lightTheme}>
      <StylesProvider injectFirst>
        <Paper>
          <Router>
            <Web3ReactProvider getLibrary={getLibrary}>
              <MetamaskProvider>
              {...children components}
              </MetamaskProvider>
            </Web3ReactProvider>
          </Router>
        </Paper>
      </StylesProvider>
    </ThemeProvider>
  );