useAccount.ts
1 import { useEthers } from '@usedapp/core' 2 import { useEffect, useState } from 'react' 3 import { config } from '../config' 4 5 type Error = { 6 name: string 7 message: string 8 stack?: string 9 } 10 11 export function useAccount() { 12 const { error, isLoading, active, switchNetwork, activateBrowserWallet, deactivate, account } = useEthers() 13 const [activateError, setActivateError] = useState<Error | undefined>(undefined) 14 const [isActive, setIsActive] = useState(false) 15 16 useEffect(() => { 17 if (active && error && !isLoading) { 18 setActivateError(error) 19 } else if (!error) { 20 setActivateError(undefined) 21 } 22 }, [active, error, isLoading]) 23 24 useEffect(() => { 25 setIsActive(Boolean(account && !activateError)) 26 }, [account, activateError]) 27 28 useEffect(() => { 29 if (activateError?.name === 'ChainIdError') { 30 switchNetwork(config.usedappConfig.readOnlyChainId!) 31 } 32 }, [activateError]) 33 34 const connect = async () => { 35 setActivateError(undefined) 36 activateBrowserWallet() 37 } 38 39 const disconnect = async () => { 40 setActivateError(undefined) 41 deactivate() 42 } 43 44 return { connect, disconnect, account, isActive, error: activateError, switchNetwork } 45 }