web3-react causes my app to hang with no errors

Question

I am building an app that uses the Etherium wallet called metamask or 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

This is the connection to 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

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()

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.

Answer 1

I figured out what the problem is, I did not switch to the Ropsten network.