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, } }