import React , { useState , useEffect } from 'react' ; import { useWeb3React } from '@web3-react/core' ; import styled from 'styled-components' ; import { useTranslation } from 'react-i18next' ; import { network } from '../../connectors' ; import { useEagerConnect , useInactiveListener } from '../../hooks' ; import { NetworkContextName } from '../../constants' ; import Loader from '../Loader' ; const MessageWrapper = styled . div `
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20rem;
` ; const Message = styled . h2 `
  color: ${ ( { theme } ) => theme . secondary1 };
` ; export default function Web3ReactManager ( { children } ) { const { t } = useTranslation ( ) ; const { active } = useWeb3React ( ) ; const { active : networkActive , error : networkError , activate : activateNetwork } = useWeb3React ( NetworkContextName ) ; const triedEager = useEagerConnect ( ) ; useEffect ( ( ) => { if ( triedEager && ! networkActive && ! networkError && ! active ) { activateNetwork ( network ) ; } } , [ triedEager , networkActive , networkError , activateNetwork , active ] ) ; useInactiveListener ( ! triedEager ) ; const [ showLoader , setShowLoader ] = useState ( false ) ; useEffect ( ( ) => { const timeout = setTimeout ( ( ) => { setShowLoader ( true ) ; } , 600 ) ; return ( ) => { clearTimeout ( timeout ) ; } ; } , [ ] ) ; if ( ! triedEager ) { return null ; } if ( ! active && networkError ) { return ( < MessageWrapper > < Message > { t ( 'unknownError' ) } < /Message> < /MessageWrapper>); } if ( ! active && ! networkActive ) { return showLoader ? ( < MessageWrapper > < Loader /> < /MessageWrapper>) : null; } return children ; }