[英]web3-react causes my app to hang with no errors
I am building an app that uses the Etherium wallet called metamask or infura.我正在构建一个使用名为 metamask 或 infura 的以太坊钱包的应用程序。 The app compiles and runs without any errors, all the components load but I get a blank screen.
该应用程序编译并运行没有任何错误,所有组件都加载但我得到一个空白屏幕。
This app uses the web3-react package on npm https://www.npmjs.com/package/web3-react这个应用程序在 npm https://www.npmjs.com/package/web3-react上使用 web3-react package
This is the connection to web3-react:这是与 web3-react 的连接:
import { Connectors } from 'web3-react'
const { InjectedConnector, NetworkOnlyConnector } = Connectors
const MetaMask = new InjectedConnector({ supportedNetworks: [1, 4] })
const Infura = new NetworkOnlyConnector({
providerURL: process.env.ENDPOINT
})
const connectors = { MetaMask, Infura }
export default connectors
The App.js calls on web3-react for the Web3Provider wrapper and the Connector App.js 为 Web3Provider 包装器和连接器调用 web3-react
import React, { Component } from 'react'
import { BrowserRouter as Router, Route} from 'react-router-dom'
import axios from 'axios'
import Web3Provider from 'web3-react'
import './css/bootstrap.min.css'
import './App.css'
import Header from './components/header'
import Home from './components/home'
import Connector from './web3Conn'
class App extends Component {
constructor(props) {
super(props);
this.state = {}
}
componentDidMount () {
axios.get('/api/test')
.then((response) => {
console.log(response.data)
this.setState({ price: response.data.price })
})
.catch(err => console.log(err))
}
render() {
return (
<Web3Provider
connectors={Connector}
libraryName={'ethers.js'|'web3.js'|null}>
<Router>
<Header />
<Route
path='/'
exact
component={Home}
/>
</Router>
</Web3Provider>
)
}
}
export default App
And this is the component that uses the web3-react, it accesses it but using useWeb3Context()这是使用 web3-react 的组件,它访问它但使用 useWeb3Context()
import React, { useState, useEffect } from 'react'
import { useWeb3Context } from 'web3-react'
const Home = () => {
const fire = e => {
e.preventDefault()
// Call the smart contract
}
const stop = e => {
e.preventDefault()
// Call the smart contract
}
const context = useWeb3Context()
useEffect(() => {
context.setFirstValidConnector(['MetaMask', 'Infura'])
}, [])
if (!context.active && !context.error) {
console.log(context.account)
console.log("Web3 Integration was a success")
}
else if (context.error) {
console.log(context.error)
}
else {
console.log("Context is not active")
}
return(
<React.Fragment>
<div className="App">
<header className="App-header">
<p>
<h1>Coinbot</h1>
</p>
<div class="row mx-md-n5">
<div class="col px-md-5">
<div class="p-3 border bg-light">
<button
type="button"
class="btn btn-primary btn-lg px-2"
onClick={(e) => fire(e)}>
RUN
</button>
</div>
</div>
<div class="col px-md-5">
<div class="p-3 border bg-light">
<button
type="button"
class="btn btn-primary btn-lg px-2"
onClick={(e) => stop(e)}>
STOP
</button>
</div>
</div>
</div>
</header>
</div>
</React.Fragment>
)
}
export default Home
I am lost, I don't know why I am seeing just a white screen.我迷路了,我不知道为什么我只看到一个白屏。
I figured out what the problem is, I did not switch to the Ropsten network.我弄清楚了问题所在,我没有切换到 Ropsten 网络。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.