/ packages / DApp / src / hooks / useAccount.ts
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  }