[FIXED] Issue 34: Listener added to wallet provider in order to detect account changed

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<HTMLDivElement | null>(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 (
     <StyledHeader>
       <StyledNavbar
@@ -124,7 +144,7 @@ export const Header = () => {
                             color: 'orange',
                             icon: 'circle',
                             name: 'Metamask',
-                            provider: () => window.ethereum,
+                            provider: () => provider(),
                           },
                         ],
                       },

src/hooks/common/useAccountEntity/useAccountDomains.ts

@@ -50,6 +50,7 @@ export function useAccountDomains({
     onSuccess,
     onError,
     triggerOnMount,
+    triggerDeps: [appState.account],
   })
 
   const entities = appState.accountDomains

src/hooks/common/useAccountEntity/useAccountFunctions.ts

@@ -50,6 +50,7 @@ export function useAccountFunctions({
     onSuccess,
     onError,
     triggerOnMount,
+    triggerDeps: [appState.account],
   })
 
   const entities = appState.accountFunctions

src/hooks/common/useAccountEntity/useAccountInstances.ts

@@ -50,6 +50,7 @@ export function useAccountInstances({
     onSuccess,
     onError,
     triggerOnMount: true,
+    triggerDeps: [appState.account],
   })
 
   const entities = appState.accountInstances

src/hooks/common/useAccountEntity/useAccountSSHKeys.ts

@@ -50,6 +50,7 @@ export function useAccountSSHKeys({
     onSuccess,
     onError,
     triggerOnMount,
+    triggerDeps: [appState.account],
   })
 
   const entities = appState.accountSSHKeys

src/hooks/common/useAccountEntity/useAccountVolumes.ts

@@ -50,6 +50,7 @@ export function useAccountVolumes({
     onSuccess,
     onError,
     triggerOnMount,
+    triggerDeps: [appState.account],
   })
 
   const entities = appState.accountVolumes

src/hooks/common/useRequest.ts

@@ -8,6 +8,7 @@ import {
 export type UseRequestProps<T> = UseRequestStateProps<T> & {
   doRequest: () => Promise<T>
   triggerOnMount?: boolean
+  triggerDeps?: any[]
 }
 
 export type UseRequestReturn<T> = RequestState<T> & {
@@ -17,6 +18,7 @@ export type UseRequestReturn<T> = RequestState<T> & {
 export function useRequest<T>({
   doRequest,
   triggerOnMount,
+  triggerDeps = [],
   ...rest
 }: UseRequestProps<T>): UseRequestReturn<T> {
   const [reqState, { onLoad, onSuccess, onError }] = useRequestState(rest)
@@ -37,7 +39,7 @@ export function useRequest<T>({
     if (!triggerOnMount) return
     request()
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
+  }, triggerDeps)
 
   return { ...reqState, request }
 }