Merge pull request #31 from aleph-im/Feat/Logout

Fix: logout and auto-recconect using SessionStorage

package.json

@@ -26,6 +26,7 @@
     "react-dom": "18.2.0",
     "styled-components": "^5.3.6",
     "typescript": "4.9.5",
+    "usehooks-ts": "^2.9.1",
     "uuid": "^9.0.0"
   },
   "devDependencies": {

src/components/common/Main/cmp.tsx

@@ -3,16 +3,11 @@ import { MainProps } from './types'
 import { useConnect } from '@/hooks/common/useConnect'
 
 export const Main = ({ children }: MainProps) => {
-  const { isConnected, connect } = useConnect()
+  const { tryReconnect } = useConnect()
 
   useEffect(() => {
-    async function tryReconnect() {
-      if (isConnected) return
-      await connect()
-    }
-
     tryReconnect()
-  }, [connect, isConnected])
+  }, [tryReconnect])
 
   return <main>{children}</main>
 }

src/hooks/common/useConnect.ts

@@ -5,17 +5,23 @@ import { useNotification } from '@aleph-front/aleph-core'
 import { Account } from 'aleph-sdk-ts/dist/accounts/account'
 import { Chain } from 'aleph-sdk-ts/dist/messages/types'
 import { useCallback } from 'react'
+import { useSessionStorage } from 'usehooks-ts'
 
 export type UseConnectReturn = {
   connect: () => Promise<Account | undefined>
   disconnect: () => Promise<void>
   isConnected: boolean
   account: Account | undefined
+  tryReconnect: () => Promise<void>
 }
 
 export function useConnect(): UseConnectReturn {
   const [state, dispatch] = useAppState()
   const noti = useNotification()
+  const [keepAccountAlive, setKeepAccountAlive] = useSessionStorage(
+    'keepAccountAlive',
+    false,
+  )
 
   const onError = useCallback(
     (error: string) => {
@@ -46,29 +52,37 @@ export function useConnect(): UseConnectReturn {
     }
 
     if (!account) return
+    setKeepAccountAlive(true)
 
     await Promise.all([getBalance(account)]).catch((err) => {
       onError(err.message)
     })
 
     dispatch({ type: ActionTypes.connect, payload: { account } })
     return account
-  }, [getBalance, dispatch, onError])
+  }, [setKeepAccountAlive, getBalance, dispatch, onError])
 
   // @todo: Think if it is necessary preload all on connect
   // useAccountProducts()
 
   const disconnect = useCallback(async () => {
+    setKeepAccountAlive(false)
     dispatch({ type: ActionTypes.disconnect, payload: null })
-  }, [dispatch])
+  }, [dispatch, setKeepAccountAlive])
 
   const { account } = state
   const isConnected = !!account?.address
 
+  const tryReconnect = useCallback(async () => {
+    if (isConnected || !keepAccountAlive) return
+    await connect()
+  }, [isConnected, keepAccountAlive, connect])
+
   return {
     connect,
     disconnect,
     isConnected,
     account,
+    tryReconnect,
   }
 }