diff --git a/src/components/common/Header/cmp.tsx b/src/components/common/Header/cmp.tsx index 8223ec68..95eb71a0 100644 --- a/src/components/common/Header/cmp.tsx +++ b/src/components/common/Header/cmp.tsx @@ -10,8 +10,9 @@ import Link from 'next/link' import { StyledHeader, StyledButton, StyledNavbar } from './styles' import { ellipseAddress } from '@/helpers/utils' import { useHeader } from '@/hooks/pages/useHeader' -import { useRef } from 'react' +import { useEffect, useRef } from 'react' import { useOnClickOutside } from 'usehooks-ts' +import { useConnect } from '@/hooks/common/useConnect' export const Header = () => { const { @@ -23,6 +24,8 @@ export const Header = () => { setDisplayWalletPicker, accountBalance, } = useHeader() + + const { connect } = useConnect() const divRef = useRef(null) useOnClickOutside(divRef, () => { if (displayWalletPicker) setDisplayWalletPicker(false) @@ -32,6 +35,23 @@ export const Header = () => { setDisplayWalletPicker(!displayWalletPicker) } + const provider = () => { + window.ethereum.on('accountsChanged', function () { + connect() + }) + + return window.ethereum + } + + useEffect(() => { + provider() + return () => { + window.ethereum.removeListener('accountsChanged', () => { + connect() + }) + } + }, []) + return ( { color: 'orange', icon: 'circle', name: 'Metamask', - provider: () => window.ethereum, + provider: () => provider(), }, ], }, diff --git a/src/hooks/common/useAccountEntity/useAccountDomains.ts b/src/hooks/common/useAccountEntity/useAccountDomains.ts index d25d42e7..55103351 100644 --- a/src/hooks/common/useAccountEntity/useAccountDomains.ts +++ b/src/hooks/common/useAccountEntity/useAccountDomains.ts @@ -50,6 +50,7 @@ export function useAccountDomains({ onSuccess, onError, triggerOnMount, + triggerDeps: [appState.account], }) const entities = appState.accountDomains diff --git a/src/hooks/common/useAccountEntity/useAccountFunctions.ts b/src/hooks/common/useAccountEntity/useAccountFunctions.ts index 9122eb60..999d99f1 100644 --- a/src/hooks/common/useAccountEntity/useAccountFunctions.ts +++ b/src/hooks/common/useAccountEntity/useAccountFunctions.ts @@ -50,6 +50,7 @@ export function useAccountFunctions({ onSuccess, onError, triggerOnMount, + triggerDeps: [appState.account], }) const entities = appState.accountFunctions diff --git a/src/hooks/common/useAccountEntity/useAccountInstances.ts b/src/hooks/common/useAccountEntity/useAccountInstances.ts index 8942113c..2cc59e98 100644 --- a/src/hooks/common/useAccountEntity/useAccountInstances.ts +++ b/src/hooks/common/useAccountEntity/useAccountInstances.ts @@ -50,6 +50,7 @@ export function useAccountInstances({ onSuccess, onError, triggerOnMount: true, + triggerDeps: [appState.account], }) const entities = appState.accountInstances diff --git a/src/hooks/common/useAccountEntity/useAccountSSHKeys.ts b/src/hooks/common/useAccountEntity/useAccountSSHKeys.ts index 132dba21..1b35a569 100644 --- a/src/hooks/common/useAccountEntity/useAccountSSHKeys.ts +++ b/src/hooks/common/useAccountEntity/useAccountSSHKeys.ts @@ -50,6 +50,7 @@ export function useAccountSSHKeys({ onSuccess, onError, triggerOnMount, + triggerDeps: [appState.account], }) const entities = appState.accountSSHKeys diff --git a/src/hooks/common/useAccountEntity/useAccountVolumes.ts b/src/hooks/common/useAccountEntity/useAccountVolumes.ts index 140e3a1e..61d77a4d 100644 --- a/src/hooks/common/useAccountEntity/useAccountVolumes.ts +++ b/src/hooks/common/useAccountEntity/useAccountVolumes.ts @@ -50,6 +50,7 @@ export function useAccountVolumes({ onSuccess, onError, triggerOnMount, + triggerDeps: [appState.account], }) const entities = appState.accountVolumes diff --git a/src/hooks/common/useRequest.ts b/src/hooks/common/useRequest.ts index aab0ade2..e11274f7 100644 --- a/src/hooks/common/useRequest.ts +++ b/src/hooks/common/useRequest.ts @@ -8,6 +8,7 @@ import { export type UseRequestProps = UseRequestStateProps & { doRequest: () => Promise triggerOnMount?: boolean + triggerDeps?: any[] } export type UseRequestReturn = RequestState & { @@ -17,6 +18,7 @@ export type UseRequestReturn = RequestState & { export function useRequest({ doRequest, triggerOnMount, + triggerDeps = [], ...rest }: UseRequestProps): UseRequestReturn { const [reqState, { onLoad, onSuccess, onError }] = useRequestState(rest) @@ -37,7 +39,7 @@ export function useRequest({ if (!triggerOnMount) return request() // eslint-disable-next-line react-hooks/exhaustive-deps - }, []) + }, triggerDeps) return { ...reqState, request } }