如何通过 Web3-react 保持 MetaMask 与 UI 的连接持久？

Question

我正在使用 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 钱包，并且正确记录了帐户，并且 active 变量是一个布尔值，会更改为 true。

问题是，当我刷新页面时，活动变为 false，并且我失去了 UI 与 MetaMask 钱包之间的连接。当然，将活动保存到浏览器中不会改变任何内容，因为连接依赖于活动布尔值。

文档缺乏此类信息。

Answer 1

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

首先创建一个保存注入连接器的文件，名为connectors.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>
  );