import MetaMaskOnboarding from "@metamask/onboarding" ; import { useWeb3React } from "@web3-react/core" ; import { UserRejectedRequestError } from "@web3-react/injected-connector" ; import { useEffect , useRef , useState } from "react" ; import { injected } from "../utils/web3Connectors" ; import useENSName from "../hooks/useENSName" ; import { formatEtherscanLink , shortenIfHex } from "../utils/misc" ; type Props = { triedToEagerConnect : boolean ; } ; const Account = ( { triedToEagerConnect } ) => { const { active , error , activate , chainId , account , setError , } = useWeb3React ( ) ; const onboarding = useRef < MetaMaskOnboarding > ( ) ; useEffect ( ( ) => { onboarding . current = new MetaMaskOnboarding ( ) ; } , [ ] ) ; const [ connecting , setConnecting ] = useState ( false ) ; useEffect ( ( ) => { if ( active || error ) { setConnecting ( false ) ; onboarding . current ?. stopOnboarding ( ) ; } } , [ active , error ] ) ; const ENSName = useENSName ( account ) ; if ( error ) { return null ; } if ( ! triedToEagerConnect ) { return null ; } if ( typeof account !== "string" ) { const hasMetaMaskOrWeb3Available = MetaMaskOnboarding . isMetaMaskInstalled ( ) || ( window as any ) ?. ethereum || ( window as any ) ?. web3 ; return ( < div > { hasMetaMaskOrWeb3Available ? ( < button className = "nes-btn py-1 transition duration-150 text-sm font-semibold" onClick = { ( ) => { setConnecting ( true ) ; activate ( injected , undefined , true ) . catch ( ( error ) => { if ( error instanceof UserRejectedRequestError ) { setConnecting ( false ) ; } else { setError ( error ) ; } } ) ; } } > { MetaMaskOnboarding . isMetaMaskInstalled ( ) ? "Connect to MetaMask" : "Connect to Wallet" } < /button>) : (<button className="inline-flex items-center px-4 py-1 border border-white shadow-sm text-sm font-semibold rounded-full text-white bg-blur hover:opacity-80 transition duration-150" onClick={() => onboarding.current?.startOnboarding()}> Install Metamask < /button>)} < /div>); } return ( < a { ... { href : formatEtherscanLink ( "Account" , [ chainId , account ] ) , target : "_blank" , rel : "noopener noreferrer" , className : "nes-btn py-1 is-primary text-sm font-semibold transition duration-150" } } > { ENSName || `${ shortenIfHex ( account , 12 ) }` } < /a>); } ; export default Account ;