diff --git a/package-lock.json b/package-lock.json
index e187a151..c1c2f2fc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,6 +23,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": {
@@ -9847,6 +9848,19 @@
"resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-4.3.0.tgz",
"integrity": "sha512-73sE9+3UaLYYFmDsFZnqCInzPyh3MqIwZO9cw58yIqAZhONrrabrYyYe3TuIqtIiOuTXVhsGau8hcrhhwSsDIQ=="
},
+ "node_modules/usehooks-ts": {
+ "version": "2.9.1",
+ "resolved": "https://registry.npmjs.org/usehooks-ts/-/usehooks-ts-2.9.1.tgz",
+ "integrity": "sha512-2FAuSIGHlY+apM9FVlj8/oNhd+1y+Uwv5QNkMQz1oSfdHk4PXo1qoCw9I5M7j0vpH8CSWFJwXbVPeYDjLCx9PA==",
+ "engines": {
+ "node": ">=16.15.0",
+ "npm": ">=8"
+ },
+ "peerDependencies": {
+ "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+ "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+ }
+ },
"node_modules/utf-8-validate": {
"version": "5.0.10",
"resolved": "https://registry.npmjs.org/utf-8-validate/-/utf-8-validate-5.0.10.tgz",
@@ -17323,6 +17337,12 @@
}
}
},
+ "usehooks-ts": {
+ "version": "2.9.1",
+ "resolved": "https://registry.npmjs.org/usehooks-ts/-/usehooks-ts-2.9.1.tgz",
+ "integrity": "sha512-2FAuSIGHlY+apM9FVlj8/oNhd+1y+Uwv5QNkMQz1oSfdHk4PXo1qoCw9I5M7j0vpH8CSWFJwXbVPeYDjLCx9PA==",
+ "requires": {}
+ },
"utf-8-validate": {
"version": "5.0.10",
"resolved": "https://registry.npmjs.org/utf-8-validate/-/utf-8-validate-5.0.10.tgz",
diff --git a/package.json b/package.json
index 4fb297ed..37048c20 100644
--- a/package.json
+++ b/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": {
diff --git a/src/components/common/Main/cmp.tsx b/src/components/common/Main/cmp.tsx
index f4f57286..0003e367 100644
--- a/src/components/common/Main/cmp.tsx
+++ b/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 {children}
}
diff --git a/src/hooks/common/useConnect.ts b/src/hooks/common/useConnect.ts
index f8caa361..9b858c3b 100644
--- a/src/hooks/common/useConnect.ts
+++ b/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
disconnect: () => Promise
isConnected: boolean
account: Account | undefined
+ tryReconnect: () => Promise
}
export function useConnect(): UseConnectReturn {
const [state, dispatch] = useAppState()
const noti = useNotification()
+ const [keepAccountAlive, setKeepAccountAlive] = useSessionStorage(
+ 'keepAccountAlive',
+ false,
+ )
const onError = useCallback(
(error: string) => {
@@ -46,6 +52,7 @@ export function useConnect(): UseConnectReturn {
}
if (!account) return
+ setKeepAccountAlive(true)
await Promise.all([getBalance(account)]).catch((err) => {
onError(err.message)
@@ -53,22 +60,29 @@ export function useConnect(): UseConnectReturn {
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,
}
}