标签: web3-react

我正在开发我的第一个 Dapp，为此我使用 metamask 和 web3。到目前为止，我能够获取我的钱包余额并将帐户连接到元掩码。现在我正在尝试在两个网络之间切换，我正在使用handleChainChanged，我还传递了chainId和Networkversion，但是它给了我错误。我不确定是否从changeNetwork函数返回任何内容，或者我只需要传递chainId和Networkversion。

import { useStoreApi } from "./storeApi";
import { useState } from "react";
import useWeb3 from "./useWeb3";
import { Button, TextField } from "@material-ui/core";

import "./App.css";

function App() {
  const { balance, address, message, setAddress, setBalance } = useStoreApi();
  const web3 = useWeb3();

  // get user account on button click
  const getUserAccount = async () => {
    if (window.ethereum) {
      try {
        await window.ethereum.enable();
        web3.eth.getAccounts().then((accounts) => {
          setAddress(accounts[0]);
          updateBalance(accounts[0]);
          console.log(accounts);
        });
      } catch (error) {
        console.error(error); …

我一直在尝试按照web3-react的文档集成WalletConnect。

我用于连接器的配置如下：

import { WalletConnectConnector } from '@web3-react/walletconnect-connector';

export const walletconnect = new WalletConnectConnector({
  rpc: { 1: RPC_URLS[1], 4: RPC_URLS[4] },
  infuraId: INFURA_TOKEN,
  bridge: BRIDGE_URL,
  qrcode: true,
  pollingInterval: 15000,
});

另外，软件包的版本如下：

"@web3-react/core": "^6.0.9",
"@web3-react/walletconnect-connector": "^6.2.0",

当我使用以下代码中解释的activate函数时：useWeb3React()

const { connector, activate, active, account } = useWeb3React();

activate(walletconnect, undefined, true)
    .catch((error) => {
        if (error instanceof UnsupportedChainIdError) {
            activate(walletconnect)
        } else {
            console.log('Pending Error Occured')
        }
    })

它能够生成二维码，我也能够成功扫描手机上的 MetaMask 应用程序，并在移动应用程序上显示已成功连接。

不过，在 Web 应用程序的控制台日志上，它显示一条警告：

Warning: …

我正在使用web3-react@^5.0.5我的 React 应用程序与 web3 进行交互。我可以很好地连接到元掩码。

我将库设置为ethers.js并连接到metmask。连接工作正常，但几乎没有 ethers.js 的方法。例如，useWeb3Context().library.ContractFactory不存在。

这是正常的吗？

代码

根组件：

  ...
  return (
    <Web3Provider connectors={connectors} libraryName="ethers.js">
      ...
    </Web3Provider>
  );
  ...

connectors目的：

  ...
  return (
    <Web3Provider connectors={connectors} libraryName="ethers.js">
      ...
    </Web3Provider>
  );
  ...

子组件：

const { InjectedConnector } = Connectors;

// Initially support Ropsten and Mainnet
const MetaMask = new InjectedConnector({ supportedNetworks: [1, 3] });

export const connectors = { MetaMask };

我正在使用 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 钱包之间的连接。当然，将活动保存到浏览器中不会改变任何内容，因为连接依赖于活动布尔值。

文档缺乏此类信息。

我正在尝试将 web3 钱包连接按钮添加到我的网页上，但我收到此错误，并且很长一段时间以来我无法解决它。这是一个 nextjs 反应应用程序。

const InvitesPage: NextPage = () => {
  let web3Modal: any;
  useEffect(() => {
    web3Modal = new Web3Modal({
      network: 'rinkeby',
      theme: 'light', // optional, 'dark' / 'light',
      cacheProvider: false, // optional
      providerOptions: providerOptions, // required
    });
  });

  const classes = useStyles();
  const { themeStretch } = useSettings();

  const [connectedAccount, setConnectedAccount] = useState('');

  const connectWeb3Wallet = async () => {
    try {
      const instance = await web3Modal.connect();
      const provider = new ethers.providers.Web3Provider(instance);
      const web3Accounts = await provider.listAccounts(); …

我刚刚从头开始一个新的反应应用程序。我按照https://medium.com/age-of-awareness/setup-react-with-webpack-and-babel-5114a14a47e9上的说明进行操作

这是我的 package.json 文件

{
  "name": "html2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack serve --mode development",
    "build": "webpack --mode production"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "@babel/core": "^7.15.5",
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@babel/preset-env": "^7.15.6",
    "@babel/preset-react": "^7.14.5",
    "babel-loader": "^8.2.2",
    "compression-webpack-plugin": "^9.0.0",
    "html-webpack-plugin": "^5.3.2",
    "webpack": "^5.56.0",
    "webpack-cli": "^4.8.0",
    "webpack-dev-server": "^4.3.0"
  }
}

一切都很顺利，运行和构建，直到我尝试添加 web3 包。我用

npm install web3 --save-dev

安装该包并将其引用到我的 index.js 文件中 …

我在将 web3 导入到 ReactJS 时遇到问题。要复制我的问题，请初始化一个新的反应应用程序

npx create-react-app my-app
cd my-app

然后在此位置打开终端。写：

npm install web3
npm install

在 App,js 文件中添加以下行

import Web3 from "web3"; 

我在执行此操作后收到错误，npm start然后收到未解决的错误，即

找不到模块：错误：无法解析“流”

找不到模块：错误：无法解析“加密”

我尝试在网上寻找解决方案，特别是我尝试了以下每个

1. 如何在 webpack 5 中 Polyfill 节点核心模块
2. https://www.youtube.com/watch?v=u1PPNIBvQjk
3. 导入 web3 导致 React js 出现问题
4. https://github.com/facebook/create-react-app/issues/11756#issuecomment-1001162736
5. https://namespaceit.com/blog/how-fix-writing-change-webpack-5-used-to-include-polyfills-for-nodejs-core-modules-by-default-error
6. 如何使用 create-react-app 创建 React App 包括 Web3？我收到模块未找到错误。重大变更：使用了 webpack < 5

似乎没有人适合我。对于如何解决这个问题有什么建议吗？谢谢你！