import { useEffect , useState } from 'react' ; import { InjectedConnector , InjectedConnector as MetamaskConnector , } from '@web3-react/injected-connector' ; import { PortisConnector } from '@web3-react/portis-connector' ; import { useWeb3React } from '@web3-react/core' ; import { FortmaticConnector } from './fortmaticConnector' ; import { web3ReactInterface } from './index' ; import { FORTMATIC_KEY , IS_MAINNET , PORTIS_DAPP_ID , INFURA_URL , } from '../../utils/envVars' ; export enum NetworkChainId { 'Mainnet' = 1 , 'Ropsten' = 3 , 'Rinkeby' = 4 , 'Göerli' = 5 , 'Kovan' = 42 } const supportedNetworks = [ NetworkChainId [ 'Göerli' ] , NetworkChainId . Mainnet , NetworkChainId . Rinkeby , NetworkChainId . Ropsten , NetworkChainId . Kovan , ] ; enum Testnet { 'Göerli' } enum Mainnet { 'Mainnet' } export const AllowedNetworks = IS_MAINNET ? Mainnet : Testnet ; export const metamask = new MetamaskConnector ( { supportedChainIds : supportedNetworks , } ) ; export const portis = new PortisConnector ( { dAppId : PORTIS_DAPP_ID , networks : supportedNetworks , } ) ; export const fortmatic = new FortmaticConnector ( { apiKey : FORTMATIC_KEY as string , chainId : IS_MAINNET ? NetworkChainId . Mainnet : NetworkChainId [ 'Göerli' ] , rpcUrl : INFURA_URL , } ) ; export function useMetamaskEagerConnect ( ) { const { activate : connectTo , active : isMetamaskConnected , } = useWeb3React ( ) ; const [ attempted , setAttempted ] = useState ( false ) ; useEffect ( ( ) => { const attemptConnection = async ( ) => { const isAuthorized = await metamask . isAuthorized ( ) ; if ( isAuthorized ) { connectTo ( metamask , undefined , true ) . catch ( ( ) => setAttempted ( true ) ) ; } else { setAttempted ( true ) ; } } ; attemptConnection ( ) ; } , [ connectTo ] ) ; useEffect ( ( ) => { if ( ! attempted && isMetamaskConnected ) setAttempted ( true ) ; } , [ attempted , isMetamaskConnected ] ) ; return attempted ; } export function useMetamaskListener ( suppress = false ) { const { active , error , activate : connectTo } = useWeb3React ( ) ; useEffect ( ( ) : any => { const { ethereum } = window as any ; if ( ethereum && ethereum . on && ! active && ! error && ! suppress ) { const connectToMetamask = ( ) => connectTo ( metamask ) ; const handleAccountsChanged = ( accounts ) => { if ( accounts . length > 0 ) { connectToMetamask ( ) ; } } ; ethereum . on ( 'connect' , connectToMetamask ) ; ethereum . on ( 'chainChanged' , connectToMetamask ) ; ethereum . on ( 'accountsChanged' , handleAccountsChanged ) ; ethereum . on ( 'networkChanged' , connectToMetamask ) ; return ( ) => { if ( ethereum . removeListener ) { ethereum . removeListener ( 'connect' , connectToMetamask ) ; ethereum . removeListener ( 'chainChanged' , connectToMetamask ) ; ethereum . removeListener ( 'accountsChanged' , handleAccountsChanged ) ; ethereum . removeListener ( 'networkChanged' , connectToMetamask ) ; } } ; } } , [ active , error , suppress , connectTo ] ) ; }